본문으로 건너뛰기

Ch5. 문법

자바스크립트는 혼란과 오해를 불러일으킬 수 있는 트릭과 문법이 많다.
올바른 코드를 작성하기 위해 아래 내용을 잘 이해하자.

5.1 문(Statement)과 표현식(Expression)​

  • 표현식: 값을 만들어내는 코드
  • 문: 동작을 수행하는 코드
var a = 3 * 6; // 문 (표현식 포함)
b;             // 표현식문
  • 모든 문은 완료 값(completion value) 을 가진다.
var a = b; // → 콘솔에서는 undefined 출력됨

부수 효과(side effect)​

  • 변수 변경, 출력, DOM 조작 등 외부 상태 변경
  • 할당, ++, delete 연산자 등
var a = 1;
function foo() { a = a + 1; }
foo(); // a는 2가 됨 → 부수 효과

콘텍스트 규칙​

  • 중괄호는 객체 리터럴과 코드 블록으로 구분
  • 레이블(label) 문은 continue, break와 같이 사용할 수 있으나 일반적이지 않음
{ foo: bar() } // 레이블로 해석될 수 있음
  • JSON 형태 코드는 함수 호출로 감싸야 객체로 인식됨

5.2 연산자 우선순위​

  • , < = < && < || < ?:
var a = 42, b;
b = (a++, b); // b = b
  • 결합성 (associativity)
    • = 연산자는 우측 결합성
    • &&, ||는 좌측 결합성
var a = b = c = 42; // a = (b = (c = 42))
  • 삼항 연산자는 우측 결합성
var d = a ? b : c ? d : e;

5.3 세미콜론 자동 삽입 (ASI)​

  • 줄바꿈 시 자동 삽입
  • 단, return, yield, break, continue 다음 줄은 주의
return
a * 2; // → return undefined
  • 가독성 및 안정성을 위해 세미콜론 명시 추천

5.4 에러​

조기 에러​

  • 문법 에러
  • strict mode에서 중복 인자
  • 객체 리터럴 중복 키 등

TDZ (Temporal Dead Zone)​

{
  a = 2; // ReferenceError
  let a;
}

let, const는 선언 전에 접근하면 ReferenceError 발생

5.5 함수 인자​

function foo(a = 4, b = a + 1) {}
foo(); // 4, 5
  • arguments 객체와 실제 인자는 더 이상 연결되지 않음
  • strict mode에서는 독립

5.6 try...finally​

  • finally는 무조건 실행됨
  • return, throw, break, continue 모두 적용
  • 단, yield에는 예외 발생 가능
function foo() {
  try {
    return 0;
  } finally {
    console.log("finally");
  }
}

5.7 switch​

  • 비교는 ===
  • break 없으면 이후 case들도 실행됨
switch (a) {
  case 1: console.log(1);
  case 2: console.log(2);
  default: console.log("default");
}

→ a = 2 라면 2, default 실행됨

5.8 정리​

  • 문과 표현식을 명확히 구분할 것
  • 연산자 우선순위와 결합성 주의
  • ASI를 과신하지 말고 명시적 세미콜론 권장
  • TDZ 개념과 함수 인자 규칙 숙지