JS (... 문법) 전개 연산자 나머지 매개변수

JS에서 "..." 문법은 맥락에 따라 2가지 사용법이 존재한다.

1. 나머지 매개변수 (= 함수의 매개변수에 ...문법 사용)

EX)

function returnParams(...params) {
    return params;
}

console.log(returnParams()); // []
console.log(returnParams([1, 2, 3])); // [1, 2, 3]
console.log(returnParams({name: "이름", age: 31, address: "주소"})); // {name: "이름", age: 31, address: "주소"}

2. 전개 연산자

• 전개 연산자는 배열이나 객체의 요소들을 분해하여 개별 요소로 확장하거나 병합하는 데 사용
• 배열 또는 객체의 값들을 개별적인 요소로 쪼개서 사용할 때 유용

EX)

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const obj1 = {name: "이름1", age: 31, address: "주소1"};
const obj2 = {name: "이름2", age: 32, address: "주소2"};

const merge1 = [...arr1, ...arr2];
const merge2 = [...arr2, ...arr1];
const merge3 = {...obj1, ...arr1};
const merge4 = {...obj1, ...obj2};

const copy1 = [...arr2];
const copy2 = {...obj2};

console.log(merge1); // [1, 2, 3, 4, 5, 6]
console.log(merge2); // [4, 5, 6, 1, 2, 3]
console.log(merge3); // {0: 1, 1: 2, 2: 3, name: '이름1', age: 31, address: '주소1'}
console.log(merge4); // {name: '이름2', age: 32, address: '주소2'}

console.log(copy1); // [4, 5, 6]
console.log(copy2); // {name: '이름2', age: 32, address: '주소2'}