JavaScriptで絶対値を取得する方法を徹底解説!

今回の記事は、

  • Javascriptで絶対値を扱いたい
  • そもそも絶対値ってなんだっけ?

というお悩みをお持ちの方に向けた記事になっています。

JavaScriptで絶対値を取得するためにはMath.abs関数を使用する方法が一般的ですが、その際、一部注意すべき箇所が存在します。

今回の記事では、 絶対値の意味やMath.abs関数で絶対値を取得する方法、そしてそのMath.abs関数の弱点を埋めるための関数を自作する方法まで解説していきます。


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。


絶対値とは?

絶対値とは、数値が「0からどれくらい離れているか」を表す値のことを指し、正負に関係なく、記号を外すことで絶対値を取得できます。

具体例を挙げるとしたら「4の絶対値は4」「-5の絶対値は5」という感じで求めることができます。この絶対値は、2つの値を差分を求めたい時や変数の値をプラスの値で取得したい時などに使われています。

JavaScriptの絶対値は、 Math.abs関数を使うと簡単に取得することができます。

それでは、実際の使い方をみていきましょう。

Math.abs関数を使って絶対値を取得しよう

Math.abs関数で絶対値を取得する方法を紹介していきます。

基本的な使い方はとても簡単で、abs関数の引数に、絶対値を取得したい数値を指定するだけで大丈夫です。

それでは実際に数値を入れたプログラムで確認してみましょう。

console.log(Math.abs(12));
console.log(Math.abs(-25));

// 出力結果
=> 12
=> 25

マイナスの値であっても、絶対値を取得することができました。

このようにMath.abs関数を使えば簡単に絶対値を取得できますが、使用の際には少し注意点があります。

Math.abs関数を使用する際の注意点

注意点としては、「abs関数で絶対値を取得できるの数値のみ」ということが挙げられます。

実際に、文字列を指定すると「NaN」、「true」や「false」を指定すると「1」「0」のように返ってきます。

「true」や「false」で返ってきた数値は、絶対値ではないので間違えないように注意が必要です。

次のプログラムで確認してみましょう。

console.log(Math.abs('orange'));
console.log(Math.abs(true));
console.log(Math.abs(false));

// 出力結果
=> NaN
=> 1
=> 0

上記の例ではいずれも数値ではないため、絶対値を取得することができていません(※値は返ってきていますが、それぞれ絶対値ではありません)。

この点を把握しておかないと、思わぬところでバグが発生してしまいますので、abs関数を使用する際には数値のみ指定するようにしましょう。

数値以外の値を指定した場合の返り値をまとめておきますので、ぜひ覚えておいてくださいね。

引数結果
100100
-100100
true1
false0
“文字列”NaN
undefinedNaN
null0
{}NaN
[]0
NaNNaN

Math.abs関数を使わずに絶対値を取得してみよう

上記でご紹介した通り、Mathクラスのabs関数を使うと簡単に絶対値を取得することができますが、文字列を入れるとバグの原因になるというデメリットが存在しています。

このデメリットを解消するためには、現状、「絶対値を取得する関数を自作する」しか方法がありません。

自作すると言っても内容自体はとてもシンプルで、三項演算子を使えば1行だけで完結します。

実行する内容としては、指定した引数が0未満の場合には「-」を付けてその引数を返し、それ以外の場合には引数をそのまま返すという処理になります。

実際に文字列やtrueを指定して確認してみましょう。

function originalAbs(val) {
    return val < 0 ? -val : val;
};

console.log(originalAbs(12));
console.log(originalAbs(-25));
console.log(originalAbs('orange'));
console.log(originalAbs(true));
console.log(originalAbs(false));

// 出力結果
=> 12
=> 25
=> "orange"
=> true
=> false

上記のように、引数が数値の場合にはその絶対値を取得し、数値以外の場合にははそのまま返すことができました。

バグの原因を減らすことができるので、絶対値を取得する際には上記のような関数を自作するようにしましょう。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまでJavascriptを使って絶対値を取得する方法について解説してきましたがいかがでしたか?

Math.abs関数はとても便利ですが、数値以外を引数に指定すると絶対値が返ってこないため、実際に使用する際には注意が必要です。

関数を自作すればそのような懸念も払拭できるため、ぜひ今回の記事を参考に自分だけの関数を作ってみてくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。