[JavaScript 문법] 35일차: 모던 JavaScript 문법

ES2020 주요 기능

ES2020(ECMAScript 2020)은 JavaScript 언어 사양의 최신 업데이트 중 하나로, 몇 가지 중요한 기능이 추가되었습니다.

Nullish Coalescing Operator (??)

Nullish 병합 연산자는 null 또는 undefined인 경우에만 기본값을 반환합니다.

예제

let value = null;
let defaultValue = value ?? 'default';
console.log(defaultValue); // 'default'

value = 'Hello';
defaultValue = value ?? 'default';
console.log(defaultValue); // 'Hello'

Optional Chaining (?.)

옵셔널 체이닝은 존재하지 않을 수 있는 중첩된 객체 속성을 안전하게 접근할 수 있게 해줍니다.

예제

let user = {
  profile: {
    name: 'John'
  }
};

let userName = user?.profile?.name;
console.log(userName); // 'John'

let userAge = user?.profile?.age;
console.log(userAge); // undefined

BigInt

BigInt는 매우 큰 정수를 처리할 수 있는 새로운 원시 데이터 타입입니다.

예제

let bigInt = 1234567890123456789012345678901234567890n;
console.log(bigInt); // 1234567890123456789012345678901234567890n

let sum = bigInt + 10n;
console.log(sum); // 1234567890123456789012345678901234567900n

Dynamic Import

동적 임포트는 모듈을 비동기로 로드할 수 있는 기능을 제공합니다.

예제

document.getElementById('loadButton').addEventListener('click', () => {
  import('./module.js').then(module => {
    module.loadFunction();
  });
});

Promise.allSettled

Promise.allSettled는 모든 프로미스가 처리될 때까지 기다린 후 각각의 결과를 배열로 반환합니다.

예제

let promises = [
  Promise.resolve('Success'),
  Promise.reject('Error'),
  Promise.resolve('Another success')
];

Promise.allSettled(promises).then(results => {
  results.forEach(result => {
    if (result.status === 'fulfilled') {
      console.log('Fulfilled:', result.value);
    } else {
      console.error('Rejected:', result.reason);
    }
  });
});
// 출력:
// Fulfilled: Success
// Rejected: Error
// Fulfilled: Another success

ES2021 주요 기능

ES2021(ECMAScript 2021)은 JavaScript 언어 사양의 또 다른 업데이트로, 몇 가지 새로운 기능이 추가되었습니다.

Logical Assignment Operators

논리 할당 연산자는 기존 논리 연산자와 할당을 결합한 연산자입니다.

예제

let a = true;
let b = false;

a ||= b;
console.log(a); // true

a &&= b;
console.log(a); // false

let c = null;
c ??= 'default';
console.log(c); // 'default'

String.prototype.replaceAll

replaceAll 메서드는 문자열 내의 모든 일치 항목을 대체합니다.

예제

let str = 'The quick brown fox jumps over the lazy dog. The fox is quick.';
let newStr = str.replaceAll('fox', 'cat');
console.log(newStr); // 'The quick brown cat jumps over the lazy dog. The cat is quick.'

WeakRefs

WeakRef 객체는 가비지 컬렉션의 대상이 되는 객체에 대한 약한 참조를 생성합니다. 이는 메모리 누수를 방지하는 데 유용합니다.

예제

let obj = { name: 'John' };
let weakRef = new WeakRef(obj);

console.log(weakRef.deref()); // { name: 'John' }

// obj가 가비지 컬렉션에 의해 제거되면 weakRef도 무효화됩니다.
obj = null;

console.log(weakRef.deref()); // undefined

Logical Nullish Assignment

논리 Nullish 할당 연산자는 값이 null 또는 undefined일 때만 할당합니다.

예제

let a = null;
a ??= 'default';
console.log(a); // 'default'

let b = 'already set';
b ??= 'default';
console.log(b); // 'already set'

결론

모던 JavaScript 문법은 개발자의 삶을 편하게 해주는 많은 유용한 기능을 제공합니다. 이번 글에서는 ES2020과 ES2021의 주요 기능인 Nullish Coalescing Operator, Optional Chaining, BigInt, Dynamic Import, Promise.allSettled, Logical Assignment Operators, String.prototype.replaceAll, WeakRefs에 대해 배웠습니다. 다음 글에서는 DOM(Document Object Model) 소개에 대해 알아보겠습니다.

다음 글에서 만나요!