.gif&blockId=11b00c82-b138-8050-a58b-dcbceda2ef8f)
( … )
배열 [], 혹은 객체 {} 안의 값을 편하게 꺼내 쓸 수 있는 문법
•
전개 연산자
•
비구조화 할당(destructuring assignment) 구문
•
JavaScript 표현식
배열에서의 적용
[a1, a2, ...rest_a] = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(a1); // 1
console.log(a2); // 2
console.log(rest_a); // [3, 4, 5, 6, 7, 8, 9]
TypeScript
복사
•
좌항이 호출될 변수명 집합, 우항이 할당할 값
•
좌항의 각 요소에는 같은 index를 가지는 배열값이 할당
•
전개 연산자( ... )를 사용하여 좌항에서 명시적으로 할당되지 않은 나머지 배열 값들을 사용 가능
전개 연산자 이후에 변수를 입력하거나, 좌 우항이 다른 속성일 경우 에러가 발생
객체에서의 적용
var { a1, a2, ...rest_a } = { a1 : 10, a2 : 20, a3 : 30, a4 : 40 };
console.log(a1); // 10
console.log(a2); // 20
console.log(rest_a); // { a3: 30, a4: 40 }
TypeScript
복사
•
우항의 key 값이 좌항의 변수명과 매칭
변수 선언에 대한 명시(var, let, const)가 없을 경우 괄호를 사용하여 묶어주어야 한다
복사
var arr = [1,2,3];
var copy1 = arr;
var [...copy2] = arr;
var copy3 = [...arr];
arr[0] = 'String';
console.log(arr); // [ 'String', 2, 3 ]
console.log(copy1); // [ 'String', 2, 3 ]
console.log(copy2); // [ 1, 2, 3 ]
console.log(copy3); // [ 1, 2, 3 ]
TypeScript
복사
•
얕은 복사인 copy1은 arr을 참조하기 때문에 0번 요소가 변경되었지만 전개 연산자를 사용한 copy2, copy3는 깊은 복사가 됨.
var prevState = {
name: "yuddomack",
birth: "1996-11-01",
age: 22
};
var state = {
...prevState,
age: 23
};
console.log(state); // { name: 'yuddomack', birth: '1996-11-01', age: 23 }
TypeScript
복사
•
복사와 함께 새로운 값을 할당할 수 있다.
