javascript エラー「Uncaught TypeError: xxx.map is not a function」の解決方法

javascript エラー「Uncaught TypeError: xxx.map is not a function」の解決方法

javascriptで、エラー「Uncaught TypeError: xxx.map is not a function」が発生した場合の原因と解決方法を記述してます。配列以外に「map」を使用した場合に発生します。「chrome」や「firefox」や「safari」の各ブラウザのエラーメッセージの画像もキャプチャしてます。

環境

  • OS windows11 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 107.0.5304.88

エラー内容

以下の、オブジェクトに対して「map」を使用したコードで発生。

const obj = {
  a: 1,
  b: 2,
  c: 3,
};


obj.map(function(v){
  return v + 1;
});

エラーメッセージ

Uncaught TypeError: obj.map is not a function

画像

firefox106の場合では、以下のエラーが発生します。

Uncaught TypeError: obj.map is not a function

画像

safari15.5では、以下のエラーとなります。

TypeError: obj.map is not a function. (In 'obj.map(function(v){
  return v + 1;
})', 'obj.map' is undefined)

画像

原因

「map」は配列以外には使用できない。数値などに使用しても同様のエラーとなります。

const num = 123;

num.map(function(v){
  return v + 1;
});

// Uncaught TypeError: num.map is not a function

解決方法

「map」を使用するのであれば、一度、配列化して使用します。

const obj = {
  a: 1,
  b: 2,
  c: 3,
};

const result = Object.entries(obj).map(function([key,value]){
  return {[key]: value + 1};
});

console.log( result );
// [{a: 2},{b: 3},{c: 4}]

オブジェクトの値を個別に操作したいのであれば「forEach」などを使用します。

const obj = {
  a: 1,
  b: 2,
  c: 3,
};

let newObj = {};

// 反転したオブジェクトを生成
Object.keys(obj).forEach(function(key){
  newObj[key] = obj[key] + 1;
});

console.log( newObj );
// {a: 2, b: 3, c: 4}