Better Array check with Array.isArray šŸŽ‰šŸŽ‰šŸŽ‰

Better Array check with Array.isArray šŸŽ‰šŸŽ‰šŸŽ‰

In JavaScript, arrays are not true arrays. They are actually objects. So you can't simply do a typeof check. Because it will return object šŸ˜±

But not a problem! Use Array.isArray() -- finally, there is an easier way to check if a value is an actual array šŸŽ‰

const books = ['šŸ“•', 'šŸ“™', 'šŸ“—'];

// Old way
Object.prototype.toString.call(books) === '[object Array]';

// āœ… Better
Array.isArray(books);

Array is not a true array

Let's see what I mean by this, array is not a true array.

const array = [];

typeof array; // 'object'

ā˜ļøThat's why you can't use your typical typeof. Because array is an object type šŸ˜•

Array.isArray Demo

Alright, let's try this method on other values and see what we get šŸ‘©ā€šŸ”¬

These are all arrays, and will return true

// Empty Array
Array.isArray([]); // true

// Array
Array.isArray(['šŸ““']); // true

// Array Constructor
Array.isArray(new Array('šŸ““')); // true

These are NOT arrays and will return false

// Object
Array.isArray({}); // false

// Object
Array.isArray({book: 'šŸ““'}); // false

// Number
Array.isArray(123); // false

// Boolean
Array.isArray(true); // false

// Boolean
Array.isArray(false); // false

// String
Array.isArray('hello'); // false

// Null
Array.isArray(null); // false

// Undefined
Array.isArray(undefined); // false

// NaN
Array.isArray(NaN); // false

instanceof vs Array.isArray

Another popular choice you might is using instanceof

const books = ['šŸ“•', 'šŸ“™', 'šŸ“—'];

books instanceof Array; // true

But...

The problem is it doesn't work with multiple context (e.g. frames or windows). Because each frame has different scopes with its own execution environment. Thus, it has a different global object and different constructors. So if you try to test an array against that frame's context, it will NOT return true, it will return incorrectly as false.

šŸ¤Æ What are you talking about??? šŸ‘ˆ If this is floating in your mind. Don't worry, I was too. To understand this, you need to understand JavaScript's execution context. Here's a great video explaining it, An Introduction to Functions, Execution Context and the Call Stack. This is a bit more of an advanced topic, so if you're just a beginner, feel free to skip through it. And when you get a bit more comfortable with JavaScript, then definitely return to this topic. In the meantime, let me try to explain this "multiple context" in non-dev terms.

Explanation in non-dev terms

You can think of frames like different planets. Every planet has its own system, with different gravity pull and composition. So instanceof only works on our planet, Earth. If you bring it to Mars, it won't work. However, with Array.isArray() it will work on any planet. It's universal. That's why you should use Array.isArray().

// Creating our new "planet" called mars
const mars = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length-1].Array;

// Let's make an array in our new "planet", mars
var marsArray = new xArray('šŸ‘©', 'šŸ‘Ø');

// Using the instanceof tool to test the marsArray
marsArray instanceof Array;
//  false --> āŒ doesn't work

// Now, let's try using our universal tool
Array.isArray(marsArray)
// true --> āœ… great, it works!

Thanks for reading ā¤

If you liked this post, please do share/like it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading

ā˜ž The Complete JavaScript Course 2019: Build Real Projects!

ā˜ž Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

ā˜ž JavaScript Bootcamp - Build Real World Applications

ā˜ž The Web Developer Bootcamp

ā˜ž New ES2019 Features Every JavaScript Developer Should Know

ā˜ž Best JavaScript Frameworks, Libraries and Tools to Use in 2019

ā˜ž 12 tips for writing clean and scalable JavaScript

ā˜ž 10 JavaScript Charting Libraries for Every Data Visualization Need

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

JavaScript Tutorial: if-else Statement in JavaScript

This JavaScript tutorial is a step by step guide on JavaScript If Else Statements. Learn how to use If Else in javascript and also JavaScript If Else Statements. if-else Statement in JavaScript. JavaScript's conditional statements: if; if-else; nested-if; if-else-if. These statements allow you to control the flow of your program's execution based upon conditions known only during run time.

How to Retrieve full Profile of LinkedIn User using Javascript

I am trying to retrieve the full profile (especially job history and educational qualifications) of a linkedin user via the Javascript (Fetch LinkedIn Data Using JavaScript)

Java vs. JavaScript: Know The Difference

Java vs. JavaScript: Know the Difference, Java vs. JavaScript: What's the Difference? Java vs. JavaScript: Major Similarities and Differences. pros and cons of JavaScript and Java.