Medium - JavaScript — Understand Arrow Function Syntax
in Trend
Trend 파악을 Medium 기고문 요약 포스팅 - 자바스크립트 - Arrow 함수 문법의 이해; 예제를 통해 arrow 함수의 문법을 알아봅시다
자바스크립트에 Arrow 함수가 추가된지 거의 3년이 지났지만 언어의 피처에 대해서 가장 많이 질문되는 것들 중 하나입니다.
Arrow함수는 다음과 같은 큰 장점이 있습니다.
- 고전적인 함수보다 훨씬 짧은 문법
- this의 바인딩이 필요 없음
이 기사에서는 arrow 함수의 짧은 문법과 동일한 함수 표현에 대해서 살펴볼 것입니다. 궁극적으로 우리는 Arrow 함수의 문법에 대한 이해를 갖게 될 것입니다.
Function Expression Syntax
함수 표현은 익명의 함수 객체를 변수에 할당하는 것입니다. 익명인 이유는 함수가 이름이 없기 때문이죠. function 키워드로 구성이 되며 0 혹은 그 이상의 매개변수가 따라오고 statements로 끝이 됩니다.
문법은 다음과 같습니다.
const name = function(parameters){
statements
}
실제로는 이렇게 쓰이죠.
const double = function(num){
return num * 2;
}
이 예제에서는 익명의 함수를 double 변수에 할당했습니다. function은 한개의 num 매개변수를 받고 num*2를 리턴하는 statement를 가지고 있습니다.
우리는 double을 다음과 같이 실행할 수 있습니다.
double(3);
// 6
Arrow Function Syntax
애로우 함수는 함수 표현과 비슷하지만 더욱 짧습니다. 여기에서도 우리는 익명의 함수를 변수에게 할당합니다. 애로우 함수의 문법은 0 혹은 그 이상의 매개변수와 화살표 => 그리고 함수의 statement로 끝이 납니다.
const name = (parameters) => {
statements
}
실제로는 다음과 같이 쓰이며 double 함수는 애로우 함수 문법에서 다음과 같이 표현됩니다.
const double = (num) => {
return num * 2;
}
위의 예제와 비교하면 아직은 큰 차이점이 없다는 것을 알 수 있으실 겁니다.
// Function Expression
const doubleEXP = function(num){
return num * 2;
}
// Arrow Function
const doubleARR = (num) => {
return num * 2;
}
여기서 한 것이라고는 function 키워드 대신 => 화살표를 넣은 것이죠.
결과값은 아래와 같이 동일합니다.
doubleEXP(3);
// 6
doubleARR(3);
// 6
애로우 함수는 사실 더욱 간단하게 쓰여질 수 있습니다. 위의 double 함수는 아래와 같이 표현될 수 있습니다.
const double = num => num * 2;
맞습니다, 그것들은 완전히 똑같은 함수입니다.
이것이 혼동스러울 수 있습니다만 왜 이 함수들이 동일한지 살펴보겠습니다.
const double = (num) => {
return num * 2;
}
// Is the same as
const double = num => num * 2;
Arrow Function parameters
애로우 함수 파라미터들은 다음의 이유 때문에 매우 중요합니다. 매개변수의 수는 함수의 문법에 영향을 미칩니다.
- 0개의 파라미터일 경우 애로우 함수는 빈 괄호를 가집니다.
() => { statements } - 한개의 매개변수일 경우 매개변수 근처의 괄호를 생략할 수 있습니다.
parameter => { statements } - 2개 이상의 매개변수일 경우 파라미터는 괄호속으로 들어갑니다.
(param1, param2, ...) => { statements }다시 우리의 double 예제로 돌아와서 위의 규칙들을 적용하면 하나의 매개변수를 가진 애로우 함수는 괄호를 생략한다는 것을 알 수 잇습니다.
const double = (num) => { return num * 2; } // Is the same as const double = num => num * 2;
Arrow Function Return
애로우 함수는 리턴 문법도한 짧게 되어 있습니다. 만약 애로우 함수가 단순히 한줄의 코드를 리턴한다면 중괄호와 return 키워드를 생략할 수 있습니다.
다음과 같은 함수 표현을 생각해봅시다.
let name = function(parameters){
return expression
}
이렇게 짧게 될 수 있습니다.
let name = (parameters) => expression
이것을 기억해두면서 우리의 원본 double 예제를 봅시다. 여기서 우리는 이 규칙이 우리의 예제에 어떻게 적용되었는지 볼 수 있습니다.
const double = (num) => {
return num * 2;
}
// Is the same as
const double = num => num * 2;
Key Takeaways
- 애로우 함수가 받아들이는 매개변수의 수는 함수의 문법을 결정합니다.
- 리턴 값이 한줄일 경우 괄호와 return 키워드를 생략할 수 있고 남겨진 statement를 리턴할 것입니다.
Challenges
이런 규칙들과 애로우 함수의 문법을 이해하는 즐거운 방법은 함수 표현을 애로우 함수로 변환해 보는 겁니다. 아래에 3가지 문제가 있습니다. 애로우 함수로 변환해 봅시다.
#1
const add3 = function(num1, num2, num3){
return num1 + num2 + num3;
}
const add3 = (num1, num2, num3) => num1+ num2 + num3
#2
const square = function(num){
return num ** 2;
}
const square = num => num ** 2;
#3
const sayHi = function(){
console.log('Hi');
}
const sayHi = ()=> {
console.log('Hi')
}
Important
이 기사는 오직 애로우 함수의 문법만 다뤘으며 애로우 함수의 this의 non-binding은 다루지 않았습니다.
Summary
- 애로우 함수의 문법 정리, 더욱 간결하게 코드를 작성할 수 있음
- 매개변수의 갯수에 따라 문법이 달라진다. /0개/1개/2개 이상/, return 값이 한 줄인 경우
- this의 바인딩을 하지 않아도 됨 (추가 학습 필요)
