DEV Community: Mayank Yadav

#15) What are Object Prototypes❓

Mayank Yadav — Wed, 18 Aug 2021 03:33:28 +0000

All JavaScript objects inherit properties from a prototype.

Prototypes are the mechanism by which JavaScript objects inherit features from one another.

For example,

✔Date objects inherit properties from the Date prototype.

✔Math objects inherit properties from the Math prototype.

✔Array objects inherit properties from the Array prototype.

On top of the chain is Object.prototype. Every prototype inherits properties and methods from the Object.prototype.

A prototype is a blueprint of an object.
Prototype allows us to use properties and methods on an object even if the properties and methods do not exist on the current object.

Let’s see prototypes help us use methods and properties:

var arr = [1,2,3,4,5];
arr.pop();            //Returns 5

In the code above, as one can see, we have not defined any property or method called pop on the array arr but the JavaScript engine does not throw an error.

The reason being the use of prototypes. As we discussed before, Array objects inherit properties from the Array prototype.

The JavaScript engine sees that the method pop does not exist on the current array object and therefore, looks for the method pop inside the Array prototype and it finds the method.

Whenever the property or method is not found on the current object, the JavaScript engine will always try to look in its prototype and if it still does not exist, it looks inside the prototype's prototype and so on.

For more info, check out this:-
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes

#14) Explain Closures in JS❓

Mayank Yadav — Wed, 11 Aug 2021 16:24:51 +0000

✅A Closure is the combination of function enclosed with refrences to it's surrounding state.
OR
✅A Closure gives you the access to an outer function's scope from an inner function.
✅Closure are created every time a function is created.
✅It is an ability of a function to remember the variables and function declared in it's outer scope.

Let's talk about the above code👇
💠The function car gets executed and return a function when we assign it to a variable.
var closureFun = car();

💠The returned function is then executed when we invoke closureFun:
closureFun();

💠Because of closure the output is Audi is expensive💰🤑
When the function car() runs, it sees that the returning function is using the variable name inside it:

console.log(name + " is expensive💰🤑");

💠Therefore car(), instead of destroying the value of name after execution, saves the value in the memory for further reference.

💠This is the reason why the returning function is able to use the variable declared in the outer scope even after the function is already executed.

✔This ability of a function to store a variable for further reference even after it is executed, is called Closure.

#13) Explain Scope and Scope Chain in JS💥

Mayank Yadav — Sat, 07 Aug 2021 16:49:02 +0000

🔰`Scope`

Scope determines the accessibility or visibility of a variables in your piece of code.

There are 3️⃣ types of Scopes in JavaScript👇

1️⃣ Global Scope
2️⃣ Local or Function Scope
3️⃣ Block Scope

🔰`Global Scope`

✅Variables that are declared outside any function have Global Scope.
✅So, they are accessible from anywhere inside the code.

🔰`Local or Function Scope`

✅Variables declared inside the function are considered as local scope.
✅Every function has it's own scope.
✅The variable is visible inside the function and cannot be accessed outside the function.

🔰`Block Scope`

✅Whenever you see {curly brackets}, it is a block.
✅Block Scope is related to the variables declared using let and const, which means those variables exist only within the corresponding block.
✅Accessible inside that block and cannot be accessed outside of it.
✅A block scope is present in codes within if, switch conditions or for and while loops.

🔰`Scope Chain`

✅The scope chain is simply the memory space of the function that was called, and the memory space of its outer environment.

✔In the above example, the 1st console is for fruit2 i.e., 🥭.
It Does not find 🥭 inside newFavFruit, so it looks for variable inside favFruit, returns 🥭.

✔In the 2nd console, it is for fruit i.e., 🍌.
It does not find 🍌 inside nestedFavFruit, so it looks for variable inside favFruit and does not find it, so looks for variable in global scope, finds it and result is 🍌.

⚠As you can see, if the JavaScript engine does not find the variable in local scope, it tries to check for the variable in the outer scope. If the variable does not exist in the outer scope, it tries to find the variable in the global scope

#12) What is Currying in JS❓

Mayank Yadav — Mon, 02 Aug 2021 13:59:13 +0000

`🔰Currying`

✅It is a advanced technique of working with functions.
✅It is used in other languages also.
✅It is basically to transform a function with n arguments, to n functions of one or less arguments.

f(a, b, c) into f(a)(b)(c)

💠For better understanding, here's an example👇
✅First create a helper function curryFun(n) that performs curring for two arguments.
✅curryFun(n) does the curring transformation.

💠As you can see, the implementation is straightforward
✅It has just two wrappers.

✅The result of curryFun(n) is a wrapper function(x).
✅When it is called like multiply(10), the argument is saved in the Lexical Environment, and a new wrapper is returned function(y).

✅Then this wrapper is called with (2) as an argument, and it passes the call to the original sum.

⚠So if anyone want to know about more advance currying implementation such as _.curry, just comment it, I'll help you out or anyone can also do!!!

#11) Explain call(), apply() & bind() ❓

Mayank Yadav — Sat, 31 Jul 2021 15:13:42 +0000

`🔰call()`

✔The call() method calls a function with a given this value and arguments provided individually.
✔call() method allows object to use method/function of another object.
✔call() accepts arguments.

`🔰apply()`

✔It is similar to call() method but call() method takes argument separately whereas in apply() method arguments are passed as an array.

`🔰bind()`

✔It creates a new function and when invoked has the this keyword set to the provided value.

✔In case of call() & apply() the function is immediately called but in case of _bind() it does not call in-fact it just return another function which you can call it later.
That's why in above example I've stored the value in a variable fun and then invoked it.

#10) Explain 'this' keyword❔

Mayank Yadav — Fri, 30 Jul 2021 07:46:13 +0000

🔰this in JavaScript refers to the object that the function it belongs to and it depends on the object that is invoking the function.

✔In the above example 1, the function is invoked in the global context, the function is a property of global object.
Hence, the output of the above example will be global object.
But this code is ran inside the browser, so the global object is the window object.

✔In above example 2, id function is the property of the object person.
So, the this keyword will refer to the object person and will return Mike as output.

✔In above example 3, the id function is declared inside the object person but at the time of invocation, id() is a property of person2, therefore the this keyword will refer to person2.
And it will return David as output.

✔In above example 4, this keyword refers to the object driver but the driver does not have the property color.
Hence, features function throws an error:-
`Uncaught TypeError: driver.features is not a function'

#9) Explain HOF in JavaScript❔

Mayank Yadav — Tue, 27 Jul 2021 16:03:18 +0000

`🔰HOF: Higher Order Function`

✅HOF is a function that that operates on other function, either by accepting functions as arguments and/or returning a function.

⚠For example, Array.prototype.map, Array.prototype.filter and Array.prototype.reduce are some of the Higher-Order functions built into the language.

#8) What is IIFE in JavaScript🐱‍👤

Mayank Yadav — Tue, 27 Jul 2021 10:12:39 +0000

🔰IIFE: Immediately Invoked Function Expression

✔It is a JavaScript Function that runs as an when it is defined.

Syntax of IIFE👇

Let's talk about the two parenthesis in the above syntax.

`( function() {} )`

💠Outer parenthesis '()'👆
✅While executing JavaScript code, whenever the compiler sees the word function, it assumes that we are declaring a function in the code.
✅Therefore, if we do not use the first set of parentheses, the compiler throws an error because it thinks we are declaring a function, and by the syntax of declaring a function, a function should always have a name.

⚠So, instead of getting error, we have to use the first set of parenthesis that tells the compiler that this function is not the function declaration but it's function expression.

`( function() {}) ();`

💠Right-end side parenthesis '()'👆
✅So, IIFE states that the function should invoke immediately as soon as it is defined.
✅And as we know to run a function we need to invoke it.
✅If we don't invoke it, function declaration is returned.
✅That's why this second parenthesis is just for invoking.

#7) Explain pass by value & pass by reference❓

Mayank Yadav — Tue, 27 Jul 2021 07:01:57 +0000

🔰In JavaScript, primitive data types is passed by value and non-primitive data types is passed by reference.

🚀Pass by Value:

->In pass by value, function is called by directly passing the value of the variable as an argument.

->Any change that you make to the argument inside the function does not effect the original value.

->Parameters passed as an argument creates it's own copy.
So, any changes inside the function will be on it's copy and not on the original value.

Let's see how it works👇

✅Firstly, define a passByValue function with an argument 'a'.

✅Declare and initialize the value of b = 1.

✅Then, pass the 'b' variable into the function, JavaScript copies the value of 'b' to the 'a' variable.

✅After that, the passByValue function changes the 'a' variable. However, this does not impact the original value of 'b'.

🚀Pass by Reference:

->In Pass by Reference, function is called by directly passing the reference/address of the variable as an argument.

->On changing the value inside the function also change the original value.

->In JavaScript array and Object follows pass by reference property.

->In Pass by reference, parameters passed as an arguments does not create its own copy, it refers to the original value so any changes made inside function will directly affect the original value.

Let's see how it works👇

✅Firstly, define the passByReference() function that accepts an object person. The function sets the name property of the object to Maverick.

✅Next, declare a variable friend and assign it an object whose name property is set to Ayush.

⚠The friend is a variable that references the actual object:
let friend = {name: "Ayush",};

✅Then, pass the friend variable into the function.

✅JavaScript copies the value of the friend variable to person variable.

✅As a result, both friend and person variables are referencing the same object in the memory: passByReference(friend);

✅After that, inside the function, the name property of the object is set to Maverick through the person variable.

✅Finally, accessing the name property of the friend variable returns Maverick.

#6) What is NaN property in JavaScript❓

Mayank Yadav — Mon, 26 Jul 2021 16:39:20 +0000

🚀`NaN : Not a Number`

✔So basically it means that the value should not be a legal number.

💠Some Examples for better understanding👇

✔For checking if a value is NaN, we use isNaN() function.

⚠##Note:

✔`NaN first converts it into a number type and then compares or equates to NaN`.

#5) Is JavaScript a statically typed or Dynamically typed language🤔

Mayank Yadav — Mon, 26 Jul 2021 05:26:06 +0000

Yes, JavaScript is a dynamically typed language.

🚀Static Typed Languages

In the above example,👆
We declare a variable name of string type by adding a prefix 'String' means it's value will always be of a string type.

But as we are going to re-assign the value of the variable name to some other data type which was earlier string, it will throw an error message and this only happens in statically typed language like TypeScript.

🚀Dynamic Typed Language

In the above example,👆
We assign a value to the variable 'x' without defining it's type.
So, the type of the variable is set dynamically depending on the value that we assigned to the variable.

In the next step, we re-assigned the value of the variable 'x' to a number type.
So, there will be no error because the type of the variable is set dynamically during code execution.

✔JavaScript is a dynamically typed language so you are free to re-assign value of any type by using either let or var.

Note:

✅It's totally the developers responsibility to take care of the variables type and on a safer side use const.

✅In dynamically typed language, the type of a variable is checked during run-time whereas...
In statically typed language, the type of a variable is checked during compile-time.

#4) Explain Implicit Type Coercion in JavaScript❔

Mayank Yadav — Sun, 25 Jul 2021 09:43:07 +0000

💠The process of automatic or implicit conversion of values from one data type to another.

💠It takes place when the operands of an expression are of different data types.

String Coercion

✅It occurs when ' +, -, /, * ' operator is used.

✅When a number is added to a string, the number type is always converted into string type.

✅When a number is divided, subtracted or multiplied to a string, the string is always converted into number type.👇

Boolean Coercion

✅When a Boolean is added to a Number, the Boolean value is converted to a number.

✅A Boolean value can be represented as 0 for false or 1 for true.

⚠All values except 0, 0n, -0, "", undefined, null, NaN are truthy values.

Equality Coercion

✅The '==' operator compares values but not types.

✅Returns true because both 'a' and 'b' are converted to the same type and then compared. Hence the operands are equal.👇

✅Returns false as string 'true' is coerced to NaN which is not equal to 1 or true in Boolean, so returns false.👆