[Frontend] ES6 문법에 대해

들어가며

ES6는 JavaScript 언어의 6번째 버전으로, 2015년에 발표되었습니다. 공식 명칭은 ECMAScript 2015이며, 이후 자바스크립트의 발전에 큰 영향을 준 기념비적인 업데이트입니다.

ES6는 코드의 가독성과 유지보수성을 높이고, 객체지향 및 비동기 처리 등 다양한 현대 웹 애플리케이션의 요구사항을 반영한 기능들을 다수 도입했습니다.

목차

1. let, const 키워드
2. 화살표 함수 (Arrow Function)
3. 클래스 문법
4. 템플릿 리터럴
5. 구조 분해 할당 (Destructuring)
6. Spread & Rest 연산자
7. Promise
8. ES6 이전 문법도 알아야 할까?
9. 참고 자료

1. let, const 키워드

ES6 이전에는 변수 선언 시 var만 사용할 수 있었습니다. 하지만 var는 함수 스코프(function scope)만 가지고 있어 예기치 못한 버그를 일으키는 경우가 많았습니다.

ES6에서는 let과 const가 추가되어 블록 스코프(block scope)를 지원합니다.

주요 특징

• let: 재할당 가능, 중복 선언 불가
• const: 재할당 불가, 상수 선언에 사용

// var는 중복 선언 가능
var x = 1;
var x = 2; // 에러 아님

// let은 중복 선언 불가능
let y = 1;
// let y = 2; // SyntaxError 발생

// const는 재할당 불가능
const z = 3;
// z = 4; // TypeError 발생

if (true) {
  let a = 10;
  const b = 20;
  var c = 30;
}

console.log(c); // 30
// console.log(a); // ReferenceError
// console.log(b); // ReferenceError

2. 화살표 함수 (Arrow Function)

기존 함수 선언보다 간결하고, this 바인딩 방식이 다릅니다.

// 기존 함수
function sum(a, b) {
  return a + b;
}

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

// this 바인딩 비교
function Counter() {
  this.num = 0;
  setInterval(function () {
    this.num++; // ❌ this는 window를 참조
  }, 1000);
}

// Arrow Function 사용
function SafeCounter() {
  this.num = 0;
  setInterval(() => {
    this.num++; // ✅ this는 SafeCounter 인스턴스를 참조
  }, 1000);
}

3. 클래스 문법

ES6에서 class 키워드를 통해 객체지향 프로그래밍(OOP) 문법을 지원하게 되었습니다.

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

  greet() {
    console.log(`안녕하세요, 저는 ${this.name}입니다.`);
  }
}

const me = new Person('정우');
me.greet(); // 안녕하세요, 저는 정우입니다.

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

백틱(`)을 사용해 문자열 안에 변수나 표현식을 간편하게 삽입할 수 있습니다.

const name = '정우';
const age = 28;

console.log(`제 이름은 ${name}이고, 나이는 ${age}살입니다.`);
// 제 이름은 정우이고, 나이는 28살입니다.

5. 구조 분해 할당 (Destructuring)

배열이나 객체에서 값을 손쉽게 추출할 수 있는 문법입니다.

배열 구조 분해

const [first, second] = [1, 2];
console.log(first);  // 1
console.log(second); // 2

객체 구조 분해

const user = {
  name: '정우',
  age: 28,
};

const { name, age } = user;
console.log(name); // 정우
console.log(age);  // 28

6. Spread & Rest 연산자

Spread 연산자 (…)

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

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

const user = { name: '정우' };
const newUser = { ...user, age: 28 };

Rest 연산자 (…)

함수 인자나 구조 분해 시 나머지를 묶을 때 사용됩니다.

function sum(...numbers) {
  return numbers.reduce((acc, cur) => acc + cur, 0);
}

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

7. Promise

비동기 처리를 위한 새로운 문법입니다. 콜백 지옥을 줄이고, 비동기 흐름을 보다 직관적으로 표현할 수 있게 해줍니다.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('데이터 수신 완료');
    }, 1000);
  });
}

fetchData().then((data) => {
  console.log(data); // 데이터 수신 완료
});

8. ES6 이전 문법도 알아야 할까? 🤔

답은 YES입니다! 그 이유는 다음과 같습니다:

1. 레거시 코드의 존재
   • 많은 기존 코드와 라이브러리들은 여전히 ES5 문법을 기반으로 작성되어 있습니다.
   • 이를 이해하지 못하면 유지보수나 디버깅이 어렵습니다.
2. 혼합 문법의 가능성
   • 대규모 프로젝트에서는 ES6와 이전 문법이 혼재되어 있을 수 있습니다.
   • 마이그레이션 중에는 특히 이런 상황이 자주 발생합니다.
3. 트랜스파일링 & 폴리필
   • 구형 브라우저 호환을 위해 Babel 등으로 ES6 코드를 ES5로 변환해야 할 때,
   • 변환되는 코드를 이해하려면 기존 문법에 대한 이해가 필요합니다.

9. 참고 자료

• MDN Web Docs - ECMAScript 2015
• ECMAScript 공식 사양
• You Don’t Know JS (book series)

자바스크립트를 더 깊이 이해하고 싶다면, ES6는 꼭 알아야 할 기본입니다.