ECMAScript

ECMAScript 6 (줄여서 ES6, 또는 ECMAScript 2015)는 자바스크립트(JavaScript)의 대대적인 개정판으로, 2015년에 공식 발표되었습니다. ES6는 JavaScript의 기능성과 생산성을 획기적으로 개선하면서 현대적인 웹/앱 개발의 기반이 되었습니다.

아래에 ES6의 핵심 개념과 주요 기능들을 상세하게 설명해드리겠습니다.

Table of Contents

Toggle

🔰 ECMAScript란?

ECMAScript는 JavaScript의 표준 사양입니다.
ECMA(유럽 컴퓨터 제조 협회)의 TC39 위원회에서 관리하고 발전시키고 있습니다.
JavaScript는 ECMAScript 사양을 구현한 프로그래밍 언어입니다.

🚀 ES6의 주요 특징 및 기능

1. `let`과 `const`

기존의 var는 함수 스코프(function scope)를 가지며, 호이스팅(hoisting) 문제를 유발함.
ES6는 **블록 스코프(block scope)**를 가지는 let과 상수 선언을 위한 const를 도입함.

let name = "Alice";
const age = 30;

✅ let: 값을 나중에 변경 가능
✅ const: 변경 불가능 (immutable)

2. 템플릿 리터럴 (Template Literals)

문자열을 백틱() “으로 감싸고 ${}로 변수나 표현식을 쉽게 삽입

const name = "Bob";
console.log(`Hello, ${name}!`); // Hello, Bob!

✅ 다중 줄 문자열도 가능

3. 화살표 함수 (Arrow Functions)

짧고 간결한 함수 표현

const add = (a, b) => a + b;

✅ this 바인딩이 기존 함수와 다름 (lexical scope 사용)

4. 클래스 (Class)

객체 지향 프로그래밍을 위한 문법적 설탕 (syntactic sugar)

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    return `Hi, I'm ${this.name}`;
  }
}

5. 모듈 (Modules)

코드 분할 및 재사용성을 향상시킴 (import / export)

// math.js
export const add = (a, b) => a + b;

// app.js
import { add } from './math.js';
console.log(add(2, 3)); // 5

6. 디스트럭처링 (Destructuring)

배열이나 객체의 값을 개별 변수로 쉽게 추출

// 배열
const [a, b] = [1, 2];

// 객체
const { name, age } = { name: 'Alice', age: 25 };

7. 디폴트 파라미터 (Default Parameters)

함수의 기본 인자 설정 가능

function greet(name = "Guest") {
  console.log(`Hello, ${name}`);
}

8. 스프레드 연산자 (`...`) & 나머지 파라미터

복사, 병합, 나머지 추출 등 다양하게 활용

// 배열 병합
const nums = [1, 2, ...[3, 4]];

// 함수 파라미터
function sum(...args) {
  return args.reduce((a, b) => a + b);
}

9. Promise (비동기 처리)

콜백 지옥을 해결하기 위한 비동기 처리 방식

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve("Data received"), 1000);
  });
};

fetchData().then(data => console.log(data));

10. Map과 Set

새로운 컬렉션 타입

const map = new Map();
map.set('key', 'value');

const set = new Set([1, 2, 3, 3]); // 중복 제거됨

📌 ES6 이후로도 계속 발전 중

ES6 이후에도 ES7, ES8, …, ES2024 등으로 ECMAScript는 매년 새로운 기능이 추가되고 있습니다. 하지만 ES6는 현재 자바스크립트의 기본 토대로 자리잡았으며, 이후의 모든 문법 발전의 기반입니다.

🧠 요약

기능	설명
let/const	새로운 변수 선언 방식
Template Literals	문자열 보간과 멀티라인 문자열
Arrow Functions	간결한 함수 선언 및 `this` 처리
Classes	객체지향 문법 지원
Modules	코드 분할과 재사용 가능
Destructuring	배열/객체 분해 할당
Default Parameters	기본 함수 인자 설정
Spread / Rest	배열/객체 병합 및 분해
Promise	비동기 처리 개선
Map / Set	새로운 데이터 컬렉션