Learn this before React

Table of contents

1.maps() and filters()

2.slice() and splice()

3.find() and findIndex()

4.destructuring()

5.rest and spread operators

6.promise

1.map

• The arr.map method is one of the most useful and often used.

• It calls the function for each element of the array and returns the array of results.

The syntax is :

let result = arr.map(function(item, index, array) {

});

filter

• The find method looks for a single (first) element that makes the function return true.

• If there may be many, we can use arr.filter(fn).

The syntax is similar to find, but filter returns an array of all matching elements:

let

results = arr.filter(function(item, index, array) {

});

2.slice

• The method arr.slice is much simpler than similar-looking arr.splice.

The syntax is:

let arr.slice([start], [end]);

• It returns a new array copying to it all items from index start to end (not including end). Both start and end can be negative, in that case position from array end is assumed.

• It’s similar to a string method str.slice, but instead of substrings it makes subarrays.

splice

• The arr.splice method is a swiss army knife for arrays. It can do everything: insert, remove and replace elements.

The syntax is:

let arr.splice(start[, deleteCount, elem1, ..., elemN]);

• It modifies arr starting from the index start: removes deleteCount elements and then inserts elem1, ..., elemN at their place. Returns the array of removed elements.

3.find and findIndex

• Imagine we have an array of objects. How do we find an object with the specific condition?

• Here the arr.find(fn) method comes in handy.

The syntax is:

let result = arr.find(function(item, index, array) {

// if true is returned, item is returned and iteration is stopped

// for falsy scenario returns undefined

});

findIndex

The arr.findIndex method has the same syntax as arr.find(fn), but returns the index where the element was found instead of the element itself. The value of -1 is returned if nothing is found.

4.destructuring

• Destructuring assignment allows for instantly mapping an object or array onto many variables.

The full object syntax:

let {prop : varName = default, ...rest} = object

• This means that property prop should go into the variable varName and, if no such property exists, then the default value should be used.

• Object properties that have no mapping are copied to the rest object.

The full array syntax:

let [item1 = default, item2, ...rest] = array

• The first item goes to item1; the second goes into item2, all the rest makes the array rest.

5.rest and spread operator

rest operator

• The rest parameter is converse to the spread operator. while the spread operator expands elements of an iterable, the rest operator compresses them.

• It collects several elements. In functions when we require to pass arguments but were not sure how many we have to pass, the rest parameter makes it easier.

• There must be only one rest operator in javascript functions.

The syntax is:

function function_name(...arguments) {

statements;

};

spread operator

• The spread operator helps us expand an iterable such as an array where multiple arguments are needed, it also helps to expand the object expressions.

• In cases where we require all the elements of an iterable or object to help us achieve a task, we use a spread operator.

The syntax is:

var var_name = [...iterable];

6.promise

• Promises are used to handle asynchronous operations in JavaScript.

  A Promise has four states:

• fulfilled: Action related to the promise succeeded

• rejected: Action related to the promise failed

• pending: Promise is still pending i.e. not fulfilled or rejected yet

• settled: Promise has been fulfilled or rejected.

The syntax is:

let promise = new Promise(function(resolve, reject){

//do something

});

NOTE: Please note, this is a work in progress article and will be updated periodically.