[JavaScript-48] arrow function (화살표함수)

function키워드를 지우고, 파라미터 옆에 => 를 써서 함수를 조금 더 간결하게 표현해주는 기능입니다!

arrow function은 주로 익명함수(이름이 없는 함수)로 사용되기 때문에, 

변수에 할당되어 익명으로 사용된 함수들을 간결하게 하는데 사용됩니다. 

 

말로만 적고보니, 뭐라는지 제가 봐도 모르겠는데요,

코드로 보시죠!

const adder = function(a,b) {
    return a + b;
    };

자, 45강에서 배웠던 변수에 함수를 할당하는 방식, 함수표현식을 사용하여 함수를 생성하고 있죠?

이제, 이 함수를 arrow function을 이용해서 간단하게 바꿔볼게요!

function 키워드를 지우고, 파라미터 옆에 => 를 써준다고 했죠?

const adder = (a,b) => {
    return a + b;
    };

이제 됐습니다! 앞으로는, function 키워드가 없어도 화살표를 보면,

아 저건 함수구나~ 하실 수 있어야 합니다!

 

그런데, arrow function은 저것보다 더 간단한 표현들이 가능한데요, 

차근 차근 설명드릴게요.

 

(1) 함수의 파라미터의 괄호까지 생략할 수 있는 경우

 

결론: 파라미터가 1개인 함수만 괄호 생략 가능

const namePrinter = function(name){
    console.log(name);
    };
    
//arrow function으로 
const namePrinter = (name) => {console.log(name);};

//파라미터 1개니까 괄호 생략 가능
const namePrinter = name => {console.log(name);};

이해가 되시죠?

파라미터가 2개 이상인 함수부터는 괄호를 생략하시면 안됩니다!

그리고, 대부분의 개발자 커뮤니티에서는 가독성을 위해 괄호를 생략하지 않는 것을 지향하고 있습니다!

 

(2)함수의 중괄호 & return키워드 생략이 가능한 경우

결론: 함수 안에 적힌 동작 부분이 return문 하나만 있을 경우(단, return하는 대상이 객체면 안됨)

const square = function(num){
    return num **2;
    };
    
//일반적인 arrow function
const square = (num) => {return num **2;};


//최대로 생략한 arrow function
const square = num => num ** 2

이렇게, 함수 내부의 내용이 return문 하나라면, 중괄호와 return을 동시에 생략할 수 있습니다!