Array Helper Methods:
- forEach
- map
- filter
- find
- every
- some
- 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 } ]