Loop through an array if it finds a key, skip the index for that key, but eventually want to go back and add that index skipping the other keys

Question

So this is kind of hard to explain, but basically trying to make a more efficient way of doing the below code...

products.forEach(function(item, index){
    if(item.sale == false ) {
        nonSaleItems += createEl(item);
    } else {
        saleItems += createEl(item);
    }
});

items.innerHTML += nonSaleItems;
items.innerHTML += saleItems;

products is an array of objects where one of the keys is "sale" and is "false" or "true" for "sale". The idea behind this is to post all the none sale items first, then the sale items goes second - hence the innerHTML of nonSaleItems first, THEN saleItems gets added second.

This code works perfectly, but I feel like there has to be a more efficient / less verbose way to do it instead of two variables of nonSaleItems and saleItems and then two innterHTMLs.

Just curious if anyone had better ideas on how to simplify this or have it better?

Answer 1

You're already doing one loop through all the products, which is a) necessary, and b) about as efficient as it gets.

The best you can do is make your code less verbose. In this case I'm using a ternary to decide which whether to use saleItems or nonSaleItems as the lvalue for += createEl(...):

products.forEach(function(item, index){
    ( item.sale ? saleItems : nonSaleItems ) += createEl(item);
});

items.innerHTML += nonSaleItems;
items.innerHTML += saleItems;

EDIT:

The above code won't work because the ternary evaluates to an rvalue, not an lvalue. See Javascript Ternary Operator lvalue.

However, you can use the ternary to evaluate to an object, which can be dereferenced (see https://stackoverflow.com/a/18668615/378779):

let saleItems = { html: '' }, nonSaleItems = { html: '' }
products.forEach(function(item, index){
    ( item.sale ? saleItems : nonSaleItems ).html += createEl(item);
});

items.innerHTML += nonSaleItems.html;
items.innerHTML += saleItems.html;

Or, with only one object, but using a ternary to determine the key:

let html = { sale: '', nonSale: '' };
products.forEach(function(item, index){
    html[(item.sale ? 'sale' : 'nonSale')] += createEl(item);
});

items.innerHTML += html.nonSale;
items.innerHTML += html.sale;