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);
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 ๐
Alright, letโs try this method on other values and see what we get ๐ฉโ๐ฌ
true
// Empty Array
Array.isArray([]); // true
// Array
Array.isArray(['๐']); // true
// Array Constructor
Array.isArray(new Array('๐')); // true
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
Another popular choice you might is using instanceof
const books = ['๐', '๐', '๐'];
books instanceof Array; // true
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.
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
โ 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
#javascript