Skip to main content

Command Palette

Search for a command to run...

JavaScript Arrays

Updated
•3 min read•View as Markdown
JavaScript Arrays
B

Web technology related ➡️ blogger || video creator || author || online instructor || YouTuber || web developer || freelancer


An array is the collection of ordered items. These ordering collections make array index zero-based.


Creating and Accessing an Array

Creating an Array

Arrays are created as an object. See the syntax below:

array = new Array(item1, item2, ...,itemN);

The above syntax can be rewritten as shown below:

array = [ item1, item2, ...,itemN ];

The items, item1, item2, ...,itemN are of any data type.

See the example below:

// const arr = new Array(true, "Bob", 34, 7n);
const arr = [ true, "Bob", 34, 7n  ];

Alternatively, you can append elements to an element.

const arr = [];

arr[0] = true;
arr[1] = "Bob";
arr[2] = 34,
arr[3] = 7n

console.log(arr); // [ true, "Bob", 34, 7n  ]

Accessing an Array

Arrays items are in order or numbered starting from zero (0, 1, ..., N).

See the example below:

const arr = [ true, "Bob", 34, 7n  ];

console.log( arr[0] ) // true
console.log( arr[1] ) // Bob
console.log( arr[2] ) // 34
console.log( arr[3] ) // 7n

The length number property determines the number of items in an array.

See the example below:

const arr = [ true, "Bob", 34, 7n  ];

arr.length; // 4

The example above shows the array's last item index is arr.length - 1.

See the example below:

const arr = [ true, "Bob", 34, 7n  ];

arr[arr.length - 1]; // 7n

Trailing comma

An array, just like an object, may end with a comma:

const arr = [
  'Melon', 
  { name: 'Bello' }, 
  true, 
  function() { 
    console.log('Hello World!'); 
  } 
];

console.log( arr[1].name ); // Bello

arr[3](); // Hello World!

Array is an object and thus behaves like an object.

typeof arr; // object

Array queue

In computer science, ordered collection of elements supports two operations:

  • push
  • shift

push

The push method appends an item to an array.

See the example below:

const fruits = [ "Apple", "Orange" ];

fruits.push("Melon");

console.log(fruits); // [ 'Apple', 'Orange', 'Melon' ]

The above example can be rewritten as shown below:

const fruits = [ "Apple", "Orange" ];

fruits[fruits.length] = "Melon";

console.log(fruits); // [ 'Apple', 'Orange', 'Melon' ]

shift

Opposite to the push method, an item can be removed (and returned) at the beginning of an array.

const fruits = [ "Apple", "Orange", "Melon" ];

console.log( fruits.shift() ); // Apple => returned removed item

console.log(fruits); // [ 'Orange', 'Melon' ]

Array stack

In computer science, ordered collection of elements supports two operations:

  • push
  • pop

pop

The pop method removes the last element of the array and returns it:

const fruits = [ "Apple", "Orange", "Melon" ];

console.log( fruits.pop() ); // Melon => returned removed item

console.log(fruits); // [ 'Apple', 'Orange' ]

The shift method removes an element from the beginning of an array; while the pop method removes an element from the end of an array.

See the example below:

const fruits = [ "Apple", "Orange", "Melon" ];

fruits.shift();

console.log(fruits); // [ "Orange", "Melon" ]

The example above is the same as below:

const fruits = [ "Apple", "Orange", "Melon" ];

fruits[0] = fruits[1]; // [ 'Orange', 'Orange', 'Melon' ]
fruits[1] = fruits[fruits.length-1]; // [ 'Orange', 'Melon', 'Melon' ]
fruits[fruits.length-1] = fruits[fruits.length]; 
// [ 'Orange', 'Melon', undefined ]

console.log( fruits.pop() ); // undefined

console.log(fruits); // [ "Orange", "Melon" ]

Methods push/pop run fast, while shift/unshift are slow.

For stacks the principle is based on LIFO (Last-In-First-Out) while queues, FIFO (First-In-First-Out) principle. In computer science, the data structure that allows this is called deque.

unshift

The unshift method is the opposite of push, it adds an element to the beginning of an array.

const fruits = [ "Orange", "Melon" ];

fruits.unshift("Apple");

console.log(fruits) // [ Apple, "Orange", "Melon" ]

Happy coding


image.png


image.png

L

Thank U Brotha! :)

B
Bello5y ago

You welcome bro

JavaScript

Part 45 of 50

You will learn the basics of JavaScript, including the Modern JS or *ECMAScript 2015+* The approach is from the basics to more advanced topics with lots of examples. It also include YouTube videos...

Up next

The Internal and Performance of JavaScript Arrays

In the previous article, the array basic was introduced. In this article, we will go a little deeper by looking into the internal and performance of arrays. Array Internals Arrays are ordered objects or objects are arrays if their keys are in order....