전개 구문 (Spread syntax)

---

정의

• 원래 구조를 벗어나고 새로운 구조로 덧입힐 때 사용
• …
• 구조 분해 할당과 함께 많이 사용된다.

개념

• 객체를 전개할 때 = {...obj} 중괄호 안 => 전개 후{1,2,3,4}
• 객체를 해체해서 새로운 객체에 나열해줘
• 배열을 전개할 때 = [...arr] 대괄호 안 => 전개 후 [1,2,3,4]
• 배열을 해체해서 새로운 배열에 나열해줘
• ⭐새로 생성된 객체또는 배열은 원본과 동일한 속성을 가지지만, 원본 객체또는 배열과는 메모리 주소가 다르므로 독립적으로 동작한다.

• 배열에서의 전개

let arr = [1, 2, 3];

// 배열에서 spread operator를 쓰면
// 배열의 모양으로 전개 된다.
// 서로 다른 주소값을 가지게하여
// 각각 다른 배열이 된다.
newArr = [...arr]
console.log(arr); //[1,2,3]
console.log(newArr); //[1,2,3]

//원래 구조를 벗어나고 새로운 구조로 덧입혀야할 때 사용
let arr = [1, 2, 3];

console.log(arr); //[ 1, 2, 3 ]
console.log(...arr); // 1 2 3, 대괄호가 없어지고 전개

//4를 추가하고 싶다. push 보다 간편하게 가능
let arr = [1, 2, 3];

let newArr = [...arr, 4]
console.log(newArr);

[ 1, 2, 3, 4 ]

• 객체에서 전개
• 변수를 할당해서 전개 할 수있다.

let user = {
name: '김종연',
age: 25
};
let user2 = { ...user } 
// ...만 사용해서 전개했기 때문에 같은 객체가 반환
// 주소값은 다르다.

console.log(user);
console.log(user2);
console.log(user===user2);

{ name: '김종연', age: 25 }
{ name: '김종연', age: 25 }
false

let user = {
name: '김종연',
age: 25
};
let user2 = { ...user, hi: 'hello' } // 추가하고 싶은 key와value를 입력해 추가

console.log(user);
console.log(user2);
{ name: '김종연', age: 25 }
{ name: '김종연', age: 25, hi: 'hello' }

하루를 마치며

오늘은 지옥의 날이였다. 달리기반 첫 수업이었는데 수업 내용은 기초 내용이라 어렵진않았지만, 실습과제 마지막 문제가 어려웠다. 코드 자체 원리와 문제에 대한 답을 했지만 코드로 작성하기까지는 어려운 것 같다. 앞으로가 걱정되는 하루였다.