FRONTEND/JavaScript

함수 선언식, 표현식, 화살표함수

MarkLEE 2021. 4. 12. 07:59

오늘은 변수, 타입, 함수, 그리고 조건문에 대해 학습하였다. 

 

이 글에서는 우선적으로 함수의 표현방법에 대해 다뤄보고자 한다. 

 

함수를 표현하는 방법은 크게 3가지(함수 선언식, 표현식, 화살표함수)가 있다. 

 

이들의 눈에 띄는 첫 차이점은 말그대로 '표현의 차이'에 있다.

아래의 표현들은 표현의 방식에 차이는 있지만 실행값은 6으로 같게 된다.

<함수선언식>

function example(num1, num2){

    let result = num1*num2;

    return result;

    console.log(result);

}

example(2,3);

 

<함수표현식>

const example = function(num1, num2){

    let result = (num1*num2);

    retrun result;

    console.log(result);

}

example(2,3);

 

<화살표함수>

const example = (num1,num2) =>{

    let result = (num1*num2);

    return result;

    console.log(result);

}

example(2,3);

 

 

*화살표 함수의 경우, return 값만 존재하는 경우, return과 {}를 생략 가능하나, 2줄이상의 코딩일 경우 모두 명시적으로 적어주는게 좋다.

 

이렇게 표현은 다르지만, 결과는 동일하게 되출되는데,

왠만하면 가독성을 위해서 이를 혼용하여 쓰지말고, 하나를 선택하여 쓰도록 하자.