ES6 (ECMAScript 2015) | KAITRUST AI 백과사전

📖 상세 설명

ES6(ECMAScript 2015)는 JavaScript 역사상 가장 중요한 업데이트로, 2015년 6월 공식 발표되었습니다. 이전 버전인 ES5가 2009년에 나온 후 6년 만의 메이저 업데이트로, 현대 JavaScript 개발의 기반이 되는 수많은 핵심 기능들이 추가되었습니다.

ES6의 가장 큰 변화는 변수 선언 방식입니다. 기존 var의 함수 스코프 문제를 해결하기 위해 블록 스코프를 가진 let과 const가 도입되었습니다. 또한 화살표 함수(arrow function)가 추가되어 간결한 함수 표현과 this 바인딩 문제를 해결했습니다.

클래스(class) 문법은 프로토타입 기반 상속을 더 직관적으로 작성할 수 있게 해주었고, 모듈 시스템(import/export)은 코드 분리와 재사용성을 크게 향상시켰습니다. Promise는 콜백 지옥을 해결하고 비동기 프로그래밍을 더 깔끔하게 만들었습니다.

그 외에도 템플릿 리터럴, 구조 분해 할당, 스프레드 연산자, 기본 매개변수, Map/Set 자료구조, Symbol, 제너레이터 등 실무에서 필수적인 기능들이 대거 추가되었습니다. 현재 모든 모던 브라우저와 Node.js에서 ES6를 완벽하게 지원합니다.

💻 코드 예제

// 1. let, const - 블록 스코프 변수 선언
const PI = 3.14159;  // 재할당 불가
let count = 0;       // 재할당 가능
// var는 함수 스코프, let/const는 블록 스코프

// 2. 화살표 함수 (Arrow Function)
const add = (a, b) => a + b;
const greet = name => `안녕하세요, ${name}님!`;
const fetchData = async () => {
    const response = await fetch('/api/data');
    return response.json();
};

// 3. 템플릿 리터럴 (Template Literal)
const user = { name: '홍길동', age: 25 };
console.log(`이름: ${user.name}, 나이: ${user.age}세`);
// 멀티라인도 가능
const html = `
    <div class="card">
        <h2>${user.name}</h2>
    </div>
`;

// 4. 구조 분해 할당 (Destructuring)
const { name, age } = user;
const [first, second, ...rest] = [1, 2, 3, 4, 5];
// first: 1, second: 2, rest: [3, 4, 5]

// 5. 스프레드 연산자 (Spread Operator)
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];  // [1, 2, 3, 4, 5]
const obj = { ...user, city: '서울' };  // 객체 병합

// 6. 클래스 (Class)
class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(`${this.name}가 소리를 냅니다.`);
    }
}

class Dog extends Animal {
    speak() {
        console.log(`${this.name}가 멍멍 짖습니다!`);
    }
}

// 7. 모듈 (Modules)
// utils.js
export const sum = (a, b) => a + b;
export default class Calculator { /* ... */ }

// app.js
import Calculator, { sum } from './utils.js';

// 8. Promise
const fetchUser = (id) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (id > 0) resolve({ id, name: 'User' });
            else reject(new Error('Invalid ID'));
        }, 1000);
    });
};

fetchUser(1)
    .then(user => console.log(user))
    .catch(err => console.error(err));

🗣️ 실무에서 이렇게 말하세요

💬 회의에서

"이 프로젝트는 ES6 이상 문법을 사용하고 있어서, 구형 브라우저 지원이 필요하면 Babel로 트랜스파일링 설정을 추가해야 합니다. let/const와 화살표 함수는 IE11에서 동작하지 않아요."

💬 면접에서

"ES6의 let과 const는 블록 스코프를 가지고, var는 함수 스코프를 가집니다. const는 재할당만 막을 뿐 객체의 속성 변경은 가능합니다. 불변성이 필요하면 Object.freeze()를 사용하거나 Immer 같은 라이브러리를 활용합니다."

💬 코드 리뷰에서

"여기 구조 분해 할당으로 더 깔끔하게 작성할 수 있어요. `const name = user.name; const age = user.age;` 대신 `const { name, age } = user;`로 한 줄로 줄일 수 있습니다."

⚠️ 흔한 실수 & 주의사항

❌

const로 선언한 객체/배열 변경

const는 재할당만 막습니다. `const arr = [1, 2]; arr.push(3);`은 가능합니다. 불변성이 필요하면 Object.freeze()나 스프레드 연산자로 새 객체를 만드세요.

❌

화살표 함수의 this 바인딩

화살표 함수는 자신만의 this를 가지지 않고 상위 스코프의 this를 사용합니다. 객체 메서드나 이벤트 핸들러에서 this가 필요하면 일반 함수를 사용하세요.

❌

TDZ(Temporal Dead Zone) 무시

let/const는 호이스팅되지만 초기화 전 접근하면 ReferenceError가 발생합니다. 변수 선언은 항상 스코프 최상단에서 하는 습관을 들이세요.

✅

기본 매개변수 활용하기

`function greet(name = '손님')` 형태로 기본값을 설정하면 undefined 체크 로직을 줄일 수 있습니다. 구조 분해와 함께 사용하면 더 강력합니다.

🔗 관련 용어

📚 더 배우기

📄 MDN JavaScript 가이드 (공식) 🎓 ES6 Features - 기능별 비교 🔧 Babel - ES6+ 트랜스파일러