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.
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.
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.
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']
]