Javascript 비구조화 할당
정의
비구조화 할당(destructuring assignment) 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식(expression)
즉 배열 또는 복잡한 구조의 Json 안에 있는 값을 편하게 꺼내 쓸 수 있는 방법.
배열 기본 문법
const [a1, a2, ...a3over] = [1, 2, 3, 4, 5];
console.log(a1); // 1
console.log(a2); // 2
console.log(a3over); // [3, 4, 5]
좌항이 호출될 변수명 집합, 우항이 할당할 값
좌항의 전개 연산자(…)은 항상 우측 끝에 있어야 한다.
const [a1, ...a3over, a3] = [1, 2, 3, 4, 5]; // error
객체 기본 문법 중요
const { a1, a2, ...a3over } = { a1 : 10, a2 : 20, a3 : 30, a4 : 40 };
console.log(a1); // 10
console.log(a2); // 20
console.log(a3over); // { a3: 30, a4: 40 }
우항의 key 값이 좌항의 변수명과 매칭, 따라서 순서는 상관없음.
좌항의 전개 연산자(…)은 항상 우측 끝에 있어야 한다.
const { a2, a4, ...a_rest } = { a1 : 10, a2 : 20, a3 : 30, a4 : 40 }; // 순서 상관 없음
console.log(a2); // 20
console.log(a4); // 40
console.log(a_rest); // { a1 : 10, a3 : 30 };
const { a2, ...a_rest, a4 } = { a1 : 10, a2 : 20, a3 : 30, a4 : 40 }; // error
깊은 구조의 객체 할당
const object =
{ id : 'hwan77',
information: {
name: '김정환',
languages: ['korean', 'english', 'chinese']
},
age : 18
};
const {name, languages} = object.information;
const {id, age} = object;
console.log(name); // 김정환
console.log(languages); // ['korean', 'english', 'chinese']
console.log(id); // hwan77
console.log(age); // 18
이름 변경 및 기본값 할당
const object =
{ id : 'hwan77',
information: {
name: '김정환',
languages: ['korean', 'english', 'chinese']
},
age : 18
};
const {id : userID, address : addr = 'homeless' } = object;
// object 내의 id 키를 userID 로 이름 변경
// object 내의 adress 키를 addr로 이름 변경 및 객체에 값이 없는 경우 homeless 기본값 세팅
console.log(id); // error (id is not defined)
console.log(userID); // hwan77
console.log(address); // error (address is not defined)
console.log(addr); // homeless
배열, 객체 Deep Copy
shallow copy(얕은 복사)
// shallow copy
let array1 = [1, 2, 3, 4, 5];
let array2 = array1;
array1[0] = 'one';
console.log(array1); // ['one', 2, 3, 4, 5]
console.log(array2); // ['one', 2, 3, 4, 5]
같은 값에 대한 참조만 복사 하여 같은 메모리를 가리킨다.
deep copy(깊은 복사)
let array1 = [1, 2, 3, 4, 5];
let array2 = [...array1];
array1[0] = 'one';
console.log(array1); // ['one', 2, 3, 4, 5]
console.log(array2); // [1, 2, 3, 4, 5]
완전히 새로운 객체로 할당됨
deep copy & 값 변경 & 값 추가
const a = { a1 : 10, a2 : 20, a3 : 30, a4 : 40 };
// deep copy + 값 변경
const aCopy = { ...a, a3 : '삼십' };
console.log(aCopy); // {a1: 10, a2: 20, a3: '삼십', a4: 40}
const aCopy2 = { a3 : '삼십', ...a }; // 순서를 바꾸면?
console.log(aCopy2); // {a1: 10, a2: 20, a3: 30, a4: 40}
// deep copy + 새로운 값 할당
const aCopy3 = { aFirst : 0, ...a };
console.log(aCopy3); // {aFirst: 0, a1: 10, a2: 20, a3: 30, a4: 40}
const aCopy4 = { ...a, aLast : 999 }; // 순서를 바꾸면?
console.log(aCopy4); // {a1: 10, a2: 20, a3: 30, a4: 40, aLast: 999}