JavaScript Quick Reference

Array Helper Methods:

  1. forEach
  2. map
  3. filter
  4. find
  5. every
  6. some
  7. reduce

1. forEach

Example: 1


output:

[ 300, 1000, 1800 ]

2. Map

Example: 1

output:

[ 'Tim', 'James', 'David' ]
[ 1, 2, 3 ]
[ 'Tim', 'James', 'David' ]
[ 'Java', 'JavaScript', 'Python' ]

3. Filter

Example: 1


output:

[ { id: 1, name: 'James', dept: 'IT' },
{ id: 4, name: 'Vinod', dept: 'IT' } ]
[ { id: 1, name: 'James', dept: 'IT' },
{ id: 4, name: 'Vinod', dept: 'IT' } ]

Example: 2


output:

[ { id: 4, age: 50, name: 'Vinod', dept: 'IT' } ]

Example: 3


output:

[ 55, 65, 75, 85, 95 ]

Example: 4


output:

[ { id: 1, age: 35, name: 'James', dept: 'IT', education: 'Masters' } ]

Example: 5

output:

[ 'David', 'Vinod', 'Karthik', 'Staffy' ]
[ 10, 30, 50, 60 ]

4. Find

Note: Find only returns the first element matching the given search criteria.

Example 1:

output:

{ id: 2, age: 25, name: 'David', dept: 'Accounts', education: 'High School' }

Example 2:

output:

{ id: 3, age: 45, name: 'Tim', dept: 'HR' }

5. Every

Example 1:

output:

false

5. Some

Example 1:

output:

true

6. Reduce

Example 1:

output:

158

Example 2:

output:

{ passed: 3, failed: 2 }

Example 3:

output:

[ 1, 2, 3, 4 ]

Template Strings/Template Literals:

  • JavaScript Template literals are the Literals or Strings allowing Expression in between them.
  • The delimiter of a template literal is the backtick ` character
  • An expression inside the literal is enclosed in curly braces {} with a preceding dollar sign $

Example 1:

output:

This year is: 2018

Arrow Functions:

  • Arrow functions provide a concise syntax for writing function expressions.
  • They utilize a new token, =>, that looks like a fat arrow.
  • Arrow functions are anonymous and simplify function scoping
  • Arrow functions change the way this binds in functions
  • The parenthesis for an argument can be removed if there is a single argument. Curly brackets aren’t required if there is only one expression present in the function body.
  • If there is no argument, still we need to have empty parenthesis.

Example 1:

output:

7
9

Example 2:

//An arrow function with single argument and single exression in function body 
const num1 = number => number * 2; 

//If there is no argument, still we need to have empty parenthesis
const num2 = () => 2+2;

Enhanced Object Literals

Example 1:

Default Function Arguments:

Functions initialize parameters with default values when the function call doesn’t include them.

Example:

function calculateBill(total, tax = 0.13) { 
return total + (total * tax);
}

calculateBill(500);
calculateBill(500, .07);

Rest and Spread Operator:

ES6 has 2 new features that use three dots (…)

As Rest/Collector/Gather:

var [c, ...m] = [1,2,3,4,5]; // m -> [2,3,4,5]

Here …m is a collector, it collects the rest of the parameters. Internally when we write:

var [c, ...m] = [1,2,3,4,5];

JavaScript does the following:

var c = 1,

    m = [2, 3, 4, 5];

As Spread:

var params = [ "hello", true, 7 ];

var other = [ 1, 2, ...params ]; // other => [1,2,"hello", true, 7]

Here, …’params’ spread so as to assign all of its elements to variable ‘other’

Internally javaScript does the following:

var other = [1, 2].concat(params);

Reference:

https://stackoverflow.com/questions/33898512/spread-syntax-vs-rest-parameter-in-es2015-es6

Rest Operator Example:

Spread Operator Example:

Output:

[ 1, 3, 5, 7, 9, 11, 13, 15 ]

Destructuring:

It allows extracting data from arrays, objects, maps and sets into their own variables.

Extracting data from a simple object using destructuring:

Extracting data from a complex object using destructuring:

Setting default value using destructuring:


Note that ES6 destructuring fall back to a default value only if the value is undefined. It doesn’t happen for null, false and 0 as they are all still values.

Destructuring Arguments Object:

Destructuring Arrays:


Notice the use of square brackets for destructing arrays, while earlier we used curly brackets for destructuring objects.

Getting data from an array of objects using destructuring

Getting data from an object of arrays using destructuring

Function parameter handling using destructuring
If we use destructuring syntax for function parameters, we don’t need to worry about the order of parameters being sent. See example below:

Converting an array of arrays into an array of objects using destructuring

output:

[ { category: 'Programming', name: 'Java', price: 250 },
{ category: 'Automation', name: 'Selenium', price: 200 },
{ category: 'General', name: 'Communication Skills', price: 100 } ]