JavaScriptで買い物かごを作る方法

Progateの講座にて、JavaScriptで買い物かごを作る方法でつまづいたので、自分用にメモ。

そもそも

配列とは

変数を複数格納できるもの。以下の記述で初期化・宣言する。

const array = []; //初期化
const array1 = ['こんにちは', 12345, true]; //初期化と宣言を同時に行う
const array2 = [{name: "Hanako", age: 25}, {name: "Taro", age: 20}]; 

配列に要素を追加したい場合は pushメソッド を用いる。

array.push('要素を追加');

この場合、配列の末尾に「要素を追加」文字列が追加される。

配列の中の要素を検索したい場合は findメソッド を用いる。

const array1 = [5, 12, 8, 130, 44];

const found = array1.find((element) => element > 10);

console.log(found); // Expected output: 12

この場合、配列の中で一番最初に当てはまったもののみが返却される。

★アロー関数の復習👇

// (引数,...) => {return 関数の中身} 
//（引数 => 関数の中身）

let calculater = (number1, number2) => {
  return number1 + number2;
};

let calculater（（number1, number2）=> number1 + number2 );

問題文

引数として与えられた商品（オブジェクト）をカート（配列）に追加するプログラムを作成します。
関数 addToCart は商品を追加する先となる配列 cart と、商品名 productName の２つの引数を受け取ります。
商品には商品名と商品の数量があります。商品をカートに追加するときに、同じ商品がカートに存在する場合は、その商品の数量を増やし、存在しない場合は新しい商品をカートに追加してください。
商品の名前はnameに、商品の数量はquantityにデータを保持してください。

考え方

• addToCart関数を作成する（引数2つ。配列cartと商品名productName）
• cartの中身は2つのラベルを持ったデータの配列になる（name, quantity）
• findメソッドを使ってカート内に既にある商品を検索する
• ifを使用して条件分岐させる
• カートへの商品の追加にはpushメソッドを使用する
• quantityを操作する

答え

function addToCart(cart, productName) {
    let inCart = cart.find(item => item.name === productName);
    if (inCart){
        inCart.quantity += 1;
    } else {
        cart.push({name: productName, quantity: 1});
    }
    return cart; //任意
}

const cartArray = [];

addToCart(cartArray, "apple");
addToCart(cartArray, "banana");
addToCart(cartArray, "apple");
cartArray.forEach((item) =>  console.log(item));

つまづいたポイント

• Pushメソッド・Findメソッドの使い方を知らなかった
• アロー関数の記述方法をど忘れ
• 配列の定義方法もど忘れ

所感

まだ完全には理解できていない(笑)
今回この問題を解くにあたっていろいろなサイトを調べたり自力で環境構築してJSの動作を確認したりと、新たな学びを得ることができてよかった。
Progateの演習問題で理解した気になっていたけど、実は理解できていなかったことがmosyaだとあぶりだされて助かる。
引き続き学習を継続していきます！