[JavaScript] Arrow Function(화살표 함수), 암시적 반환

Arrow Function(화살표 함수)

화살표 함수(Arrow Function) 형태는 JavaScript에서 흔히 보이는 함수의 선언 형태이다.

 

 

기본 함수 선언식

우선, 기본적으로 함수를 선언할 때 우리는 아래와 같은 형식을 사용한다.

function add(a,b){
    return a+b;
}

 

위 함수는 a와 b를 더하는 함수이다.

 

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

 

그리고 함수는 객체임을 생각한다면 add라는 변수에 a와 b를 더하는 익명함수를 저장해주는 방식으로도 선언할 수 있다.

 

위의 함수 선언과 동일한 결과를 나타낸다.

 

여기서 익명함수는 아래 게시글을 참고하면 좋을 거 같다.

[JavaScript] 익명함수(Anonymous Function)

 

 

Arrow Function 사용

 

이제, 화살표 함수(Arrow Function)을 사용하여 익명함수를 표현한다면 아래와 같이 작성할 수 있습니다.

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

 

() => { ... } 과 같은 식이 있는 것을 확인할 수 있다.

() 안에는 인자(parameter)를, {} 안에는 함수의 실행 내용을 작성한다.

 

• 인자(parameter)가 없을 경우에는, () 안을 비워두면 된다.
• 인자(parameter)가 하나만 있을 때는 괄호(())를 생략할 수 있다.

const print = val => {
    console.log(val);
}

 

위처럼 인자(parameter)가 하나인 경우는 괄호를 적지 않아도 된다.

 

 

 

return 을 사용하지 않고 나타내기

const add = (a, b) => (
    a + b
);

 

중괄호({})를 괄호(())로 바꾸고, 세미콜론(;)을 괄호 뒤에 붙인다.

 

위 코드를 한줄로 줄이면

const add = (a, b) => a + b;

 

위와 같이 변한다.

모든 코드들은 같은 의미를 가지고 있으며, 상황에 맞게 축약이 가능하다.