The rest parameter syntax allows us to represent an indefinite number of arguments as an array. If you prefix a parameter name with the rest operator (…), the parameter receives all remaining parameters via an Array. Only the last parameter can be a “rest parameter”. This syntax was introduced in ECMAScript 2015(commonly called as ES6).

function foo(a, b, ...moreArgs) {
    console.log(a); //1
    console.log(b); //2
    console.log(moreArgs); //[3, 4, 5, 6, 7]
}

foo(1, 2, 3, 4, 5, 6, 7);

References

• Rest parameters

ES6 is the first time JavaScript has built in modules.

The goal of ES6 modules was to create a format that both users of CommonJS and of AMD are happy with. Its syntax is even more compact than CommonJS. Their structure can be statically analyzed. Their support of cyclic dependencies is better than CommonJS. Similar to AMD, they have direct support for asynchronous loading and configurable module loading.

Use of native JavaScript modules is dependent on the import and export statements.

// file name "sum.js"
function sum(a, b) {
    return a+b;
}

export { sum };

// file name "main.js"
import { sum } from "./sum.js";

let result = sum(1,2);

console.log(result); //3

<script type="module" src="main.js"></script>

To get modules to work correctly in a browser, you need to make sure that your server is serving them with a Content-Type header that contains a JavaScript MIME type such as text/javascript

Named Export

With named exports, one can have multiple named exports per file. The name of the imported module has to be the same as the name of the exported module.

// File lib.js
function foo() {
    console.log('foo');
}

function baz() {
    console.log('baz');
}

export {foo, baz};

// File app.js
import {foo, baz} from './lib.js';
foo();
baz();

Default Export

There can only be one default export per file. The naming of import is completely independent in default export and we can use any name we like.

// File lib.js
function foo() {
    console.log('foo');
}

export default foo;

// File app.js
import XYZ from './foo.js';

XYZ(); // prints 'foo'

We can have both named exports and default export in the same module.

// File lib.js
export default function foo() {
    console.log('foo');
}

export function baz() {
    console.log('baz');
}

// File app.js
import foo, {baz} from './lib.js';

foo();
baz();

Renaming imports

If 2 modules import names collide we would need to rename when importing.

//File foo-a.js
export function foo() {
    console.log('foo a');
}

//File foo-b.js
export function foo() {
    console.log('foo b');
}

//File app.js
import {foo as fooA} from 'foo-a.js';
import {foo as fooB} from 'foo-b.js';

fooA(); //prints 'foo a'
fooB(); //prints 'foo b'

Renaming exports

Renaming exports are similar to renaming exports. If you want to export the same value under different names.

function foo() {
    console.log('foo');
}

export {
    foo as fooV1,
    foo as fooV2
};

References

• 16. Modules
• JavaScript modules
• ES6 In Depth: Modules
• Named Export vs Default Export in ES6
• Default And Named Exports From The Same Module

npm-shrinkwrap command locks down the versions of a package’s dependencies so that you can control exactly which versions of each dependency will be used when your package is installed.

References

• https://docs.npmjs.com/cli/shrinkwrap

The spread syntax allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) or multiple variables (for destructuring assignments) are expected.

Spread syntax can be only applied to iterable objects.

Rest syntax looks exactly like spread syntax. In a way, rest syntax is the opposite of spread syntax. Spread syntax “expands” an array into its elements, while rest syntax collects multiple elements and “condenses” them into a single element.

function sum(a, b) {
    return a+b;
}

const args = [1, 2];

let result = sum(...args); 
console.log(result); // 3

const arr = [1, 2, 3];
const arrCopy = [...arr]; 
console.log(arrCopy); // [1, 2, 3]

References

• Spread syntax (…)
• ES6 Spread and Butter in Depth

If React components render() function renders the same result given the same props and state , you can use PureComponent for a performance boost.

PureComponent’s shouldComponentUpdate() function only shallow compares the objects. Also its skips prop updates for the whole component subtree. So need to make sure that all the children components are also “pure”.

Best use case for PureComponent are presentational components which have no child components and no dependencies on the global state in the application.

class MyComponent extends React.PureComponent {
    render() {
        return (
            <h1>Hello World!</h1>
        );
    }
}

References

• React Top-Level API
• Why and How to Use PureComponent in React.js