Arrays

The Array object, as with arrays in other programming languages, enables storing a collection of multiple items under a single variable name and has members for performing common array operations. An array allows storing duplicate elements and different data types. An array can be empty, or it may have different data type values.JavaScript arrays are zero-index. javascript arrays are resizable and can contain a mix of different data types.

Array() Creates a new Array object.

Creating an empty array

In JavaScript, we can create an array in different ways. Let us see different ways to create an array. It is very common to use const instead of letting to declare an array variable. If you are using const it means you do not use that variable name again.

• Using Array constructor

// syntax
const arr = Array()
// or
// let arr = new Array()
console.log(arr) // []

• Using square brackets([])

// syntax
// This is the most recommended way to create an empty list
const arr = []
console.log(arr)

Creating an array with values

In a Javascript array, We can store numbers as well as string at the same time.

const numbers = [0, 3.14, 9.81, 37, 98.6, 100] // array of numbers
const fruits = ['banana', 'orange', 'mango', 'lemon'] // array of strings, fruits

const arr = ['hey', 250, true,
    { country: 'Finland', city: 'Helsinki' },
    { skills: ['HTML', 'CSS', 'JS', 'React', 'Python'] }]
 // arr containing different data types

Accessing array items using index

We access each element in an array using their index. An array index starts from 0. The picture below clearly shows the index of each element in the array.

const fruits = ['banana', 'orange', 'mango', 'lemon']
let firstFruit = fruits[0] // we are accessing the first item using its index

console.log(firstFruit) // banana

secondFruit = fruits[1]
console.log(secondFruit) // orange

let lastFruit = fruits[3]
console.log(lastFruit) // lemon
// Last index can be calculated as follows

let lastIndex = fruits.length - 1
lastFruit = fruits[lastIndex]

console.log(lastFruit)  // lemon

Static methods

• Array.from() Creates a new Array instance from an array-like object or iterable object.

• Array.isArray() Returns true if the argument is an array, or false otherwise.

• Array.of() Creates a new Array instance with a variable number of arguments, regardless of the number or type of the arguments.

Instance properties

• Array.prototype.length

Reflects the number of elements in an array.

• Array.prototype[@@unscopables]

Contains property names that were not included in the ECMAScript standard prior to the ES2015 version and that are ignored for statement-binding purposes.

Instance methods

There are different methods to manipulate an array. These are some of the available methods to deal with arrays: Array, length, concat, indexOf, slice, splice, join, toString, includes, lastIndexOf, isArray, fill, push, pop, shift, unshift

Concatenating array using concat

concat: To concatenate two arrays.

const firstList = [1, 2, 3]
const secondList = [4, 5, 6]
const thirdList = firstList.concat(secondList)

console.log(thirdList) // [1, 2, 3, 4, 5, 6]

Getting array length

Length:To know the size of the array

const numbers = [1, 2, 3, 4, 5]
console.log(numbers.length) // -> 5 is the size of the array

Getting index an element in arr array

indexOf:To check if an item exist in an array. If it exists it returns the index else it returns -1.

const numbers = [1, 2, 3, 4, 5]

console.log(numbers.indexOf(5)) // -> 4
console.log(numbers.indexOf(0)) // -> -1
console.log(numbers.indexOf(1)) // -> 0
console.log(numbers.indexOf(6)) // -> -1

Converting array to string

toString:Converts array to string

const numbers = [1, 2, 3, 4, 5]
console.log(numbers.toString()) // 1,2,3,4,5

const names = ['John', 'Mathias', 'Elias', 'Brook']
console.log(names.toString()) // John,Mathias,Elias,Brook

Slice array elements

Slice: To cut out a multiple items in range. It takes two parameters:starting and ending position. It doesn't include the ending position.

  const numbers = [1,2,3,4,5]

  console.log(numbers.slice()) // -> it copies all  item
  console.log(numbers.slice(0)) // -> it copies all  item
  console.log(numbers.slice(0, numbers.length)) // it copies all  item
  console.log(numbers.slice(1,4)) // -> [2,3,4] // it doesn't include the ending position

Adding item to an array using push

Push: adding item in the end. To add item to the end of an existing array we use the push method.

// syntax
const arr  = ['item1', 'item2','item3']
arr.push('new item')
console.log(arr)
// ['item1', 'item2','item3','new item']

Removing the end element using pop

pop: Removing item in the end.

const numbers = [1, 2, 3, 4, 5]
numbers.pop() // -> remove one item from the end
console.log(numbers) // -> [1,2,3,4]

Removing an element from the beginning

shift: Removing one array element in the beginning of the array.

const numbers = [1, 2, 3, 4, 5]
numbers.shift() // -> remove one item from the beginning
console.log(numbers) // -> [2,3,4,5]

Add an element from the beginning

unshift: Adding array element at the beginning of the array.

const numbers = [1, 2, 3, 4, 5]
numbers.unshift(0) // -> add one item from the beginning
console.log(numbers) // -> [0,1,2,3,4,5]

Reversing array order

reverse: reverse the order of an array.

const numbers = [1, 2, 3, 4, 5]
numbers.reverse() // -> reverse array order
console.log(numbers) // [5, 4, 3, 2, 1]

Sorting elements in array

sort: arrange array elements in ascending order. Sort takes a call back function, we will see how we use sort with a call back function in the coming sections.

const webTechs = [
  'HTML',
  'CSS',
  'JavaScript',
  'React',
  'Redux',
  'Node',
  'MongoDB'
]

webTechs.sort()
console.log(webTechs) // ["CSS", "HTML", "JavaScript", "MongoDB", "Node", "React", "Redux"]

webTechs.reverse() // after sorting we can reverse it
console.log(webTechs) // ["Redux", "React", "Node", "MongoDB", "JavaScript", "HTML", "CSS"]

Before We End...

I hope you've found this article insightful, and that it helps you understand JavaScript arrays more clearly.