Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com

Table of contents

1.

Introduction

2.

Array in JavaScript

3.

Why are Arrays needed?

4.

Create an Array

4.1.

Using Array Literal

4.2.

Using the new Keyword

4.3.

Why new Array() is not recommended

5.

Accessing an Element

6.

Changing an Element

7.

Accessing the Full Array

8.

Arrays are Objects

8.1.

Array:

8.2.

Object:

9.

The Elements can be Objects.

10.

Properties and Methods of an Array

10.1.

The length property

10.2.

Looping an Array

10.2.1.

Using Loops

10.2.2.

Array.forEach() function

11.

Adding New Element to an Array

12.

Frequently Asked Question

12.1.

What does print() mean in JavaScript?

12.2.

What is the console in JavaScript?

12.3.

How can you merge two arrays in JavaScript?

12.4.

How to order an array in JavaScript?

12.5.

What is a string in JavaScript?

13.

Conclusion

Last Updated: Mar 27, 2024

Easy

Arrays in JavaScript

Author Amit Singh

Introduction

Have you worked on Web Development? Do you want to know what Array in JavaScript is?

title

Then you have come to the right place. This article is focused on an important concept known as Array in JavaScript. We will learn the need of an array in JavaScript. We will also learn how to create and modify an array. We will learn about property and function as well.. Let's dive into the article to learn more about the topic.

Also Read, Javascript hasOwnProperty

Array in JavaScript

In JavaScript, an array is a special variable that has multiple values. It means we can store more than one value in an array. We can access the values based on the index.

Example:

const languages = ["Java", "C", "Python"];
console.log(languages);

You can also try this code with Online Javascript Compiler

Output:

output

Why are Arrays needed?

In any programming language, a variable can store a single value. You can't store more than one value in a single variable. You must create multiple variables if you want to store or modify a list of items.

For example,

let lang1 = "Java";
let lang2 = "C";
let lang3 = "Python";

You can also try this code with Online Javascript Compiler

Assume you want to store more than 400 or 500 values; what would you do then? Store them in individual variables?

The answer is NO; you don't have to. You can use an array to store multiple values in a single variable. You can use the index of the array to access a value.

Create an Array

In JavaScript, creating an array is relatively easy. You can create an array by two methods:

Using array literal,
Using the new keyword.

Let us see both methods of creation of arrays in detail.

Using Array Literal

The first method is to use the "array literal." You can use the array literal to create an array in JavaScript.

Syntax:

const name_of_the_array = [item_1, item_2, ...];

You can also try this code with Online Javascript Compiler

Example:

const languages = ["Java", "C", "Python"];
console.log(languages);

You can also try this code with Online Javascript Compiler

Output:

output

The array literal is the easiest and recommended way.

Using the new Keyword

The second way is to use the new keyword. You can use the "new" to create an array.

Example:

const languages = new Array("Java", "C", "Python");
console.log(languages);

You can also try this code with Online Javascript Compiler

Output:

output

Why new Array() is not recommended

The first method, i.e., using the "array literal," is the recommended one. Sometimes, the new keyword produces unexpected outputs. Let's understand it with an example.

We will insert three elements in an array.

const prime = new Array(5, 7, 11);
console.log(prime);

You can also try this code with Online Javascript Compiler

Output:

output

Now, we will insert one element in the array.

const prime = new Array(5);
console.log(prime);

You can also try this code with Online Javascript Compiler

Output:

output

Accessing an Element

If you want to access the elements of an array, you can use the index.

For example,

const languages = ["Java", "C", "Python"];
let language = languages[2];
console.log(language);

You can also try this code with Online Javascript Compiler

Output:

output

Changing an Element

In JavaScript, you can also change the elements of the array. You will need to use the index to change the elements.

For example,

const languages = ["Java", "C", "Python"];
languages[2] = "JavaScript";
console.log(languages);

You can also try this code with Online Javascript Compiler

Output:

output

Accessing the Full Array

In JavaScript, you can access the complete array using its name.

For example,

<!DOCTYPE html>
<html>
  <body>
    <h2>Arrays in JavaScript</h2>
    <p id="test"></p>   
    <script>
      const languages = ["Java", "C", "Python"];
      document.getElementById("test").innerHTML = languages;
    </script>
  </body>
</html>

You can also try this code with Online Javascript Compiler

Output:

output

Arrays are Objects

In JavaScript, an array is a type of object. The "typeof" operator returns "object" when used on an array.

Example:

const languages = {language1:"Java", language2:"C", language3:"JavaScript"};
let typelanguages = typeof languages;
console.log(typelanguages);

You can also try this code with Online Javascript Compiler

Output:

output

The arrays in Javascript use numbers to access their elements.

