Skip to content

Arrays

Exit Arrays If You've Found The Information You Need

Incorrect 
<mvt:foreach iterator="product" array="products">
    <mvt:if expr="l.settings:product:active EQ 1">
        <mvt:assign name="l.has_active_products" value="1" />
    </mvt:if>
</mvt:foreach>

<mvt:if expr="l.has_active_products">
    <!-- Do something -->
</mvt:if>
Correct 

<mvt:foreach iterator="product" array="products">
    <mvt:if expr="l.settings:product:active EQ 1">
        <mvt:assign name="l.has_active_products" value="1" />
        <mvt:foreachstop />
    </mvt:if>
</mvt:foreach>

<mvt:if expr="l.has_active_products">
    <!-- Do something -->
</mvt:if>
Note: See Use find functions if you need to check for the existence of an element/condition for an even better solution here

Use Array.prototype.every tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

Incorrect 
const requiredInputs = document.getElementsByClassName('.required');
let hasInvalidInput = false;

Array.from(requiredInputs).forEach(input => {
    if (!input.validity.valid) {
        hasInvalidInput = true;
    }
});

if (hasInvalidInput){
    // Do something
}
Correct 

const requiredInputs = document.getElementsByClassName('.required');
let hasInvalidInput = Array.from(requiredInputs).every(input => {
    return !input.validity.valid;
});

if (hasInvalidInput){
    // Do something
}
Note: See Use find functions if you need to check for the existence of an element/condition for an even better solution here

When Creating Variables Within Loops, Append Data To The Iterator

Append data to the iterator instead of declaring an additional/higher-scoped variable.

Incorrect 
<mvt:foreach iterator="product" array="products">
    <mvt:assign name="g.discount" value="l.settings:product:base_price - l.settings:product:price" />

    <mvt:if expr="g.discount GT 0">
        &mvt:product:name; has a &mvte:global:discount;!
    </mvt:if>
</mvt:foreach>
Correct 
<mvt:foreach iterator="product" array="products">
    <mvt:assign name="l.settings:product:discount" value="l.settings:product:base_price - l.settings:product:price" />

    <mvt:if expr="l.settings:product:discount GT 0">
        &mvt:product:name; has a &mvte:product:discount;!
    </mvt:if>
</mvt:foreach>

Use Array.prototype.map to modify each element of an array.

Incorrect 
products.forEach((product, index) => {
    let product_discount = product.base_price - product.price;
    products[index].discount = product_discount;
});
Correct 
products = products.map(product => {
    products.discount = product.base_price - product.price;
});

Arrays Should Be Plural And Iterators Should Be Singular Matching The Noun Of The Array

Incorrect 
<mvt:foreach iterator="item" array="products">
    <!-- Do something -->
</mvt:foreach>
Correct 
<mvt:foreach iterator="product" array="products">
    <!-- Do something -->
</mvt:foreach>

for Loops:

Incorrect 
const letters = ['a', 'b', 'c', 'd'];
for (let i = 0, len = letters.length; i < len; i++) {
    const char = letters[i];
    doSomething(char);
}
Correct 
const letters = ['a', 'b', 'c', 'd'];
for (let i = 0, len = letters.length; i < len; i++) {
    const letter = letters[i];
    doSomething(letter);
}

for ... of Loops:

Incorrect 
const letters = ['a', 'b', 'c', 'd'];
for (const char of letters) {
    doSomething(char);
}
Correct 
const letters = ['a', 'b', 'c', 'd'];
for (const letter of letters) {
    doSomething(letter);
}

for ... in Loops:

Incorrect 
const options = {a: 1, b: 2, c: 3, d: 4};
for (const key in options) {
    const x = options[key];
    doSomething(x);
}
Correct 
const options = {a: 1, b: 2, c: 3, d: 4};
for (const key in options) {
    const option = options[key];
    doSomething(option);
}

Use find Functions If You Need To Check For The Existence Of An Element/Condition

Use miva_array_search when you need to perform an operation on a specific index

Incorrect 
<mvt:foreach iterator="product" array="products">
    <mvt:if expr="l.settings:product:active EQ 1">
        <mvt:assign name="l.has_active_products" value="1" />
        <mvt:foreachstop />
    </mvt:if>
</mvt:foreach>

<mvt:if expr="l.has_active_products">
    <!-- Do something -->
</mvt:if>
Correct 
<mvt:assign name="l.has_active_products" value="miva_array_search( l.settings:products, 1, l.product, 'l.product:active EQ 1' )"/>

<mvt:if expr="l.has_active_products">
    <!-- Do something -->
</mvt:if>

Use Array.prototype.find

Incorrect 
const requiredInputs = document.getElementsByClassName('.required');
let hasInvalidInput = false;

Array.from(requiredInputs).forEach(input => {
    if (!input.validity.valid) {
        hasInvalidInput = true;
    }
});

if (hasInvalidInput){
    // Do something
}
Correct 
const requiredInputs = document.getElementsByClassName('.required');

const hasInvalidInput = requiredInputs.find(input => !input.validity.valid);

if (hasInvalidInput){
    // Do something
}

Use filter Functions When You Need To Return A Subset Of The Original Array

Incorrect 
<mvt:foreach iterator="product" array="products">
    <mvt:if expr="l.settings:product:active EQ 1">
        <mvt:assign name="l.index" value="miva_array_insert(l.active_products, l.settings:product, -1)" />
    </mvt:if>
</mvt:foreach>

<!-- doing something with `l.active_products` -->
Correct 
<mvt:assign name="l.active_products_count" value="miva_array_filter( l.settings:products, 1, l.product, 'l.product:active EQ 1', l.active_products )"/>
<!-- doing something with `l.active_products` -->

Use Array.prototype.filter

Incorrect 
const requiredInputs = document.getElementsByClassName('.required');
let invalidInputs = [];

Array.from(requiredInputs).forEach(input => {
    if (!input.validity.valid) {
        invalidInputs.push(input);
    }
});

invalidInputs.forEach(invalidInput => {
    // Do something for each invalid input
});
Correct 
const requiredInputs = document.getElementsByClassName('.required');

const invalidInputs = requiredInputs.filter(input => !input.validity.valid);

invalidInputs.forEach(invalidInput => {
    // Do something for each invalid input
});