[JavaScript] Rest Parameter 활용

배경

ECMAScript 명세의 발전에 따라 JavaScript에서 사용할 수 있는 특수한 기능 중 하나이다. 

JavaScript의 장점이자 우리가 코딩할 때 편하게 사용할 수 있는 편의 기능이 굉장히 많다.

 

ECMAScript

ECMAScript라는 말을 이번에 처음 듣게 되었다. 무슨 라이브러리나 새로운 언어인가 싶었는데 그건 아니었고 Script언어의 명세였다. JavaScript 이야기를 하다가 ECMAScript 이야기가 나온 이유는 ECMAScript 명세에 따라 만들어진 언어가 JavaScript이며, 이 ECMAScript 명세에 앞으로 이야기할 특이하고도 편리한 기능들이 적용되어 JavaScript에서도 이런 기능들을 사용할 수 있어졌기 때문이다.

 

Rest Parameter

모든 메서드는 arguments라는 유사 배열 객체를 기본적으로 갖게 되어 있다. 유사 배열이라고 했지 실제 배열 자료형을 갖고 있지는 않다. 그래서 이 arguments라는 객체에 typeof()를 사용해보면 object 타입으로 나온다.

하지만 arguments라는 객체 안에는 함수를 사용할 때 매개변수로 전달한 값들이 들어간다.

function add() {
	console.log( arguments.length );
    console.log( typeof( arguments );
    
    for( let i of arguments ) console.log( i );
}

add()				// 0	object    
add( 1, 2 )			// 2	object		1 2
add( 10, 20, 30 )	// 3	object		10 20 30

신기하게도 add()라는 함수를 만들 때 받아오는 매개변수를 지정하지 않았음에도 매개변수 값을 넣으면 들어간다는 점이다.

게다가 arguments라는 객체는 선언하지도 않았는데 이미 존재하고 있었다.

즉, 함수를 만들기만 해도 자동으로 arguments라는 객체는 내부에 존재한다는 뜻이다.

값을 넣으면 이 arguments라는 객체에 차레대로 들어가게 되고, 이는 arguments 객체를 통해 내부에서 사용할 수 있다는 뜻이다.

 

하지만 앞서 말했듯이 이 arguments는 '유사 배열'이지 진짜 '배열'이 아니기 때문에 우리가 흔히 아는 Array 객체의 내장 함수를 사용하지 못한다. reduce()와 같은 함수를 사용하지 못하다는 뜻이다.

그렇기에 우리가 만약 이 arguments를 배열처럼 사용해주고 싶다면 아래처럼 타입 변환을 해주어야 한다.

function add() {
	const numbers = Array.from( arguments );
    const result = numbers.reduce( (res, num) => {
    	return res + num;
    });
    console.log( result );
}

add()				// 0
add( 1, 2 )			// 3

이처럼 Array 내장 객체의 from() 스태틱 메서드를 통해 진짜 배열로 만들어줄 수 있다.

 

...args 

그럼 애초부터 배열을 받으면 되는거 아닌가? 라고 말할 수 있다. 하지만 JavaScript의 특징상 변수들의 타입을 지정해두지 않기 때문에 이 점을 활용한 코드가 존재할 수 있으며, 이런 경우 특정 자료형의 배열이라고 단정해두기 어렵다.

하지만 그럼에도 위와 같이 임의의 n개의 매개변수를 받을 수 있지만 애초부터 들어오는 모든 데이터를 담는 배열을 정의해둘 수 있다.

function add( ...args ){
	const result = args.reduce( (res, num) => {
		return res + num;
    });
}
add()
add( 1, 2 )

매개변수를 입력하는 부분에 ...args라고 입력해주면 args라는 진짜 배열에 입력한 데이터들이 들어가게 된다.

이러면 굳이 Array.from() 을 사용해 형변환을 해줄 필요 없이 사용해줄 수 있다는 큰 장점이 있다.