초심자를 위한 함수의 정의와 arguments_3. arguments & parameters from Secrets of the JavaScript Ninja

이번 글은 'Secrets of the JavaScript Ninja'의 'Chapter 3. First-class functions for the novice: definitions and arguments'를 바탕으로 작성하였습니다.

---

핵심 Concepts

• 함수를 이해하는 것이 중요한 이유
• 함수는 어떻게 first-class objects일까?
• 함수를 정의하는 방법들
• 파라미터는 어떻게 부여되는가

---

사전 지식 체크!

• callbak funtion은 어떤 환경에서 쓰이는가? 동기적인 환경? 아니면 비동기적인 환경?
• arrow function과 function expression의 차이점?
• 왜 default parameter를 사용하는가?

---

Arguments and function parameters

 우리는 흔히 arguments와 parameters를 혼용한다. 이 둘은 거의 같지만 엄격히 따지면 다르다.

 

 

• parameter(매개 변수): 함수 정의의 한 부분으로 쓰이는 변수
• argument(전달 인자): 호출하는 함수에 전달하는 값

 

 

 parameter는 함수의 정의와 함께 특정되며 모든 형식의 함수는 parameter를 갖는다. 반면 argument는 함수의 호출과 관련이 있다. 함수가 호출될 때 해당 함수에 전달되는 값들을 argument라고 한다.

 argument가 함수의 한 부분으로서 여러 개 열거될 때 이 argument들은 정의된 함수의 parameter에 왼쪽부터 오른쪽까지 순서대로 할당된다. 이때 argument와 parameter의 수가 같지 않아도 전혀 문제 되지 않는다. parameter의 개수를 초과하는 argument는 할당되지 않기 때문이다. 반면 parameter의 개수가 argument의 개수보다 많을 경우 argument를 받지 못한 parameter는 undefined를 반환한다.

 

---

Rest parameters

​ 예컨대 여러 argument를 받는 function에서 첫 번째 argument와 나머지 argument 중 가장 큰 수를 곱하는 기능을 추가한다고 하자. 예전 JavaScript 버전에서는 첫 번째 argument를 제외한 나머지 argument 중 가장 큰 수를 구하는 기능을 구현하기 위해 별도의 작업이 필요했지만 ES6에서는 rest parameters를 활용하여 간단히 구현할 수 있다.

 예제 코드를 통해 rest parameters의 쓰임새를 살펴보자.​

 

​

 multiMax function은 ​​네 개의 argument와 함께 호출된다. 이때 첫 번째 argument '3'은 첫 번째 parameter에 할당되고 나머지 ['1', '2', '3']은 두 번째 rest parameters로서 배열 형태로 두 번째 parameter에 할당된다. 이후 sort() method를 통해 내림차순으로 rest parameters를 정렬하여 가장 첫째값을 뽑아내면 그 값이 바로 남은 argument 중 가장 큰 값이다. 따라서 첫 번째 parameter와 rest parameters 중 가장 큰 값을 곱한 값을 반환하면 위에 언급한 기능을 구현하기가 완성된다.

 이때 유의해야 할 점은 가장 마지막 parameter에만 rest parameters를 할당할 수 있다는 점이다. 다른 자리에 있는 parameter에 '...'을 붙여 rest parameters를 할당하려고 하면 SyntaxError: parameter after rest parameter라는 에러 메시지가 출력된다.

---

Default parameters

 아래 예제처럼 각 function마다 argument를 전달한다고 하자.

 

​

 위와 같이 각 function마다 argument를 일일이 적어넣는 작업은 번거롭다. 다른 프로그래밍 언어에서는 function overloading 기능을 지원하여 이름은 같지만 parameters는 다른 function을 정의할 수 있지만, JavaScript는 해당 기능이 없어 추가적인 작업이 필요하다. 예전 버전의 JavaScript에서 이 같은 문제를 어떻게 해결했는지 예제 코드를 통해 살펴보자.

 

 

 우선 performAction function을 들여다보자. 해당 function에는 삼항 연산자가 작성되어 있다. 두 번째 parameter인 action의 data type이 'undefined'라면 action의 값으로 'skulking'을 할당하고 action parameter에 argument가 할당되었다면 action parameter를 그대로 반환한다.

 위의 function 똑같은 기능을 하는 function을 default parameters를 활용하여 구현할 수 있다.

 

 

 위처럼 action parameter의 기본값을 'skulking'이라고 설정해놓으면 performAction function 호출 시 따로 argument를 전달하지 않더라도 출력 시 'skulking'이 붙어서 나오고, 두 번째 argument로 다른 값을 입력하면 별도로 입력한 값이 action parameter에 할당되어 그 값이 출력된다.

---

요약

• 정교한 코드를 짜는 것은 JavaScript를 functional language로서 얼마나 이해하느냐에 달렸다.
• JavaScript의 function은 first-class object로 JavaScript 내 다른 객체들과 같이 취급한다.
  • literal을 통해 생성
  • variables 혹은 properties에 할당
  • parameter에 전달
  • function의 결과값으로 반환
  • properties와 method에 할당
• callback funtion은 event를 처리할 때처럼 다른 함수에 의해 나중에 호출(callback)되는 함수
• function은 properties를 가질 수 있고 properties는 어떤 형식의 data든지 저장 가능
  • function properties에 다른 function 저장 가능
  • function properties를 cache(memoization)하는 데 활용 가능
• 함수를 정의하는 데는 4가지 다른 방법이 있다
  • function declarations
  • function expressions
  • arrow functions
  • function generators
• function declarations와 function expressions는 가장 일반적인 정의 방법이며 function declarations는 반드시 이름을 가져야 한다. 반면 function expressions는 이름이 없어도 되지만 다른 코드의 한 부분으로 기능한다.
• arrow function을 사용하여 간결히 코드 작성
• parameter는 function 정의의 일부로서 나열하는 변수. 반면 argument는 function을 호출할 때 전달하는 값.
• function의 parameter와 argument는 각각 개수가 다를 수 있음
  • argument가 할당되지 않은 parameter는 undefined을 반환
  • parameter 개수를 초과하는 argument는 무시
• rest parameters와 default parameters로써 function 기능을 다채롭게 활용 가능

---

함께 보기

• typeof() method

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof

typeof - JavaScript | MDN

• rest parameters

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters

Rest parameters - JavaScript | MDN

• default parameters

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters

Default parameters - JavaScript | MDN