ES5

ES5의 함수 작성 방법은 두가지가 있으며, 모두 동일한 결과값을 나타냅니다!

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

sum(4, 12); // return : 16

ES5 예제 코드1

위의 예제 코드1번 처럼 사용하는 방법이 있고,

 var sum = function(a, b) {
    return a + b;
  };

  sum(4, 12); // return : 16

ES5 예제 코드2

예제 코드2번 처럼 사용하는 방법이 있습니다. 결과값은 16으로 동일합니다.

예제 코드1번의 경우 함수 선언, 예제 코드 2번의 경우를 함수 식이라고 표현합니다.

이 둘의 차이점은 무엇일까요?

함수 선언의 경우에는 코드가 실행되면 스크립트에 있는 함수는 코드의 맨위로 올라가며 다른코드가 실행되기전에 해석됩니다.

즉, 코드에서 해당 함수를 선언하기 전에 실제로 명명 된 함수를 호출 할 수 있습니다.

아래 예제를 통해서 확인해 보도록 하겠습니다.

sum(4, 12); // return 12
  function sum(a, b) {
    return a + b;
  }

--------------------------------------------------------------------

sum(4, 12); // error sum is not defined
var sum = function(a, b) {
  return a + b;
};

ES5 예제 코드3

함수식의 경우 함수식의 코드가 먼저 해석되지 않아 오류가 뜨는 모습을 보실 수 있습니다.

ES6

위에 있는 ES5의 함수를 사용할 수 있지만 ES6는 화살표 함수를 도입했습니다.

화살표 함수는 표현식의 구조를 단순화 하여 ES5보다 간결하게 작성할 수 있습니다.

화살표 함수는 function 키워드를 없애고 "=>"를 사용합니다.

var sum = (a, b) => {
  return a + b;
};

sum(4, 12); // return 16

ES5 예제 코드4

ES6함수에는 더욱더 간결하게 사용할 수 있는 방법이 있습니다.

var sum = (a, b) => a + b;
  
sum(4, 12); // return 16

ES5 예제 코드5

감사합니다.