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

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

What is the purpose of “this” operator in JavaScript?

“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.).

What is Callback?

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.

What is Closure?

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.

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

What is the difference between Attribute and Property?

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.

Different ways one can access the elements in HTML and use them in DOM?

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

Different ways to define the variable in JavaScript? And the Scope with functionality.

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.)

Different between “==” & “===”?

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.

The difference be Null and Undefined?

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.

What is prototype inheritance?

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

Difference between function Declaration and function Expression?

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)

What is a promise and why do we use it?

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”.

What are setTimeout and setTimeInterval?

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.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Clio Programming Language: Gradual Typing and More in v0.12!

An Introduction to VueJS Suspense Components

Build your own Scroll Indicator in React Native

[Action required] Your RSS.app Trial has Expired — Sat Jan 22 2022

Apps Script Basics — Arrays, Execution log

How To Add Advanced Controls to a Table Using DataTables

DataTables Logo

React + npm — How to Publish a React Component to npm

Chakra UI React — Coding a Simple Landing Page (with Samples)

Coding a Simple Landing Page with Chakra UI and React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
kota krishna reddy

kota krishna reddy

More from Medium

Nand To Tetris — My Experience.

TECH ROADMAP

gotten from unsplash

Resume Building — DO’s

The HackeRank Kangaroo Challenge