JavaScript Tutorial Series: Array Methods

In a previous lesson we've talked about arrays. JavaScript Tutorial Series: Array. If you need a refresher go and check that article out.

toString and join methods

The toString() and join() methods convert an array into a string.

let numbers = ["one", "two", "three"];
console.log(numbers.toString());
//"one,two,three"

let numbers = ["four", "five", "six"];
console.log(numbers.join("-"));
//"four-five-six"

As you can see numbers.toString() and numbers.join() return a string of comma separated values. while join() is similar to toString(), join() accepts an argument which specifies a separator as seen in the example above.

Adding and removing elements from arrays

When working with arrays we can add new elements to an array and remove elements from it.

pop and push methods

The method pop() removes the last element of the array and the push() method adds an element at the end of the array.

let languages = ["javascript", "python", "java"];
languages.pop();

console.log(languages); //["javascript","python"]

languages.push("php");

console.log(languages); //["javascript","python","php"]

push() takes one or more values as arguments which is then pushed to the end of the array.

let languages = ["javascript", "python", "java"];
languages.push("php","java", "C#");
console.log(languages);
//["javascript","python","php","java","C#"]

shift and unshift methods

shift() and unshift() are similar to pop() and push() the only difference is that shift() removes the first element in an array and unshift() adds elements to the beginning of an array.

let languages = ["java","javascript", "python"];
languages.shift();

console.log(languages); //["javascript","python"]
languages.unshift("php","java", "C#");

console.log(languages);//["php","java","C#","javascript","python"]

You can use the delete operator to delete array elements, it is not recommended because this leaves blank spaces of type undefined in the array. This is not considered best practice. Here's an example.

let languages = ["php","javascript", "python"];
delete languages[0];
console.log(languages); //[ ,"javascript","python"]
console.log(languages[0]); //undefined

Length and concat methods

We've previously seen these methods in the JavaScript Tutorial Series: String methods. these methods works the same with arrays, meaning length returns the length of an array and concat() returns a new array after concatenating arrays.

let languages = ["php","javascript", "python"];

console.log(languages.length);//3

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = arr1.concat(arr2);
console.log(arr3);
//[1,2,3,4,5,6]

Splice and Slice methods

The splice() method can be used to add a new element to an array and it takes 3 or more arguments.

• The first argument is the position we'd like to add an element.

• The second argument is how many element should be removed.

• The third argument is the element we'd like to add
  

let animals =["penguin", "duck"];
animals.splice(1,0, "dog", "cat");
console.log(animals);
//["penguin","dog","cat","duck"]

The splice() method can also remove array elements without leaving blank spaces in the array.

let animals =["penguin", "duck"];
animals.splice(0, 1);
console.log(animals); // ["duck"]

In the example above, we're removing 1 item which is at position 0.

The slice() method removes elements from an array and can take 2 arguments. This method returns a new array and leaves the new array untouched.

• The first argument is the starting position (inclusive)

• The second argument is the ending position (not inclusive)
  

let animals =["penguin", "duck", "cat", "dog"];
let newAnimals = animals.slice(1, 3);
console.log(newAnimals); //["duck", "cat"]

If the second argument is omitted this method will splice out the element from the starting position until the end.

let animals =["penguin", "duck", "cat", "dog"];
let newAnimals = animals.slice(1);
console.log(newAnimals); //["duck","cat","dog"]