초심자를 위한 함수의 정의와 arguments_2. 함수 정의 방법 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를 사용하는가?

---

Defining functions

JavaScript의 function는 function literal로 정의된다. 앞의 글에서 언급했듯 JavaScript에서 function은 first-class object이기 때문에 다른 strings나 number처럼 활용 가능하다.

 JavaScript 제공하는 함수 정의 방법은 크게 4가지로 나눌 수 있다.

 

• function declarations & function expressions

function myFun(){ return 1;}

 

• arrow funtion(lambda funtion)

myArg => myArg*2

 

• function constructors

new Function('a', 'b', 'return a + b')

 

• generator function

function* myGen(){ yield 1; }

---

Function declarations and function expressions

JavaScript에서 가장 일반적인 함수 정의 방법은 function declarations와 function expressions이다. 두 가지 정의 방법은 약간 차이점이 있다.

---

Function declarations

 

 function declaration은 function name () {} 의 형식으로 쓰이는데 이때 parameter와 function statements는 선택적으로 기입한다. function 키워드를 포함한 나머지 요소는 필수이다. function declaration은 독립적인 JavaScript 요소로서 존재해야 한다.

 

 

 위 코드를 살펴보면 function 안에 또 다른 function이 정의되어 있음을 볼 수 있다. JavaScript에서 이와 같은 functional coding은 매우 자연스러운 형식이다. 

---

Funtion expressions

 JavaScript는 first-class objects이다. 그러므로 literal을 통해 생성 가능하고 아래 예를 보면 알 수 있듯 variables, properties, arguments, return values에 할당 가능하다.

 

 

 function expressions는 우리가 원하는 곳에 function을 정의할 수 있어 한층 이해하기 쉬운 코드를 작성하기 용이하게 해준다.

 

 

 function expressions는 function declarations와 달리 항상 다른 요소의 한 부분이다. 즉 독립된 개체가 아니다. 따라서 variables의 오른쪽과 같은 표현 계층에 오게 된다. 아니면 다른 function의 argument나 return 값으로 쓰인다.

 두 방식의 또 다른 차이점은 function declarations는 이름을 반드시 기입해야 한다. 왜냐하면 function declarations를 호출할 유일한 방법은 이름을 통해서밖에 없기 때문이다. 반면 function expressions를 쓸 때는 이름을 필수적으로 기입할 필요가 없다. variables나 다른 function의 argument를 통해 호출 가능하기 때문이다.

 

---

Arrow functions

 Arrow functions은 ES6에서 새롭게 추가된 JavaScript 표준이다. 이는 코드를 간결하게 작성하는 데 도움을 준다.

 아래 예제 코드를 통해 Arrow functions의 작성법을 알아보자.

 

• 기존 작성법(function expressions)

 

• Arrow funtions

 

 위 예제 코드를 비교해보면 sort() method 안의 callback function을 작성한 방법이 다르다는 것을 알 수 있다. arrow funtions를 쓰려면 괄호 안에 parameter를 적고 '=>'라는 fat-arrow operator를 적어넣은 뒤 함수 내용을 채워넣으면 된다. 여기서 parameter가 하나일 때는 parameter를 감싸던 괄호를 안 적어도 된다. 반면 parameter가 없거나 둘 이상일 경우 괄호로 parameter를 감싸야 하고 둘 이상일 시 각 parameter 사이에 쉼표를 찍어 구분 짓는다.

 

 

 fat-arrow operator 뒤에 오는 함수의 내용을 작성하는 데도 두 가지 방식이 있다. 우선 예제 코드부터 살펴보자.

 

 

 함수의 내용이 하나의 값을 return 하는 형식이라면 윗줄처럼 'return' 키워드 및 중괄호를 생략하여 작성 가능하고, 일반적인 block code일 경우 아래 예제 코드 처럼 다른 작성법과 마찬가지로 쓴다.

 

 

 위 예제 코드에서 return 값이 없을 경우 다른 경우와 마찬가지로 undefined 를 반환하고, 값이 있는 경우 해당되는 값을 반환한다.

---

함께 보기

• funtion declarations

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function

function declaration - JavaScript | MDN

• function expressions

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

Function expression - JavaScript | MDN

• Arrow funtions

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

Arrow function expressions - JavaScript | MDN