ES6: 6 Use Arrow Functions to Write Concise Anonymous Functions

In JavaScript, we often don't need to name our functions, especially when passing a function as an argument to another function. Instead, we create inline functions. We don't need to name these functions because we do not reuse them anywhere else.
To achieve this, we often use the following syntax:


const myFunc = function() {
const myVar = "value";
return myVar;
}

ES6 provides us with the syntactic sugar to not have to write anonymous functions this way. Instead, you can use arrow function syntax:

const myFunc = () => {
const myVar = "value";
return myVar;
}
When there is no function body, and only a return value, arrow function syntax allows you to omit the keyword return as well as the brackets surrounding the code. This helps simplify smaller functions into one-line statements:
const myFunc= () => "value"
This code will still return value by default.

ES6: 7 Write Arrow Functions with Parameters

just like a normal function, you can pass arguments into arrow functions.
// doubles input value and returns it
const doubler = (item) => item * 2;
You can pass more than one argument into arrow functions as well. more than one argument
const myConcat = (arr1, arr2)=> {
"use strict";
return arr1.concat(arr2);
};
// test your code
console.log(myConcat([1, 2], [3, 4, 5]));

ES6: 8 Write Higher Order Arrow Functions 

 

Arrow functions work really well with higher order functions, such as map(), filter(), and reduce(), that take other functions as arguments for processing collections of data.
Read the following code:
FBPosts.filter(function(post) {
  return post.thumbnail !== null && post.shares > 100 && post.likes > 500;
})
We have written this with filter() to at least make it somewhat readable. Now compare it to the following code which uses arrow function syntax instead:
FBPosts.filter((post) => post.thumbnail !== null && post.shares > 100 && post.likes > 500)
This code is more succinct and accomplishes the same task with fewer lines of code.
lets use arrow function syntax to compute the square of only the positive integers (fractions are not integers) in the array realNumberArray and store the new array in the variable squaredIntegers.
const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34];
const squareList = (arr) => {
"use strict";
const squaredIntegers=arr.map(x=> x>0 && x%1==0 && x*x).filter(Number);
return squaredIntegers;
};
// test your code
const squaredIntegers = squareList(realNumberArray);
console.log(squaredIntegers);

notice this line const squaredIntegers=arr.map(x=> x>0 && x%1==0 && x*x).filter(Number); first the map() function decide which is positive x>0 and not fraction x%1==0 and double it by multiplying each array member by it self x*x x represent array member arr.map(x=> x>0 && x%1==0 && x*x) result [ 16, false, false, false, 1764, 36, false ] then we need to filter it to contain only numbers arr.map(x=> x>0 && x%1==0 && x*x).filter(Number); now result will be [ 16, 1764, 36 ]

Comments

Post a Comment

Popular posts from this blog

ES6 : 5 Prevent Object Mutation

As seen in the previous post declaration alone doesn't really protect your data from mutation. To ensure your data doesn't change, JavaScript provides a function Object.freeze() to prevent data mutation. Once the object is frozen, you can no longer add, update, or delete properties from it. Any attempt at changing the object will be rejected without an error. let obj = { name:"FreeCodeCamp" review:"Awesome" }; Object.freeze(obj); obj.review = "bad"; //will be ignored. Mutation not allowed obj.newProp = "Test"; // will be ignored. Mutation not allowed console.log(obj); // { name: "FreeCodeCamp", review:"Awesome"}
Read more

ES6: 1 Explore Differences Between the var and let Keywords

One of the biggest problems with declaring variables with the var keyword is that you can overwrite variable declarations without an error. var camper = 'James'; var camper = 'David'; console.log(camper); // logs 'David' As you can see in the code above, the camper variable is originally declared as James and then overridden to be David . In a small application, you might not run into this type of problem, but when your code becomes larger, you might accidentally overwrite a variable that you did not intend to overwrite. Because this behavior does not throw an error, searching and fixing bugs becomes more difficult. A new keyword called let was introduced in ES6 to solve this potential issue with the var keyword. If you were to replace var with let in the variable declarations of the code above, the result would be an error. let camper = 'James'; let camper = 'David'; // throws an error This error can be seen...
Read more

CSS Grid: Reduce Repetition Using the repeat Function

 When we used grid-template-columns and grid-template-rows to define the structure of a grid, you entered a value for each row or column you created. Lets say you want a grid with 100 rows of the same height. It isn't very practical to insert 100 values individually. Fortunately, there's a better way - by using the repeat function to specify the number of times you want your column or row to be repeated, followed by a comma and the value you want to repeat. Here's an example that would create the 100 row grid, each row at 50px tall. grid-template-rows: repeat(100, 50px); You can also repeat multiple values with the repeat function, and insert the function amongst other values when defining a grid structure. Here's what I mean: grid-template-columns: repeat(2, 1fr 50px) 20px;  this will be translated to :            grid-template-columns:1fr 50px 1fr 50px  20px;   1fr 50px is repeated t...
Read more