【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
人気の記事
- React2020-06-13【JS】React系とVue系のフレームワーク色々比較まとめ
- JavaScript2020-09-02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- CSS2019-03-30【CSS】100vhは「一画面」ではないという罠
- CSS2020-06-09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- CSS2020-05-09【CSS】世にも簡単なレスポンシブの1カラム2カラムの書き方
- Vue2019-06-29【JS】Vueの:classの書き方3通り
- React2020-06-04【JS】ReactのclassNameの色々な書き方紹介
- CSS2020-04-30【CSS】tailwind.cssでよく使うデザインパターン
- React2020-07-13【JS】Reactのstyleの使い方、書き方いろいろ
- Vue2020-05-29【JS】日本でVueがReactより人気な理由を考える