こんにちは!今日はJavaScriptのconsoleをもうちょい使いやすくしようぜって話です。

console.logは戻り値がない

例えば、ヒートテック(1790円 + 税)を15枚買うとしましょう。 JavaScriptなら簡単に計算できますね!

const price = 1790 * 1.08 * 15

console.log(price) //28998

ところで、ヒートテックって1枚税込みいくらなんでしょう?ってのを知りたい時 あなたならどうしますか??

price2とかを作って新しく書いちゃいます?

const price = 1790 * 1.08 * 15
const price2 = 1790 * 1.08

console.log(price) //28998
console.log(price2) //1933

式が簡単ならこれでも良いんですね!でも、本当はこうしたくないですか…?

const price = console.log(1790 * 1.08) * 15
// 1933

console.log(price) //NaN

こうすれば式を崩さず途中の値も取得できますね! …が、これできないんです。なぜならconsole.logは戻り値が無いから。

console.logの引数がそのまま戻り値になったらいいのに!

引数が戻り値になる関数c()を作る

結論からどうぞ

const c = e => console.log(e) || e

この関数c()は引数をそのままconsole.logで出力し、 さらに引数を戻り値として返すクールなやつです。

これを先ほどのユニクロに適用してみると…

const c = e => console.log(e) || e

const price = c(1790 * 1.08) * 15
// 1933

console.log(price) //28998

できた!途中の値を取りつつ最終的な値も変化なし。完璧ですね:)

使いどころ

途中の値が知りたいけど、テストライブラリやブレークポイントを使うまでもない、もしくは使えない時に 使うといいとです。

関数型の書き方してるとなかなか途中に文(console.log)入れれないので、そういう時に 使えるかなーと思います!以上。