ChatGPT와 JavaScript 공부:객체 디스트럭처링(Array destructuring)

ChatGPT와 JavaScript 공부:객체 디스트럭처링(Array destructuring)

이번 포스트에서는 JavaScript의 객체 디스트럭처링(Array destructuring)에 대해서 공부해 보고자 한다.
이름만 들었을 때는 감이 잘 안 잡히는데, 무엇인지 ChatGPT로 공부해 보자.

Question

객체 디스트럭처링에 대해서 설명해줘

Answer

객체 디스트럭처링이란 ECMAScript 6(ES6)에서 새로 도입된 개념으로, 객체의 속성을 해체하여 그 값을 개별 변수에 할당할 수 있게 해주는 JavaScript의 표현식입니다.
이를 통해 객체에서 필요한 정보를 더욱 간결하게 추출할 수 있습니다.

ES6에서 새로 도입된 것이라고 한다.
사실 설명만으로도 확 와닿지는 않는 것 같으니 예시를 한 번 봐보자.

예시

let obj = { a: 1, b: 2, c: 3 };
let { a, b, c } = obj;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

위 코드에서 {a, b, c} = obj이 객체 디스트럭처링을 사용한 부분이다.
obj의 각 속성의 값이 변수 a, b, c에 각각 할당된다.

필자의 경우 첫 회사에 입사해서 JavaScript를 배우게 되었을 때 ES5 문법으로 시작하고,
최근 개인 공부할 때 JavaScript를 클론 코딩으로 공부할 때 배우고 나서 자연스럽게 사용했던 문법이다.
참고로 필자는 통계학과를 졸업해서 리서치 회사에 입사했는데... 당연히 분석 업무를 할 줄 알았는데 웹을 다루게 될 줄은 정말 몰랐다...
그래서 공부를 살짝 하고서 몇 년 전부터 업무에 많이 적응해서 개인 공부를 하기 시작했고 그러다 ES6 문법을 자연스럽게 접하게 된 케이스이다.
나는 이 문법 자체가 원래 JavaScript에 있는 줄 알았는데 생각보다 생긴지 오래 안됐다는 것을 이제 알았다.(ES6가 2015년에 공식적으로 발표되었다고 하니...)

처음 배울 때는 Python의 언패킹(unpacking)과 비슷하다고 느꼇던 기능이다.
개인 사이드 프로젝트를 할 때 정말 많이 사용했고 정말 편한 기능이라고 생각한다.

객체 디스트럭처링은 다음과 같이 새로운 변수 이름으로 속성 값을 할당하는 것도 가능하다.

let obj = { a: 1, b: 2, c: 3 };
let { a: newA, b: newB, c: newC } = obj;
console.log(newA); // 1
console.log(newB); // 2
console.log(newC); // 3

또한, 디스트럭처링을 이용하여 객체의 내부 속성에 접근할 수도 있다.
이를 '중첩된 객체 디스트럭처링'이라고 한다. (ChatGPT가 가르쳐줬다.)

let obj = { 
    a: 1, 
    b: 2, 
    c: { 
        inner: true 
    } 
};
let { a, b, c: { inner } } = obj;
console.log(a); // 1
console.log(b); // 2
console.log(inner); // true

평소에 개인 사이드 프로젝트를 할 때 너무 자연스럽게 사용해서 용어도 모르고 있었는데 이번 기회에 용어와 약간의 히스토리를 알 수 있는 시간을 갖게 되었다.

객체 디스트럭처링은 코드의 간결성, 중복 코드 감소, 중첩된 객체 접근에 용이하다는 면에서 사용하지 않을 이유가 전혀 없는 정말 강력한 기능이라고 생각한다.