こんにちは!今回も前回に続き、美しい税込み計算を求めていきます。

前回の結論がこちら!

const TAX = 10
const addTax = (price, tax) => (price / 100) * (100 + tax)

const total = addTax(100, TAX)
console.log(total) // 110

ここからまだまだ修正するよーー

引数をオシャレに取ろう

税込みを計算するには2つの値が必要ですね!そう、税抜き価格と消費税率です。

上の例だとこんな感じに取ってる。

addTax(100, TAX)

この規模ならこれでも十分意味は通じますが、引数が増えてくるとややこしくなりそうですね!

引数をオブジェクトにする

というわけでオブジェクトで引数を取りましょう。こんな風に

addTax({ price: 100, tax: TAX })

「値段はこれ! 税率はこれ!」でわかりやすい!ライブラリとかよくこういう書き方見ますね:)

全体だとこんな感じ。関数の最初も書き方ちょっと変わりますわ

const TAX = 10
const addTax = ({ price, tax }) => (price / 100) * (100 + tax)

const total = addTax({ price: 100, tax: TAX })
console.log(total)

オブジェクトのkey: valueを揃える

JSはオブジェクトのキーと値が同じ時は省略できます。

例えばtaxは今こんな風に大文字と小文字になってるけど…

const TAX = 10
const total = addTax({ price: 100, tax: TAX })

両方大文字にすればこう書けますわ!

const TAX = 10
const total = addTax({ price: 100, TAX })

ついでにpriceも定数にします。全体としてはこんな感じ!

const PRICE = 100
const TAX = 10
const addTax = ({ PRICE, TAX }) => (PRICE / 100) * (100 + TAX)

const total = addTax({ PRICE, TAX })
console.log(total)

少し長くなったけど、格段に分かりやすい!

引数を一つにする

オブジェクトにしたことで、アロー関数の部分が長くなってまったな。

const addTax = ({ PRICE, TAX }) => (PRICE / 100) * (100 + TAX)

なのでオブジェクト全体を1つにまとめましょう!引数eにオブジェクト全体が格納される感じです。見てみて!

const addTax = e => (e.PRICE / 100) * (100 + e.TAX)

だいぶ短くなった!これなら1行でも書けるな

JSはこんなにクールに書ける

ほら、綺麗でしょう…?

const PRICE = 100
const TAX = 10
const addTax = e => (e.PRICE / 100) * (100 + e.TAX)

const total = addTax({ PRICE, TAX })
console.log(total)

極めれば綺麗に書けるの、ほんとJSの好きなことろです。

書こうと思えばこんな古典的にもできるしな!

var PRICE = 100
var TAX = 10
function addTax(price, tax) {
  return Math.round(price * (1 + tax / 100))
}

var total = addTax(PRICE, TAX)
console.log(total)

今日はここまで。じゃあな=>=>=>