연산자 (07)

늘보·2021년 7월 6일
0

Javascript Deep Dive

목록 보기
2/30

단항 연산자

일단 코드를 보자.

var x = '1';

// String -> Number
console.log(+x); // 1 - number
console.log(x); // "1" - string

// Boolean -> Number
x = true;
console.log(+x); // 1 - number
console.log(x); // true; 

x = false;
console.log(+x); // 0 - number
console.log(x); // false

// String -> Number
x = 'Hello';
console.log(+x); // Nan
console.log(x); // 'Hello'

기가 막힌다. 이게 Typescript를 사용하는 이유인가 보다.

  • JS에서 true값은 1로, false값은 0으로 취급될 수 있다.
-'10' // -10
-true // -1
-'Hello' // NaN

처음 안 사실이다. 그저 놀랍다.

문자열 연결 연산자

// 문자열 연결 연산자
'1' + 2; // '12'
1 + '2'; // '12'

// 산술 연산자
1 + 2 // 3;

// true는 1로 타입 변환
1 + true; // 2

// false는 0으로 타입 변환
1 + false; // 1

// null은 0으로 타입 변환
1 + null; // 1

// undefined는 숫자로 타입 변환되지 않는다.
+undefined; // Nan
1 + undefined; // Nan

그나마 undefined는 강제 타입 변환이 일어나지 않아서 다행인건가?

할당 연산자

var x;
console.log(x = 10); // 10
  • 표현식 = 값으로 평가될 수 있는 문

  • 문에는 표현식 / 표현식이 아닌 문이 있음.

할당문은 값으로 평가되는 표현식인 문으로서 할당된 값으로 평가된다.

비교 연산자

  • == : 동등 비교 연산자
  • === : 일치 비교 연산자
5 == 5; // true
5 == '5'; // true

// 많은 사람들이 '일치 비교 연산자(===)'를 쓰기를 권장하는 이유다.

동등 비교 연산자는 강제 타입 형변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다.

일치 비교 연산자는 타입도 값고 값도 같은 경우에 한하여 true를 반환한다.

  • 일치 비교 연산자에서 주의할 것은 NaN이다.
// Nan은 자신과 일치하지 않는 유일한 값이다.
NaN === NaN; // false

숫자가 NaN인지 조사하려면 빌트인 함수 isNaN을 사용해야 한다.

isNaN(NaN); // true
isNaN(10); // false
isNaN(1 + undefined); // true
  • 숫자 0도 주의하자. JS에는 양/음의 0이 각각 있는데 이들을 비교하면 true를 반환한다.
// ES6에서 도입된 Object.is 메소드는 다음과 같이 예측 가능한 정확한 결과를 반환한다.
0 === -0; // true
0 == -0; // true
Object.is(-0, +0); // true

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

삼항 연산자와 if...else 문의 차이점

  • 삼항 연산자 표현식은 값처럼 사용할 수 있다.

  • 그러나 if ...else문은 값처럼 사용할 수 없다. (표현식이 아닌 문이기 때문)

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

var result = x % 2 ? '홀수' : '짝수';
console.log(result); // 짝수

typeof 연산자

typeof `` // string
typeof 1 // number
typeof NaN // number
typeof true // boolean
typeof undefined // undefined 
typeof Symbol() // symbol
typeof null // object
typeof null // object
typeof [] // object
typeof {} // object
typeof new Date() // object
typeof /test/gi // object
typeof function() {} // function
  • typeof 연산자로 null 값을 연산해 보면 "null"이 아닌 "object"를 반환한다.

  • 이는 JS 첫 번째 버전의 버그다. 하지만 기존 코드에 영향을 줄 수 있기 때문에 아직까지 수정되지 못하고 있다.

// 선언하지 않은 식별자를 typeof 연산자로 연산하면 참조 에러가 아닌 undefined를 반환한다.
typeof undeclared; // undefined

연산자의 부수효과

  • 대부분의 연산자는 다른 코드에 영향을 주지 않는다.

  • 할당 연산자(=), 증가/감소 연산자(++/--), delete 연산자는 부수효과를 발생시킨다.

0개의 댓글