JavaScript #18 (스프레드 연산자, 구조 분해)

 

스프레드 연산자 : '...OOO ' 으로 표현

 

 

- 배열 타입

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];	// arr1을 펼쳐서 넣음
console.log(arr2);		// [1, 2, 3, 4, 5]

 

 

- 객체 타입

※ 기존 객체에 새로운 속성을 추가하거나 덮어쓸 때 자주 씀

const user = { name: "Jin", age: 20 };
const newUser = { ...user, job: "developer" };
console.log(newUser);
// { name: "Jin", age: 20, job: "developer" }

 

 

 

구조 분해 할당

 

- 배열 타입

const numbers = [10, 20, 30];
const [a, b] = numbers;
console.log(a); // 10
console.log(b); // 20

 

※ ...rest  로 뒤에 나머지 요소들을 묶어서 받을 수 있다.

const [x, ...rest] = [1, 2, 3, 4];
console.log(x);     // 1
console.log(rest);  // [2, 3, 4]

 

 

- 객체 타입

const person = { name: "상진", age: 30 };
const { name, age } = person;
console.log(name); // "상진"
console.log(age);  // 30

 

 

※ react에서도 매번 보는 거니까 알아두라고 하더라~

const userSplit = { id: 1, name: "Kim", age: 20, address: "Seoul" };
const { id, name, age, address } = userSplit;
console.log(id, name, age, address);

const { id, name, ...rest } = userSplit;
console.log(id, name, rest);

 

 

 

요약

뜻	값을 "펼친다"	값을 "꺼낸다"
배열	arr2 = [...arr1]	[a, b] = arr1
객체	{...user}	{name} = user
자주 쓰는 용도	복사, 병합	변수로 꺼내기

 

 

 

 

실습 - 구조 분해 할당을 이용해 다음 객체에서 `title`과 `author`를 추출해보기

const book = { title: "The Great Gatsby", author: "F. Scout" };
const { title: title2, author } = book;

console.log(title2);
console.log(author);