How to Check if Variable is Array or Not in Javascript
In this tutorial, you will learn how to check if variable is array or not 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 array or not 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
, andh1
). Thediv
element is just a wrapper for the rest of the elements. - The inner text for the
button
element is“Check”
and for theh1
element is“Result”
. - We have done some basic styling using CSS and added the link to our
style.css
stylesheet inside thehead
element. - We have also included our javascript file
script.js
with ascript
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
andh1
using thedocument.querySelector()
method and stored them inbtnCheck
andresult
variables respectively. - We have a global variable
user
and it holds an array as its value. - We have attached the
click
event listener to thebutton
element. - In the event handler function, we are using
isArray()
method to verify ifuser
is an array or not. Depending upon the result, we are displaying the Boolean value in theh1
element. Sinceuser
is an array, we will getTrue
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'; });