DEV Community

loading...
Cover image for JavaScript Arrays

JavaScript Arrays

bello profile image Bello ・3 min read


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

Discussion (0)

pic
Editor guide