[JavaScript] ()를 이용한 객체 리터럴과 코드 블록 문 구분

객체 리터럴

• {}로 객체 리터럴을 정의할 때 사용
• 키-값 쌍으로 구성된 데이터 구조

블록 문

• {}로 코드 블록을 정의할 때 사용
• 여러 명령문을 묶어서 실행하는데 사용

 

객체 리터럴과 블록 문 구분

• JavaScript에서 똑같이 중괄호 '{}'를 사용하는 두 경우를 어떻게 구분할 수 있을까?
• '{}'가 객체 리터럴인지 블록 문인지 구분하기 어려운 경우가 있다.
• 다음 예시는 그 구분이 애매할 때 발생할 수 있는 에러이다.

let name, age;
{ name, age } = { name: 'Alice', age: 30 }; // SyntaxError 발생

• name, age를 key값으로 가진 객체 리터럴에서 구조 분해 할당을 하려 한다.
• 이때, 작성자는 '{ name, age }'를 객체 리터럴을 목적으로 작성했지만 실제로 컴파일러는 '{ name, age }'를 블록 문으로 해석하여 SyntaxError를 뱉는다.

 

해결 방법

// 괄호를 사용하여 객체 리터럴로 인식
let name, age;
({ name, age } = { name: 'Alice', age: 30 }); // 객체 리터럴

• 이와 같이 구문 해석의 모호성을 방지하고 구조 분해 할당을 올바르게 수행하기 위해 다음과 같이 소괄호 '()'를 사용할 수 있다.