홈 JavaScript 5장 - 딥 다이브 (2)
포스트
취소

JavaScript 5장 - 딥 다이브 (2)

게시 2023/03/03
By 최기랑
23 분읽는 시간

JavaScript

모던 자바스크립트

데이터 타입 59p~

데이터 타입

  • 값의 종류를 말하며 모든 값은 데이터 타입을 갖는다.
  • 7개의 데이터 타입이 있고 원시 타입과 객체 타입으로 나눈다.
  • 기본형이 아닌 모든 것은 참조형이다.
구분데이터 타입설명
 숫자 타입숫자,정수와 실수 구분 없이 하나의 숫자 타입만 존재
 문자열 타입문자열
 불리언 타입논리적 참과 거짓
 undefined 타입var 키워드로 선언된 변수에 암묵적으로 할당되는 값
 null 타입값이 없다는 것을 의도적으로 명시할 때 사용하는 값
 심벌 타입ES6에서 추가된 7번째 타입
객체 타입 객체, 함수, 배열 등

6.1 숫자 타입

  • 정수, 실수 등 모두 숫자 타입이다.
  • Infinity,-Infinity,NaN 라는 세 가지 특별한 값도 있다.
    • Infinity,-Infinity : 양과 음의 무한대
    • NaN : 산술 연산 불가
1
2
3
4
5
6
7
8
9
10

var a = 10;
var b = 10.23;
var c = -20;
var d = 0b01000001; // 2진수 = 65
var e = 0o101; // 8진수 = 65
var f = 0x41; // 16진수 = 65

var g = 10 / 0; // Infinity
var h = 20 / -0; // -Infinity
var i = 1 * "String"; // NaN

6.2 문자열 타입

  • 작은따옴표, 큰따옴표, 백틱으로 텍스트를 감싼다.
  • 백틱으로 감싸서 변수를 넣을 수 있다.
    • Hi${여기에는 변수}
  • 따옴표로 감싸지 않은 문자열은 식별자로 인식한다.
  • 문자열로 감싸지 않은 경우 공백 문자를 포함시킬 수 없다.
  • 문자열은 원시 타입으로 값의 변경이 불가능하다.
  • 백틱을 사용하면 줄바꿈도 가능하다.
    • \n

6.3 템플릿 리터럴

  • 문자열 표기법을 말하며, 편리한 문자열 처리 기능을 제공한다.
이스케이프의미
\0Null
\b백스페이스
\f프린터로 출력할 경우 다음 페이지의 시작 지점으로 이동한다.
\n다음 행으로 이동한다.
\r커서를 처음으로 이동한다.
\t탭(수평)
\v탭(수직)
\uXXXX유니코드에 따라 이모지를 출력한다.
'작은따옴표
"큰따옴표

예시

1
2
3
4
5
6
7
8
9
10
11

var template = `<ul>\n\t<li><a href="#">Home</a></li>\n</ul>`;
var template2 = `<ul>
    <li><a href="#">Home</a></li>
  </ul>`;

//출력은 모두
<ul>
  <li>
    <a href="#">Home</a>
  </li>
</ul>;

6.3.2 표현식 삽입

  • 문자열 연산자 +를 사용할 수 있다.
  • 문자열인 경우 연결 연산자로 동작하고, 그 외의 경우는 덧셈 연산자로 동작한다.
1
2
3
4
5
6
7
8
9

var first = "choi";
var last = "chee";
"My name is " +
  first +
  " " +
  last +
  "."// My name is choi chee.
  `My name is ${first} ${last}.`;
// My name is choi chee.

6.4 불리언 타입

  • true와 false 값

6.5 undefined 타입

  • undefined가 유일하다.

6.6 null 타입

  • null이 유일하다.
    • null,Null,NULL은 전부 다르다.

6.7 심벌 타입

  • 변경 불가능한 원시 타입의 값이다.

  • 다른 값과 중복되지 않는 유일무이한 값이며, 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용한다.

    1
2
3
4
5
6

    var key = Symbol("key");
typeof key; // symbol

var obj = {};
obj[key] = "value";
obj[key]; // value

6.8 객체 타입

  • 자바스크립트의 데이터 타입은 크게 원시 타입과 객체 타입으로 분류한다.
  • 원시 타입과 객체 타입은 근본적으로 다르며, 자바스크립트는 객체 기반의 언어이며, 자바스크립트를 이루고 있는 거의 모든 것이 객체이다.

