JAVASCRIPT 22 ARROW FUNCTIONS

 

자바스크립트 Arrow Function 에 대해 알아보자!

앞서 배웠던 함수 선언식 그리고 함수 표현식중 표현식의 다른 형태라고 보면 된다.

const calcAge2 = function (birthYear) {

    return 2022 - birthYear;}

위에 있는 코드는 간단한 함수 표현식이다.

const calcAge3 = birthYear => 2022 - birthYear;

그리고 이 코드는 화살표 함수이고 두 함수는 같은 역할을 한다. 화살표 함수는 function 도 생략되고 한 줄로 쓸때 return 을 안써도 되서 매우 간단하다.

const yearsUntilRetirement = (birthYear, firstname) => {

    const age = 2032 - birthYear;

    const retirement = 65 - age;

    return `${firstname} retires in ${retirement} years`;}

함수에 쓸게 많아질 수록 화살표 함수는 불리한데 매개변수가 두개 이상일 경우 괄호로 묶어 줘야 하며 한 줄이 아니게 되면 { } 를 사용해 코드를 묶어줘야한다. 다른 함수와 마찬가지로 여러줄이면 return 또한 붙여 줘야 한다.

이상 간단한 화살표 함수에 대해 알아보았다.

마지막으로 세가지 함수의 헷갈리는 특징에 대해 간략하게 정리하자면

선언형 함수(declaration) : 함수가 선언되기 전에 사용 가능하다.

표현형 함수(expression)  :  변수 안에 함수의 value 를 저장한다. (표현형 임을 생각한다)

화살표 함수(arrow)        :  표현형의 한 종류 이며 한 줄 코드를 작성하기에 강력하다.

모두 다른 특징을 가졌지만 함수의 기본적인 input , transform , output 의 특징은 똑같다.