ES6+

ES6+는 모던 자바스크립트로 더 간결하고 효율적인 코드 작성을 가능하게 한다.

 

ES6의 주요 변화는 다음과 같다.

 

1.템플릿 문자열: 템플릿 문자열을 통해 문자열에 변수를 포함시킬 때 좀 더 직관적이고 편하게 사용할 수 있게 한다.

`${name}`;

 

2. const, let: JavaScript 엔진은 코드를 실행하기 전에 선언문을 위로 끌어올리는 작업을 한다.(Heap에 메모리를 할당해 놓는 것)

 

3. 화살표 함수: 일반 함수는 호출 방법에 따라 this가 다르게 맵핑된다. 반면 화살표 함수의 this는 상위 스코프의 this를 가리킨다. 이를 통해 콜백 함수에서 일관된 this를 가리킬 수 있다. 가독성 측면에서도 간결하게 작성할 수 있어서 더 좋다.

// 일반 함수를 사용한 예시
const person = {
    name: "Alice",
    hobbies: ["reading", "biking", "coding"],
    showHobbies: function() {
        this.hobbies.forEach(function(hobby) {
            console.log(`${this.name} likes ${hobby}`);
        });
    }
};

person.showHobbies();
// 출력:
// undefined likes reading
// undefined likes biking
// undefined likes coding

// 화살표 함수를 사용한 예시
const person = {
    name: "Alice",
    hobbies: ["reading", "biking", "coding"],
    showHobbies: function() {
        this.hobbies.forEach(hobby => {
            console.log(`${this.name} likes ${hobby}`);
        });
    }
};

person.showHobbies();
// 출력:
// Alice likes reading
// Alice likes biking
// Alice likes coding

 

4. 구조분해할달(destructing): 배열이나 객체의 속성을 분해하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // arr1을 복사하고 추가 요소를 결합

 

5. Promise: JavaScript에서 비동기 처리로 사용되는 객체, Callback 지옥 문제를 해결하고 async/await을 통해 비동기 코드를 더 직관적이고 간결하게 작성할 수 있다.