🤨

Javascriptのカンマ演算子って知ってる?

2024/07/30に公開

はじめに

個人サービスを作っていく上で、使用しているライブラリのコードリーティングするとは非常に技術力を上げるにも大切だと思っています.
今回は、自分はコーディングしているときには絶対に使用してこなかったカンマ演算子について触れていきたいと思います.

このコードの動きをあなたは理解できますか？

あなたは、以下の出力が何か分かりますか？

const FuncA = (name) => {
    return `Hello ${name}`;
}

const FuncB = (name) => {
    return `GoodBye ${name}`;
}
const result = (FuncA, FuncB)('nori')
console.log(result)

答えはGoodBye noriです.

初見で自分が見たのは

const result = (0, FuncA)('nori')

のような構成でしたが、驚きを隠せませんでした.
(普段の業務ではjavascriptを自分が使ってないのもありますが...)
※上記のコードは、一様意味があるそうなので今度取り上げたいと思います.

カンマ演算子とはなんぞや

カンマ演算子という言葉すら自分は知らなかったのですが、mdn web docsでのカンマ演算子の解説は

カンマ演算子 (,) は、それぞれの演算対象を（左から右に）評価し、最後のオペランドの値を返します。これにより、複数の式が評価される複合式を作成することができ、複合式の最終値はそのメンバー式の一番右端の値となります。これは、for ループに複数の引数を提供する場合によく使用されます。

と記載されています.

結局のところ、カンマの最後の値が返されるということです.

let x = (2, 3)
console.log(x) // 3

ただし、とても面白いのが先ほどresultに格納する部分のコードです.

const FuncA = (name) => {
    return `Hello ${name}`;
}

const FuncB = (name) => {
    return `GoodBye ${name}`;
}
const result = (FuncA, FuncB)('nori') // <- ここ
console.log(result)

関数をカンマ演算子に設定した時に、後ろに関数の引数をつけると実行されるのです.
自分の感覚的には、

const result = (FuncA('nori'), FuncB('nori'))

が動作に適したコードだと思っていました(もちろん動きます)

ですが、コードを挟むと納得がいくと思います.

const FuncA = (name) => {
    return `Hello ${name}`;
}

const FuncB = (name) => {
    return `GoodBye ${name}`;
}
// 追加分 start
const func = (FuncA, FuncB) 
const result = func('nori')
// 追加分 end

console.log(result)

関数を変数に格納した後に、関数の呼び出しが発生しているのですがよくわかると思います.

因みに、

const result = (FuncA('nori'), FuncB('nori'))

だと細かい部分で動作が変わってきます.
それぞれを動作させると以下のようになります.

const FuncA = (name) => {
    console.log('Func A');
    return `Hello ${name}`;
}

const FuncB = (name) => {
    console.log('Func B');
    return `GoodBye ${name}`;
}

console.log((FuncA('nori'), FuncB('nori'))
/*
Func A
Func B
GoodBye nori
*/

console.log((FuncA, FuncB)('nori'));
/*
Func B
GooDBye nori
*/

関数が呼び出された後か、関数が呼び出される前かの違いになります.

最後に

今回は、javascriptのコンマ演算子について触れました.
正直、どこで使う場面があるのか分からないのですが
コードリーディングで同じような場面が出ても気にならずにサラッと進めるようにはなると思います.
※誰かあえてコンマ演算子を使ったコード書いてくれると少し嬉しいです笑

はじめに

このコードの動きをあなたは理解できますか？

カンマ演算子とはなんぞや

最後に

Discussion