Coding Newbie

JAVASCRIPT ARRAY METHODS

Most Important JavaScript Array Methods

As mentioned in the JavaScript Arrays post, array is an ordered list of elements we can use to store various data. We can store elements of the same, or different data types. However, the true power of arrays does not lie in their data storing capacity, but in the JavaScript Array Methods we use to manipulate the data.

In this article we will take a closer look at what arrays actually are, and how to create and use them.

Before continuing with Arrays, if you are not familiar with what arrays are, you should definitely get a look at JavaScript Data Types first.

What are JavaScript Array Methods?

JavaScript Array Methods are inbuilt functions we use to work with array elements. We can change array items, reorder them, add new ones, delete old ones, and much much more. Furthermore, each method has a unique functionality. This allows us to manipulate arrays without the need to write JavaScript functions all over again.

Now that we know what methods are, it is important to note that there is a large number of available methods in JavaScript. Of course, you should not know all of them, but focus on the most important ones instead.

The Most Important JavaScript Array Methods

forEach()

I really had to mention this method first. This is absolutely my favorite JavaScript Array Method and the one I most frequently use.

What makes forEach() method great, is the fact that this method eliminates the need to create a for loop every time you want to cycle through array items. The forEach() method loops over each array’s element, and applies declared action on, as the name says, each of them.

const fruits = ["apple","orange","banana","pear"];

fruits.forEach(function(item){
	console.log(item)
});

// or with arrow function syntax
fruits.forEach(item => {
	console.log(item)
});

The forEach() goes through all items one by one, and console.log each of them, as seen bellow.

javascript array methods forEach()

sort()

Sort() method is another useful extremely useful tool, used to sort and arrange data stored inside an array. It can be done in ascending or descending order.

const fruits = ["apple","orange","banana","pear"];

fruits.sort();

console.log(fruits);

This command sorts our array items in alphabetical order.

javascript array methods sort()

Note: When it comes to sorting declarations inside the sort brackets, there are many sorting options, numerical, alphabetical, etc. And there is no real need to learn them. You can easily find different sorting commands on the internet.

filter()

The filter() method actually creates a new array, consisting solely of elements that fulfill the listed condition.

The elements that do not meet requirements are removed from an array.

const fruits = ["apple","orange","banana","pear"];

const fruits2 = fruits.filter(item => item.length > 5);

console.log(fruits2);

The code above filters the items of a fruits array that have length larger than 5 letters, and stores them into new fruits2 array.

javascript array methods filter()

some()

This method is used to check if there is at least one element of an array that fulfills certain conditions.

Unlike filter(), the some() method does not create a new array, but returns a true or false statement.

const fruits = ["apple","orange","banana","pear"];

const fruits2 = fruits.some(item => item.length > 5);

console.log(fruits2);

So, instead to filter fruits longer than 5 letters, we check if there is any item that fulfills specified condition. And the result is true.

javascript array methods some()

every()

Like sort(), every() method is also used to check if array elements meet a specified condition. However, in order to return true, it is necessary for all array’s elements to fulfil a stated criteria. Otherwise, the method returns false.

const fruits = ["apple","orange","banana","pear"];

const fruits2 = fruits.find(item => item.length > 5);

console.log(fruits2);
javascript array methods every()

includes()

This method does not check if there are elements meeting some condition, but searches for a certain, defined element. If that element exists as a part of an array, the includes() method returns true. Otherwise, it returns false.

const fruits = ["apple","orange","banana","pear"];

const fruits2 = fruits.includes("apple");

console.log(fruits2);

The code above checks if we have “apple” within our fruits array. The includes() method returns true.

javascript array methods includes()

find()

Similar to the methods listed above, the find() method also checks if there is an element that meets declared criteria. However, the method returns only the value of the first element that fulfils the condition. If there is no such element, returns undefined.

const fruits = ["apple","orange","banana","pear"];

const fruits2 = fruits.find(item => item.length > 5);

console.log(fruits2);

So, we are finding an item that has length larger than 5 characters. As first such element is “orange”, our find() method will return than value.

javascript array methods find()

findIndex()

The findIndex() method is almost identical to the find() method. Howver, unlike find(), it does not return the element’s value, but its index number.

const fruits = ["apple","orange","banana","pear"];

const fruits2 = fruits.findIndex(item => item.length > 5);

console.log(fruits2);
javascript array methods findIndex()

map()

The map() method is one of the most powerful array methods. This method creates a new array from the existing one, by applying the defined function on every element.

const fruits = ["apple","orange","banana","pear"];

const fruits2 = fruits.map(item => item + "s");

console.log(fruits2);

AS you can see, we looped through all our items and added a letter “s” at the end of each of them. The map() method then created a new array from end result:

javascript array methods map()

The important thing to keep in mind is that map() creates a new array each time you invoke it. If there is no need for that, than better option is to use the forEach() method.

reduce()

This method is mostly used as a way to calculate the sum of all elements of an array. The method actually goes through all the elements, from left to right, and “reduces” them to a single value.

const numbers = [1, 2, 3];

const sum = numbers.reduce((total, amount) => total + amount);

console.log(sum);
javascript array methods reduce() string

If used on a string array, it will join all the string values into one.

const fruits = ["apple","orange","banana","pear"];

const fruits2 = fruits.reduce((total, amount) => total + amount);

console.log(fruits2);
javascript array methods reduce() string

join()

We use the join() method when we want to create a string from array elements. We also define the separator between joined elements. If not defined, the default separator between elements in a newly created string will be comma.

If we wish to create same string as in the string array example in reduce() method, we will use empty string as separator (“”).

const fruits = ["apple","orange","banana","pear"];

const fruits2 = fruits.join();

console.log(fruits2);
javascript array methods join()

slice()

This method creates a new array from the existing one. Within the brackets we define the start and end element of a new array, using the array’s element index.

If we define only the start element, the newly created array will contain elements from the starting one, until the end of the default array.

const fruits = ["apple","orange","banana","pear"];

const fruits2 = fruits.slice(1,3);

console.log(fruits2);
javascript array methods slice()

push()

The push() method adds the defined element to the end of an array.

const fruits = ["apple","orange","banana","pear"];

fruits.push("grape");

console.log(fruits);
javascript array methods push()

pop()

The pop() method is the complete opposite of the push() method. This method removes the last element of the array.

const fruits = ["apple","orange","banana","pear"];

fruits.pop();

console.log(fruits);
javascript array methods pop()

shift()

This method is similar to the pop() method. However, the shift() method removes the first element of an array.

const fruits = ["apple","orange","banana","pear"];

fruits.shift();

console.log(fruits);
javascript array methods shift()

unshift()

The unshift() method, like push(), adds a new, defined element, but at the beginning of an array.

const fruits = ["apple","orange","banana","pear"];

fruits.unshift("grape");

console.log(fruits);
javascript array methods unshift()

reverse()

The reverse() method is used to change the order of elements in the array, by reversing them.

The first element goes to the end, while the last element comes to the start of the array, getting the 0 index.

const fruits = ["apple","orange","banana","pear"];

fruits.reverse();

console.log(fruits);
javascript array methods reverse()

Conclusion

There are more elements than listed here, however I consider these as the essentials and the most used when learning JavaScript. Knowing array methods opens new possibilities when coding, and can greatly improve your JavaScript skills.

JavaScript Methods are the basic functions you should use to manipulate arrays. Using methods eliminates the need of creating your own custom functions, because you already have inbuilt functions for many necessary operations.

When you master JavaScript Arrays, your next step should be learning about JavaScript Objects. It opens the whole new world of JavaScript.

%d bloggers like this: