...연산자는 Spread Operator , Rest Parameter라고 부르는데 선언 위치에 따라 부르는 명칭과 기능이 다르다.
...연산자를 사용하는 위치가 값을 대입하는 위치에 있을 때는 전개 연산자(Spread Operator)라고 불린다.
...연산자를 사용하는 위치가 함수의 매개변수에 있을 때는 나머지 파라미터(Rest Parameter)라고 부른다
// 위치별 명칭
const sample_arr = [1,2,3,4];
const sample_obj = {name : 'mkm', job : 'teacher'};
function test(...rest){ // 나머지 파라미터
console.log(rest);
}
test(...sample_arr); // 전개 연산자
Spread Operator (전개연산자)
배열이나 객체에 담겨있는 값(literal)을 꺼낸 후 쭉 펼쳐서 "전개"해주는 역할을 하는 연산자이다.
배열 리터럴 전개
const arr = [1,2,3,4];
console.log(arr); // [1,2,3,4] 배열 1개 만 출력
console.log(...arr); // 1 2 3 4 배열 내부의 4개의 값들이 출력
// [1,2,3,4]에서 []이 사라지고 내부의 값 1,2,3,4 들만 남았다.
// 전개연산자를 활용한 배열복사
const copy_arr = [...arr]; // arr배열 내부의 값 들을 꺼낸 후 다시 배열에 재포장 했다.
console.log(copy_arr); // [1,2,3,4]
객체 리터럴 전개
const person = {name : "mkm", job : 'teacher'}
const mkm = {...person }; // person객체 내부의 값들을 뚝 펼쳐서 전개하였다.
console.log(mkm);// // {name : "mkm", job : 'teacher'}
전개 연산자를 사용하지 않았다면 mkm 은 {person: {name : "mkm", job : 'teacher'}}로 출력되었을 것이다. 전개연산자는 마찬가지로 person의 {}을 없애고 내부의값 들을 전개하였다
정리하자면 ...(전개 연산자)는 배열과 객체를 감싸는 []와 {}을 지워준후 내부의 값을 펼쳐주는 역할을 한다고 볼 수 있다.
Rest Parameter(잔여파라미터)
...가 함수의 매개변수에 작성되었을 때는 함수의 매개변수로 들어온 인자들을배열로 모아주는 역할을 한다.
function testRest(...args){
console.log(args);
}
testRest('m','k','m'); // ['m','k','m']
testRest('r','e','s','t'); // ['r','e','s','t']
// 매개인자로 들어온 값을 모두 모아서 배열로 만들었다.
위의 기능만 가지고는 잔여 파라미터라는 의미가 잘 와닿지 않을 것이다. 아래 코드를 추가로 살펴보자