オブジェクトをグローバル配列に挿入しますか？

Question

私は、人が注文するために記入するための書式のhtmlファイルを持っています。

私はオブジェクトを格納するグローバル配列を持っています。オブジェクトには、オーダーに追加されたアイテムの名前、価格、数量が含まれます。

<button type="button" onclick="addToOrder('app2-amount', 'House Salad', '6')">+</button> 

addToOrder（）が呼び出される場所です。

と機能：

var orderArray = []; 

function addToOrder(id, nameIn, priceIn){ 
if (loggedIn == true){ 
    var quantityIn = document.getElementById(id).value; 
    var totalForThisItem = priceIn*quantityIn; 

    var menuObject = { 
    name: nameIn, 
    price: totalForThisItem, 
    quantity: quantityIn 
    }; 

    // Next we must perform a check to see if an object with the same name already exists in the order 
    // If it does exist, replace it with this new object. 
    if (orderArray.length == 0){ 
    orderArray.push(menuObject); 
    } 
    else{ 
    orderArray.forEach(function (item) { 
     if (item.name == menuObject.name){ 
     item = menuObject; 
     } 
     else{ 
     orderArray.push(menuObject); 
     } 
    }); 
    } 
    console.log("dabs " + orderArray.toString()); 
    } 
    // If user is not logged in: 
    else{ 
    console.log("You are not logged in. Please log in to use this feature."); 
    } 
console.log(menuObject); 
} 

私はmenuObjectを印刷するとき、私は削除し、それがスコープ外になるだろうと思いました。私はそれをグローバル変数に挿入しています。私はそれが私を悩ませていると思います。

私は別のメニュー項目を配列に入れ始めたときに、奇妙なことが起こります。 1つのケースでは、プレスごとに3,6,12,24などを追加しました。面白いけど、私はかなりうんざりです。

ここではどうなりますか？

Answer 1

あなたはJavascriptでレキシカルスコープを誤解していると思います。

var宣言は、機能ブロックレベルでスコープが設定されています。つまり、var文がブロックifの内部にある場合でも、関数全体にスコープがあり、関数が終了するまで定義されたままになります。彼らはまたhoistingのために（宣言の前であっても）関数内のどこでも有効です。

あなたがES6で書いている場合は、let declarationsを使用することもできます。これは、あなたのケースでは、ifブロック内の最も近い囲みブロックまでです。それは私があなたがここで期待していたと思う行動でしょう。

その他の問題は論理的です。関数をパスするたびに、forEachを使用して配列をトラバースし、配列内の既存のオブジェクトごとに1回新しいオブジェクトをプッシュします。だからこそ、配列の長さに幾何学的な進展があります。

あなたの意図が「既に存在する場合は配列内の一致するアイテムを置き換えてください。それ以外の場合は最後に追加してください」という場合は、それを行うための方法がいくつかあります。 Array.findが選択肢の1つですが、いくつかのアプローチがあります。