6.9 데이터 타입의 필요성

6.9.1 데이터 타입에 의한 메모리 공간의 확보와 참조

  • 변수를 선언하고 값을 할당하면, 메모리 공간에 들어갈 값의 크기를 먼저 확보한다.
  • 자바스크립트 엔진은 데이터 타입(값의 종류)에 따라 정해진 크기의 메모리 공간을 확보한다.
  • 값을 참조하는 경우에도 한 번에 읽어 들여야 할 메모리 공간의 크기, 메모리 셀의 개수(바이트 수)를 알아야한다.
    • 값의 타입이 바이트로 저장되며, 바이트 단위로 메모리 공간에 저장된 값을 읽어 들인다.

6.9.2 데이터 타입에 의한 값의 해석

  • 메모리 공간의 주소에서 읽어 들인 2진수를 해석하는 과정을 거치며, 이러한 과정이 필요하기 때문에 데이터 타입의 구분이 있어야 한다.
    • 메모리 공간의 크기를 결정하기 위해
    • 참조를 위한 메모리 공간의 크기를 결정하기 위해
    • 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해

6.10 동적 타이핑

6.10.1 동적 타입 언어와 정적 타입 언어

  • 정적 타입 언어
    • C나 자바 같은 언어는 정적 타입 언어이며, 정적 타입 언어란 변수의 타입을 변경할 수 없고 변수에 선언한 타입에 맞는 값만 할당할 수 있다.
    • 정적 타입 언어는 타입 체크(선언한 데이터 타입에 맞는 값을 할당했는지 검사하는 처리)를 수행한다.
    • 만약 타입 체크를 통과하지 못했다면 에러를 발생시키고 프로그램의 실행 자체를 막는다.
    • 이를 통해 타입의 일관성을 강제하여 안정적인 코드를 구현하고, 런타임에 발생하는 에러를 줄인다.
  • 동적 타입 언어
    • 자바스크립트는 변수를 선언할 때 타입을 선언하지 않는다.
    • 미리 선언한 데이터 타입의 값뿐만 아니라 어떠한 데이터 타입의 값이라도 자유롭게 할당할 수 있다.
    • 자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정되며, 재할당에 의해 변수의 타입은 언제든지 변할 수 있다.

6.10.2 동적 타입 언어와 변수

  • 개발자의 의도는 숫자 타입의 변수를 작성하고 싶었지만, 사실은 문자열 타입으로 작성했을 수 있다.
  • 잘못된 예측에 의해 작성된 프로그램은 당연히 오류를 출력할 것이고, 동적 타입 언어는 유연성은 높지만 신뢰성이 낮다.
  • 따라서, 변수를 선언할 때 주의해야 하며,변수는 재할당, 전역 변수 등의 여러 특이점을 갖고 있기 때문에 코드 작성 시 유의하여 가독성이 좋은 코드를 작성해야 한다.

연산자 74p~

7 연산자

  • 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행하여 하나의 값을 만드는 것을 말한다.
1
2
3
4
5
6

5 + 4; // 산술연산자
"Hello" + "World"; // 문자열 연결 연산자
coloe = "red"; // 할당 연산자
3 > 5; // 비교 연산자
true && true; // 논리 연산자
typeof "Hi"; // 타입 연산자

7.1 산술 연산자

  • 수학적 계산을 이용해 새로운 숫자 값을 만든다.
  • 연산이 불가능할 경우, NaN을 반환한다.

7.1.1 이항 산술 연산자

이항 산술 연산자의미
+덧셈
-뺄셈
*곱셈
/나눗셈
%나머지

7.1.2 단항 산술 연산자

단항 산술 연산자의미부수효과
++증가O
–감소O
+어떠한 효과도 없다. 음수를 양수로 반전하지도 않는다.X
-양수를 음수로, 음수를 양수로 반전한 값을 반환한다.X
1
2
3

var x = 1;
x++ === (x = x + 1); // 두 의미는 동일하다.
x-- === (x = x - 1); // 두 의미는 동일하다.
  • 연산자는 위치에 의미가 있다.
1
2
3
4
5
6

var x = 5,
  result;
result = x++; // 선할당 후증가, x=6, result=5
result = ++x; // 선증가 후할당, x=7, result=7
result = x--; // 선할당 후감소, x=6, result=7
result = --x; // 선감소 후할당, x=5, result=5
  • 단항 연산자는 피연산자에 어떠한 효과도 없다.
1
2

+10; // 10
+-10; // -10
  • 숫자 타입이 아닌 피연산자에 단항 연산자를 사용하면 피연산자를 숫자 타입으로 반환한다.

  • 피연산자를 변경하는 것은 아니고 숫자 타입으로 변환한 값을 생성하여 반환하기 때문에, 부수효과는 없다.

    1
2
3
4
5
6
7
8
9
10
11
12
13
14

    var x = "1";
+x; // 1
x; // '1'

x = true;
+x; // 1
x; // true

x = false;
+x; // 0
x; // false

x = "hello" + x; // NaN
x; // "hello"
  • -단항 연산자를 사용하면 피연산자의 부호를 반전한 값으로 반환한다.
  • 마찬가지로 부수효과는 없다.
1
2
3
4

-(-10); // 10
-"10"; // -10
-true; // -1
-"hello"; // NaN

7.1.3 문자열 연결 연산자

  • + 연산자는 피연산자 중 하나 이상이 문자일 경우 문자열 연결 연산자로 동작한다.
  • 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다는 것이다.
  • 이를 암묵적 타입 변환, 타입 강제 변환이라고 한다.
1
2
3
4
5
6

"1" + 2; // "12"
1 + true; // 2
1 + false; // 0
1 + null; // 1
+undefined; // NaN
1 + undefined; // NaN

7.2 할당 연산자

할당 연산자예동일 표현부수 효과
=x = 5x = 5O
+=x += 5x = x + 5O
-=x -= 5x = x - 5O
*=x *= 5x = x * 5O
/=x /= 5x = x / 5O
%=x %= 5x = x % 5O

7.3 비교 연산자

7.3.1 동등/일치 비교 연산자

  • 동등 비교 연산자는 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다.
  • 동등 비교 연산자는 결과를 예측하기 어렵기 때문에, 잘 쓰이지 않는다.
  • 주로 일치,불일치 비교 연산자를 사용한다.
    • 일치, 불일치 비교 연산자는 좌항과 우항의 피연산자가 타입도 같고 값도 같아야 한다.
바교 연산자의미사례설명부수 효과
==동등 비교x == yx와 y의 값이 같음X
===일치 비교x === yx와 y의 값과 타입이 같음X
!=부동등 비교x != yx와 y의 값이 다름X
!==불일치 비교x !== yx와 y의 값과 타입이 다름X

  • 주의 사항

    • NaN은 자신과 일치하지 않는 유일한 값이다.
    • 숫자가 NaN인지 조사하려면 Number.isNaN을 사용한다.
    • 양의 0과 음의 0을 비교하면 true를 반환한다.
    • NaN과 0을 비교하기 위해서는 Object.is 메사드를 사용해야 한다.
    1
2
3
4
5
6
7
8
9
10
11
12
13

    NaN === NaN; // false
Number.isNaN(NaN); // true
Number.isNaN(10); // false
Number.isNaN(1 + undefined); // true

0 === -0; // true
0 == -0; // true

NaN === NaN; // false
Object.is(NaN, NaN); // true

0 === -0; // true
Object.is(0, -0); // false

7.3.2 대소 관계 비교 연산자

  • true나 false값을 반환한다.
대소 관계 비교 연산자예제설명부수효과
>x > yx가 y보다 크다.X
<x < yx가 y보다 작다.X
>=x >= yx가 y보다 크거나 같다.X
<=x <= yx가 y보다 작거나 같다.X

7,4 삼항 조건 연산자

  • 조건식의 결과에 따라 반환할 값을 결정한다. 조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값
1
2
3
4
5
6
7
8

x ? 5 : null;
// x에 값이 있을 떄는 5를 반환하고, 값이 없을 때는 null을 반환한다.
x + 5 === 10 ? '100점' : '0점';
// x + 5가 10일 때, 100점이라는 문자를 반환하고, false일 때는 0점을 반환한다.
var x = if(...){...} else{...};
// if와 다른 점은 if문은 값처럼 사용할 수 없다.
var x = x + 100 >= 100 ? 1 : 0;
x; // x는 1 혹은 0을 리턴한다.

7.5 논리 연산자

