Coner Murphy Profile picture
Mar 24, 2022 โ€ข 39 tweets โ€ข 12 min read โ€ข Read on X
๐Ÿ“ฃ Massive JavaScript Resource Collection ๐Ÿ“ฃ

All 37 JavaScript Array methods (current & experimental) explained in images ๐Ÿ‘‡
1๏ธโƒฃ Array .at()

.at() lets us access elements in an Array by providing an index.

Both positive and negative ones are supported. ๐Ÿ‘‡
2๏ธโƒฃ Array .concat()

This method lets us join multiple arrays into one while leaving the original one untouched.

New arrays are added to the end of the previous ones. ๐Ÿ‘‡
3๏ธโƒฃ Array .copyWithin()

.copyWithin() let's copy elements within an array to another location within that array. ๐Ÿ‘‡
4๏ธโƒฃ Array .entries()

.entries() returns a key/value pair for each index in the array, we can then loop through the iterator using a for...of loop. ๐Ÿ‘‡
5๏ธโƒฃ Array .every()

.every() lets us test every value in an array against a provided function, if they all pass it returns true, otherwise false. ๐Ÿ‘‡
6๏ธโƒฃ Array .fill()

.fill() lets us fill either an entire array or part of one with a given value. ๐Ÿ‘‡
7๏ธโƒฃ Array .filter()

.filter() allows us to filter an array to only the values that pass a provided test function. ๐Ÿ‘‡
8๏ธโƒฃ Array .find()

.find() allow us to test each item in an array, the first value that passes the test is returned. ๐Ÿ‘‡
9๏ธโƒฃ Array .findIndex()

Similar to .find() but this time instead of returning the first element that passes the test, we return the index of it. ๐Ÿ‘‡
1๏ธโƒฃ0๏ธโƒฃ Array .flat()

.flat() lets us flatten nested arrays down levels. We can control the number of levels falttened by using the depth parameter. ๐Ÿ‘‡
1๏ธโƒฃ1๏ธโƒฃ Array .flatMap()

.flatMap() is like calling a .map() followed by a .flat() but it will only let us flatten one level of arrays. ๐Ÿ‘‡
1๏ธโƒฃ2๏ธโƒฃ Array .forEach()

.forEach() allows us to iterate over an array. .forEach() does not return any values from the array, only undefined. ๐Ÿ‘‡
1๏ธโƒฃ3๏ธโƒฃ Array .from()

.from() lets us create a new array from an array-like value, we can also map over each item as we create the new array ๐Ÿ‘‡
1๏ธโƒฃ4๏ธโƒฃ Array .includes()

.includes() lets us search an array for a provided value if it's found in the array, true is returned otherwise false ๐Ÿ‘‡
1๏ธโƒฃ5๏ธโƒฃ Array .indexOf()

.indexOf() lets us search an array for a given value, if it's found it's index is returned.

.indexOf() will return on the first occurrence of the value ๐Ÿ‘‡
1๏ธโƒฃ6๏ธโƒฃ Array .isArray()

.isArray() allows us to test if a provided value is an Array or not. ๐Ÿ‘‡
1๏ธโƒฃ7๏ธโƒฃ Array .join()

.join() takes a provided string and joins each element in the array with it. ๐Ÿ‘‡
1๏ธโƒฃ8๏ธโƒฃ Array .keys()

.keys() creates an iterator that contains all of the indexes in the array, black spaces aren't ignored. ๐Ÿ‘‡
1๏ธโƒฃ9๏ธโƒฃ Array .lastIndexOf()

.lastIndexOf() returns the last index that a provided element is found at in an array. ๐Ÿ‘‡
2๏ธโƒฃ0๏ธโƒฃ Array .groupBy()

.groupBy() is one of the newest array methods, it allows us to group objects in an array by properties they share. ๐Ÿ‘‡
2๏ธโƒฃ1๏ธโƒฃ Array .groupByToMap()

