JavaScript 配列1つを更新したつもりが2つ更新される

Question

はじめに

それぞれ同じ構造のオブジェクトを値に持つ配列が2つあります。
このとき1方の配列を更新すると、もう1方も更新されてしまいます。
原因を知りたいです。

概略

const itemsA = [ {key1: value1}, {key2: value2}, ...]
const itemsB = [ {key1: value1}, {key2: value2}, ...]
がある場合、
itemsA.key1 = updatedValue1
のように個人的に更新したつもりが、
itemsB.key1 の値も updatedValue1 になるような現象が起きています。

問題のソースコード

商品ページとショッピングカートがあり、
商品を選択してショッピングカートに登録することを模擬したようなプログラムをJavaScriptで作りました。

ソースコードは以下になります。

// 商品一覧 (quantityは数量)
const products = [
  { id: 1, title: '商品1', quantity: 1 },
  { id: 2, title: '商品2', quantity: 1 },
  { id: 3, title: '商品3', quantity: 1 },
];

// 各ページの状態
let state = {
  shopItems: products, // 商品ページ: 初期状態は全商品がある
  cartItems: [], // カート: 初期状態は空
};

// カートに商品を反映する
function addToCart(shopItem) {
  // カートに商品があるかのフラグ
  let isShopItemInCart = false;

  // カートの各商品に対してループ
  state.cartItems.forEach((cartItem) => {
    // カートに商品が見つかった場合
    if (cartItem.id === shopItem.id) {
      isShopItemInCart = true;
      // カートの数量に、商品ページの数量を1つ足す
      cartItem.quantity = cartItem.quantity + shopItem.quantity;
    }
  });

  // カートに商品が見つからなかった場合
  if (!isShopItemInCart) {
    // 商品をカートに追加する
    state.cartItems = [...state.cartItems, shopItem];
  }
}

const shopItem = products[0]; // 商品1

addToCart(shopItem); // 商品1をカートに追加 1回目
console.log(state);

addToCart(shopItem); // 商品1をカートに追加 2回目
console.log(state);

addToCart(shopItem); // 商品1をカートに追加 3回目
console.log(state);

このコードを実行すると、個人的に予期した結果と違っていました。

期待する結果

// 1回目
{
 shopItems: [
    { id: 1, title: '商品1', quantity: 1 },
    { id: 2, title: '商品2', quantity: 1 },
    { id: 3, title: '商品3', quantity: 1 }
  ],
  cartItems: [ { id: 1, title: '商品1', quantity: 1 } ]
}

// 2回目
{
  shopItems: [
    { id: 1, title: '商品1', quantity: 1 },
    { id: 2, title: '商品2', quantity: 1 },
    { id: 3, title: '商品3', quantity: 1 }
  ],
  cartItems: [ { id: 1, title: '商品1', quantity: 2 } ]
}

// 3回目
{
  shopItems: [
    { id: 1, title: '商品1', quantity: 1 },
    { id: 2, title: '商品2', quantity: 1 },
    { id: 3, title: '商品3', quantity: 1 }
  ],
  cartItems: [ { id: 1, title: '商品1', quantity: 3 } ]
}

実際の結果

// 1回目
{
 shopItems: [
    { id: 1, title: '商品1', quantity: 1 },
    { id: 2, title: '商品2', quantity: 1 },
    { id: 3, title: '商品3', quantity: 1 }
  ],
  cartItems: [ { id: 1, title: '商品1', quantity: 1 } ]
}

// 2回目
{
  shopItems: [
    { id: 1, title: '商品1', quantity: 2 },
    { id: 2, title: '商品2', quantity: 1 },
    { id: 3, title: '商品3', quantity: 1 }
  ],
  cartItems: [ { id: 1, title: '商品1', quantity: 2 } ]
}

// 3回目
{
  shopItems: [
    { id: 1, title: '商品1', quantity: 4 },
    { id: 2, title: '商品2', quantity: 1 },
    { id: 3, title: '商品3', quantity: 1 }
  ],
  cartItems: [ { id: 1, title: '商品1', quantity: 4 } ]
}

疑問点

