TIL _ Spread Syntax

1. Spread Syntax

2. 기존 배열, 객체에 요소 추가

1. Spread Syntax

---

🔑 spread syntax는 배열이나 객체를 복사하기 위해 사용합니다.

🔑 복사하고자 하는 배열이나 객체명 앞에 ...을 붙여 사용할 수 있습니다.

// 예시1
const arr = ['a', 'b', 'c'];

const copiedArr = [...arr];

console.log(copiedArr);
// ['a', 'b', 'c']

// 예시2
const obj = {
  name: 'Paul',
  age: 20,
  gender: 'male'
}

const copiedObj = {...obj};

console.log(copiedObj);
// {name: 'Paul', age: 20, gender: 'male'}

🔑 spread syntax를 통해서 배열 또는 객체 내부의 객체를 복사하는 경우, 내부 객체의 각 프로퍼티 자체가 복사되는 것이 아니라 객체가 저장된 메모리의 주소가 복사됩니다.

🔑 따라서 기존 내부 객체의 키나 키 값을 수정할 경우, spread syntax를 통해서 복사된 내부 객체들의 내용도 덩달아 수정됩니다.

// 예시1
const obj1 = {
  name: 'Paul',
  age: 20
}

const obj2 = {
  name: 'Ray',
  age: 21
}

const arr = [obj1, obj2];

const copiedArr = [...arr];

console.log(copiedArr);
// [{name: 'Paul', age: 20},   { name: 'Ray', age: 21 }]

obj1.name = 'Kevin' ;

console.log(copiedArr);
// [{name: 'Kevin', age: 20},   { name: 'Ray', age: 21 }]

// 예시2
const languages = {
  first: 'English',
  second: 'Spanish'
}

const obj = {
  name: 'Paul',
  language: languages
}

const copiedObj = {...obj};

console.log(copiedObj);
// {name: 'Paul', language: { first: 'English', second: 'Spanish'}}

languages.second = 'Japanese';

console.log(copiedObj);
// {name: 'Paul', language: { first: 'English', second: 'Japanese'}}

2. 기존 배열, 객체에 요소 추가

---

🔑 spread syntax 뒤에 요소를 추가하여 기존 배열 또는 객체에 새 요소를 추가할 수도 있습니다.

// 예시1
const arr = ['a', 'b', 'c'];

const copiedArr = [...arr, 'd', 'e'];

console.log(copiedArr);
// ['a', 'b', 'c', 'd', 'e']

// 예시2
const obj = {
  name: 'Paul',
  age: 20,
  gender: 'male'
}

const copiedObj = {...obj, major: 'linguistics'};

console.log(copiedObj);
// {name: 'Paul', age: 20, gender: 'male', major: 'linguistics'}

---

🔑 concat() 메소드 대신 spread syntax를 활용하여 배열이나 객체를 합칠 수도 있습니다.

🔑 합치려는 객체들 중 같은 키를 가진 프로퍼티의 경우, 제일 마지막에 오는 객체의 키의 값으로 덮어 씌워집니다.

// 예시1
const milk = ['milk', 'sugar'];
const americano = ['coffee', 'water'];

const latte = [...milk, ...americano];

console.log(latte);
// ['milk', 'sugar', 'coffee', 'water']

// 예시2
const obj1 = {
  name: 'Paul',
  gender: 'male'
}

const obj2 = {
  name: 'Ray',
  age: 20
}

const copiedObj = {...obj1, ...obj2};

console.log(copiedObj);
// { name: 'Ray', gender: 'male', age: 20 }
// name이라는 동일한 키가 존재하기 때문에, 마지막에 온 obj2의 name의 값('Ray')으로 덮어짐

---

• 참고자료
  -MDN Spread syntax (...), https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
  -드림코딩 by 엘리, 자바스크립트 최신 문법, https://youtu.be/36HrZHzPeuY
  

"작성 내용 중 오류나 오타가 있다면, 댓글로 알려주시면 감사하겠습니다. 주니어 개발자에게 남겨주시는 작은 피드백이 큰 도움이 될 것 같습니다. 고맙습니다 :)"