[JavaScript] 전개 구문, Spread syntax(…)

Spread syntax

배열의 모든 요소를 꺼내 리스트로 변환한다.

const nameFragments = ['Max', 'Schwarz'];
const copiedNameFragments = [...nameFragments];
nameFragments.push('Mr');

console.log(nameFragments, copiedNameFragments);
// ['Max', 'Schwarz', 'Mr']
// ['Max', 'Schwarz']

배열 내 요소를 인수로 전달하기

min() 메서드는 배열이 아닌 값을 받아 가장 작은 값 반환한다.

const prices = [10.99, 5.99, 3.99, 6.59];

console.log(Math.min(prices)); // NaN
console.log(Math.min(...prices)); // 3.99

참조 값 복사?

배열 내 객체의 참조 값은 복사되지 않으며 메모리 주소가 복사된다(=원본 객체)

const persons = [
  { name: 'Max', age: 30 },
  { name: 'Manuel', age: 31 },
];
const copiedPersons = [...persons];
person[0].age = 31;

console.log(persons, copiedPersons);
// [{ name: 'Max', age: 31 },{ name: 'Manuel', age: 31 }]
// [{ name: 'Max', age: 31 },{ name: 'Manuel', age: 31 }]

map() 메서드 이용하여 새로운 배열 얻기

const persons = [
  { name: 'Max', age: 30 },
  { name: 'Manuel', age: 31 },
];
const copiedPersons = persons.map((person) => ({
  name: person.name,
  age: person.age,
}));

persons.push({ name: 'Anna', age: 29 });
persons[0].age = 31;

console.log(persons, copiedPersons);
// [{ name: 'Max', age: 31 },{ name: 'Manuel', age: 31 }, { name: 'Anna', age: 29 }]
// [{ name: 'Max', age: 31 },{ name: 'Manuel', age: 31 }]

전개 구문은 참조 값의 변화가 복사본에 반영되면 안될 때 사용하자!
(무조건 사용할 필요는 없다)

---

예전에 토이 프로젝트로 todoList 만들 때 삽질했던 부분이라 반가웠다.
나는 강사님처럼 map()을 사용하진 않았고 배열 내 요소도 전개 구문을 이용하여 복사하였다.

const handleInputUpdate = (index, target) => {
   const { name, value } = target;
   let tempTodos = [...state.newTodos];
   tempTodos[index] = { ...tempTodos[index], [name]: value }; // 복사본 대입하여 객체 참조 해제
   setState((prev) => ({ ...prev, newTodos: tempTodos }));
};

[GitHub] To-Do List

참고

【한글자막】 JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정