JS Startup

Challenges, Tips & Tricks & Tutorials

Important Javascript Array Methods You Should Know

Important Javascript Array Methods You Should Know

Javascript array method is a broad topic to cover as there is a lot of methods that help to modify the array based on the project or task requirement. So, in this tutorial, you’ll be going to learn some important javascript array method.

JavaScript Array

JavaScript array is a non-primitive data type and they are also called reference types. So, javascript array can store multiple values in it which can be of same data type or different data type.

Basic Syntax of Javascript Array

The following syntax consist of two ways to declare array.

new Array() // Array Constructor
or
[] // Array Literal

Mostly, we all use an array literal as it’s fast and reliable and easy to understand.

Example Of JavaScript Array

The following example contain element of different different data type and it store multiple element.

const array = [1, "JavaScript", ["JS", "Startup"], { name: "Ajay" }, true, undefined];

Finally, let’s get dive into the important part of this tutorial.

Also, see our other javascript tutorial-

  1. Different ways to declare function in javascript
  2. How to Format Date In JavaScript
  3. How to check if array is empty in javascript

Javascript Array Methods

Javascript array methods are method associated with array to modify the array or get some important detail from array. There are lot array methods but we will going to cover some basic and important array method.

A. Array Push Method

JavaScript array push() method adds a new element to the end of an array and returns the new length of the array.

Most importantly, the array push method returns the number which represents the new length of the array.

Basic Syntax of Push Method

array.push(item1, item2, ..., itemN)

Example of Push Method

const array = ["JS"];
array.push("Startup"); // 2

console.log(array); // => ["JS", "Startup"]

B. Array Pop Method

Javascript array pop() method removes the last element from the array and returns the removed element and also change the length of the array.

Moreover, the Array pop method returns the removed element. Array pop() method not requires any parameter to pass.

Basic Syntax of Pop Method

array.pop()

Example of Pop Method

const array = ["JS", "Startup"];
array.pop(); // Startup

console.log(array); // => ["JS"]

C. Array Unshift Method

Javascript array unshift() method adds the new element at the starting or beginning of the array and returns the new length of the array.

However, the array unshift method returns the number which represents the new length of the array.

Basic Syntax of Unshift Method

array.unshift(item1, item2, ..., itemN)

Example of Unshift Method

const array = ["Startup"];
array.unshift("JS"); // 2

console.log(array); // => ["JS", "Startup"]

D. Array Shift Method

Javascript array shift() method removes the first element or item from the array and returns the removed element and also changes the length of the array.

However, Array shift() method not requires any parameter to pass.

Basic Syntax of Shift Method

array.shift()

Example of Shift Method

const array = ["JS", "Startup"];
array.shift(); // "JS"

console.log(array); // => ["Startup"]

E. Array ToString Method

Javascript toString() method convert an array to a string and return a string as a result.

However, the resultant string represents all the array elements separated by a comma. Array toString() method does not require any parameter.

Basic Syntax of ToString Method

array.toString()

Example of ToString Method

const array = ["JS", "Startup"];
array.toString();

// => "JS,Startup"

F. Array Slice Method

Javascript array slice() method selects a portion of an array and returns a new array object but the original array not change.

The slice() method selects the elements starting at the given start argument, and ends at, but does not include, the given end argument.

Basic Syntax of Slice Method

array.slice(start, end)

Example of Slice Method

const array = ["Like", "JS Startup", "Share"];
array.slice(1, 2);

// => ["JS", "Startup"]

G. Array Splice Method

Javascript array splice() method change the original array by removing or replacing the existing element. And can also add new element to the array.

Moreover, splice() method return new Array, containing the removed items (if any)

Basic Syntax of Splice Method

array.splice(index, total, item1, ....., itemN)

Example of Splice Method

const array = ["Like", "JS Startup", "Share"];
array.splice(2, 1, "JS Startup"); // ["Share"] - Removed item

// => ["Like", "JS Startup", "JS Startup"]

H. Array Includes Method

Javascript array includes() method detect whether the specified element exists in the array or not. If exists then return true else false.

But array Includes() method required a search element.

Basic Syntax of Includes Method

array.includes(element, start)

Example of Includes Method

const array = ["JS", "Startup"];
array.includes("Startup");
// => true

array.includes("Hi");
// => false

I. Array Sort Method

Javascript array sort() method sorts the elements of an array and changes the original array. Most important by default, it sorts in ascending order.

However, Array sort() method return the array of object, with the items sorted.

Basic Syntax of Sort Method

array.sort(compareFunction)

Example of Sort Method

const array = ["Startup", "JS"];
array.sort();

// => ["JS", "Startup"]

J. Array Join Method

Javascript array join() method create and returns a new string by concatenating all the elements in an array. Can also pass separator string between elements.

But Separator is optional if omitted, the elements are separated with a comma.

Basic Syntax of Join Method

array.join(separator)

Example of Join Method

const array = ["JS", "Startup"];
array.join(" ");

// => "JS Startup"

Conclusion

To participate in our javascript quiz or challenges, tutorial, tips & tricks make sure to join our jsstartup newsletter. So, you can able to participate in our daily challenges & learn the javascript concept.

And last but not the least, don’t forget to like, comment and share. It gives us a morale boost to remain to continue. Also, join our Facebook Page

If you have any questions, please feel free to ask me in the comment section and also let me know if you have any suggestions. As suggestions are always welcome.

2 thoughts on “Important Javascript Array Methods You Should Know

  1. There is a small correction in the example provided under Splice method,
    The example shows as
    const array = [“Like”, “JS Startup”, “Share”];
    array.splice(2, 1, “JS Startup”);

    // => [“Like”, “Share”, “JS Startup”]

    But the original will return as [“Like”, “JS Startup”, “JS Startup”] and the new spliced array will be [“JS Startup”].

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top
0 Shares
Share via
Copy link