Coner Murphy

Published on 30 May 2020 | 4 Minute 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().

JavaScript Array Methods: Array.of() Explained

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



šŸ‘„

Latest Content...

What Iā€™m up to and more.

  • 3 Reasons Why You Need to Design Components and Not Pages

    26 Jun 2021

    3 Reasons Why You Need to Design Components and Not Pages

    If you want to design better websites then you need to stop designing at a page level and start thinkning about components. Here's 3 reasons why.

  • 6 Twitter Analytics Terms You Need to Know to Grow an Audience in 2021

    26 Jun 2021

    6 Twitter Analytics Terms You Need to Know to Grow an Audience in 2021

    Building a Twitter audience is a great way to grow your business. So, here are 6 Twitter analytics terms you need to know and how to measure them.

  • The Complete 2021 Guide to HTTP Status Codes and Their SEO Influence

    1 Jun 2021

    The Complete 2021 Guide to HTTP Status Codes and Their SEO Influence

    HTTP status codes are a vital part of the web, they allow for clear communication between clients and servers as well as influence your SEO score.

Want to read more?

View all posts here