diff --git a/README.md b/README.md
index f248332..3bc019c 100644
--- a/README.md
+++ b/README.md
@@ -2,35 +2,35 @@
# 123-JavaScript-Interview-Questions
-It's a book about frontend interview question. We hope that it will help all javascript developers to prepare for a technical job interview.
+This book's goal is to help javascript frontend developers prepare for technical job interviews through a collection of carefully compiled questions.
-## If you want to buy a book in paper form
+## Want to buy a book in paper form? Want some badass flashcards?
- - This Book will be completed by September 2018 and then it will be available to buy. If you want me to sent an early copy of this book, please add your name and email address in google form here [Google Form](https://goo.gl/forms/c8ubV1tWBBdz6fJP2).
- - If you don't want to wait, you can buy [Yuri's JavaScript Flashcards](http://flashcardsjs.com), a set of frontend interview questions sorted by popularity among the interviewers printed on beautiful poker-size flashcards.
+ - This Book will be soon completed and then it will be available to buy in paper form. If you want me to send you an early copy of this book, please add your name and email address in this [Google Form](https://goo.gl/forms/c8ubV1tWBBdz6fJP2).
+ - If you don't want to wait, you can buy [Yuri's JavaScript Flashcards](http://flashcardsjs.com), a set of frontend interview questions sorted by popularity among interviewers printed on beautiful poker-size flashcards.
## Question 1. What's the difference between `undefined` and `not defined` in JavaScript
-### Answer
+Answer
-In JavaScript if you try to use a variable that doesn't exist and has not been declared, then JavaScript will throw an error `var name is not defined` and the script will stop execute thereafter. But If you use `typeof undeclared_variable` then it will return `undefined`.
+In JavaScript if you try to use a variable that doesn't exist and has not been declared, then JavaScript will throw an error `var name is not defined` and the script will stop executing thereafter. But If you use `typeof undeclared_variable` then it will return `undefined`.
Before starting further discussion let's understand the difference between declaration and definition.
-`var x` is a declaration because you are not defining what value it holds yet, but you are declaring its existence and the need for memory allocation.
+`var x` is a declaration because we are not defining what value it holds yet, but we are declaring its existence and the need for memory allocation.
```javascript
var x; // declaring x
-console.log(x); //output: undefined
+console.log(x); // output: undefined
```
-`var x = 1` is both declaration and definition (also we can say we are doing initialisation), Here declaration and assignment of value happen inline for variable x, In JavaScript every variable declaration and function declaration brings to the top of its current scope in which it's declared then assignment happen in order this term is called `hoisting`.
+`var x = 1` is both declaration and definition, here declaration and assignment of value happen inline for variable x—what we are doing is called "initialisation". In JavaScript both variable declarations and function declarations go to the top of the scope in which they are declared, then assignment happens—this series of events is called "hoisting".
A variable can be declared but not defined. When we try to access it, It will result `undefined`.
```javascript
var x; // Declaration
-if(typeof x === 'undefined') // Will return true
+typeof x === 'undefined'; // Will return true
```
A variable can be neither declared nor defined. When we try to reference such variable then the result will be `not defined`.
@@ -42,37 +42,31 @@ console.log(y); // Output: ReferenceError: y is not defined
### Ref Link:
[http://stackoverflow.com/questions/20822022/javascript-variable-definition-declaration](http://stackoverflow.com/questions/20822022/javascript-variable-definition-declaration)
+Answer
-The code above would give the output `1undefined`. inside `if` statement we have `function f(){}`. Here's it's a function expression, not function statement, which is why f is not a variable.
+`NaN <= 100` is `false` and `NaN > 100` is also `false`, so if the
+value of `x` is `NaN`, the statements are not the same.
-As a reminder, function expression is something like this:
-```javascript
-var myFunc1 = new function() {}
-var myFunc2 = new function whatever() {} // whatever is not a variable here
-```
+The same holds true for any value of x that being converted to type Number, returns `NaN`, e.g.: `undefined`, `[1,2,5]`, `{a:22}` , etc.
-A function statement is something like this:
-```javascript
-function myFunc3() {}
-```
-You can read about [function expressions](https://developer.mozilla.org/en-US/docs/web/JavaScript/Reference/Operators/function) and [function statements](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function) on MDN.
+This is why you need to pay attention when you deal with numeric variables. `NaN` can’t be equal, less than or more than any other numeric value, so the only reliable way to check if the value is `NaN`, is to use the `isNaN()` function.
+
+Answer
-One of the drawback of creating a private method in JavaScript is that they are very memory inefficient because a new copy of the method would be created for each instance.
+One of the drawbacks of declaring methods directly in JavaScript objects is that they are very memory inefficient. When you do that, a new copy of the method is created for each instance of an object. Here's an example:
```javascript
var Employee = function (name, company, salary) {
@@ -80,66 +74,70 @@ var Employee = function (name, company, salary) {
this.company = company || "";
this.salary = salary || 5000;
- // Private method
- var increaseSalary = function () {
- this.salary = this.salary + 1000;
+ // We can create a method like this:
+ this.formatSalary = function () {
+ return "$ " + this.salary;
};
-
};
-// adding the method to Employee's prototype
-Employee.prototype.displayIncreasedSalary = function() {
- increaseSalary();
- console.log(this.salary);
-};
-
-// Creating three Employee objects
-var emp1 = new Employee("John","Pluto",3000);
-var emp2 = new Employee("Merry","Pluto",2000);
-var emp3 = new Employee("Ren","Pluto",2500);
+// Alternatively we can add the method to Employee's prototype:
+Employee.prototype.formatSalary2 = function() {
+ return "$ " + this.salary;
+}
+
+//creating objects
+var emp1 = new Employee('Yuri Garagin', 'Company 1', 1000000);
+var emp2 = new Employee('Dinesh Gupta', 'Company 2', 1039999);
+var emp3 = new Employee('Erich Fromm', 'Company 3', 1299483);
```
-Here each instance variable `emp1`, `emp2`, `emp3` has own copy of increaseSalary private method. However the `displayIncreasedSalary` will only be added once to an object `Employee.prototype`.
+In this case each instance variable `emp1`, `emp2`, `emp3` has its own copy of the`formatSalary` method. However the `formatSalary2` will only be added once to `Employee.prototype`.
-So as recommendation don't go for a private method unless it's necessary.
+Answer
+
+A closure is a function defined inside another function (called parent function) and as such it has access to the variables declared and defined within its parent function's scope.
-A closure is a function defined inside another function (called parent function) and has access to the variable which is declared and defined in parent function scope.
+The closure has access to the variables in three scopes:
-The closure has access to the variable in three scopes:
-- Variable declared in his own scope
-- Variable declared in parent function scope
+- Variable declared in its own scope
+- Variable declared in its parent function's scope
- Variable declared in the global namespace
```javascript
-var globalVar = "abc";
+var globalVar = "abc"; //Global variable
+
+// Parent self-invoking function
+(function outerFunction (outerArg) { // start of outerFunction's scope
-// Parent self invoking function
-(function outerFunction (outerArg) { // begin of scope outerFunction
- // Variable declared in outerFunction function scope
- var outerFuncVar = 'x';
+ var outerFuncVar = 'x'; // Variable declared in outerFunction's function scope
+
// Closure self-invoking function
- (function innerFunction (innerArg) { // begin of scope innerFunction
- // variable declared in innerFunction function scope
- var innerFuncVar = "y";
+ (function innerFunction (innerArg) { // start of innerFunction's scope
+
+ var innerFuncVar = "y"; // variable declared in innerFunction's function scope
console.log(
"outerArg = " + outerArg + "\n" +
"outerFuncVar = " + outerFuncVar + "\n" +
"innerArg = " + innerArg + "\n" +
"innerFuncVar = " + innerFuncVar + "\n" +
"globalVar = " + globalVar);
- // end of scope innerFunction
- })(5); // Pass 5 as parameter
-// end of scope outerFunction
-})(7); // Pass 7 as parameter
+
+ // end of innerFunction's scope
+
+ })(5); // Pass 5 as parameter to our Closure
+
+// end of outerFunction's scope
+
+})(7); // Pass 7 as parameter to the Parent function
```
-`innerFunction` is closure which is defined inside `outerFunction` and has access to all variable which is declared and defined in outerFunction scope. In addition to this function defined inside the function as closure has access to the variable which is declared in `global namespace`.
+`innerFunction` is a closure which is defined inside `outerFunction` and consequently has access to all the variables which have been declared and defined within `outerFunction`'s scope as well as any variables residing in the program's global scope.
-Output of above code would be:
+The output of the code above would be:
```javascript
outerArg = 7
@@ -149,15 +147,15 @@ innerFuncVar = y
globalVar = abc
```
-## Question 5. Write a mul function which will properly when invoked as below syntax.
+Answer
```javascript
function mul (x) {
@@ -169,14 +167,17 @@ function mul (x) {
}
```
-Here the `mul` function accepts the first argument and returns the anonymous function which takes the second parameter and returns the anonymous function which takes the third parameter and returns the multiplication of arguments which is being passed in successive
+Here the `mul` function accepts the first argument and returns an anonymous function which then takes the second parameter and returns one last anonymous function which finally takes the third and final parameter; the last function then multiplies `x`, `y` and `z`, and returns the result of the operation.
+
+In Javascript, a function defined inside another function has access to the outer function's scope and can consequently return, interact with or pass on to other functions, the variables belonging to the scopes that incapsulate it.
-In Javascript function defined inside has access to outer function variable and function is the first class object so it can be returned by the function as well and passed as an argument in another function.
- A function is an instance of the Object type
-- A function can have properties and has a link back to its constructor method
-- A function can be stored as variable
-- A function can be pass as a parameter to another function
-- A function can be returned from another function
+- A function can have properties and has a link to its constructor method
+- A function can be stored as a variable
+- A function can be passed as a parameter to another function
+- A function can be returned by another function
+
+Answer
There are a couple of ways by which we can empty an array, So let's discuss all the possible way by which we can empty an array.
@@ -199,7 +200,7 @@ arrayList = [];
The code above will set the variable `arrayList` to a new empty array. This is recommended if you don't have **references to the original array** `arrayList` anywhere else because It will actually create a new empty array. You should be careful with this way of empty the array, because if you have referenced this array from another variable, then the original reference array will remain unchanged, Only use this way if you have only referenced the array by its original variable `arrayList`.
-For Instance:
+For instance:
```javascript
var arrayList = ['a', 'b', 'c', 'd', 'e', 'f']; // Created array
@@ -216,7 +217,7 @@ arrayList.length = 0;
The code above will clear the existing array by setting its length to 0. This way of emptying an array will also update all the reference variables that point to the original array.
-For Instance:
+For instance:
```javascript
var arrayList = ['a', 'b', 'c', 'd', 'e', 'f']; // Created array
@@ -251,9 +252,11 @@ while(arrayList.length) {
Above implementation can also empty the array. But not recommended to use often.
+Answer
The best way to find whether an object is instance of a particular class or not using `toString` method from `Object.prototype`
@@ -316,6 +319,8 @@ Array.isArray(arrayList);
`Array.isArray` is supported by Chrome 5, Firefox 4.0, IE 9, Opera 10.5 and Safari 5
+Answer
+
+The code above will output `0` as output. `delete` operator is used to delete a property from an object. Here `x` is not an object, it's a **local variable**. `delete` operator doesn't affect local variables.
-The code above will output `0` as output. `delete` operator is used to delete a property from an object. Here `x` is not an object it's **local variable**. `delete` operator doesn't affect local variables.
+Answer
The code above will output `1` as output. `delete` operator is used to delete a property from an object. Here `x` is not an object it's **global variable** of type `number`.
+Answer
The code above will output `undefined` as output. `delete` operator is used to delete a property from an object. Here `x` is an object which has foo as a property and from a self-invoking function, we are deleting the `foo` property of object `x` and after deletion, we are trying to reference deleted property `foo` which result `undefined`.
+Answer
The code above will output `xyz` as output. Here `emp1` object got company as **prototype** property. delete operator doesn't delete prototype property.
`emp1` object doesn't have **company** as its own property. you can test it `console.log(emp1.hasOwnProperty('company')); //output : false` However, we can delete company property directly from `Employee` object using `delete Employee.company` or we can also delete from `emp1` object using `__proto__` property `delete emp1.__proto__.company`.
+Answer
- When you run the code above and do `console.log(trees);` in chrome developer console then you will get `["redwood", "bay", "cedar", undefined × 1, "maple"]`.
- In the recent versions of Chrome you will see the word `empty` of `undefined x 1`.
- When you run the same code in Firefox browser console then you will get `["redwood", "bay", "cedar", undefined, "maple"]`
@@ -398,6 +411,8 @@ Clearly we can see that Chrome has its own way of displaying uninitialized index
+Answer
The code above will output `5` as output. When we used `delete` operator for deleting an array element then, the array length is not affected by this. This holds even if you deleted all elements of an array using `delete` operator.
So when delete operator removes an array element that deleted element is no longer present in the array. In place of value at deleted index `undefined x 1` in **chrome** and `undefined` is placed at the index. If you do `console.log(trees)` output `["xyz", "xxxx", "test", undefined × 1, "apple"]` in Chrome and in Firefox `["xyz", "xxxx", "test", undefined, "apple"]`.
+Answer
The code above will output `1, "truexyz", 2, 1` as output. Here's a general guideline for the plus operator:
- Number + Number -> Addition
- Boolean + Number -> Addition
+ - Boolean + Boolean -> Addition
- Number + String -> Concatenation
- String + Boolean -> Concatenation
- String + String -> Concatenation
+
+
+Answer
The code above will print string `"undefined"` as output. According to associativity rule operator with the same precedence are processed based on their associativity property of operator. Here associativity of the assignment operator is `Right to Left` so first `typeof y` will evaluate first which is string `"undefined"` and assigned to `z` and then `y` would be assigned the value of z. The overall sequence will look like that:
@@ -449,6 +470,8 @@ z = typeof y;
y = z;
```
+Answer
The output will be `Reference Error`. To fix the bug we can try to rewrite the code a little bit:
@@ -489,87 +512,73 @@ var foo = function bar() {
// bar is undefined here
```
-## Question 17. What is the difference between declaring a function in the formats listed below?
+Answer
-The main difference is function `foo` is defined at `run-time` and is called function expression, whereas function `bar` is defined at parse time and is called function statement. To understand in better, let's see below code :
+The main difference is that function `foo` is defined at `run-time` and is called a function expression, whereas function `bar` is defined at `parse time` and is called a function statement. To understand it better, let's take a look at the code below :
```javascript
// Run-Time function declaration
-
```
```javascript
// Parse-Time function declaration
-
+}
```
+Answer
-But If you try to run similar code in the following format, it would result in an error
-
-```javascript
-
+The output will be :
+```
+bar got called
+something
```
+Since the function is called first and defined during parse time the JS engine will try to find any possible parse time definitions and start the execution loop which will mean function is called first even if the definition is post another function.
-## Question 18. what is function hoisting in JavaScript?
-**Function Expression**
+Answer
+
+Let's take the following **function expression**
```javascript
var foo = function foo() {
return 12;
- };
+ }
```
-### Answer
-
-In JavaScript `var`-declared variables and functions are `hoisted`. Let's take function `hoisting` first. Basically, the JavaScript interpreter looks ahead to find all the variable declaration and hoists them to the top of the function where it's declared. For Example:
+In JavaScript `var`-declared variables and functions are `hoisted`. Let's take function `hoisting` first. Basically, the JavaScript interpreter looks ahead to find all the variable declaration and hoists them to the top of the function where it's declared. For example:
```javascript
foo(); // Here foo is still undefined
@@ -578,7 +587,7 @@ var foo = function foo() {
};
```
-The code above behind the scene look something like below code:
+The code above behind the scene look something like this:
```javascript
var foo = undefined;
@@ -596,6 +605,8 @@ foo = function foo() {
foo(); // Now foo is defined here
```
+Answer
The code above will output: `undefined, 5000$` because of hoisting. In the code presented above, you might be expecting `salary` to retain it values from outer scope until the point that `salary` was re-declared in the inner scope. But due to `hoisting` salary value was `undefined` instead. To understand it better have a look of the following code, here `salary` variable is hoisted and declared at the top in function scope. When we print its value using `console.log` the result is `undefined`. Afterwards the variable is redeclared and the new value `"5000$"` is assigned to it.
@@ -626,17 +637,19 @@ var salary = "1000$";
})();
```
+Answer
`typeof` is an operator that returns a string with the type of whatever you pass.
-The `typeof` operator checks if a value belongs to one of the six basic types: `number`, `string`, `boolean`, `object`, `function` or `undefined`.
+The `typeof` operator checks if a value belongs to one of the seven basic types: `number`, `string`, `boolean`, `object`, `function`, `undefined` or `Symbol`.
`typeof(null)` will return `object`.
-`instanceof` is much more intelligent: it works on the level of prototypes. In particular, it tests to see if the right operand appears anywhere in the prototype chain of the left. `instanceof` doesn’t work with primitive types. It `instanceof` operator checks the current object and returns true if the object is of the specified type, for example:
+`instanceof` is much more intelligent: it works on the level of prototypes. In particular, it tests to see if the right operand appears anywhere in the prototype chain of the left. `instanceof` doesn’t work with primitive types. The `instanceof` operator checks the current object and returns true if the object is of the specified type, for example:
```javascript
var dog = new Animal();
@@ -653,7 +666,9 @@ name instanceof String; // Output : true
Ref Link: [http://stackoverflow.com/questions/2449254/what-is-the-instanceof-operator-in-javascript](http://stackoverflow.com/questions/2449254/what-is-the-instanceof-operator-in-javascript)
-## Question 21. Calculate the lengh of the associative array
+Answer
-First of all, in case of JavaScript an associative array is the same as an object. Secondly, even though is no built-in function or property available to calculate the length/size an object, we can write such function ourselves.
+First of all, in the case of JavaScript an associative array is the same as an object. Secondly, even though there is no built-in function or property available to calculate the length/size an object, we can write such function ourselves.
#### Method 1
-`Object` has `keys` method which can we used to calculate the length of object.
+`Object` has `keys` method which can be used to calculate the length of object.
```javascript
Object.keys(counterArray).length; // Output 3
@@ -706,7 +721,12 @@ _.size({one: 1, two: 2, three: 3});
=> 3
```
+Answer
+
If your are familiar with Object-oriented programming, More likely familiar to thinking of functions, methods, and class constructors as three separate things. But In JavaScript, these are just three different usage patterns of one single construct.
functions : The simplest usages of function call:
@@ -761,6 +781,8 @@ Unlike function calls and method calls, a constructor call `new Employee('John D
The primary role of the constructor function is to initialize the object.
+Answer
The output of above code would be `"USA"`. Here `new User("xyz")` creates a brand new object and created property `location` on that and `USA` has been assigned to object property location and that has been referenced by the person.
@@ -786,16 +808,18 @@ function User(name) {
}
var person;
-var foo = User("xyz");
+var foo = new User("xyz");
foo["location"] = "USA";
// the console will show you that the result of this is "USA"
```
+Answer
It’s a technology that allows your web application to use cached resources first, and provide default experience offline, before getting more data from the network later. This principle is commonly known as Offline First.
@@ -803,7 +827,12 @@ Service Workers actively use promises. A Service Worker has to be installed,acti
As of 2017, Service Workers are not supported in IE and Safari.
+Answer
+
In JS, that difference is quite subtle. A function is a piece of code that is called by name and function itself not associated with any object and not defined inside any object. It can be passed data to operate on (i.e. parameter) and can optionally return data (the return value).
```javascript
@@ -831,7 +860,7 @@ A function can take a form of immediately invoked function expression (IIFE):
Finally there are also arrow functions:
```javascript
-const myFunc (arg) => {
+const myFunc = arg => {
console.log("hello", arg)
}
```
@@ -850,7 +879,7 @@ var obj1 = {
};
// Call the method
-obj1.display();
+obj1.myMethod();
```
Here `obj1` is an object and `myMethod` is a method which is associated with `obj1`.
@@ -861,7 +890,7 @@ In ES6 we have classes. There the methods will look like this:
```javascript
class MyAwesomeClass {
myMethod() {
- console.log("hi there");
+ console.log("hi there");
}
}
@@ -873,10 +902,10 @@ Understand: the method is not some kind of special type of a function, and it's
```javascript
var obj1 = {
- prop1: "buddy"
+ prop1: "buddy"
};
var myFunc = function () {
- console.log("Hi there", this);
+ console.log("Hi there", this);
};
// let's call myFunc as a function:
myFunc(); // will output "Hi there undefined" or "Hi there Window"
@@ -887,10 +916,13 @@ obj1.myMethod(); // will print "Hi there" following with obj1.
```
+Answer
+
#### Definition
-IIFE a function that runs as soon as it's defined. Usually it's anonymous (doesn't have a function name), but it also can be named. Here's an exmaple of IIFE:
+IIFE a function that runs as soon as it's defined. Usually it's anonymous (doesn't have a function name), but it also can be named. Here's an example of IIFE:
```javascript
(function() {
@@ -953,8 +985,10 @@ Variables and functions that you declare inside an IIFE are not visible to the o
code, it helps to prevent polluting the global scope and provide the module interface to the outside.
+Answer
The singleton pattern is an often used JavaScript design pattern. It provides a way to wrap the code into a logical unit that can be accessed through a single variable. The Singleton design pattern is used when only one instance of an object is needed throughout the lifetime of an application. In JavaScript, Singleton pattern have many uses, they can be used for NameSpacing, which reduce the number of global variables in your page (prevent from polluting global space), organizing the code in a consistent manner, which increase the readability and maintainability of your pages.
@@ -1057,9 +1091,11 @@ console.log(MyNamespace.Singleton.getInstance().publicMethod());
The singleton implemented above is easy to understand. The singleton class maintains a static reference to the lone singleton instance and return that reference from the static getInstance() method.
+Answer
#### Method 1: Function based
@@ -1076,8 +1112,8 @@ This method is useful if we want to create several similar objects. In the code
// Creating multiple object which have similar property but diff value assigned to object property.
var employee1 = new Employee('John', 'Moto', 24, '5000$');
- var employee1 = new Employee('Ryan', 'Jor', 26, '3000$');
- var employee1 = new Employee('Andre', 'Salt', 26, '4000$');
+ var employee2 = new Employee('Ryan', 'Jor', 26, '3000$');
+ var employee3 = new Employee('Andre', 'Salt', 26, '4000$');
```
#### Method 2: Object Literal
@@ -1125,18 +1161,20 @@ employee.getName = function(){
`Object.create(obj)` will create a new object and set the `obj` as its prototype. It’s a modern way to create objects that inherit properties from other objects. `Object.create` function doesn’t run the constructor. You can use `Object.create(null)` when you don’t want your object to inherit the properties of `Object`.
+Answer
```javascript
function deepClone(object){
var newObject = {};
for(var key in object){
- if(typeof object[key] === 'object'){
+ if(typeof object[key] === 'object' && object[key] !== null ){
newObject[key] = deepClone(object[key]);
}else{
newObject[key] = object[key];
@@ -1163,8 +1201,12 @@ var personalDetail = {
```
So when we do deep clone then we should copy every property (including the nested object).
+Answer
+
> Suppose we have given an object `person`
```javascript
@@ -1191,6 +1233,8 @@ if(typeof person.salary === 'undefined'){
console.log("salary is undefined here because we haven't declared");
}
```
+Answer
```javascript
function Clone(object){
@@ -1211,8 +1255,12 @@ function Clone(object){
}
```
+Answer
+
We use promises for handling asynchronous interactions in a sequential manner. They are especially useful when we need to do an async operation and THEN do another async operation based on the results of the first one. For example, if you want to request the list of all flights and then for each flight you want to request some details about it. The promise represents the future value. It has an internal state (`pending`, `fulfilled` and `rejected`) and works like a state machine.
A promise object has `then` method, where you can specify what to do when the promise is fulfilled or rejected.
@@ -1226,9 +1274,13 @@ Also mention that you know about more sophisticated concepts:
Be sure that you can implement the promise, read [one of the articles on a topic](https://opensourceconnections.com/blog/2014/02/16/a-simple-promise-implementation-in-about-20-lines-of-javascript/), and learn the source code of the [simplest promise implementation](https://gist.github.com/softwaredoug/9044640).
+Answer
+
+Let say we have `person` object with property **name** and **age**
```javascript
var person = {
@@ -1263,7 +1315,12 @@ console.log(person.hasOwnProperty('name')); // print true
console.log(person.hasOwnProperty('salary')); // print false
```
+Answer
+
`NaN` stands for “not a number.” and it can break your table of numbers when it has an arithmetic operation that is not allowed. Here are some examples of how you can get `NaN`:
```javascript
@@ -1285,6 +1342,8 @@ To check if the current value of the variable is NaN, you have to use the `isNaN
Further reading: [great blogpost on ariya.io](https://ariya.io/2014/05/the-curious-case-of-javascript-nan)
+Answer
+
For ES6, you can just replace `var i` with `let i`.
For ES5, you need to create a function scope like here:
@@ -1310,13 +1371,26 @@ for (var i = 0; i < arr.length; i++) {
}
```
+This can also achieve by forEach (allows you to keep that variable within the forEach’s scope)
+
+```javascript
+var arr = [10, 32, 65, 2];
+arr.forEach(function(ele, i) {
+ setTimeout(function() {
+ console.log('The index of this number is: ' + i);
+ }, 3000);
+})
+```
+
+Answer
->We always encounter in such situation where we need to know whether value is type of array or not.
+We always encounter in such situation where we need to know whether value is type of array or not.
-For Instance : Below code perform some operation based value type
+For instance : the code below perform some operation based value type
```javascript
function(value){
@@ -1330,9 +1404,21 @@ function(value){
Let's discuss some way to detect an array in JavaScript.
-**Method 1 :**
+**Method 1:**
-Duck typing test for array type detection
+Juriy Zaytsev (Also known as kangax) proposed an elegant solution to this.
+
+```javascript
+ function isArray(value){
+ return Object.prototype.toString.call(value) === '[object Array]';
+ }
+```
+This approach is most popular way to detecting a value of type array in JavaScript and recommended to use. This approach relies on the fact that, native toString() method on a given value produce a standard string in all browser.
+
+
+**Method 2:**
+
+Duck typing test for array type detection
```javascript
// Duck typing arrays
@@ -1351,22 +1437,13 @@ As we can see above isArray method will return true if value object have `sort`
```
Now when you check `isArray(bar)` then it will return true because bar object has sort method, But the fact is bar is not an array.
-So method 1 is not a best way to detect an array as you can see it's not handle the case when some object has sort method.
+So this method is not a best way to detect an array as you can see it's not handle the case when some object has sort method.
-**Method 2:**
-
-Juriy Zaytsev (Also known as kangax) proposed an elegant solution to this.
-
-```javascript
- function isArray(value){
- return Object.prototype.toString.call(value) === '[object Array]';
- }
-```
-This approach is most popular way to detecting a value of type array in JavaScript and recommended to use. This approach relies on the fact that, native toString() method on a given value produce a standard string in all browser.
+**Method 3:**
->ECMAScript 5 has introduced **Array.isArray()** method to detect an array type value. The sole purpose of this method is accurately detecting whether a value is an array or not.
+ECMAScript 5 has introduced **Array.isArray()** method to detect an array type value. The sole purpose of this method is accurately detecting whether a value is an array or not.
-In many JavaScript libraries you may see below code for detecting an value of type array.
+In many JavaScript libraries you may see the code below for detecting an value of type array.
```javascript
function(value){
@@ -1379,9 +1456,34 @@ function(value){
}
```
+**Method 4:**
+
+You can query the constructor name:
+
+```javascript
+function isArray(value) {
+ return value.constructor.name === "Array";
+}
+
+```
+
+**Method 5:**
+
+You check if a given value is an `instanceof Array`:
+
+```javascript
+function isArray(value) {
+ return value instanceof Array;
+}
+```
+
+Answer
+
+ In Javascript Object are called as reference type, Any value other then primitive is definitely a reference type. There are several built-in reference type such as **Object**, **Array**, **Function**, **Date**, **null** and **Error**.
Detecting object using `typeof` operator
@@ -1421,13 +1523,15 @@ console.log(emp1 instanceof Employee); // true
console.log(emp1 instanceof Object); // true
```
-## Question 38. Describe Object-Based inheritance in JavaScript.
+Answer
-The ECMAScript 5 **Object.create()** method is the easiest way for one object to inherit from another.
+The ECMAScript 5 **Object.create()** method is the easiest way for one object to inherit from another, without invoking a constructor function.
-**For Instance:**
+**For instance:**
```javascript
var employee = {
@@ -1441,9 +1545,9 @@ var emp1 = Object.create(employee);
console.log(emp1.displayName()); // output "Nishant"
```
-Above example create a new object `emp1` that inherits from `employee`. Here the inheritance occur as `emp1`'s prototype is set to `employee`. After this emp1 is able to access the same properties and method on employee until new properties or method with the same name are defined.
+In the example above, we create a new object `emp1` that inherits from `employee`. In other words `emp1`'s prototype is set to `employee`. After this emp1 is able to access the same properties and method on employee until new properties or method with the same name are defined.
-**For Instance:** Defining `displayName()` method on `emp1` will not automatically override the employee `displayName`.
+**For instance:** Defining `displayName()` method on `emp1` will not automatically override the employee `displayName`.
```javascript
emp1.displayName = function() {
@@ -1456,7 +1560,7 @@ emp1.displayName();//xyz-Anonymous
In addition to this **`Object.create(`)** method also allows to specify a second argument which is an object containing additional properties and methods to add to the new object.
-**For Example**
+**For example**
```javascript
var emp1 = Object.create(employee, {
@@ -1468,13 +1572,15 @@ var emp1 = Object.create(employee, {
emp1.displayName(); // "John"
employee.displayName(); // "Nishant"
```
-In above example, `emp1` is created with it's own value for name, so calling **displayName()** method display `"John"` instead of `"Nishant"`.
+In the example above, `emp1` is created with it's own value for name, so calling **displayName()** method will display `"John"` instead of `"Nishant"`.
->Object created in this manner give you full control over newly created object. You are free to add, remove any properties and method you want.
+Object created in this manner give you full control over newly created object. You are free to add, remove any properties and method you want.
-## Question 39. Describe Type-Based inheritance in JavaScript.
+Answer
Let say we have `Person` class which has name, age, salary properties and **incrementSalary()** method.
@@ -1499,7 +1605,7 @@ function Employee(company){
//Prototypal Inheritance
Employee.prototype = new Person("Nishant", 24,5000);
```
-In above example, **Employee** type inherits from **Person**, which is called super types. It does so by assigning a new instance of Person to Employee prototype. After that, every instance of Employee inherits it's properties and methods from Person.
+In the example above, **Employee** type inherits from **Person**. It does so by assigning a new instance of `Person` to `Employee` prototype. After that, every instance of `Employee` inherits its properties and methods from `Person`.
```javascript
//Prototypal Inheritance
@@ -1533,9 +1639,13 @@ console.log(name in obj); // true
```
Type-based inheritance is best used with developer defined constructor function rather than natively in JavaScript. In addition to this also allows flexibility in how we create similar type of object.
+Answer
+
+ ECMAScript 5 introduce several methods to prevent modification of object which lock down object to ensure that no one, accidentally or otherwise, change functionality of Object.
There are three levels of preventing modification:
@@ -1543,7 +1653,7 @@ There are three levels of preventing modification:
No new properties or methods can be added to the object, but one can change the existing properties and method.
-For Example:
+For example:
```javascript
var employee = {
@@ -1561,7 +1671,7 @@ employee.age = 24; // fails silently unless it's inside the strict mode
```
**2: Seal :**
->It is same as prevent extension, in addition to this also prevent existing properties and methods from being deleted.
+It is same as prevent extension, in addition to this also prevent existing properties and methods from being deleted.
To seal an object, we use **Object.seal()** method. you can check whether an object is sealed or not using **Object.isSealed();**
@@ -1586,7 +1696,7 @@ when an object is sealed, its existing properties and methods can't be removed.
**3: Freeze :**
->Same as seal, In addition to this prevent existing properties methods from being modified (All properties and methods are read only).
+Same as seal, In addition to this prevent existing properties methods from being modified (All properties and methods are read only).
To freeze an object, use Object.freeze() method. We can also determine whether an object is frozen using Object.isFrozen();
@@ -1617,7 +1727,7 @@ Frozen objects are considered both non-extensible and sealed.
If you are decided to prevent modification, sealed, freeze the object then use in strict mode so that you can catch the error.
-For Example:
+For example:
```javascript
"use strict";
@@ -1643,8 +1753,12 @@ delete employee.name; // fails silently unless it's in strict mode
```
-## Question 44. Write a log function which will add prefix `(your message)` to every message you log using console.log ?
-> For example, If you log `console.log("Some message")` then output should be **(your message) Some message**
+Answer
Logging error message or some informative message is always required when you dealing with client side JavaScript using console.log method. Some time you want to add some prefix to identify message generated log from your application hence you would like to prefix your app name in every console.log.
@@ -1664,11 +1778,13 @@ function appLog() {
console.log.apply(console, args);
}
-console.log(appLog("Some error message"));
+appLog("Some error message");
//output of above console: 'your app name Some error message'
```
-## Question 45 . Write a function which will test string as a literal and as an object ?
+Answer
+
+ We can use typeof operator to test string literal and instanceof operator to test String object.
```javascript
function isString(str) {
@@ -1690,9 +1809,13 @@ For example: We can create string using string literal and using String construc
console.log(isString(ltrlStr)); // true
console.log(isString(objStr)); // true
```
-## Question 46 . What is typical use case for anonymous function in JavaScript ?
+Answer
-> Anonymous functions basically used in following scenario.
+ Anonymous functions basically used in following scenario.
1. No name is needed if function is only used in one place, then there is no need to add a name to function.
@@ -1742,9 +1865,9 @@ For example: We can create string using string literal and using String construc
alert("Hi I am anonymous callback function");
});
```
-The best way to take decision for using anonymous function is to asked.
+The best way to make a decision for using anonymous function is to ask the following question:
-> Will the function which I am going to define will use anywhere else.
+ Will the function which I am going to define, be used anywhere else?
If your answer is yes then go and create named function rather anonymous function.
@@ -1753,9 +1876,13 @@ If your answer is yes then go and create named function rather anonymous functio
1. It can reduce a bit of code, particularly in recursive function and in callback function.
2. Avoid needless global namespace pollutions.
-## Question 47 . How to set a default parameter value ?
+Answer
+
+ If you are coming from python/c# you might be using default value for function parameter incase value(formal parameter) has not been passed. For instance :
```python
// Define sentEmail function
@@ -1768,7 +1895,7 @@ def sentEmail(configuration, provider = 'Gmail'):
There are a lot of ways by which you can achieve this in pre ES2015.
-Let's understand below code by which we achieved setting default parameter value.
+Let's understand the code below by which we achieved setting default parameter value.
**Method 1: Setting default parameter value**
@@ -1812,8 +1939,31 @@ sentEmail({
}, 'Yahoo Mail');
```
-## Question 48. Write code for merge two JavaScript Object dynamically.
-> Let say you have two object
+**Method 3: Setting default parameter value in ES6**
+```javascript
+function sendEmail(configuration, provider = "Gmail") {
+ // Set default value if user has not passed value for provider
+
+ // Value of provider can be accessed directly
+ console.log(`Provider: ${provider}`);
+}
+
+// In this call we are not passing provider parameter value
+sentEmail({
+ from: 'xyz@gmail.com',
+ subject: 'Test Email'
+});
+// Here we are passing Yahoo Mail as a provider value
+sentEmail({
+ from: 'xyz@gmail.com',
+ subject: 'Test Email'
+}, 'Yahoo Mail');
+```
+
+Answer
+
```javascript
merge(person , address);
/* Now person should have 5 properties
name , age , addressLine1 , addressLine2 , city */
```
-**Method 1: Using ES6, Object assign method**
+**Method 1: Using ES6, Object.assign method**
```javascript
const merge = (toObj, fromObj) => Object.assign(toObj, fromObj);
```
-**Method 2: Without using in-built function**
+**Method 2: Without using built-in function**
```javascript
function merge(toObj, fromObj) {
@@ -1859,9 +2011,13 @@ function merge(toObj, fromObj) {
}
}
```
-## Question 49. What is non-enumerable property in JavaScript and how can create ?
+Answer
+
+Object can have properties that don't show up when you iterate through object using for...in loop or using Object.keys() to get an array of property names. This properties is know as non-enumerable properties.
Let say we have following object
@@ -1893,22 +2049,25 @@ Object.defineProperty(person, 'phoneNo',{
Object.keys(person); // ['name', 'salary', 'country']
```
-In above example `phoneNo` property didn't show up because we made it non-enumerable by setting **enumerable:false**
+In the example above `phoneNo` property didn't show up because we made it non-enumerable by setting **enumerable:false**
+
+**Bonus**
Now let's try to change value of `phoneNo`
```javascript
person.phoneNo = '7777777777';
```
-Changing non-enumerable property value will return error in `strict mode`. In non-strict mode it won't through any error but it won't change the value of phoneNo.
-**Bonus**
+**Object.defineProperty()** also lets you create read-only properties as we saw above, we are not able to modify phoneNo value of a person object. This is because descriptor has **writable** property, which is `false` by default. Changing non-writable property value will return error in strict mode. In non-strict mode it won't through any error but it won't change the value of phoneNo.
-**Object.defineProperty()** is also let you create read-only properties as we saw above, we are not able to modify phoneNo value of a person object.
+Answer
+
+ Function binding falls in advance JavaScript category and this is very popular technique to use in conjunction with event handler and callback function to preserve code execution context while passing function as a parameter.
Let's consider the following example:
@@ -1946,9 +2105,292 @@ btn.addEventListener('click', clickHandler.handleClick.bind(clickHandler));
`bind` method is available to all the function similar to call and apply method which take argument value of `this`.
+Answer
+
+- Part I Callbackhell.
+- Calling one callback function inside another and so on is callbackhell.
+- First we are defining three functions addTen, subFive and mulTwo.
+- These three functions while called with a number, will return a callback.
+- The callback function will return either result or error.
+
+```js
+const addTen = (num, callback) =>
+ {return callback(num+10, false)}
+```
+
+```js
+const subFive = (num, callback) =>
+ {return callback(num-5, false)}
+```
+
+```js
+const mulTwo = (num, callback) =>
+ {return callback(num*2, false)}
+```
+
+- Now lets call these one by one in nested way.
+- The result of previous will serve as input for next callback.
+
+```js
+const ans = addTen(5, (addRes, addErr) => { // addRess = 15
+ if(!addErr)
+ {
+ return subFive(addRes , (subRes, subErr) => { //subRes = 10
+ if(!subErr){
+ return mulTwo(subRes, (mulRes, mulErr) => {
+ if(!mulErr)
+ {
+ return mulRes; //20
+ }
+ })
+ }
+ })
+ }
+ })
+console.log(ans); // 20
+```
+
+- Part II Promise.
+- Promise has two parameters resolve and reject.
+- Rewrting those three function definations as well, without a callback.
+
+```js
+const addTen = (num) => {return num+10}
+```
+
+```js
+const subFive = (num) => {return num-5}
+```
+
+```js
+const mulTwo = (num) => {return num*2}
+```
+
+- Creating a promise.
+
+```js
+const promise = new Promise((resolve, reject) => {
+ if(true)
+ resolve(5)
+ else
+ reject("Something went wrong ")
+})
+```
+
+- Calling those three functions one by one.
+- "then" will keep on returning the result and if any error "catch" will catch it.
+
+```js
+promise.then(addTen).then(subFive).then(mulTwo).then((ans)=>{
+console.log(ans)
+}).catch((err)=>{console.log(err)});
+```
+
+- Part III Async / Await.
+- It actually uses promise internally.
+
+```js
+const addTen = ( num ) => {
+ return new Promise( ( resolve, reject ) => {
+ resolve( num+10)
+ } )
+}
+```
+
+```js
+const subFive = ( num ) => {
+ return new Promise( ( resolve, reject ) => {
+ resolve( num-5)
+ } )
+}
+```
+
+```js
+const mulTwo = ( num ) => {
+ return new Promise( ( resolve, reject ) => {
+ resolve( num*2)
+ } )
+}
+```
+
+- Put Async keyword before function name and Await before the statments inside the function
+- Await will make the later code wait until the result of that statement is returned.
+- Always put this inside a try/catch block.
+
+```js
+const ans = async (num) => {
+ try {
+ var addRes = await addTen(num);
+ var subRes = await subFive(addRes);
+ var mulRes = await mulTwo(subRes);
+ console.log(mulRes)
+ } catch (err) {
+ console.log(err)
+ }
+}
+ans(5)
+```
+
+Answer
+
+The output will be `'hi there'` because we're dealing with strings here. Strings are
+passed by value, that is, copied.
+
+Answer
+
+The output will be `{prop1: 90}` because we're dealing with objects here. Objects are
+passed by reference, that is, `objA` and `objB` point to the same object in memory.
+
+Answer
+
+The output will be `{prop1: 42}`.
+
+When we assign `objA` to `objB`, the `objB` variable will point
+to the same object as the `objB` variable.
+
+However, when we reassign `objB` to an empty object, we simply change where `objB` variable references to.
+This doesn't affect where `objA` variable references to.
+
+Answer
+
+The output will be `[42,1,2,3,4,5]`.
+
+Arrays are object in JavaScript and they are passed and assigned by reference. This is why
+both `arrA` and `arrB` point to the same array `[0,1,2,3,4,5]`. That's why changing the first
+element of the `arrB` will also modify `arrA`: it's the same array in the memory.
+
+Answer
+
+The output will be `[0,1,2,3,4,5]`.
+
+The `slice` function copies all the elements of the array returning the new array. That's why
+`arrA` and `arrB` reference two completely different arrays.
+
+Answer
+
+The output will be `[{prop1: 42}, {someProp: "also value of array A!"}, 3,4,5]`.
+
+Arrays are object in JS, so both varaibles arrA and arrB point to the same array. Changing
+`arrB[0]` is the same as changing `arrA[0]`
+
+Answer
+
+The output will be `[{prop1: 42}, {someProp: "also value of array A!"}, 3,4,5]`.
+
+The `slice` function copies all the elements of the array returning the new array. However,
+it doesn't do deep copying. Instead it does shallow copying. You can imagine slice implemented like this:
+
+ ```javascript
+function slice(arr) {
+ var result = [];
+ for (i = 0; i< arr.length; i++) {
+ result.push(arr[i]);
+ }
+ return result;
+}
+```
+
+Look at the line with `result.push(arr[i])`. If `arr[i]` happens to be a number or string,
+it will be passed by value, in other words, copied. If `arr[i]` is an object, it will be passed by reference.
+
+In case of our array `arr[0]` is an object `{prop1: "value of array A!!"}`. Only the reference
+to this object will be copied. This effectively means that arrays arrA and arrB share first
+two elements.
+
+This is why changing the property of `arrB[0]` in `arrB` will also change the `arrA[0]`.
+
+Answer
-### 2. What would be the output of following code?
+ 4) ReferenceError: employeeId is not defined
+
+Answer
+
+ 2) undefined
+
+Answer
+
+ 2) undefined
+
+Answer
+
+ 2) undefined
+
+Answer
+
+ 1) undefined
+
+Answer
+
+ 2) '123bcd'
+
+Answer
+
+ 3) 'abc123'
+
+Answer
+
+ 2) 'function'
+
+Answer
+
+ 1) undefined
+
+Answer
-## Object
+ 3) function function
+
+Answer
+
+ 3) ["name", "salary", "country", "phoneNo"]
+
+Answer
+
+ 4) ["name", "salary", "country"]
+
+Answer
+
+ 2) false false
+
+Answer
+
+ 2) false false
+
+Answer
+
+ 2) false false
+
+Answer
+
+ 2) false false
+
+Answer
+
+ 4) true true
+
+Answer
+
+ 3) true true true true
+
+Answer
+
+ 2) bar bar
+
+Answer
+
+ 3) foo foo
+
+Answer
-## Array
+ 2) undefined undefined
+
+Answer
+
+ 3) ["100"] 1
+
+Answer
+
+ 1) [] [] [Array[5]] 1
+
+Answer
+
+ 1) 11
+
+Answer
+
+ 3) 6
+
+Answer
+
+ 1) [ 'dog', 'rat', 'goat', 'cow', 'horse', 'cat' ]
+
+Answer
+
+ 1) 1 -1 -1 4
+
+Answer
+
+ 2) 1 6 -1
+
+Answer
+
+ 3) [ 2, 4, 8, 12, 16 ] true
+
+Answer
+
+ 1) [ 2, '12', true ]
[ 2, '12', true ]
[ 2, '12', true ]
[ 2, '12', true ]
+Answer
+
+ 1) [ 'bar', 'john', 'ritz' ]
[ 'bar', 'john' ]
[ 'foo', 'bar', 'john', 'ritz' ]
[]
[ 'foo', 'bar', 'john', 'ritz' ]
+Answer
+
+ 1. [ 'bar', 'john' ] [] [ 'foo' ]
+
+Answer
+
+ 3. [ 15, 16, 2, 23, 42, 8 ]
-## Function:
+Answer
+
+ 1) funcA Window {...}
+ innerFunc1 Window {...}
+ innerFunA11 Window {...}
+
+Answer
+
+ 4) undefined true
-### 3. What would the output of following code ?
+Answer
+
+ 1) Hello
+
+Answer
+
+ 3) undefined
-### 5. What would the output of following code ?
+Answer
-### 6. What would the output of following code ?
+ 2) 'Hello'
+
+Answer
+
+ 3) undefined
-### 7. What would the output of following code ?
+Answer
+
+ 2) 'Hi John'
-### 8. What would the output of following code ?
+Answer
-### 9. What would the output of following code ?
+ 2) 'Hi John'
+
+Answer
+
+ a) 2 2 2
+
+Answer
+
+ 2) 0 2 4
+
+Answer
+
+ 1) John Person
+
+Answer
-### 2. What would the output of following code ?
+ 3) 12345678 undefined
+
+Answer
+
+ 4) undefined
-### 3. What would the output of following code ?
+Answer
-### 4. What would the output of following code ?
+ 2) bq1uy 1BJKSJ bq1uy
+
+Answer
+
+ 1) foo123 aq123
+
+Answer
-### 2. What would the output of following code ?
+ 4) [ 'W', 'o', 'r', 'l', 'd' ]
+
+Answer
-### 3. What would the output of following code ?
+ 1) Total amount left in account: 5600 Total amount left in account: 5300
+
+Answer
+
+ 1) 5600 5300 5100
-### 4. What would the output of following code ?
+Answer
+
+ 2) 3600 3300 3100
-### 5. What would the output of following code ?
+Answer
+
+ 1) Hello John
+
+Answer
+
+ 1) John
-### 2. What would the output of following code ?
+Answer
+
+ 1) [ 2, 8, 15, 16, 23, 42 ]
[ 2, 8, 15, 16, 23, 42 ]
[ 2, 8, 15, 16, 23, 42 ]
+
+Answer
+
+ 4) Uncaught TypeError: Cannot read property 'fullName' of undefined
-### 2. What would the output of following code ?
+Answer
-### 3. What would the output of following code ?
+ 1) 5
+
+Answer
+
+ 2) undefined
-### 4**. What would the output of following code ?
+Answer
+
+ 1) 6, 10
-### 5**. What would the output of following code ?
+Answer
-### 6. What would the output of following code ?
+ 1) 6, 10
+
+Answer
+
+ 1) 720
+
+Answer
+
+ 2) Tony undefined
+
+Explaination: **getName1()** function works fine because it's being called from ***personObj***, so it has access to *this.name* property. But when while calling **getnName2** which is defined under *Object.prototype* doesn't have any proprty named *this.name*. There should be *name* property under prototype. Following is the code:
+
+```javascript
+function getName1(){
+ console.log(this.name);
+}
+
+Object.prototype.getName2 = () =>{
+ console.log(Object.getPrototypeOf(this).name);
+}
+
+let personObj = {
+ name:"Tony",
+ print:getName1
+}
+
+personObj.print();
+Object.prototype.name="Steve";
+personObj.getName2();
+```
+
+Answer
+The above program will print Hello infinitely. Since, Javascript is a single threaded language the actual execution happens only on the main thread. So, setTimeout will wailt for 2000 milliseconds on a seperate thread as while loop has occupied the main thread. The exit condition for the loop is to set the variable a as fasle. But as the loop continously running on the main thread , it a cannot be set false.
+Answer
+The above program will print 0 to 9 sequentially.
+