Categories
Javascript

Javascript Hoisting

In JavaScript, Hoisting is the default behavior of moving all the declarations at the top of the scope before code execution. Basically, it gives us an advantage that no matter where functions and variables are declared, they are moved to the top of their scope regardless of whether their scope is global or local.
It allows us to call functions before even writing them in our code.

Note: JavaScript only hoists declarations, not the initialisations.

Example1: Function Hoisting
alert(Sum(5, 5)); // 10
function Sum(val1, val2){
  return val1 + val2;
}
Example2: Function Hoisting
Add(5, 5); // error
var Add = function Sum(val1, val2){
  return val1 + val2;
}
Example3: Function Hoisting
alert(UseMe);
var UseMe;
function UseMe(){
  alert("UseMe function called");
}

Categories
Angular

Angular 7 -Reactive Forms Validation

<label class="label-control">Username*</label>
<input type="text" autocomplete="new-password" formControlName="username" class="form-control" (blur)="verifyUsername($event.target.value)" minlength="1" maxlength="20">
<div *ngIf="editAuthenticationform.controls['username'].invalid && (editAuthenticationform.controls['username'].dirty || editAuthenticationform.controls['username'].touched)" class="error formError">
<div *ngIf="editAuthenticationform.controls['username'].errors.required">Username is required.</div></div>
Continue reading “Angular 7 -Reactive Forms Validation”
Categories
Reactjs

Real DOM and Virtual DOM.

First of all – the Virtual DOM was not invented by React, but React uses it and provides it for free.

A virtual DOM is a lightweight JavaScript object which originally is just a copy of the real DOM. It is a node tree that lists the elements, their attributes, and content as Objects and their properties.

The Virtual DOM is an abstraction of the HTML DOM. It is lightweight and detached from the browser-specific implementation details. Since the DOM itself was already an abstraction, the virtual DOM is, in fact, an abstraction of an abstraction

Shadow DOM creates small pieces of the DOM object which has their own, isolated scope for the element they represent.

Continue reading “Real DOM and Virtual DOM.”
Categories
Reactjs

React lifecycle methods

Every component in React goes through a lifecycle of events. I like to think of them as going through a cycle of birth, growth, and death.

Mounting – Birth of your component
Update – Growth of your component
Unmount – Death of your component

Continue reading “React lifecycle methods”
Categories
Javascript

let and const

The main difference is the scoping rules. Variables declared by var keyword is scoped to the immediate function body (hence the function scope) while let variables are scoped to the immediate enclosing block denoted by { } (hence the block scope).

Categories
Javascript

ES6 Classes

A class is a type of function, but instead of using the keyword function to initiate it, we use the keyword class, and the properties are assigned inside a constructor() method.

There are three concepts in Object-Oriented Programming Object, Class and Methods. The ES6 JavaScript supports the Object-Oriented programming components.

  • Object: A real-time object entity means the presentation of any entity in real-time.
  • Class: It is before the plan of creating any objects which are known as the blueprint of any objects which you want to create.
  • Methods: It communicates between the objects
Example

Categories
Vue

What is vue

Vue  is a progressive frontend javascript framework for building user interfaces. ​The core library is focused on the view layer only​Vue.js resembles React more than Angular which is a complete framework.​