[노트내용정리] 전개 연산자(Spread Operator) & 구조 분해 할당(Destructuring)

📌전개 연산자(Spread Operator)

배열이나 객체를 펼쳐서(spread) 구조를 확장할 때 사용.

배열이나 객체를 쉽게 복사하거나, 새로운 배열이나 객체를 생성할 수 있다.

(spread syntax, 전개구문 등으로도 부른다.)

💡‘퍼지다, 펼치다’ 라는 spread의 뜻 처럼, 배열이나 객체로 포장되어 있는 데이터를
가지런히 펼쳐놓는이미지를 생각하자!

 

1. 배열의 전개

• 쉼표로 구분된 각각의 아이템으로 배열 데이터가 전개되어 만들어진다.
• 대괄호[ ] 안에서 세 개의 점(...)을 사용하여 배열을 확장
• 순차적으로 흩뿌려준다.

const arr = [1,2,3]

console.dir(arr)

// 결과
Array(3)
0: 1
1: 2
2: 3
length: 3
[[Prototype]]: Array(0)
// => ... (배열 spread operator)사용 (순차적으로 흩뿌려줌)


const arr1 = [4 ...arr] // 결과: 4,1,2,3

 

2. 객체의 전개

• 원 객체를 건드리지 않고 수정, 추가할 때 사용한다. 객체 안에 있는 값만 가지고와서 바꿔 주고 싶을 때..
• 주소값까지 가져오면 사본만 바꾼다 해도 원본, 사본 둘 다 똑같이 바뀐다.

// 깊은복사
const user = {
  name: 'hello',
  age: 999,
  emails: ['hello@gmail.com']
}
const copyUser = user
console.log(copyUser === user)  //true.

user.age = 22
console.log('user', user)
console.log('copyUser', copyUser)
//user의 age만 22로 바꿔줬지만 copyUser의 age도 함께 22로 바뀐다. => 주소값까지 복사되었기 때문

// 얕은복사
const user = {
  name: 'hello',
  age: 999,
  emails: ['hello@gmail.com']
}
const copyUser = {...user}  // 빈 객체데이터에 user라는 객체데이터의 속성과 값을 전개해 넣어줌.
console.log(copyUser === user) // false

copyUser.age = 22
console.log('user', user) // age: 999
console.log('copyUser', copyUser) // age: 22
console.log(copyUser === user) // false
// 안전하게 copyUser의 age값만 22로 바꿔줄 수 있다.

 

 

 

📌구조 분해 할당 (Destructuring)

• 구조 분해 할당 또는 비 구조화 할당이라고 한다.
• 배열이나 객체와 같은 데이터 구조를 분해하여 변수에 할당하는 표현식이다.
• 내가 원하는 내용을 변수로 만들어서 사용할 수 있다!

💡 배열이나 객체를 분해해서 안에 있는 데이터를 변수에 순서대로 할당해주는 문법으로 이해하자!

 

1. 객체의 구조분해할당

/** 원래는 이렇게 하나 하나 값을 빼서, 각각의 변수에 할당하는 방식을 사용.
let food1, food2, food3;

const categories = {food1 : '과일', food2 : '채소', food3 : '육류'};

food1 = categories.food1;
food2 = categories.food2;
food3 = categories.food3;

console.log(food1, food2, food3);  //과일 채소 육류
*/



// 비구조화할당
const {food1, food2, food3} = {food1 : '과일', food2 : '채소', food3 : '육류'};

console.log(food1, food2, food3);  //과일 채소 육류

 

객체를 반환하는 함수가 있을 경우, 함수의 반환값을 받는 변수를 굳이 만들 필요없다.

const obj = {food1 : '과일', food2 : '채소', food3 : '육류'};

function objReturn(){
  return obj   //이렇게 객체를 반환하는 함수가 있을 때
}

// 반환값(return obj)을 바로 구조분해할당.
const {food1, food2, food3} = objReturn();

console.log(food1, food2, food3); //과일 채소 육류

 

객체에 실제데이터가 없는 경우에 기본값을 할당연산자로 지정해줄 수 있다.

const obj = {
  food1: '과일',
  food2: '채소',
  food3: '육류'
}
const { food1, food2, food3, food4 = '어류' } = obj
const food5 = food1  // food1이라는 변수이름을 다른 이름(food5)으로 재할당 받아서 사용가능.

console.log(food4) //어류
console.log(food5) //과일

 

 

2. 배열의 구조분해할당

• 배열을 순서대로 구조를 분해해서 추출한다.

const fruits = ['Apple', 'Banana', 'Cherry']
const [a, b, c] = fruits
console.log(a, b, c)  // Apple Banana Cherry


const colors = ['Red', 'Yellow', 'Blue']
const [a, b, c, d] = colors
console.log(a, b, c, d)  // Red Yellow Blue undefined
//매칭할 값이 없으면 undefined를 반환한다. 이 때 기본값을 할당연산자로 지정해주면 된다.


const numbers = ['number1', 'number2', 'number3']
const [, , c] = numbers
console.log(c)  // number3