제로초 JavaScript 강의 - 자료형, 비교 연산자, 논리 연산자

 

• 제로초 JavaScript 강의 - 섹션 1

---

Review

 

 

 

 

 

 

---

 

• 제로초 JavaScript 강의 - 섹션 1

 

<연산자 우선순위>

 

우선순위	연산자(쉼표로 구분)
20	()(그룹화)
19	., [], new, ()(함수 호출)
18	new(인수 없이)
17	++(후위), --(후위)
16	!, ~, + (단항), - (단항), ++ (전위), -- (전위), typeof, void, delete, await
15	**
14	*, /, %
13	+(다항), -(다항)
12	<<, >>, >>>
11	<, <=, >, >=, in, instanceof
10	==, !=, ===, !==
9	&
8	^
7	|
6	&&
5	||
4	? :(삼항 연산자)
3	=, +=, -=, **=, *=, /=, %=, <<=, >>=, >>>=, &=, ^=, |=
2	yield, yield*
1	,(쉼표)

 

 

1분 퀴즈도 내주셨는데, 연산자 우선순위표를 참고해서 풀면 된다.

 

<퀴즈>  3 ** 2 + 1를 27로 만들어 보세요. 

→ 정답은 너무 간단한데, 괄호만 잘 씌워보면 된다. 거듭제곱이 있으니 괄호를 뒤쪽에 붙여보면,

3 ** (2 + 1) 로 만들면 3의 3 제곱이 된다. 그러면 27 !

 

 

 

 

 

<불값>

 

: 컴퓨터는 실제로 1과 0밖에 모른다.

1과 0은 참(true)과 거짓(false)에 대응된다. 자바스크립트에도 true와 false를 나타내는 불 값(boolean)

이라는 자료형이 있다.

 

typeof를 앞에 붙여 보면 콘솔에 "boolean"이라는 값이 출력된다. 값의 자료형이 불 값이라는 뜻이다.

 

> typeof true;
< "boolean"

 

 

 

 

<비교 연산자>

 

: ==는 양쪽 값이 같은지 비교하는 연산자이고, !=는 양쪽 값이 다른지 비교하는 연산자이다.

 

NaN은 비교할 때 독특한 성질을 보인다. NaN끼리 비교하면 false 값을 가진다.

이는 숫자, 문자열, 불 값을 통틀어 false가 나오는 유일한 값이다.

 

> NaN == NaN;
< false

 

<=나 >= 연산자를 써도 결과는 false만 나온다. NaN은 비교 연산에서 false를 출력한다고 알아 두자.

다만, != 연산에서는 true를 출력한다.

 

 

> true > false;
< true

 

true가 false보다 큰 값임을 기억하자. true는 숫자로 변환하면 1이고, false는 숫자로 변환하면 0이다.

 

 

 

 

<문자열과 숫자의 크기 비교하기>

 

> '3' < 5;
< true

 

빼기 연산자 때처럼 다른 자료형이 모두 숫자로 형 변환된 후 비교한다.

따라서 문자열 3은 숫자 3이 되어 5보다 작다는 것이 성립된다.

 

> 'abc' < 5;
< false

 

이때 문자열 abc를 숫자로 바꾸면 NaN이 됩니다. NaN과의 비교는 false이므로 결괏값이 false가 된다.

불 값도 비교 연산을 할 때는 숫자로 형 변환된다.

 

> '0' < true;
< true

 

문자열 0도 숫자 0으로 형 변환되고, true도 숫자 1로 형 변환된다. 따라서 결괏값은 true이다.

 

 

 

 

 

<==와 === 차이 이해하기>

 

: 값이 같은지 비교할 때 == 연산자를 사용한다. 하지만 다음과 같은 코드에서는 당황스러운 결과가 나온다.

 

> '1' == 1;
< true
> 1 == true;
< true
> 1 == '1';
< true

 

자료형이 다르면 형 변환한 후 비교하기 때문에 앞의 예제에서 모두 true가 출력된다.

이러한 특성은 외우기도 힘들뿐더러 값을 비교하려는 취지에 맞지 않는 경우도 있다. 그래서 자료형까지

같은지 비교하는 연산자는 바로 ===이다. 값을 비교할 때 값뿐만 아니라 자료형도 같은지 비교합니다.

 

> '1' === 1;
< false
> 1 === true;
< false
> 1 === '1';
< false

> 1 === 1;
< true

 

자료형까지 같을 때만 true가 나온다.

 

 

!=도 마찬가지다. 형 변환을 먼저 한 후에 비교하므로 다음과 같은 결과가 나온다.

> 1 != '1';
< false

 

자료형까지 비교하려면 != 대신 !== 연산자를 사용한다.

 

> 1 !== '1';
< true

 

자료형이 다르므로 true가 된다.

==와 != 대신 ===와 !== 연산자를 사용해 자료형까지 정확하게 비교하기를 권장한다.

 

 

 

 

 

<논리 연산자>

 

불 값은 논리식을 다룰 때 많이 사용한다.

“10은 5보다 크고(그리고), 6은 8보다 작다”라는 문장은 참일까, 거짓일까? 그리고 이 문장을

자바스크립트로 어떻게 표현할 수 있을까? 10 > 5와 6 < 8은 바로 알 수 있는데,

