JavaScript Iterators were added in ECMAScript 2015(ES6). It allows JavaScript objects to specify how custom objects can be used in for...of loops. For a object to be iterable it must implement iteratorMethod. When object needs to be iterated is iteratorMethod is called with no arguments. The iteratorMethod returns a iterator. The object must have a property which is available via a constant Symbol.Iterator. The value of the property must be the iterator method. An object is a iterator if it has a next function which is a zero argument function that returns a object with atleast two properties done(boolean) - Has value true when the iterator has completed its sequence. Has value false if the iterator was able to produce next value in the sequence. value - Any JavaScript value returned by the iterator.

let fooIterator = {
    next: function() {
        if (this.counter < 10) {
            this.counter ++;
            return { value: this.counter, done: false };
        }
        return { value: undefined, done: true };
    },
    counter: 0,
    [Symbol.iterator]: function() {
        return this;
    }
}

for (let value of fooIterator) {
    console.log(value); // 1 2 3 4 5 6 7 8 9 10
}

References

• A Simple Guide to ES6 Iterators in JavaScript with Examples
• Iteration protocols

Generator functions , allow you to define a function whose execution is not continuous. Generator functions are written using the function* syntax.

Generator function do not initially execute their code. Instead they return a special type of iterator called a Generator. When a value is consumed by calling the generators next method, then function executes until it encounters yield keyword.

function* fooGenerator() {
    yield 1;
    yield 2;
    yield 3;
}

for (const val of fooGenerator()) {
    console.log(val); // 1 2 3
}

References:

• Iterators and generators
• Understanding Generators in ES6 JavaScript with Examples

React Default Props values ensure that the prop will have a value if it was not specified by the parent component.

class BazComponent extends React.Component {
    render {
        <div> Hello {this.props.value}!<div>
    }
}

BazComponent.defaultProps = {
    value: 'World'
};

<BazComponent/> // Renders "Hello World!"

React PropTypes help with typechecking on the props for a component. When a invalid value is provided for a prop,a warning will be shown in the JavaScript console. PropTypes is only checked in development mode.

import PropTypes from 'prop-types';

class MyHeader extends React.Component {
    render() {
        return (
            <h1>{this.props.value}</h1>
        )
    }
}

MyHeader.propTypes = {
    value: PropTypes.string.isRequired
};

References:

• Typechecking With PropTypes

async functions and await are part of ECMAScript 2017(ES8). These features basically act as syntactic sugar on top of promises. They make asynchronous code look like synchronous code. They make code much simpler and easier to understand.

async functions

async functions returned values are guaranteed to be converted into promises.

async function myFunc() {
    return "Hello World!";
}

myFunc().then((value) => {
    console.log(value); // Hello World!
})

await keyword

await works only inside async functions. await keyword put in front of any async promise based function causes the line to pause until the promise fulfills.

async function foo() {
    return icecream = await Promise.resolve("Vanilla Cone!");
}

foo().then((value) => {
    console.log(value); // Vanilla Cone!
});

References:

• Making asynchronous programming easier with async and await
• Async/await