# ES6: 자바스크립트의 혁신적인 진화

ECMAScript 6(ES6), 공식 명칭은 ECMAScript 015는 자바스크RIPT의 중대한 업데이트 버전으로, 2015년 6월에 공식 발표되었습니다. 이 버전은 그 이전의 ES5(2009년) 이후 가장 큰 변화를 가져왔으며, 자바스크립트의 문법과 기능을 대폭 개선하여 더 직관적이고 효율적인 코드 작성을 가능하게 했습니다. ES6는 모던 자바스크립트의 기반을 형성하며, 현재 대부분의 프론트엔드 및 백엔드 개발 환경에서 표준처럼 사용되고 있습니다.

---

## 개요

ES6는 자바스크립트의 생산성, 가독성, 유지보수성을 향상시키기 위해 여러 새로운 기능을 도입했습니다. 특히 클래스 기반 객체지향 문법, 모듈 시스템, 화살표 함수, 템플릿 리터럴 등은 개발자들의 코딩 습관을 크게 변화시켰습니다. 이 문서에서는 ES6의 주요 기능을 체계적으로 설명하고, 각 기능의 사용법과 장점을 소개합니다.

---

## 주요 기능

### 1. `let`과 `const` 키워드

ES6 이전에는 변수 선언에 `var`만 사용할 수 있었으며, 이는 함수 스코프(function scope)를 따르고 호이스팅(hoisting) 문제를 일으켰습니다. ES6에서는 블록 스코프(block scope)를 지원하는 `let`과 `const`를 도입했습니다.

- **`let`**: 재할당은 가능하지만 재선언은 불가능한 블록 스코프 변수.
- **`const`**: 상수 선언, 재할당 및 재선언 모두 불가능.

```javascript
{
  let x = 10;
  const y = 20;
  // y = 30; // 오류: Assignment to constant variable.
}
// console.log(x); // ReferenceError: x is not defined
```

> ✅ **장점**: 변수의 스코프를 더 명확히 제어할 수 있으며, 버그를 줄이는 데 효과적입니다.

---

### 2. 화살표 함수 (Arrow Functions)

함수를 더 간결하게 표현할 수 있는 새로운 문법입니다. `function` 키워드를 생략하고 `=>` 기호를 사용합니다.

```javascript
// 기존 함수
const add = function(a, b) {
  return a + b;
};

//살표 함수
const add = (a, b) => a + b;

// 단일 매개변수일 경우 괄호 생략 가능
const square = x => x * x;
```

#### 특징
- **`this` 바인딩**: 화살표 함수는 자신만의 `this`를 생성하지 않고, 상위 스코프의 `this`를 그대로 사용합니다. (Lexical `this`)
- **생성자로 사용 불가**: `new` 키워드로 인스턴스 생성 불가.

> ✅ **장점**: 콜백 함수에서 `this` 문제를 해결하고, 코드를 간결하게 만듭니다.

---

### 3. 템플릿 리터럴 (Template Literals)

백틱(``` ` ```)을 사용하여 문자열을 정의하고, 내장된 표현식(`${expression}`)을 삽입할 수 있습니다.

```javascript
const name = "홍길동";
const age = 25;

// 기존 문자열 연결
const greeting = "안녕하세요, " + name + "님. 나이는 " + age + "세입니다.";

// 템플릿 리터럴
const greeting = `안녕하세요, ${name}님. 나이는 ${age}세입니다.`;
```

#### 다중 줄 문자열 지원
```javascript
const multiline = `
이 문자열은
여러 줄로
표현됩니다.
`;
```

> ✅ **장점**: 문자열 보간과 줄바꿈 처리가 직관적입니다.

---

### 4. 디스트럭처링 할당 (Destructuring Assignment)

배열이나 객체의 값을 분해하여 변수에 직접 할당할 수 있습니다.

#### 객체 디스트럭처링
```javascript
const person = { name: "김철수", age: 30 };
const { name, age } = person;
console.log(name); // "김철수"
```

#### 배열 디스트럭처링
```javascript
const colors = ["red", "green", "blue"];
const [first, second] = colors;
console.log(first); // "red"
```

> ✅ **장점**: 데이터 추출이 간편해지고 코드 가독성이 향상됩니다.

---

### 5. 클래스 (Classes)

ES6는 `class` 키워드를 도입하여 자바스크립트에 클래스 기반 문법을 제공합니다. (기존에는 프로토타입 기반)

```javascript
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name}이(가) 소리를 냅니다.`);
  }
}

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

const dog = new Dog("바둑이");
dog.speak(); // "바둑이이(가) 멍멍 짓습니다."
```

> ⚠️ **참고**: 자바스크립트의 클래스는 문법적 설탕(syntactic sugar)이며, 내부적으로는 여전히 프로토타입 기반입니다.

---

### 6. 모듈 (Modules)

ES6는 자바스크립트에 공식적인 모듈 시스템을 도입했습니다. `import`와 `export`를 사용하여 코드를 모듈화할 수 있습니다.

#### 내보내기 (Export)
```javascript
// math.js
export const add = (a, b) => a + b;
export const PI = 3.14159;
```

#### 가져오기 (Import)
```javascript
// main.js
import { add, PI } from './math.js';
console.log(add(2, 3)); // 5
```

> ✅ **장점**: 코드의 재사용성과 유지보수성이 크게 향상됩니다.

---

### 7. 프라미스 (Promises)

비동기 작업을 더 효율적으로 처리하기 위해 도입된 객체입니다. 콜백 지옥(callback hell)을 해결하는 데 기여했습니다.

```javascript
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("데이터 로드 완료");
    }, 1000);
  });
};

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));
```

> ✅ **후속**: ES2017에서 `async/await`가 도입되어 프라미스를 더 편리하게 사용할 수 있게 되었습니다.

---

## 참고 자료 및 관련 문서

- [MDN Web Docs: ES6 Guide](https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/ES6)
- [ECMAScript 2015 (ES6) 표준 문서](https://www.ecma-international.org/ecma-262/6.0/)
- 관련 문서: `es2017.md`, `javascript_modules.md`, `asynchronous_programming.md`

---

ES6는 자바스크립트 생태계에 지대한 영향을 미친 중요한 업데이트입니다. 현대 웹 개발에서 ES6 이상의 문법은 기본으로 여겨지며, 대부분의 프레임워크(React, Vue, Angular 등)도 ES6+ 기반으로 설계되어 있습니다. 따라서 자바스크립트 개발자라면 반드시 ES6의 핵심 기능들을 숙지하고 활용할 수 있어야 합니다.