#array methods

Math.max simply takes a set of numbers and returns the maximum. Although it is a simple operation, it has many applications. Firstly, here is how it works:

console.log(Math.max(1, 3, 1)); // 3 const arr = [1, 3, 1]; // The spread syntax converts the array into a set of arguments // It is supported in all modern browsers except IE (but has MS Edge support) console.log(Math.max(...arr)); // 3

It works especially well when you have a list of items that convert to numbers automatically in calculations. For example, with dates which return the timestamp since 1970 in calculations:

const dates = [ new Date('2011/06/25'), new Date('2011/06/28'), new Date('2011/06/27'), new Date('2011/06/26') ]; const maxDate = new Date(Math.max(...dates)); console.log(maxDate); // 2011-06-28T04:00:00.000Z (Format varies per environment)

Combining it with maps makes working with array of objects easy:

const cars = [ { hp: 155, weight: 2400 }, { hp: 237, weight: 2465 }, { hp: 217, weight: 2000 } ]; console.log(Math.max(...cars.map((car) => car.hp))); // 237

There is one weakness with Math.max since JS and environments that implement it have argument amount limits: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply#Using_apply_and_built-in_functions. So when large amounts of data (e.g. more than 1000 items), an Array.reduce based map can be used instead:

// The 0 is the value to set the accumulator to intially const maxHp = cars.reduce((maxHp, car) => Math.max(maxHp, car.hp), 0); console.info(maxHp); // 237

Most Important Array Methods in JavaScript

Understand the Array in JS  Similar to arrays in other programming languages, the Array object permits the storage of a collection of various elements under a single variable name and provides members for carrying out standard array operations. 1. forEach For each element in an array, the forEach() method performs the specified function once. For each entry in an array, in ascending index…

New Post has been published on https://www.codesolutionstuff.com/important-array-methods-in-javascript/

Most Important Array Methods in JavaScript

Javascript Array Methods Example: Grocery Checkout

Inspired to code this from last night’s Adrienne Tacke’s talk ‘Delicious Javascript’. I admit that using multiple javascript array methods are very difficult, especially when my background is in PHP. Adrienne’s technique helps me to have a better understanding, especially in AngularJS array methods are commonly used. So I try to do it with my example Grocery, and April’s Shopping List. Check it…

Array deletion is an often misunderstood concept in JavaScript, partly because there is so may different ways to do it. This post attempts to clear that up.

Firstly, the most obvious method of deletion via the delete keyword does not delete in the normal way you would expect:

const arr = [1,2,3,4,5]; delete arr[2] console.log(arr); // [ 1, 2, , 4, 5 ] console.log(arr[2]); // undefined

So it just sets it to undefined. To avoid this, Array.splice can be used:

const arr = [1,2,3,4,5]; arr.splice(arr, 2, 1); console.log(arr); // [ 1, 3, 4, 5 ] console.log(arr[2]); // 4

There is another more obscure way too:

const arr = [1,2,3,4,5]; arr.length = 4; console.log(arr); // [ 1, 2, 3, 4 ] arr.length = 1; console.log(arr); // [ 1 ]

I don't think there are any reasons to use this method beyond stopping a forEach loop (or other callback based synchronous loops) early:

const arr = [1,2,3,4,5]; arr.forEach((element) => { console.log(element); if (element === 3) { arr.length = 0; } }); // 1 // 2 // 3

Which is a strange thing to do in the first place.

Finally, the deleted item can be searched for and removed. This is slower than Array.splice (since it needs to loop through the entire array), but it is easy to understand and does not mutate the original array:

const arr = [1,2,3,4,5]; const newArr = arr.filter((element) => element !== 3); console.log(arr); // [ 1, 2, 3, 4, 5 ] console.log(newArr); // [ 1, 2, 4, 5 ]

If you come from an Object-Oriented Programming background, as I do, you might find functional programming confusing. I know I did when I was first learning it. Starting out with Python left me a bit spoiled! And what’s so bad about for loops anyway?

Okay, well, it turns out functional programming can be very powerful (and its also kind of cool). In this particular post, I’ll talk about three functional methods available on Array.prototype: map, filter and reduce.

Array.prototype.map

To me, this is like the gateway functional programming method. It isn’t too complicated. You call map on an array, and it just does something to everthing in the array, and saves it in a new array. It’s like making a photocopy, only you added a little something - like sticky notes? I don’t know, the metaphor is breaking down.

