Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Benchmarking Javascript Loops and Methods
// Examples of primitive arrays
let namesArray = ['Abe', 'Beth', 'Cody', 'Daniel'];
let textArray = ['Dog', 'Cat', 'Horse', 'Cow'];
let numbersArray = [1, 2, 3, 4];
// starter-code.js
// Objectives:
// 1. Find the value 7
// 2. Find the index of 7
const OBJECTIVE_NUMBER = 7;
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let foundValue;
let foundIndex = -1;
// for
// Using array and variables from base code block above… (starter-code.js)
for (let index = 0; index < arr.length; index++) {
const value = arr[index];
if(value === OBJECTIVE_NUMBER) {
foundValue = value;
foundIndex = index;
break;
}
};
console.log(foundValue); // expected output: 7;
console.log(foundIndex); // expected output: 6;
// for...of
// Using array and variables from base code block above… (starter-code.js)
for (const value of arr) {
if(value === OBJECTIVE_NUMBER) {
foundValue = value;
}
};
console.log(foundValue); // expected output: 7;
// forEach
// Using array and variables from base code block above… (starter-code.js)
arr.forEach((value, index) => {
if(value === OBJECTIVE_NUMBER) {
foundValue = value;
foundIndex = index;
}
});
console.log(foundValue); // expected output: 7;
console.log(foundIndex); // expected output: 6;
// while
// Using array and variables from base code block above… (starter-code.js)
let length = arr.length;
let index = 0;
while(index < length) {
const value = arr[index];
if(value === OBJECTIVE_NUMBER) {
foundValue = value;
foundIndex = index;
index = length - 1;
}
index++;
};
console.log(foundValue); // expected output: 7;
console.log(foundIndex); // expected output: 6;
// do...while
// Using array and variables from base code block above… (starter-code.js)
let length = arr.length;
let index = 0;
do {
const value = arr[index];
if(value === OBJECTIVE_NUMBER) {
foundValue = value;
foundIndex = index;
index = length - 1;
}
index++;
} while (index < length);
console.log(foundValue); // expected output: 7;
console.log(foundIndex); // expected output: 6;
// find
// Using array and variables from base code block above… (starter-code.js)
foundValue = arr.find((value, index) => {
if(value === OBJECTIVE_NUMBER) {
foundIndex = index;
return true;
}
return false;
});
console.log(foundValue); // expected output: 7;
console.log(foundIndex); // expected output: 6;
// findIndex
// Using array and variables from base code block above… (starter-code.js)
foundIndex = arr.findIndex((value, index) => {
if(value === OBJECTIVE_NUMBER) {
foundValue = value;
return true;
}
return false;
});
console.log(foundValue); // expected output: 7;
console.log(foundIndex); // expected output: 6;
// indexOf
// Using array and variables from base code block above… (starter-code.js)
foundIndex = arr.indexOf(OBJECTIVE_NUMBER);
console.log(foundIndex); // expected output: 6;
// lastIndexOf
// Using array and variables from base code block above… (starter-code.js)
foundIndex = arr.lastIndexOf((value, index) => {
if(value === OBJECTIVE_NUMBER) {
foundValue = value;
return true;
}
return false;
});
console.log(foundValue); // expected output: 7;
console.log(foundIndex); // expected output: 6;
// includes
// Using array and variables from base code block above… (starter-code.js)
// Not very useful at finding the value or index, but it is nice to know if it is there. :)
let valueExists = arr.includes(OBJECTIVE_NUMBER);
console.log(valueExists) // expected output: true;
// map
// Using array and variables from base code block above… (starter-code.js)
// This an anti-pattern when used ONLY to loop and find a value/index rather than the intended function of returning a new array.
arr.map((value, index) => {
if(value === OBJECTIVE_NUMBER && foundIndex !== -1) {
foundValue = value;
foundIndex = index;
}
});
console.log(foundValue); // expected output: 7;
console.log(foundIndex); // expected output: 6;
// filter
// Using array and variables from base code block above… (starter-code.js)
// This an anti-pattern when used ONLY to loop and find a value/index rather than the intended function of returning a new array.
foundValue = arr.filter((value, index) => {
if(value === OBJECTIVE_NUMBER && foundIndex !== -1) {
foundIndex = index;
}
})[0];
console.log(foundValue); // expected output: 7;
console.log(foundIndex); // expected output: 6;
// reduce
// Using array and variables from base code block above… (starter-code.js)
// This an anti-pattern when used ONLY to loop and find a value/index rather than the intended function of returning a new value.
arr.reduce((accumulator, value, index) => {
if(value === OBJECTIVE_NUMBER && foundIndex !== -1) {
foundValue = value;
foundIndex = index;
}
return accumulator;
});
console.log(foundValue); // expected output: 7;
console.log(foundIndex); // expected output: 6;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment