B26: 구조 분해 할당 : object를 변수로 분해하기

목차

1. 구조 분해 할당

2. 배열 분해

3. 객체 분해

4. 중첩 구조 분해 (nested destructuring)

5. 함수와 구조 분해

    5-1. 함수 매개변수

    5-2. 함수 반환값

6. 예시

---

1. 구조 분해 할당

함수에 객체/배열에 저장된 데이터의 일부만 전달하고 싶을 경우, 배열을 변수로 분해하여 전달할 수 있다.

혹은 함수의 매개변수가 여러개이거나, 매개변수 기본값이 필요할 때도 구조 분해를 할 수 있다.

 

구조 분해 할당 (destructuring assignment)은객체/배열을 속성을 해체하여 변수에 담을 수 있게 하는 문법(표현식)이다.

 

해체한다고 해서 원본 객체/배열이 수정되거나 파괴되는 것은 아니다.

원본을 복사한 "이후"에 분해를 하는 것으로,

배열의 요소를 직접 변수에 하나하나 할당하는 것을 간결하게 표현할 수 있다는 점만 다르다

---

2. 배열 분해

배열을 해체해서 변수에 담는 예제를 살펴보자.

let arr = ["DY", "Bang"];	// 배열

let [firstName, surName] = arr;
// firstName = arr[0]
// surName = arr[1]

console.log(firstName);	// DY
console.log(surName);	// Bang

 

✅ split()같이 배열이 반환값인 메서드를 함께 사용할 수도 있다.

let [first, second] = "DY Bang".split(' ');

 

 

✅ 쉼표를 사용해서 필요하지 않은 요소는 버릴 수 있다.

let [first, , third] = ["A", "B", "C", "D"];

console.log(third);	// C

두번째 요소는 쉼표에 의해 생략되었다.

네번째 요소는 할당할 변수가 없어 생략되었다.

 

✅ 할당 연산자 좌측에는 "할당할 수 있는 것이라면 뭐든지 올 수 있다.

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

console.log(user.name) // DY

 

 

✅ .entries() 메서드에 구조 분해를 조합하여 순회해 할당할 수 있다.

let user = {
  name: "John",
  age: 30
};

// 객체 user의 키, 값 순회하기
for (let [key, value] of Object.entries(user)) {  // Object.entries로 user를 [키,값] 배열로 만듦
  alert(`${key}:${value}`);	// name:John, age:30
}

let user = new Map();
user.set("name", "John");
user.set("age", "30");

for(let [key, value] of user) {	// map을 구조분해 해본 예제
  alert(`${key}:${value}`);
}

 

✅ 두 변수에 저장된 값을 교환할 때 구조 분해 할당을 사용할 수 있다.

let guest = "Jane";
let admin = "Pete";
[guest, admin] = [admin, guest];

alert(`${guest} ${admin}`);	// Pete Jane

 

✅ ...로 나머지 요소들을 모두 가져와 할당할 수 있다. (배열 생성)

let [first, second, ...rest] = ["A", "B", "C", "D"];

console.log(first);	// "A"
console.log(second);  // "B"

console.log(rest[0]);	// "C"
console.log(rest[1]);	// "D"
console.log(rest.length);  // 2

점 세개(...)를 붙인 매개변수를 추가하면 나머지 요소들을 저장한 새로운 배열이 만들어진다.

 

✅ 기본값을 지정할 수 있다.

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

let [first, second] = [];

console.log(first);	// undefined
console.log(second);	// undefined

 

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

기본값에는 원시형뿐만 아니라 표현식, 함수 호출도 작성할 수 있다.

let [id = "Guest", from = prompt('국가를 입력하세요.')] = ["Potato"];

console.log(id);	// Potato
console.log(from);	// prompt로 입력한 값

 

---

3. 객체 분해

객체를 분해하는 기본 문법은 아래와 같다.

let {var1, var2} = {var1:..., var2:...};
// 상응하는 객체 프로퍼티의 '패턴' = 분해하고자하는 객체

 

객체 프로퍼티의 키 목록을 패턴으로 사용하는 예시를 보자.

각 키에 저장된 값이 상응하는 변수에 할당되며, 순서는 상관이 없다.

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

let { title, width, height } = options;

console.log(title); // Menu
console.log(width); // 100
console.log(height); // 200

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

console.log(title); // Menu
console.log(width); // 100
console.log(height); // 200

 

 

✅ 콜론(:)을 사용하여 키와 다른 이름을 가진 변수에 원하는 대로 연결할 수 있다.

