lukeprosserBlogProjects

Array Properties And Methods In JavaScript

Arrays are a fundamental part of JavaScript and programming in general. They allow you to store multiple values in a single variable, making it easier to manipulate and organise data.

In this lesson we’ll explore JavaScript array properties and methods with examples.

We will cover:

Arrays share a number of the same property and method names as strings, and they function very similarly too, which makes remembering them much easier!

Array properties

Just like with strings, JavaScript arrays also feature built-in properties that describe or provide information about the array.

length

The length property tells you how many elements are in an array:

const fellowshipMembers = ['Frodo', 'Sam', 'Merry', 'Pippin', 'Gandalf', 'Legolas', 'Gimli', 'Aragorn', 'Boromir'];

console.log(fellowshipMembers.length); // 9

Array methods

As with strings, every array that you create has a predefined set of methods that you can invoke to perform an action.

In this section we'll explore some of the more common methods that you're likely to encounter at the start of your journey.

push

The push() method adds one or more elements to the end of an array:

const fellowshipMembers = ['Frodo', 'Sam', 'Merry', 'Pippin', 'Gandalf', 'Legolas', 'Gimli', 'Aragorn', 'Boromir'];

fellowshipMembers.push('Gollum');

console.log(fellowshipMembers); // ['Frodo', 'Sam', 'Merry', 'Pippin', 'Gandalf', 'Legolas', 'Gimli', 'Aragorn', 'Boromir', 'Gollum'];

As you can see from the logs, unfortunately Gollum has now joined the group!

pop

The pop() method removes the last element from an array and returns it:

const fellowshipMembers = ['Frodo', 'Sam', 'Merry', 'Pippin', 'Gandalf', 'Legolas', 'Gimli', 'Aragorn', 'Boromir'];
  
fellowshipMembers.push('Gollum');

const removedMember = fellowshipMembers.pop();

console.log(removedMember); // Gollum
console.log(fellowshipMembers); // ['Frodo', 'Sam', 'Merry', 'Pippin', 'Gandalf', 'Legolas', 'Gimli', 'Aragorn', 'Boromir'];

Following on from the push() example, we're able to remove Gollum from the end of the array with pop() and store the string in the variable removedMember.

When we log the fellowshipMembers array again, we see that Gollum has been removed.

unshift

unshift() is used to add one or more elements to the beginning of an array:

const fellowshipMembers = ['Frodo', 'Sam', 'Merry', 'Pippin', 'Gandalf', 'Legolas', 'Gimli', 'Aragorn', 'Boromir'];

fellowshipMembers.unshift('Elrond');

console.log(fellowshipMembers); // ['Elrond', 'Frodo', 'Sam', 'Merry', 'Pippin', 'Gandalf', 'Legolas', 'Gimli', 'Aragorn', 'Boromir']

Using unshift() we're able to insert Elrond at the start of the array.

shift

The shift() method removes the first element from an array and returns it:

const fellowshipMembers = ['Frodo', 'Sam', 'Merry', 'Pippin', 'Gandalf', 'Legolas', 'Gimli', 'Aragorn', 'Boromir'];

fellowshipMembers.unshift('Elrond');

const firstMember = fellowshipMembers.shift();

console.log(firstMember); // Elrond
console.log(fellowshipMembers); // ['Frodo', 'Sam', 'Merry', 'Pippin', 'Gandalf', 'Legolas', 'Gimli', 'Aragorn', 'Boromir'];

Following on from the unshift() example, we're able to remove the first item from the array and store it in the variable firstMember.

When we log the fellowshipMembers array once again, we see that Elrond has been successfully removed.

indexOf

Similar to the equivalent method for strings, the indexOf() method returns the index of the first occurrence of a specified value in the array, or -1 if it is not found:

const fellowshipMembers = ['Frodo', 'Sam', 'Merry', 'Pippin', 'Gandalf', 'Legolas', 'Gimli', 'Aragorn', 'Boromir'];

console.log(fellowshipMembers.indexOf('Gandalf')); // 4
console.log(fellowshipMembers.indexOf('Gollum')); // -1

Summary

Arrays in JavaScript are incredibly powerful and versatile. By using properties like length and methods like push() and pop(), you can manipulate and interact with arrays in countless ways.

Furthermore, just like with string methods, you can also chain array methods together for all kinds of combinations!