Use forEach to iterate through arrays
Use map to transform arrays into new ones
Filter arrays into arrays of different lengths
Use some and every to return booleans from callbacks
Use reduce to accumulate values and transform arrays into other data types
Foundation for functional programming
Reenforcement of more challenging JavaScript concepts
Foundation for declarative programming
Used everywhere in modern libraries and frameworks
Write cleaner and more concise code
method
array
callback function
each value in the array
each index in the array
the entire array
function( ){
}
.forEach(
);
value, index, array
[1,2,3]
The callback function will be executed 3 times since there are 3 values in the array
var arr = [1,2,3];
arr.forEach(function(value, index, array){
console.log(value);
});
// 1
// 2
// 3
// undefined
function forEach(array, callback){
for(var i = 0; i < array.length; i++){
callback(array[i], i, array);
}
}
function halfValues(arr){
var newArr = [];
arr.forEach(function(val){
newArr.push(val / 2);
});
return newArr;
}
halfValues([2,4,6]); // [1,2,3]
Remember - forEach always returns undefined!
var arr = [1,2,3];
arr.map(function(value, index, array){
return value * 2;
});
// [2,4,6]
function map(array, callback){
var newArr = [];
for(var i = 0; i < array.length; i++){
newArr.push(callback(array[i], i, array));
}
return newArr;
}
function tripleValues(arr){
return arr.map(function(value){
return value * 3;
});
}
tripleValues([1,2,3]); // [3,6,9]
function onlyFirstName(arr){
return arr.map(function(val){
return val.first;
});
}
onlyFirstName([{first: 'Tim', last:'Garcia'}, {first:'Matt', last: 'Lane'}]);
// ['Tim', 'Matt]
var arr = [1,2,3];
arr.filter(function(value, index, array){
// no need for an if statement
// just return an expression
// that evaluates to true or false!
return value > 2;
});
// [3]
var instructors = [{name: "Elie"},
{name: "Tim"},
{name: "Matt"},
{name: "Colt"}
];
instructors.filter(function(value, index, array){
return value.name.length > 3;
});
// [{name: "Elie"},{name: "Matt"},{name: "Colt"}];
function filter(array, callback){
var newArr = [];
for(var i = 0; i < array.length; i++){
if(callback(array[i], i, array)){
newArr.push(array[i]);
}
}
return newArr;
}
function onlyFourLetterNames(arr){
return arr.filter(function(value){
return value.length === 4;
});
}
onlyFourLetterNames(['Rusty', 'Matt', 'Moxie', 'Colt']); // ['Matt', 'Colt']
function divisibleByThree(arr){
return arr.filter(function(value){
return value % 3 === 0;
});
}
divisibleByThree([1,2,3,4,5,6,7,8,9]); // [3,6,9]
var arr = [1,2,3];
arr.some(function(value, index, array){
return value < 2;
});
// true
var arr = [1,2,3];
arr.some(function(value, index, array){
return value > 4;
});
// false
function some(array, callback){
for(var i = 0; i < array.length; i++){
if(callback(array[i], i, array)){
return true;
}
}
return false;
}
function hasEvenNumber(arr){
return arr.some(function(value){
return value % 2 === 0;
});
}
hasEvenNumber([1,2,3,4]); // true
hasEvenNumber([1,3,5]); // false
function hasComma(str){
return str.split('').some(function(value){
return value === ',';
});
}
hasComma('This is wonderful'); // false
hasComma('This, is wonderful'); // true
var arr = [-1,-2,-3];
arr.every(function(value, index, array){
return value < 0;
});
// true
var arr = [1,2,3];
arr.every(function(value, index, array){
return value > 2;
});
// false
function every(array, callback){
for(var i = 0; i < array.length; i++){
if(callback(array[i], i, array) === false){
return false;
}
}
return true;
}
function allLowerCase(str){
return str.split('').every(function(value){
return value === value.toLowerCase();
});
}
allLowerCase('this is really nice'); // true
allLowerCase('this is Really nice'); // false
function allArrays(arr){
return arr.every(Array.isArray);
}
allArrays([[1], [2], [3,4]]); // true
allArrays([[1], [2], {}]); // false
Whatever is returned from the callback function, becomes the new value of the accumulator!
method
array
callback function
first value in array or optional second parameter
each index in the array
the entire array
function( ){
}
accumulator,
[1,2,3]
Whatever is returned inside here, will be the value of accumulator in the next iteration.
.reduce(
, optional second parameter)
second value in array or first if optional second parameter is passed
nextValue,
index,
array
var arr = [1,2,3,4,5];
arr.reduce(function(accumulator, nextValue){
return accumulator + nextValue;
});
accumulator | nextValue | returned value |
---|
1 | 2 | 3 |
3 | 3 | 6 |
6 | 4 | 10 |
10 | 5 | 15 |
var arr = [1,2,3,4,5];
arr.reduce(function(accumulator, nextValue){
return accumulator + nextValue;
},10);
accumulator | nextValue | returned value |
---|
10 | 1 | 11 |
11 | 2 | 13 |
13 | 3 | 16 |
16 | 4 | 20 |
20 | 5 | 25 |
var names = ['Tim', 'Matt', 'Colt', 'Elie'];
names.reduce(function(accumulator, nextValue){
return accumulator += ' ' + nextValue;
},'The instructors are');
'The instructors are Tim' | 'Matt' | 'The instructors are Tim Matt' |
accumulator | nextValue | returned value |
---|
'The instructors are' | 'Tim' | 'The instructors are Tim' |
'The instructors are Tim Matt' | 'Colt' | 'The instructors are Tim Matt Colt' |
'The instructors are Tim Matt Colt' | 'Elie | 'The instructors are Tim Matt Colt Elie' |
var arr = [5,4,1,4,5];
arr.reduce(function(accumulator, nextValue){
if(nextValue in accumulator){
accumulator[nextValue]++;
} else {
accumulator[nextValue] = 1;
}
return accumulator;
},{});
accumulator | nextValue | returned value |
---|
{} | 5 | {5:1} |
{5:1} | 4 | {5:1, 4:1} |
{5:1, 4:1} | 1 | {5:1, 4:1, 1:1} |
{5:1, 4:1, 1:1} | 4 | {5:1, 4:2, 1:1} |
{5:1, 4:2, 1:1} | 5 | {5:2, 4:2, 1:1} |
function sumOddNumbers(arr){
return arr.reduce(function(accumulator,nextValue){
if(nextValue % 2 !== 0){
accumulator += nextValue;
}
return accumulator;
},0);
}
sumOddNumbers([1,2,3,4,5]); // 9
function createFullName(arr){
return arr.reduce(function(accumulator, nextValue){
accumulator.push(nextValue.first + " " + nextValue.last);
return accumulator;
}, []);
}
createFullName([{first:"Colt", last:"Steele"}, {first:"Matt", last:"Lane"}]);
// ["Colt Steele", "Matt Lane"]