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

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay