From 8a7f57d8d4c5d4b547f4bcf0b46f8e34a2eea4d0 Mon Sep 17 00:00:00 2001 From: vishnu sandhireddy Date: Sat, 10 Feb 2018 23:03:53 +0530 Subject: [PATCH 01/11] Add frontend questions --- Web-Development/Front-end.md | 2 ++ Web-Development/NativeJavascript/answers.md | 19 +++++++++++++++ Web-Development/NativeJavascript/questions.md | 24 +++++++++++++++++++ 3 files changed, 45 insertions(+) create mode 100644 Web-Development/NativeJavascript/answers.md create mode 100644 Web-Development/NativeJavascript/questions.md diff --git a/Web-Development/Front-end.md b/Web-Development/Front-end.md index e69de29..ef3539e 100644 --- a/Web-Development/Front-end.md +++ b/Web-Development/Front-end.md @@ -0,0 +1,2 @@ +1. [ Native Javascript Questions ](/NativeJavascript/questions) +2. [ Native Javascript Answers ](/NativeJavascript/answers) \ No newline at end of file diff --git a/Web-Development/NativeJavascript/answers.md b/Web-Development/NativeJavascript/answers.md new file mode 100644 index 0000000..0457ef2 --- /dev/null +++ b/Web-Development/NativeJavascript/answers.md @@ -0,0 +1,19 @@ +# Answers for the Front end questions Native script +1. +``` +function sum(){ + let + sumOfArgs=0, + i=0; + for(;i 3 + sum(1,2,.3) => 3.3 + + ``` +2. Explain the prototypal inheirtance ? +3. Explain the closures ? +4. Difference between `var` ,`let` & `const` ? +5. What would be the output of following code ? + ``` + function a(){ + console.log(b); + } + var b=6; + + ``` +6. How the javascript engine and Browser handles asynchronous calls ? +7. Difference between callbacks and promises ? +8. Which one your prefer among React and Angular ? +9. How do you simiulate low speed networks ? +10. Why the `use strict` is used ? From 7c017677abe8aede82c0866ecafdd13baa5799fa Mon Sep 17 00:00:00 2001 From: vishnu sandhireddy Date: Mon, 12 Feb 2018 08:44:21 +0530 Subject: [PATCH 02/11] Answers --- Web-Development/NativeJavascript/answers.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/Web-Development/NativeJavascript/answers.md b/Web-Development/NativeJavascript/answers.md index 0457ef2..1b85abe 100644 --- a/Web-Development/NativeJavascript/answers.md +++ b/Web-Development/NativeJavascript/answers.md @@ -15,5 +15,8 @@ function sum(){ 3. Closures in javascript is the block of code and the variables used in it are binded to the block though the variables are defined in its parent object. 4. `var` variables are hoisted prior to the variables are executed but `const` and `let` or not. And simple properties defined by `const` cannot be changed. 5. b will be `undefined` as only the variables are hoisted but not the assignment. -6. We know javascript is multi threaded . Browser will have javascirpt engine thread and network thread , so when network request is completed from network thread which is running parallely to javascript engine thread and the javascript engine will execute the network request callback once it finshes its request. -7. \ No newline at end of file +6. We know javascript is multi threaded . Browser will have javascirpt engine thread and network thread , so when network request is completed from network thread which is running parallely to javascript engine thread and the javascript engine will execute the network request callback once it finshes its request. +7. Promises make syntax easier and are best way to handle asynchronous functions. We can do that with callback but when there are chain of asynchronous functions it is difficult to handle there. +8. React more developer friendly and Angular build on solid software principles like MVC and dependency Injection . +9. Browser are provding options to throttle networks so we can customize speed of network. +10. `use strict` helps the devlopers to write javascript in a secured way and throw errors if they are any undeclared vairables . \ No newline at end of file From b01ae360b34e61a8525fe931887ef863f8c86940 Mon Sep 17 00:00:00 2001 From: vishnu sandhireddy Date: Mon, 12 Feb 2018 08:49:18 +0530 Subject: [PATCH 03/11] Fix links --- Web-Development/Front-end.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Web-Development/Front-end.md b/Web-Development/Front-end.md index ef3539e..c7206f1 100644 --- a/Web-Development/Front-end.md +++ b/Web-Development/Front-end.md @@ -1,2 +1,2 @@ -1. [ Native Javascript Questions ](/NativeJavascript/questions) -2. [ Native Javascript Answers ](/NativeJavascript/answers) \ No newline at end of file +1. [ Native Javascript Questions ](/NativeJavascript/questions.md) +2. [ Native Javascript Answers ](/NativeJavascript/answers.md) \ No newline at end of file From 1c4b173d425912ac92fa5bbfabcd2b0a33199967 Mon Sep 17 00:00:00 2001 From: vishnu sandhireddy Date: Mon, 12 Feb 2018 08:51:12 +0530 Subject: [PATCH 04/11] Fixing links --- Web-Development/Front-end.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Web-Development/Front-end.md b/Web-Development/Front-end.md index c7206f1..5c6fceb 100644 --- a/Web-Development/Front-end.md +++ b/Web-Development/Front-end.md @@ -1,2 +1,2 @@ -1. [ Native Javascript Questions ](/NativeJavascript/questions.md) -2. [ Native Javascript Answers ](/NativeJavascript/answers.md) \ No newline at end of file +1. [ Native Javascript Questions ](/Web-Development/NativeJavascript/questions.md) +2. [ Native Javascript Answers ](/Web-Development/NativeJavascript/answers.md) \ No newline at end of file From 92157e555ba6c7b3a4b5de96cbe9dceee6b08d80 Mon Sep 17 00:00:00 2001 From: vishnu sandhireddy Date: Tue, 13 Feb 2018 05:52:05 +0530 Subject: [PATCH 05/11] fix typos and grammatical mistakes --- Web-Development/NativeJavascript/answers.md | 16 ++++++++-------- Web-Development/NativeJavascript/questions.md | 16 ++++++++-------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/Web-Development/NativeJavascript/answers.md b/Web-Development/NativeJavascript/answers.md index 1b85abe..2f8c36f 100644 --- a/Web-Development/NativeJavascript/answers.md +++ b/Web-Development/NativeJavascript/answers.md @@ -1,4 +1,4 @@ -# Answers for the Front end questions Native script +# Answers to the frontend questions Native script 1. ``` function sum(){ @@ -11,12 +11,12 @@ function sum(){ return sumOfArgs } ``` -2. Inheritance works differntly in javascript not like in other languages , here we have parent object set in the prototype properties of the object which it refers if it does not find the current object. It will be a chain of references to parent objects in case of multiple inheritance so it is called prototype chain. -3. Closures in javascript is the block of code and the variables used in it are binded to the block though the variables are defined in its parent object. +2. Inheritance works differently in javascript not like in other languages, here we have parent object set in the prototype properties of the object which it refers if it does not find the current object. It will be a chain of references to parent objects in case of multiple inheritances so it is called prototype chain. +3. Closures in javascript are the block of code and the variables used in it are bound to the block through the variables are defined in its parent object. 4. `var` variables are hoisted prior to the variables are executed but `const` and `let` or not. And simple properties defined by `const` cannot be changed. 5. b will be `undefined` as only the variables are hoisted but not the assignment. -6. We know javascript is multi threaded . Browser will have javascirpt engine thread and network thread , so when network request is completed from network thread which is running parallely to javascript engine thread and the javascript engine will execute the network request callback once it finshes its request. -7. Promises make syntax easier and are best way to handle asynchronous functions. We can do that with callback but when there are chain of asynchronous functions it is difficult to handle there. -8. React more developer friendly and Angular build on solid software principles like MVC and dependency Injection . -9. Browser are provding options to throttle networks so we can customize speed of network. -10. `use strict` helps the devlopers to write javascript in a secured way and throw errors if they are any undeclared vairables . \ No newline at end of file +6. We know javascript is single threaded but the browser is not. The browser will have javascript engine thread and network thread, so when a network request is completed from network thread which is running parallelly to javascript engine thread and the javascript engine will execute the network request callback once it finishes its request. +7. Promises make syntax easier and are the best way to handle asynchronous functions. We can do that with callback but when there is a chain of asynchronous functions it is difficult to handle there. +8. React more developer friendly and Angular build on solid software principles like MVC and dependency injection. +9. Browsers are providing options to throttle networks so we can customize the speed of a network. +10. `use strict` helps the developers to write javascript in a secured way and throw errors if they are any undeclared variables. \ No newline at end of file diff --git a/Web-Development/NativeJavascript/questions.md b/Web-Development/NativeJavascript/questions.md index 59521b6..8cee7fb 100644 --- a/Web-Development/NativeJavascript/questions.md +++ b/Web-Development/NativeJavascript/questions.md @@ -6,10 +6,10 @@ sum(1,2,.3) => 3.3 ``` -2. Explain the prototypal inheirtance ? -3. Explain the closures ? +2. Explain the prototypal inheritance? +3. Explain the closures? 4. Difference between `var` ,`let` & `const` ? -5. What would be the output of following code ? +5. What would be the output of the following code? ``` function a(){ console.log(b); @@ -17,8 +17,8 @@ var b=6; ``` -6. How the javascript engine and Browser handles asynchronous calls ? -7. Difference between callbacks and promises ? -8. Which one your prefer among React and Angular ? -9. How do you simiulate low speed networks ? -10. Why the `use strict` is used ? +6. How the javascript engine and Browser handles asynchronous calls +7. Difference between callbacks and promises? +8. Which one do you prefer among React and Angular? +9. How do you simulate the low speed networks? +10. Why the `use strict` is used? From 550c68cbe8f751387235776f9e3965284cc9c312 Mon Sep 17 00:00:00 2001 From: vishnu sandhireddy Date: Thu, 15 Feb 2018 09:00:12 +0530 Subject: [PATCH 06/11] Review comments --- Web-Development/NativeJavascript/answers.md | 32 +++++++++++++++++-- Web-Development/NativeJavascript/questions.md | 6 ++-- 2 files changed, 32 insertions(+), 6 deletions(-) diff --git a/Web-Development/NativeJavascript/answers.md b/Web-Development/NativeJavascript/answers.md index 2f8c36f..edc6786 100644 --- a/Web-Development/NativeJavascript/answers.md +++ b/Web-Development/NativeJavascript/answers.md @@ -1,5 +1,6 @@ # Answers to the frontend questions Native script 1. +Without ES6 ``` function sum(){ let @@ -11,9 +12,34 @@ function sum(){ return sumOfArgs } ``` -2. Inheritance works differently in javascript not like in other languages, here we have parent object set in the prototype properties of the object which it refers if it does not find the current object. It will be a chain of references to parent objects in case of multiple inheritances so it is called prototype chain. -3. Closures in javascript are the block of code and the variables used in it are bound to the block through the variables are defined in its parent object. -4. `var` variables are hoisted prior to the variables are executed but `const` and `let` or not. And simple properties defined by `const` cannot be changed. +OR +With ES 6 + +``` +function sum(...args) { + return args.reduce((a, b) => a + b); +} +``` + +2. Prototypes are the mechanism by which javascript gets the inheritance. In other Object Oriented languages inheritance is implmented by copying the properties of the parent to children but in javascirpt a link is formed between parent to children with a property called __proto__ . + +Each object in javascript has a reference to the proto object by which it can access properties and objects from its parent object. So if we change the parent property the from child we are actually changing parent itself. + +3. Closures in javascript is the phenomona in javascript where the javascript engine will bind the variables declared outside the function and used inside the function like below. Here name is +``` +function memberAge(name){ + + return function(age){ + console.log(name+ " age is "+age); + } + +} +var printAge = memberAge("Raj"); + +printAge(30); // prints Raj age is 30 +``` +Variables inside the function has access to the memory of outer declared variables though the outside function or context is no longer running. +4. `let` and `const` are scoped to the a block of code and same is not in the case of `var` . 5. b will be `undefined` as only the variables are hoisted but not the assignment. 6. We know javascript is single threaded but the browser is not. The browser will have javascript engine thread and network thread, so when a network request is completed from network thread which is running parallelly to javascript engine thread and the javascript engine will execute the network request callback once it finishes its request. 7. Promises make syntax easier and are the best way to handle asynchronous functions. We can do that with callback but when there is a chain of asynchronous functions it is difficult to handle there. diff --git a/Web-Development/NativeJavascript/questions.md b/Web-Development/NativeJavascript/questions.md index 8cee7fb..b3f18ff 100644 --- a/Web-Development/NativeJavascript/questions.md +++ b/Web-Development/NativeJavascript/questions.md @@ -6,7 +6,7 @@ sum(1,2,.3) => 3.3 ``` -2. Explain the prototypal inheritance? +2. Explain the inheritance in javascript? 3. Explain the closures? 4. Difference between `var` ,`let` & `const` ? 5. What would be the output of the following code? @@ -15,9 +15,9 @@ console.log(b); } var b=6; - + a(); ``` -6. How the javascript engine and Browser handles asynchronous calls +6. How the javascript engine and Browser handles asynchronous calls? 7. Difference between callbacks and promises? 8. Which one do you prefer among React and Angular? 9. How do you simulate the low speed networks? From ef354b0c0a49d77d1cf52b2cb436b740e16d820f Mon Sep 17 00:00:00 2001 From: vishnu sandhireddy Date: Sun, 18 Feb 2018 18:36:40 +0530 Subject: [PATCH 07/11] Review comments incorporated --- Web-Development/NativeJavascript/answers.md | 134 ++++++++++++++++-- Web-Development/NativeJavascript/questions.md | 2 +- 2 files changed, 125 insertions(+), 11 deletions(-) diff --git a/Web-Development/NativeJavascript/answers.md b/Web-Development/NativeJavascript/answers.md index edc6786..a3e0eab 100644 --- a/Web-Development/NativeJavascript/answers.md +++ b/Web-Development/NativeJavascript/answers.md @@ -1,6 +1,6 @@ # Answers to the frontend questions Native script 1. -Without ES6 +Before ES6 ``` function sum(){ let @@ -21,11 +21,11 @@ function sum(...args) { } ``` -2. Prototypes are the mechanism by which javascript gets the inheritance. In other Object Oriented languages inheritance is implmented by copying the properties of the parent to children but in javascirpt a link is formed between parent to children with a property called __proto__ . +2. Prototypes are the mechanism by which javascript gets the inheritance. In other Object Oriented languages, inheritance is implemented by copying the properties of the parent to children but in javascript a link is formed between parent to children with a property called __proto__ . -Each object in javascript has a reference to the proto object by which it can access properties and objects from its parent object. So if we change the parent property the from child we are actually changing parent itself. +Each object in javascript has a reference to the proto object by which it can access properties and objects from its parent object. So if we change the parent property the from the child we are actually changing parent itself. -3. Closures in javascript is the phenomona in javascript where the javascript engine will bind the variables declared outside the function and used inside the function like below. Here name is +3. Closure in javascript is the phenomenon in javascript where the javascript engine will bind the variables declared outside the function and used inside the function like below. Here `name` is ``` function memberAge(name){ @@ -38,11 +38,125 @@ var printAge = memberAge("Raj"); printAge(30); // prints Raj age is 30 ``` -Variables inside the function has access to the memory of outer declared variables though the outside function or context is no longer running. -4. `let` and `const` are scoped to the a block of code and same is not in the case of `var` . +Variables inside the function have access to the memory of outer declared variables although the outside function or context is no longer running. + +4. `let` and `const` are scoped to a block of code and same is not in the case of `var`. +``` +{ + var x=1; // assigend to global scope + let y=2; // block scoped + const z=3: + y="3"; +}; + +console.log(x); // prints 1 +console.log(y); // Reference error +``` +`const` is used for binding a varaible name for example x to value and see that no rebinding happens. + +``` +const x = "6"; +x={y:"1"}; // Type error + +``` +But we can assign a value to x.y but not the binding of variable x to the object. +``` +const x={}; +x.y=7; +console.log(x.y) + +``` 5. b will be `undefined` as only the variables are hoisted but not the assignment. -6. We know javascript is single threaded but the browser is not. The browser will have javascript engine thread and network thread, so when a network request is completed from network thread which is running parallelly to javascript engine thread and the javascript engine will execute the network request callback once it finishes its request. -7. Promises make syntax easier and are the best way to handle asynchronous functions. We can do that with callback but when there is a chain of asynchronous functions it is difficult to handle there. +6. Javascript Runtime has a message queue, an event loop and a call stack which will help to execute its asynchronous calls. + +The **call stack** is where the javascript runtime stack up of all its execution context if there are nested calls. + +``` + +function foo(b) { + var a = 10; + return a + b + 11; +} + +function bar(x) { + var y = 3; + return foo(x * y); +} + +console.log(bar(7)) // returns 42 + +``` +- Here when `bar` is called it will create two frames in the call stack. One for the current execution context and another one for `bar`. +- `bar` will call `foo` and pushed one more execution context into the call stack. +- When `foo` is finished its execution context gets popped out and the `bar` will be returned control. +- When `bar` is finished its execution context gets popped out the call stack and the current execution context continues till it finishes + +**Event loop** checks if call stack is empty and if anything appears in message queue . If there is any function appears in message queue and call stack is empty then the event loop pushes the oldest function from message queue to call stack where it gets executed. + +**Message queue** is where once the asynchronus calls are finished their call back functions are pushed to this queue. + +So though at any time only one thing running in javascript but event loop helps it to execute the asynchronous callbacks in message queue from call stack which got loaded into message queue once an asynchronous function is fixed. + +Useful links +https://www.youtube.com/watch?v=8aGhZQkoFbQ + + +7. Callback is the function which gets executed once the asynchronous callback finishes. +Promise is an object represents the completion and failure of asynchronous operation. + +When Promises are created it will have two functions as parameters `resolve` and `reject` .`resolve` is the function to be called when the asynchronous function is success and reject when it got failed. +A promise can success or fail only once. If promise is chained with callbacks using `then` and `catch` the correct callback is executed is based on the success(`resolve`) or failure (`reject`) of this promise respectively. + +Using `then` function we can return Promises and can be chainable. This will help us to create asynchronous functions depend on asynchronous function. + +``` +var prom=new Promise(function(resolve,reject){ + + setTimeout(function(){ + resolve("Hi"); + },1000) +}); +prom.then(function(response){ +return ( new Promise(function(resolve,reject){ + setTimeout(function(){ + resolve(response+ " John") + },1000) +})) + +}).then(function(response){ + console.log(response) // prints Hi John after 2000 seconds +}) + +``` +- Useful links +https://developers.google.com/web/fundamentals/primers/promises +https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises#Guarantees + + + 8. React more developer friendly and Angular build on solid software principles like MVC and dependency injection. -9. Browsers are providing options to throttle networks so we can customize the speed of a network. -10. `use strict` helps the developers to write javascript in a secured way and throw errors if they are any undeclared variables. \ No newline at end of file + +- Useful links +https://www.telerik.com/docs/default-source/whitepapers/telerik-com/choose-the-right-javascript-framework-for-your-next-web-application_whitepaper.pdf?download=true + +9. Browsers are providing options to customize network speed so we can test the slow network speeds. We can check in network tab in Chrome Dev tools. + +Useful links +https://www.telerik.com/docs/default-source/whitepapers/telerik-com/choose-the-right-javascript-framework-for-your-next-web-application_whitepaper.pdf?download=true + +10. `use strict` tells the javascript runtime to execute javascript code in strict mode and throw errors if they are any undeclared variables. + +For example +``` +`use strict' + x = "12" // throws error + +``` +``` + var y = "7"; +delete y // throws error + +``` + +useful links +https://www.w3schools.com/js/js_strict.asp \ No newline at end of file diff --git a/Web-Development/NativeJavascript/questions.md b/Web-Development/NativeJavascript/questions.md index b3f18ff..b8c2b6c 100644 --- a/Web-Development/NativeJavascript/questions.md +++ b/Web-Development/NativeJavascript/questions.md @@ -19,6 +19,6 @@ ``` 6. How the javascript engine and Browser handles asynchronous calls? 7. Difference between callbacks and promises? -8. Which one do you prefer among React and Angular? +8. What are the differences between React and Angular? 9. How do you simulate the low speed networks? 10. Why the `use strict` is used? From 7bb920fbcf3066f89e645718905edf28d71d4e2a Mon Sep 17 00:00:00 2001 From: vishnu sandhireddy Date: Sun, 18 Feb 2018 18:49:06 +0530 Subject: [PATCH 08/11] Adding indentation --- Web-Development/NativeJavascript/answers.md | 267 +++++++++++--------- 1 file changed, 146 insertions(+), 121 deletions(-) diff --git a/Web-Development/NativeJavascript/answers.md b/Web-Development/NativeJavascript/answers.md index a3e0eab..29751c5 100644 --- a/Web-Development/NativeJavascript/answers.md +++ b/Web-Development/NativeJavascript/answers.md @@ -1,162 +1,187 @@ # Answers to the frontend questions Native script -1. -Before ES6 -``` -function sum(){ - let - sumOfArgs=0, - i=0; - for(;i a + b); -} -``` - -2. Prototypes are the mechanism by which javascript gets the inheritance. In other Object Oriented languages, inheritance is implemented by copying the properties of the parent to children but in javascript a link is formed between parent to children with a property called __proto__ . - -Each object in javascript has a reference to the proto object by which it can access properties and objects from its parent object. So if we change the parent property the from the child we are actually changing parent itself. - -3. Closure in javascript is the phenomenon in javascript where the javascript engine will bind the variables declared outside the function and used inside the function like below. Here `name` is -``` -function memberAge(name){ +1. Write a function which can add all the arguments and return the value ? + ##Answer + Before ES6 + ``` + function sum(){ + let + sumOfArgs=0, + i=0; + for(;i a + b); } + ``` -} -var printAge = memberAge("Raj"); +2. Explain the inheritance in javascript? + ##Answer + Prototypes are the mechanism by which javascript gets the inheritance. In other Object Oriented languages, inheritance is implemented by copying the properties of the parent to children but in javascript a link is formed between parent to children with a property called `__proto__` . + Each object in javascript has a reference to the proto object by which it can access properties and objects from its parent object. So if we change the parent property the from the child we are actually changing parent itself. -printAge(30); // prints Raj age is 30 -``` -Variables inside the function have access to the memory of outer declared variables although the outside function or context is no longer running. -4. `let` and `const` are scoped to a block of code and same is not in the case of `var`. -``` -{ - var x=1; // assigend to global scope - let y=2; // block scoped - const z=3: - y="3"; -}; +3. Explain the closures? + ##Answer + Closure in javascript is the phenomenon in javascript where the javascript engine will bind the variables declared outside the function and used inside the function like below. Here `name` is + ``` + function memberAge(name){ -console.log(x); // prints 1 -console.log(y); // Reference error -``` -`const` is used for binding a varaible name for example x to value and see that no rebinding happens. + return function(age){ + console.log(name+ " age is "+age); + } -``` -const x = "6"; -x={y:"1"}; // Type error + } + var printAge = memberAge("Raj"); + + printAge(30); // prints Raj age is 30 + ``` + Variables inside the function have access to the memory of outer declared variables although the outside function or context is no longer running. + + +4. Difference between `var` ,`let` & `const` ? + ##Answer + `let` and `const` are scoped to a block of code and same is not in the case of `var`. + ``` + { + var x=1; // assigend to global scope + let y=2; // block scoped + const z=3: + y="3"; + }; + + console.log(x); // prints 1 + console.log(y); // Reference error + ``` + `const` is used for binding a varaible name for example x to value and see that no rebinding happens. + + ``` + const x = "6"; + x={y:"1"}; // Type error + + ``` + But we can assign a value to x.y but not the binding of variable x to the object. + ``` + const x={}; + x.y=7; + console.log(x.y) + + ``` + +5. What would be the output of the following code? + ``` + function a(){ + console.log(b); + } + var b=6; + a(); + ``` + ##Answer + b will be `undefined` as only the variables are hoisted but not the assignment. -``` -But we can assign a value to x.y but not the binding of variable x to the object. -``` -const x={}; -x.y=7; -console.log(x.y) -``` -5. b will be `undefined` as only the variables are hoisted but not the assignment. -6. Javascript Runtime has a message queue, an event loop and a call stack which will help to execute its asynchronous calls. +6. How the javascript engine and Browser handles asynchronous calls? + ##Answer + Javascript Runtime has a message queue, an event loop and a call stack which will help to execute its asynchronous calls. -The **call stack** is where the javascript runtime stack up of all its execution context if there are nested calls. + The **call stack** is where the javascript runtime stack up of all its execution context if there are nested calls. -``` + ``` -function foo(b) { - var a = 10; - return a + b + 11; -} + function foo(b) { + var a = 10; + return a + b + 11; + } -function bar(x) { - var y = 3; - return foo(x * y); -} + function bar(x) { + var y = 3; + return foo(x * y); + } -console.log(bar(7)) // returns 42 + console.log(bar(7)) // returns 42 -``` -- Here when `bar` is called it will create two frames in the call stack. One for the current execution context and another one for `bar`. -- `bar` will call `foo` and pushed one more execution context into the call stack. -- When `foo` is finished its execution context gets popped out and the `bar` will be returned control. -- When `bar` is finished its execution context gets popped out the call stack and the current execution context continues till it finishes + ``` + - Here when `bar` is called it will create two frames in the call stack. One for the current execution context and another one for `bar`. + - `bar` will call `foo` and pushed one more execution context into the call stack. + - When `foo` is finished its execution context gets popped out and the `bar` will be returned control. + - When `bar` is finished its execution context gets popped out the call stack and the current execution context continues till it finishes -**Event loop** checks if call stack is empty and if anything appears in message queue . If there is any function appears in message queue and call stack is empty then the event loop pushes the oldest function from message queue to call stack where it gets executed. + **Event loop** checks if call stack is empty and if anything appears in message queue . If there is any function appears in message queue and call stack is empty then the event loop pushes the oldest function from message queue to call stack where it gets executed. -**Message queue** is where once the asynchronus calls are finished their call back functions are pushed to this queue. + **Message queue** is where once the asynchronus calls are finished their call back functions are pushed to this queue. -So though at any time only one thing running in javascript but event loop helps it to execute the asynchronous callbacks in message queue from call stack which got loaded into message queue once an asynchronous function is fixed. + So though at any time only one thing running in javascript but event loop helps it to execute the asynchronous callbacks in message queue from call stack which got loaded into message queue once an asynchronous function is fixed. -Useful links -https://www.youtube.com/watch?v=8aGhZQkoFbQ + https://www.youtube.com/watch?v=8aGhZQkoFbQ -7. Callback is the function which gets executed once the asynchronous callback finishes. -Promise is an object represents the completion and failure of asynchronous operation. +7.Difference between callbacks and promises? + ##Answer + Callback is the function which gets executed once the asynchronous callback finishes. + Promise is an object represents the completion and failure of asynchronous operation. -When Promises are created it will have two functions as parameters `resolve` and `reject` .`resolve` is the function to be called when the asynchronous function is success and reject when it got failed. -A promise can success or fail only once. If promise is chained with callbacks using `then` and `catch` the correct callback is executed is based on the success(`resolve`) or failure (`reject`) of this promise respectively. + When Promises are created it will have two functions as parameters `resolve` and `reject` .`resolve` is the function to be called when the asynchronous function is success and reject when it got failed. + A promise can success or fail only once. If promise is chained with callbacks using `then` and `catch` the correct callback is executed is based on the success(`resolve`) or failure (`reject`) of this promise respectively. -Using `then` function we can return Promises and can be chainable. This will help us to create asynchronous functions depend on asynchronous function. + Using `then` function we can return Promises and can be chainable. This will help us to create asynchronous functions depend on asynchronous function. -``` -var prom=new Promise(function(resolve,reject){ + ``` + var prom=new Promise(function(resolve,reject){ - setTimeout(function(){ - resolve("Hi"); - },1000) -}); -prom.then(function(response){ -return ( new Promise(function(resolve,reject){ setTimeout(function(){ - resolve(response+ " John") + resolve("Hi"); },1000) -})) + }); + prom.then(function(response){ + return ( new Promise(function(resolve,reject){ + setTimeout(function(){ + resolve(response+ " John") + },1000) + })) + + }).then(function(response){ + console.log(response) // prints Hi John after 2000 seconds + }) -}).then(function(response){ - console.log(response) // prints Hi John after 2000 seconds -}) + ``` + https://developers.google.com/web/fundamentals/primers/promises + https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises#Guarantees -``` -- Useful links -https://developers.google.com/web/fundamentals/primers/promises -https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises#Guarantees +8. What are the differences between React and Angular? + ##Answer + React more developer friendly and Angular build on solid software principles like MVC and dependency injection. -8. React more developer friendly and Angular build on solid software principles like MVC and dependency injection. + https://www.telerik.com/docs/default-source/whitepapers/telerik-com/choose-the-right-javascript-framework-for-your-next-web-application_whitepaper.pdf?download=true -- Useful links -https://www.telerik.com/docs/default-source/whitepapers/telerik-com/choose-the-right-javascript-framework-for-your-next-web-application_whitepaper.pdf?download=true -9. Browsers are providing options to customize network speed so we can test the slow network speeds. We can check in network tab in Chrome Dev tools. +9. How do you simulate the low speed networks? + ##Answer + Browsers are providing options to customize network speed so we can test the slow network speeds. We can check in network tab in Chrome Dev tools. -Useful links -https://www.telerik.com/docs/default-source/whitepapers/telerik-com/choose-the-right-javascript-framework-for-your-next-web-application_whitepaper.pdf?download=true -10. `use strict` tells the javascript runtime to execute javascript code in strict mode and throw errors if they are any undeclared variables. +10. Why the `use strict` is used? + ##Answer + `use strict` tells the javascript runtime to execute javascript code in strict mode and throw errors if they are any undeclared variables. -For example -``` -`use strict' - x = "12" // throws error + For example + ``` + `use strict' + x = "12" // throws error -``` -``` - var y = "7"; -delete y // throws error + ``` + ``` + var y = "7"; + delete y // throws error -``` + ``` -useful links -https://www.w3schools.com/js/js_strict.asp \ No newline at end of file + https://www.w3schools.com/js/js_strict.asp \ No newline at end of file From a4bf78d6eab1ba3b659d838735ee4d7e47799dd2 Mon Sep 17 00:00:00 2001 From: vishnu sandhireddy Date: Sun, 18 Feb 2018 18:50:33 +0530 Subject: [PATCH 09/11] Add indenation for answer --- Web-Development/NativeJavascript/answers.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/Web-Development/NativeJavascript/answers.md b/Web-Development/NativeJavascript/answers.md index 29751c5..eb32d4d 100644 --- a/Web-Development/NativeJavascript/answers.md +++ b/Web-Development/NativeJavascript/answers.md @@ -1,6 +1,6 @@ # Answers to the frontend questions Native script 1. Write a function which can add all the arguments and return the value ? - ##Answer + ## Answer Before ES6 ``` function sum(){ @@ -23,13 +23,13 @@ ``` 2. Explain the inheritance in javascript? - ##Answer + ## Answer Prototypes are the mechanism by which javascript gets the inheritance. In other Object Oriented languages, inheritance is implemented by copying the properties of the parent to children but in javascript a link is formed between parent to children with a property called `__proto__` . Each object in javascript has a reference to the proto object by which it can access properties and objects from its parent object. So if we change the parent property the from the child we are actually changing parent itself. 3. Explain the closures? - ##Answer + ## Answer Closure in javascript is the phenomenon in javascript where the javascript engine will bind the variables declared outside the function and used inside the function like below. Here `name` is ``` function memberAge(name){ @@ -47,7 +47,7 @@ 4. Difference between `var` ,`let` & `const` ? - ##Answer + ## Answer `let` and `const` are scoped to a block of code and same is not in the case of `var`. ``` { @@ -83,12 +83,12 @@ var b=6; a(); ``` - ##Answer + ## Answer b will be `undefined` as only the variables are hoisted but not the assignment. 6. How the javascript engine and Browser handles asynchronous calls? - ##Answer + ## Answer Javascript Runtime has a message queue, an event loop and a call stack which will help to execute its asynchronous calls. The **call stack** is where the javascript runtime stack up of all its execution context if there are nested calls. @@ -123,7 +123,7 @@ 7.Difference between callbacks and promises? - ##Answer + ## Answer Callback is the function which gets executed once the asynchronous callback finishes. Promise is an object represents the completion and failure of asynchronous operation. @@ -157,19 +157,19 @@ 8. What are the differences between React and Angular? - ##Answer + ## Answer React more developer friendly and Angular build on solid software principles like MVC and dependency injection. https://www.telerik.com/docs/default-source/whitepapers/telerik-com/choose-the-right-javascript-framework-for-your-next-web-application_whitepaper.pdf?download=true 9. How do you simulate the low speed networks? - ##Answer + ## Answer Browsers are providing options to customize network speed so we can test the slow network speeds. We can check in network tab in Chrome Dev tools. 10. Why the `use strict` is used? - ##Answer + ## Answer `use strict` tells the javascript runtime to execute javascript code in strict mode and throw errors if they are any undeclared variables. For example From 3002d9d2504e80c609b714a781a40f18d9604995 Mon Sep 17 00:00:00 2001 From: vishnu sandhireddy Date: Sun, 18 Feb 2018 18:51:36 +0530 Subject: [PATCH 10/11] Remove heading --- Web-Development/NativeJavascript/answers.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/Web-Development/NativeJavascript/answers.md b/Web-Development/NativeJavascript/answers.md index eb32d4d..44dce69 100644 --- a/Web-Development/NativeJavascript/answers.md +++ b/Web-Development/NativeJavascript/answers.md @@ -1,6 +1,6 @@ # Answers to the frontend questions Native script 1. Write a function which can add all the arguments and return the value ? - ## Answer + Before ES6 ``` function sum(){ @@ -23,13 +23,13 @@ ``` 2. Explain the inheritance in javascript? - ## Answer + Prototypes are the mechanism by which javascript gets the inheritance. In other Object Oriented languages, inheritance is implemented by copying the properties of the parent to children but in javascript a link is formed between parent to children with a property called `__proto__` . Each object in javascript has a reference to the proto object by which it can access properties and objects from its parent object. So if we change the parent property the from the child we are actually changing parent itself. 3. Explain the closures? - ## Answer + Closure in javascript is the phenomenon in javascript where the javascript engine will bind the variables declared outside the function and used inside the function like below. Here `name` is ``` function memberAge(name){ @@ -47,7 +47,7 @@ 4. Difference between `var` ,`let` & `const` ? - ## Answer + `let` and `const` are scoped to a block of code and same is not in the case of `var`. ``` { @@ -83,12 +83,12 @@ var b=6; a(); ``` - ## Answer + b will be `undefined` as only the variables are hoisted but not the assignment. 6. How the javascript engine and Browser handles asynchronous calls? - ## Answer + Javascript Runtime has a message queue, an event loop and a call stack which will help to execute its asynchronous calls. The **call stack** is where the javascript runtime stack up of all its execution context if there are nested calls. @@ -123,7 +123,7 @@ 7.Difference between callbacks and promises? - ## Answer + Callback is the function which gets executed once the asynchronous callback finishes. Promise is an object represents the completion and failure of asynchronous operation. @@ -157,19 +157,19 @@ 8. What are the differences between React and Angular? - ## Answer + React more developer friendly and Angular build on solid software principles like MVC and dependency injection. https://www.telerik.com/docs/default-source/whitepapers/telerik-com/choose-the-right-javascript-framework-for-your-next-web-application_whitepaper.pdf?download=true 9. How do you simulate the low speed networks? - ## Answer + Browsers are providing options to customize network speed so we can test the slow network speeds. We can check in network tab in Chrome Dev tools. 10. Why the `use strict` is used? - ## Answer + `use strict` tells the javascript runtime to execute javascript code in strict mode and throw errors if they are any undeclared variables. For example From 0cbeccf4166c266c00ee3461787348d95203e5e0 Mon Sep 17 00:00:00 2001 From: vishnu sandhireddy Date: Sun, 18 Feb 2018 18:52:49 +0530 Subject: [PATCH 11/11] Fixing first question --- Web-Development/NativeJavascript/answers.md | 1 + 1 file changed, 1 insertion(+) diff --git a/Web-Development/NativeJavascript/answers.md b/Web-Development/NativeJavascript/answers.md index 44dce69..37faf3d 100644 --- a/Web-Development/NativeJavascript/answers.md +++ b/Web-Development/NativeJavascript/answers.md @@ -2,6 +2,7 @@ 1. Write a function which can add all the arguments and return the value ? Before ES6 + ``` function sum(){ let