.groupByToMap() was added along with .groupBy(), it allows us to group objects like .groupBy() but it then allows us to add them to a Map object based on a property. ๐Ÿ‘‡
2๏ธโƒฃ2๏ธโƒฃ Array .map()

.map() lets us iterate over an array and return a new array with the new values from any manipulations we perform. ๐Ÿ‘‡
2๏ธโƒฃ3๏ธโƒฃ Array .of()

.of() allows us to create a new array from the values we pass to it, regardless of the quantity or their type. ๐Ÿ‘‡
2๏ธโƒฃ4๏ธโƒฃ Array .pop()

.pop() removes the last item from the array and returns it. ๐Ÿ‘‡
2๏ธโƒฃ5๏ธโƒฃ Array .push()

.push() allows us to add multiple new items to an array, it returns the updated array's length. ๐Ÿ‘‡
2๏ธโƒฃ6๏ธโƒฃ Array .reduce()

.reduce() lets us define a custom reducer function to be performed on each element in the array, going from left to right in the array. ๐Ÿ‘‡
2๏ธโƒฃ7๏ธโƒฃ Array .reduceRight()

.reduceRight() is the same as .reduce() but instead going from right to left in the array. ๐Ÿ‘‡
2๏ธโƒฃ8๏ธโƒฃ Array .reverse()

.reverse() will reverse an array in place, meaning the first item becomes the last and the last the first. ๐Ÿ‘‡
2๏ธโƒฃ9๏ธโƒฃ Array .shift()

.shift() removes the first item from the array and returns it. ๐Ÿ‘‡
3๏ธโƒฃ0๏ธโƒฃ Array .slice()

.slice() allows you to take a copy of an array either as a whole or part of it. The original array is left untouched. ๐Ÿ‘‡
3๏ธโƒฃ1๏ธโƒฃ Array .some()

.some() checks if at least one item in an array passes the provided test function, if so it returns true otherwise false. ๐Ÿ‘‡
3๏ธโƒฃ2๏ธโƒฃ Array .sort()

.sort() allows you to sort an array based on a provided sorting function. ๐Ÿ‘‡
3๏ธโƒฃ3๏ธโƒฃ Array .splice()

.splice() allows you to remove or replace items in an array and return the removed/replaced items. ๐Ÿ‘‡
3๏ธโƒฃ4๏ธโƒฃ Array .toLocaleString()

.toLocaleString() will convert the array it's called on to a string and then separate the string with a locale-specific string (e.g. ',') ๐Ÿ‘‡
3๏ธโƒฃ5๏ธโƒฃ Array .toString()

.toString() will recursively flatten an array until it's one level and convert it to a string separated by a comma. ๐Ÿ‘‡
3๏ธโƒฃ6๏ธโƒฃ Array .unshift()

.unshift() adds one or more values provided to the beginning of the array and returns the updated length of the array. ๐Ÿ‘‡
3๏ธโƒฃ7๏ธโƒฃ Array .values()

.values() returns an iterator object containing a value for every index in the array which we can then loop over with a for...of loop. ๐Ÿ‘‡
Did you enjoy this thread/find it helpful?

If so please consider doing one of the below to show your support:

โค๏ธ Like these tweets
๐Ÿ”„ Retweet the 1st tweet in this thread so others can see it.
๐Ÿ‘ค Follow me ( @MrConerMurphy ) for more content like this.
๐Ÿ”” Turn on notifications

โ€ข โ€ข โ€ข

Missing some Tweet in this thread? You can try to force a refresh
ใ€€

Keep Current with Coner Murphy

Coner Murphy Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @MrConerMurphy

Dec 18, 2021
Want to earn some extra cash as a developer? ๐Ÿ’ฐ

Here's how to get paid for writing blog posts, even if you've never written one before. ๐Ÿ‘‡ Image
1๏ธโƒฃ Write Posts For Free

