Rest(...) 문법

Destructuring문법과 궁합이 잘맞는 ...연산자에 대해 기술한 페이지

Intro

...연산자는 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']
// 매개인자로 들어온 값을 모두 모아서 배열로 만들었다.

위의 기능만 가지고는 잔여 파라미터라는 의미가 잘 와닿지 않을 것이다. 아래 코드를 추가로 살펴보자

function printInfo(name, ...args){
    console.log(name , args);
}

printInfo('mkm','민경민','kh강사'); // 'mkm', ['민경민','kh강사']
printInfo('poobao','푸바오','판다'); // 'poobao', ['푸바오','kh판다']

위 코드를 보면 첫번째 매개변수 name에 들어온 파라미터를 제외한 잔여 파라미터들을 배열로 모아준다.

또한 변수의 Destructuring문법과 함께 사용될때도 잔여 파라미터로써 활용된다.

const array = [1,2,3,4];
const [first, ...rest] = array;
console.log(first , rest); // 1 , [2,3,4];

const person = {name : "mkm", job : 'teacher'};
const {name , ...rest} = person; // 'mkm', { job : 'teacher'}
console.log(name, rest);
const {...rest2} = person; // {name : "mkm", job : 'teacher'};
console.log(rest2);

//위 코드를 함수의 매개변수로 대입했을때는 다음과 같을것이다.
function printPeson({...rest}){
    console.log(rest);// {name : "mkm", job : 'teacher'};
    console.log(rest.name);
    console.log(rest.job);    
}

//또한 일반 파라미터로 전달받아도 똑같은 역할을 한다.
function printPeson2(rest){
    console.log(rest);// {name : "mkm", job : 'teacher'};
    console.log(rest.name);// mkm
    console.log(rest.job);// teacher
}
printPeson(person); 
printPeson2(person);

정리

...은 객체나 배열의 리터럴에서 사용될때는 전개연산자의 역할을 하며 함수의 매개변수나 Destructuring문법 함께 사용될때는 잔여파라미터 라고 부른다.

추가할 만한 부분

깊은복사 얕은복사 복습 - 그 외 복사방법