Depth guide on JavaScript Array methods

Depth guide on JavaScript Array methods

ยท

5 min read

Table of contents

No heading

No headings in the article.

  • In programming, an array is a collection of elements or items. Arrays store data as elements and retrieve them back when you need them.

What is an Array in JavaScript?

A pair of square brackets [] represents an array in JavaScript. All the elements in the array are comma(,) separated.

In JavaScript, arrays can be a collection of elements of any type. This means that you can create an array with elements of type String, Boolean, Number, Objects, and even other Arrays.

  • Here is an example of an array with four elements: type Number, Boolean, String, and Object. *
const mixedTypedArray = [100, true, 'lco', {}];

The position of an element in the array is known as its index. In JavaScript, the array index starts with 0, and it increases by one with each element.

So, for example, in the above array, the element 100 is at index 0, true is at index 1, 'lco' is at index 2, and so on.

The number of elements in the array determines its length. For example, the length of the above array is four.

  • Interesting point about array in js - JavaScript arrays are not of fixed length. You can change the length anytime by assigning a positive numeric value. We will learn more about that in a while.

You can create an array in multiple ways in JavaScript. The most straightforward way is by assigning an array value to a variable.

const salad = ['๐Ÿ…', '๐Ÿ„', '๐Ÿฅฆ', '๐Ÿฅ’', '๐ŸŒฝ', '๐Ÿฅ•', '๐Ÿฅ‘']; You can also use the Array constructor to create an array.

const salad = new Array('๐Ÿ…', '๐Ÿ„', '๐Ÿฅฆ', '๐Ÿฅ’', '๐ŸŒฝ', '๐Ÿฅ•', '๐Ÿฅ‘');

Please Note: new Array(2) will create an array of length two and none of the elements are defined in it. However, new Array(1,2) will create an array of length two with the elements 1 and 2 in it.

There are other methods like Array.of() and Array.from(), and the spread operator( ...) helps you create arrays, too. We will learn about them later in this article.

  • How to Add Elements to an Array in JS? -

Use the push() method to insert an element into an array. The push() method adds an element at the end of the array. How about we add some peanuts to the salad, like this:

const salad = ['๐Ÿ…', '๐Ÿ„', '๐Ÿฅฆ', '๐Ÿฅ’', '๐ŸŒฝ', '๐Ÿฅ•', '๐Ÿฅ‘'];
salad.push('๐Ÿฅœ');

Now the salad array is:

["๐Ÿ…", "๐Ÿ„", "๐Ÿฅฆ", "๐Ÿฅ’", "๐ŸŒฝ", "๐Ÿฅ•", "๐Ÿฅ‘", "๐Ÿฅœ"]

Note that the push() method adds an element to the end of the array. If you want to add an element to the beginning of the array, you'll need to use the unshift() method.

const salad = ['๐Ÿ…', '๐Ÿ„', '๐Ÿฅฆ', '๐Ÿฅ’', '๐ŸŒฝ', '๐Ÿฅ•', '๐Ÿฅ‘'];
salad.unshift('๐Ÿฅœ');

Now the salad array is:

["๐Ÿฅœ", "๐Ÿ…", "๐Ÿ„", "๐Ÿฅฆ", "๐Ÿฅ’", "๐ŸŒฝ", "๐Ÿฅ•", "๐Ÿฅ‘"]

  • How to Remove Elements from an Array in JS? - The easiest way to remove a single element from an array is using the pop() method. Every time you call the pop() method, it removes an element from the end of the array. Then it returns the removed element and changes the original array.
const salad = ['๐Ÿ…', '๐Ÿ„', '๐Ÿฅฆ', '๐Ÿฅ’', '๐ŸŒฝ', '๐Ÿฅ•', '๐Ÿฅ‘'];
salad.pop(); // ๐Ÿฅ‘
console.log(salad); // ['๐Ÿ…', '๐Ÿ„', '๐Ÿฅฆ', '๐Ÿฅ’', '๐ŸŒฝ', '๐Ÿฅ•']

Use the shift() method to remove an element from the beginning of an array. Like the pop() method, shift() returns the removed element and changes the original array.

  • How to Copy and Clone an Array in JS? - You can copy and clone an array to a new array using the slice() method. Note that the slice() method doesn't change the original array. Instead, it creates a new shallow copy of the original array.
const salad = ['๐Ÿ…', '๐Ÿ„', '๐Ÿฅฆ', '๐Ÿฅ’', '๐ŸŒฝ', '๐Ÿฅ•', '๐Ÿฅ‘'];
const saladCopy = salad.slice();

console.log(saladCopy); // ['๐Ÿ…', '๐Ÿ„', '๐Ÿฅฆ', '๐Ÿฅ’', '๐ŸŒฝ', '๐Ÿฅ•', '๐Ÿฅ‘']

salad === saladCopy; // returns false
  • How to Determine if a Value is an Array in JS? - You can determine if a value is an array using the Array.isArray(value) method. The method returns true if the passed value is an array.

Array.isArray(['๐Ÿ…', '๐Ÿ„', '๐Ÿฅฆ', '๐Ÿฅ’', '๐ŸŒฝ', '๐Ÿฅ•', '๐Ÿฅ‘']); // returns true Array.isArray('๐Ÿ…'); // returns false Array.isArray({ 'tomato': '๐Ÿ…'}); // returns false Array.isArray([]); // returns true

  • Know the time to revise array methods in short: -

So far, we have seen a few array properties and methods. Let's do a quick recap of the ones we've looked at:

  • push() โ€“ Insert an element at the end of the array.
  • unshift() โ€“ Insert an element at the beginning of the array.
  • pop() โ€“ Remove an element from the end of the array.
  • shift() โ€“ Remove an element from the beginning of the array.
  • slice() โ€“ Create a shallow copy of an array.
  • Array.isArray() โ€“ Determine if a value is an array.
  • length โ€“ Determine the size of an array.
  • How to Create, Remove, Update, and Access Arrays in JavaScript? * In this section, we will learn about methods you can use to create a new array, remove elements to make the array empty, access elements, and many more.

  • The concat() array method *

The concat() method merges one or more arrays and returns a merged array. It is an immutable method. This means it doesn't change (mutate) existing arrays.

Let's concat two arrays.

const first = [1, 2, 3];
const second = [4, 5, 6];

const merged = first.concat(second);

console.log(merged); // [1, 2, 3, 4, 5, 6]
console.log(first); // [1, 2, 3]
console.log(second); // [4, 5, 6]

Using the concat() method we can merge more than two arrays. We can merge any number of arrays .

Hope this article is helpful for you if you are still reading my article means you liked my article thanks for reading if it is helped you to gain something please comment in comment section.

ย