배경 지식
Rest 와 Spread 는 기본적으로 argument, parameter 에 관한 내용이다.
그런데 이 둘은 그 차이가 크지 않아 표현 상에서 혼동하여 사용하기가 쉽다.
이러한 이유때문에 일단 둘의 개념 차이부터 정확하게 잡고 가는게 좋겠다.
먼저, 둘의 의미에 대해 알아보면
parameter는 매개변수 라는 의미를 가지고 있고
argument는 전달인자 라는 의미를 가지고 있다.
parameter는 함수를 선언할 때의 인자들을 '매개 변수', parameter 라고 부르고,
argument는 해당 함수를 호출할 때의 인자들을 '전달 인자', argument라고 부른다.
확실히 이해하고 넘어가기 위해 아래의 예제 코드를 보고 다음으로 넘어가자.
// 여기서의 x, y는 parameter(매개 변수)
function add(x, y) {
return x + y;
};
// 여기서의 3 과 5는 arguments(전달 인자)
add(3, 5);
매개변수 기본값 (Default Parameter Value)
JavaScript의 특징 중 하나는 OOP 글에서도 언급했었지만, ' 동적 ' 이라는 것이다.
이 ' 동적 ' 이라는 것은 굉장히 유연하여 편리할 수도 있지만, 이 편리함이 독이 되어 돌아오는 경우가 있다.
그 예시를 간단히 보고가자.
// ES5
var add = function(x, y) {
console.log(x + y);
};
add(1); // NaN
이와 같이 add 함수에서는 x와 y, 두개의 인자를 필요로 하지만 호출시에는 1, 한가지 값만 입력된다.
이렇게 들어오게 된다면, 인자로 들어왔어야 할 y 라는 값은 없는 값이 되어 출력 값은 NaN 이 나타난다.
뭐 그럴수도 있지 .. 라고 생각할 수도 있겠지만, 가장 큰 문제는 이 문제는 출력이 되어야만 알 수 있고
출력에 값이 나와야 하는 상황에서 애초에 값이 아닌 NaN이 나타나는 현상이 발생한다는 것이다.
이를 해결하기 위해서 기존의 ES5에서는 매개변수에 적절한 인수가 전달되었는지 확인하기 위한 조건을 걸어두는데, 이는 다음 코드와 같다.
// ES5
function add(x, y) {
// 매개변수 값이 없는 값일 경우, 0을 할당
x = x || 0;
y = y || 0;
return x + y;
};
console.log(add(1)); // 1
console.log(add(4, 6)); // 10
하지만 이를 더 간단하게 표현하기 위해서 ES6에서는 매개변수 기본값이라는 게 나왔다.
그 사용법은 아래와 같다.
// ES6
// 이렇게 매개변수에 값을 할당하면, 그 값이 없을 때 기본 할당 값이 출력된다.
function add(x = 0, y = 0) {
return x + y
};
console.log(add(1)); // 1
console.log(add(4, 6)); // 10Spread
Spread 문법은 정말 간단하게도 그 의미 그대로 어떠한 대상을 개별 요소로 나누어 분리하는 기능이 있다.
대신 그 대상은 이터러블(Iterable) 이여야 하는데, 이 이터러블한 것에 대해서는 다음 글에서 소개하겠고, 일단은 반복이 가능한 객체라고 생각하고 넘어가자.
이 Spread는 적용하려는 대상 앞에 ... 를 붙히는 것으로 활성화 시킬 수 있는데,
자세한 사용법은 아래의 예시를 보면서 알아보자.
console.log(...[1, 2, 3]); // 1 2 3
console.log(... 'Hello'); // H e l l o
이와 같은 형태로 대상을 분리하는 기능을 한다.
Rest Parameter
일단 이름에서 알 수 있겠지만, Rest는 Parameter, 함수를 선언할 때 사용하는 것이다.
이는 위의 Spread 문법을 Parameter에 적용한 것으로, Parameter앞에 ... 을 적어주는 것으로 사용이 가능하다.
이것의 기능으로는 역시 나머지 매개변수 모두를 한번에 표현할 수 있다는 것이다.
간단히 예제 코드를 보고 가보자.
// <Point 1>
function myTeam(...rest) {
// <Point 2>
console.log(`Our team member are ${rest}`);
};
// <Point 3>
myTeam("Jason", "Paul", "Kim");
// Our team member are Jason, Paul, Kim
위의 코드를 찍어둔 포인트 별로 설명해보겠다.
- myTeam이라는 함수의 parameter(매개변수)를 Rest Parameter를 사용하여 선언
- myTeam함수는 인자들이 들어오면 Rest Parameter를 사용하여 나머지 값 모두를 포함한 문자열을 console에 출력
- myTeam에 arguments(전달인자)로 들어온 3명의 이름이 모두 rest 값으로 전달되어 원하는대로 문자열이 출력
이는 아래와 같이 활용이 가능하다.
function myTeam(ace, sub, ...rest) {
console.log(`My team ace is ${ace}`);
console.log(`My team sub is ${sub}`);
console.log(`and ${rest}`);
};
myTeam("Thor", "Iron Man", "Hulk", "Hawk Eye", "Black widow");
// My team ace is Thor
// My team sub is Iron Man
// and Hulk, Hawk Eye, Black widow
// (++ 주관 0인 예시일 뿐입니다.)위 코드에서 보다시피 모든 인자들 중에서 중요하게 따로 호출해야하는 인자가 있을 경우에는
위와 같이 따로 매개변수를 두어 호출하는 형태가 가능하다.
대신, Rest Parameter는 이름 그대로 ' 나머지 매개변수 ' 이기 때문에, 이 나머지 값을 먼저 선언하고 뒤에 다른 인자들을 받아오게는 사용할 수 없다.
( 상식적으로 누가 ' a랑 b랑 나머지들 ' 이 아닌 ' 나머지들이랑 a랑 b ' 라고 말할까 라고 생각하면 편하겠다. )
// 이렇게는 안된다.
function myTeam(...rest, ace, sub) {
// something
};마치며
아직 글을 제대로 정리하기 시작한지는 얼마 안되어 뭔가 더 틀에 맞고 읽기 좋게 쓰고싶은데 시간만 오래 쓰는 것 같고 결과물은 만족스럽지 않다 ...
글을 계속 쓰면서 정리하는 방법을 향상 시켜야겠다.
++) 오늘도 글의 내용의 대부분은 PoiemaWeb을 참고하였습니다.
