ES6 배열 분해: 예상치 못한 동작

ES6에서 배열에 대한 분해 할당은 예상치 못한 결과를 초래하여 프로그래머를 당황하게 만들 수 있습니다. 이러한 인스턴스 중 하나는 다음 코드로 설명됩니다.

let a, b, c
[a, b] = ['A', 'B']
[b, c] = ['BB', 'C']
console.log(`a=${a} b=${b} c=${c}`)

의도된 출력:
a=A b=BB c =C

실제 출력:
a=BB b=C c=정의되지 않음

설명:

반대 예상대로 이 코드는 원하는 출력을 생성하지 않습니다. 대신 b와 c의 값을 바꾸고 c는 정의되지 않은 상태로 둡니다. 왜 이런 일이 발생하는지 이해하려면 코드를 자세히 조사해야 합니다.

구문 분석 및 평가:

JavaScript에서 세미콜론은 문을 구분하는 선택 사항입니다. 명시적인 세미콜론이 없으면 코드는 단일 명령문으로 구문 분석됩니다:

let a = undefined, b = undefined, c = undefined;
[a, b] = (['A', 'B']
[(b, c)] = ['BB', 'C']);
console.log(`a=${a} b=${b} c=${c}`);

문 분석:

• [a, b] = (['A', 'B']는 원래 코드의 것과 유사한 구조 분해 할당입니다.
• [(b, c)] = ['BB' , 'C']는 배열 ['BB', 'C']를 왼쪽 피연산자에 할당하는 할당 표현식입니다. 이 표현식은 동일한 배열로 평가됩니다.
• ['A', 'B '][…]는 정의되지 않은 것으로 평가되는 배열 리터럴의 속성 참조입니다.
• (b, c)는 정의되지 않은 마지막 피연산자(c)로 평가되는 쉼표 연산자를 사용합니다.

의미:

따라서 코드는 a와 c 모두에 정의되지 않은 값을 할당하고 b는 'C' 값을 올바르게 수신합니다. 명시적으로 세미콜론을 사용하거나 세미콜론을 자동으로 삽입해야 하는 연산자(예: (, [, /, , - 또는 `))로 모든 줄을 시작해야 합니다.

이를 이해하면 ES6의 구조 분해 할당이 작동함을 보장합니다. 예상대로 예상치 못한 값 교환과 정의되지 않은 할당을 방지합니다.