2026-02-12

ES6

ES6란?

JavaScript의 2015년 표준(ECMAScript 2015)으로,

기존 문법의 한계를 보완하고 가독성·유지보수성·안정성을 크게 개선한 버전이다.

• 브라우저 호환 문제로 Babel과 함께 사용됨
• 현재 프론트엔드 개발의 사실상 기본 문법

ES6가 나온 이유

• 기존 JS 문법의 불편함
  • var의 스코프 문제
  • 콜백 지옥
  • 클래스/모듈 부재
• 대규모 애플리케이션 개발 요구 증가

let / const

let a = 1;
const b = 2;

• var는 사용 지양
• 기본은 const, 필요 시 let

화살표 함수 (Arrow Function)

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

• this를 바인딩하지 않음 (상위 스코프 참조)
• 콜백 함수에서 자주 사용

function foo() {
  this.value = 1;
  setTimeout(() => {
    console.log(this.value); // 1
  }, 1000);
}

템플릿 리터럴

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

• 문자열 + 변수 가독성 향상
• 여러 줄 문자열 가능

구조 분해 할당 (Destructuring)

const { id, name } = user;
const [a, b] = arr;

• 객체/배열 값 추출 간결화
• React props에서 자주 사용

스프레드 연산자 (...)

const newArr = [...arr, 4];
const newObj = { ...obj, age: 20 };

• 얕은 복사
• 불변성 유지에 필수

기본 매개변수 (Default Parameter)

function greet(name = "Guest") {
  return name;
}

클래스 (Class)

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

• 기존 prototype 기반 문법의 문법적 설탕
• React class 컴포넌트에서 사용됨

모듈 시스템 (import / export)

export default function add() {}
import add from "./add";

• 코드 분리
• 유지보수성 향상

ES6와 비동기 처리

ES6 자체에는 async/await는 없음 (ES2017)

하지만 Promise는 ES6

fetch(url)
  .then((res) => res.json())
  .then((data) => console.log(data));

ES6의 장점

• 코드 가독성 향상
• 안전한 변수 관리 (let, const)
• 함수 표현 간결화
• 모듈화 가능
• 대규모 개발에 적합

참고자료

• https://velog.io/@kim_unknown_/JavaScript-ES6
• https://velog.io/@kimhscom/JavaScript-%EC%9E%90%EC%A3%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-ES6-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC