DEV Community: Lamina Busayo

Loops in JavaScript

Lamina Busayo — Fri, 14 Jul 2023 17:51:42 +0000

loops are used in javaScript to perform repeated task based on condition. conditioons typically returns true or false. A loop will continue running until the defined condition returns false.
This concept will explianed using an array of strings

const people = ['Sam', 'John', 'Sylvia', 'Steve']

To iterate over an Array means to loop through an Array’s contents. There are majorly 7 types of loops in javaScript. To get the most out of this article, you will need to understand concepts like Array, String, and Function. If you don’t, you will need to take a step back to have an understanding on the aformentioned concecpts. If you do, let’s get started.

For Loop

Let’s start with the most common and the oldest loop, the For Loop. This is what it looks like:

for (let i = 0; i < people.length; i++) {
    console.log(people[i])
}

//output
    //Sam
    //John
    //Sylvia
    //Steve

You can see in the above that between the brackets there are three required attributes, these are:

Let i = 0; – This creates a new variable that we increment on every loop. “i” represents the Index and we use this variable to access the people in the array.
i < people.length; – This is a conditional statement. This code tells the engine to keep looping as long as “i” is less than the Array size.
i++; – This last attribute is shorthand to increment i. It is the same as writing i = i+1. It will add 1 to “i” on every loop. In our example, the above loop will loop through each emoji and then print the people to the console:

This basic For loop will run anywhere you can execute JavaScript. You can always rely on this to be available in any browser.

Sometimes you need to loop until you find an element in the Array. To do this we can use a Break statement.

Break

Break will stop the For loop from running. This is useful when you are trying to find a value in a large Array. For example, say that we were not sure where the string Sylvia was in our Array and we wanted to loop until we found it.
Well, we could write code like this:

for (let i = 0; i < people.length; i++) {
    if (people[i] === 'Sylvia'){
        break
    }   
    console.log(people[i])
}

//output
    //Sam
    //John
    //Sylvia

As soon as we match the the string Sylvia the loop stops.

What if we wanted to perform an operation on all the values in the Array except one? In this case, we could use Continue.

Continue

Continue is like a Break statement but instead of stopping the loop it can skip or “jump over” an item in the array.

This time we are going to write the code so that when we find the string Sylvia, we skip it and we won’t print it to the console:

    for (let i = 0; i < people.length; i++) {
        if (people[i] === 'Sylvia'){
            break
        }   
        console.log(people[i])
    }

    //output
        //Sam
        //John
        //Steve

As you can see, the code is almost the same as the prior example, except that this time we have replaced Break with Continue. The outcome is different:
The string Sylvia has not been printed as expected. You can use Continue to filter an Array and only perform an operation on some of the items.

For..In

We have looked at traditional For loops, but there are shorter versions. We can use a For..in loop to loop through an Array like this:

    for (const i in people) {
        console.log(people[i])
    }

This is shorter code and there is no need to increment the index using the i++ code. So why not use this loop all the time?
There is a problem with For..in.
You see, it is possible to extend a built-in object like Array. For example, I can create a custom operation on an Array, like this:

Array.prototype.foo = 1
for (const i in people) {
      console.log(people[i])
}

//output
    //Sam
    //John
    //Sylvia
    //Steve
    //foo

Now when you run the code this is the output:
The foo function is part of the loop! For this reason, you should never use For..in in your code.

We have discussed the basic For loops—next, we will look at While loops.

While Loop

A While Loop will continue to loop while a condition is true.

For example, the below code will loop while “i” is less than the Array size:

i = 0 
while (i < people.length){
    console.log(people[i])
    i++
}

We are doing the same thing as we were in the For loop:

i = 0 – Creating an index variable and setting it to 0.
i < emojis.length – Looping while i is less than emojis.length
console.log(emojis[i]) – printing each emoji String to the console.
i++ – Incrementing the index by 1 on each loop. This code will print all the people.

Why would you use a While loop over a For loop?

Although they are interchangeable, you will not see While loops very often in JavaScript code. But, they can be useful. For example, say we are not sure what position the string John is in. We want to loop until we see a John. This is what the code will look like:

let i = 0
let noJohn = true 
while (noJohn){
    console.log(people[i])
    i++
    if (people[i] === 'John') {

        noJohn = false
    }
}

For each loop, we check the condition (noJohn) and if it is ‘true,’ then the loop continues. As soon as ‘noJohn’ is set to false the loop will stop. This is like the break statement For loop we used above.

What if you wanted to check the conditional after the loop? Well, in that case, you need a Do/While loop.

Do/While Loop

This loop is almost identical to the while loop, except the condition check is at the end. This is what the code will look like:

let i = 0 
do {
    console.log(people[i])
    i++
} while (i < people.length)