shopItem.quantityに何かを代入された要因がどうしても分かりません。
教えていただけると嬉しいです。

補足（背景）

元はReactのコードなのですが、state更新が予想と違い
JavaScriptだけ抜き出したところ、生JSの部分が分からないと判断した経緯があります。

原型のコードは以下のようになります。

import React from 'react';
import './tailwind.output.css';

type Product = { id: number; title: string; price: number; quantity: number };

type Products = Product[];

const products: Products = [
  { id: 1, title: '商品1', price: 100, quantity: 1 },
  { id: 2, title: '商品2', price: 150, quantity: 1 },
  { id: 3, title: '商品3', price: 200, quantity: 1 },
  { id: 4, title: '商品4', price: 250, quantity: 1 },
  { id: 5, title: '商品5', price: 300, quantity: 1 },
];

type SampleProps = {};

type SampleCartState = { shopItems: Products; cartItems: Products };

class Sample extends React.Component<SampleProps, SampleCartState> {
  constructor(props: Readonly<SampleProps>) {
    super(props);
    this.state = { shopItems: products, cartItems: [] };
    this.addToCart = this.addToCart.bind(this);
  }

  addToCart(shopItem: Product) {
    let isShopItemInCart: boolean = false;
    const cartItems: Products = [...this.state.cartItems];

    cartItems.forEach((cartItem) => {
      if (cartItem.id === shopItem.id) {
        isShopItemInCart = true;
        cartItem.quantity = Number(cartItem.quantity + shopItem.quantity);
      }
    });

    this.setState({ cartItems: cartItems });

    if (!isShopItemInCart) {
      this.setState({ cartItems: [...cartItems, shopItem] });
    }
  }

  getTotalPrice() {
    let totalPrice: number = 0;
    this.state.cartItems.forEach((cartItem) => {
      totalPrice = totalPrice + cartItem.price * cartItem.quantity;
    });
    return totalPrice;
  }

  render() {
    return (
      <div>
        {/* 商品一覧 */}
        <h2 className="text-3xl">商品一覧</h2>
        {this.state.shopItems.map((shopItem) => (
          <div key={shopItem.id}>
            {shopItem.title} {shopItem.price}円 × {shopItem.quantity}個{' '}
            <button
              className="bg-gray-400"
              onClick={() => this.addToCart(shopItem)}
            >
              追加
            </button>
          </div>
        ))}

        {/* カート */}
        <h2 className="text-3xl">カート (計 {this.getTotalPrice()}円)</h2>
        {this.state.cartItems.map((cartItem) => (
          <div key={cartItem.id}>
            {cartItem.title} {cartItem.price}円 × {cartItem.quantity}個
          </div>
        ))}
      </div>
    );
  }
}

export default function App() {
  return (
    <div className="container mx-auto px-4">
      <Sample />
    </div>
  );
}

Answer 1

shopItem.quantityに何かを代入された要因がどうしても分かりません。

これを起こしているのは、以下のコードです。
cartItem.quantity = cartItem.quantity + shopItem.quantity;

原因は、cartItemとshopItemが、同じインスタンスであることです。

カートに存在しない商品を追加する時、以下のコードを実行しています。
state.cartItems = [...state.cartItems, shopItem];

このコードは、shopItemを、新たな領域を確保することなく、そのまま、cartItemsの要素として追加する、という処理です。

その為、cartItemsの要素を変更すると、同期して、対応するproductsの要素も変更されます。

商品追加時、クローンを作って、クローンのほうを追加するようにしてください。

Comments

[ytt451]

ありがとうございます！

>商品追加時、クローンを作って、クローンのほうを追加するようにしてください。

こちらの助言を元に、

変更前：state.cartItems = [...state.cartItems, shopItem];
変更後：state.cartItems = [...state.cartItems, { ...shopItem }];

と修正したところ、予想通りの動きになりました。

カートに商品が既にある場合のコードだけを眺めていて、
カートに商品が無かった場合のコードに問題があるなど考えもしていませんでした。
オブジェクトが参照渡しになるのは知っていたつもりですが、なぜか気付いていませんでした...。

誠にありがとうございました。

[YT0014]

無事解決したようですね、おめでとうざいます