Some basics of JavaScript..
- Let, const, var
let, const are block (something enclosed by carlibresses) scope but var is function scope. var can be redefined and reassigned in functional scope. On the other hand, ‘let' can’t be redefined but changed in the block scope. ‘const' can’t be redefined and also cann’t be reassigned.
2. Hoisting:
Hoisting is the concept that gives us info about how javascript deals a variable (var) when it is declared. JavaScript does the variable declaration on the top assigning the value of undefined (loading/creation phase of execution phase) and it is called hoisting. For this reason if we do console log of any variable before declaration we got the value undefined.
Example :
1) console.log(a);
Console: reference error
2) console.log(a);
var a= 2;
console : undefined
3) var a=2;
console.log(a);
console: 2
Explanation :
When the code is executed first global execution happens. Global execution is consists of two phase; creation phase, execution phase. In the creation phase 4 tasks are done; global object creation, this object creation, variable object creation and assign the value undefined, scope chain. The in the execution phase the given value is assigned and the functions are called in the code queue from first to last. In the second example, on the loading phase of the global execution context var a is defined and undefined is assigned as value. In the execution phase as first consol.log function is called by passing the var a, it shows the value undefined in the console. Then in the next line value of var a = 2 is assigned. So, as before the assignment of 2 to the var a, console.log function is called passing a ; undefined is shown in the console. But in the third example as console.log function is called after the assignment, in the console 2 is shown. But in the first example as in the creation phase of global execution context there was no variable declared, in the execution phase when “a” is called by console.log function ; it shows reference error as no reference was made in the creation phase.
3. Truthy, Falsy values in JavaScript :
Truthy values are those values that return true when encountered in boolean context. In javascript there are 9 falsy values and the rest are truthy values. Falsy values are: false, 0, -0, 0n(bigInt zero), “ ”(empty string), null (absence of any value), undefined (primitive value) , NaN, document.all.
Mnemonic: U FDa Es N NZ
4. JavaScript Scopes:
In a simple sense scope is nothing but the dominance area of any variable in JavaScript. The most important information about scope is the child can access and manipulate the variable of it’s parent. Means that the variable that is declared in parent has the dominance in the child also.
Global Scope: When any variable is defined in the global (document)object then that has the dominance throughout the object and can be accessed from anywhere of the global object. In this situation we can say that the scope of that object is global .
//global scope
var name = 'rahim'
console.log(name); //rahim
function findName(){
console.log(name); //name is accessible here
}
findName(); //rahim
Block Scope: In JavaScript block is a area enclosed by carlibresses. That area inside the carlibresses is called block scope. Example: let, const.
Function Scope: In a word the area inside a function is a function scope. Example: var.
function nameContainer(){
if(true){
var name1 = 'pantho'; //exist in function scope
const name2 = 'alvy'; //exist in block scope
let name3 = 'taif'; //exist in block scope
}
console.log(name1);
console.log(name2);
console.log(name3);
}
nameContainer();
//result:
//pantho
//error: name2 is not defined
//error: name3 is not defined5. this keyword :
The word “this” always points to an object. The term “this” refers to an object that invokes the feature that it holds. “this” refers to window object in the global context but if ‘strict’ mood is used it refers undefined. We will try to understand the “this” keyword by following rules: implicit binding, explicit binding, new binding, window binding.
Implicit Binding :
Let say we have an object called ‘object1' and inside that we have a function called ‘printName'
this keyword points that specific object inside which it is defined..
Example : If we call the method of object1 like object1.printName();
Then ‘this' in printName will point the ‘object1' object.
const object1 = {
firstName: ‘Rayhan’,
lastName: ‘Jamil’,
printName: function() {
console.log(this.firstName + ‘ ‘ + this.lastName);
}
};object1.printName(); //Rayhan Jamil
Explicit binding:
Let say we have an object named ‘rayhan’ and another function ‘intro' defined outside object.
In explicit binding we call a function(intro which is defined outside that object) by using another function named call() (intro.call(rayhan)) where we input an object inside the “call()” function . Then ‘this' keyword inside the intro function will point the ‘rayhan' object.
Below there are two examples:
function intro() {
console.log(`Hi, I am ${this.name} and I am a${this.age} `);
}
const rayhan = {
name: 'Rayhan',
profession : 'Air Force officer',
};
const alvy = {
name: 'Alvy',
profession : 'Businessman',
};intro.call(rayhan);// Hi, I am Rayhan and I am a Air Force officerintro.call(alvy);// Hi, I am Alvy and I am a Businessman
When we call “ intro” function with ‘.call()’ that time we can pass some comma separated arguments to that function along with the object like intro.call(object, argument1, argument2).
function intro(greeting, sports) {
console.log(`${greeting}, I am ${this.name} and I am a${this.age}. I like to play ${sports} `);
}
const rayhan = {
name: 'Rayhan',
profession : 'Air Force officer',
};
const alvy = {
name: 'Alvy',
profession : 'Businessman',
};intro.call(rayhan, "Hello", "cricket");
// Hello, I am Rayhan and I am a Air Force officer. I like to play cricket.intro.call(alvy, "Hi", "footbal");
// Hi, I am Alvy and I am a Businessman. I like to play football.
But if we have some more parameters that time using array with those arguments is more convenient rather than passing the arguments one by one. To pass the array of arguments along with that object we have to use ‘.apply()' instead of ‘.call' like:
intro.apply(object, [argument1, argument2]).
function intro(greeting, sports) {
console.log(`${greeting}, I am ${this.name} and I am a${this.age}. I like to play ${sports} `);
}
const rayhan = {
name: 'Rayhan',
profession : 'Air Force officer',
};
const alvy = {
name: 'Alvy',
profession : 'Businessman',
};intro.apply(rayhan, ["Hello", "cricket"]);
// Hello, I am Rayhan and I am a Air Force officer. I like to play cricket.intro.callapply(alvy, ["Hi", "footbal"]);
// Hi, I am Alvy and I am a Businessman. I like to play football.
There is an another function called ‘.bind()’ that works like ‘.call()’ but it returns a instance of that function with which it is called.
Example:
function intro() {
console.log(`Hi, I am ${this.name} and I am a${this.age} `);
}
const rayhan = {
name: 'Rayhan',
profession : 'Air Force officer',
};
const alvy = {
name: 'Alvy',
profession : 'Businessman',
};let callIntro1=intro.bind(rayhan);
let callIntro2=intro.call(alvy);;
callIntro1();// Hi, I am Rayhan and I am a Air Force officer
callIntro2();// Hi, I am Alvy and I am a Businessman
Here intro.bind() has returned a function which was called letter. The difference between call() and bind() is bind() returns a function but call() returns nothing .
New Binding :
When we declare a class, inside the class automatically a ‘this' keyword is generated. That ‘this' points that specific class. This is called new binding.
Window Binding :
If we define a function in the window object and inside the function if we use ‘this' keyword that this will refer to window object. That is called window binding.
6. This keyword in normal function and the arrow function:
In regular functions the ‘this' keyword points the object that called the function.
In arrow functions there is no binding of this, the ‘this' keyword always represents the object that defined the arrow function.
7.What is cross browser testing?
Ans: Cross browser testing is a way of testing how our codes are displayed in different bowsers. Selenium one of the renowned tools used to cross browser testing.
8. What Balancing client and Server catching ?
Ans: When the number of users exceeds the capacity of server that time we use more number servers having same functionality to handle the user request. That time to distribute the user request to different servers there is something called “Load balancer” is used. This load balancer distributes the user requests to different servers following some specific algorithms ( Round Robin algorithm is one of them) to handle the user request efficiently that improves the performance of the website. Sometimes load balancer is also used between the server and the databases when one server has enough capacity but multiple databased are needed to handle to user requests. The next one is catching. When the user request data from the frontend, the data comes from the database via server. Sometimes it happens that a user needs the same data frequently. So, every time loading data from the server is not a efficient way to handle the user request for various reasons rather we can store the frequently called data inside the browser catch, or sometimes the catch is used between the frontend and server, or server and database. If we store the data in the catch next time when the same user request that data, that time the data need not to be loaded from database which makes the user experience better.