I’m going to give you an example that involves cats, because I like cats, so there.

Let’s start with an array of cat objects:

var cats = [ { name:'Lil Bub', famous: true }, { name: 'Artemis', famous: false }, { name: 'Maru', famous: true }, { name: 'Hubble', famous: false }, { name: 'Grumpy Cat', famous: true }, { name: 'Garfield', famous: true } ];

(Yes, two of those are my cats, of course.)

Let’s say we want to add a default favorite food to each cat after the fact. We might be inclined to write do something like this:

var newCatsArray = []; var newCat; for (var i in cats) { newCat = { name: cats[i].name, famous: cats[i].famous, favoriteFood: cats[i].name === 'Garfield' ? 'lasagna' : 'fish' } newCatsArray.push(newCat) }

Cool. After going through all those iterations, we do end up with a new cat array that does contain a favorite food (fish by default, lasagna if it’s Garfield). There’s nothing really.. wrong with this code. It’s just a bit long, and there’s some stuff in there that you have to remember (for example, using cats[i] to represent the current cat). It just takes you a moment to know what’s happening, and it looks a bit messy. I think we can do better!

Let’s try this using map:

var newCatsArray = cats.map(function(cat, i){ return { name: cat.name, famous: cat.famous, favoriteFood: cat.name === 'Garfield' ? 'lasagna' : 'fish' } });

And that’s it! Now newCatsArray is a new array containing cats, their fame status, and their favoriteFood. It’s pretty clear what’s happening - we’re creating a copy of the array with something new. And we’re able have the entire modification happen in nice, simple line of code - we’re just returning the new object.

Array.prototype.filter

Next up is filter. I think this method is a fairly easy one to understand once you get the hang of it. Basically, we’ll call filter on our array, and as an argument, we’ll provide a callback function. Filter will return a new array that only contains the elements of the original array for which the function returned true.

Back to our cats:

var cats = [ { name:'Lil Bub', famous: true }, { name: 'Artemis', famous: false }, { name: 'Maru', famous: true }, { name: 'Hubble', famous: false }, { name: 'Grumpy Cat', famous: true }, { name: 'Garfield', famous: true } ];

Okay, so I love my cats. But maybe you’re like “I don’t care about your dumb, non-famous cats! Give me a list of just the famous ones!”

Fine, fine, I understand. Let’s get a new array of cats that only includes famous ones:

var famousCats = []; for (var i in cats) { if (cats[i].famous) { famousCats.push(cats[i]); } }

Hmm, that’s okay, but given what we learned in the last section, I’m sure you can see that there might be a nicer way to do this. Let’s see what we can do with filter:

var famousCats = cats.filter(function(cat) { return cat.famous; });

That’s literally it. How cool is that? Way more readable than the for loop above (even if I do love me a good for loop, I have to admit this essentially one-line piece of code is a lot more elegant!)

Array.prototype.reduce

Okay, so filter and map may take a moment to get used to, but they’re pretty straightforward. Things get pretty weird when you start using reduce, but bear with me.

The reduce method is going to take a callback function, too. Instead of going through each item in the array, however, it’s going to do something a little different. On each iteration, it will have a previousItem and currentItem argument. Basically, you’re going to be processing 2 items at a time until your array is down to 1 item. And then, you get that one item returned.

A bit confusing, but let’s try an example.

Say we’re back to our famous and non-famous cats array:

var cats = [ { name:'Lil Bub', famous: true }, { name: 'Artemis', famous: false }, { name: 'Maru', famous: true }, { name: 'Hubble', famous: false }, { name: 'Grumpy Cat', famous: true }, { name: 'Garfield', famous: true } ];

In the last exercise, you didn’t want to see my cats in the list (mean!). But now, you actually just want to know what are the names of my cats. That’s it. But you want a string, not an array.

Hmm, this poses a problem. Our other methods return arrays.

Without we might start with a simple iterative approach, after filtering out the famous cats:

var str = "Allie's cat's are named: "; var myCats = []; for (var i in cats) { if (!cats[i].famous) { myCats.push(cats[i].name) }; } str += myCats.join(" & ");

But using filter and reduce together, we can take your array and reduce it down to a single element with no trouble. Check it out:

var str = "Allie's cats are named: "; str += cats.filter(function(cat) { return !cat.famous; }).reduce(function(previousCat, currentCat) { return previousCat.name + " & " + currentCat.name + "."; });

Console logging str, we would see: “Allie’s cats are named: Artemis & Hubble.”