현재 코드스테이츠 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.
1. pipe
-
문제
함수들을 입력받아 함수들이 입력됨 차례대로 결합된 새로운 함수를 리턴해야 합니다. -
입력
- 인자 1: func1
number타입을 입력받아 number 타입을 리턴하는 함수
- 인자 2: func2
number타입을 입력받아 number 타입을 리턴하는 함수
- 인자 N: funcN
number타입을 입력받아 임의의 타입을 리턴하는 함수
- 인자 1: func1
-
출력
- 함수를 리턴해야합니다.
- 리턴되는 함수는 정수를 입력받아
func1,func2,..funcN의 순으로 적용합니다.
function pipe(...funcs) {
return function(num){
let result = num
for(let x = 0; x <funcs.length; x++){
result = funcs[x](result)
}
return result
}
}해당 문제를 통한 자바스크립트 함수의 인자(argument)와 전개 문법, 연산자에 대해서 정리하는 시간을 가졌습니다.
다음의 내용은 모던 자바스크립트 Deep Dive 내용을 참고했습니다.
1.1 Rest 파라미터와 arguments 객체
Rest 파라미터와 arguments 객체의 관계에 대해서 알아보기 전에
함수에 대해서 간단하게 알아보고자 합니다.
다음과 같은 조건을 만족하는 객체를 일급 객체라 합니다.
- 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다.
- 변수나 자료구조(객체, 배열 등)에 저장할 수 있다.
- 함수의 매개변수에 전달할 수 있다.
- 함수의 반환값으로 사용할 수 있다.
함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 의미입니다.
객체는 값이므로 함수는 값을 사용할 수 있는 곳(변수 할당문, 객체의 프로퍼티 값, 배열의 요소, 함수 호출의 인수, 함수 반환문)이라면 어디서든지 리터럴로 정의할 수 있으며, 런타임에 함수 객체로 평가됩니다.
함수는 객체이지만 일반 객체와의 차이가 있습니다.
- 일반 객체는 호출할 수 없지만 함수 객체는 호출할 수 있다.
- 함수 객체는 일반 객체에는 없는 함수 고유의 프로퍼티를 소유한다.
객체의 모든 프로퍼티의 프로퍼티 어프리뷰트는 Object.getOwnPropertyDescriptors 메서드로 확인할 수 있습니다.
위의 이미지처럼 arguments, caller, length, name, prototype 프로퍼티는 모두 함수 고유의 프로퍼티입니다.
1.1.1 arguments 객체
함수 객체의 arguments 프로퍼티 값은 arguments 객체입니다.
arguments 객체는 함수 호출 시 전달된 인수들의 정보를 담고 있는 순회 가능한(iterable) 유사 배열 객체 이며, 함수 내부에서 지역 변수처럼 사용됩니다. 즉, 함수 외부에서는 참조할 수 없습니다.
// 매개변수의 개수를 사전에 알 수 없는 가변 인자 함수
function sum(){
// 가변 인자 함수는 arguments 객체를 통해 인수를 전달받는다.
console.log(arguments);
}
sum(1,2); // {length: 2, '0': 1, '1': 2}
만약 유사 배열 객체인 arguments 객체에 배열 메서드를 사용하고자 배열로 변환하고자 한다면, ES5에서는 Function.prototype.call이나 Function.prototype.apply 메서드를 사용해서 변환해야하는 번거로움이 있었습니다.
이러한 번거로움을 없애고자 ES6에서는 Rest 파라미터를 통해 유사 배열 객체인 arguments 객체를 배열로 변환할 수 있게 되었습니다.
1.1.2 Rest 파라미터
Rest 파라미터(나머지 매개변수)는 매개변수 이름 앞에 세개의 점 ...을 붙여서 정의한 매개변수를 의미합니다.
Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받습니다.
function yap(...rest){
// 매개변수 rest는 인수들의 목록을 배열로 전달받는 Rest 파라미터다.
console.log(rest); // [1,2,3,4]
}
yap(1,2,3,4);일반 매개변수와 Rest 파라미터는 함께 사용할 있으며, 함수에 전달된 인수들은 매개변수와 Rest 파라미터에 순차적으로 할당됩니다.
function yap(param,...rest){
// 매개변수 rest는 인수들의 목록을 배열로 전달받는 Rest 파라미터다.
console.log(param); // 1
console.log(rest); // [2,3,4]
}
yap(1,2,3,4);Rest 파라미터는 먼저 선언된 매개변수들에 할당된 인수를 제외한 나머지 인수들로 구성된 배열이 할당되기 때문에 Rest 파라미터는 반드시 마지막 파라미터여야 합니다.
또한 Rest 파라미터는 단 하나만 선언할 수 있으며, 함수 객체의 length 프로퍼티에 영향을 주지 않습니다.
function yap(...rest, param1, param2){}
yap(1,2,3,4) // SyntaxError: Rest parameter must be last formal parapmeter
function yap(...rest1, ...rest2){}
yqp(1,2,3,4) // SyntaxError: Rest parameter must be last formal parapmeter
function yap(x, ...rest){}
console.log(yap.length) // 1
function yapp(x, y, ...rest){}
console.log(yapp.length) // 2 