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
Here's how to get paid for writing blog posts, even if you've never written one before. ๐
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.
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.
Here are 4 of the most popular ways to loop over Arrays in JS.
What's your favourite?
Thread ๐งต
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.
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.
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.
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.
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