How to Create a JavaScript Array

The recommended way to create a JavaScript array is an array literal with square brackets. You can create an empty array or provide its initial values immediately.

const empty = [];
const languages = ["PHP", "JavaScript", "Python"];
console.log(languages[1]); // JavaScript

Array indexes begin at 0. After creation you can read, replace, append, or remove elements with indexes and array methods.

Create an Array with Array Literal Syntax Top ↑

Array literals are concise, readable, and avoid the special single-number behavior of the Array constructor.

const scripts = ["PHP", "ASP", "JavaScript", "HTML"];
console.log(scripts);

The original page created an empty array first and assigned indexes one by one. That still works:

const scripts = [];
scripts[0] = "PHP";
scripts[1] = "ASP";
scripts[2] = "JavaScript";
scripts[3] = "HTML";

Create an Array with the Array Constructor Top ↑

const scripts = new Array("PHP", "JavaScript", "Python");
console.log(scripts.length); // 3

Be careful with a single numeric argument:

const a = new Array(3);
console.log(a.length); // 3
console.log(a[0]);     // undefined

const b = [3];
console.log(b.length); // 1

new Array(3) creates three empty slots. It does not create [3].

Create Values Predictably with Array.of() Top ↑

Array.of() is useful when you want constructor-style syntax but need a single number to become an element.

const values = Array.of(3);
console.log(values);        // [3]
console.log(values.length); // 1

Create an Array from an Iterable or Array-Like Value Top ↑

Array.from() creates a new array from an iterable such as a string, or from an array-like object. It can also map values while creating the array.

const letters = Array.from("HTML");
console.log(letters); // ["H", "T", "M", "L"]

const squares = Array.from({ length: 4 }, (_, i) => i * i);
console.log(squares); // [0, 1, 4, 9]

To create an array by breaking a string at a delimiter, use String.split().

Add Elements by Index Top ↑

const languages = [];
languages[0] = "PHP";
languages[1] = "JavaScript";
languages[2] = "Python";

console.log(languages[2]); // Python

If you assign an index beyond the current end, JavaScript increases length and leaves empty slots in between.

const items = ["A"];
items[3] = "D";
console.log(items.length); // 4
console.log(items);        // ["A", empty × 2, "D"]

Add Elements with push() and unshift() Top ↑

push() adds values at the end. unshift() adds values at the beginning.

const languages = ["JavaScript"];
languages.push("Python");
languages.unshift("PHP");
console.log(languages); // ["PHP", "JavaScript", "Python"]

Access and Update Array Elements Top ↑

const scripts = ["PHP", "ASP", "JavaScript", "HTML"];
console.log(scripts[2]); // JavaScript

scripts[1] = "Python";
console.log(scripts[1]); // Python

For the last element, use scripts[scripts.length - 1]. See array length for details.

Empty Slots vs Explicit undefined Top ↑

An empty slot and an element whose value is explicitly undefined can behave differently with some iteration methods. Prefer dense arrays unless sparse behavior is intentional.

const sparse = new Array(3);
const explicit = [undefined, undefined, undefined];

console.log(0 in sparse);   // false
console.log(0 in explicit); // true

Create a New Array from Another Array Top ↑

const original = [1, 2, 3];
const copyWithSpread = [...original];
const copyWithFrom = Array.from(original);

console.log(copyWithSpread === original); // false

These are shallow copies. If an element is an object or nested array, that nested value is still shared.

Arrays Can Contain Different JavaScript Types Top ↑

const record = [
  "Ravi",
  28,
  true,
  { city: "Hyderabad" },
  ["JavaScript", "PHP"]
];

console.log(record[3].city); // Hyderabad

Mixed arrays are valid, although objects are often clearer when values represent named fields in one record.

Common Array Creation Mistakes Top ↑

• Using new Array(5) when you mean [5].
• Forgetting that indexes start at 0.
• Creating accidental sparse arrays by assigning far beyond the current last index.
• Using const and assuming the array cannot be changed: const prevents reassignment of the variable, not mutation of the array contents.
• Copying with = and expecting a new array; that creates another reference to the same array.

Creating Arrays: Video Example Top ↑

Try the String-to-Array Demo → Display Array Elements →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: