JavaScript Arrays

An array is a collection of elements stored in a single varibale.

Arrays in JavaScript are not a type on their own.

Arrays are objects.

We have two (2) ways of initializing an empty array:

let arr = [];
let arr = Array();

The first is using the array literal syntax. The second uses the Array built-in function.

You can pre-fill the array using this syntax:

let arr = [1,2,3,4,5];
let arr = Array.of(1,2,3,4,5);

An array can hold any value, even value of different types:

let arr = [1,"Codingkoleji",["a", "b"]];

Example

let arr = [1,"Codingkoleji",["a", "b"]];
console.log(hello);

Since we can add an array into an array, we can create multi-dimensional arrays, which have very useful applications (e.g. a matrix):

let arr = [
  [1, 2, 3]
  [4, 5, 6]
  [7, 8, 9]
];

arr[0][0] //1
arr[2][0] //7

Example

let arr = [
  [1, 2, 3]
  [4, 5, 6]
  [7, 8, 9]
];

console.log(arr[0][0]); //1
console.log(arr[2][0]); // 7

You can access any element of the array by referencing its index, which starts from zero:

arr[0] //1
arr[1] //2
arr[2] //3

You can initialize a new array with a set of values using this syntax, which first initializes an array of 12 elements, and fills each element with the 0 number:

Array(20).fill(0);

Example

let arr = Array(20).fill(0);
console.log(arr);

You can get the number of elements in the array by checking its length property:

let arr = [1,2,3];
arr.length;//3

Example

let arr = [1,2,3];
console.log(arr.length); // 3

Note that you can set the length of the array. If you assign a bigger number than the array's current capacity, nothing happens. If you assign a smaller number, the array is cut at that position:

let arr = [1,2,3];
arr //[ 1, 2, 3 ]
arr.length = 2;
arr //[ 1, 2]

Example

let arr = [1,2,3];
console.log(arr); //[ 1, 2, 3 ]
arr.length = 2;
console.log(arr.length); //[ 1, 2]

How to add an item to an array

We can add an element at the end of an array using the push()method:

arr.push(4);

Example

let arr = [1,2,3];
arr.push(4);
console.log(arr);

We can push an item from the beginning of an array using the unshift()method:

arr.unshift();

Example

let arr = [1,2,3];
arr.unshift(4);
console.log(arr);

How to remove an item from an array

We can remove an item from the end of an array using the pop()method:

arr.pop();

Example

let arr = [1,2,3];
arr.pop();
console.log(arr);

We can remove an item from the beginning of an array using the shift()method:

arr.shift();

Example

let arr = [1,2,3];
arr.shift();
console.log(arr);

How to join two or more arrays

You can join multiple arrays by using concat():

const a = [1,2];
const b = [3,4];
const c = a.concat(b);//[1,2,3,4]

a //[1,2]
b //[3,4]
c //[1,2,3,4]

Example

const a = [1,2];
const b = [3,4];
const c = a.concat(b);
console.log(c); //[1,2,3,4]

How to find a specific item in the array

You can use the find()method of an array:

arr.find((element, index, array) => { 
  //return true or false
})

Returns the first item that returns true. Returns undefined if the element is not found.

Example

let arr = [1,2,3];

let  found =  arr.find((element, index, array) => { 
  console.log("Checking element of " + "at index " + index );
  return element % 2 === 0;
})
console.log(found);

A commonly used syntax is:

arr.find((x) => x.id === my_id)

Example

let arr = [1,2,3];
let  my_id = 2;

let  found =  arr.find((x) => x === my_id)

console.log(found);

The above line will return the first element in the array that has id === my_id.

findIndex()works similarly to find()but returns the index of the first item that returns true, and if not found, it returns undefined

a.findIndex((element, index, array) => { 
  //return true or false
})

Example

let arr = [1,2,3];

let  found =  arr.findIndex((element, index, array) => { 
  console.log("Checking element of " + "at index " + index );
  return element % 2 === 0;
})
console.log(found);

Another method is includes():

arr.includes(value)

Returns true if aconatins value.

Example

let arr = [1,2,3];
let  found =  arr.includes(3)
console.log(found);

a.includes(value, i)

Returns true if a contains valueafter the position i