Quick Revision of Important Topics in JavaScript.(Part-2)

I believe this would be a Quick Guide to Beginners for Understanding and Answering Basic Interview.

(Hope you have read part-1, if you haven’t, you could find it on my profile page.)

“this ” is a famous operator of JavaScript used to refer to the owner of that function in which it is mentioned or rather to the function to which its is a method of.

function Obj(values)={
this.(key)=(value)
} // we generally use it in Object Constructor or Method of that object.

every Function as Call, bind and Apply method can be used to set custom value to this operator to execution context of the function.

var person1 = {
fullName: function() {
return this.firstName + “ “ + this.lastName;
}
}
var person2 = {
firstName:”Kota”,
lastName: “Krishna”,
}
person1.fullName.call(person2); // Will return “Kota Krishna”
// obj.function(Name).call(obj)

Similarly, Bind and Apply can be used to set “this” variable to a specific object with different outputs(we shall learn about the call, Bind and Apply in detail in the following questions.).

In general terms, the callback function needs to be executed after another function is completed. As in JavaScript functions are Objects, so the function can take functions as arguments and return functions thus callback becomes important. Sometimes callbacks are also triggered by events caused by the user’s interaction and give the user a chance to react when a certain state is triggered.

function call1(){
return call2()
} // if not handled well it can result in something called Callback Hell.

In simple words closure gives you access to an outer function’s scope from an inner function. Look at the example for better understanding.

function outer() {
var name = 'Kota'; // name is a local variable created by outer
function inner() { // inner() is the inner function, a closure
alert(name); // use variable declared in the parent function
}
inner(); // calling inner function.
}
outer();//calling outer function

OR

function outer() {
var name = 'Kota';
function inner() {
alert(name);
}
return inner;
}

var call= outer();
call();

Many might not see it but both the codes will give the same output.

The outer function is called while initializing it to the call variable, but the outer itself is returning another function called inner(Local function). To call that local inner function we are using call() again.

Though you might think as the outer function was first called the variable created by that function would be erased or be accessible. But that is not the case with JavaScript causes it from closures. In technical terms, closure is the combination of a function and Lexical environment(Could be used in an interview for show off ;). )

A Lexical Environment is a specification type used to define the association of Identifiers to specific variables and functions based upon the lexical nesting structure of ECMAScript code

If you confused by the terminology don’t worry we can break it down into two main components- Environment record and reference to outer (Parent) Environment

Execution Stack(Last in First Out)

In short and crisp way, the inner functions can still access the variables created by outer function(even when the outer was called first.)

Too either clarify more or confuse you more:

function create() { //a function which returns two functions  
var count=0; // local variable created by create()
return{ // return of the create()
increment: function(){ // increment function
count++; // increasing the count when called
},
print: function(){ // print function
console.log(count); // console the count value
}
} // return ends
} // crate ends
var c= create(); //initializing and assigning it to variable c
c.increment(); // calling the increment function
c.print(); //--> 1 // calling the print function

As we already saw that JavaScript can improve the interface in HTML, to achieve that we define certain Attributes and Properties to that specific element.

Attributes are used in the HTML were as Properties are used in the DOM within JavaScript.

  1. getElementById(“Id_Name”)
  2. getElementByClass(“Class_Name”)
  3. getElementByTagName(“Tag_Name”)
  4. quearySelector(“”)

Three possible ways of defining a variable:

  1. var- Gets involved in Hosting and as the scope is of the current function. (within the defined function.)
  2. Const- once set the value of that variable can not be changed.
  3. let- The value can be only used in the block it’s defined in. (even for, if, etc.)

Both be in the comparison operator and return true or false.

“===” is a strict comparison thus, returning false if the variables or values on both sides are of a different type. Therefore, “1”===1 will be false.

“==” would type convert the variable /values to compare thus results will be true in “1”==1. But the issue comes when null==undefined will also return true.

Fundamental both represent empty value. In JavaScript when you define a variable and do not assign any value to that variable the JavaScript would assign undefined to it. “null” is assigned by a programmer to reset the value of the specific variable. And importantly the type of “null” is an object but the type of “undefined” is undefined.

When you create an object using another object or Constructor function the child /new object will inherit the properties of the parent / original function, thus when you try to access these properties the JavaScript would look for them in the child first if not found it will go and look in the parent object for that method or value. This would decrease our effort of continuously repeating the same type of code

function Car(name) {
this.name=name
}
car.prototype.getname=function (){
console.log(this.name)
}
var honda = new Car("Honda")var Tata = new Car("Tata")honda.getname() //--> Honda
Tata.getname() //--> Tata

Function Declaration is when we assign a function using function [Name](){} but in function Expression we first define a variable using let,const or var later assign a function to it. The major difference is when you try to access that function by calling, in function Declaration it won’t cause any error but in function Expression, the function can only be called below the definition line, otherwise it would return an error saying “function is not defined”. Because when it is stored in a variable it behaves like a variable and also as a scope of a variable.

// fun()  // would cause error saying fun undefined.
//calling() // would work as expected
function calling(){
return "hello"
}
var fun=function(){
return "hey"
}
calling() //-->calling the function
fun() //--> calling the function (both wont cause any error)

In general terms, promises are similar to real-world situations a task that takes time to get data or output and further provide where that output status was a successful one(resolved) or unsuccessful (rejected) one. depending on the output we use “.then” and “.catch” to perform further action on them.

var p1=new Promise((resolve,reject)=>{
resolve(fetch("url"))
});
p1.then(()=>{
return new Promise()
}).then((result)=>{
console.log("success")
})

Promises along with async and await can help us from generating something called “callback hell”.

They are asynchronous functions of JavaScript that start after the call stack is empty, asynchronous is generally used when a block code should not affect the overall runtime of the main code.

set timeout- wait for the assigned time to complete then execute the block of code inside the set timeout.

settimeinterval- will run for infinite times with time interval as assigned till its stopped using “clearInterval()”

setTimeout(function(){},1000) //the time is always in milliseconds
var x=setTimeInterval(function(){},1000) //time in milliseconds
clearInterval(x) // to stop the infinite loop in setTimeInterval.