本記事では、||=演算子の使い方について詳しく解説しています。
先輩くん
falsyの単語が出てきます。falsyについて理解が出来ていない方は、別記事で詳しく解説しているのでご参照ください。
【JavaScript】falsyとtruthyについて
本記事では、JavaScriptのfalsyとtruthyについて解説しています。 【falsyとtruthyとは?】 JavaScriptでは、全ての値をfalsyとtruthyに分けることができます。 例えば…
JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
メリット
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!
全プログラマー必見!
変数名/関数名にもう悩まない!
変数名/関数名にもう悩まない!
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次
||=演算子って何?
他人のソースコードを見ていると、たまに「||=」の記号を目にすることがあります。これは、ES2021で追加された新しい演算子で、変数に代入されている値がfalsyの場合に特定の値をセットする時に使われます。
||=演算子の使い方
||=演算子の使い方を解説する前に、ES2021より前の変数に代入されている値がfalsyの場合に特定の値をセットする書き方について見ていきましょう。
let num;
num = num ? num : 10;
console.log(num); // => 10
このように三項演算子またはif文で記述していることが多かったと思います。しかし、||=演算子の追加により更に簡潔に書けるようになりました。
||=演算子の使い方はとても簡単で、左辺に対象の変数をセットし、右辺には対象の変数に代入されている値がfalsyだった場合に代入したい値を書きます。
let num;
num ||= 10;
console.log(num); // => 10
上記のコードは、先ほど紹介した三項演算子のコードを||=演算子に置き換えたものになります。スッキリとしてかなり見やすくなりました。