구조 분해 할당! 나도 이제 중간 변수(temp) 없이?

오늘 KDT 과정 중에 비구조화 할당이라는 내용을 들었습니다.
문법이 익숙해서 검색해보니까 구조 분해 할당으로 부르기도 하더라구요!
전 이게 더 익숙했습니다.😌

이번 포스트는 구조 분해 할당에 대해서 적어보겠습니다.

---

구조 분해 할당은 배열 혹은 객체를 해체하여 개별 변수에 값을 담는 것을 의미합니다.

✍ 배열 구조 분해

let color = ['blue', 'green', 'orange'];

let [ sky, tree, sun ] = color;

console.log(sky); // blue
console.log(tree); // green
console.log(sun); // orange

배열에서 구조 분해 할당을 이용하면, 인덱스의 순서대로 값을 담을 수 있습니다.

 

✍ 요소 무시하기

let color = ['blue', 'green', 'orange'];

let [ sky, , sun ] = color;

console.log(sky); // blue
console.log(sun); // orange

필요하지 않은 부분은 위와 같이 무시할 수 있습니다.

 

✍ 객체 구조 분해

let pikachu = { no: 25, type: '전기' };

let { no, type } = pikachu;

console.log(no); // 25
console.log(type); // 전기

객체의 구조 분해는 배열과 다르게 같은 속성명에 값을 전달합니다.

 

✍ 다른 속성명으로 구조 분해하기

let pikachu = { no: 25, type: '전기' };

let { no: number, type } = pikachu;

console.log(number); // 25
console.log(type); // 전기

콜론을 사용하면 다른 속성명인 변수에 저장할 수 있습니다.

 

🤔 왜 중간 변수(temp)가 없어도 교환(swap)이 가능할까?

구조 분해를 학습하면서 가장 궁금했던 부분입니다.
아래에는 제 나름대로 내린 결론을 적어보겠습니다.

구조 분해는 표현식의 오른쪽의 평가가 끝나면 왼쪽에 값을 할당합니다.

let a = 1;
let b = 2;

[a, b] = [b, a]

예시가 동작하는 순서는 이렇습니다.

1. 오른쪽의 표현식인 [b, a]를 [2, 1]로 평가합니다.
2. [a, b] = [2, 1]로 프로그램이 실행되어 할당합니다.

이 원리로 중간 변수 없이 값의 교환이 가능해집니다. (오답인가...)

---

이상으로 포스트를 마치겠습니다.

틀린 내용이 있다면 댓글로 지적 부탁드립니다. 갑사합니다!