DEV Community

Cover image for JavaScript Arrays
Bello Osagie
Bello Osagie

Posted on β€’ Edited on

1 1

JavaScript Arrays


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);
Enter fullscreen mode Exit fullscreen mode

The above syntax can be rewritten as shown below:

array = [ item1, item2, ...,itemN ];
Enter fullscreen mode Exit fullscreen mode

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  ];
Enter fullscreen mode Exit fullscreen mode

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  ]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!
Enter fullscreen mode Exit fullscreen mode

Array is an object and thus behaves like an object.

typeof arr; // object
Enter fullscreen mode Exit fullscreen mode

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' ]
Enter fullscreen mode Exit fullscreen mode

The above example can be rewritten as shown below:

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

fruits[fruits.length] = "Melon";

console.log( fruits ); // [ 'Apple', 'Orange', 'Melon' ]
Enter fullscreen mode Exit fullscreen mode

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' ]
Enter fullscreen mode Exit fullscreen mode

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' ]
Enter fullscreen mode Exit fullscreen mode

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" ]
Enter fullscreen mode Exit fullscreen mode

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" ]
Enter fullscreen mode Exit fullscreen mode

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" ]
Enter fullscreen mode Exit fullscreen mode

Happy coding


image.png


image.png

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay