JavaScript Rest parametor, Spread (ES6)

기초를 닦자 ! 오늘의 주제는 Spread, Rest parament 입니다.

시작해 봅시다.

1. Rest parametor

함수의 파라미터에서 정해지지 않은 수 (어떤 것이 들어갈지 모르는 수) 인수를 배열로 나타낼 수 있게 해주며 (...)을 사용하여 표현합니다.

아래 예시를 보면 숫자 1, 2를 파라미터로 받았고 나머지 숫자들은 Rest parametor 를 사용하여 moreArgs 파라미터 안에 배열로 전달 받았다.

function myFun(one, two, ...moreArgs) {

console.log("one: ", one);

console.log("two: ", two);

console.log("moreArgs: ", moreArgs);

}

myFun(1, 2, 3, 4, 5, 6);

// one: 1

// two: 2

// moreArgs: [ 3, 4, 5, 6 ]

Rest parameotr와 arguments 객체 사이에 주요한 차이점이 있다.

Rest parametor	arguments
구분된 이름이 주어지지 않는 대상	함수로 전달된 모든 인수를 포함
Array인스턴스이며, 배열 관련된 메서드를 사용할 수 있음	실제 배열이 아님
Array의 메서드를 사용할 수 있는 반면 특정 추가 기능이 없음	자체에 특정 추가 기능이 있음 (callee, caller, length)

2. spread

배열 또는 문자열과 같이 반복 가능한 문자를 인수 또는 요소를 key와 value로 확장할 수 있는 구문이며 (...)로 사용한다. 

• 배열 및 객체 리터럴
• 문자열
• 함수 호출

const NUMBERS = [2, 3];

// 배열 리터럴

const NUMBERS2 = [1, ...NUMBERS];

console.log(NUMBERS2); // [1, 2, 3]

console.log(...NUMBERS2); // 1 2 3

function sum(x, y, z) {

return x + y + z;

}

// 함수 호출

console.log(sum(...NUMBERS2));

// 객체 리터럴

const OBJ = { ...NUMBERS2 };

console.log(OBJ); { '0': 1, '1': 2, '2': 3 }

ES5에서는 배열을 분리하여 각 요소를 함수 파라미터로 전달하려면 Array.prototype.apply()를 사용하였다. 하지만 ES6에서 spread 구문이 생기면서 더 간편하게 분해하여 함수로 전달 가능하다.

function sum(x, y, z) {

return x + y + z;

}

const ARR = [1, 2, 3];

// ES5 - apply 메소드를 사용하여 배열을 분해하고 sum 함수의 파라미터에 전달

console.log(sum.apply(null, ARR)); // 6

// ES6 - Spread 구문 이용

console.log(sum(...ARR)); // 6

Spread 구문 배열에서 활용

1. Array.prototype.concat()

기존 배열에 새로운 배열을 추가할 때 Array.prototype.concat()을 사용한다. 아래는 ES5 문법과 ES6를 사용해보았다.

const ARR = [1, 2, 3];

// ES5

console.log(ARR.concat([4, 5, 6])); // [ 1, 2, 3, 4, 5, 6 ]

// ES6

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

2. Array.prototype.push()

기존 배열에 다른 배열의 개별 요소를 추가하려면 Array.prototype.push()를 사용한다. 아래는 ES5 문법과 ES6를 사용해보았다.

const ARR1 = [1, 2, 3];

const ARR2 = [4, 5, 6];

// ES5

// apply 를 이용하여 arr1 배열 뒤에 arr2 배열을 추가한다.

// push 는 기존 배열의 값을 건드리기 때문에 값이 바로 저장된다.

Array.prototype.push.apply(ARR1, ARR2); // [ 1, 2, 3, 4, 5, 6 ]

// ES6

ARR1.push(...ARR2); // [ 1, 2, 3, 4, 5, 6 ]

이상 포스팅을 마치겠습니다.

Rest parametor와 Spread를 잘 활용하면 훨씬 더 간편하게 표현하고 코드가 조금 더 명확하게 보일 수 있는 것 같다.

긴글 읽어주셔서 감사합니다.

오늘도 해피 코딩하세요 !