ECMAScript 2022 살펴보기

class OldClass {
  constructor() {
    // 기존에는 생성자 내부에 this 를 사용하여 퍼블릭 필드를 설정했다.
    this.publicField = 0;

    // 기존에는 프라이빗 필드를 자체를 언어에서 지원하지 않았다.
    // 변수 명 앞에 언더스코어를 붙이는 관행이 있었지만 실제로는 퍼블릭하게 접근 가능하다.
    this._privateField = '비밀?';
  }

  // 메서드는 클래스 바디에서 선언한다.
  publicMethod() {}

  // 프라이빗 메서드...로 선언한 것 같지만 실제로는 퍼블릭 메서드다.
  _privateMethod() {}
}

// 원래 정적 필드와 메서드는 이렇게 클래스 외부에서 설정해야 했다.
OldClass.staticField = '정적 필드';
OldClass.staticMethod = function () {};

class NewClass {
  // 새로 추가된 문법에서는 클래스 내부에 바로 퍼블릭 필드를 선언할 수 있다.
  publicField = 0;
  publicMethod() {}

  // 새로 추가된 문법에서는 언어 자체에서 프라이빗을 지원한다.
  // 변수, 메서드 이름 앞에 해시(#)를 붙이면 된다.
  #privateField = '비밀!';
  #privateMethod() {}

  // getter와 setter도 프라이빗하게 만들 수 있다.
  get #privateGetter() {}
  set #privateSetter(value) {}

  // 정적 필드도 클래스 바디 안에 작성할 수 있다.
  static staticField = '정적 필드';
  static staticMethod() {}

  // 위의 것들을 막 조합할 수도 있다.
  static #staticPrivateField = '정적 프라이빗 필드!';
  static #staticPrivateMethod() {}
  static get #staticPrivateGetter() {}
  static set #staticPrivateSetter(value) {}

  // 정적 초기화 블록을 선언할 수 있다.
  static {
    console.log('정적 초기화 블록에서 딱 한 번만 실행됨');

    window.getPrivateField = (myClass) => myClass.#privateField;
  }
}

class OldClass {
  #field;

  // 프라이빗 필드에 접근하려 할 때 예외가 발생하는 것을 이용해야 한다.
  static isMyField(myClass) {
    try {
      myClass.#field;
      return true;
    } catch {
      return false;
    }
  }
}

class NewClass {
  #field;

  static isMyField(myClass) {
    // `in` 연산자를 쓰면 편-안.
    return #field in myClass;
  }
}

/(a+)(b+)/d.exec('aaaabb');
// ['aaaabb', 'aaa', 'bb', indices: [[0, 6], [0, 4], [4, 6]]]
// indices의 첫 번째 배열은 전체 문자열에 대한 시작, 종료 인덱스
// 두 번째와 세 번째 배열은 괄호로 묶여진 각 캡처링 그룹(괄호)의 시작, 종료 인덱스

// 우선 모듈 내에서만 동작하기 때문에 확장자는 `*.mjs` 형태여야 한다.

let result;
// 기존에는 비동기 함수를 쓰려면 이렇게 async 함수 자체를 선언해 호출하거나
async function getUser() {
  const response = await fetch('http://example.com/foo.json');
  result = await response.json();
}
getUser();
export { result };

// 즉시 실행 함수를 호출해야 했다.
(async () => {
  await getUser();
})();
export { result };

// 하지만 위의 두 경우 모두 `result` 를 호출하는 쪽에서 값이 초기화 되기 전에 조회하면
// `undefined` 가 뜰 수도 있다. 즉, 기존 문법으로는 값의 초기화 전에 변수 접근이 가능하다.

// 새 문법으로 바꿔서 써보자.

// module.mjs
// 우선 async 함수로 감싸지 않아도 된다.
// 비동기 로직 자체를 모듈 내에서 모두 처리하여 결과만 내보낸다고 생각하자.

const response = await fetch('http://example.com/foo.json');
export const result = await response.json();

// another.mjs
// 이 모듈을 불러오는 쪽에서는 이렇게 쓴다.
import { result } from './module.mjs';

const messages = result;
console.log(messages);

// 위 코드는 실제로 아래와 동등하게 실행된다.

// module.mjs
export let result;
export const promise = (async () => {
  const response = await fetch('http://example.com/foo.json');
  result = await response.json();
})();

// another.mjs
import { promise as promiseResult, result } from './module.mjs';
export const promise = (async () => {
  // 모듈을 호출하는 쪽에서 비동기 코드를 `Promise.all()` 로 묶음으로서
  // 이후의 로직이 실행되지 않게 한다.
  await Promise.all([promiseResult]);

  const messages = result;
  console.log(messages);
})();

// 동적 호출 가능
const strings = await import(`/i18n/${navigator.language}`);

// 의존성 폴백 관리
let jQuery;
try {
  jQuery = await import('https://cdn-a.com/jQuery');
} catch {
  jQuery = await import('https://cdn-b.com/jQuery');
}

const arr = [1, 2, 3];

// JavaScript에서 배열은 객체다.
typeof arr === 'object'; // true

//  `-1` 이라는 키를 가진 값을 찾으려 하기 때문
arr[-1]; // undefined

// 기존 문법으로 마지막 인덱스의 값을 가져오려면 이렇게 해야 했지만
arr[arr.length - 1]; // 3

// 이렇게 하면 훨씬 간편하다.
arr.at(-1); // 3

// 기존에는 이런 방법을 주로 활용했다.
let hasOwnProperty = Object.prototype.hasOwnProperty;
hasOwnProperty.call(object, 'foo');

// 이렇게 굳이 메서드를 다시 꺼내고 변수에 저장해 쓴 이유는...
// 프로토타입이 끊기면 메서드를 사용할 수 없었기 때문
Object.create(null).hasOwnProperty('someProp'); // error
// Uncaught TypeError: Object.create(...).hasOwnProperty is not a function

const proto = {
  protoProp: '프로토타입 속성',
};
const object = {
  __proto__: proto,
  objProp: '객체 속성',
};

// in 연산자는 객체의 속성에 해당 값이 있는지를 반환한다
console.log('protoProp' in object); // true

// hasOwn 메서드는 프로토타입 상속이 아닌 객체 고유의 속성인지를 반환한다
console.log(Object.hasOwn(object, 'protoProp')); // false
console.log(Object.hasOwn(proto, 'protoProp')); // true

function job1() {
  try {
    job2();
  } catch (e) {
    console.log(e);
    // Error: job2 Error
    throw new Error('job1 Error', { cause: e });
  }
}

function job2() {
  throw new Error('job2 Error');
}

try {
  job1();
} catch (e) {
  console.log(e);
  // Error: job1 Error

  console.log(e.cause);
  // Error: job2 Error
}