DevelopmentJavaScript | 4 Min Read

JavaScript Array Methods: Array.of() Explained

The Array is one of the most important data types in JavaScript, here is everything you need to know about the Array method Array.of().

Series Introduction

The JavaScript Array data type currently has 37 methods on it according to the MDN docs and in this series we are going to cover them all one by one explaining each one with examples as we work our way down the list.

If you have any questions regarding anything in this series please get in contact with me by using the methods listed at the bottom of this post and if you think I've got something wrong please create a pull request on GitHub to correct the information (link at the bottom of the article).

This is post #3 in this series if you're interested in reading the other posts in this series you will find a complete list with links at the bottom of this post.


Method #3: Array.of()

Array.of() allows for the creation of a new Array instance using the passed in values regardless of how many values there are or what type of data they are. Array.of() will take the passed in values and return a new array containing them.

Creating Arrays

You may be asking why would we need a method like this considering there are multiple other ways of creating an array from data, you could for instance call the Array constructor and pass in the values you want to put in the array like so:

1Array("str", 3, 1); // Array(3) [ "str", 3, 1 ]
jsx

Now, this is all good but there is one key difference which separates the Array constructor and the Array.of() method and that is how they handle single integer values being passed.

If you were to pass a single integer to the Array constructor like so:

1Array(3);
jsx

You would expect it to output:

1[3];
jsx

But, it doesn't. You see when you pass in a single integer to the Array constructor it will actually return a new array with that many empty slots, not even undefined. Just completely empty.

Here is what the console would show as being returned for the above code:

1// Array(3) [ <3 empty slots> ]
jsx

Now if we take the same values and pass it through Array.of() we get a different response:

1Array.of(3); // [ 3 ]
jsx

As you can see we actually get a proper array returned to us with the values we expected to see in it.

This method is definitely one of the more niche ones on the Array data type as there are so many more ways of creating arrays in JavaScript but this a good one to be aware of should you ever come across it.

Examples

Although this is a pretty small method with not many working parts, let's look at some examples to further understand it.

1Array.of(1, 2, 3, 4, 5); // [ 1, 2, 3, 4, 5 ]
2Array.of({ hello: 1 }, 2, "str", true); // [ {…}, 2, "str", true ]
3Array.of(undefined, null, false, 0); // [ undefined, null, false, 0 ]
jsx

So, as you can see from the above examples, you can make anything into an array using this method as long as the values you pass are valid ones. However, if I'm being honest I can't find a reason to use this method over just passing the values into '[]'.

But, I suppose this is the beautiful thing about programming there is always more than one way to achieve our goals. However, if you do know a good use-case for using Array.of() over other ways of creating arrays please let me know over on Twitter.

As always if you have any questions or just want to chat you can find me on any of the methods listed below. I hope you enjoyed this quick post and if you did I would greatly appreciate it if you would consider sharing it so someone else could find it useful.

Series post links



Content

Latest Blog Posts

Below is my latest blog post and a link to all of my posts.

View All Posts

Content

Latest Video

Here is my YouTube Channel and latest video for your enjoyment.

View All Videos
Get more clients by this doing 1️⃣ thing!

Get more clients by this doing 1️⃣ thing!

Contact

Join My Newsletter

Subscribe to my weekly newsletter by filling in the form.

Get my latest content every week and 0 spam!