WTFJS - 6

지난 포스팅에 이어서 계속 정리해보도록 하겠습니다.

Examples

Tricky arrow functions

let f = () => {};
f(); // -> undefined

💡 해설

화살표 함수를 사용해본 사람이라면 누구나 알고 있는 내용일 것입니다. 화살표 함수는 표현식을 사용하는 경우, 해당 값을 바로 리턴하게 됩니다. 위의 예제는 마치 객체를 리턴하는 것처럼 보이지만, {}는 블록으로 인식되어 아무것도 리턴하지 않는 코드로 해석됩니다. 해당 코드를 객체 리터럴로 리턴하고 싶다면 ()로 감싸줘야 합니다.

let f = () => ({});
f(); // -> {}

Arrow functions can not be a constructor

let f = () => {
  this.a = 1;
};
new f(); // -> TypeError: f is not a constructor

💡 해설

화살표 함수는 선언된 스코프의 this값을 바인딩한다는 특징이 있습니다. 따라서, 생성자 함수(constructor)로써 사용될 수 없습니다.

arguments and arrow functions

let f = () => arguments;
f("a"); // -> Uncaught ReferenceError: arguments is not defined

💡 해설

있는 그대로 해석하면 됩니다. 화살표 함수에는 arguments 객체를 넣어주지 않습니다.

Tricky return

(function() {
  return
  {
    b: 10;
  }
})(); // -> undefined

💡 해설

자바스크립트는 세미콜론을 생략할 수 있습니다. 일반적인 경우에는 큰 불편은 없지만, 가끔 불편한 경우가 있습니다. 예를 들어, 아래와 같이 IIFE를 사용하는 경우

const a = 10

(function() {
  console.log('hi')
})() // > Uncaught TypeError: 10 is not a function

;를 생략하면 const a = 10(function () { ... }) 과 같이 해석되어, 함수가 아니라는 에러를 내뿜습니다.

위의 예제도 마찬가지의 경우입니다. return 의 경우 줄바꿈을 할 수 없습니다. 따라서,

(function() {
  return
  {
    a, b, c, d, e // 이렇게 오류가 나는 코드를 작성해도 정상적으로 동작합니다.
  }
})()

위와 같은 코드에서 {}는 코드 블럭으로 인식되지만 return에 의해 절대로 실행되지 않는 코드가 됩니다.

Chaining assignments on object

var foo = { n: 1 };
var bar = foo;

foo.x = foo = { n: 2 };

foo.x; // -> undefined
foo; // -> {n: 2}
bar; // -> {n: 1, x: {n: 2}}

💡 해설

왜 foo.x는 undefined가 나오는 걸까요? 이유는 자바스크립트 엔진이 코드를 해석할 때, foo.x의 foo 레퍼런스 주소를 이미 할당해놓았기 때문입니다.

즉, 최초 foo는 { n: 1 } 레퍼런스를 갖고 있습니다. bar 역시 { n: 1 } 레퍼런스를 갖고 있습니다.

그 뒤, foo.x = foo = { n: 2 }에서 foo.x의 foo는 { n: 1 } 레퍼런스를 갖고 있습니다. 그리고 foo = { n: 2 } 코드에 의해 foo의 레퍼런스는 { n: 2 }로 바뀌었습니다. 따라서, foo.x = { n: 2 }가 해석될 때, 사실은 foo.x가 아닌 bar.x로 봐도 무방합니다.

Accessing object properties with arrays

var obj = { property: 1 };
var array = ["property"];

obj[array]; // -> 1

💡 해설

이 예제는 배열이 객체 프로퍼티에 사용되었을 때, 값이 결과적으로 toString에 의해 변환되는 예제인데, 이는 이전 포스팅에서 지겹게 다뤘으므로 넘어가도록 하겠습니다.

Null and Relational Operators

null > 0; // false
null == 0; // false

null >= 0; // true

💡 해설

자바스크립트 명세에 의하면, null은 숫자로 타입 변환이 일어날 때 +0(0)으로 변환됩니다. 자바스크립트에서는 일반적으로 볼 일이 없는 -0도 존재하므로, 이에 따른 결과입니다. negative zero에 대한 자세한 내용은 명세를 확인하시기 바랍니다.

6편을 마치며

이 글을 작성하고 있는 오늘은 월요일입니다. 월요일은 항상 피곤한 것 같습니다...

다음 시간에 뵙겠습니다.