Hi there,
This is the third part of this series, where we look at JavaScript's syntax.
In Part 1 , we covered - Variables definition, Data types, and Arithmetic Operations.
In Part 2 , we covered - Comparison operations, If and switch statements.
In this part, we will be looking deeper into Arrays and Loops. This will be quite an interesting one. Stay with me!
Arrays Arrays are essentially a list of values. There can be a combination of data types too! You can define an array of string like this.
let myArray = ['first item', 'second item', 'third item', 'fourth item']
You can also define an array of numbers, e.g.
let mySecondArray = [11, 12, 13, 14, 15, 16]
You can also define a mixed array, e.g.
let mixedArray = [12, "Idris", true, 4]
The array above contains a mixed of numbers (12 & 4), string ("idris"), and boolean (true).
Arrays can also be defined by using the JavaScript keyword new. Example:
let anArray = new Array("This", "is", "an", "array")
How to access array elements
Each array element contains an index that is unique to it when the array is created. Hence, to access each item in an array we use the index.
The first item starts with index of zero (0). Therefore, if you have an array of 5 items. The first item will have an index of 0, followed by an index of 1, then 2, and 3 then the last item will have an index of 4.
let arr = ["first item", "second item", "third item", "fourth item", "fifth item"]
//index 0 1 2 3 4
To access the first element, we can do arr[0] for example:
let arr = ["first item", "second item", "third item", "fourth item", "fifth item"]
console.log(arr[0]) //"first item"
To access the second element, we can do arr[1]. example:
let arr = ["first item", "second item", "third item", "fourth item", "fifth item"]
console.log(arr[1]) //"second item"
To access the last item
let arr = ["first item", "second item", "third item", "fourth item", "fifth item"]
console.log(arr[4]) //"fifth item"
There are some operations that we can do on arrays.
Adding an element to an existing array.
This can be done using JS methods push or unshift.
let anArray = ["mango", "orange", "apple", "strawberry"]
//add 'cake' to the end of the array
anArray.push("cake")
console.log(anArray) // ["mango", "orange", "apple", "strawberry", "cake"]
//add 'olive' to beginning of the array
anArray.unshift("olive")
console.log(anArray) // ["olive", "mango", "orange", "apple", "strawberry, "cake"]
Removing an element from an array
This can be done using pop , shift, or splice methods.
let myArr = [1, 2, 3, 4, 5]
//removing the first item
myArr.shift()
console.log(myArr) // [2,3,4,5]
//removing the last item
myArr.pop()
console.log(myArr) // [2, 3, 4]
//removing an item from a particular index, e.g. index 2
myArr.splice(2, 1)
console.log(myArr) // [2, 3]
There are many other methods that can be used on an array to manipulate the data the way we want. For instance we could also sort an array or filter. Likewise, we could dynamically modified an array. Methods like Array.sort, Array.filter and Array.map are worth studying further.
Looping through Arrays
Loops are blocks of code you write to continuously perform an action provided a given condition is true.
For this tutorial, we will look at for loops, while loops and JavaScript's forEach loops.
For loops This is used to perform action given a set of three constraints.
The format:
for(starting condition; expression to keep it running; expression to change iteration){
// code to do something
}
In for loops, the middle condition i.e. "expression to keep it running, has to be true for the loop to keep running, when it stops being true, the loop will terminate.
an example.
let ourArray = [2, 4, 6, 8, 10]
let lenthOfArray = ourArray.length // no of items in the array
for(let position = 0; position <= lengthOfArray ; position++){
console.log(ourArray[position])
}
// this will print out each item in the array,
// 2
// 4
// 6
// 8
// 10
In the example above, the loops stops to run when the position became greater than the length of the array.
We can also manipulate the data within a loop.
let ourArray = [2, 4, 6, 8, 10]
let lenthOfArray = ourArray.length // no of items in the array
for(let position = 0; position <= lengthOfArray ; position++){
console.log(ourArray[position] + 4)
}
// this will print out each item in the array plus 4 added,
// 6
// 8
// 10
// 12
// 14
While Loops
while loops are simpler to define that for loops. They only require one condition to run, however you must specify a way to continue/terminate the iteration within the body of the loop.
The format:
while (condition is true) {
// perform this operation
//bring condition closer to termination
}
For example:
let i = 5
while (i > 1){
console.log("I like this course!")
i = i - 1
}
//I like this course
//I like this course
//I like this course
//I like this course
ForEach Loops
These are loops provided by JavaScript as methods that can be called on array using the dot notation. i.e. if we define an array as myArray, we can use myArray.forEach() to iterate over the array and perform some actions.
forEach loops are different in the way they are used. They take a function as the condition.
Example:
let ourArray = [2,3,4,5,6]
ourArray.forEach(function(item) {
item * 2
})
console.log(ourArray) // [4, 6, 8, 10, 12]
In the example above, the forEach changes the content of the array where it is called.
Whoops! We've quite a lot!
Quick Recap
So we looked at arrays that are basically lists of items, then looked loops which are code they keep running based on a condition and how we use them on arrays.