The code will run in this flow:

Set the index to 0
Print the first element in the Array using console.log
Add 1 to the index
Then check is index is still less than the size of the Array

ES5

All the loops we have discussed so far are available in any JavaScript environment. In front-end development, we need to think about browser support. Over the last few years, there have been many advances in the JavaScript language. There are new loops available.

The first changes came in ES5, which means version 5 of JavaScript. The new loops are:

forEach
map
For both of these are operations, you can call on an Array. For the people Array, it would look like this:
people.forEach()
people.map()

Let’s look at these more in depth.

forEach

forEach is a function added to the Array type. The function takes a callback function, which is a block of code, like this:

people.forEach(person => console.log(person))

For every value inside the Array, it will run the callback block you pass inside the brackets. This is a nice way to do For loops in ES5.

If forEach is available, then this is the recommended way to do a loop.

Map

You can loop using a Map function the same way as forEach by passing a callback. The map function then calls this callback for every item in the Array.

people.map(person => console.log(person))

The difference with Map is that it returns an Array. This function can convert the contents of one Array to another. For example, if we wanted to create a new Array with all the people as John, we could run this code:

const johns = people.map(person => 'John')

console.log(johns)

//output
    //['John', 'John', 'John', 'John']

Use this Loop when you need to create a new array from an existing one. This can be a very powerful loop when combined with reduce.

ES6

The last loop we are going to look at is part of ES6.

This is the For..of loop.

This loop addresses the shortcomings of “For..In” and has similar code syntax.

The browser support for ES6 is getting better yet IE is a bit behind. This means you may not be able to use For..of if you need to support the IE browser.

For..of

Like the For..of loop the code looks like this:

for (person of people) {
    console.log(person)
}

This does not have the same problem as the For..in loop. Anything added to the Array will not appear in the loop. If you are in an ES6 environment, then you can and should use this loop.

conclusion

We have looked at the major loops that you can use in Javascript.

If you do not have ES5 or ES6, then you can use the traditional For loop or a While loop.

If you have ES5, then you can use either forEach or Map. If you are only supporting the latest browsers and have ES6, then you can look at using For..of.

Whatever you do, don’t use For..in!

HOW TO MAKE HTTP REQUEST

Lamina Busayo — Sat, 08 Jul 2023 04:40:03 +0000

JavaScript has great modules and methods to make HTTP requests that can be used to send or receive data from a server side resource. There are few popular ways to make HTTP requests in JavaScript.

Ajax

Ajax is the traditional way to make an asynchronous HTTP request. Data can be sent using the HTTP POST method and receiving using the HTTP GET method. Let’s take look and make a GET request. I’ll be using JSON Placeholder, a free online REST API for developers that return random data in JSON format.
To make an HTTP call in Ajax, you need to initialize a new XMLHHttpRequest() method, specify the URL endpoint and HTTP method (in this case GET). Finally we use the open() method to tie the HTTP method and URL endpoint together and call the send() method to fire off the request.
We log the HTTP response to the console by using the XMLHTTPRequest.onreadystatechange property which contains the event handler to be called when the readystatechanged event is called.

const Http = XMLHttpRequest();
const url = ‘https://jsonplaceholder.typicode.com/posts’;
Http.open(“GET”, url);
Http.send();
Http.onreadystatechange = (e) => { console.log(Http.responseText)}

If viewed on the browser console, it will return an array of data in JSON format. But how would we know if the request is done?
The onreadystatechange property has 2 methods, readyState and statuswhich allow us to check the state of our request.

const Http = XMLHttpRequest();
const url = ‘https://jsonplaceholder.typicode.com/posts’;
Http.open(“GET”, url);
Http.send();
Http.onreadystatechange = (e) => { 
   If (this.readyState === 4 && this.status === 200){
   console.log(Http.responseText)
   }
}

fetch

fetch is a new powerful web API that let us make asynchronous requests. In fact, fetch is one the best and my favorite way to make an HTTP request. It returns a “Promise” which is one of the great features of ES6. Promises allow us to handle the asynchronous request in a smarter way. Let’s look at how fetch technically works.

const url = ‘https://jsonplaceholder.typicode.com/posts’;
fetch(url)
.then(data => data.json())
.then(res => console.log(res))

The fetch function takes one required parameter: the endpoint URL. It also has other optional parameters as in the example below

const url = ‘https://jsonplaceholder.typicode.com/posts’;
const data = {
   name: “sam”,
   id:12
}
const otherParam = {
    headers: {
        “content-type”:”application/json; charaset=UTF-8”
    }
    body: data,
    method:”POST”
} 
fetch(url, otherParam)
.then(data => data.json())
.then(res => console.log(res))
.catch(err=> console.log(err))

