JS가 너무해

이번 포스트에서는 이상하게 동작하는 JS 문법들에 대해 다뤄보려고 한다.

Boolean 연산

• 불린 + 불린은 숫자로 연산이 된다.
  ex) true + false // 1
  
  

콤마 연산자

• 쉼표 연산자는 마지막 쉼표 뒤의 값을 반환한다.
  ex) 10, 2 // 2
• 배열안에 쓰이면 빈 요소를 채워 넣는다.
  ex)
  [,,,].length // 3 -> 마지막 콤마는 제외되고 3개의 빈 요소 사이에 콤마 2개
  [,] + [,]; // -> ""
  [] + [] === [,] + [,]; // -> true
  [,,,] + [,,,]; // -> ",,,,"
  ([,,,] + [,,,]).length === [,,,,].length; // -> true
• 콤마 한개만 배열에 사용시 길이는 증가하지만 문자열로 변환하면 빈 배열 취급을 받는다.
  ex) [].length; // -> 0
  [,].length; // -> 1
  [].toString() === [,].toString(); // -> true
  Number([]) === Number([,]); // -> true 둘 다 0
  
  

배열 연산

• 배열끼리 더하면 문자열이 된다.
  ex)
  [1,2,3] + [4,5,6] // "1,2,34,5,6"
• +!![] // 1로 배열은 truthy한 값이다.
• 빈 배열은 불린화시 true이지만 숫자화시 0이다.
  
  

소수점 연산

• 0.2 + 0.1 === 0.3 // false로 왼쪽 항의 값은 0.30000...04이다.
  
  

abstract equality comparison

• true == "true" // false
• 둘 다 Number로 변환되어 연산된다. -> 1 == NaN // false
  
  

문자열 연산

• 문자열 플러스시 문자열로 변환하여 연산한다.
• 문자열 마이너스 및 곱셈시 숫자로 변환하여 연산된다.
• Number()로 변환하여 빈 배열이나 숫자가 아니면 NaN을 반환한다.
  ex) "" - -"" // 0
  
  

null 연산

• null 연산시 숫자로 변환되어 연산한다.
  ex) null + 0 // 0
• null === false // false
• +null === +false // true
  
  

0으로 나누기

• 숫자를 0으로 나누면 Infinity이다
• 10 ** 1000 // Infinity
• 0을 나누면 NaN이다.
  
  

증감연산자

• true++; // -> SyntaxError
  1++; // -> SyntaxError
  "x"++; // -> SyntaxError
  null++; // -> SyntaxError
  undefined++; // -> NaN
  $++; // -> NaN
  console.log++; // -> NaN
  NaN++; // -> NaN
  
  

undefined 연산

• undefined와 불린을 연산시 숫자로 변환하여 연산한다.
  ex) undefined + false // NaN
• Number(undefined) // NaN, Number(false) // 0
• undefined는 falsy한 값이라 불린화하면 false가 된다.
  
  

NaN 연산

• NaN은 비교연산 및 사칙 연산시 NaN을 반환한다.
• +!!NaN // 0과 같이 NaN은 falsy한 값이라 불린화 하면 false를 반환
  
  

동등 비교 규칙(==)

• 두 피연산자의 자료형이 같을 경우 암묵적 형 변환 없이 값만 비교한다
• 자료형이 다를 시 Number로 변환하여 비교한다.
• 단, null은 undefined랑만 비교가 가능하므로 undefined와 비교시에만 Number로 변환하고 그 외의 자료형과 비교시에는 무조건 false를 반환한다.