【JavaScript】State of JS 2022 - 言語仕様

State of JS の2022年版が今年もでたので知らなかったこと曖昧だったことをピックアップしてみた

2021.stateofjs.com

Proxy

Proxy - JavaScript | MDN

いきなり知らなかった

このProxyオブジェクトを使用すると、元のオブジェクトがもつプロパティの取得、設定、定義などの基本的な操作をインターセプトして再定義できる

ユースケースとして、例えばプロパティアクセスのログ記録、入力の検証、フォーマット、サニタイズなどに使用される

こんな感じで使う

const target = {
  message1: "hello",
  message2: "everyone"
};

const handler2 = {
  get(target, prop, receiver) {
    return "world";
  }
};

const proxy2 = new Proxy(target, handler2);
console.log(proxy2.message1); // world
console.log(proxy2.message2); // world

Optional chaining (?.)

nullやundefinedアクセスでエラーになって処理が中断してしまうのを回避することができる

Optional chaining (?.) - JavaScript | MDN

これまでは以下のような三項演算子や&&によってnullやundefinedのアクセスエラーを回避してきたが

let user = {};
alert(user.address ? user.address.street ? user.address.street.name : null : null);
alert(user && user.address && user.address.street);

オプショナルチェイニングによって以下のようにスッキリ書くことができいる

alert( user?.address?.street );  // undefined

ただ、エラーにすべきものの情報を握り潰してしまわぬよう、用法用量を守って使うべき

Nullish coalescing operator (??)

Nullish coalescing operator (??) - JavaScript | MDN

Null合体演算子とよばれる

??の左辺がnullとundefinedなら右辺を返す

const foo = null ?? 'default string';

||と違うのは、こちらは左辺がfalsyなら右辺を返すので、nullとundefinedに限定したいなら??を使う

BigInt

Number 値で表すことができる最大の数よりも大きな数を扱いたいときに使う

BigInt - JavaScript | MDN

BigInt 値はbigintプリミティブで、以下のように記述する

const previouslyMaxSafeInteger = 9007199254740991n

const alsoHuge = BigInt(9007199254740991)
// ↪ 9007199254740991n

const hugeString = BigInt("9007199254740991")
// ↪ 9007199254740991n

const hugeHex = BigInt("0x1fffffffffffff")
// ↪ 9007199254740991n

const hugeOctal = BigInt("0o377777777777777777")
// ↪ 9007199254740991n

const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111111")
// ↪ 9007199254740991n

論理積代入 (&&=)

論理積代入 (x &&= y) 演算子は、x が truthy の場合に y を x に代入する

Logical AND assignment (&&=) - JavaScript | MDN

let a = 1;
let b = 0;

a &&= 2;
console.log(a);
// expected output: 2

b &&= 2;
console.log(b);
// expected output: 0

ちなみに、論理積代入 (x ||= y) 演算子は、x が falsy の場合に y を x に代入する

let a = 1;
let b = 0;

a ||= 2;
console.log(a);
// expected output: 1

b ||= 2;
console.log(b);
// expected output: 2

Null 合体代入 (x ??= y)演算子は、x が nullish の場合に y を x に代入する

let a = null;
let b = 0;

a ??= 2;
console.log(a);
// expected output: 2

b ??= 2;
console.log(b);
// expected output: 0