(JavaScript) 8. 전개 연산자 (...)란?

배열에서 사용

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

console.log(arr2); // [1, 2, 3, 4, 5]

arr1을 그대로 복사하면서 [4, 5]를 추가한 새로운 배열을 만들어 줌

1. 함수에서 가변 인자로 사용

함수에 여러 개의 인자를 전달할 때 ...을 사용하면 편해.

function sum(...numbers) {
    return numbers.reduce((acc, num) => acc + num, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // 15

sum(1, 2, 3, 4, 5)에서 전달된 모든 숫자가 numbers 배열로 변환됨

2. 배열 복사 (spread)

배열을 새로운 변수에 복사할 때도 사용돼.

const arr = [1, 2, 3];
const copyArr = [...arr];

console.log(copyArr); // [1, 2, 3]
console.log(arr === copyArr); // false (완전히 새로운 배열)

const arr = [1, 2, 3, 4];
const copyArr = arr;
const hardCopArr = [...arr]; // 이렇게 전개 연산자만 false

console.log(arr);
console.log(arr === copyArr); //true
console.log(arr === hardCopArr);//false

=로 복사하면 같은 주소를 공유하지만, ...을 사용하면 완전히 새로운 배열이 생성됨

3. 객체 복사 및 병합

const person = { name: "Alice", age: 25 };
const newPerson = { ...person, job: "Developer" };

console.log(newPerson); // { name: "Alice", age: 25, job: "Developer" }

---------------------------------------------------------

const person = { name: '김보성', age: 20 };
const job = { dream: '개발자' };
const profile = {
  ...person,
  ...job,
  location: '서울',
};

console.log(profile); //이런식으로 가능!

---------------------------------------------------------
const personalInfo = {
  name: '김보성',
  age: `Don't ask this :)`,
  email: 'boseong@naver.com',
};

const jobInfo = {
  position: '학생',
  experience: '?년',
};

const profile = {
  ...personalInfo,
  ...jobInfo,
  addr: '동대문구',
};

// 객체를 하나씩 담는 거 가능!
const { name, age, email, position, experience, addr } =
  profile;

console.log('이름 :', name);
console.log('나이 :', age);
console.log('이메일 :', email);
console.log('직책 :', position);
console.log('경력 :', experience);
console.log('지역 :', addr);

4. 함수 인자로 사용 (배열 -> 개별 값 변환)

const numbers = [1, 2, 3];
console.log(Math.max(...numbers)); // 3

Math.max()는 개별 숫자를 받아야 하는데, 배열을 ...으로 풀어주면 개별 숫자로 전달됨

5. 추가 예시

const fruits = ['사과', '딸기', '바나나'];

function conLog(a, b, c) {
  console.log(a, b, c);
}
console.log(fruits); // [ '사과', '딸기', '바나나' ]
console.log(...fruits); // 사과 딸기 바나나
conLog(fruits[0], fruits[1], fruits[2]); // 사과 딸기 바나나
conLog(...fruits); // 사과 딸기 바나나