YOU DON'T KNOW JS - 타입과 문법

2022-10-06에 씀

p.162

1[] + {}
  1. []“”로 강제 변환
  2. {} → 빈 값 객체
  3. []“”로 변환되었기 때문에, {}도 문자열로 강제변환됨. “[object Object]”
  4. 결과는 “[object Object]”
1{} + []
  1. {} → 코드 블럭. 중괄호가 닫히는 순간 이 코드 블럭은 끝난다
  2. []“”
  3. + [] 만 남기 때문에, +”” === 0
  4. 결과는 0

중괄호는 사용하는 문맥에 따라 용도가 달라진다

p.164 else if는 존재하지 않는다.

1if (a) {
2 ...
3} else if (b) {
4 ...
5} else {
6 ...
7}

얘는 이렇게 파싱된다

1if (a) {
2 ...
3}
4else {
5 if (b) {
6 ...
7 }
8 else {
9 ...
10 }
11}

p.174 세미콜론 자동 삽입 (ASI)

1function foo(a) {
2 if (a) return
3 var b = 3
4}

위 코드는 a의 값이 truthy하다면, b = 3을 수행하지 않고 함수 실행을 종료하려는 의도였을 것이다. ASI는 이 코드가 의도대로 동작하도록 return문 뒤에 세미콜론을 삽입한다.

1function foo(a) {
2 if (a) return**;**
3 var b = 3
4}

그런데 이런 코드라면?

1function foo(a) {
2 if (a) return
3 a * 375
4}

개발자는 a 값이 존재한다면 a에 375를 곱해서 반환하고 싶었다. 그러나 return 문 뒤에 오는 a * 375를 괄호로 감싸지 않은 채로 코드 작성을 끝마쳤다. 그렇다면 자바스크립트 프로그램은 아래와 같이 세미콜론을 삽입할 것이다.

1function foo(a) {
2 if (a) return;
3 a * 375
4}

세미콜론 삽입으로 개발자의 의도와는 완전히 다른 코드가 되었다. 이는 코드 상에 반영되지 않기 때문에, 코드가 의도대로 동작하지 않는 이유를 찾는 데 꽤 오래 걸릴 것이다.

이런 문제를 방지하기 위해, ASI에 너무 의존하지 않고 직접 세미콜론을 넣을 것을 권장하기도 한다.

ASI는 자바스크립트가 엄격하지 않고 유연한 언어가 되는 데 도움을 주고 있다. 세미콜론을 굳이 넣지 않아도 문맥적으로 세미콜론이 필요하다고 간주되면 세미콜론이 알아서 삽입되기 때문에 정말 편리한 기능이다. 그러나 가끔씩 의도하지 않은 세미콜론이 삽입될 수 있는 가능성은 언제나 존재한다. 세미콜론 몇 개를 넣지 않기 위해 이런 위험성을 끌어안는 것은 큰 손해로 돌아올 수 있으니, 가능하면 세미콜론을 수동으로 넣어주는 게 좋겠다.

p.182 try … finally

프로필 사진

조예진

이전 포스트
Pragmatic#07 프로젝트 전에
다음 포스트
자바스크립트 스코프