1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[JavaScript] 実は使えるようになっていた、論理積代入 (&&=)と論理和代入 (||=)とNull 合体代入 (??=)

Posted at

皆さんが待望していた(?)演算子が実は使えるようになっています!(ただし、IEは除く)
無くても困らないが、ちょっと助かったりするそんな演算子たち。
早速どんな機能なのかをサッと確認していきましょう。

論理積代入 (&&=)

論理積代入 (x &&= y) 演算子は、x が truthy である場合にのみ代入します。

let truthy = true;
let falsy = false;

truthy &&= false; // => false
falsy &&= true; // => false

ちなみに、truthyな値とはfalsyな値以外のことを指します。
0""(空文字)、falseNaNnullundefinedはfalsyって覚えておけば、ほぼ大丈夫です。

論理和代入 (||=)

論理和代入演算子 (x ||= y) は、x が falsy である場合にのみ代入します。

let truthy = true;
let falsy = false;

truthy ||= false; // => true
falsy ||= true; // => true

論理和演算子(||)の短略評価を利用した、値を代入するやつが若干スッキリしますね!

// val => ""
const val = val || "default" // => valに"default"が代入される
const val ||= "default" // => 上記と同じ結果

Null 合体代入 (??=)

Null 合体代入 (x ??= y) 演算子は、x が nullish (null または undefined) である場合にのみ代入を行います。

let nullish1 = null;
let nullish2 = undefined;
let truthy = true;
let falsy = false;

nullish1 ??= "nullish"; // => "nullish"
nullish2 ??= "nullish"; // => "nullish"
truthy ??= "nullish"; // => true
falsy ??= "nullish"; // => false

論理和代入のスコープが狭まった感じですね。
nullishである場合にのみ代入されるってのを上手く使える場面で使用していきましょう。

// val => null 
val == null ? "" : val; // => ""
val ??= ""; // => 上記と同じ結果

参考

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?