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
}