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

今回の記事は、

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

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

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

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

フリーランス案件を探すならこのエージェント！

運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社Hajimari
対応エリア	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡
案件数	約28,000件	約3,300件	約4,200件
平均単価	68.2万円	72.2万円	–
最高月収	145万円	200万円	176万円
特徴	・高単価な案件が多い ・福利厚生サービスが受けられる ・首都圏の案件が中心	・給与保証制度で安定した収入を得られる ・税務処理のサポートあり ・マージン率は実質20%	・週2/週3の案件が多い ・在宅/リモート案件が多い ・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例	・株式会社Gunosy ・株式会社バンダイナムコホールディングス ・株式会社ユーザベース	・Sansan株式会社 ・株式会社一休 ・株式会社FiNC Technologies など	・クックパッド株式会社 ・株式会社カオナビ ・株式会社Kaizen Platform など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

転職を考えているならこのエージェント！

運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社リブセンス
対応エリア	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡
案件数	約13,000件	約800件 ※非公開求人が多い	– ※ドラフト制のため、対象外
年齢層	20代：◎ 30代：〇 40代：〇	20代：〇 30代：〇 40代：△	20代：〇 30代：〇 40代：〇
特徴	・エンジニア・デザイナーを専門としている ・カウンセリングに時間をかける ・年収アップ率60％の実績	・IT/Web/ゲーム業界専門の転職エージェント ・業界経験者がキャリアコンサルタントを務める ・丁寧なカウンセリングで入社後の離職率1%以下を実現	・ドラフト制による採用を叶える特殊なサービス ・スキル・経験重視で評価してもらえる ・他エンジニアの入札結果を見ることで 自分の市場価値が分かる
紹介企業例	・サイボウズ株式会社 ・株式会社サイバーエージェント ・Chatwork株式会社 など	・DMM.com ・Money Forward ・SmartHR など	・メルカリ ・ZOZOテクノロジーズ ・freee など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

絶対値とは？

絶対値とは、数値が「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関数を使用する際には数値のみ指定するようにしましょう。

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

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

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

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

最後に

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

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

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

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

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