The in-built array properties and methods are what give JavaScript arrays their true power. Therefore, JavaScript has a flexible method you can use to manipulate these arrays for various needs. Also, using some of these methods, you can join arrays, convert array elements into strings, and add and remove elements.

We’ll examine various JavaScript array methods and their applications in this article.

JavaScript Array pop()

If you want to remove the last element in an array, the JavaScript pop() method is your best bet. Again, this method will return the value it removed from the array to the caller. Also, the return value of pop() is undefined if you use it on an empty array.

For example:

// declare an array variable
const home_gadgets = ["washing machine", "oven", "refrigerator"," Television ", " fan", "bed", "iron", "cupboard", "cooker", "cushion", "table"];

//The pop() method will remove table which is the last element from the array above.

console.log(home_gadgets.pop()); // output.......table

JavaScript Array push()

After declaring and assigning values to an array, a dynamic way of adding more elements to your array is by using the array push() method. Then, with the push() function, you can add one or more elements to the end of an array. Hence, this method changes the length of the array by the number of elements added to it.

For example:

const home_gadgets = ["washing machine", "oven", "refrigerator"," Television ", " fan", "bed", "iron", "cupboard", "cooker", "cushion", "table"];

//The push() method will add the element dinning table after the last element in the home_gadgets array
home_gadgets.push('dining table ');

console.log(home_gadgets); // output........... (12) ['washing machine', 'oven', 'refrigerator', ' Television ', ' fan', 'bed', 'iron', 'cupboard', 'cooker', 'cushion', 'table', 'dining table ']

JavaScript Array shift()

You can reduce an array by one using the built-in Array method called Shift in Javascript. And it returns the removed element after removing the array’s first element.

Furthermore, the JavaScript shift() function removes the element from the zeroth index, and the elements that were previously in index 1 take its place. Javascript shift ensures the first character doesn’t participate again and returns the element for reference purposes. 

Again, the shift() method produces an undefined result if the array is empty. Otherwise, it brings back the removed element. However, the pop() method, which you can use to remove the last element from an array, is the exact opposite of this. 

For example:

const home_gadgets = ["washing machine", "oven", "refrigerator"," Television ", " fan", "bed", "iron", "cupboard", "cooker", "cushion", "table"];

console.log( home_gadgets ); //output.......... (11) ['washing machine', 'oven', 'refrigerator', ' Television ', ' fan', 'bed', 'iron', 'cupboard', 'cooker', 'cushion', 'table']
console.log({ length: home_gadgets.length });  //output.......... {length: 11}

//  this code uses shift() to remove the item at index [0]
let new_home_gadgets  = home_gadgets.shift();

console.log("\n This is the New ARRay ::", home_gadgets); //output.......... This is the New ARRay :: (10) ['oven', 'refrigerator', ' Television ', ' fan', 'bed', 'iron', 'cupboard', 'cooker', 'cushion', 'table']
console.log({Removed: new_home_gadgets }); //output.......... {Removed: 'washing machine'}
console.log({ NewLength: home_gadgets.length });  //output..........{NewLength: 10}

JavaScript Array unshift()

A new element is added to the beginning of an array by the unshift() method, and older elements are “unshifted.” Again, it is a simple method you can use to add a few new elements to your array. 

Furthermore, the new array’s length can be obtained using the unshift() method. On the other hand, the function lengthens the existing array by the number of new elements added.

For example:

const home_gadgets = ["washing machine", "oven", "refrigerator"," Television ", " fan", "bed", "iron", "cupboard", "cooker", "cushion", "table"];

console.log({ home_gadgets }); //output...........{home_gadgets: Array(11)}
console.log(home_gadgets.length ) //output...........11


// include the unshift() here and enter the element you want to add
home_gadgets.unshift("standing fan");

console.log(home_gadgets ); //output...........  ['standing fan', 'washing machine', 'oven', 'refrigerator', ' Television ', ' fan', 'bed', 'iron', 'cupboard', 'cooker', 'cushion', 'table']
console.log({ home_gadgets }); //output........... {home_gadgets: Array(12)}
console.log(home_gadgets.length ) //output...........12

JavaScript Splice() Method

To include new elements in an array, use the splice() method in JavaScript. Additionally, unlike other methods, this method lets you choose the position you want this new element to occupy.

const home_gadgets = ["washing machine", "oven", "refrigerator"," Television ", " fan", "bed", "iron", "cupboard", "cooker", "cushion", "table"];
console.log( home_gadgets); // OUTPUT..........(11) ['washing machine', 'oven', 'refrigerator', ' Television ', ' fan', 'bed', 'iron', 'cupboard', 'cooker', 'cushion', 'table']

// The initial parameter (2) specifies where new elements should be inserted (spliced in). While the second parameter (zero) specifies the number of elements to be eliminated.

home_gadgets.splice(2, 0, "bucket", "pots");

console.log( home_gadgets); // OUTPUT.......... (13) ['washing machine', 'oven', 'bucket', 'pots', 'refrigerator', ' Television ', ' fan', 'bed', 'iron', 'cupboard', 'cooker', 'cushion', 'table']

JavaScript Array slice()

The slice() method creates a new array by cutting off a portion of an existing array. The only thing it does is make a new array using the parameters you provided; it doesn’t take any elements from the original array. However, when selecting elements for the new array before it is created, this parameter instructs the program where to begin and end.

//This example takes an array and separates a section of it starting with array element 1:

const home_gadgets = ["washing machine", "oven", "refrigerator"," Television ", " fan", "bed", "iron", "cupboard", "cooker", "cushion", "table"];

const new_home_gadgets = home_gadgets.slice(1);

console.log("This is the original array",home_gadgets) // output......... This is the original array (11) ['washing machine', 'oven', 'refrigerator', ' Television ', ' fan', 'bed', 'iron', 'cupboard', 'cooker', 'cushion', 'table']

console.log(" This is the new array after using the splice() " ,new_home_gadgets)// output......... This is the new array after using the splice()  (10) ['oven', 'refrigerator', ' Television ', ' fan', 'bed', 'iron', 'cupboard', 'cooker', 'cushion', 'table'].

Conclusion

In this article, you learned about JavaScript array methods that you can use to manipulate, delete, add, and create a new array instance.

Categorized in:

JavaScript