논리 연산자의미부수효과  
` `논리합(OR)X
&&논리곱(AND)X  
!부정(NOT)X  

7.6 쉼표 연산자

  • 왼쪽 피연산자부터 차례대로 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환한다.
1
2

var x, y, z;
(x = 1), (y = 2), (z = 3); // 3

7.7 그룹 연산자

  • 소괄호로 피연산자를 감싸 우선순위를 조절한다.
1
2

10 * 2 + 3; // 23
10 * (2 + 3); // 50

7.8 typeof 연산자

  • 피연산자의 ㄷ이터 타입을 문자열로 반환한다.

  • 7가지 문자열 중 하나를 반환하는데, 7개의 데이터 타입이 항상 정확히 일치하지는 않는다.

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    typeof '' // "string"
typeof 1 // "number"
typeof NaN // "number"
typeof true // "boolean"
typeof undefined // "undefined"
typeof Symbol() // "symbol"
typeof null // "object"
typeof [] // "object"
typeof {} // "object"
typeof new Date() // "object"
typeof /test/gi // "object"
typeof function() // "function"

var foo = null;
typeof foo === null; // false
foo === null; // true

7.9 지수 연산자

  • 좌항의 피연산자를 밑 으로, 우항의 피연산자를 지수로 거듭 제곱하여 숫자 값을 반환한다.
1
2
3

2 ** 2; // 4
2 ** 0; // 1
2 ** -2; // 0.25
  • 지수 연산자가 도입되기 이전에는 Math.pow 메서드를 사용했다.
1
2
3

Math.pow(2, 2); // 4
Math.pow(2, 0); // 1
Math.pow(2, -2); // 0.25
  • 지수 연산자는 다음과 같은 상황에서 Math.pow보다 가독성이 좋다.
1
2

2 ** (3 ** 2); // 512
Math.pow(2, Math.pow(3, 2)); // 512
  • 음수를 거듭제곱의 밑으로 사용하려는 경우 괄호로 묶어야 한다.
1
2
3

-5 ** 2;
// SyntaxError : ...
(-5) ** 2; // 25
  • 할당 연산자와 함께 사용할 수 있으며, 이항 연산자 중에서 우선순위가 가장 높다.
1
2
3

var num = 2;
num ** 2; // 4
num * 5 ** 2; // 50

7.10 그외의 연산자

연산자개요참고
?.옵셔널 체이닝 연산자9.4.2절 “옵셔널 체이닝 연산자”
??null 병합 연산자9.4.3절 “null 병합 연산자”
delete프로퍼티 삭제10.8절 “프로퍼티 삭제”
new생성자 함수를 호출할 때 사용하여 인스턴스를 생성17.2.6절 “new 연산자”
instanceof좌변의 객체가 우변의 생성자 함수와 연결된 인스턴스인지 판별19.10절 “instanceof 연산자”
in프로퍼티 존재 확인19.13.1절 “in 연산자”

7.11 연산자의 부수 효과

  • 대부분의 연산자는 다른 코드에 영향을 주지 않지만 할당 연산자,증가/감소 연산자,delete 연산자는 부수 효과가 있다.

    1
2
3
4
5
6
7

    var x;
x = 1;

x++; // x = 2 로 재할당

var o = { a: 1 };
delete o.a; // o = {} 프로퍼티 자체를 삭제

7.12 연산자 우선순위

  • 여러 개의 연산자가 실행될 때 우선순위가 다르다.
우선순위연산자  
1()  
2new(매개변수 존재), ..[](프로퍼티 접근), ()(함수호출), ?.(옵셔널 체이닝 연산자)  
3new(매개변수 미존재)  
4x++, x--  
5!x, +x, -x, ++x, --x, typeof, delete  
6**(이상 연산자 중에서 우선순위가 가장 높다.)  
7*, /, %  
8+, -  
9<, <=, >, >=, in, instanceof  
10==, !=, ===, !==  
11??(null 병합 연산자)  
12&&  
13` `
14?.. : ..  
15할당 연산자  
16,  

7.13 연산자 결합 순서

결합 순서연산자
좌항 => 우항x,-,/,%,<,<=,>,>=,in,instanceof
우항 => 좌항++,--,할당 연산자,!x,+x,-x,++x,--x,typeof,delete,? .. : ..,**
JAVASCRIPT
type string number boolean
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.
바로가기