# INTERVIEW - JS

## Functional programming

1. pass functions as parameters to other functions
2. immutable, predictable

## Higher-order function (HOF)

1. extendedFunction = HOF(basic function)
2. parameters share scope

```javascript
// ES5
function add(x){
  return function(y){
    return y + x;
  };
}

// ES6
const add = x => y => y + x;


// usage
const add2 = add(2);// returns [inner function] where x = 2
add2(4);            // returns 6: exec inner with y = 4, x = 2
add(8)(7);          // 15
```

<https://hackernoon.com/higher-order-function-cheatsheet-es6-javascript-nodejs-react-tutorial-example-d4f3776f4bcd>

### map is a HOF

```javascript
const arr1 = [1, 2, 3];
const arr2 = arr1.map(item => item * 2);
console.log(arr2);
```

## Middleware

1. HOF
2. authentication, logging, statistics

redux middleware = 介於dispatch(action) -> reducer之間

```javascript
var express = require('express')
var app = express()

var myLogger = function (req, res, next) {
  console.log('LOGGED')
  next()
}

app.use(myLogger)

app.get('/', function (req, res) {
  res.send('Hello World!')
})

app.listen(3000)
```

## Redux-Thunk

1. redux action = return object
2. thunk action = return function

```javascript
function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;
```

![](https://437555650-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lq83PytCJFhVoqGvu-1%2F-Lq83RGMs1nIq67HB7g9%2F-Lq83UFWA4i2-ASHABoj%2Fthunk_middleware.png?generation=1569962720017429\&alt=media)

<https://medium.com/@User3141592/understanding-the-redux-thunk-source-code-b3f8b930faf6>

## Webpack

Webpack is a build tool that puts all of your assets, including Javascript, images, fonts, and CSS, in a dependency graph.

<https://blog.andrewray.me/webpack-when-to-use-and-why/>

## Babel

turn ES6/7 & JSX to ES5

HOC

Async