[JavaScript] 구조분해할당

구조분해할당... 이름만 들어도 귀찮고 진짜 많이 안쓸 거 같은데 javascript에서 가장 많이 쓰이는 문법 중 하나라고 한다. 아직 배울 게 정말 산더미처럼 많구나... 라고 느낀 부분이다. 화이팅해서 차근차근 학습하고 프로젝트에도 적용시켜보자.

 

구조분해할당(Destructuring Assignment) : 배열 또는 객체의 구조를 분해하여, 그 값을 개별 변수에 담는 표현식을 의미한다.

 

const arr = [1, 2, 3, 4, 5];

이런 배열이 하나 있다고 생각해보자. 배열의 값을 사용하는 방법은 arr[0]과 같이 인덱스에 접근하는 것이다.

 

const one = arr[0];

const two = arr[1];

const three = arr[2];

 

쓰다보니 매우 귀찮다. 이걸 간편하게 하는 게 구조분해할당이다. 다음을 보자.

 

 

const [one, two, three] = arr;

 

여기에 콘솔을 찍어보면 [one, two, three] 각각은 1, 2, 3을 가리킨다. 여기서 ...(rest elements)을 활용할 수도 있다.

 

const [one, ...two] = arr;

one은 1을, two는 [2, 3, 4, 5]가 나온다.

 

객체의 경우도 방법은 동일하다.

const obj = {
    x : 10,
    y : 20
};
const {x, y} = obj;
console.log(x, y);

x는 10, y는 20을 가리킨다.

 

객체를 할당할 때 주의해야할 것은 변수의 이름에 분해하려는 프로퍼티의 키를 사용해야한다는 것이다. 하지만 이것도 이름을 바꾸는 방법이 있다.

const {x : 강해상, y : 이린하다} = obj;

분해한 키에 : 을 붙이고 사용할 변수 이름을 지정하면 된다. 객체 obj에서 구조 분해한 x와 y(변수) 는 강해상과 이린하다라는 이름으로 사용된다.

console.log(강해상, 이린하다); // 10 20

 

다음은 중첩된 객체의 구조 분해. 왜 이렇게 복잡하게 보였는지... 차근차근 하다보면 나오는데 말이지.

 

const obj = {
    data : {
        user : {
            name : '응애'
        }
    }
  };

const name = obj.data.user.name;

name에 접근하기 정말 힘들다. 이걸 좀 간단하게 해주는 게 구조분해할당이라고 한다.

 

const {data : { user : {name} } } = obj;

 

어째 더 복잡해보인다...