ES2015+ 핵심 문법 (ES6 and Beyond)

ES2015(ES6)는 2015년에 확정된 ECMAScript 표준으로, let과 const, 화살표 함수(Arrow Function), 클래스(Class), 템플릿 리터럴, 구조 분해 할당, 프로미스(Promise), 모듈(Module) 등 현대 JavaScript의 근간이 되는 문법을 한꺼번에 도입한 대규모 개정판이다. 이후 ECMAScript는 매년 새 판을 발표하는 체제로 바뀌었고, async와 await, 옵셔널 체이닝 같은 기능이 순차적으로 추가되어 오늘날의 JavaScript를 이루고 있다.

let, const와 블록 스코프

ES2015 이전의 var는 함수 스코프만 가지며, 선언 전에 접근해도 undefined가 나오는 호이스팅(Hoisting) 동작 때문에 버그의 원인이 되곤 했다. let과 const는 블록 스코프를 가지며, 선언 전에 접근하면 일시적 사각지대(Temporal Dead Zone) 때문에 참조 오류가 발생하므로 실수를 조기에 드러낸다. const는 재할당을 금지할 뿐 객체 내부의 변경까지 막지는 않는다는 점에 주의해야 한다.

구분	var	let	const
스코프	함수 스코프	블록 스코프	블록 스코프
재선언	허용	불가	불가
재할당	허용	허용	불가
선언 전 접근	undefined 반환	참조 오류	참조 오류

화살표 함수와 this

화살표 함수는 function 키워드보다 간결할 뿐 아니라 this 바인딩 규칙이 다르다. 일반 함수의 this는 호출 방식에 따라 동적으로 결정되지만, 화살표 함수는 자신만의 this를 만들지 않고 선언된 위치의 상위 스코프 this를 그대로 사용한다. 그래서 콜백 안에서 바깥의 this를 유지하고 싶을 때 유용하다. 반대로 자신만의 this가 필요한 객체의 메서드나 생성자로는 적합하지 않으며, arguments 객체도 갖지 않는다.

class Timer {
  constructor() {
    this.seconds = 0;
    setInterval(() => {
      this.seconds += 1; // 상위 스코프의 this를 그대로 사용
    }, 1000);
  }
}

구조 분해, 스프레드, 템플릿 리터럴

구조 분해 할당(Destructuring Assignment)은 배열이나 객체에서 필요한 값을 변수로 바로 꺼내는 문법이고, 스프레드(Spread) 문법은 반복 가능한 값을 펼쳐서 복사하거나 합치는 문법이다. 템플릿 리터럴(Template Literal)은 백틱으로 감싼 문자열 안에 표현식을 삽입하고 여러 줄 문자열을 쉽게 만들 수 있게 한다. 세 가지 모두 실무 코드의 가독성을 크게 끌어올렸다.

const user = { name: "민수", age: 27, city: "서울" };
const { name, age = 20 } = user;      // 객체 구조 분해와 기본값
const [first, ...rest] = [1, 2, 3];   // 배열 구조 분해와 나머지

const copied = { ...user, age: 28 };  // 얕은 복사 후 일부 갱신
const greeting = `안녕하세요, ${name}님`; // 템플릿 리터럴

스프레드로 만드는 복사는 얕은 복사(Shallow Copy)라서 중첩 객체는 여전히 참조를 공유한다는 점을 기억해야 한다.

async function loadUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new Error("요청 실패");
    return await res.json();
  } catch (err) {
    console.error(err);
    return null;
  }
}