ES6 (ECMAScript 2015)

답변 확인

ES6(ECMAScript 2015) 는 자바스크립트의 대규모 업데이트로, 2015년에 공식 발표되었음 ES6는 코드의 가독성과 유지보수성을 높이고, 현대 웹 애플리케이션의 요구를 반영하기 위해 다양한 기능과 문법을 추가하였음

ES6 주요기능

1. let과 const

• let: 블록 스코프를 가지는 변수 선언 방식.
• const: 블록 스코프를 가지며, 값이 변경되지 않는 상수 선언.
• 특징 :
  • var의 함수 스코프 문제를 해결.
  • 변수 선언 이전에 접근시 ReferenceError 발생.

let age = 30; // 값 변경 가능
const name = 'David'; // 값 변경 불가

2. 화살표 함수 (Arrow Functions)

• 간결한 문법으로 참수 정의 가능
• this가 상위 스코프의 컨텍스트를 유지하므로 혼란 감소

const add = (a,b) => a + b; 한 줄로 작성
const greet = () => console.log("Hello!");

3. 클래스 (Classes)

• 객체 지향 프로그래밍(OOP)을 위한 문법 추가.
• 생성자, 상속, 메서드 오버라이딩 등을 지원

class Person {
    constructor(name) {
        this.name = name;
    }
 
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}
 
const david = new Person('David');
david.greet();

4. 템플릿 리터럴

• 백틱( ` )을 사용해 문자열 내에 변수 삽입 및 여러 줄 문자열 작성 가능

const name = 'David';
console.log(`안녕하세요, 제 이름은 ${name}입니다.`);

5. 구조 분해 할당 (Destructuring Assignment)

• 배열 및 객체의 값을 추출하여 변수에 바로 할당

const person = { name: 'David', age: 30 };
const { name, age } = person;
 
const numbers = [1, 2, 3];
const [first, second] = numbers;

6. Spread Operator와 Rest Parameter

• Spread Operator(...): 배열, 객체를 복사하거나 결합할 때 사용
• Rest Parameter: 함수의 인자를 배열로 받음

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];
 
function sum(...args) {
    return args.reduce((a, b) => a + b, 0);
}

7. Promise

• 비동기 작업을 처리하기 위한 객체
• 콜백 지옥 문제를 해결하고, 체인형 비동기 처리 가능

const promise = new Promise((resolve, reject) => {
    const success = true;
    if (success) resolve('작업 성공');
    else reject('작업 실패');
});
 
promise.then((result) => console.log(result)).then((error) => console.log(error));

8. 모듈 (Modules)

• import와 export를 사용해 코드 모듈화를 지원

// math.js
export const add = (a, b) => a + b;
 
// app.js
import { add } from './math.js';
console.log(add(2, 3));

9. Map과 Set

• 새로운 데이터 구조로 효율적인 키-값 저장(Map)과 고유 값 저장(Set) 가능

const map = new Map();
map.set('key', 'value');
console.log(map.get('key')); // "value"
 
const set = new Set();
set.add(1);
set.add(1); // 중복 무시
console.log(set.size); // 1

ES6 이전 문법을 이해해야 하는 이유

1. 기존 코드베이스와의 호환성

• 많은 프로젝트와 라이브러리는 여전히 ES6 이전 문법을 사용중
• 기존 코드를 유지보수하려면 ES5 문법에 대한 이해 필수적

2. 점진점 마이그레이션

• 대규모 프로젝트는 ES6로의 완전한 전환이 어렵기에 ES5와 ES6 문법이 혼재될 수 있음

3. 구형 브라우저 지원

• ES6 기능을 구형 브라우저에서 사용하려면 폴리필이나 트랜스파일러를 활용해야 하는데, 이때에도 ES5 이전 문법에 대한 기본적인 이해가 필요

ES6 도입의 장점

1. 코드 가독성 및 유지보수성 향상:

• 간결한 문법으로 직관적인 코드를 작성 가능.

2. 비동기 처리 개선:

• Promise와 이후의 async/await으로 비동기 작업 관리가 쉬워짐.

3. 모듈화 지원:

• 코드 재사용성과 분리성이 증가.

4. 효율적인 데이터 관리:

• Map과 Set 같은 데이터 구조 추가로 관리가 용이.