As you can see, fetch has many advantages for making HTTP requests.

Axios

Axios is an open source library for making HTTP requests and provides many great features. Let’s have a look at how it works.

Useage

First, you’d have to include Axios. There are 2 ways to include Axios in your project.
First, you can use npm:

npm install axios

Then you’d need to import it

import axios from ‘axios’

secondly, you can include axios using a CDN

<script src=”https://unpkg.com/axios/dist/axios.min.js”></script>

Useage

With Axios you can use GET and POST to retrieve and post data from the saver.

GET:

const url = ‘https://jsonplaceholder.typicode.com/posts’;
axios.get(url)
.then(data => console.log(data))
.catch(err => console.log(err))

const url = ‘https://jsonplaceholder.typicode.com/posts’;
const data = {
name: “sam”,
id:12
}
const param = {
    name: “sam”,
    id: 34
} 
Axios.get(url, param)
.then(data => data.json())
.catch(err=> console.log(err))

axios takes one required parameter, and can take a second optional parameter too.

POST:

const url = ‘https://jsonplaceholder.typicode.com/posts’;
const user = {
name: “sam”,
id:12
}

axios({
method: “post”,
url: url’
data: {
    user
}
})
.then(data => console.log(data))
.catch(err => console.log(err))

OBJECT ORIENTED PROGRAMMING

Lamina Busayo — Sun, 18 Jun 2023 05:08:38 +0000

Object-oriented Programming treats data as a crucial element in program development and doesn't allow it to flow freely around the system. It ties data more securely to the function that operates on it and protects it from accidental modification from an outside function. OOP is a programming paradigm constructed around objects. Individual objects can be modified without affecting other program aspects, so it is easier to update and modify programs written in object-oriented languages. JavaScript is one of those languages that OOP is deeply rooted in.

Features of an Object-Oriented Language

There are four rules or main pillars of Object-oriented programming language. This defines how the data and actions associated with the data; are organized using code.

Object

An object is a data structure containing properties and methods. Consider a student. A student will have characteristics like name, roll number, and class, and he will perform an action, let's say, giving an exam. In object-oriented programming, these characteristics are called data variables. These actions are called data methods.

We create a class called Student and then create instances of this class. These instances are called Objects. Hence, an object is a real instance of a class. Class is nothing but a prototype/blueprint.

Example: John Smith is an instance or object created using the class - Student.

Classes

We know that objects hold the data and the functions to manipulate the data. However, the two can be bound together in a user-defined data type with the help of classes. Any number of objects can be created in a class. Each object is associated with the data of type class. A class is therefore a collection of objects of similar types.

For example, consider the class “Fruits”. We can create multiple objects for this class

Fruit Mango;

This will create an object mango belonging to the class fruit.

Encapsulation

Encapsulation is the wrapping up/binding of data and function into a single unit called class. Data encapsulation is the most prominent feature of a class wherein the data is not accessible to the outside world, and only those functions wrapped inside the class can access it. These functions serve as the interface between the object’s data and the program.

Inheritance

The phenomenon where objects of one class acquire the properties of objects of another class is called Inheritance. It supports the concept of hierarchical classification. Consider the object “car” that falls in the class “Vehicles” and “Light Weight Vehicles”.

In OOP, the concept of inheritance ensures reusability. This means that additional features can be added to an existing class without modifying it. This is made possible by deriving a new class from the existing one.

Creating Objects in JavaScript

We can create an object using the string literal in JavaScript.

const student = {
        name: "Chris",
        age: 21,
        studies: "Computer Science",
    };

console.log(`${student.name} of the age ${student.age} studies ${student.studies})

OUTPUT: ‘Chris of the age 21 studies Computer Science’

Creating objects using the new keyword.

const student = new Object();
    student.name = "Chris",
    student.age=21,

    student.studies = "Computer Science";

console.log(`${student.name} of the age ${student.age} studies ${student.studies})

OUTPUT: ‘Chris of the age 21 studies Computer Science’

Creating an object using the object constructor.

