새로 추가된 Javascript 기능[es13]

새롭게 추가된 기능

1. Top-level Await Operator

• 이전에는 비동기 함수 외부에서 await 키워드를 선언할 수 없어 오류가 발생했는데, 이제는 비동기 함수 및 클래스 외부에서 await 연산자를 선언하여 동기화 문제를 해결할 수 있다.

(async function () {
  await startServer();
})();

-------------------------------
await startServer();

2. Error Cause

• 오류의 인과관계를 기록하는데 사용하는 Error 객체 속성을 추가할 수 있게 되었다.

new Error('New error message');

-------------------------------
new Error('New error message', { cause : "승인되지 않았습니다." });
new Error('New error message', { cause : "데이터가 없습니다." });
new Error('New error message', { cause : "데이터베이스가 가득 찼습니다." });

3. Method .at() function for Indexing 📎

• .at() 키워드 추가 : at() 함수를 사용하여 양수 및 음수 인덱스를 모두 사용하여 문자열을 인덱싱할 수 있다.

• 맨 마지막 요소를 가져오고 싶을 때 length 속성을 사용해 array[array.length - 1]을 하는 대신, 짧게 array.at(-1)을 사용할 수 있다.

const array= [1,2,3,4];
array.at(2); //이전 : array[2];
array.at(0); // 1
array.at(-1); // 4

4. Object.prototype.hasOwnProperty() 📎

• Object.prototype.hasOwnProperty의 대안으로 추가, hasOwn() 추가

• Object.hasOwnProperty는 Object를 첫 번째 인수로, 확인하려는 속성을 두 번째 인수로 사용합니다.

• hasOwnProperty() 메소드는 객체가 특정 프로퍼티를 가지고 있는지를 나타내는 불리언 값을 반환한다.

const obj = Object.create(null);
obj.color = 'green';
obj.age = 2;
obj.hasOwnProperty = () => false;

console.log(Object.hasOwn(obj, 'color')); // true
console.log(Object.hasOwn(obj, 'name')); // false

// 객체와 속성이 인수로, 지정된 속성이 객체의 직접속성이면 true, 아니면 false.

5. Class field declarations

• 처음에는 생성자 내에서만 클래스 필드를 선언할 수 있었지만 이제는 4단계의 제안을 사용하여 생성자를 호출할 필요없이 클래스 자체에서 선언할 수 있다.

class Car {
  constructor() {
    this.color = 'blue';
    this.age = 2;
  }
}

const car = new Car();
console.log(car.color); // blue
console.log(car.age); // 2


// ES13 이전에는 클래스 필드를 생성자에서만 선언할 수 있었고, 클래스의 가장 바깥쪽 범위에서 선언하거나 정의할 수 없다.
--------------------------------

class Car {
  color = 'blue';
  age = 2;
}

const car = new Car();
console.log(car.color); // blue
console.log(car.age); // 2

//ES13은 이 제한을 제거한다.

6. Ergonomic Brand Checks for Private Fields 📎

• in연산자를 사용하여 개체에 특정 개인 필드가 있는지 확인할 수 있다.

class Car {
  #color;

  hasColor() {
    return #color in this;
  }
}

const car = new Car();
console.log(car.hasColor()); // true;