[JavaScript] 구조 분해 할당 javascript.info

구조 분해 할당

React를 공부하다 보면 굉장히 많이 만나는 개념인데 한번 

공부하면서 정리해보고자 합니다.

객체 , 배열에 사용됩니다. 

 

---

배열

let arr = ["One", "Two"];
let [first, second] = arr;
console.log(first);
console.log(second);

first = "One" , second = "Two" 가 할당됩니다.

 

배열 값 버리기 

let arr = ["One", "Two", "Three"];
let [first, , Three] = arr;
console.log(first);
console.log(Three);

, , 를 사용하면 "Two"가 생략되고 그 뒤에 Three가 받아와 집니다.

 

.entries() 이용한 key value 출력

let user = {
	name: "HwanMIn",
	age: 26,
};

for (let [key, value] of Object.entries(user)) {
	console.log(`${key}:${value}`); // name:HwanMin, age:26이 차례대로 출력
}

값 교환 

원래 방법

let guest = "guest";
let admin = "HwanMin";
let temp;
// 임시변수를 이용해서 값을 교환한다.
temp = guest;
guest = admin;
admin = temp;

console.log(guest, admin);

현실세계에선 자리를 바꿀 때 서로 일어나서 자리를 바꾸면 되지만

프로그래밍에서는 의자가 3개 필요하다.  

A -> C 

B -> A

A -> B

이런식으로 원리가 필요하지만 , 구조분해 할당을 이용하면 더 편하게 값 교환이

가능하다고 합니다. 

 

구조 분해 할당 적용한 방법

let guest = "guest";
let admin = "HwanMin";

[guest, admin] = [admin, guest];

console.log(guest, admin);

... 나머지 값 받아오기 

let [name1, name2, ...rest] = [
	"Julius",
	"Caesar",
	"Consul",
	"of the Roman Republic",
];

name1 = "Julius" , name2 = "Caesar" 가 할당되고 

나머지 두개에 배열 요소는 ...rest에 할당 됩니다. 

[ 'Consul', 'of the Roman Republic' ]

...rest가 가장 마지막에 위치해야 한다고 합니다. 

 

기본값 

let [firstName, surname] = [];

값이 없으면 undefine이 할당됩니다. 

 

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

name만 Julius가 할당 됩니다.

---

객체

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

let {title, width, height} = options;

각각 변수에 객체에 해당하는 value 값이 할당 됩니다. 

배열과는 다르게 순서는 상관없이 key값으로 되기 때문에 순서를 

바꿔도 괜찮습니다. 

 

let options = {
  title: "Menu"
};

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

프로퍼티 없을 시 기본값 할당

 

let options = {
	Name: "HwanMin",
	age: 26,
	height: 190,
};

let { Name, ...rest } = options;

console.log(Name); // HwanMin
console.log(rest.age); // 26
console.log(rest.height); // 190

... 상용 시 나머지 객체가 담겨져 있다.

위 코드에서는 Name값을 가져오고 ...rest = {age : 26 , height : 190} 인 상태

 

// 함수에 전달할 객체
let options = {
  title: "My menu",
  items: ["Item1", "Item2"]
};

// 똑똑한 함수는 전달받은 객체를 분해해 변수에 즉시 할당함
function showMenu({title = "Untitled", width = 200, height = 100, items = []}) {
  // title, items – 객체 options에서 가져옴
  // width, height – 기본값
  alert( `${title} ${width} ${height}` ); // My Menu 200 100
  alert( items ); // Item1, Item2
}

showMenu(options);

함수 파라미터로 객체를 전달 받으면 

순서에 상관 없이 편하게 값을 받아 올 수 있다.

 

JavaScript.info 과제 부분 해결하기 

문제 1

아래와 같은 객체가 있다고 가정해봅시다.

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

구조 분해 할당을 사용해 아래 미션을 수행해 보세요.

• name 프로퍼티의 값을 변수 name에 할당하세요.
• years 프로퍼티의 값을 변수 age에 할당하세요.
• isAdmin 프로퍼티의 값을 변수 isAdmin에 할당하세요. isAdmin이라는 프로퍼티가 없으면 false를 할당하세요.

미션을 달성하면 아래 예시를 제대로 실행할 수 있게 됩니다.

<내가 푼 답>

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

let { name, years: age, isAdmin = false } = user;

console.log(name);
console.log(age);
console.log(isAdmin);

문제 2

최대 급여 계산하기

중요도: 5

급여 관련 정보가 저장된 객체 salaries가 있다고 가정해 봅시다.

let salaries = {
  "John": 100,
  "Pete": 300,
  "Mary": 250
};

가장 많은 급여를 받는 사람의 이름을 반환해주는 함수 topSalary(salaries)를 만들어봅시다. 조건은 아래와 같습니다.

• salaries가 비어있으면 함수는 null을 반환해야 합니다.
• 최대 급여를 받는 사람이 여러 명이라면 그 중 아무나 한 명 반환하면 됩니다.

힌트: Object.entries와 구조 분해를 사용해 키-값 쌍을 순회하는 방식을 사용해보세요.

<내가 푼 답>

function topSalary(obj) {
	let maxSal = 0;
	let buja = null;
	for (let [name, sal] of Object.entries(obj)) {
		if (sal > maxSal) {
			maxSal = sal;
			buja = name;
		}
	}
	return buja;
}

let salaries = {
	John: 100,
	Pete: 300,
	Mary: 250,
};

console.log(topSalary(salaries));

 

reference: https://ko.javascript.info/destructuring-assignment#tasks

구조 분해 할당