ECMAScript2015(ES6) introduced four new collections Map, Set, WeakMap and WeakSet.

Map

A Map object is a simple key/value map and can iterate its elements in insertion order.

let barMap = new Map();
barMap.set('one', 1);
barMap.set('two', 2);
barMap.set('three', 3);

for (let [key, value] of barMap) {
    console.log(key + ' = ' + value); // one = 1, two = 2, three = 3
}

barMap.forEach(function(value, key) {
    console.log(key + ' = ' + value); // one = 1, two = 2, three = 3
});

Set

A Set object is a collection of values. A value in a set may only occur once. You can iterate its elements in insertion order.

let bazSet = new Set();
bazSet.add('a');
bazSet.add('b');
bazSet.add('c');

for (let value of bazSet) {
    console.log(value); // a, b, c
}

WeakMap

A WeakMap is a collection of key/value pairs in which the keys are weakly referenced. The keys must be objects. They allow for objects which are no longer needed to be cleared from memory. There is no method to obtain a list of the keys.

const foowm = new WeakMap();
const key1 = {};
foowm.set(key1, "value1");
foowm.get(key1); // "value1"

WeakSet

A WeakSet is a collection of objects. References to objects are held weakly. If no other references to an object stored in the WeakSet exist , those objects can be garbage collected.

const barws = new WeakSet();
const value1 = {};
barws.add(value1);

References

• ES6 Collections: Using Map, Set, WeakMap, WeakSet
• Map
• Keyed Collections
• Set
• WeakMap
• WeakSet

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