콜론은 분해 대상 객체의 프로퍼티: 목표 변수와 같은 형태로 사용한다.

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

let {width:w, height: h, title} = options;
// width -> w
// height -> h

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

 

 

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

let options = {
  title: "Menu"
};

let (width: w = 100, height = prompt("width?"), title} = options;

console.log(w);  // 100
console.log(height);  // prompt로 입력한 값
console.log(title);  // Menu

 

✅ 나머지 패턴(...)을 사용해서 나머지 프로퍼티를 할당할 수 있다.

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

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

console.log(rest.width);  // 100
console.log(rest.height);  // 200

 

---

4. 중첩 구조 분해 (nested destructuring)

객체/배열이 다른 객체/배열을 포함할 경우, 중첩 구조 분해를 할 수 있다. 

let options = {
  size: {
    width: 100,
    height: 200
  },
  items: ["Cake", "Cookie"],
  nuts: true
};

// 코드를 여러 줄에 걸쳐 작성해 의도하는 바를 "명확히" 드러냄
let {
  size: {
    width,
    height
  },
  items: [item1, item2],
  title = "Menu"
} = options;

 

 

---

5. 함수와 구조 분해

1. 함수 매개변수

함수의 매개변수 중 상당수는 선택적으로 쓰이는 경우가 있다.

// 리팩토링 이전 함수
// 인수의 순서가 틀리면 문제가 발생할 수 있다.
function showMenu(title = "Untitled", width = 200, height = 100, items = []) {
  // ...
}

// 함수 호출 시 가독성이 떨어진다
showMenu("My Menu", undefined, undefined, ["Cake", "Cookie"]);

 

위의 함수를 구조 분해를 사용해서 리팩토링 해보자.

✅ 객체를 인수로 넘기면 매개변수에 구조분해가 되어 더 가독성 좋은 코드를 작성할 수 있다.

let options = {
  title: "My Menu",
  items: ["Cake", "Cookie"]
};

function showMenu({title="Undefined", width=100, height=200, items=[]) {
  // ...
}

showMenu(options);

 

 

✅ 중첩 객체와 콜론을 조합하여 더 복잡한 분해도 가능하다.

let options = {
  title: "My menu",
  items: ["Item1", "Item2"]
};

function showMenu({
  title = "Untitled",
  width: w = 100,
  height: h = 200,
  items: [item1, item2]
}) {
  // ...
};

showMenu(options);

 

✅ 모든 매개변수에 기본값을 할당하고 싶다면 빈 객체를 명시하면 된다.

// ❌ 에러 발생
showMenu();

// ⭕ 모든 인수에 기본값 전달
showMenu({});

// ⭕ 빈 객체를 인수 전체의 기본값으로 설정
function showMenu({ title="Menu",width=100,height=200 } = {}) {
  // ...
}

showMenu();

 

 

2. 함수 반환값

함수의 반환값에 구조 분해를 사용하여 작업할 수 있다.

function foo() {
  return [1, 2, 3];
}

let a, b;
[a, ...b] = foo();

console.log(a);	// 1
console.log(b);	// [2, 3]

 

 

---

6. 예시

1. 웹 링크 구조분해하기

정규 표현식의 exec() 메서드는 일치하는 부분을 찾으면 [일치하는 부분 전체, 정규식에서 괄호로 묶인 각 그룹과 일치하는 부분, ...]을 반환한다.

function parseProtocol(url) {
  let parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
  if(!parsedURL) {
    return false;
  }
  console.log(parsedURL);
  // [ 
  //    "https://develper.mozilla.org/en-US/Web/JavaScript",
  //    "https",
  //    "developer.mozilla.org",
  //    "en-US/Web/JavaScript"
  // ]
  
  let [, protocol, fullhost, fullpath] = parsedURL;
  return protocol;
}

console.log(parseProtocol("https://developer.mozilla.org/en-US/Web/JavaScript"),);
// "https"

 

2. for..of문 같이 써보기

function People(name, mother, father, sister, brother, age) {
  this.name = name;
  this.family = {
    mother,
    father,
    sister,
    brother,
  };
  this.age = age;
};

let Tom = new People("Tom", "Mr. Smith", "Mrs. Smith", "Anna", "Bob", 25);
let Jane = new People("Jane", "Mr. Brown", "Mrs. Brown", "Lucy", null, 23);

let people = [Tom, Jane];

for(let {
  name,
  family: {father},
} of people) {
  console.log(`Name: ${name}, Father: ${father}`);
}
// Name: Tom, Father: Mr.Smith"
// Name: Jane, Father: Mr.Brown"

 

 

 

 

참고

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

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