[JavaScript] ES6 - 디스트럭처링(Destructuring)

 

디스트럭처링(Destrucuring) 이란?

 

배열의 값 또는 객체의 속성을 풀어서 별개의 변수로 쓸 수 있게 해주는 문법이다. 객체 디스트럭처링, 배열 디스트럭처링, 함수 디스트럭처링 등이 존재한다.

 

 

객체 디스트럭처링(Object Destructuring)

 

객체 디스트럭처링을 이용하면 객체가 가진 속성에 접근함과 동시에 해당 속성 이름으로 변수 선언이 가능하다.

 

예시 코드)

const person = {
  name : "Kariu",
  nickname : "Ray",
  links : {
    blog : {
      tistory : "https://kariu.tistory.com",
      naver : "https://blog.naver.com/kari_578",
    },
    email : "kariu@email.com",
  },
  info : {
    age : 20,
  },
}

 

위와 같은 객체가 존재한다고 가정하자. person 객체 안에 있는 info의 값들과 name 값을 가져오고 싶다.

 

ES6의 디스트럭처링을 이용하면 손쉽게 값을 가져올 수 있다.

 

const {info, name} = person;

 

각각의 결과 값을 콘솔에 찍어보면 다음과 같다.

 

 

결과 값

console.log(info);

 

 

 

결과 값

console.log(name);

 

 

 

 

 

객체 디스트럭처링을 이용하여 중첩된 객체에서 값 가져오기

 

person 객체 안의 links를 보면 중첩된 객체 형태로 이루어진 것을 볼 수가 있다. 이와 같이 중첩된 경우에도 디스트럭처링을 이용하여 값들을 가져올 수 있다.

 

예를 들어, person 객체 안의 links 객체 안의 blog 값들을 가져오고 싶다고 가정하자.

 

위와 같은 형식으로 중첩 객체에 접근하면 된다.

 

코드를 작성하면 다음과 같다.

 

const {links: {blog}} = person;

 

결과 값

 

console.log(blog);

 

blog 값들만 가져온 것을 확인할 수 있다.

 

 

객체 디스트럭처링에 디폴트 값(Default) 설정하기

 

person 객체 안에 info에는 age 속성만 존재하는 것을 확인할 수 있다. 만약 person 객체의 구성을 잘 모르는 사람이 info 안에 gender라는 속성이 존재하는줄 믿고 불러낸다면?

 

const {info:{gender}} = person;

 

당연히 해당 속성은 존재하지 않으므로 Undefined 라고 뜰 것이다.

 

하지만 속성이 존재하지 않아도 디폴드 값을 설정하는 방법이 존재한다.

 

 

해당 속성에 =를 이용하여 값을 정해주면 된다.

 

person 객체 안의 info 안에 gender라는 속성이 존재하지 않을 경우 "M"이라는 디폴트 값을 준다. 만약, gender 속성이 존재한다면 원래 값을 가져온다.

 

결과 값

 

const {info: {gender = "M"}} = person;

console.log(gender);

 

 

 

배열 디스트럭처링(Array Destructuring)

 

배열을 디스트럭처링할 때는 객체 디스트럭처링과 달리 { }가 아닌 [ ]를 사용한다.

 

예시 코드)

const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]

 

위와 같은 배열이 있다. 이 중에서 앞에서 3개의 원소만 가져오고 싶을 때 배열 디스트럭처링을 사용하면 손쉽게 가져올 수 있다.

 

const [mon, tue, wed] = days;

 

결과 값

console.log(mon,tue,wed);

 

 

레스트 연산자(rest operator)를 사용하면 나머지 모든 값들을 얻을 수 있다.

 

const[mon, tue, wed, ...another] = days;

 

결과 값

 

console.log(another);

 

 

디스트럭처링을 이용하여 변수 교환하기 (Swapping Variables)

 

디스트럭처링을 이용하면 변수의 값을 매우 쉽게 서로 교체할 수 있다.

단, 변수 값이 바뀌므로 변수는 let으로 선언해야한다.

 

예시 코드)

let name = "Hi!!";
let bio = "Kariu";

[name, bio] = [bio, name];

 

결과 값

console.log(`name: ${name}`)
console.log(`bio: ${bio}`)

 

 

디스트럭처링을 이용하여 변수 생략하기(Skipping Variables)

 

디스트럭처링을 이용하면 변수를 생략하여 좀 더 편리하게 사용할 수 있다.

 

예시 코드)

const days = ["mon", "tue", "wed", "thu", "fri"]

const [, , , thu, fri] = days;

 

결과 값

console.log(thu, fri);

 

 

참고 자료

• 모던 자바스크립트 핵심 가이드(한빛미디어) - 알베르토 몬탈레시
• 노마드코더 - ES6의 정석