Arrays in one sitting!

Don’t you desire to have an army of soldiers serving you as their sole master the moment they are called for duty? Well, if you know how to control arrays, they can be the loyal soldiers of an omnipotent army helping you conquer demanding tasks when it comes to programming.

Illustration by Dreams Time

Arrays are there to provide you with assistance when you’d like to store a list, but — unlike an object — an array (your army) enables you to access its elements (your faithful soldiers) through numbers as it is seen in the following chart.

Image by GeeksforGeeks

A series of array methods exist and each has a different set of skills and they can be quite handy when dealing with the intricate parts of various projects. If you master arrays in javascript, that’s for sure you’ll have the upper hand as you get to tackle complex projects in javascript frameworks such as React.

That being said, I’m planning to briefly touch upon each rather than delving into much details because it is definitely better to use every array method in a context and personally test their applicability/limits in different projects.

I think it’s a good idea to categorize them in the first place because this way, you may notice some gotchas like which of these methods are mutable before jumping on bigger projects. Remember that the decision as to whether or not you mutate the original array plays a key role in the smooth running of your code. A decent programmer knows the core of the concepts and never writes codes blindly.

As you get to digest the central idea, large-scale projects will be a piece of cake on your side, so the list down below is like a quick guide and every method is inserted under a specific umbrella. I’ll also put a link for each (Just click on the related method) if you wish to explore some complex examples along the way.

JavaScript Arrays in bitesize =>

CATEGORY 1 => Mutating / Changing the Original Array

a- Adding items to the original:

• .push (A new item is added at the end of the array.)
• .unshift (A new item is added at the beginning of the array.)

b- Removing items from the original array:

• .pop (An item is deleted from the end.)
• .shift (An item is deleted from the beginning.)
• .splice (deletes an item from any place of the array)

c- Other useful arrays in this category:

• .reverse (reverses the order of the items in the array)
• .sort (allows you to sort the items in the array)
• .fill (fills the specific items with a value)

CATEGORY 2 => Generating a New Array

a- Constructed through the original one:

• .map (used when looping / transforms the array)

b- Filtered using circumstance:

• .filter (creates a subset of elements)

c- Portion of the original array:

• .slice (copying all elements)

d- Adding the original to others:

• .concat (merging arrays)

e-Flattening the original array:

• .flat (all the items of the subarrays concatenated to the new array)
• .flatmap (mixture of the map() method followed by the flat () )

CATEGORY 3=> Index Issues

a- In line with the value:

• .indexOf (finding the position of an element)

b- In accordance with a test condition:

• .findIndex (finding the first element in a testing function)

CATEGORY 4=> An Array of Element

a- Based on a test condition:

• .find (searching for the first element in a test)

CATEGORY 5=> Checking if an array has an item

a- Through a value:

• .includes (checking whether an array has a specific element)

b- Based on a test condition:

• .some (controls whether an array has at least one element meeting the expectations)
• .every (checks if each item satisfies a specific condition.

CATEGORY 6=> A new String

a- In line with a separator string:

• .join (concatenating all items and generating a new string from an array)

CATEGORY 7=> Transforming to value

a- Accumulation:

• .reduce (Reducing an array into a value / Just like a snowball — This is a very powerful method. It’s like jack-of-all-trades in a way.)

Image by Dreams Time

CATEGORY 8=> Looping

a- Running a function on each element:

• .forEach

To sum up, arrays are extremely important if you are planning to be a hotshot programmer. You can’t skip this topic. Once you know how arrays work in essence, you can easily solve code interview challenges and create enviable projects from scratch.The above-mentioned ones are most of the popular ones arranged in line with their categories; however, if you’re interested in checking out the full list of array methods, here is the link.

“First, solve the problem. Then, write the code.” — John Johnson