![Having Fun with [JavaScript Arrays]](https://cdn.hashnode.com/res/hashnode/image/upload/v1616671030403/77gF6H_-m.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
Yes, the title is 'Having fun with JavaScript Arrays', because Arrays are really fun to work with. Arrays are also very important in JavaScript.
In this article, I will be talking about arrays and how to have fun with them.
Now, since you would like to know. What exactly is an array and why do i love them so much?
Basically, an Array is a data structure that contains a group of elements. So like, a group of stuff. An array can store multiple values. For example, Fruits. I like fruits, you like fruits, we all love fruits. So imagine I have a bag of fruits, and in this bag I have a Banana, Pear, Almond and Mango. That is basically just an array of fruits. Although, in JavaScript, it would be written like this:
const fruits = ['Banana', 'Pear', 'Almond', 'Mango']
Now you can see why the article title is like that, how very clever of me.
Some Clever facts about arrays
JavaScript arrays are used to store multiple values in a single variable
JavaScript arrays use square brackets ([])
Arrays can have items of different data types. For example,
const arr = [ 'Anne', 20, { skills: ['HTML', 'CSS', 'JS', 'React'] } ]
- Arrays can be accessed using their index
How do we perform this miracle of accessing an array using its index? It's quite simple. Remember our bag of fruits?
const fruits = ['Banana', 'Pear', 'Almond', 'Mango']
An array index starts from 0. Therefore the index of Banana is 0, the index of Pear is 1 and so on. Now let's access the first fruit, Banana (aka the best fruit in the world.)
let bestFruitInTheWorld = fruits[0]
console.log(bestFruitInTheWorld) // Banana
And that's how we do it!
MODIFYING ARRAYS
I had to use all caps for that one. There are different methods used to modify arrays, they include length, concat, indexOf, slice, splice, join, toString, includes, lastIndexOf, isArray, fill, push, pop, shift, unshift. I'll be discussing a few of them.
Now, let's see how we can play around with them.
- Array length can be accessed using the length() method.
Lets say i just wanted to know many fruits were in my bag, I'd do this:
const fruits = ['Banana', 'Pear', 'Almond', 'Mango']
console.log(fruits.length) // 4
Wild stuff!
- We can concatenate (combine) two arrays using the concat() method. For example,
const fruits = ['Banana', 'Pear', 'Almond', 'Mango']
const vegetables = ['Carrot', 'Onion', 'Potato', 'Cabbage']
const fruitsAndVegetables = fruits.concat(vegetables) // concatenate 2 arrays
console.log(fruitsAndVegetables) // [ 'Banana', 'Pear', 'Almond', 'Mango', 'Carrot', 'Onion', 'Potato', 'Cabbage']
Just like that!
- We use indexOf() to check if an element is present in an array. If it is, it'll return the index of that element. if its not, it'll return -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
- We use includes() to check if an item exists in an array. If it exists, it returns 'true' else, it returns 'false'.
const numbers = [1, 2, 3, 4, 5]
console.log(numbers.includes(5)) // true
console.log(numbers.includes(0)) // false
- toString() converts an array to a string.
const numbers = [1, 2, 3, 4, 5]
console.log(numbers.toString()) // 1,2,3,4,5
- join() is used to join the elements of the array, the argument we passed in the join method will be joined in the array and return as a string. By default, it joins with a comma, but we can pass different string parameter which can be joined between the items.
const names = ['Bruce', 'Clark', 'Selina', 'Lois']
console.log(names.join()) // Bruce,Clark,Selina,Lois
console.log(names.join('')) // BruceClarkSelinaLois
console.log(names.join(' ')) // Bruce Clark Selina Lois
console.log(names.join(', ')) // Bruce, Clark, Selina, Lois
console.log(names.join(' # ')) // Bruce # Clark # Selina # Lois
- We use 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(1, 4)) // [2,3,4] // it doesn't include the ending position
- The splice() method takes three parameters: Starting position, number of times to be removed and number of items to be added.
const numbers = [1, 2, 3, 4, 5]
console.log(numbers.splice()) // removes all items
console.log(numbers.splice(0, 1)) // removes the first item
console.log(numbers.splice(3, 3, 7, 8, 9)) // [1, 2, 3, 7, 8, 9] it removes three items and replace three items
- We use push() to add an item in the end and pop() to remove an item from the end
const numbers = [1, 2, 3, 4, 5]
numbers.push(6)
console.log(numbers) // [1,2,3,4,5,6]
numbers.pop() // remove one item from the end
console.log(numbers) // [1,2,3,4,5]
- We use shift() to remove an element in the beginning of an array and unshift() to add an element in the beginning of an array. For some reason, this is my favourite array method.
const numbers = [1, 2, 3, 4, 5]
numbers.shift() // remove one item from the beginning
console.log(numbers) // [2,3,4,5]
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]
- Finally, we have the reverse() and sort() method. They do exactly what they sound like they do. reverse() reverses the order of an array and sort() arranges elements in an ascending order. Let's see.
const numbers = [1, 2, 3, 4, 5]
numbers.reverse() // reverse array order
console.log(numbers) // [5, 4, 3, 2, 1]
const fruits = ['Banana', 'Pear', 'Almond', 'Mango']
fruits.sort() // sort array alphabetically
console.log(fruits) // ['Almond', 'Banana', 'Mango', 'Pear']
And it's a wrap. I hope this article helped to shed more light on Arrays and how to have fun with them. If you want to know more about Arrays, feel free to check these resources:
Thank you and till next time,
