자바스크립트 객체의 구조분해(destructuring)

es6에서의 객체 문법 추가

function func(name, content){
    return {
        name: name,
        content: content      
    }
};

위의 함수는 함수의 매개변수인 name과 content를 받아서 name과 content라는 같은 이름의 프로퍼티를 가진 객체를 리턴합니다. es6에서는 매개변수 이름과 객체의 프로퍼티가 같을 시에 중복을 제거할 수 있도록 수정되었습니다.  

function func(name, content){
    return {
        name,
        content    
    }
};

name과 content가 중복이 사라지고 한 번 적은게 보이시나요? { name : name, content : content }가 {name, content}로 변했다는 것을 미리 알아두시면 객체의 구조분해를 더 쉽게 이해하실 수 있습니다. 

객체 구조분해 하기

---

객체 구조분해(destructuring)의 예시를 한번 보도록 하겠습니다.

let blog = {
  name: "lemoncandy",
  content: "it"
};
let { name, content } = blog;

name과 content의 값을 확인해보면 각각 blog.name, blog.content의 값이 담긴 것을 확인해볼 수 있습니다. 객체를 구조분해 할 때 주의해야할 것은 우선 할당 연사자의 왼쪽에 객체리터럴이 와야하고, 할당연산자의 오른쪽에 오는 값이 null이나 undefined여서는 안된다는 것입니다. 그리고 구조분해를 할 때 변수를 선언만 해서는 안되고 반드시 초기자(initializer)를 해줘야 한다는 것입니다.

구조분해문으로 변수에 값을 할당할 때 주의사항

미리 다른 값이 들어 있는 변수에 구조분해를 통해 다른 값을 줄 때는 주의해야합니다. 

let blog = {
  name: "lemoncandy",
  content: "it"
};
let name = "foo" content= "bar";
({name, content} = blog);

다른 값이 들어 있는 변수에 값을 할당할 때는 위의 소스코드처럼 괄호 안에 구조분해문을 넣어야 합니다. 그렇지 않으면 에러가 납니다. 괄호를 넣지 않고 중괄호만 사용하면 블록문으로 인식하고 블록문의 경우 할당문의 왼쪽에 있으면 안되기 때문에 오류가 나게 되는 것입니다.

구조분해문에 기본값 넣기

프로퍼티보다 선언하는 변수가 더 많으면 어떻게 될까요?

let blog = {
  name: "lemoncandy",
  content: "it"
};
let {name, content, lang = "javascript"} = blog;

lang이라는 변수를 하나 더 추가했습니다. 그리고 lang에 할당문을 쓰고 "javascript"라고 적었습니다. 이건 기본 값을 지정해준 것입니다. 따로 값이 없다면 기본적으로 이런 값으로 해라. 이런 뜻입니다. 이미 예상하신 분들도 있겠지만 따로 기본값이 없으면 undefined가 값으로 들어갑니다. 

프로퍼티와 다른 이름이 다른 변수에 구조분해하기

이때까지는 프로퍼티와 변수가 이름이 같았지만, 이름이 다른 변수명에도 값을 넣을 수 있습니다. 

let blog = {
  name: "lemoncandy",
  content: "it"
};
let {name: nickname, content: blogContent} = blog;

nickname과 blogContent에 들어있는 값을 확인해보면 "lemoncandy"와 "it"이 들어가 있는 것을 알 수 있습니다. 다른 이름의 변수에 값을 넣을 때 위의 소스코드처럼 :(콜론)을 쓰고 새롭게 쓸 변수명을 적으면 왼쪽의 변수에서 값을 읽어와서 새 변수에 값이 들어가게 됩니다. 

중첩 객체 구조분해

객체가 중첩되어 있다면 어떻게 구조분해를 할까요?

let obj = {
  foo: "foo",
  bar:{
    foo1: "foo1",
    bar1: {
      foo2: "foo2",
      bar2: "bar2"
    }
  }
};

위의 소스코드는 여러겹 중첩되어 있습니다. 일단 구조를 파악해보자면 obj라는 객체 안에 bar라는 객체가 있고, 또 그 안에 bar1이라는 객체가 있습니다. bar1이라는 객체 안에 foo2와 bar2라는 프로퍼티가 있습니다. 구조분해를 통해서 bar2의 값을 가져오도록 하겠습니다.

let {bar:{bar1:{bar2}}} = obj;

:(콜론) 앞에 식별자가 찾는 위치를 나타냅니다. 즉 bar라는 프로퍼티 안에 bar1을 찾고, bar1 안에서 bar2를 찾아라. 이런 뜻입니다. bar2의 값을 확인해보면 "bar2"라고 리턴되는 것을 확인할 수 있습니다. 

공감은 제작자에게 큰 힘이 됩니다.