대표적인 es6 문법 정리

1. let과 const

var 대신 블록 스코프(block scope)를 지원하는 let과 상수 선언용 const를 사용합니다.

let name = "Alice"; // 변경 가능
const age = 25;     // 변경 불가

if (true) {
  let name = "Bob";
  console.log(name); // "Bob"
}
console.log(name);   // "Alice"

 

 

2. 화살표 함수(Arrow Function)

간결한 함수 표현식입니다. this 바인딩이 기존 함수와 다르게 작동합니다.

// 일반 함수
function add(a, b) {
  return a + b;
}

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

console.log(add(2, 3)); // 5

 

 

3. 템플릿 리터럴(Template Literal)

문자열 안에서 변수를 쉽게 포함할 수 있는 백틱(`) 문법.

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

 

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

객체나 배열의 값을 쉽게 추출하여 변수에 할당합니다.

// 배열
const [a, b] = [1, 2];
console.log(a, b); // 1, 2

// 객체
const user = { name: "Alice", age: 25 };
const { name, age } = user;
console.log(name, age); // "Alice", 25

 

5. 기본 매개변수(Default Parameters)

함수 매개변수에 기본값을 설정합니다.

const greet = (name = "Guest") => `Hello, ${name}!`;
console.log(greet()); // "Hello, Guest!"
console.log(greet("Alice")); // "Hello, Alice!"

 

6. 스프레드 연산자(Spread Operator)

배열이나 객체를 쉽게 복사하거나 병합할 수 있습니다.

// 배열
const numbers = [1, 2, 3];
const moreNumbers = [...numbers, 4, 5];
console.log(moreNumbers); // [1, 2, 3, 4, 5]

// 객체
const user = { name: "Alice", age: 25 };
const updatedUser = { ...user, age: 30 }; // age 업데이트
console.log(updatedUser); // { name: "Alice", age: 30 }

 

7. 클래스(Class)

ES6에서는 객체 지향 프로그래밍을 더 쉽게 작성할 수 있는 class 문법을 제공합니다.

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

  greet() {
    return `Hello, my name is ${this.name}.`;
  }
}

const alice = new Person("Alice", 25);
console.log(alice.greet()); // "Hello, my name is Alice."

 

8. 모듈(Modules)

ES6에서는 import와 export를 사용하여 모듈을 구성합니다.

// module.js
export const greet = (name) => `Hello, ${name}!`;

// main.js
import { greet } from './module.js';
console.log(greet("Alice")); // "Hello, Alice!"

 

9. 프로미스(Promises)

비동기 작업을 처리하는 새로운 방식.

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

fetchData().then((data) => console.log(data)); // 1초 후 "Data loaded!"

 

10. 맵(Map)과 셋(Set)

새로운 자료 구조를 지원합니다.

// Map
const map = new Map();
map.set("key", "value");
console.log(map.get("key")); // "value"

// Set
const set = new Set([1, 2, 3, 3]);
console.log(set); // Set(3) { 1, 2, 3 }

 

11. for...of 루프

이터러블 객체(배열 등)를 순회하기 위한 새로운 루프.

const array = [10, 20, 30];
for (const value of array) {
  console.log(value); // 10, 20, 30
}

 

 

12. 심볼(Symbol)

고유한 식별자를 생성할 때 사용.

const sym = Symbol("unique");
console.log(sym); // Symbol(unique)

 

13. Rest 파라미터(Rest Parameters)

함수 호출 시 전달되는 나머지 매개변수를 배열로 모아 처리할 수 있습니다.

const sum = (...numbers) => {
  return numbers.reduce((total, num) => total + num, 0);
};

console.log(sum(1, 2, 3, 4)); // 10

 

14. Symbol.iterator와 이터러블(Iterables)

객체를 이터러블로 만들어 for...of 문이나 spread 문법에서 사용할 수 있습니다.

const iterable = {
  *[Symbol.iterator]() {
    yield 1;
    yield 2;
    yield 3;
  }
};

for (const value of iterable) {
  console.log(value); // 1, 2, 3
}

 

15. Object.assign

객체를 복사하거나 병합할 때 사용됩니다.

const target = { a: 1 };
const source = { b: 2, c: 3 };

const merged = Object.assign({}, target, source);
console.log(merged); // { a: 1, b: 2, c: 3 }

 

16. Object.entries와 Object.values

객체의 키와 값을 배열 형태로 반환합니다.

const obj = { a: 1, b: 2 };

// Object.entries
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value); // "a 1", "b 2"
}

// Object.values
console.log(Object.values(obj)); // [1, 2]

 

17. includes 메서드

배열이나 문자열에 특정 값이 포함되어 있는지 확인합니다.

const fruits = ["apple", "banana", "cherry"];
console.log(fruits.includes("banana")); // true

const sentence = "Hello, world!";
console.log(sentence.includes("world")); // true

 

18. find와 findIndex

배열에서 조건에 맞는 첫 번째 요소나 그 인덱스를 반환합니다.

const numbers = [10, 20, 30, 40];

// find
const found = numbers.find(num => num > 25);
console.log(found); // 30

// findIndex
const index = numbers.findIndex(num => num > 25);
console.log(index); // 2

 

19. Promise.all과 Promise.race

복수의 프로미스를 동시에 처리합니다.

const p1 = new Promise(resolve => setTimeout(() => resolve("P1"), 1000));
const p2 = new Promise(resolve => setTimeout(() => resolve("P2"), 2000));

// Promise.all
Promise.all([p1, p2]).then(results => console.log(results)); // ["P1", "P2"]

// Promise.race
Promise.race([p1, p2]).then(result => console.log(result)); // "P1"

 

 

20. Default Import와 Named Import

ES6 모듈에서 다양한 방식으로 코드를 가져옵니다.

// module.js
export const greet = name => `Hello, ${name}!`;
export default name => `Hi, ${name}!`;

// main.js
import defaultGreet, { greet } from "./module.js";

console.log(defaultGreet("Alice")); // "Hi, Alice!"
console.log(greet("Bob"));         // "Hello, Bob!"

 

21. 태스크 큐와 마이크로태스크 큐(Task Queue & Microtask Queue)

Promise와 setTimeout의 실행 순서를 이해할 수 있는 개념입니다.

console.log("Start");

setTimeout(() => console.log("Timeout"), 0);
Promise.resolve().then(() => console.log("Promise"));

console.log("End");

// 출력 순서:
// Start
// End
// Promise
// Timeout

 

22. SetTimeout과 SetInterval에 화살표 함수 사용

화살표 함수는 this를 고정해 주므로 setTimeout 등에서 유용합니다.

class Timer {
  start() {
    this.seconds = 0;
    setInterval(() => {
      this.seconds++;
      console.log(this.seconds);
    }, 1000);
  }
}

const timer = new Timer();
timer.start();

 

23. Class와 Static 메서드

클래스에서 인스턴스 생성 없이 호출할 수 있는 메서드를 정의할 수 있습니다.

class MathUtils {
  static add(a, b) {
    return a + b;
  }
}

console.log(MathUtils.add(5, 3)); // 8

 

24. 다중 객체 병합과 스프레드

ES6의 스프레드 연산자를 활용한 다중 병합이 가능합니다.

const defaultConfig = { theme: "light", fontSize: 14 };
const userConfig = { fontSize: 16, language: "en" };
const finalConfig = { ...defaultConfig, ...userConfig };

console.log(finalConfig); // { theme: "light", fontSize: 16, language: "en" }

 

25. 지연 평가(Lazy Evaluation)

generator를 사용해 필요한 데이터만 계산하도록 구현 가능합니다.

function* generateSequence() {
  yield 1;
  yield 2;
  yield 3;
}

const generator = generateSequence();
console.log(generator.next().value); // 1
console.log(generator.next().value); // 2