Handbook on Web Programing.
1.Null vs Undefined.
Null is a special value meaning “no value”. null is a special object because type of null returns ‘object’.
On the other hand, undefined means that the variable has not been declared, or has not been given a value.
Null
Null means an empty or non-existent value. Null is assigned, and explicitly means nothing.
// null
var test-1 = null;
console.log(test-1);Null is also an object. Interestingly, this was actually an error in the original JavaScript implementation:
// object
console.log(type of test1);Undefined
Undefined means a variable has been declared, but the value of that variable has not yet been defined. For example:
// undefined
var test-2;
console.log(test-2);Unlike null, undefined is of the type undefined:
// undefined
console.log(type of test-2);2.Truthy vs Falsy Values.
In Programs Individual values can evaluate to either True or False. They do not necessarily have to be part of a larger expression to evaluate to a truth value because they already have one that has been determined by the rules of the Programing language.
The basic rules are:
Values that evaluate to False are considered Falsy.
Values that evaluate to True are considered Truthy.
Lets compare with the values True and False that we typically work with operands and operators evaluate to either True or False and they can be used in an if or while condition to determine if a code block should run.
Example:
# Expression 5 < 3
if 5 < 3:
print("True")
else:
print("False")# Output
False
In this example, everything is working as we expected because we used an expression with two operands and an operator 5 < 3.
3.Double equal (==) vs Triple equal (===)
Double equal (==) &Triple equal (===) both are called comparison operator.
In general Double equals checks the value. Double equals (==) is a comparison operator, which transforms the operands having the same type before comparison.
If we compare 2 with “2” using ===, then it will return a true value.
And Triple equals checks value both on the type. Triple equals(===) is a strict equality comparison operator, which returns false for the values which are not of a similar type. This operator performs type casting for equality.
If we compare 2 with “2” using ===, then it will return a false value.
4.Scope
Scope determines the visibility and accessibility of a variable or other resource in the area of code.
Global Scope:
There’s only one Global scope in the JavaScript document. The area outside all the functions is consider the global scope and the variables defined inside the global scope can be accessed and altered in any other scopes.
Local Scope:
Variables declared inside the functions become Local to the function and are considered in the corresponding local scope. Every Functions has its own scope. Same variable can be used in different functions because they are bound to the respective functions and are not mutual visible.
Local scope can be divided into function scope and block scope.
Function Scope:
Whenever you declare a variable in a function, the variable is visible only within the function. You can’t access it outside the function. var is the keyword to define variable for a function-scope accessibility.
function fruits(){
var fruit ='apple';
console.log('inside function: ',fruit);
}fruits(); //inside function: apple
console.log(fruit); //error: fruit is not defined
Block Scope:
A block scope is the area within if, switch conditions or for and while loops. Generally speaking, whenever you see {curly brackets}, it is a block. In ES6, const and let keywords allow developers to declare variables in the block scope, which means those variables exist only within the corresponding block.
function fruits(){
if(true){
var fruit1 = 'apple'; //exist in function scope
const fruit2 = 'banana'; //exist in block scope
let fruit3 = 'strawberry'; //exist in block scope }
console.log(fruit1);
console.log(fruit2);
console.log(fruit3);
}fruits();
//result:
//apple
//error: fruit2 is not defined
//error: fruit3 is not defined
5.Closure
Closure means that an inner function always has access to the vars and parameters of its outer function, even after the outer function has returned. shortly we can brief a function that can return another function is called Closure.
function OuterFunction() {
var outerVariable = 100; function InnerFunction() {
alert(outerVariable);
}
return InnerFunction;
}
var innerF = OuterFunction();innerFunc(); // 100
In the above we can see, return InnerFunction;
returns InnerFunction from OuterFunction when you call OuterFunction().
A variable innerF reference the InnerFunction() only, not the OuterFunction().
So now, when you call innerFunc(), it can still access outerVariable which is declared in OuterFunction(). This is called Closure.
6.Private Variable
In object-oriented programming languages, there is a way to limit the visibility of a variable from outside its scope. In other words, some programming languages allow variables to only be accessible by the object that “owns” it. To be more technical, a private variable is only visible to the current class. It is not accessible in the global scope or to any of its subclasses. For example, we can do this in Java (and most other programming languages) by using the private keyword when we declare a variable. Attempting to access the private variable outside of the class that owns it will throw an error.
// Example Class
class Example {
// hiddenVariable CAN only be accessed here
private String hiddenVariable; public Example(String websiteName) {
hiddenVariable = websiteName;
}
}// Main Method
public class Main {
public static void main(String[] args) {
// Instantiate class
Example website = new Example("DEV.to"); // This will throw an error
// error: hiddenVariable has private access in Example
System.out.println(website.hiddenVariable);
}
}
Making variables private is done for many reasons ranging from security to encapsulation. In this case, private variables can only be indirectly accessed and manipulated.
7.Difference between call, apply and bind.
Call( ):
The call() method invokes a function with a given ‘this’ value and arguments provided one by one. This means that we can call any function, and explicitly specify what ‘this’ should reference within the calling function.
Apply( ):
Invokes the function and allows you to pass in arguments as an array.
Bind():
Returns a new function, allowing you to pass in an array and any number of arguments.
Difference between Call and Apply
call and apply are very similar they invoke a function with a specified this context, and optional arguments. The only difference between call and apply is that call requires the arguments to be passed in one-by-one, and apply takes the arguments as an array.
const book = {
title: 'Brave New World',
author: 'Aldous Huxley',
}function summary() {
console.log(`${this.title} was written by ${this.author}.`)
}summary()
In this example, we’ll create an object, and create a function that references this but has no this context.
Since summary and book have no connection, invoking summary by itself will only print undefined, as it’s looking for those properties on the global object.
However, we can use call and apply to invoke the this context of book on the function.
summary.call(book)
// or:
summary.apply(book)8.This Keyword
The this references the object of which the function is a property. In other words, the this references the object that is currently calling the function.
this points to a particular object. Now, which is that object is depends on how a function which includes ‘this’ keyword is being called.
const test = {
prop: 42,
func: function() {
return this.prop;
},
};console.log(test.func());
// expected output: 42
Example of This Keyword:
var myVar = 100;function WhoIsThis() {
var myVar = 200; alert("myVar = " + myVar); // 200
alert("this.myVar = " + this.myVar); // 100
}WhoIsThis(); // inferred as window.WhoIsThis()
In the above example, a function WhoIsThis() is being called from the global scope. The global scope means in the context of window object. We can optionally call it like window.WhoIsThis(). So in the above example, this keyword in WhoIsThis() function will refer to window object.
So, this.myVar will return 100. However, if you access myVar without this then it will refer to local myVar variable defined in WhoIsThis() function.