LoginSignup
1

More than 3 years have passed since last update.

JavaScript map()で上手く新しい配列が作れなかった話

Last updated at Posted at 2020-01-22

JSに慣れていなくて、配列に対して処理を行うmap()で上手く配列が作成できなかった話。

mapでの配列新規作成

numを要素に持つobjArray1配列を定義し、mapを使ってnumを2倍にしたobjArray2を新しく作成しようとした。

const objArray1 = [{num:1}, {num:3}, {num:5}];

const objArray2 = objArray1.map(obj => {
    obj.num = obj.num *2;
    return obj;
});

console.log(objArray1); // {num:2}, {num:6}, {num:10}
console.log(objArray2); // {num:2}, {num:6}, {num:10}

するとobjArray1objArray2が同じになってしまった。

map()は新しく配列を生成するメソッドと聞いていたが、各要素に対しては参照渡しするだけなのねーと思い、以下の通りにソースコードを修正した。

const objArray1 = [{num:1}, {num:3}, {num:5}];
const objArray2 = objArray1.map(obj => {
        const newObj = {num: obj.num * 2};
        return newObj;
    });
console.log(objArray1); // {num:1}, {num:3}, {num:5}
console.log(objArray2); // {num:2}, {num:6}, {num:10}

これで思う通りに配列が作成できた。

数値型の配列の場合

多分数値はプリミティブ型(?!)なのかと思い、数値の配列で同様のことを試してみた。

const numArray1 = [1, 3, 5];
const numArray2 = numArray1.map(num => {
    return num * 2;
});
console.log(numArray1); // [1, 3, 5]
console.log(numArray2); // [2, 6, 10]

これは上手くいった。

Javascriptにおけるプリミティブ型とオブジェクト

数値型以外に何がプリミティブ型なのかなー、と思い調べたところ。
数値, 文字列, Bool, undefined, nullがプリミティブ型。
それ以外はすべてオブジェクト型、だそうである。

Javaとは違って文字列もプリミティブ型なのかー、と思った。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1