PART 1 - Introduction to JavaScript arrays

In JavaScript, an array is an ordered list of values. Each value is called an element specified by an index:

A JavaScript array has the following characteristics:

1. First, an array can hold values of mixed types (number, string, boolean, null, undefined, object ...)

2. Second, the size of an array is dynamic and auto-growing. In other words, you don’t need to specify the array size up front.

Creating JavaScript arrays

JavaScript provides you with two ways to create an array. The first one is to use the Array constructor as follows:

const arr1 = new Array('🍓','🌽','🥑', ...);
const arr2 = Array('🍓','🌽','🥑', ...);

JavaScript allows you to omit the new operator when you use the Array() constructor.

The more preferred way to create an array is to use the array literal notation:

const arr = ['🍓','🌽','🥑', ...];

Accessing JavaScript array elements

JavaScript arrays are zero-based indexed. To access an element in an array, you specify an index in the square brackets []. The following shows how to access the elements of the arr array:

const arr = ['🍓','🌽','🥑'];

console.log(arr[0]);    //  '🍓'
console.log(arr[1]);    //  '🌽'
console.log(arr[2]);    //  '🥑'

const arr = ['🍓','🌽','🥑'];
arr[2] = '🍗';

console.log(arr);   //  [ '🍓', '🌽', '🍗' ]

Use the length property to get the size of an array.

const arr = ['🍓','🌽','🥑'];
console.log(arr.length); // 3

Use delete operator to delete an element in the array. It leaves undefined holes in the array.

const arr = ['🍓','🌽','🥑'];
delete arr[0];

console.log(arr.length)    // 3
console.log(arr[0])        // undefined
console.log(arr);          // [ undefined, '🌽', '🥑' ]

Basic operations on arrays

push() adds an element to the end of an array

let arr = ['🍓','🌽','🥑'];
arr.push('🍗');

console.log(arr); // ['🍓','🌽','🥑','🍗']

pop() removes an element from the end of an array

const arr = ['🍓','🌽','🥑'];
const lastElement = arr.pop();

console.log(lastElement); //🥑

unshift() adds new elements to the beginning of an array and returns the new length

const arr = ['🍓','🌽','🥑'];
const unshift =  arr.unshift('🍗');

console.log(unshift) // 4
console.log(arr)     // [ '🍗', '🍓', '🌽', '🥑' ]

shift() removes the first element of an array and returns that element

const arr = ['🍓','🌽','🥑'];
const shift = arr.shift();

console.log(shift);  // 🍓
console.log(arr)     // [ '🌽', '🥑' ]

indexOf() finds an index of an element in the array

const arr = ['🍓','🌽','🥑'];
const index = arr.indexOf('🥑');

console.log(index);  // 2

isArray() or instanceof check whether an object is an array

const arr = ['🍓','🌽','🥑'];

console.log(Array.isArray(arr));     // true
console.log(arr instanceof Array);   // true

reverse() reverses the order of the elements in an array. It overwrites the original array

const arr = ['🍓','🌽','🥑'];
arr.reverse();

console.log(arr);  //  [ '🥑', '🌽', '🍓' ]

includes() returns true if an array contains a specified value

const arr = ['🍓','🌽','🥑'];
const include = arr.includes('🥑', 1);   // Start the search at position 1
console.log(include)    //  true

concat() joins two or more arrays and returns a new array, containing the joined arrays.

const arr1 = ['🍓','🌽','🥑'];
const arr2 = ['🐱','🐰']
const arr = arr1.concat(arr2);

console.log(arr)   // [ '🍓', '🌽', '🥑', '🐱', '🐰' ]

join() returns an array as a string.

const arr = ['🍓','🌽','🥑'];
const join = arr.join(', ')
console.log(join)   // 🍓, 🌽, 🥑

slice() selects from a given start, up to a (not inclusive) given end

const arr = ['🍓','🌽','🥑','🐱','🐰'];
const slice1 = arr.slice(0, -2)
const slice2 = arr.slice(0, 3)

console.log(slice1)   // [ '🍓', '🌽', '🥑' ]
console.log(slice2)   // [ '🍓', '🌽', '🥑' ]