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 = numbers.map((item) => item * item);
console.log(newArray); //[121, 144, 100, 400]

• array.map() 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 ) {
        accumulator.push(current);
    }
    // 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