누구냐, 넌? Javascript 구조분해 할당(Destructuring) 기초개념 정리

 

자바스크립트 코딩 공부를

간간히 하다보니 언제부턴가...

 

구조분해할당 또는 디스트럭처링이라는 단어가

심심치 않게 보이기 시작합니다.

 

 

느낌적인 느낌으로는

화살표 함수 ( => )처럼 등장한

새로운 문법이 아닐까 생각하곤 했습니다.

 

이 참에 가볍게 정리해보기로 합니다.

 

 

 

JavaScript의 구조 분해 할당은 무엇인가?

 

 

구조 분해 할당 구문은

배열이나 객체의 속성을 해체하여

그 값을 개별 변수에 담을 수 있게 하는

JavaScript 표현식입니다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

구조 분해 할당 - JavaScript | MDN

 

 

 

 

객체에서의 구조 분해 할당

 

const spiderman = {
        name: "피터 파커",
        nick: "스파이더맨",
        sex: "남성",
        age: "18",
        specialty: "피터 찌리릿",
      };

 

위와 같은 spiderman 객체가 있다고 가정할 때

 

히어로의 정보를 가져오는 함수를 작성해봅니다.

 

function getHeroInfo(hero) {
        return `
                이름: ${hero.name}
                별명: ${hero.nick}
                성별: ${hero.sex}
                나이: ${hero.age}
                특기: ${hero.specialty}
                 `;
      }
      
console.log(getHeroInfo(spiderman));

 

그리고 콘솔에 출력을 해봅니다.

예상하던대로, 잘 출력이 됩니다.

구조분해할당 없이 객체를 출력하던 방법.

 

 

 

객체의 구조분해할당을 위해,

함수 코드를 변경해봅니다.

 

function getHeroInfo(hero) {
          const { name, nick, sex, age, specialty } = hero;
          return `
          이름: ${name}
          별명: ${nick}
          성별: ${sex}
          나이: ${age}
          특기: ${specialty}
          `;
      }

 console.log(getHeroInfo(spiderman));

 

const { name, nick, sex, age, specialty } = hero;        // 요거 한 줄 더 넣었습니다.

 

말 그대로 hero 객체의 구조를 분해해서

변수들에 할당을 했습니다.

 

hero.name, hero.nick 등으로

반복되던 객체접근방식을 사용하지 않을 수 있고

또 객체의 Property를 변수처럼 이용해서

접근이 가능해집니다.

 

엎어치나 메치나 비스무리하지만

뭔가 더 세련되어진 것 같은

그런 생각이 듭니다.

 

화살표 함수도 처음에는 어색해보였지만,

점차 눈에 익숙해지면서 편리함을 주는 것처럼

삼항 연산자도 처음에는 뭔가 어색해보였지만

점차 사용법에 익숙해지면서

상당한 편안함을 제공해주는 것처럼 말이죠.

 

 

 

 

배열에서의 구조 분해 할당

 

 

참고로

배열에서의 구조 분해 할당은

대략 다음과 같습니다.

 

let a, b, rest;           // 변수 a, b, rest를 정의하고
[a, b] = [10, 20];        // 배열 형태를 이용하여 a, b에 한꺼번에 값을 할당해줌

console.log(a);           // 콘솔에 a를 찍어보면 10이 나오겠죠? 
console.log(b);           // 콘솔에 b를 찍어보면 20이 나오겠죠?
 

[a, b, ...rest] = [10, 20, 30, 40, 50];     // 다시 배열 형태로 값을 할당해주고

console.log(rest);        // 콘솔에 rest를 찍어보면? Array [30, 40, 50]이 출력됩니다.

 

이 예제에서는

rest가 배열 형태를 갖는 다는 점이

뽀인트가 될 것 같습니다.

 

 

 

 

JavaScript와 Python에서의 구조 분해 할당 비교

 

그나저나 생각해보니

Python에서도 비스무리한 걸

봤던 것이 기억납니다.

 

a = 1, b = 2
 
print(a)     # 1출력
print(b)     # 2출력
 
a,b = b,a
 
 print(a)     # 2출력
 print(b)     # 1출력

 

a값과 b값을 서로 바꿀때

a, b = b, a

이 방식이 무지 편했더란 말이죠.

이제 이 방식을 Javascript에서도

지원한다고 보면 될 것 같습니다.

 

let a = 1, b = 2;

console.log(a);      // 1출력
console.log(b);      // 2출력

[a, b] = [b, a];

console.log(a);      // 2출력
console.log(b);      // 1출력

 

단, Javascript에서는 대괄호로 묶어줘야 합니다.

 

[a, b] = [b, a];

 

아무튼 편해진 것 같습니다.

 

 

TMI... 라떼는 말이야,

a, b 변수 2개의 값을 서로 바꾸려면

c라는 또 하나의 변수가 필요했었다는... 쿨럭.