모던 자바스크립트 Deep dive CH07-01

김현규·2022년 9월 17일
post-thumbnail
  • Chapter 07 연산자

    연산자(operator)는 하나 이 상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자라고 하고, 피연산자는 값으로 평가될 수 있는 표현식이어야 한다. 그리고 피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식이다.

  • 단항 연산자

    +,- 단항 연산자는 피연산자를 숫자 타입으로 변환하여 반환한다. 피연산자를 변경하는 것이 아닌
    숫자 타입으로 변환한 값을 생성해서 반환하기 때문에 부수 효과는 없다.

var x = '1';

console.log(+x); // 1
// 문자열 > 숫자로 타입 변환
console.log(x); // "1"
// 부수 효과는 없다.

x = true;
console.log(+x); // 1
// 불리언 값을 숫자로 타입 변환 , false는 0으로 변환된다.

x = 'Hello';
console.log(+x); // NaN
// 문자열을 숫자로 타입 변환할수 없기 때문에 NaN을 반환한다.

마찬가지로 - 단항 연산자도 숫자 타입으로 변환하여 반환하지만 - 단항 연산자는 피연산자의 부호를 반전한 값을 생성해 반환한다.

-(-10); // > 10

-'10'; // > -10

-true; // > -1

-'Hello'; // NaN
  • 문자열 연결 연산자

    +연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다.
    그 외는 산술 연산자로 동작한다
'1'+ 2; // > '12'
1 + '2' // > '12'

1 + 2 // > 3

1 + true; // > 2

i + null; // > 1 
//null은 0으로 타입 변환된다.

+undefined; // > NaN
1 + undefined; // > NaN
  • 비교 연산자

    동등 비교(==) 연산자는 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치 시킨 후에 같은 값인지 비교한다. 따라서 타입은 다르지만 암묵적 타입 변환을 통해 타입을 일치시키면 동등하다.
5 == 5; // > true

5 == '5' // > true 
// 타입은 다르지만 암묵적 타입 변환을 통해 타입을 일치시키면 동등하다

일치 비교(===) 연산자는 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한하여 true를 반환한다.
다시 말해, 암묵적 타입 변환을 하지 않고 값을 비교한다. 따라서 일치 비교 연산자는 예측하기 쉬운 장점이 있다.

5 === 5; // > true

5 === '5'; // > false

NaN === NaN; // > false
// NaN은 자신과 일치하지 않는 유일한 값이다.

위 예제에서 볼 수 있듯이 NaN은 자신과 일치하지 않는 유일한 값이다.
그러므로 숫자가 NaN인지 조사하려면 일치 연산자가 아닌 빌트인 함수 Number.isNaN을 사용해야 한다.

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

자바스크립트에는 양의 0과 음의 0이 있다 이들을 비교하면 true를 반환한다.

0 === -0 // > true
0 == -0 // > true
  • 삼항 조건 연산자

    조건식 ? (조건식이 true일 때 반환할 값) : (조건식이 false일 때 반환할 값)

삼항 조건 연산자는 첫 번째 피연산자가 true로 평가되면 두 번째 피연산자를 반환하고,
false로 평가되면 세 번째 피연산자를 반환한다. 즉, 삼항 조건 연산자는 두 번째 피연산자 또는 세 번째 피연산자로 평가되는 표현식이다.

var x = 2;

var result = x % 2 ? '홀수' : '짝수';

console.log(result); // 짝수

삼항 조건 연산자의 첫 번째 피연산자는 조건식이므로 삼항 조건 연산자 표현식은 조건문이다. 따라서 다음 장에서 살펴볼 if...else 문을 사용해도 삼항 조건 연산자 표현식과 유사하게 처리할 수 있다.

var x = 2, result;

if(x % 2) result = '홀수';
else 	  result = '짝수';

console.log(result); // 짝수

삼항 조건 연산자 표현식과 if ... else 문은 차이점이 있다.
삼항 조건 연산자 표현식은 값처럼 사용할 수 있지만 if ... else 문은 표현식이 아닌 문이라 값처럼 사용할 수 없다.

var x = 10;

var result = if(x % 2) { result = '홀수'; } else { result = '짝수'; };
// SyntaxError: Unexpected token if

삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문이기 때문에
다른 표현식의 일부가 될 수 있어 매우 유용하게 사용 할 수 있다.

var x = 10;

var result = x % 2 ? '홀수' : '짝수';
console.log(result); // 짝수
// 삼항 조건 연산자 표현식은 표현식인 문이기 때문에 값처럼 사용할 수 있다!

이웅모.2006.모던 자바스크립트 Deep Dive.위키북스

0개의 댓글