JavaScript — Quick read before an interview
Some javascript theory we need to know, helpful before an interview.
Summary:
Truthy and Falsy values, Null vs Undefined, double(==) vs Tripe(===), scopes, closure, encapsulation, private variable.
Bind, call and apply, window and global variable, new and this keyword, JS asynchronous.
Some problem-solving technics.
Truthy and Falsy values:
Truthy means true value and falsy means false value.
In JavaScript, a truthy value is a value that is considered true when encountered in a Boolean context. All values are truthy unless they are defined as falsy.
Examples of truthy values in JavaScript:
if (true){console.log("Truthy Value")}
if ({}){console.log("Truthy Value")}
if ([]){console.log("Truthy Value")}
if (42){console.log("Truthy Value")}
if ("0"){console.log("Truthy Value")}
if ("false"){console.log("Truthy Value")}
if (new Date()){console.log("Truthy Value")}
if (-42){console.log("Truthy Value")}
if (12n){console.log("Truthy Value")}
if (3.14){console.log("Truthy Value")}
if (-3.14){console.log("Truthy Value")}
if (Infinity){console.log("Truthy Value")}
if (-Infinity){console.log("Truthy Value")}Output:
Truthy Value
//Output will be "Truthy Value" for all of the above statements.
In JavaScript, a falsy value is a value that is considered false when encountered in a Boolean context.
List of falsy value:
false, 0, -0, 0n, "", null, undefined, and NaN
Examples of falsy values in JavaScript:
if (false){console.log("NoOutput Value")}
if (null)
if (undefined)
if (0)
if (-0)
if (0n)
if (NaN)
if ("")Above all the values are false and thus bypass the if block, with no output in the console.
Null vs Undefined:
The null value is used when we intentionally assign null value to a variable, and We get undefined when we try to use a variable without assigning any value to it.
Example:
let number1 = null;
console.log(number1); // output: nulllet number2;
console.log(number2); // output: undefined
double(==) vs Triple(===):
The double(==) operator checks if the value of two variables is the same or not, whereas the triple(===) operator checks if the value and the data type of the two variables are the same or not.
== example:
let num1 = 2; // number
let num2 = "2"; //string
if( num1 == num2){
console.log("true");
}else{
console.log("false");
}Output:
true
//here the nunmber 2 and string 2 have equal value. it dosent check the type.
=== example:
let num1 = 2;
let num2 = "2";
if( num1 === num2){
console.log("true");
}else{
console.log("false");
}Output:
false
//here the nunmber 2 and string 2 have equal value but different in data type.the output is false.
Scopes:
Before ES2015, Javascript had only two types of scope. They are Global Scope and Function scope.
ES6 introduced let and const keywords that provide Block Scope.
Global Scope:
Variables declared globally (outside any function) have global scope.
Global variables can be accessed from anywhere within the program.
Function Scope:
Variables declared locally (inside a function) have function scope.
Local variables can only be accessed from inside the function where they are declared. They cannot be accessed from outside of the function.
Block Scope:
Variables declared with the letor const keyword inside a block have Block Scope.
Variables declared inside a block {} cannot be accessed from outside the block.
Closure:
docs
Encapsulation:
docs
Private variable:
docs
Bind, call and apply:
These are very useful methods in Javascript. The way work is almost identical. We use this method to determine what does this keyword refers to explicitly. These methods are useful when we want to call a function for an object to which it doesn’t belong to.
var myFunc = function(){
console.log(this.name);
}
var person = {
name: "Rudro"
}
myFunc.call(person);Here we can see that the function myFunc is declared globally but using the call method, we are using this function for the object person. We can pass unlimited parameters using the call method.
var myFunc = function(v1,v2){
console.log(` ${this.name} is ${v1} & ${v2} `);//Rudro is good & handsome
}
var person = {
name: "Rudro"
}var v1 = "good";
var v2 ="handsome";
myFunc.call(person , v1, v2);The methods call and apply both of them takes an object as their first parameter. Still, the difference between them is call method can take unlimited parameters after taking the object whereas, the apply method takes an array as a parameter after the object, but both results in the same way.
var myFunc = function(v1,v2){
console.log(` ${this.name} is ${v1} & ${v2} `);/Rudro is good & handsome
}
var person = {
name: "Rudro"
}var v1 = "good";
var v2 ="handsome";
var v = [v1,v2];myFunc.apply(person , v);The method call and bind are almost the same. The difference is when we use the bind method, it doesn’t call the function directly it just returns the instance of a function. What does means is we will not get direct value from it. To get the value we have to keep it in a variable then we can call the variable to get the value.
var myFunc = function(v1,v2){
console.log(` ${this.name} is ${v1} & ${v2} `);//Rudro is good & handsome
}
var person = {
name: "Rudro"
}var v1 = "good";
var v2 ="handsome";
var callFunc = myFunc.bind(person , v1, v2);
callFunc();Window and global variable:
A variable declared outside a function, becomes GLOBAL.
A global variable has global scope: All scripts and functions on a web page can access it.
var carName = "Volvo";
// code here can use carName
function myFunction() {
// code here can also use carName
}If we assign a value to a variable that has not been declared, it will automatically become a GLOBAL variable.
This code example will declare a global variable carName, even if the value is assigned inside a function.
myFunction();
// code here can use carName
function myFunction() {
carName = "Volvo";
}With JavaScript, the global scope is the complete JavaScript environment.
In HTML, the global scope is the window object. All global variables belong to the window object.
var carName = "Volvo";
// code here can use window.carNameNew and this keyword:
In Javascript, this keyword refers to the object it belongs to, and when it is used inside a function, it refers to a global object. So let’s see an example and try to understand it.
1. var person = {
2. name: "Rudro",
3. myFunc : function(name){
4. console.log(this.name);
5. }
6.}
7. person.myFunc();Now let’s go through the code. I have previously said that this keyword refers to the object it refers to. So How can we find the object it refers to? To do that, first, we have to see from where the function is called. I have put numbers in the code so that it is easies. So the function myFunc() was called from the 7th line, and we see that before myFunc, we used person, and the person is the object which was this referring to. So now we can say that by (this.name), we are referring to the name property of the person object.
JS asynchronous:
As Javascript is a single-threaded language, it can do only one work at a time. It is called the synchronous blocking behavior. Let’s see what it means using a code.
1. const task = () =>{
2. console.log("Do this task");
3. const time = new Date().getTime();
4. while( time + 3000 >= new Date().getTime())
5. console.log("Do another task");
6.
7. }
8. console.log("first task");
9. task();
10. console.log("last task");So what happens here is at first browser consoles the code of line number 8, and then it calls the function task(). After that, the browser consoles line number 2 and then runs a while loop for three seconds. During these three seconds, the user won’t be able to do anything. After running the while loop, line number 5 and then line number 10 will be shown in the console. This waiting creates a performance issue which is why the developers came up with asynchronous javascript. What it does is it while running the code, it puts some code like promises in the event queue and runs them after the main thread has finished running the code, so they do not block any code from running.
1. const task = () =>{
2. console.log("Do this task");
3. setTimeout(()=>{},3000)
4. console.log("Do another task");
5. }
6. console.log("first task");
7. task();
8. console.log("last task");Here we used the setTimeOut method in line 3, which puts any code in that scope in the event queue so that it doesn’t block any code, and after the main thread is finished running, the code is pushed back to the thread and executes it.