[JavaScript] ES6 이후의 주요 문법 변화 (2)

1. 클래스(Class)

ES6에서 도입된 클래스는 객체지향 프로그래밍(OOP)을 지원하기 위해 추가된 문법이다. 기존의 프로토타입 기반 객체 생성 방식보다 직관적이고 선언적인 코드를 작성할 수 있다.

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

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

const person = new Person("홍길동", 30);
person.greet(); // 안녕하세요, 저는 홍길동이고, 나이는 30살입니다.

 

개인적으로 클래스 문법이 도입되면서 객체 생성과 상속 구현이 훨씬 쉬워졌다. 특히 extends 키워드를 사용해 상속을 구현할 때 코드가 간결해졌다는 점이 인상적이다.

 

2. 프로미스(Promise)와 async/await

비동기 작업을 처리하기 위한 Promise는 ES6에서 도입되었고, 이후 async/await 키워드가 ES2017에 추가되었다. 이로 인해 콜백 지옥(Callback hell) 문제를 해결하고 비동기 코드를 동기 코드처럼 작성할 수 있게 되었다.

Promise 예제

const fetchData = () => {
  return new Promise((resolve, reject) => {
    const success = true;
    if (success) {
      resolve("데이터 가져오기 성공");
    } else {
      reject("데이터 가져오기 실패");
    }
  });
};

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

 

async/await 예제

const fetchDataAsync = async () => {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
};

fetchDataAsync();

 

실무에서 async/await를 처음 접했을 때, 비동기 코드 처리 시 가독성이 크게 향상된 것을 체감했다.
특히 API 호출이나 파일 읽기 같은 작업에서 디버깅이 훨씬 쉬워졌다.

 

3. 전개 연산자(Spread Operator)

전개 연산자(...)는 배열이나 객체를 쉽게 복사하거나 병합할 수 있도록 도와준다. ES6에서 도입된 이 기능은 데이터 구조를 다룰 때 매우 유용하다.

배열 복사 및 병합

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]

 

객체 병합

const obj1 = { name: "홍길동" };
const obj2 = { age: 30 };
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // { name: "홍길동", age: 30 }

 

전개 연산자를 활용하면 기존 데이터를 안전하게 복사하면서 새로운 데이터를 추가할 수 있어 불변성을 유지하는 데 큰 도움이 된다.

 

4. Symbol

Symbol은 고유한 값으로 객체의 속성 키를 생성할 때 사용된다. 이는 다른 코드나 라이브러리와 충돌하지 않는 고유한 식별자를 제공한다.

const uniqueKey = Symbol("key");
const obj = {
  [uniqueKey]: "값",
};

console.log(obj[uniqueKey]); // 값

 

5. Optional Chaining

ES2020에서 추가된 Optional Chaining은 객체 속성에 접근할 때 중첩된 값이 undefined나 null일 경우 에러를 방지한다.

const user = { profile: { name: "홍길동" } };
console.log(user.profile?.name); // 홍길동
console.log(user.address?.city); // undefined

 

Optional Chaining은 특히 API 응답 데이터를 다룰 때 유용하다. 실무에서는 종종 데이터 구조가 예상과 다를 때가 있는데, 이 기능 덕분에 방어코드의 라인 수를 줄일 수 있었다.

 

6. Nullish Coalescing Operator(??)

ES2020에서 도입된 Nullish 병합 연산자(??)는 값이 null 또는 undefined일 때만 기본값을 설정한다.

const value = null;
const defaultValue = value ?? "기본값";
console.log(defaultValue); // 기본값

 

이는 OR 연산자(||)와 비슷하지만, false, 0, 빈 문자열 같은 값은 기본값으로 처리하지 않는다는 점에서 차별화된다.

 

7. String.prototype.replaceAll(): 문자열 치환 강화

ES2021에서 추가된 replaceAll() 메서드는 문자열 내 모든 일치 항목을 한 번에 대체한다.

const text = "안녕하세요. 안녕!";
console.log(text.replaceAll("안녕", "Hello")); // Hello하세요. Hello!

 

이전에는 정규식을 사용해야 했던 작업을 간단히 처리할 수 있어 문자열 조작이 훨씬 편리해졌다.