Some JavaScript basics [ AF - Week 02 - Y3S1 ]

 This week was the second week of 3rd year 1st semester.

 Application Framework [ AF ]

In this week the lecture and the lab session was on javascript language.Basically I learnt about javascript promises,await, asynchronous functions, callbacks,classes and arrow functions as well.

Promises

A promise in JavaScript is similar to a promise in real life. When we make a promise in real life, it is a guarantee that we are going to do something in the future. Because promises can only be made for the future.

There are 3 states of the Promise object:

• Pending: Initial State, before the Promise succeeds or fails
• Resolved: Completed Promise
• Rejected: Failed Promise
  

The main difference between Callback Functions and Promises is that we attach a callback to a Promise rather than passing it. So we still use callback functions with Promises, but in a different way.

 Async | Await

Async functions are available natively in Node and are denoted by the 'Async' keyword in their declaration and always return a promise, even if we don’t explicitly write them to do so. Also, the 'await' keyword is only available inside async functions at the moment - it cannot be used in the global scope.In an async function, we can await any 'Promise' or catch its rejection cause.

There are number of ways to declare a async function.

 

 Promise with async / await

           function getValue(){

            let value = 0;

            return new Promise(function(resolve,reject){

                setTimeout(function() {

                    value = 20;

                    resolve(value);

                },2000);

            });

        }

 

        async function print(){

            let value = await getValue();

            console.log(value);

            console.log("some text");

        }

        print();          //OUTPUT ::::

                          // 20

//some text 

lab sheet exercises

 

Classes

Classes are a template for creating objects. They encapsulate data with code to work on that data. Classes in JS are built on prototypes but also have some syntax and semantics

A JavaScript class is a type of function. Classes are declared with the 'class' keyword. We will use function expression syntax to initialize a function and class expression syntax to initialize a class. 

 class Vehicle{

            static vehicount = 0;

            constructor(type){

                 this.type = type;

                 Vehicle.vehicount++;

           }

           drive(){

               console.log(this.type + " is driving ");

           }

        }

        let vehi = new Vehicle("Toyota");

        vehi.drive();

        console.log("vehicle count is " +Vehicle.vehicount);               //Toyota is driving

                                                                          //1

        //car class                                            

        class Car extends Vehicle{

            constructor(type){

                super(type);

            }

            wheelsbalanced(){

                console.log(this.type + "  wheels are balanced......");

            }

        }

        let mycar = new Car("Nissan");

        mycar.wheelsbalanced();

        mycar.drive();

        console.log("vehicle count is " + Car.vehicount);

 lab sheet exercises

        function vehicle(type){            //create the class

            this.type = type;

            Vehicle.vehicleCount++;

        }

            

        Vehicle.prototype.drive = function(){   //method

                console.log("Vehicle is driving");

        };

        Vehicle.vehicleCount = 0 ;       //intializing the vehicle count to zero ;;;constant static variable

        

        const vehicle =new Vehicle("Toyota");  //creating an object of Vehicle

        console.log(vehicle.vehicleCount);

        vehicle.print();  //calling print method

        function car(type){

                Vehicle.call(this.type);

        }

        Car.prototype = Object.create(Vehicle.prototype);

        Car.prototype.constructor =Car;

        Car.prototype.balanceWheels =function (){

            console.log("Wheels are balanced");

        }

        const car= new car("Honda");

        vehicle.drive();

        vehicle.balanceWheels();

        car.drive();

        car.balanceWheels();

        console.log(Vehicle.vehicleCount);

  lab sheet exercises

 

Arrow functions

Arrow function is one of the features in JavaScript. It allows to create functions in a cleaner way compared to regular functions.There are many ways to declare a function with arrow functions (Arrow function with no arguments,with one argument,as an expression,multiline arrow function)

// function expression

let x = function(x, y) {

   return x * y;

}

 

// using arrow functions

let x = (x, y) => x * y;

 

 

The above two function declarations are doing the same task but the second example is using arrow functions.

 

Thank you for visiting my blog !