그 사이의 연결고리를 표현할 수 없다.

프로그래밍에서는 ‘그리고’를 표현하는 연산자가 있습니다. 바로 &&연산자이다.

 

> 10 > 5 && 6 < 8;
< true

 

결과는 true이다. && 연산자의 좌측 식과 우측 식이 모두 true여야 &&의 결과도 true가 된다.

 

 

‘그리고’와는 다른 개념으로 ‘또는’이 있다. 이는 || 연산자로 표현한다. 좌측 식이나 우측 식

둘 중 하나만 true면 ||의 결과는 true가 된다.

 

> 10 < 5 || 6 < 8;
< true

 

좌측 식의 값이 false이지만 우측 식의 값이 true이므로 최종 결괏값도 true가 된다.

|| 연산자에서는 양쪽의 식이 모두 false여야 false가 됩니다.

 

> 10 < 5 || 6 > 8;
< false

 

조금 헷갈릴 수 있는데 정리하자면, 프로그래밍에서는 양쪽 식 중 하나만 true여도 true,

양쪽 식 모두 false여야만 false가 성립된다.

 

 

 

참을 거짓으로, 거짓을 참으로 만드는 연산자는 ! 연산자이다.

식 앞에 !를 붙이면 참인 값은 false가 되고, 거짓인 값은 true가 된다.

 

> !true;
< false
> !false;
< true

 

 

이 성질을 이용해 다른 자료형을 불 값으로 형 변환할 수도 있다. 

! 연산자를 연이어 두 번 쓰면 된다. 두 번 연이어 썼기 때문에 참인 값은 참에서 거짓으로,

다시 거짓에서 참으로 변환된다. 거짓인 값은 거짓에서 참으로, 다시 참에서 거짓으로 변환된다.

즉, ! 연산자를 연이어 두 개 작성했을 경우, Boolean으로 형 변환을 하게 된다.

 

> !!'a';
< true

 

대부분의 값은 불 값으로 형 변환했을 때 true가 된다. 하지만 false가 되는 값이 있다.

형 변환했을 때 false가 되는 값은 몇 개 없으니 이것만 기억하면 된다.

나머지는 모두 형 변환했을 때 true가 된다.

 

> !!false
< false
> !!''
< false
> !!0
< false
> !!NaN
< false

 

 

 

 

<빈 값 사용하기>

 

자료형에는 문자열, 숫자, 불 값 이외에도 undefined, null, object, symbol이 있다.

이번에는 undefined와 null 자료형을 알아보자.

이 둘은 빈 값(비어 있음을 의미)을 표현한다는 공통점이 있지만, 차이점도 있다.

 

console.log로 출력하면 항상 부수적으로 undefined가 식의 결괏값으로 반환됐다.

 

> console.log('Hello, undefined!');
  Hello, undefined!
< undefined

 

undefined는 보통 반환할 결괏값이 없을 때 나온다. 

console.log 명령어는 콘솔에 무언가를 출력하지만, 그 자체로는 결괏값이 없기 때문에 

undefined가 반환된다.

> typeof undefined;
< "undefined"

 

"undefined"라는 문자열이 출력된다. undefined는 불 값으로 형 변환하면 false가 나옵니다.

 

> !!undefined;
< false

 

단, undefined와 false는 같지 않다. 거짓인 다른 값들과도 마찬가지이다.

 

> undefined == false;
< false
> undefined == 0;
< false
> undefined == '';
< false

 

다른 자료형으로는 null이 있다. 빈 값을 의미하지만 undefined와 같지는 않습니다.

 

> undefined == null;
< true

 

빈 값이라는 점에서 같지만 자료형을 비교해 보면 다르다.

 

> undefined === null;
< false

 

undefined와 마찬가지로 null도 불 값으로 형 변환하면 false가 된다.

> !!null;
< false

 

하지만 null은 false와 같지 않다. 다른 거짓인 값들과도 같지 않다.

 

> null == false;
< false
> null == 0;
< false
> null == '';
< false

 

null의 자료형을 typeof로 확인해 보면 특이한 것을 발견할 수 있다.

 

> typeof null;
< "object"

 

결괏값이 "null"이 아니라 "object"이다.

이 현상은 자바스크립트에서 유명한 버그이다. 원래는 "null"이 나와야 하지만, 언어가 만들어진

초창기 실수 때문에 "object"가 됐다고 한다.

그 이후로는 바꿀 수 없게 되었다. 바꾸고 나면 기존에 typeof null 식을 사용하는 모든 곳에 영향이

있기 때문이다. 따라서 값이 null인지 확인하기 위해서는 === null을 사용해야 한다.

 

null과 undefined는 둘 다 빈 값이라서 어떨 때 사용하는지 헷갈릴 수 있다.

undefined는 기본값이라는 의미라도 있지만, null은 아무런 역할이 없다.

일부 개발자는 null을 의도적으로 사용하는 경우도 있다.

 

 

== 관계가 헷갈릴 때 참고하면 좋은 표

 

색칠된 부분이 ==가 true가 되는 관계이다. 굳이 외울 필요는 없다.

===을 사용하면 표를 볼 필요도 없다.

 

 

 

 

 

 

* 내용 출처

: Let's Get IT 자바스크립트 프로그래밍