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

// 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

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之間

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

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://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