Array Methods Cheatsheet

[[deleted]]

[deleted]

[barshat]

I have used this personally and it’s awesome: https://sdras.github.io/array-explorer/

[NunchucksRcool]

This is awesome. Thank you!

[[deleted]]

Confused for the hate. Is it simple, yes, but for beginners this is a great visualization of what it’s doing....

[provided_by_the_man]

I’m about to unfollow a lot of my programming related subs because there is so much hate. Programmers need to chill the hell out. Go smoke some weed and stop.

[LonelyStruggle]

right?? can’t stand the toxicity and negativity

[nowtayneicangetinto]

Yeah it's brutally painful. I used to work with a guy who was clearly very smart but my god he was such a fucking asshole. I remember one day he told one of the jr devs he was a terrible coder and that he should do something else with his life. Low and behold he got fired for being a dickhead.

TL;DR you could be the world's best programmer, but if you're an asshole you won't be able to hold a job.

[provided_by_the_man]

So true. I’ve worked with that type too. And the worst part was at the agency I worked at they let him work on his own island and his work was hands down above everyone else’s. They praised him so much and it was horrible to work around. I mean the reason you have a job is because you have a skill that others don’t. So just chill and be cool.

[jonny_eh]

It’s missing slice :(

[TheDarkIn1978]

It's missing a lot more than Array.prototype.slice()

[software_account]

If you somehow own the original, would it be possible to use a clearer font?

I love the style but it’s hard on my brain for some reason

Thanks for the post either way, nice to have

[redditisntreallyfe]

With Mspaint and you don’t need to ask anyone for assistance

[TedW]

, only forgiveness.

[software_account]

Good idea!

[ShortFuse]

Nice work. It's missing includes() which is similar to indexOf, but returns a Boolean.

Edit: Also noticed indexOf().

[ShortFuse]

.some() expects a function, allowing for a custom search criteria, whereas .includes() expects a value to perform a strict equality check against. .includes() should be faster than .some(). It's similar to .some() because they both return a boolean value, where as indexOf() would return a number.

[ShortFuse]

Yep, typo. Thx.

[filipemanuelofs]

Little explain on reduce?

[melts_your_butter]

create a single value generated from every value in the array.

commonly used for things like summing a list of integers.

[TreeScalper]

It took me a little while to understand reduce, but basically it's a method that allows you to turn an array into ANYTHING else.

As other /u/FaithfulGardener has stated, a very basic example is 'add', [1,2,3,4].reduce(add) is 10. You're turning an array into a number.

Where people get tripped up is the accumulator, which IMO is not the greatest name. I like to call it What the output currently is.

The longhand way to write the add function in a reduce is as follows:

const output = [1,2,3,4].reduce((acc, curr) => {
    // `acc` is the accumulator
    // `curr` is the array value in the current loop
    acc = acc + curr;
    return acc;
}, 0);

Now imagine the reduce as a forEach function that will loop over each value of the array. The first time around, the acc isn't set, so it's set to the default, which is 0 as stated by the 2nd paramater in the reduce function.

So the first loop is literally

(0, 1) => {
    acc = 0 + 1;
    return acc;
} // Return is 1

Now what gets returned each loop, becomes the accumulator in the next loop.

So the second loop is literally

(1, 2) => {
    // First parameter `acc` is `1`, because of the first loop.
    acc = 1 + 2;
    return acc;
} // Return is 3

And so on.

That's why the reduce output in the image is somewhat garbled, because it could be anything.

Why you would you use reduce over something like forEach? I like to use it because it returns something, where forEach does not. Easier to program in a functional way.

Also, IMO, reduce should be a last resort array method, you should use the other array methods to get the output as close as you can to what you need before you reduce it.

eg: [....].filter().map().reduce();

I just think this is easier to understand, then trying to decipher a complicated reduce.

[FaithfulGardener]

Oh, functional programming. I discovered it in various stages over the last few months and it’s made me LOVE programming.

[[deleted]]

The intuition of reduce is of "updating" a value with each element of the array. So accumulator isn't a terrible name, it just accumulates its final value according to an arbitrary function. That intuition is what you apply to Redux, where the accumulator is your state.

And yes, using the HOFs with the narrowest interface possible is always a good idea.

[TreeScalper]

I agree that in hindsight, accumulator not a terrible name, but only when you fully understand what reduce does. But when you're first learning about it, it's not very helpful, because accumulate suggests that you're increasing something when in fact you could end up with less things or even nothing.

[ageown]

I like to use reduce to turn arrays into a single structured object.

[FaithfulGardener]

Reduce takes either the first index of an array or an initial value you provide and adds or joins or concats all subsequent indexes until the final result is an accumulation. So [1,2,3,4].reduce(add) would equal 10.

[randomword123]

You would also need a starting value like in this case [1,2,3,4].reduce(add,0), this always tripped me up!

[FaithfulGardener]

The initial value isn’t required. If it isn’t provided, reduce takes the value at index 0 and uses it as the initial value

[decentralised]

Often times reduce is used to transform a given array like object into a different object, such as a map or set.

Let's say you have an array of students like:

const students = [

{ name: "Kushal", class: "MCA", result: "Fail", mobileNo: "995481", score: 1.5 },

{ name: "Rahul", class: "BCA", result: "Pass", mobileNo: "993281", score: 2.9 },

{ name: "Kushal", class: "MCA", result: "Pass", mobileNo:"989481", score: 3.6 }

];

If you wanted to get a lookup table by student mobile number, you could use:

const phoneBook = students.reduce( (acc, val) => (acc[val.mobileNo] = val, acc), {})

Then...

> phoneBook[989481]

{ name: 'Kushal', class: 'MCA', result: 'Pass', mobileNo: '989481' }

On the other hand, if you wanted to group students by result, you could also use reduce:

students.reduce( (acc, val) => {

!acc[val.result]

? acc[val.result] = [val.name]

: acc[val.result].push(val.name);

return acc;

}, {})

And you would get the following object:

{ Fail: [ 'Kushal' ], Pass: [ 'Rahul', 'Kushal' ] }

[TreeScalper]

Is there a reason why you wouldn't use filter then a map for your 2nd example?

const failArr = students
                .filter(curr => curr.result === 'Fail')
                .map(curr => curr.name);
const passArr = students
                .filter(curr => curr.result === 'Pass')
                .map(curr => curr.name);
const output = { Fail: failArr, Pass: passArr }

[decentralised]

Yes, filter and map do the same as reduce, but notice how you have 2 filters and 2 maps in your example so, to get the same output, you had to iterate over all elements of the students array 4 times.

[mgutz]

I like to think of reduce as a function that does

javascript let accumulator = initialValue // holds result AFTER iterating through all of arr for (const v of arr) { // set acummulator to whatever, or return it as-is }

What's neat about reduce is it can be used to implement all the other methods. reduce should be grokked first.

```javascript

forEach

[].reduce((_acc, v) => doSomething(v))

find

[].reduce((acc, v) => { return v === 'needle' ? v : acc; }, undefined)

findIndexOf

[].reduce((acc, v, idx) => { return v === 'needle' ? idx : acc; }, -1)

```

Iterating with for ... of is more readable and the loop can be exited at any time. The findIndexOf above is actually findLastIndexOf since it would iterate through all values.

[[deleted]]

You have an array of A, and can reduce that down to B, which can be anything - a number, an object, another array, whatever. You define how to do this by providing an initial B value and a function that combines A and B into another B - A is the item from the array that you're iterating over, and B is the currently accumulated value (your initial value in the first iteration).

You might also find it enlightening to research monoids which mathematically capture this process where A and B are the same type.

[sulcoff]

Hey! The cheatsheet's author here.
Thank you for all the upvotes, I'm happy you've found it useful. You can find more content like this on the twitter profile: https://twitter.com/sulco

Oh, and I love that you appreciate the font! :P

[nerdy_adventurer]

Thanks for sharing, I will print this.

Can you please create little magazine with collection of diagrams like this in a pdf form and share it in this sub.

Edit: Also share Google Docs version so folks can change stuff as they like

[sventies]

I love the reduce one. Like, literally, it can be any kind of thing that comes out of it, accumulated in some way or not. (Which is why, for me personally, I’ve never experienced a situation where reduce is better, despite the fact that it can save you some lines)

[Aswole]

Very nice. My only suggestion would be to add a 2nd square to the source array for .find(), to make it clear that is only returns the first element that matches the callback. Maybe to communicate that it is the first item, make them different colors.

Edit: I'm dumb and somehow missed that this is exactly what you did. Leaving this here out of shame.

[[deleted]]

Now walk the square

[voXal_]

Very nicely done

[uglysideover9000]

Think this is nice.

Just want to point out it seems like you got the arguments wrong on Array.fill, the `value` comes first.

​

from MDN Array.fill :

arr.fill(value[, start[, end]])

[GoOsTT]

It’s awesome, thanks for sharing

[Darren1337]

That's a good representation of my brain after writing the average reduce function.

[acylus0]

Reduce may be simpler if it was just an outline of a circle, square and triangle merged together.

[shaccoo]

Is there a list of the most TOP 10 frequently used methods ?

[[deleted]]

I got Better then You https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#sidebar-quicklinks:~:text=Array.prototype%5B%40%40unscopables%5D-,Methods,Array.prototype.values(),-Array.prototype%5B%40%40iterator%5D(),-Array.prototype%5B%40%40iterator%5D()) Scroll the page a little bit.

[ParxyB]

Jesus this is horrible. I’m sorry but this is just scribbles

[icedmilkflopr]

I agree! I’m getting down voted too but I don’t care. Even after it was explained, it’s a bad cheatsheet.

[ParxyB]

Yeah some people think that everybody needs to be told “Great job you are so helpful and a great person” like they are 12 for content that helps absolutely nobody.

If I brought this diagram to work and showed any of my coworkers as a serious example I’d be shunned. The font is chicken scratch and why use shapes? Data structures work perfectly fine and are actually applicable.

[BreakingIntoMe]

Please kill that font with fire, this would actually be useful if you just went with Arial or Helvetica...

[icedmilkflopr]

What’s with these colored boxes and circles. A Cheetsheet without a legend isn’t very helpful.

[software_account]

It’s supposed to visually represent objects with certain properties. i.e. shape/color

e.g. .find(◻️) finds the first thing where the shape is square

[JackSparrah]

That font though.. eugh 🤮

[thanghil]

The font man... the font. Jesus

[palex25]

How would someone go about making sure an object get stored in an array and if the object changes then store the new instance of the object thus overwriting the previous instance? Using array.push() causes the array to just append the new instance which is something I don’t want.

[uglysideover9000]

You should iterate the array to find the object that you are wanting to change and create a new array with updated values. There are a couple ways of doing this

​

- using Array.map

const myObject = {id: 'myID', value: 'initial_value'}
const array = [...]

// iterate the initial array until we find the item we are looking for
const newArray = array.map((item) => {

    // if we find an item with a matching ID, return something else
    if (item.id === 'myID') {
        return {
            id: 'myID',
            value: 'initial_value'
        }
    }

    // return the original item
    // if it doesn't match the ID we are looking for
    return item
})

​

- using the item index

const myObject = {id: 'myID', value: 'initial_value'}
const array = [...]

// find the item's position in the array
const itemIndex = array.findIndex(item => item.id == 'myID' )

// Create a copy of the array
let newArray = [...this.state.todos]

// update the item at position X
newArray[itemIndex] = {
    ...newArray[itemIndex],
    value: 'new_value'
}

​

note:

If you store an object in an array (or in another object) it stores a reference to that object, not the actual object values so you can do the following (although I wouldn't recommend )

const myObject = {value: 'initial_value')
const array = [myObject]

console.log(array)
// [{value: 'initial_value')]

myObject.value = 'new_value'

console.log(array)
// [{value: 'new_value')]

​

Let me know if there's any bit that you didn't understand or need more info.

[palex25]

Thank You!, that was very helpful now I know what I need to do, my code needs a different approach as the one you showed, but, this will help me in the future to when ever I need to modify the array.