Skip to content

Commit f4493a3

Browse files
authored
Update Notes.md
1 parent e5cdc43 commit f4493a3

File tree

1 file changed

+177
-1
lines changed

1 file changed

+177
-1
lines changed

Ref/Notes.md

Lines changed: 177 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1246,7 +1246,7 @@ Static class members (properties/methods) are not tied to a specific instance of
12461246
### Other Answers
12471247

12481248
* http://flowerszhong.github.io/2013/11/20/javascript-questions.html
1249-
1249+
=========================================================================================================
12501250
## Topics Based
12511251

12521252
#spread-vs-rest-operators
@@ -1330,3 +1330,179 @@ const arr2 = [...arr];
13301330
## Explain how prototypal inheritance works
13311331
This is an extremely common JavaScript interview question. All JavaScript objects have a prototype property, that is a reference to another object. When a property is accessed on an object and if the property is not found on that object, the JavaScript engine looks at the object's prototype, and the prototype's prototype and so on, until it finds the property defined on one of the prototypes or until it reaches the end of the prototype chain. This behavior simulates classical inheritance, but it is really more of delegation than inheritance.
13321332

1333+
#Javascripts:
1334+
1335+
var - The scope of a variable declared with the keyword var is its current execution context.
1336+
Let - let are block scoped and not function scoped.
1337+
1338+
#Hoisting functions
1339+
1340+
Function declarations
1341+
1342+
hoisted(); // Output: "This function has been hoisted."
1343+
1344+
function hoisted() {
1345+
console.log('This function has been hoisted.');
1346+
};
1347+
1348+
Function expressions
1349+
1350+
Function expressions, however are not hoisted.
1351+
1352+
expression(); // Ouput: TypeError: expression is not a function
1353+
1354+
var expression = function hoisting() {
1355+
console.log('Will this work?');
1356+
};
1357+
1358+
1359+
https://scotch.io/tutorials/understanding-hoisting-in-javascript
1360+
1361+
async / await
1362+
promises
1363+
callbacks
1364+
1365+
#Async/await
1366+
1367+
Async/await is a new way to write asynchronous code. Previous options for asynchronous code are callbacks and promises.
1368+
Async/await is actually built on top of promises. It cannot be used with plain callbacks or node callbacks.
1369+
Async/await is, like promises, non blocking.
1370+
Async/await makes asynchronous code look and behave a little more like synchronous code. This is where all its power lies.
1371+
1372+
const makeRequest = () =>
1373+
getJSON()
1374+
.then(data => {
1375+
console.log(data)
1376+
return "done"
1377+
})
1378+
1379+
makeRequest()
1380+
1381+
const makeRequest = async () => {
1382+
console.log(await getJSON())
1383+
return "done"
1384+
}
1385+
1386+
makeRequest()
1387+
1388+
#closures
1389+
1390+
A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. The closure has three scope chains:
1391+
- it has access to its own scope (variables defined between its curly brackets).
1392+
- it has access to the outer function’s variables.
1393+
- it has access to the global variables.
1394+
1395+
Closure means that an inner function always has access to the vars and parameters of its outer function, even after the outer function has returned.
1396+
1397+
Inner function can access variables and parameters of an outer function.
1398+
It is useful in hiding implementation detail in JavaScript.
1399+
1400+
function showName (firstName, lastName) {
1401+
var nameIntro = "Your name is ";
1402+
// this inner function has access to the outer function's variables, including the parameter
1403+
function makeFullName () {
1404+
return nameIntro + firstName + " " + lastName;
1405+
}
1406+
1407+
return makeFullName ();
1408+
}
1409+
1410+
showName ("Michael", "Jackson"); // Your name is Michael Jackson
1411+
1412+
function OuterFunction() {
1413+
1414+
var outerVariable = 100;
1415+
1416+
function InnerFunction() {
1417+
alert(outerVariable);
1418+
}
1419+
1420+
return InnerFunction;
1421+
}
1422+
var innerFunc = OuterFunction();
1423+
1424+
innerFunc(); // 100
1425+
1426+
1427+
function Counter() {
1428+
var counter = 0;
1429+
1430+
function IncreaseCounter() {
1431+
return counter += 1;
1432+
};
1433+
1434+
return IncreaseCounter;
1435+
}
1436+
1437+
var counter = Counter();
1438+
alert(counter()); // 1
1439+
alert(counter()); // 2
1440+
alert(counter()); // 3
1441+
alert(counter()); // 4
1442+
1443+
In the above example, return InnerFunction; returns InnerFunction from OuterFunction when you call OuterFunction(). A variable innerFunc reference the InnerFunction() only, not the OuterFunction(). So now, when you call innerFunc(), it can still access outerVariable which is declared in OuterFunction(). This is called Closure.
1444+
1445+
#IIFE
1446+
1447+
IIFE is a function expression that automatically invokes after completion of the definition.
1448+
The parenthesis () plays important role in IIFE pattern.
1449+
use () operator to call this anonymous function immediately after completion of its definition.
1450+
(function () {
1451+
//write your js code here
1452+
})();
1453+
1454+
Adcvantages:
1455+
1456+
Do not create unnecessary global variables and functions
1457+
Functions and variables defined in IIFE do not conflict with other functions & variables even if they have same name.
1458+
Organize JavaScript code.
1459+
Make JavaScript code maintainable.
1460+
1461+
#this():
1462+
1463+
The following four rules applies to this in order to know which object is referred by this keyword.
1464+
1465+
Global Scope
1466+
Object's Method
1467+
call() or apply() method
1468+
bind() method
1469+
1470+
# Arrow Functions
1471+
Arrow function was introduced in ES6 using a new syntax for declaring functions called the arrow syntax. This new syntax uses less verbose syntax.
1472+
1473+
Arrow function can easily identified by the arrow symbol ‘ => ’ from where it gets its name. As part the syntax and rules for writing arrow functions is that the parameters come before the arrow element and the main body of the function comes after.
1474+
1475+
Arrow functions are always anonymous, and you need to assign them to a variable, so you can refer to them.
1476+
1477+
Advantage
1478+
1479+
There are numerous advantages of using arrow functions over other function declaration methods:
1480+
1481+
-They are much less verbose
1482+
-Do not need to use parentheses for single parameters
1483+
-The body of the function does not need to be placed inside a block if it is only one line
1484+
-If the return statement is the only statement in the body of the function, the return keyword is not required
1485+
-They do not bind their own value of this to the function
1486+
1487+
Example:
1488+
1489+
const square = x => x*x;
1490+
In this example the ‘x’ did not need to be in parentheses because is only one parameter; multiple parameters needs to go inside parentheses.
1491+
1492+
Example with two parameters:
1493+
1494+
const add = (x,y) => x = y;
1495+
But if the function does not require any parameters you can use empty parameters before the arrow symbol:
1496+
1497+
const hello = ( ) => alert(‘Hello World!’);
1498+
In all these examples the function fits onto one line, so there is no need to put them inside a block. But for longer functions you will require to use curly brackets to define the body of the function and the return keywork at the end.
1499+
1500+
const tax = (salary) => {
1501+
const taxable = salary – 5000;
1502+
const lowerRate = 0.25 * taxable;
1503+
taxable = taxable -15000;
1504+
const higherRate = 0.4 * taxable;
1505+
return lowerRate + higherRate;
1506+
}
1507+
As you can see the benefit of using arrow functions is lost when using it in a longer function. Arrow functions are a better fit for short and anonymous functions.
1508+

0 commit comments

Comments
 (0)