GeeKee's Odyssey

GeeKee's Odyssey

Arrays

Photo by Christina Rumpf on Unsplash

Arrays

Stingrays, manta rays...now arrays?

gayatri kumar's photo
gayatri kumar
·Jun 29, 2022·

5 min read

Table of contents

  • Arrays are Indexed
  • Arrays are Mutable
  • Array Methods
  • Const with Arrays
  • Reference
  • Nested Arrays

Arrays are used to store multiples values under a common label. With variables we used 1 label for one value. In array we use one label for multiple values. So if you have related data and want to access them through their common name, array's are your guy.

image.png

Array's are a ordered collection of values. Data of multiple types can be stored together.

let animals = ['dog', 'cat', 'mouse', 'pig', 'dolphin']
let luckyNumbers = [1, 7, 13, 31, 27]
let luckyDraw = ['dog', 2, 'cat', 56, 'mouse']

Arrays are Indexed

let animals = ['dog', 'cat', 'mouse', 'pig', 'dolphin']
animals[0];  //dog
animals[1];  //cat

Arrays are Mutable

This means that, the data that you store in each element of the array can be changed at any point.

let animals = ['dog', 'cat', 'mouse', 'pig', 'dolphin']
animals[0] = 'puppy'  
animals[1] = 'kitten' 

//animals = ['puppy', 'kitten', 'mouse', 'pig', 'dolphin']

Array Methods

Js makes our lives much easier by provided us with several inbuilt methods which makes the manipulation of arrays much simpler. Although I do think they've tried to make it a bit too simple with the mountain of methods.

image.png

let myArr = [1, 2, 3, 4, 5, 6, 7]

Push

Adds the the end of the array

myArr.push(8)
myArr.push(9, 10)

//myArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Pop

Removes from the the end of the array. Returns the 'popped' element, thereby also changing the length of the array.

myArr.pop()
myArr.pop()

//myArr = [1, 2, 3, 4, 5, 6, 7, 8]

Shift

Similar to pop however it removes from the beginning of the array. Returns the removes element and also changes length.

myArr.shift()
myArr.shift()

//myArr = [3, 4, 5, 6, 7, 8]

Unshift

Similar to push however it adds to the beginning of the array.

myArr.unshift(9)
myArr.unshift(10)

//myArr = [10, 9, 3, 4, 5, 6, 7, 8]

length

Returns the length of the array.

let len = myArr.length

//myArr = [10, 9, 3, 4, 5, 6, 7, 8]
//len = 8

concat

Like the name suggest it concatenates or merges 2 arrays.

let arr1 = [1, 2, 3, 4, 5]
let arr2 = [6, 7, 8, 9, 10]

let jointArray = arr1.concat(arr2)
//jointArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

includes

Checks the entire value for the your specified value. If your value exists in the array, return 'true' else 'false'.

string.includes('valueToSearchFor', 'startingPosition')

You can also specify a starting index beyond which it will look. Default start index is 0.

let arr = [1, 2, 3, 4, 5]
let ele1 = arr.includes(4)
let ele2 = arr.includes(1, 2)

//ele1 = true
//ele2 = false

indexOf

Return the index of a character or the beginning index of a string. Like with 'includes' you can specify a starting value. If value is not found returns -1.

string.indexOf('searchVal', 'startPos')

let arr = [1, 2, 3, 4, 5]
let ele1 = arr1.indexOf(2)
let ele2 = arr.indexOf(7)

//ele1 = 1
//ele2 = -1

join

Creates a string from all the elements of the array. It joins all the values with a provided separator. By defualt the separator is a comma (,).

array.join('separator')

let animals = ['dog', 'cat', 'mouse', 'pig', 'dolphin']
let myString = animals.join(" and ")

//myString = 'dog and cat and mouse and pig and dolphin'

reverse

Reverse the order in which all the elements are present in the array. Changes the original array.

let animals = ['dog', 'cat', 'mouse', 'pig', 'dolphin']
let reversedAnimals = animals.reverse()

//reversedAnimals = ['dolphin', 'pig', 'mouse', 'cat', 'dog']

slice

Honestly with this method, not a day goes by when I don't use it. This methods is a godsend, or a developer-send. Slice selects specific elements from your array and returns a new array of just those elements.

arr.slice(start, end)

[start, end) i.e. start element is included, end element is not. Negative start and end values will select from the end of the array. Only specifying the start index will select everything from that index till the end.

let animals = ['dog', 'cat', 'mouse', 'pig', 'dolphin']
let pets = animals.slice(0, 2)
let wild = animals.slice(-2)

//pets = ['dog', 'cat']
//wild = ['pig', 'dolphin']

splice

The only way to think about this method is as 'slice on steroids'. Splice lets you add or remove element and modifies the existing array.

array.splice(indexToAddAt, howmanyElementsToRemove, newEle1, newEle2, ..., newEleN)

let animals = ['dog', 'cat', 'mouse', 'pig', 'dolphin']
animals.splice(1, 0, 'puppy', 'kitten')

//animals = ['dog', 'puppy', 'kitten', 'cat', 'mouse', 'pig', 'dolphin']

Const with Arrays

This took me a while to wrap my head around. If I were to declare an array with const, how can I add add values to it or change existing values without my computer shouting at me. Dealing with those angry red messages, lemme tell you, isn't for the faint of heart.

So after declaring your array with const, what all can you do without upsetting your computer?

  • You can change the values
  • You can add new elements
  • You can even remove elements

You can do everything as long as the reference stays the same. Now what even is a reference?

Reference

Think of a house. You have bought a house at some address. Lets say at 221B Baker Street. In this house you can change the interior. You can add more furniture. Throw away the sofas that have lost their bounce. That house will remain the same as long as its address stays the same.

The minute you decide to change houses now, to a new address, even if the interior is exactly the same, the furniture is the same, the house is now a new house.

image.png

These 2 houses may look the same, but since they have difference addresses they are different houses. Reference in programming language is what you can think of as addresses.

Once you declare your array, it is going to be assigned an address. So as long as you don't change this address, you can do just about anything with that address.

const num = [1, 2, 3, 4, 5]
num.push('possible')
num[0] = 'also possible'

//By redeclaring this array you are trying to change its 
//address which is not allowed with const.
num = [1, 2, 3, 4, 5]

Nested Arrays

You can have arrays withing array. Where the madness actually begins.

let myAnimals = [
  ['wifi', 'dog'],
  ['cheste', 'cat']
  ['phantom', 'dog']
  ['sealu', 'seal']
]
 
Share this