11. 구조 분해 할당

구조 분해 할당 - JavaScript | MDN

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. 객체 및 배열 리터럴 표현식을 사용하면 즉석에서 쉽게 데이터 뭉치를 만들 수 있습니다. 구조 분해 할당의 구문은 위와 비슷하지만, 대신 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지 정의합니다.

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

11-1. 배열 구조 분해 할당

11-1-1. 이전의 배열 분해 할당 방법(ES5)

// 배열의 인덱스를 활용하여 요소에 접근하는 방법을 쓴다.
var categories = ['IT', 'life', 'TIL']; // 할당을 해주고자 하는 배열

// n개의 할당을 해주고자 하면, 가독성을 위해 n줄의 코드 작성이 필요하다.
var category1 = categories[0];
var category2 = categories[1];
var category3 = categories[2];

console.log(category1, category2, category3);
// IT life TIL

11-1-2. 배열 변수 할당하기

const categories = ['IT', 'life', 'TIL']; // 할당을 해주고자 하는 배열

// 아래의 두 코드는 동일하게 작동한다.
const [category1, category2, category3] = ['IT', 'life', 'TIL'];
const [category1, category2, category3] = categories;

console.log(category1, category2, category3);
// IT life TIL

• 변수의 선언과 할당이 동시에 이루어진다.

• 새로운 변수의 선언이 배열안에서 이루어지고 있다.

const [resume, tech-interview, final-interview] = [true, true, true];
// 가장 흔하게 볼 수 있는 배열 구조 분해 할당 구문이다.

const [resume, tech-interview, final-interview] = 'true,true,true'.split(',');
// 'true,true,true'.split(',')의 반환값으로 배열이 나온다.

const [resume, tech-interview, final-interview] = 'ttt';
// 문자열은 이터러블하다.

console.log(resume, tech-interview, final-interview);
// 첫번째 할당문 : true true true
// 두번째 할당문 : 'true' 'true' 'true'
// 세번째 할당문 : 't' 't' 't'

11-1-3. 선언 후 변수에 할당하기

const categories = ['IT', 'life', 'TIL']; // 할당을 해주고자 하는 배열
let category1, category2, category3; // 선언만 해준 상태이므로 undefined

[category1, category2, category3] = categories;
// IT life TIL

const categories = ['IT', 'life', 'TIL']; // 할당을 해주고자 하는 배열
const category1, category2, category3; // Missing initializer에러가 발생한다.

[category1, category2, category3] = categories; // 에러가 위에서 발생하므로 할당이 불가능!

11-1-4. 에러처럼 보이지만 에러가 아닌 구문

• 좌변에서의 변수의 갯수가 우변의 배열의 요소의 갯수보다 많은 경우

const categories = ['IT', 'TIL']; // 배열 요소의 갯수 : 2

const [category1, category2, category3] = categories; // 변수의 갯수 : 3
// category3 === undefined

• 좌변에서 콤마(,)사이에서 변수를 선언하지 않은 경우

const [title, , categories] = ['TIL-JS', '...content...', ['it', 'js', 'til']];
// 원하는 title과 categories의 값만 가져올 수 있다.
// title : 'TIL-JS'
// categories : ['it', 'js', 'til']

// 구조분해할당을 통한 복잡 데이터 추출
// todos라는 배열안에 객체가 3개 담겨진 구조이다.
// 각각의 객체에는 id, content, completed라는 키 값이 존재한다.
const todos = [
	  { id: 1, content: 'HTML', completed: true },
	  { id: 2, content: 'CSS', completed: false },
	  { id: 3, content: 'JS', completed: false }
];

// todos 배열의 두 번째 요소인 객체로부터 id 프로퍼티만 추출
const [, {id}] = todos;
console.log(id); // 2

// todos 배열의 세 번째 요소인 객체로부터 content 프로퍼티만 추출
const [,, {content}] = todos;
console.log(content); // 'JS'

11-1-5. 기본 값(default) 설정하기

const post = ['JS-study', ['til', 'fe', 'it']];

// 기본값을 설정하지 않은 경우
const [title, categories, isPrivate] = post;
console.log(isPrivate);
// undefined

// 기본값을 설정한 경우
const [title, categories, isPrivate = false] = post;
console.log(isPrivate);
// false

const post = ['JS-study', ['til', 'fe', 'it'], true];
const [title, categories, isPrivate = false] = post;

