ES5 vs ES6

안녕하세요. 오늘은 ES5와 ES6를 각각 비교해 보도록 하겠습니다.

---

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

감사합니다.