JavaScriptで2つの数値配列の対応する要素の絶対差を求める方法

はじめに

JavaScriptでは、次のような2つの配列が与えられたとします。

const arr1 = [1,2,3,4,5,6];
const arr2 = [9,8,7,5,8,3];

ここで求めたいのは、これらの配列の対応する位置にある要素同士の差（絶対値）を計算し、その結果を新しい配列として返す関数です。

上記の配列の場合、期待される出力は以下のようになります。

const output = [8,6,4,1,3,3];

実装のアプローチ

この問題は、forループで各要素を順番に取り出し、Math.abs() メソッドで差の絶対値を求めながら新しい配列へ追加していき、最後にその配列を返すというシンプルな方法で解決できます。

それでは、実際のコードを見てみましょう。

コード例

const arr1 = [1,2,3,4,5,6];
const arr2 = [9,8,7,5,8,3];

const absDifference = (arr1, arr2) => {
  const res = [];
  for(let i = 0; i < arr1.length; i++){
    const el = Math.abs((arr1[i] || 0) - (arr2[i] || 0));
    res[i] = el;
  };
  return res;
};

console.log(absDifference(arr1, arr2));

出力結果

コンソールには以下のように表示されます。

[ 8, 6, 4, 1, 3, 3 ]

コードのポイント

この実装における重要なポイントは以下の通りです。

• Math.abs() の活用： 計算結果が負の値になった場合でも、常に正の値（絶対値）に変換されます。
• (arr[i] || 0) による安全策： 2つの配列の長さが異なる場合でも、undefined との演算による NaN の発生を防ぎ、存在しない要素は自動的に 0 として扱われます。
• アロー関数の採用： 関数定義を簡潔に記述でき、コードの可読性が向上します。

別の書き方：map() を使ったモダンな実装

より現代的なスタイルとしては、Array.prototype.map() を使う方法もあります。

const absDifference = (arr1, arr2) =>
  arr1.map((num, i) => Math.abs(num - (arr2[i] || 0)));

console.log(absDifference([1,2,3,4,5,6], [9,8,7,5,8,3]));
// 出力: [ 8, 6, 4, 1, 3, 3 ]

map() メソッドを使うことで、ループ処理がより宣言的になり、コードも大幅に短くなります。ただし、この方法では第1引数の配列を基準に処理が行われるため、第2引数の配列の方が長い場合は余分な要素が無視される点に注意してください。