mirror
/
front-end-interview-handbook
mirror of https://github.com/yangshun/front-end-interview-handbook.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Proofread new answers

This commit is contained in:
Yangshun Tay 2018-02-13 19:39:43 -08:00
parent 4a910a6fd6
commit 3258164aab
1 changed files with 40 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
README.md
View File

@ -1389,14 +1389,14 @@ Variables declared using the `var` keyword are scoped to the function in which t
```js
function foo() {
// All variables are accessible within functions
// All variables are accessible within functions.
var bar = 'bar';
let baz = 'baz';
const qux = 'qux';
console.log(bar); // "bar"
console.log(baz); // "baz"
console.log(qux); // "qux"
console.log(bar); // bar
console.log(baz); // baz
console.log(qux); // qux
}
console.log(bar); // ReferenceError: bar is not defined
@ -1408,9 +1408,9 @@ if (true) {
let baz = 'baz';
const qux = 'qux';
}
// var declared variables are accessible anywhere in the function scope
console.log(bar); // "bar"
// let and const defined variables are not accessible outside of the block they were defined in
// var declared variables are accessible anywhere in the function scope.
console.log(bar); // bar
// let and const defined variables are not accessible outside of the block they were defined in.
console.log(baz); // ReferenceError: baz is not defined
console.log(qux); // ReferenceError: qux is not defined
```
@ -1422,11 +1422,11 @@ console.log(foo); // undefined
var foo = 'foo';
console.log(baz); // ReferenceError: can't access lexical declaration `baz' before initialization
console.log(baz); // ReferenceError: can't access lexical declaration 'baz' before initialization
let baz = 'baz';
console.log(bar); // ReferenceError: can't access lexical declaration `bar' before initialization
console.log(bar); // ReferenceError: can't access lexical declaration 'bar' before initialization
const bar = 'bar';
```
@ -1439,17 +1439,17 @@ var foo = 'bar';
console.log(foo); // "bar"
let baz = 'baz';
let baz = 'qux'; // SyntaxError: redeclaration of let baz
let baz = 'qux'; // Uncaught SyntaxError: Identifier 'baz' has already been declared
```
`let` and `const` differ in that `let` allows reassigning the variable's value while `const` does not.
```js
// this is fine
// This is fine.
let foo = 'foo';
foo = 'bar';
// this causes an exception
// This causes an exception.
const baz = 'baz';
baz = 'qux';
```
@ -1476,7 +1476,7 @@ TODO
A higher-order function is any function that takes another function as a parameter, which it uses to operate on some data, or returns a function as a result. Higher-order functions are meant to abstract some operation that is performed repeatedly. The classic example of this is `map`, which takes an array and a function as arguments. `map` then uses this function to transform each item in the array, returning a new array with the transformed data. Other popular examples in JavaScript are `forEach`, `filter`, and `reduce`. A higher-order function doesn't just need to be manipulating arrays as there are many use cases for returning a function from another function. `Array.prototype.bind` is one such example in JavaScript.
##### Map
**Map**
Let say we have an array of names which we need to transform each element to uppercase string.
@ -1485,7 +1485,7 @@ Let say we have an array of names which we need to transform each element to upp
The imperative way will be like:
```js
const transformNamesToUppercase = names => {
const transformNamesToUppercase = function(names) {
const results = [];
for (let i = 0; i < names.length; i++) {
results.push(names[i].toUpperCase());
@ -1495,70 +1495,15 @@ const transformNamesToUppercase = names => {
transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
```
Use `.map(transformerFn)` to become more simplified, easy to reason about and declarative.
Use `.map(transformerFn)` makes it simpler, easy to reason about and declarative.
```js
const transformNamesToUppercase = names =>
names.map(name => name.toUpperCase());
const transformNamesToUppercase = function(names) {
return names.map(name => name.toUpperCase());
};
transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
```
##### Filter
We want to filter all names which their initial character starts with **i**.
The imperative way will be like:
```js
const filterNames = names => {
const results = [];
for (let i = 0; i < names.length; i++) {
const name = names[i];
if (name.startsWith('i')) {
results.push(name);
}
}
return results;
};
filterNames(names); // ['IRISH']
```
Instead using `for loop`, use `.filter(predicateFn)` to look more declarative.
```js
const filterNames = names => names.filter(name => name.startsWith('i'));
filterNames(names); // ['IRISH']
```
##### Reduce
Sum all the values of an array
`const numbers = [1,2,3,4,5];`
Imperative way:
```js
const sumOfNumbers = numbers => {
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
sum += numbers[i];
}
return sum;
};
sumOfNumbers(numbers); // 15
```
More declarative using `.reduce(reducerFn)`:
```js
const sumOfNumbers = numbers =>
numbers.reduce((total, number) => (total + number), 0);
sumOfNumbers(numbers); // 15
```
Use **higher-order function** to make your code easy to reason about and improve the quality of your code. This became your code more **declarative** instead imperative, say **what you want done** not **how to do it**.
###### References
* https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99
@ -1572,42 +1517,34 @@ Destructuring is an expression available in ES6 which enables a succinct and con
**Array destructuring**
```js
// Variable assignment
var foo = ['one', 'two', 'three'];
// Variable assignment.
const foo = ['one', 'two', 'three'];
var [one, two, three] = foo;
const [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"
```
```js
// Swapping variables
const a = 1;
const b = 3;
let a = 1;
let b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
```
**Object destructuring**
```js
// Variable assignment
const o = {p: 42, q: true};
const {p, q} = o;
// Variable assignment.
const o = { p: 42, q: true };
const { p, q } = o;
console.log(p); // 42
console.log(q); // true
```
```js
// Assignment without declaration
let a, b;
({a, b} = {a: 1, b: 2});
```
###### References
@ -1657,40 +1594,40 @@ var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
### What are the benefits of using spread syntax and how is it different from rest syntax?
ES6's spread syntax is very useful when coding in a functional paradigm as we can easily create copies of arrays or objects without resorting to `Object.create`, `slice`, or a library function. This language feature gets a lot of use in projects using Redux or RX.js.
ES6's spread syntax is very useful when coding in a functional paradigm as we can easily create copies of arrays or objects without resorting to `Object.create`, `slice`, or a library function. This language feature is used often in Redux and rx.js projects.
```js
function putDookieInAnyArray(arr) {
return [...arr, 'dookie'];
}
var result = putDookieInAnyArray(['I', 'really', "don't", 'like']); // ["I", "really", "don't", "like", "dookie"]
const result = putDookieInAnyArray(['I', 'really', "don't", 'like']); // ["I", "really", "don't", "like", "dookie"]
var person = {
const person = {
name: 'Todd',
age: 29,
};
var copyOfTodd = { ...person };
const copyOfTodd = { ...person };
```
ES6's rest syntax offers a shorthand for including an arbitrary number of arguments to be passed to a function. It is like an inverse of the spread syntax, taking data and stuffing it into an array rather than upacking an array of data, and it works in function arguments, as well as in array and object destructuring assignments.
ES6's rest syntax offers a shorthand for including an arbitrary number of arguments to be passed to a function. It is like an inverse of the spread syntax, taking data and stuffing it into an array rather than unpacking an array of data, and it works in function arguments, as well as in array and object destructuring assignments.
```js
function addFiveToABunchOfNumbers(...numbers) {
return numbers.map(x => x + 5);
}
var result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12, 13, 14, 15]
const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12, 13, 14, 15]
var [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]
const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]
var {a, b, ...rest} = {
a: 1,
b: 2,
c: 3,
d: 4
}; // a: 1, b:2, rest: { c: 3, d: 4 }
const { e, f, ...others } = {
e: 1,
f: 2,
g: 3,
h: 4,
}; // e: 1, b: 2, others: { g: 3, h: 4 }
```
###### References