The main difference between arrays and objects is:

Arrays use indexes with numbers. You can access the "elements" using the numbers.
Objects use indexes with names. You can access the "members" using the names or strings.

Array:

const languages = ["Java", "C", "Python"];
console.log(languages);

You can also try this code with Online Javascript Compiler

Output:

output

Object:

const languages = {language1:"Java", language2:"C", language3:"JavaScript"};
console.log(languages.language3);

You can also try this code with Online Javascript Compiler

Output:

output

You can use the following:

Objects: When you want "strings" as the name of the elements.
Arrays: When you want "numbers" as the name of the elements.

The Elements can be Objects.

In JavaScript, the variables can be objects. We know that arrays are also objects. As a result, you can have variables of various types in the same Array.

An array is capable of holding items. An array is capable of containing functions. Even arrays are possible within an array.

Properties and Methods of an Array

You can create and use an array in JavaScript as per your need. But, there are many predefined array properties and methods. You can use the properties and methods to ease your work.

Example:

const languages = ["Java", "C", "JavaScript"];

// It will return the length of the array.
console.log(languages.length);

// It will return the sorted array.
languages.sort()
console.log(languages);

You can also try this code with Online Javascript Compiler

Output:

output

The length property

The length property is an essential property of an array. You can use it to return the length of the array. Length is the number of elements present in the array.

Example:

const languages = ["Java", "C", "JavaScript","Python"];

// It will return the length of the array.
console.log(languages.length);

You can also try this code with Online Javascript Compiler

Output:

output

Looping an Array

Sometimes, you need to access all the elements of the array. You can do it by two methods:

Using loops,
Using Array.forEach() function.

Using Loops

You can use the loops to traverse (accessing each element one by one) through the array.

Example:

We will use the for loop to traverse the array.

const languages = ["Java", "C", "JavaScript"];

for(let i=0; i<languages.length; i++) {
    console.log(languages[i]);
}

You can also try this code with Online Javascript Compiler

Output:

output

Array.forEach() function

You can use the Array.forEach() function to traverse through the array's elements via a function. It calls a function for every element present in the array.

Example:

const languages = ["Java", "C", "JavaScript"];

languages.forEach(myTestFunction);

function myTestFunction(value) {
    console.log(value);
}

You can also try this code with Online Javascript Compiler

Output:

output

Adding New Element to an Array

You can add the elements into an array as well. You can use the push() method to add a new element to an array.

For example,

const languages = ["Java", "C", "JavaScript"];

// Before pushing element.
console.log(languages);

languages.push("Python");

// After pushing element.
console.log(languages);

You can also try this code with Online Javascript Compiler

Output:

output

Must Read Fibonacci Series in JavaScript

Frequently Asked Question

What does print() mean in JavaScript?

The print() function helps you to print the currently displayed contents, such as a web page, text, or image on the computer screen.

What is the console in JavaScript?

In JavaScript, a console is an object which gives access to the browser debugging console.

How can you merge two arrays in JavaScript?

The concat() method connects (concatenates) two or more arrays together. The concat() function returns a new array. The combined arrays are contained in the new array.

How to order an array in JavaScript?

To sort an array, use the JavaScript sort() method. It sorts the array in ascending order. It takes an array as an argument. It changes the original array. It does not create a new array.

What is a string in JavaScript?

You can use a string to store and modify text. A JavaScript string is any number of characters enclosed in quotations.

Conclusion

So that's the end of the article.

After reading about the Array in JavaScript, Are you interested in reading/exploring more themes on JavaScript? Don't worry; Coding Ninjas has you covered.

Check out some articles on JavaScript like or operator in javascript and how to convert string to number in javascript.

Check out the following problems -

However, if you want to give your work an edge over the competition, you might choose to enroll in one of our premium courses.

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enroll in our courses and refer to the mock test and problems available; take a look at the interview experiences and interview bundle for placement preparations.

Do upvote our blog to help other ninjas grow.

Merry Learning!

Live masterclass

Switch from service to product-based MAANG companies

by Pranav Malik, SDE3 @ Oracle, Ex- Microsoft

17 Oct, 2024

01:30 PM

46+ registered

Predictive Analytics: Forecast ticket sales for an event like Coldplay

by Megna Roy, Data Analyst @ Amazon

15 Oct, 2024

01:30 PM

199+ registered

Switch from service to product-based MAANG companies

by Pranav Malik, SDE3 @ Oracle, Ex- Microsoft

17 Oct, 2024

01:30 PM

46+ registered

Predictive Analytics: Forecast ticket sales for an event like Coldplay

by Megna Roy, Data Analyst @ Amazon

15 Oct, 2024

01:30 PM

199+ registered

View more events