Rest, Spread 연산자

Spread 연산자

• 이터러블 오브젝트(Iterable Object)의 엘리먼트를 하나씩 분기

• 전개한 결과를 변수에 할당 / 호출하는 함수의 파라미터 인수 

 

 

예제) 기존 객체를 복사, 새로운 객체를 반환

// 새로운 객체 생성
const book = {
    action : 'read'
};

const js_book = {
    ...book,
    title: 'JS'
};

const react_book = {
    ...js_book,
    title: 'react',
    price: '1000'
};

console.log(book);
console.log(js_book);
console.log(react_book);


console.log('------------------------------------------------');

// 주소값 참조
const book2 = {
action: 'read'
};

const js_book2 = book2;
js_book2.title = 'JS';

const react_book2 = js_book2;
react_book2.title = 'react';
react_book2.price = '1000';

console.log(book2);
console.log(js_book2);
console.log(react_book2);

출력결과

 

 

예제) 배열에서의 spread

const animals = ['강아지', '고양이'];
const animals2 = [...animals, '토끼'];

// 동일 기능
const concat_animals = animals.concat('토끼');

console.log(animals);
console.log(animals2);
console.log(concat_animals);


const numbers = [1,2,3,4,5];
const spread_arr = [...numbers, 6, ...numbers];

console.log(numbers);
console.log(spread_arr);

출력결과

 

 

 

Rest 연산자(Rest Parameter)

• 함수의 파라미터 정해지지 않은 수(부정수) 인수를 배열로 나타낼 때 사용

• 함수의 마지막 파라미터에 '...' 붙여 모든 인수를 배열로 대체

 

 

예제) 

function customRestFunction(a, b, ...arr) {
    console.log(a);
    console.log(b);
    console.log(arr);
    console.log(arr instanceof Array);
}

// Array
customRestFunction(1, 'A', [1,2,3,4,5]);

// Array
customRestFunction(1, 'A', 1, 2, 3, 4, 5);

// Object
customRestFunction(1, 'A', {name : 'aa', age: 23});

 

출력결과

 

 

Rest와 Arguments 객체의 차이

• Rest 파라미터의 경우 구분된 이름(함수의 인자로 정의된 것)이 주어지지 않은 대상

• arguments 객체는 함수로 전달된 모든 인수를 포함

• arugments 객체의 경우 배열이 아님 / Rest 파라미터의 경우 배열

 

 

 

 

 

 

출처

https://jaeyeophan.github.io/2017/04/18/ES6-4-Spread-Rest-parameter/