#arrowfunctions

The most recent iteration of JavaScript was released in 2015 and is called JavaScript ES6 (also known as ECMAScript 2015 or ECMAScript 6). The programming language used by JavaScript is called ECMAScript. The guidelines for how the JavaScript programming language should operate are provided by ECMAScript. We'll go over some of the top ES6 features in this blog that you may utilize in your regular JavaScript code. - What is ES6? - Understanding ES6 Features- let and const keywords - Arrow Functions - Multi-line Strings - Default Parameters - Template Literals - Destructuring Assignment - Enhanced Object Literals - Promises - Classes - Modules - Summary

What is ES6?

The sixth major edition of the ECMAScript language specification standard is known as ES6, or ECMAScript 2015. It has become far more well-liked than the previous edition, ES5, and it defines the standard for the implementation of JavaScript. The JavaScript language has undergone considerable changes as a result of ES6. In order to make writing in JavaScript simpler and more enjoyable, it included a number of new features, including the let and const keywords, the rest and spread operators, template literals, classes, and modules. We'll talk about some of the top and most in-demand ES6 features in this article and how to use them when writing JavaScript on a regular basis. - let and const Keywords - Arrow Functions - Multi-line Strings - Default Parameters - Template Literals - Destructuring Assignment - Enhanced Object Literals - Promises - Classes - Modules

Understanding ES6 Features

The majority of contemporary programming languages support lambda expressions (Python, Ruby, Java…). Simply said, they are expressions that generate functions. First-class functions, which essentially mean sending functions as arguments to other functions or assigning them to variables, are extremely crucial for a programming language to provide. Function expressions in JavaScript prior to ES6 provides us with an anonymous function (a function without a name). var anon = function (a, b) { return a + b }; We now have arrow functions in ES6 that offer a more adaptable syntax as well as some added features and difficulties. // we could write the above example as: var anon = (a, b) => a + b; // or var anon = (a, b) => { return a + b }; // if we only have one parameter we can loose the parentheses var anon = a => a; // and without parameters var () => {} // noop // this looks pretty nice when you change something like: .filter(function (value) {return value % 2 === 0}); // to: .filter(value => value % 2 === 0); The fact that arrow functions lack their own this value is one of their main advantages. This is lexically bound to the scope it is contained in. This suggests that we can bid this awful pattern farewell: class Logger { dumpData(data) { var _this = this; // this dumps data to a file and get the name of the file via a callback dump(data, function (outputFile) { _this.latestLog = outputFile; }); } } // using arrow functions class Logger { dumpData(data) { dump(data, outputFile => this.latestLog = outputFile); } } However, there are a few pitfalls to be aware of: - This should be rather obvious, but since it is lexically bound, there is no way to change it. Neither call() nor apply() will be able to supply a different value for this. - There are no disagreements. (function () {console.log(arguments)})(1, 2); // will output (() => console.log(arguments))(1, 2); - When returning object literals, exercise caution. (() => {foo: 1})() // this will return undefined. 'foo: 1' is interpreted as a statement composed of a label and the literal 1 // the correct way should be wrapping it with parenthesis (() => ({foo: 1}))() // returns Object {foo: 1}

Conclusion

The majority of contemporary programming languages support lambda expressions (Python, Ruby, Java…). Simply said, they are expressions that generate functions. First-class functions, which essentially mean sending functions as arguments to other functions or assigning them to variables, are extremely crucial for a programming language to provide. Function expressions in JavaScript prior to ES6 provides us with an anonymous function (a function without a name). var anon = function (a, b) { return a + b }; We now have arrow functions in ES6 that offer a more adaptable syntax as well as some added features and difficulties. // we could write the above example as: var anon = (a, b) => a + b; // or var anon = (a, b) => { return a + b }; // if we only have one parameter we can loose the parentheses var anon = a => a; // and without parameters var () => {} // noop // this looks pretty nice when you change something like: .filter(function (value) {return value % 2 === 0}); // to: .filter(value => value % 2 === 0); The fact that arrow functions lack their own this value is one of their main advantages. This is lexically bound to the scope it is contained in. This suggests that we can bid this awful pattern farewell: class Logger { dumpData(data) { var _this = this; // this dumps data to a file and get the name of the file via a callback dump(data, function (outputFile) { _this.latestLog = outputFile; }); } } // using arrow functions class Logger { dumpData(data) { dump(data, outputFile => this.latestLog = outputFile); } } However, there are a few pitfalls to be aware of: - This should be rather obvious, but since it is lexically bound, there is no way to change it. Neither call() nor apply() will be able to supply a different value for this. - There are no disagreements. (function () {console.log(arguments)})(1, 2); // will output (() => console.log(arguments))(1, 2); - When returning object literals, exercise caution. (() => {foo: 1})() // this will return undefined. 'foo: 1' is interpreted as a statement composed of a label and the literal 1 // the correct way should be wrapping it with parenthesis (() => ({foo: 1}))() // returns Object {foo: 1}

Conclusion

The majority of contemporary programming languages support lambda expressions (Python, Ruby, Java…). Simply said, they are expressions that generate functions. First-class functions, which essentially mean sending functions as arguments to other functions or assigning them to variables, are extremely crucial for a programming language to provide. Function expressions in JavaScript prior to ES6 provides us with an anonymous function (a function without a name). var anon = function (a, b) { return a + b }; We now have arrow functions in ES6 that offer a more adaptable syntax as well as some added features and difficulties. // we could write the above example as: var anon = (a, b) => a + b; // or var anon = (a, b) => { return a + b }; // if we only have one parameter we can loose the parentheses var anon = a => a; // and without parameters var () => {} // noop // this looks pretty nice when you change something like: .filter(function (value) {return value % 2 === 0}); // to: .filter(value => value % 2 === 0); The fact that arrow functions lack their own this value is one of their main advantages. This is lexically bound to the scope it is contained in. This suggests that we can bid this awful pattern farewell: class Logger { dumpData(data) { var _this = this; // this dumps data to a file and get the name of the file via a callback dump(data, function (outputFile) { _this.latestLog = outputFile; }); } } // using arrow functions class Logger { dumpData(data) { dump(data, outputFile => this.latestLog = outputFile); } } However, there are a few pitfalls to be aware of: - This should be rather obvious, but since it is lexically bound, there is no way to change it. Neither call() nor apply() will be able to supply a different value for this. - There are no disagreements. (function () {console.log(arguments)})(1, 2); // will output (() => console.log(arguments))(1, 2); - When returning object literals, exercise caution. (() => {foo: 1})() // this will return undefined. 'foo: 1' is interpreted as a statement composed of a label and the literal 1 // the correct way should be wrapping it with parenthesis (() => ({foo: 1}))() // returns Object {foo: 1}

Conclusion

The arrow syntax builds on the syntax of the function expression and provides a shorthand way to declare functions that doesn't require using the function keyword. In fact, in cases where the function body consists of one line of code, we can define it in a single line:

const add = (parameter1, parameter2) => parameter1 + parameter2;

below are some examples of arrow functions and how you can use them for mathematical equations

const divide = (x = 2000, y = 100) => x / y;

What was the aim: ✓ has a function expression called divide ✓ divide divides 2000 by 100

const square = (x = 2) => x * x;

What was the aim: ✓ has an arrow function called square ✓ square arrow function takes one parameter and multiplies it times itself

const add = (a = 3, b = 4) => a + b;

What was the aim: ✓ has an arrow function called add ✓ add arrow function takes two parameters and adds them together

link to my gitHub for this exercise: