[JavaScript] 구조분해할당 (destructuring assignment)

   목차 

1. 구조분해할당
2. 배열의 구조분해할당
3. 객체의 구조분해할당

 

 

 

'구조분해할당'에 대해서 알아보자!

 

 

---

 

 

 구조분해할당 

 

 

 의미 

 

- 구조(배열이나 객체)를 분해해서 각각 변수에 할당한다.
- 객체나 배열을 변수로 '분해'할 수 있게 해주는 특별한 문법이다.

 

 

 사용하는 경우 

- 함수에 객체나 배열을 전달해야하는 경우
- 객체나 배열에 저장된 데이터 일부만 전달해야하는 경우

 

 사용하는 이유 

- 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우에 유용하다.
- 인덱스를 이용해 배열에 접근하지 않고도 변수로 접근 가능해진다.

 

---

 

 

 배열의 구조분해할당 

 

 

 예시 

 

let arr = ["Haein", "Hwang"] // 이름과 성을 요소로 가진 배열

let [firstName, surName] = arr; // 구조분해할당
// firstName엔 arr[0]인 Haein 할당
// surname에 arr[1]인 Hwang 할당


console.log(firstName) // Haein
console.log(surName) // Hwang

 

 

 

 반환값이 배열인 메서드(split)를 함께 활용하기 

 

let [firstName, surname] = "Haein Hwang".split(' ');

 

 

 

 쉼표를 사용하여 요소 무시하기 

 

// 두 번째 요소는 필요하지 않음
let [name, , job] = ["짱구", "남자", "유치원생", "6살"];


console.log( job ); // 유치원생

 

 

 

 이터러블 객체에 적용하기 

 

할당 연산자 우측엔 배열뿐만 아니라 모든 이터러블(iterable, 반복 가능한 객체)에 구조 분해 할당을 적용할 수 있다. 

let [a, b, c] = "abc"; // ["a", "b", "c"]

let [one, two, three] = new Set([1, 2, 3]); // [1, 2, 3]

 

 

 

 객체 프로퍼티 넣어보기 

 

할당 연산자 좌측엔 '할당할 수 있는' 것이라면 뭐든지 올 수 있다.
아래와 같이 객체 프로퍼티도 가능하다.

let user = {};
[user.name, user.surname] = "Haein Hwang".split(' ');


console.log(user); // {name: 'Haein', surname: 'Hwang'}

console.log(user.name); // Haein

console.log(user.surname); // Hwang

 

 

 

 '...'로 나머지 요소 가져오기 

 

배열 앞쪽에 위치한 값 몇 개만 필요하고 그 이후 이어지는 나머지 값들은 한데 모아서 저장하고 싶을 때, 
배열에서 마지막 요소에 ...을 붙인 매개변수 하나만 추가하면 나머지(rest)요소를 가져올 수 있다.
rest 대신에 다른 이름을 사용해도 되는데, 변수 앞의 점 3개(...)가 있어야하고, 가장 마지막에 위치해야한다는 점은 지켜야한다. 

 

let [name1, name2, ...rest] = ["A", "B", "C", "D"];

alert(name1); // A
alert(name2); // B

// `rest`는 배열이다.
alert(rest[0]); // C
alert(rest[1]); // D
alert(rest.length); // 2

 

 할당하고자 하는 변수의 개수가 분해하고자하는 배열의 길이보다 큰 경우 

 

할당할 값이 없으면 undefined로 취급된다

let [firstName, surname] = [];

alert(firstName); // undefined
alert(surname); // undefined

 

 

 

 기본값 설정하기 

 

=를 이용하면 할당할 값이 없을 때 기본으로 할당해줄 값인 '기본값'을 설정할 수 있다.

// 기본값
let [name = "Guest", surname = "Anonymous"] = ["Julius"];

alert(name);    // Julius (배열에서 받아온 값)
alert(surname); // Anonymous (기본값)

 

 

 

 기본식으로 표현식이나 함수 설정하기 

 

기본식으로 표현식이나 함수를 설정하면, 할당할 값이 없을 때 표현식이 평가되거나 함수가 호출된다.

아래의 예시는 기본값으로 두 개의 prompt 함수를 할당한 예시로, 값이 제공되지 않았을 때만 함수가 호출되므로, prompt는 한 번만 호출된다.

// name의 prompt만 실행됨
let [surname = prompt('성을 입력하세요.'), name = prompt('이름을 입력하세요.')] = ["김"];

alert(surname); // 김 (배열에서 받아온 값)
alert(name);    // prompt에서 받아온 값

 

 

---

 

 

 객체의 구조분해할당 

 

할당 연산자 우측엔 분해하고자 하는 객체를, 좌측엔 상응하는 객체 프로퍼티의 '패턴’을 넣는다.

let {var1, var2} = {var1:…, var2:…}

 

 

 

 분해하려는 객체 프로퍼티의 키목록을 패턴으로 사용하기 

 

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;  // let {...} 안의 순서가 바뀌어도 동일하게 동작한다.

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

// options.title과 options.width와 options.height에 저장된 값이 상응하는 변수에 할당된다.

 

 

 

 분해하려는 객체의 프로퍼티와 변수의 연결을 원하는 대로 조정하기 

 

객체 프로퍼티를 프로퍼티 키와 다른 이름을 가진 변수에 저장하기 

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// { 객체 프로퍼티: 목표 변수 }
let {width: w, height: h, title} = options; 

// width -> w  // options.width를 w라는 변수에 저장
// height -> h  // options.height를 h라는 변수에 저장
// title -> title // 동일한 이름을 가진 변수 title에 저장

alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200

 

 

프로퍼티가 없는 경우를 대비하여 =을 사용해 기본값을 설정하는 것도 가능하다.

let options = {
  title: "Menu"
};

let {width = 100, height = 200, title} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

 

 

 

 객체에 표현식이나 함수 호출을 기본값으로 할당하기 

 

표현식이나 함수는 값이 제공되지 않았을 때 평가 혹은 실행된다.

let options = {
  title: "Menu"
};

let {width = prompt("width?"), title = prompt("title?")} = options;

alert(title);  // Menu
alert(width);  // prompt 창에 입력한 값

 

 

콜론(:)과 할당연산자(=)를 동시에 사용할수도 있다.

let options = {
  title: "Menu"
};

let {width: w = 100, height: h = 200, title} = options;

alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200

 

 

프로퍼티가 많은 복잡한 객체에서 원하는 정보만 뽑아오는 것도 가능하다.

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// title만 변수로 뽑아내기
let { title } = options;

alert(title); // Menu

 

 

 

 분해하려는 객체의 프로퍼티 개수가 할당하려는 변수의 개수보다 많을때 나머지 패턴 사용하기 

 

let options = {
  title: "Menu",
  height: 200,
  width: 100
};

// title = 이름이 title인 프로퍼티
// rest = 나머지 프로퍼티들
let {title, ...rest} = options;

// title엔 "Menu", rest엔 {height: 200, width: 100}이 할당됩니다.
alert(rest.height);  // 200
alert(rest.width);   // 100

 

 

 

 

참고자료

https://ko.javascript.info/destructuring-assignment

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