Javascript Multiple ways to create an array with examples

This tutorial shows you multiple ways to create an array in JavaScript.

Array elements are stored with index numbers and contain a finite number of elements. There are multiple ways we can create an Array in javascript

  • square bracket literal notation syntax

Array variables are created and declared with a single line using a square bracket with comma-separated values.

// Declare and initialize an array of numbers
const numbers = [1, 2, 3, 4, 5];

// Declare and initialize an array of strings
const words = ["one", "two", "three"];
  • Array created using Array constructor

Array is a class in javascript, An array created using a new Array of length

// Array with a length of 2
const arrayObject = new Array(2);
console.log(arrayObject); //  [undefined, undefined]

Another way, you create an array using the constructor with fixed values.

// Array with fixed values
const arrayObject = new Array(1, 2, 3);
console.log(arrayObject); //  [1, 2,3]
  • Create an Empty Array
// Array with a length of 2
const arrayObject = [];
console.log(arrayObject); //  []
  • empty square brackets([]) used to create an array variable of length zero.
  • Create an arrayObject variable by assigning [] bracket
  • You can add elements to an array using index later.

Array.of() function

Another is to create an array by assigning elements.

Array.of() function is used to create a fixed set of values using Array.of() function

// Array with fixed values
const words = Array.of("one", "two", "three");
console.log(words); //  ["one", "two", "three"]

Array create with fixed default values

// Array with length of 3 with default values
const arrayObj = Array(3).fill(0);
console.log(arrayObj); //  [0, 0, 0]
const arrayUndefined = Array(3).fill(undefined);
console.log(arrayUndefined); // [undefined, undefined, undefined]
  • fill(defaultvalue) used to fill an array with default values
  • Here, created an array of fixed size using Array(size)
  • The fill(element) method initializes an array with a default element.
  • Useful when you need to create prefilled data for a finite array

Spread Operator

The Spread operator is introduced in ES6 to extract elements from an object and array.

const arraySrc = [11, 12];
const newArray = [...arraySrc, 10, 20];
console.log(arraySrc); //[11, 12]
console.log(newArray); // [11, 12, 10, 20]

-Spread Operator(…) allows you to extract the elements from an iterable type such as object and arrays.

  • Here new array is created by the old array with the spread operator and adding 2 more elements.

Array.from() function

const numbers = new Array(11, 12, 10, 20);
const newArray = Array.from(numbers);

console.log(newArray); //[11, 12, 10, 20]
  • Array.from() function used to create a new array from a given array.
  • Here, Passed an array to from() function to create an new array.

Array of Arrays creation

This is an example of creating a 2D array, also called a Matrix.

// Array of arrays creation
const arrayOfArrays = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],

console.log(arrayOfArrays); // [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
  • Arrays contain another array as an element. You can create 2D 3D or nxn arrays.
  • Here, Create a two-dimensional array where Row contains another array of elements. Each Column contains an element.

Create a Character array from a given string

const str = "test";
const characters = [...str];
console.log(characters); //["t", "e", "s", "t"]
  • spread operator for a string extracts all characters
  • It creates an array of characters with [] syntax.

Create a new array using the map function

const numbers = new Array(11, 12, 10, 20);
const newArray = => item * item);
console.log(newArray); //[121, 144, 100, 400]
  • function used to iterate each element, and apply a function to it.

  • Here, iterate each element, apply multiplication of the same element, and return an element

  • new array created with the result.

    Array reduce function

const numbers = new Array(11, 12, 10, 20);
const newArray = numbers.reduce((accumulator, current) => {
    // Filter array of  numbers less than 15
    if (current <15 ) {
    // Return the accumulator for every iteration
    return accumulator;
}, []); // Initial accumulator as empty array

console.log(newArray); //[ 11, 12, 10 ]
  • reduce function takes a function that accepts accumulator and current value.
  • accumulator holds the values as an array
  • In this example, Iterate each element by initializing an accumulator arra
  • if the condition passes, push an element to an accumulator
  • Once all elements are iterated, Returns an accumulator