Know Deeply About JavaScript

1. Truthy and Falsy?

In JavaScript, a truthy value is a value that is considered true when coming across in a Boolean context. A falsy value is a value that is considered false when coming across in a Boolean context

Truthy: if — (true), ({}), ([]), (“0”), (“false”)

Falsy: if — (false), (null),(undefined), (0),(NaN)

2. Undefined vs Null

In JavaScript, Undefined is a type, on the other hand, null is an object.

Undefined means when a variable is declared but no value is assigned. Null is an assignment value that we can assign to a variable.

Undefined:

var demo;
alert(demo); //shows undefined
alert(typeof demo); //shows undefined
Null:
var demo = null;
alert(demo); //shows null
alert(typeof demo); //shows object

Different ways to get undefined:

• If we don’t define a variable.
• If we don’t return explicitly in the function that means we write return then don’t’ write anything.
• If we don’t pass a parameter.
• If we write a variable value as undefined we get an undefined value.
• After declaring an object then if we want to access another property as output but it is not in this object.

3. Double Equals(==) vs Triple Equals(===)

Double equals (==) checks for value equality only. It inherently does type coercion. This means that before checking the values, it converts the types of the variables to match each other. On the other hand, Triple equals (===) does not perform type coercion. It will verify whether the variables being compared have both the same value and same type.

const number = 4356
const stringNumber = ‘4356’
console.log(number == stringNumber) //true
console.log(number === stringNumber) //false

4. Scope

In Javascript, scope means the availability of variables. It determines if we can use a variable from anywhere or not. There are two types of scope. Ex: Global, local. Global scope means a variable can be accessed anywhere, but a locally scoped variable can only be accessed in the block it was declared.

let number;
const scoping = (number) =>{
console.log(number); // 50
}
scoping(50);

Here the function scoping can access the variable number because it was declared globally. But what happens if we declare a variable inside the function and try to access it from outside. Let’s find out.

let number;
const scoping = (number) =>{
console.log(number); // 50
let num = 50;
}
scoping(50);
console.log(num); // num is not defined

It gives an error that num is not defined. The reason for it is that the variable num was declared in a block or declared locally, and any variable declared in a block can not be accessed outside the block.

5. Block Scope

Block scope is an area within if, switch conditions or for and while loops. When we see curly brackets { } it’s a block. In ES6 edition, const and let keywords allow developers to declare variables in the block scope, which means a variable exists 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();

5. Closure

Normally, while using a function, if we want to use some value that is not declared in the function, we would have to pass parameters in the function. See the example.

var sum = function( num1, num2 ){
return num1 + num2;
}
console.log(sum(2,3)); // 5

But in javascript, we can do the exact thing even if we don’t pass any parameter. If we declare two variables num1 and num2, outside the function sum and use them in the function, we would get the same result. You can copy the code below and paste it into your console if you do not believe me.

var num1 = 2;
var num2 = 3;
var sum = function(){
return num1 + num2;
}
console.log(sum()); // 5

But how is it possible? How does javascript do it? Let’s consider the whole part of the code as a parent, and the function is the child of the parent. So what closure does is it enables all the child to access all the variables of its parent. It allows the child to keep a reference to everything of its parent so that it can use any variable if it needs. That is the power of closure in Javascript.

6. Private variable

Private variable in javascript is an OOP(Object-oriented programming concepts). Which means which variable we declare as a private variable it can’t be accessible in other classes. It is only accessible in its parent class.

7. Encapsulation

JavaScript Encapsulation is a process of binding the data that are variables with the functions acting on that data. It allows us to control the data and validate it. To achieve encapsulation in JavaScript we have to:

- use the var keyword to make data members private,

- use the setter method to set data, and the getter method to get data.

8. Difference between bind, call, and apply

Bind: returns a new function, allowing you to pass any number of arguments.

var employee1 = {firstName: ‘John’, lastName: ‘Rodson’};
var employee2 = {firstName: ‘Jimmy’, lastName: ‘Baily’};
function invite(greeting1, greeting2) {
console.log(greeting1 + ‘ ‘ + this.firstName + ‘ ‘ + this.lastName+ ‘, ‘+ greeting2);
}
var inviteEmployee1 = invite.bind(employee1);
var inviteEmployee2 = invite.bind(employee2);
inviteEmployee1(‘Hello’, ‘How are you?’); // Hello John Rodson, How are you?
inviteEmployee2(‘Hello’, ‘How are you?’); // Hello Jimmy Baily, How are you?

Call: The call() method invokes a function with a given value and arguments provided one by one.

var employee1 = {firstName: ‘John’, lastName: ‘Rodson’};
var employee2 = {firstName: ‘Jimmy’, lastName: ‘Baily’};
function invite(greeting1, greeting2) {
console.log(greeting1 + ‘ ‘ + this.firstName + ‘ ‘ + this.lastName+ ‘, ‘+ greeting2);
}
invite.call(employee1, ‘Hello’, ‘How are you?’); // Hello John Rodson, How are you?
invite.call(employee2, ‘Hello’, ‘How are you?’); // Hello Jimmy Baily, How are you?

Apply: Invokes the function with a given this value and allows you to pass in arguments as an array.

var employee1 = {firstName: ‘John’, lastName: ‘Rodson’};
var employee2 = {firstName: ‘Jimmy’, lastName: ‘Baily’};
function invite(greeting1, greeting2) {
console.log(greeting1 + ‘ ‘ + this.firstName + ‘ ‘ + this.lastName+ ‘, ‘+ greeting2);
}
invite.apply(employee1, [‘Hello’, ‘How are you?’]); // Hello John Rodson, How are you?
invite.apply(employee2, [‘Hello’, ‘How are you?’]); // Hello Jimmy Baily, How are you?

Call and apply are pretty interchangeable. Both execute the current function immediately. You need to decide whether it’s easier to send in an array or a comma-separated list of arguments. You can remember by treating Call as for comma (separated list) and Apply as for Array. Whereas Bind creates a new function that will have this set to the first parameter passed to bind().

9. DRY

Our code should be clean and clean so that everyone understands the code. The DRY principle helps us to keep this type of code. DRY means Do not Repeat Yourselves. That means we write one type of code one time. Not again and again we repeat the same code.

10. How to use API in JavaScript?

API is the short form for Application Programming Interface. It helps applications to communicate with each other. We use API to fetch data from servers and doing our preferable tasks. We can use API in Javascript in the following way,

fetch(“https://jsonplaceholder.typicode.com/users")
.then(res => res.json())
.then(data => console.log(data))

What we are doing here is we are fetching data from JSON placeholder using the URL, which gives us data as a response in JSON format. Then we are parsing the data as a Javascript object, and then we are showing the result in the console.