안녕하세요. 오늘은 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
감사합니다.
'공부' 카테고리의 다른 글
| [React]-Hooks에 대해 알아보자 (1) | 2019.12.08 |
|---|---|
| [JavaScript]-this,call,apply,bind (0) | 2019.12.05 |
| Promise, async, await (0) | 2019.11.28 |
| Trello(트렐로) - 프로젝트 관리하기 (0) | 2019.11.10 |
| git stash (0) | 2019.11.03 |
