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>
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
}
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>
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` -->
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
});