[Java Script] ...rest 인자, spread operator란?

자바스크립트를 공부하면서 함수를 배우고 응용하다 보면, 함수에서 정해진 파라미터(매개변수)의 수와 입력할 아규먼트(인자)의 개수가 다른 경우를 만나게 될 것이다. 이럴 때 대처할 수 있는 방법은 두 가지가 있는데, 첫 번째는 arguments를 인자로 넣는 것이고, 두 번째는 ...rest를 파라미터(매개변수)에 추가한 뒤 아규먼트(인자)를 rest로 받는 것이다. 말로만 적으로 되려 헷갈릴 수 있으니 아래 예시에서 자세히 보도록 하자. 하지만 우선 먼저 정확하게 알아야 할 부분이 있는데, 파라미터(매개변수)와 아규먼트(인자)의 정확한 개념이다. 간단한 개념이지만 은근히 헷갈려하거나 구분 없이 이야기하는 이들이 있다.

---

Parameter / Argument
매개변수 / 인자(전달인자)

말로 적어두는 것보다 아래 코딩을 보는 것이  이해가 쉬울 것 같다.

let sum = function(x,y){
	return x + y
}
sum(1,2)
// 3

위 내용에서 func라는 함수를 정의하는 부분에 x와 y가 등장한다. 이 x와 y가 바로 parameter, 한국어로는 매개변수이다. 매개변수는 함수가 정의되면서 들어올, 아직 정해지지 않은 값들을 담은 변수이다. 그 아랫줄에서 실제로 함수를 호출하면서 입력하는 1과 2는 argument, 즉 인자라고 부른다. 쉽게 이야기하면, 입력될 수 있는 값을 파라미터(매개변수), 입력될 값을 아규먼트(인자/전달 인자)라고 부른다. 이번에는 arguments와 spread operator가 필요해지는 상황을 보자.

---

arguments / ...rest

let sum = function(x,y,z){
	return x + y + z
}
sum(1,2,3,4,5)
// 6
sum(1,2)
// NaN

위 경우와 같이 파라미터의 개수는 2개로 정해져 있는데, 함수에 입력해야 하는 인자의 개수가 다른 경우가 있다. 그렇다면 결괏값은 기대하는 값과 달라지게 되고, 같은 기능을 하는 함수가 상황에 따라 계속 다시 만들어져야 하는 상황이 발생한다. 그럴 때 ES5의 arguments(주의 : 맨 끝에 s를 꼭 붙여야 한다!)를 사용하거나 ES6의 spread operator를 사용할 수 있다. 아래의 두 가지 예시를 보자.

1. Arguments

// Arguments
let sum = function(x,y){
    console.log(x+y)
    console.log(arguments)
}
sum(1,2,3,4,5)
// 3
// [1, 2, 3, 4, 5]

위의 예제를 보면 arguments를 콘솔.로그로 찍어서 출력했을 때, 배열이 출력된 것을 볼 수 있다. 이것을 유사 배열이라고 부르는데, 진짜 배열은 아니지만 인자들을 배열처럼 처리하기에 유사배열이라고 한다. 배열처럼 처리되기에 .length와 같은 메서드도 사용할 수 있다. 그렇다면 이 점을 이용하여 같은 역할을 하는 함수를 다시 만들어보자. 

function sum(){
    let result = 0;    
    for( let i = 0; i < arguments.length; i++){
        result = result + arguments[i]
    }   
    return result;
}
sum(1,2,3,4,5,6)
// 21
sum(7,8,9)
// 24

이번 경우에는 인자가 몇 개가 들어오든 상관없이 기대하는 값이 잘 출력되는 것을 볼 수 있다.

2. Spread operator

// Spread operator
function sum(...rest){
    let result = 0;    
    for( let i = 0; i < rest.length; i++){
        result = result + rest[i]
    }   
    return result;
}
sum(1,2,3,4,5,6)
// 21
sum(7,8,9)
// 24

spread operator를 사용하려면 파라미터 앞에 ...을 붙여주기만 하면 된다. arguments와 시각적으로 비교하기에는 매개변수에 ...을 붙여서 입력해주는 것 말고는 차이가 없다고 보일 수 있지만 둘 사이에는 큰 차이점이 존재한다. 위의 arguments는 유사 배열로서 작업을 처리하지만, spread operator는 실제로 인자들의 값으로 배열을 만든다. 그래서 단순히 인자의 개수가 정해지지 않은 경우 이외에도 여러 가지 활용법이 존재한다. 결괏값들을 새로운 배열로 복사하는 것도 가능하고, .concat을 이용하여 배열을 합치는 것도 가능하다.