Table of Contents
The Array Literal, Your Everyday Go-To
This is what you'll use for almost everything, just square brackets with your values inside.
let fruits = ["apple", "banana", "mango"];
let empty = [];
let mixed = [1, "two", true, { three: 3 }];
Simple, readable, and it's what you'll see in the vast majority of real-world JavaScript code. If you're not sure which method to use, this is almost always the right one.The Array Constructor
You can also create an array using new Array(), though it's a lot less common in everyday code.let numbers = new Array(1, 2, 3); console.log(numbers); // [1, 2, 3]Here's the genuine gotcha though. Pass it a single number, and it behaves completely differently, creating an empty array with that length instead of an array containing that number.
let strange = new Array(5); console.log(strange); // [ <5 empty items> ] console.log(strange.length); // 5This inconsistency is exactly why most developers just stick with the literal syntax instead.
Array.of(), a Safer Alternative
If you specifically want to create an array from given values, including a single number, without that constructor quirk, Array.of() does exactly that.console.log(Array.of(5)); // [5] console.log(Array.of(1, 2, 3)); // [1, 2, 3]
Array.from(), for Converting Other Things Into Arrays
This one's genuinely useful when you've got something array-like, or iterable, that isn't technically an array yet, and you need to turn it into one.
let letters = Array.from("hello");
console.log(letters); // ["h", "e", "l", "l", "o"]
let set = new Set([1, 2, 2, 3]);
console.log(Array.from(set)); // [1, 2, 3]
It also accepts a second argument, a function to transform each item while converting, which saves you a separate map() call afterward.
let doubled = Array.from([1, 2, 3], n => n * 2); console.log(doubled); // [2, 4, 6]
Creating an Array of a Specific Size, Pre-Filled
Sometimes you want an array of a certain length, already filled with a starting value, useful for setting up a grid or a placeholder list.let zeros = new Array(5).fill(0); console.log(zeros); // [0, 0, 0, 0, 0]new Array(5) alone creates empty slots that don't play well with methods like map(), so fill() is what actually makes those slots usable.
let broken = new Array(3).map(() => 1); console.log(broken); // [ <3 empty items> ], map skips empty slots! let working = new Array(3).fill(0).map(() => 1); console.log(working); // [1, 1, 1]
Creating One Array From Another
The spread operator is a clean way to create a new array based on an existing one, genuinely useful for copying or combining arrays without changing the originals.let original = [1, 2, 3]; let copy = [...original]; let combined = [...original, 4, 5]; console.log(copy); // [1, 2, 3] console.log(combined); // [1, 2, 3, 4, 5]
Conclusion
For almost everything you write, the array literal, plain square brackets, is genuinely all you need. The other methods exist for specific situations, Array.from() when you're converting something else into an array, fill() when you need a pre-sized array ready to use, and the spread operator when you want a fresh copy of one you already have. Knowing when each one actually fits is really the whole skill here.Frequently Asked Questions (FAQs)
1.Why does new Array(5) behave differently from new Array(1, 2, 3)?2.What's the easiest way to create an array filled with the same value?A single number is treated as a length, creating empty slots, while multiple arguments are treated as actual values. It's a well-known inconsistency, which is why most developers avoid the constructor for single numbers entirely.
3.When should I use Array.from() instead of the array literal?new Array(length).fill(value), like new Array(5).fill(0). It's the cleanest way to get a ready-to-use array of a specific size.
Whenever you're converting something that isn't already a plain array, like a string, a Set, or an array-like object such as a NodeList. For creating an array from scratch with known values, the literal syntax is simpler.
0 Comments