JS(11) 전개구문과 디스트럭쳐링(구조 분해 할당)

전개 구문

배열이나 객체와 같은 데이터 구조를 확장할 때 사용하는 문법

 

배열의 전개 구문

const 과일 = ['사과', '파인애플', '수박'];
const 채소 = ['파', '양파', '마늘'];
const 과채 = [...과일, ...채소];

console.log(과채); // ['사과', '파인애플', '수박', '파', '양파', '마늘']

const 맛난채소 = (a, b, c) => console.log("채소", a, b, c, "는 맛있다.");
console.log(맛난채소(...채소)); // 채소 파 양파 마늘 는 맛있다.

const 채소들 = [...채소];
채소들.push('피망');
console.log(채소들); // ['파', '양파', '마늘', '피망']
console.log(채소); // ['파', '양파', '마늘']

 

객체의 전개 구문

const 과일 = {사과: 1, 딸기: 2};
const 채소 = {마늘: 3, 양파: 4};
const 과채 = {...과일, ...채소};

console.log(과채); // {사과: 1, 딸기: 2, 마늘: 3, 양파: 4}

const me = { name: "철수", address: "서울" };
const newAddress = {address : "부산"};
const newMe = {...me, ...newAddress}

console.log(newMe); // {name: '철수', address: '부산'} 같은 이름의 키가 있으면 나중에 온 객체의 키값으로 업데이트.

 

디스트럭쳐링

배열이나 객체와 같은 데이터 구조를 분해하여 변수에 할당

변수에 속성이나 요소를 간편하게 할당 (구조 분해 할당)

 

배열 디스트럭쳐링

const arr = [1, 2, 3];

let [a, b, c] = arr;
console.log(a, b, c); // 1 2 3

 

객체 디스트럭쳐링

const you = {name: "창수", address: "서울"};

let {address, name} = you;
console.log(address, name); // 서울 창수