ES2021 Logical AssignmentはRubyの演算子からインスパイアされた

先月、ES2021がリリースされました。

本記事で紹介した以外のコード例や、ES2021でリリースされた新機能の実装サンプル を作成しましたのでお試しください。

Logical Assignment

Logical Assignmentは短い記述量で、変数の有無やnullやundefinedの可能性を考慮した代入を行うことができます。

社内勉強会でも今回のリリースをとりあげ、Logical Assignmentについて議論しました。

しかし、三項演算子同様、記述量が減る一方でコードの可読性が下がる懸念や、個人の思うLogical Assignmentに依存した書き方をすることができるために、安易に使うのは如何なものか？という結論に至りました。

Logical Assignmentが実装されたモチベーション

• この演算子はRubyの演算子のインスパイアされ、実装されました
• Rubyのドキュメントでは Abbreviated Assignment という名で紹介されています
• 以下はRubyの例です

a = 1

# equivalent to ...
a = a + 2
a += 2

p a # 3

# equivalent to ...
a ||= 0
a &&= 1

p a # prints 1

• 上記の例でいうと、a ||= 0 、 a &&= 1 は、ES2021でリリースされたLogical Assignmentと同様です

JavaScriptでLogical Assignmentの挙動確認👀

• 以下の例ではnで定義した数値を、論理代入演算子を使って値を代入しています
• object.n += 1では毎回setされます
• object.n ||= 2では n の値が0 or 存在しなければ、2が代入されません
• object.n &&= 3 ではn の値が存在したら、2が代入されます

let n = 0

const object = {
  get n() {
    return n
  },

  set n(value) {
    console.log('setter called')
    n = value
  }
}

// "setter called"
object.n += 1

// not log
object.n ||= 2

// "setter called"
object.n &&= 3

ただ、if文などの条件分岐とは異なり、本当にコードを理解しやすいかは、チーム内などで話し合った方し副作用を考慮した実装が必要そうです。

最後に

Logical Assignment以外にも、ES2021でリリースされた新機能についての実装サンプル を用意しました👍

実際にエディタで動くコードを準備しているので、試してみてください。

https://dev.icare.jpn.com/dev_cat/new-in-es2021-examples/

最後に採用に関してですが、株式会社iCAREでは毎週フロントエンド技術に関する社内勉強会を開催しています。
業務時間中に勉強会を開催されることを許容してもらえる環境で、ペアプロも活発に行われています。

興味のある方は私のTwitterかWantedlyをを通じて、フロントエンド技術の関して、お話しましょう👍

https://www.wantedly.com/projects/549145