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

A test fixture is a fixed state of a set of objects used as a baseline for running tests. The purpose of test fixture is to ensure that there is a well known and fixed environment in which tests are run so that results are repeatable.

References

• https://github.com/junit-team/junit4/wiki/test-fixtures

The term duck typing comes from the saying “If it looks like a duck, swims like a duck, and quacks like a duck, then it probably is a duck”.

Duck Typing helps to avoid conditional in JavaScript. Duck Typing helps to emulate interface interfaces in JavaScript.

References

• http://adripofjavascript.com/blog/drips/using-duck-typing-to-avoid-conditionals-in-javascript.html
• http://jscriptpatterns.blogspot.com/2013/01/javascript-interfaces.html
• https://en.wikipedia.org/wiki/Duck_typing

A promise is an object that may produce a single value some time in the future: either a resolved value, or a reason that it’s not resolved. A promise may be in one of the 3 possible states: fulfilled, rejected or pending. Promise user can attach callbacks to handle the fulfilled value or the reason for rejection.

then

The first argument of .then is a function that runs when the promise is resolved and receives the result. The second argument of .then is a function that runs when the promise is rejected and receives the error.

let promise = new Promise(function(resolve, reject) {
  setTimeout(() => resolve("done!"), 1000);
});

// resolve runs the first function in .then
promise.then(
  result => alert(result), // shows "done!" after 1 second
  error => alert(error) // doesn't run
);

let promise = new Promise(function(resolve, reject) {
  setTimeout(() => reject(new Error("Whoops!")), 1000);
});

// reject runs the second function in .then
promise.then(
  result => alert(result), // doesn't run
  error => alert(error) // shows "Error: Whoops!" after 1 second
);

Chaining

Value returned by then is used in next then by calling with that value. However if a promise is returned, the next then waits on it and is only called when the promise settles.

catch

The catch callback is executed when the promise is rejected. catch is just a syntactic sugar for then(undefined, func), but it’s more readable.

let promise = new Promise(function(resolve, reject) {
  reject("Error");
});
promise.then(function() {
  console.log("success");
})
.catch(function() {
  console.log("failure");
});

finally

finally callback is called regardless of success or failure Its a good handler for performing cleanup.

let promise = new Promise(function(resolve, reject) {
  reject("Connection Timeout");
})

promise.then(function() {
  console.log("success");
})
.catch(function() {
  console.log("failure")
})
.finally(function() {
  console.log("Cleaning up connection objects");
});
// failure
// Cleaning up connection objects 

Static Methods

• Promise.resolve() - Creates a promise that resolves to value given to it.
• Promise.reject() - Create a promise that rejects with the value given to it.
• Promise.all(array) - Make a promise that fulfills when every itme in the array fulfills and rejects if any item rejects.
• Promise.race() - Make a promise that fulfills as soon as any item fulfills or rejects as soon as any item rejects.

Promise States

• Fulfilled - The action relating to the promise suceeded.
• Rejected - The action relating to the promise failed.
• Pending- Hasn’t fulfilled or rejected yet.
• Settled - Has fulfilled or rejected.

References

• Using Promises
• What is a Promise?
• JavaScript Promises: An introduction
• JavaScript Promise API
• Promise
• Promise