6. default + rest + spread

이번에 다룰 내용은  default + rest + spread 입니다. 내용은 크게 어렵지 않습니다. 적어도 default는 프로그래밍을 하다보면 많이 듣던 말 중에 하나죠. Rest와 Spread 또한 기존에 ES5에서 사용했던 방법을 좀 더 간결하고 간편하게 작성하기 위한 새로운 연산자를 제공해주는 개념입니다.

❖ default

: 기본 값이라는 뜻이죠. 자바스크립트에서는 기본 값이 없다면 undefined 라는 값을 갖고있습니다. 말 그대로 값이 없다는 뜻이죠. 하지만 때에 따라서 값의 입력이 없어도 기본 값을 정해줘야 하는 경우가 있을 겁니다. 

//ES5
function inc(number, increment) {
  increment = increment || 1;
  return number + increment;
}
console.log(inc(2, 2)); // 4
console.log(inc(2));    // 3

//ES6
function inc(number, increment=1) {
  return number + increment;
}
console.log(inc(2, 2)); // 4
console.log(inc(2));    // 3

=> 함수가 좀 더 간결해졌죠? 함수 작성 부분에서 increment=1 이라고 default 값을 작성하여 값이 안들어왔을 시에 따로 값을 설정해줘야 하는 필요가 없어졌습니다. 

❖ rest

: 영어 그대로 해석하자면 나머지 라고 해석될 수 있겠네요. 여기선 "..." 이라는 새로운 연산자가 등장합니다. 일반적으로 뒤에 내용이 계속 되는데 생략되어질 때 ... 이라는 말을 쓰곤하죠. 만약 함수에 들어가는 매개변수의 개수가 정해지지 않았다면 매개변수의 개수만큼 전처리 해야하는 구문을 써야할 것입니다.

//ES5
function sort(){
    var numbers = Array.prototype.slice.call(arguments)
        .sort(function(a,b){return a-b;});
    return numbers;
}
 
console.log(sort(10,2,6,4));           //[ 2, 4, 6, 10 ]
console.log(sort(9,8,7,100,20,15,17)); //[ 7, 8, 9, 15, 17, 20, 100 ]

=> 오름차순 정렬을 하는 함수인데, 매개변수가 배열로 들어가는 것이 아니라 이렇게 개수가 정해지지 않는 콤마형태로 들어간다고 가정하겠습니다. 그럼 sort함수를 쓰기 위해서는 함수 호출 시에 arguments를 배열화시켜서 사용해야 합니다. 몇개의 매개변수가 들어올지를 모르니 sort함수에 매개변수를 정의할 수가 없죠. 

//ES6
function sort(...numbers){
    return numbers.sort(function(a,b){return a-b;});
}
 
console.log(sort(10,2,6,4));           //[ 2, 4, 6, 10 ]
console.log(sort(9,8,7,100,20,15,17)); //[ 7, 8, 9, 15, 17, 20, 100 ]

=> sort 함수를 정의할 때 arguments를 ...numbers 라고 정의하였습니다. 개수가 정의되지 않은 매개변수이기 때문에 오류가 나지 않고 Array로 변환할 필요도 없습니다. 따라서 정렬 작업을 하기 위해서는 그냥 sort함수만 사용하면 간결한 코드작성이 가능해집니다. 참고로 ... 연산자는 딱 한 번만 사용 가능합니다. 여러개의 ... 연산자를 가진 함수는 정의 불가능합니다. 또한 매개변수가 여러개일 때 맨 마지막에 ... 연산자는 맨 마지막에 위치해야합니다.

※참고사항

: arguments는 유사배열객체이고, rest parameter는 배열입니다. 유사배열객체는 배열처럼 사용은 되긴 하지만 Array 오브젝트의 메서드를 사용할 수 없습니다. ES6의 화살표함수에서는 arguments 객체를 바인딩하지 않으므로 rest parameter 사용을 권장합니다.

❖ spread

: 전개 연산자는 배열이나 객체를 확장하지만, 반면에 나머지 구문은 2개 이상의 요소을 하나의 요소로 모읍니다. 확장된다는 말에 초점을 맞추어서 몇개의 코드를 살펴보겠습니다.

1. 배열 복사하기

// ES5
var arr1 = [1,2,3];
var arr2 = arr1.slice();
 
console.log(arr2);    // [1,2,3]

=> 배열 객체의 slice 내장함수를 이용하여 arr2에 arr1의 내용을 복사할 수 있습니다.

// ES6
var arr1 = [1,2,3];
var arr2 = [...arr1];
 
console.log(arr2);    // [1,2,3]

=> 내장함수의 사용 없이 전개 연산자를 사용하여 배열을 그대로 복사할 수 있습니다.

2. 배열 push

//ES5
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// arr1에 arr2의 모든 항목을 덧붙임
Array.prototype.push.apply(arr1, arr2);
console.log(arr1);    //[0,1,2,3,4,5]

=> apply() 메서드는 주어진 this값과 arguments로 함수를 호출합니다. arguments에는 배열(또는 유사배열객체 array-like object)가 올 수 있습니다. 

//ES6
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// arr1에 arr2의 모든 항목을 덧붙임
arr1.push(...arr2);
console.log(arr1);    //[0,1,2,3,4,5]

=> push 메서드를 사용할 때 spread 연산자를 매개변수로 사용하여 확장된 배열을 만들 수 있습니다. ES6 문법에서는 rest parameter를 권장하므로 ES6로 작성하는 코드에서는 위와 같은 방법이 옳다고 할 수 있겠네요.

(내용 출처

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_operator, 

https://medium.com/ecmascript-2015/default-rest-spread-f3ab0d2e0a5e )