소개

이전에 ES5, ES6의 차이점에 대해 배웠습니다. 그러나 ES6에서 할 수있는 일에 관해서는 모르기 때문에 이번에 공부 한 것을 출력하고 싶습니다.

ES6(ES2015)

변수 선언은 var에서 let로

상수 선언 (const)

함수 선언에서 화살표 함수를 사용할 수 있도록

Class 구문을 사용할 수 있다

모듈 기능 도입

편리한 배열 메소드의 구현
→ forEach,map,filter,find,every,some,reduce

Promise, async/await (비동기 통신)

화살표 기능

애로우 함수란 그 이름대로, =>(화살표)를 사용해 함수 리터럴.

편리한 배열 메소드 구현

forEach 메서드

ES5, ES6 각각의 차이 쓰기 방법은 아래와 같습니다.

에디터

// ES5
var foods = ['pizza', 'beef', 'bread'];

for(var i = 0; i < foods.length; i ++) {
    console.log(foods[i]);
}

// ES6
foods.forEach(function(food){
    console.log(food);
});

에디터

// ES5
for(var i = 0; i < foods.length; i ++) {
    console.log(foods[i]);

ES5 for 루프의 구문은 이상한 사촌에 세미콜론 있고, 쓰는 방법·순서 잘못해도 이상한 거동해 버리는군요~

한편, ES6에 대해서는 가독성도 향상된 기재 방법이 됩니다.

에디터

// ES6
foods.forEach(function(food){
    console.log(food);
});

foods 배열에 forEach 메서드를 호출합니다. 이 안에 익명 함수를 넣을 수 있다.
배열에 대해 하나씩 실행되는 함수가 된다. 결과, 음식의 내용이 표시됩니다.

알기 쉽게 도표화한 것이 이쪽이 됩니다.


콜백 함수는 이전 코드의이 부분에 해당합니다.

에디터

// ES6
function(food){
    console.log(food);
});

일련의 흐름으로서, foods의 배열안의 'pizza', 'beef', 'bread'가 하나씩 건네주어 처리가 실행되는 흐름이 됩니다.

마지막으로

최근 React 학습을 할 수 없었기 때문에 다시 학습하고 싶습니다.