article

Javascript Array manipulation methods

[WHAT]

1. [] by Don Sagrott, founder @ sospep.com - this article explains several of the methods that you can use to manipulate arrays in javascript. 

[WHY]

1. [] this article is intended to be a quick 1 page reference to the different array methods along with a simple explanation of each method and a simple code example ( with context )
2. [] for many years, i relied far too heavily on javascripts 'for loop' when perhaps there a better way to process array data using one of javascripts built in array methods

[WHERE]

1. [] READ THE FULL ARTICLE
1. [] see below

[WHEN]

1. [] 2017-10-13

[EXAMPLE]

1. [] The Array we will be working with is defined below and is a list of car model names, each array element is a "string" value and there are 5 initial elements, the array's name is cars. 

[HOW-TO]

1. [] use forEach - to iterate the example cars array and modify it by capitalizing the first letter of each car name listed in the array 
2. [] use map - to create a new array of car "objects", based on the car names in the original array, 
3. [] use filter - to create a new array of only the cars that begin with the letter 'C'
4. [] use reduce - to get a total count of the number of characters in all of the modelNames 
5. [] use find - 

[REFERENCE]

1. [] # 7401 - CREATE-article# 5743 (this) 
2. [] Array Methods Explained : Filter vs Map vs Reduce vs Foreach 
3. [] .map, .reduce & .filter, Oh My!
4. [] Array.prototype.forEach() - JavaScript | MDN
5. [] MDN - Array.prototype.reduce()
6. [] += new array methods in es6 - including ] from, ] find, ] findIndex, ] .of, ] for .. of > cc REF 2
7. [] += predicate function, declaritive fluent style, 
8. [] += organize your logic into building blocks of functions, and then chain them to create more readable and understandable implementations.

[ RELATED = ]

1. [x] What You Should Know About ES6 Maps – Hacker Noon 

JavaScript's native Array methods

filter()

- WHAT - very similar to the forEach, takes a callback function as an arguement BUT checks the return value for matching callback criteria and returns a seperate array of data

- returns a new array with a subset of the original arrays elements, subset elements match the given callbacks functionality

- WHY - ] remove duplicate elements, ] find elements matching a particular condition, ...

- WHERE -

> The main difference between 'forEach' and 'filter' is that forEach just loops over the array and executes the callback but filter executes the callback and check its return value. 

aka it RETURNS a seperate array with elements matching the given criteria in the callback function 

KIM - the original 'cars' array still remains intact, we have created a second array, with a subset of elements from the original array that match the given criteria provided in our callback function 

+ ref# 2 - the predicate function you pass to filter() should return either true, to allow that item in the list, or false to skip it.

- EXAMPLE - lets create an array of just the cars whose names start with the letter C

var cCars = cars.filter( function(element, index){

  if (element.charAt(0) == 'C' ) return element ;  

  element.charAt(0) === 'C' ; 

 

} )

// [ Corvette, Camaro, Charger ]  

 

Details

ID: 5743

NAME: JavaScript-Array-Methods

DESCRIPTION: JavaScript-Array-Methods - [] by Don Sagrott, founder @sospep.org - using the native javascript array methods of forEach, map, filter and reduce to manipulate your JavaScript arrays

AUTHOR: article.author/s

EDITOR: article.editor/s

PUBLISHER: article.publisher/s

STATUS: Write

PRIORITY: 0

OWNER ID: 75

photos

actions

Email Email-Owner SMS and