【JS】console.logは戻り値が無いのでもっと使いやすい関数を作る
こんにちは!今日は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)入れれないので、そういう時に 使えるかなーと思います!以上。
PREV
2019-05-09
【JS】握手会で例えるJavaScriptのループにおけるreturn、continue、breakの違い
NEXT
2019-05-11
【HTML+CSS】iPhoneだと画面外が見えるぞ気をつけろ+解決方法
LINK
リンク
Twitter
GitHub
TAGS
タグ
LATESTS
最新の記事
POPULAR
人気の記事
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介