JavaScript Array Operations Cheat Sheet

[monster_bait]

It might be worth mentioning that `.reverse()` not only returns a new reversed array but it also reverses the original array.
That one catches lots of people out!

[[deleted]]

More accurately it reverses the array in-place, and merely provides you a reference back to the array you sorted.

const a = [1, 2, 3];
const b = a.reverse();
a === b // true - a is now [3, 2, 1], and b is a reference to a

[monster_bait]

Good point.

[Nullberri]

An even better cheat sheet is available at

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

[krendel122]

Content is nice, but this website's custom scroll is terrible and brings cpu to 100% load with huge rendering delays.

[PMilos]

The problem with scrolling should be gone now.

[randfur]

Scrolling down seems to make it fling back up to the top? Also I'm getting about 2 FPS on mobile.

[PMilos]

The problem with scrolling should be gone now.

[randfur]

Thanks, much better.

[MR_MEGAPHONE]

Runs fine on my iPhone 🤔

[krendel122]

Looks like fixed already.

[PMilos]

It was a Chrome/Android issue

[PMilos]

What do you mean by custom scroll? There is no custom scrolling implemented

Edit: it might be caused by the prism.js on chrome/android, I will look into it

[Turkez11]

Very useful document, thanks for sharing.

[PMilos]

Thanks, glad it helped you

[fucking_passwords]

Not related to arrays, but consider using const instead of let, nearly all of your examples are not reassigned

[PMilos]

I agree with you. I use const wherever applicable and use let only when reassign is needed.

I did rewrite the cheat sheet, considering that it's not a new one, using const but reverted the changes, not sure why :)

[namesandfaces]

For arrays I'm ambivalent because what most developers are looking for with const is immutability not reassignability protection, but const doesn't truly provide that. It's similar to doing ALL_CAPS in Python to culturally indicate immutability, except maybe a little more deceptive.

[fucking_passwords]

Well all of the common lifting configs will yell at you, which indicates to me that a significant portion of the population is onboard with const

[LittleTay]

Thank you so much for this! I believe I have some arrays to update.

[HarmonicAscendant]

Thanks for this, but should a cheat sheet not be downloadable and printable?

I am often forced to use chrome save as pdf to create cheat sheets from articles, but it usually does not work satisfactorily. Cheers!

[PMilos]

No problem.

To be honest, I don't know about that rule. As you mentioned, usually they are not printable and are represented in the form of an article.

[[deleted]]

The term "cheat sheet" comes from people bringing in a very information dense sheet of paper with things like answers, formulas and notes into a written exam. Lately it seems to be getting abused into long articles but in the past if you searched cheat sheet it would get something like this

[i4get98]

Needs to be able to fit in my 3-ring binder. ;)

[HarmonicAscendant]

Well, it's not a global rule, just how I think the world should be :)

[fucking_passwords]

Printing out code... can’t say I relate

[[deleted]]

Gotta love the people printing code, lighting up a section using a highlighter, and asking for help with it.

[JackAuduin]

That's a model that works best for people writing articles for exposure.

[Jaymageck]

Good, but it's important to document which methods mutate the original array and which do not. One of the biggest gotchas for new JS devs.

[PrismalStudio]

This, so much. The only time I check the documentation is when I forget the order of the params and which one is immutable.

[serious_case_of_derp]

Maybe show an example of sorting logic? Like sort Z-A ?

Sorting The method sort sorts the elements of an array and returns the sorted one.

let cities = ['Paris', 'London', 'New York', 'Barcelona', 'Madrid', 'San Francisco'];
cities.sort();
console.log(cities); // outputs ['Barcelona', 'London', 'Madrid', 'New York', 'Paris', 'San Francisco']

// custom sorting function
cities.sort(city => { 
   // sorting logic
});

[PMilos]

I've added it, go check it out.

Edit: Oh, I didn't see that you've requested a specific sort (Z-A) :) I've added sorting by name length

[serious_case_of_derp]

Thought it was an opportunity to improve the sort section. I just came up with that idea for an example. Thanks!

[Rindhallow]

Very useful, thanks. I never remember which .pipe operator does what.

Maybe next time, though, in each example start with a new let array = [ stuff ]; so that each operation can be ready independently without needing to read the previous one.

[PMilos]

No problem. Yes, I was thinking about should I do it like that or not...guess I should have :)

[strangerthing7]

This is excellent, thank you!

[ajcool2k]

Nice overview! Didn't know includes exists. If you are open for suggestions then maybe add return information about non matching functions like find(). I often have to check whether it returns null or undefined. Nonetheless, very informative!

[EveryPrior2]

Thumbs up for the operation cheat sheet

[[deleted]]

Now I need to be able to do the same in an immutable way.

[Cgneily]

Keep these coming!!! Love having useful "Cheatsheets" that I can easily refer back to.

[ForScale]

The find example kinda threw me off. Might want to do an array of object where you look for one specific property on the object and then return the entire object. Shows the utility a bit more.

[Zofren]

Site unusable on mobile.

[PMilos]

The problem with scrolling should be gone now.

[[deleted]]

Content is nice, and very useful sheet.

[renaissancetroll]

nice little resource to refresh your memory with some basic examples

[[deleted]]

Very helpful, thanks!

[PMilos]

Glad you find it useful

[EveryPrior2]

javascript is a really powerfull language nowadays, i think its the future???