Before you can apply to any paid programmes or blogs, you need to write posts.

This helps refine and sharpen your skills and abilities. After all, people won't pay you to write blog posts if they can't understand what you're writing.
1๏ธโƒฃ Write Posts For Free Part 2

Start by self-publishing posts on platforms like Hashnode, Medium or your own blog.

It doesn't matter where you publish the blog posts, just start writing and get your work out there.

My only advice is to publish on a domain you own.
Read 9 tweets
Aug 23, 2021
Everything you need to know about CSS Flexbox Align Items property. ๐Ÿ‘‡

A thread. ๐Ÿงต
Quick Note

Before jumping into the thread, I just want to ask a small favour. ๐Ÿ™

It took a lot of time to create the content for this thread so I would love it if you would consider retweeting the 1st tweet so as many people as possible can see it.

Thank you ๐Ÿ˜„
Before looking at align-items you need to have an understanding of the different flex-direction values and how they influence the main-axis and the cross-axis.

Not sure what these are?

Don't worry I have you covered in this thread.

๐Ÿ”—
Read 14 tweets
Aug 22, 2021
๐Ÿ‘‹ Hey Everyone ๐Ÿ‘‹

Do you like the content I create here?

I'm also active on other platforms and services.

Check out the links below ๐Ÿ‘‡
1๏ธโƒฃ LinkedIn

I've been releasing a lot of content on LinkedIn recently.

Feel free to connect with me ๐Ÿ‘‡

๐Ÿ”— linkedin.com/in/coner-murphโ€ฆ
2๏ธโƒฃ Email Newsletter

I have an Email Newsletter where I send out various types of content from coding topics to more personal topics like wellbeing.

Sign up below ( make sure to check your spam):

๐Ÿ”— coner-murphy.ck.page/a1344c86d6
Read 4 tweets
Aug 21, 2021
Here are 4 of the most popular ways to loop over Arrays in JS.

What's your favourite?

Thread ๐Ÿงต Image
1๏ธโƒฃ For Loop

The for loop is one of the fundamentals of the language due to its versatility. It's no different when it comes to looping over an array.

The for loop works by creating a variable and incrementing it while a condition is true, we then access the index. Image
2๏ธโƒฃ While Loop

A slightly more unusual way of looping through arrays is the while loop.

Similar to the for loop, the while loop will loop while a condition is true but unlike a for loop, it doesn't have a pre-determined end and instead will go forever while true. Image
Read 7 tweets
Jul 31, 2021
Starting your first role as a web developer is a challenge on its own.

But, something that's not often covered is the importance of checking your contract.

Here are 5 things you must check in your contract as a new web developer.

Thread ๐Ÿงต

1/11
1๏ธโƒฃ Side Project / Business Ownership

It's not uncommon for some businesses to try to take complete ownership of the work you do. This includes work outside of the business which might be side projects or businesses you have.

2/11
If your contract has a clause like this, try to get it removed or an exemption created.

This will protect you in the future should your business become successful or you want to sell products. If this clause is still in place your employer can claim this as their own.

3/11
Read 11 tweets
Jul 30, 2021
๐ŸŸก JavaScript Charting Libraries ๐ŸŸก

As a data nerd at heart, I love a good chart. And, because I also love JavaScript I started playing with different charting libraries.

Here are 3 of my current favourites

Check them out. ๐Ÿ‘‡ ๐Ÿงต 1/5
1๏ธโƒฃ Chart.js

Chart.js is my current favourite and go to library for charts right now. It offers great flexibility, performance and is really simple to set up with great documentation.

Check it out here: 2/5

๐Ÿ”— chartjs.org
2๏ธโƒฃ D3.js

D3 or Data-Driven Documents is one of the most powerful libraries for creating charts. There is an insanely large amount of charts you can create (check out their example page).

The only downside is due to the power, it's more complex. 3/5

๐Ÿ”— d3js.org
Read 5 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(