console.log(isPrivate);
// true

11-1-6. 변수 값 교환하기

let wade = {
	  name : 'wade',
	  ranking : '1st',
};

let licat = {
	  name : 'licat',
	  ranking : '2nd',
};

[wade.ranking, licat.ranking] = [wade.ranking, licat.ranking];

console.log(wade, licat);
// {name: 'wade', ranking: '2nd'} {name: 'licat', ranking: '1st'}

11-1-7. 배열과 Rest 요소

const categories = ['IT', 'life', 'TIL', 'javascript'];
const [firstCategory, ...restCategories] = categories;

console.log(firstCategory);
// 'IT'
console.log(restCategories);
// ['life', 'TIL', 'javascript'] 나머지 요소들이 배열로 할당이 된다.

// 나머지 요소들의 갯수가 하나이더라도 배열로 받아온다.

const categories = ['IT', 'life'];
const [firstCategory, ...restCategories] = categories;

console.log(firstCategory);
// 'IT'
console.log(restCategories);
// ['life']

const categories = ['IT', 'life', 'TIL', 'javascript'];
const [firstCategory, ...restCategories, lastCategory] = categories;
// Uncaught SyntaxError: Rest element must be last element

11-2. 객체 구조 분해

11-2-1. 이전의 객체 구조 분해 할당 (ES5)

// human이라는 객체를 생성한다.
const human = {name: 'su', age: 10};

// 객체의 프로퍼티 키(name, age)를 이용하여 변수에 할당한다.
const name = human.name;
const age = human.age;

console.log(name); // 'su'
console.log(age); // 10

11-2-2. 현재의 객체 구조 분해 할당 (ES6)

const human = {name: 'su', age: 10};

// 변수를 객체 리터럴 형태로 선언하여 human 객체의 프로퍼티를 구조 분해하여 할당한다.
const {name, age} = human;

console.log(name); // 'su'
console.log(age); // 10

const human = {name : 'su', age: 10};

// 할당 받을 변수명(birth)과 객체의 프로퍼티 키(age)가 동일하지 않다.
const {name, birth} = human;

console.log(name); // 'su'
// birth라는 변수 선언 후 객체의 프로퍼티가 할당되지 않았다.
console.log(birth); // undefined

const candy = {lemon: 'sour', grape: 'sweet'};

// 변수가 작성된 순서와 객체의 프로퍼티 키 순서가 다르다.
const {grape, lemon} = candy;

console.log(lemon); // 'sour'
console.log(grape); // 'sweet'

11-2-3. 새로운 변수를 이용한 할당

const myPet = {nickname: 'star', age: 8};

// {프로퍼티 키: 새로운 변수명} 형태로 작성한다.
const {nickname: 이름, age: 나이} = myPet;

console.log(이름); // 'star'
console.log(나이); // 8

// 새로운 변수에 할당했으므로 기존의 프로퍼티 키와 동일한 변수는 존재하지 않는다.
console.log(nickname); // ReferenceError: nickname is not defined
console.log(age); // ReferenceError: age is not defined

11-2-3. 기본값 설정

const girl = {name: 'su'};

// 객체에 존재하지 않는 프로퍼티(age, feature)의 기본값을 설정한다.
const {name, age = 10, feature = 'cute'} = girl;

console.log(name); // 'su'
console.log(age); // 10
console.log(feature); // 'cute'

11-2-4. 기본값을 가진 새로운 변수를 이용한 할당

const human = {name: 'su'};

const {name, height: h = 175} = human;

console.log(name); // 'su'
console.log(h); // 175

// h라는 새로운 변수에 할당했으므로 height에는 프로퍼티가 할당되지 않는다.
console.log(height); // ReferenceError: height is not defined

11-2-5. 객체와 Rest 프로퍼티

const myBag = {laptop: 'black', card : 'blue', powder : 'white', lipstick : 'red'};

const {laptop, card, ...cosmetics} = myBag;

console.log(laptop); // 'black'
console.log(card); // 'blue'
console.log(cosmetics); // {powder: 'white', lipstick: 'red'}

11-3. 중첩 구조 분해

const bread = {
		title : '빵',
		info : {
				make : true,
				type : ['바게뜨', '호밀빵', '핫도그 번', '도넛', '브래드스틱', '난', '비스킷'],
		},
	  ingredients: ['ingredients', ['밀가루', '이스트', '사워도', '소금']],
}

