2022년의 자바스크립트는?

Urther·2022년 3월 7일
0

JavaScript

목록 보기
7/8

지난번 2022년을 맞이하여 Ecmascript2021년 버전을 보았다.
⏤ 그동안 JS 기존 문법을 배우느라 급급하여 22년도였지만 21년 버전도 처음 보는 내용이었다...

ECMASCRIPT 2021 버전 요약본 : 2020년 이후, 자바스크립트는 어떤 것이 변경되었을까

요약본에 자바스크립트 종말론을 보고 꿈에서도 자바스크립트가 없어지는 꿈을 꾸었다 .. 악몽 .. 아직 13년정도 남았으니까 자바스크립트 명세를 열심히 보기로 한다.

📄 ECMASCRIPT 2022는?

ECMASCRIPT 2022는 아직 릴리즈 되지 않았지만
TC39 finished-proposal 에서 예상되는 최신 명세를 볼 수 있다.

TC39 discourse 에서 자바스크립트를 사용하는 모든 사람들이 명세에 대한 제안과 질문을 할 수 있다.
나도.. 자바스크립트 언어를 다지는 contributor가 될 수 있는 기회 ?!

보글보글 김칫국

1. Class Field

private, static 사용 - class 상세 명세

22 이전 class 문법은 명시적으로 public이라고 선언되지 않았지만 모든 멤버 변수가 public 했다.. ( java를 쓰는 친구는 자바스크립트가 class에 protected, static이 없는 해괴망측한 언어라고 표현했다. 🥲 )


클래스 멤버 변수 선언시 constructor 내에서 선언했다.

이제 우리도. private 이용이 가능하다.

  • constructor 내에서 선언해주는 것이 아닌, body 최상단에 private는 # 을 붙여서 사용하게끔 해준다!
class B {
  #hidden = 0;
  m() {
    return this.#hidden;
  }
}
  • static으로 프로퍼티 지정도 가능해졌습니다 !

우리도 이제 명시적으로 캡슐화가 가능한 놈들이다.

Top level , await - top level await 상세 명세

그냥 level 도 아니고 top level... ! !

async function hello() {
  return greeting = await Promise.resolve("Hello");
};

hello().then(alert);

원래 async 함수와 await을 짝꿍이었습니다. await 을 쓰기 위해서는 async 함수 내에서 사용할 수 있었는데 이제 await 을 최상단에서 사용할 수 있게 되었습니다.

import { process } from "./some-module.mjs";
const dynamic = import(computedModuleSpecifier);
const data = fetch(url);
export const output = process((await dynamic).default, await data);

이렇게 async 없이도 await 를 쓸 수 있게 되었답니다.

3. Object.hasOwn() 으로

let hasOwnProperty = Object.prototype.hasOwnProperty

if (hasOwnProperty.call(object, "foo")) {
  console.log("has property foo")
}

이렇게 .. 길던 코드를

if (Object.hasOwn(object, "foo")) {
  console.log("has property foo")
}

이렇게 짧게 쓸 수 있도록 하여 접근성을 개선하였습니다.

Object.prototype.hasOwnProperty 의 쓰임새 .. (?)

const object1 = {};
object1.property1 = 42;
console.log(object1.hasOwnProperty('property1'));
// expected output: true

단어 그대로 객체 내에 프로퍼티가 있는지 true/false 로 리턴해줍니다.

4.Error cause

원래 stage 3에 있다가 4로 올라온 아이입니다.


try {
  await doJob();
} catch (e) {
  console.log(e);
  console.log('Caused by', e.cause);
}
// Caused by TypeError: Failed to fetch

catch(e){} 에서 console.log(e) 를 하게 되면 에러의 종류가 나왔는데 이제 에러의 이유가 같이 출력될 수 있게끔 도와줍니다. 에러를 조금 더 상세하게 볼 수 있을 것 같습니다 💪🏻

5. at()

아직 호환되지 못하는 웹이 많을 수 있다.

우리는, arr=[0,1,2,3,4] 라는 배열이 있을 때 4라는 값에 접근하고 싶다면 index 값이 4라는 것을 알고 arr[4] 를 통해 접근할 수 있다. 그러나, 마지막 index 값을 알지 못한다면 어떻게 될까?

아마, arr[arr.length-1] 로 접근을 해야할 것이다. 왜 arr[-1] 로 접근할 수 없을까? 라는 질문에서 부터 시작된 명세이다. 이제는 String과 Array의 .at() 메서드를 통해 음수 인덱스에 접근이 가능해진다.

	const arr=[0,1,2,3,4];
	arr[-1] // index 음수는 없으니까 undefined
	arr.at(-1) // 4

아직 한글로 해석되어 있는 곳이 많지 않고 명세 설명이 길다보니 영어가 지렁이처럼 꿀렁거린다.

profile
이전해요 ☘️ https://mei-zy.tistory.com

0개의 댓글