Closures are function which ‘remember’ the environment in which they were created. A closure is a combination of a function and the lexical environment within which the function was declared. This environment consists of any local variables that were in-scope at the time closure was created.

The word lexical refers to the fact that lexical scoping uses the location where a variable is declared within the source code to determine where that variable is available. Nested functions have access to variables declared in their outer scope.

function foo() {
    var i = 10;

    function print() {
        console.log(i);
    }

    return print;
}

var printFunc = foo();
printFunc(); // 10

Common mistake of using closure in for loops

for (var x = 0; x < 10; x++) {
    setTimeout(function() {
        console.log(x);
    }, 10);
}
// prints 10, 10 times

Solution, is to use a function factory

function myFunc(p) {
    return function() {
        console.log(p);
    }
}

for (var x = 0; x < 10; x++) {
    setTimeout(myFunc(x), 10);
}
// prints 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

References

• Closures
• JavaScript Closures Demystified
• JavaScript Closures Explained

ECMAScript 2015 or commonly called as ES6 specification of JavaScript introduced let and const

let

let is the new var. let could be used to declare variables, just like var.

Differences between let and var are

• let variables are block scoped.
• Global let variables are not properties on the global object.
• Loops of the form for (let x...) create a fresh binding for x in each iteration.
• It’s an to try to use a let variable before its declaration is reached.
• Redeclaring a variable with let is a SyntaxError.

const

Variables declared with const are like let except you can’t assign to them, except at the point where they are declared. The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned.

References

• ES6 In Depth: let and const
• let
• const

Arrow functions are a more concise syntax for writing function expressions. They were introduced in ECMAScript 2015 (ES6). They are also called as lambda functions in other programming languages.

Advantages of Arrow functions

• More concise
• Arrow functions do not create its own this context. so this has it original meaning from the enclosing context.

Things to watch out for when using Arrow functions

• call, apply, bind do not change the value of this in Arrow functions.
• Arrow functions cannot be used as constructors
• Arrow functions cannot be used as generators.
• Arrow functions do not have the local variable arguments as do other functions.

References

• Arrow function expressions
• ES6 Arrow Functions: Fat and Concise Syntax in JavaScript

Props

Props are read only. Whether a component is defined as a function or a class, it must never modify its own props. All react component must act like pure functions with respect to their props.

function TitleComponent(props) {
    return <h1>{props.title}</h1>;
}

State

State is similar to props, but its private and fully controlled by the component. State is local or encapsulated and its not accessible to any component other than the one that owns it. State is changeable. Do not modify state directly, Instead use setState() function. State updates may be asynchronous, to fix it, use second form of setState() that accepts a function rather than a object. React calls render method after state is changed to learn what should be on the screen.

class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {name: "Hello World"};
    }

    render() {
        return (
            <form>
                <input type="text" 
                    value={this.state.name} 
                    onChange={this.handleOnChange.bind(this)}/>
            </form>
        )       
    }

    handleOnChange(e) {
        this.setState({
            name: e.target.value
        })
    }
}

References

• Components and Props
• State and Lifecycle
• ReactJS: Props vs. State

• Store

The state of your whole application is stored in an Object tree within a single store. This object is like a ‘model’ except there are no setters. This is so that different parts of the code can’t change the state arbitrarily, causing hard to reproduce bugs.

• Action

The only way to change the state is to emit an action, an object describing what happened. Enforcing that every change is described as an action lets us have a clear understanding of what’s going on in the app.

• Reducer

To specify how a state tree is transformed by actions, you write pure reducers. Its just a function which takes state and action as arguments, and returns the next state of the app.

• References

http://redux.js.org/docs/introduction/CoreConcepts.html

http://redux.js.org/docs/introduction/ThreePrinciples.html