const { 
    ingredients : [ , [  // ingredients 2차원 배열 추출할 값 할당
				ingredient1, ingredient2, , ingredient3
				]], 
    info : {  // info가 객체이므로 {} 으로 접근 
				type : breadType // type 변수 이름 'breadType'으로 변경
		} 
} = bread;

console.log(ingredient1); // '밀가루'
console.log(ingredient2); // '이스트'
console.log(ingredient3); // '소금'
console.log(breadType); // ['바게뜨', '호밀빵', '핫도그 번', '도넛', '브래드스틱', '난', '비스킷']

11-4. for of 반복문과 구조 분해

11-4-1. Object.entries(), for of

const site = {
		name : 'paullab',
		url : 'www.paullab.co.kr',
		mobile : 'm.paullab.co.kr'
};

for (const [key, val] of Object.entries(site)) {
		console.log(`${key}: ${val}`);
}

11-4-2. Map(), for of

const site = new Map();
site.set("name", "paullab"); // set으로 객체에 삽입
site.set("url", "www.paullab.co.kr");


for (const [key, val] of site) {
		console.log(`${key}: ${val}`);
}

11-5. 함수 구조 분해

11-5-1. 함수 매개변수의 기본값(default) 설정

function person(user) {
	  user = user === undefined ? {} : user;
	  let name = user.name === undefined ? 'X' : user.name ;
	  let age = user.age === undefined ? 'X' : user.age;
	  console.log(`이름 : ${name}, 나이 : ${age}`);
}

person({
	  name : 'kimcoding',
	  age : 30
});
// 이름 : kimcoding, 나이 : 30

function person({name = 'X', age = 'X', favoriteColor = 'black' }={}) {
	  console.log(`이름 : ${name}, 나이 : ${age}, 좋아하는 색상 : ${favoriteColor}`);
}

person({
	  name : 'kimcoding',
});
// 이름 : kimcoding, 나이 : X, 좋아하는 색상 : black

function person({name = 'X', age = 'X', favoriteColor = 'black' }) {
	  console.log(`이름 : ${name}, 나이 : ${age}, 좋아하는 색상 : ${favoriteColor}`);
}

person({}); // 이름 : X, 나이 : X, 좋아하는 색상 : black


function person({name = 'X', age = 'X', favoriteColor = 'black' }) {
	  console.log(`이름 : ${name}, 나이 : ${age}, 좋아하는 색상 : ${favoriteColor}`);
}

person();

function person({name = 'X', age = 'X', favoriteColor = 'black' }={}) {
	  console.log(`이름 : ${name}, 나이 : ${age}, 좋아하는 색상 : ${favoriteColor}`);
}

person(); // 이름 : X, 나이 : X, 좋아하는 색상 : black

function shape({color = 'puple', cords = {x:0, y: 0}, radius = 10 } = circle) {
		circle = {
				color,
				cords,
				radius
		}
}

shape(circle = {
cords : { x : 10, y : 20 },
});

console.log(circle);

11-5-2. 함수 매개변수로 전달된 객체에서 속성 분해 할당

function movieId({id}) {
	  return id;
}

function whatMovie ({category: genre, title: {main: name}}){
	  console.log(`${genre[0]} movie is ${name}`);
}

const movie = {
	  id: 14,
	  category: ['SF', 'Fantasy'],
	  title: {
	      main: "듄",
	      sub: "이것이 위대한 시작이다"
	  }
};

console.log("movieId: " + movieId(movie)); // "movieId: 14"
whatMovie(movie); // "SF movie is 듄"

11-5-3. 구조 분해 문제

• people 객체의 이름과 나이의 정보가 담겨있다. 가장 나이가 적은 사람의 이름과 나이를 반환하는 함수를 만들어보자. (구조 분해 할당을 사용하여 문제를 풀어보자.)
• Object.entries와 구조 분해를 사용해서 문제를 풀어보세요.
 

const people = {
		roberst : 20,
		mark : 18,
		kevin : 7,
		james : 21,
		michael : 11,
		mark : 15
};

• 정답 코드

function findYoungest(people) {
		let name = '';
		let age = Number.MAX_SAFE_INTEGER; // 안전한 최대 정수값 초기화 설정
		let result;
		for ([key, val] of Object.entries(people)) {
				if (age > val) {
						age = val;
						name = key;
				}
		}
		result = `이름: ${name} 나이 :${age}`
		return result;
}

References

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