Skip to content

Commit

Permalink
Proofread new answers
Browse files Browse the repository at this point in the history
  • Loading branch information
@yangshun
yangshun committed Feb 14, 2018
1 parent 4a910a6 commit 3258164
Showing 1 changed file with 40 additions and 103 deletions.
143 changes: 40 additions & 103 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
```
Expand All @@ -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';
```
Expand All @@ -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';
```
Expand All @@ -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.

Expand All @@ -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());
Expand All @@ -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());
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;
const transformNamesToUppercase = function(names) {
return names.map(name => name.toUpperCase());
};
sumOfNumbers(numbers); // 15
```

More declarative using `.reduce(reducerFn)`:

```js
const sumOfNumbers = numbers =>
numbers.reduce((total, number) => (total + number), 0);
sumOfNumbers(numbers); // 15
transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
```

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
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit 3258164

Please sign in to comment.