Latest Code Tutorials

Javascript Array: How to Create, Read, Edit Arrays in Javascript

JavaScript array is an object that represents the collection of similar types of items.  JavaScript arrays are used to save multiple values in a single variable. The array is a single variable that is used to store different elements. It is often used when we want to store a list of elements and access them by a single variable. So, let’s define arrays in Javascript.

#What is an Array in Javascript

An array is a particular variable, which can hold more than one value at a time.

If you have the list of items (a list of fruits, for example), storing the fruits in a single variable could look like the following code.

let x = "me";
let u = "sunflower";
let v = "smooth criminal";

However, what if you want to loop through the songs and find a specific one? And what if you had not 3 songs, but 300?

The solution is an array!

The array can hold many values under a single name, and you can access the values by referring to the index number.

Javascript Array Example

There are three ways to construct array in JavaScript

  1. By an array literal.
  2. By creating the instance of an Array directly (using the new keyword)
  3. By utilizing the Array constructor (using the new keyword).

#Javascript array literal

The syntax of creating an array using array literal is given below.

var array = [1, 2, 3];
let array = [1, 2, 3];
const array = [1, 2, 3];

#JavaScript Array directly (new keyword)

The syntax of creating an array directly is given below.

let arrayname = new Array();

See the below example.

// app.js

let arr = new Array();
arr.push(4, 9, 16)

See the output.

Javascript Array Tutorial With Example

In the above example, we have used the Javascript Array Push function.

#JavaScript array constructor (new keyword)

Here, you need to create an instance of an array by passing arguments in the constructor so that we don’t have to provide the value explicitly. An example of creating the object by array constructor is given below.

// app.js

let arr = new Array(4, 9, 16);


See the following output.

JavaScript array constructor

#Access the Elements of an Array in Javascript

You can access the elements using their index. See the following code.

// app.js

let arr = new Array(4, 9, 16);


See the output.

Access the Elements of an Array in Javascript

You can also use the forEach loop to print the value one by one.

#Changing an Array Element

You can modify any element using their index. See the following code.

// app.js

let arr = new Array(4, 9, 16);
console.log('Before modify: ', arr);

arr[0] = 25;
arr[1] = 36;
arr[2] = 49
console.log('After Modify: ', arr);

See the following output.

Changing an Array Element

#Arrays are Objects

Arrays are the special type of objects. The typeof operator in the JavaScript returns an “object” for arrays.

But, JavaScript arrays are the best described as arrays.

JavaScript variables can be objects. Arrays are special kinds of objects.

Because of this, you can have the variables of different types in the same Array.

You can have objects in an Array. You can have functions in an Array. You can have arrays in an Array.

#Array Properties and Methods

JavaScript arrays have properties and methods. It is their real strength.

Let’s see one property to find a length of an array using the length property.

// app.js

let arr = new Array(4, 9, 16);
console.log('Array length is: ', arr.length);

See the output.

Array Properties and Methods

#Array Properties

Here is the list of the properties of the Array object along with their description.

Sr.No. Property & Description
1 constructor

Returns the reference to the array function that created the object.

2 index

The property represents a zero-based index of the match in the string

3 input

This property is only present in the arrays created by regular expression matches.

4 length

Reflects the number of elements in the array.

5 prototype

The prototype property allows you to add the properties and methods to the object.

#Associative Arrays in Javascript

Many programming languages support arrays with named indexes.

Arrays with named indexes are called the associative arrays (or hashes).

JavaScript does not support arrays with named indexes. So, Javascript does not support Associative arrays

In JavaScript, arrays always use numbered indexes.

#When to Use Arrays. When to use Objects.

  1. JavaScript does not support associative arrays.
  2. You should use the objects when you want the element names to be strings (text).
  3. You should use the arrays when you want an item names to be numbers.

#JavaScript Array Methods

Methods Description
concat() It returns the new array object that contains two or more merged arrays.
copywithin() It copies a part of the given array with its items and returns the modified array.
every() It determines whether all the items of an array satisfy the provided function conditions.
fill() It fills items into the array with static values.
filter() It returns the new array containing the items that pass the provided function conditions.
find() It returns the value of the first item in the given array that satisfies a specified condition.
findIndex() It returns an index value of the first item in the given array that satisfies a specified condition.
forEach() It calls the provided function once for each item of the array.
includes() It checks whether a given array contains the specified item.
indexOf() It searches the specified item in the given array and returns an index of the first match.
join() It joins the items of an array as a string.
lastIndexOf() It searches the specified item in the given array and returns an index of the last match.
map() It calls the specified function for every array item and returns the new array
pop() It removes and returns the last item of an array.
push() It adds one or more items to the end of an array.
reverse() It reverses the elements of the given array.
shift() It removes and returns the first item of an array.
slice() It returns a new array containing a copy of the part of the given array.
sort() It returns the item of the given array in sorted order.
splice() It adds/removes elements to/from the given array.
unshift() It adds one or more elements at the beginning of the given array.
reduce() Apply the function simultaneously against two values of an array (from left-to-right) as to reduce it to the single value.
toString() Returns the string representing the array and its items.


Finally, Javascript Array Example is over.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.