function stud(name, age, studies){
        this.name = name;
        this.age = age;
        this.studies = studies;
    }
    const student = stud("Chris", 21, "Computer Science");

  console.log(`${student.name} of the age ${student.age} studies ${student.studies})

OUTPUT: ‘Chris of the age 21 studies Computer Science’

Class Implementation in JavaScript

JavaScript uses the ES6 standard to define classes. Consider the following example.

class Cars {
    constructor(name, maker, price) {
      this.name = name;
      this.maker =  maker;
      this.price = price;
    }
    getDetails(){
        return (`The name of the car is ${this.name}.`)
    }
  }
  let car1 = new Cars('Rolls Royce Ghost', 'Rolls Royce', '$315K');
  let car2 = new Cars('Mercedes AMG One', 'Mercedes', '$2700K');
  console.log(car1.name);    
  console.log(car2.maker);  
  console.log(car1.getDetails());

OUTPUT
‘Rolls Royce Ghost’
'Mercedes'
‘The name of the car is Rolls Royce Ghost.

JavaScript Encapsulation

Encapsulation puts the data variables and the data functions together inside a box. Encapsulation ensures that data can only be accessed using the data functions defined inside the class, and abstraction ensures not anyone outside this encapsulated box can access it.

But, we already saw that there is no actual concept of classes in JavaScript. So, JavaScript implements encapsulation using two ways: Function Scope and Closures.

Let's discuss both of them with examples.

Function Scope

When we define a variable or a function inside the function, we can only access it from inside and not from outside the function. This can be one way of implementing abstraction. Look at the example below.

function messageFunc(){
    const message= "Hey there!"
    console.log("Message from  inside: ",message);
}

messageFunc();

console.log("Message from  outside: ",message);

The output for this code snippet says the right message when accessed from inside but throws an error when accessed from outside. Hence, the message is encapsulated.

Closures

We can create a function inside a function, and the inner function will be able to access the local variable defined inside the outer function. This is called closure.

Note: A closure is created every time a function is declared.

function messageFunc(){
    const message = "Hey there!"
    const displayMessage = function(){
        console.log(message);
    }
    displayMessage();
}

messageFunc();

console.log("Message from outside: ",message);

Again, the output says that creating a closure helps encapsulate and restrict the data access only to inside the function.

DESTRUCTURING IN JAVASCRIPT

Lamina Busayo — Tue, 13 Jun 2023 10:53:55 +0000

Destructuring in JavaScript is unpacking data structures, array and objects to easily access the values inside them. Destructuring help to extract values from arrays and objects into distinct variable so we don’t have to navigate through large arrays or objects to get the values that are needed. JavaScript allows us to destructure arrays, objects and function parameters.
JavaScript allows for 3 different modes of destructuring which includes;

Array destructuring
Object destructuring
Function parameter destructuring

ARRAY DESTRUCTURING

Array in JavaScript is a collection of elements a numerical index can access. The element in an array can be of any data type Including numbers, strings and even array of objects. Arrays are created using square brackets and individual elements can be accessed using their index which starts at 0.
The basic syntax for array destructuring uses square brackets on the left-hand side. For example, to extract the first element of an array and assign it to a variable. The following code can be used

Const Persons = [‘Sam’, ‘Faith’, ‘John’. ‘Gift’]
Const [firstPerson] = Persons
Console.log(firstPerson)
RESULT:‘Sam’

Multiple elements can also be extracted from an array and assigned to multiple variables.

Const Persons = [‘Sam’, ‘Faith’, ‘John’. ‘Gift’]
Const [firstPerson, secondPerson, thirdPerson] = Persons
Console.log(firstPerson, secondPerson, thirdPerson)
RESULT:  ‘Sam’, ‘Faith’, ‘John’

OBJECT DESTRUCTURING

Objects in JavaScript are collections of key-value pairs. Objects are created using curly braces.
The basic syntax for object destructuring uses curly braces on the left-hand side of an assignment statement and the object on the right-hand side. For example, to extract a property called “name” from an object and assign it to a variable, the following code can be used

Const Person = {name: ‘John’, brand: ‘Apple’}
Const {name} = Person 
Console. Log(name)
RESULT: ‘John’

The above code creates an object called Person that has 2 properties (ie name and brand), we use object destructuring to extract the name property of the object and assign it to a variable called ‘name’

FUNCTION PARAMETER DESTRUCTURING

JavaScript allows us to extract values from an object or array passed as parameter to a function. Destructuring parameters is quite straight forward as you only need to use the destructuring syntax inside the function.

function greet ({name, age}) {
    Console.log(`Hello, ${name}. You are ${age} years)
} 
greet({name: “Peter”, age:25})
RESULT: Hello, Peter. You are 25 years

BENEFITS OF DESTRUCTURING

Improved performance

When values are extracted from an array or object, new variable is created that reference the value. This is particularly useful when working with large data, as it allows you to work with a smaller portion of the data, which can be more efficient.

Concise and readable code

Destructuring allows you to write more concise and readable code. When working with large data, destructuring allows you to focus on the essential parts of the data rather than getting lost in details.

Easier handling of nested properties

With destructuring, you can extract values with a single line of code, making it easier to work with nested properties.

Better handling of function parameters

Destructuring can be used to extract values from function parameters. This can be particularly useful when working with complex data structures, as it allows you to focus on the specific values you need without navigating through the entire data structure.

CONCLUSION

In conclusion, destructuring in JavaScript makes it easy for developer to navigate through large data.