March 19, 2022

How Do You Check if a Variable is an Array in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how do you check if a variable is an array in javascript. An array is a collection of items irrespective of their data types. They are easy to modify because each item in an array has its unique index number. However, the index does change depending upon the kind of modifications you perform on an array.

As you already know, javascript is a weakly typed language so there is no guarantee that the data type of a certain variable going to remain the same through its lifecycle. This makes it more important to learn how you can verify if a variable is holding an array before you even start accessing its items.

In the following example, we have one global variable user and we just want to verify if it holds an array as its value or not. Depending upon the result of the check, we will get a Boolean value and we will display it inside the h1 element. Please have a look over the code example and steps given below.

HTML & CSS

We have 3 elements in the HTML file (div, button, and h1). The div element is just a wrapper for the rest of the elements.
The inner text for the button element is “Check” and for the h1 element is “Result”.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div>
        <button>Check</button>
        <h1>Result</h1>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

body {
    text-align: center;
}

div {
    display: inline-block;
}

button {
    display: inline-block;
    padding: 10px 20px;
}

Javascript

We have selected 2 elements button and h1 using the document.querySelector() method and stored them in btnCheck and result variables respectively.
We have a global variable user and it holds an array as its value.
We have attached the click event listener to the button element.
In the event handler function, we are using isArray() method to verify if user is an array or not. Depending upon the result, we are displaying the Boolean value in the h1 element. Since user is an array, we will get True as a result.

let btnCheck = document.querySelector('button');
let result = document.querySelector('h1');

let user = ['Peter'];

btnCheck.addEventListener('click', () => {
    result.innerText = Array.isArray(user) ? 'True' : 'False';
});

You May Also Like: