Understanding ES6 Functions in 3 minutes: Tutorial for beginners

Understanding ES6 Functions in 3 minutes: Tutorial for beginners

·

3 min read

ES6 was released in 2015 and is also referred to as "ECMAScript 6." A standard scripting language used in JavaScript is ECMAScript, and the version of ECMAScript currently supported in contemporary browsers is ES5. ES6 makes coding simpler for programmers and improves code performance.

What are the ES6 arrow functions?

ECMAScript 6 offers a cutting-edge and user-friendly way to comprehend arrow function expressions. To indicate an arrow function, an equals sign is frequently followed by a character with greater significance, like =>.

It is always intended for "Arrow functions" to be anonymous functions. Let's implement it with an example of calculating the product of two numbers, and we shall name it arrowFunction.js

Example of the multiply function:

const multiply = (x, y) => {

return x * y;

}

// Invoke function to find product

multiply(20, 4);

Output

80

Instead of using the keyword function, we use the => arrow when writing a procedure. It performs mainly like a regular function expression, with a few more intricate differences described under "Arrow Functions" on the Mozilla Developer Network. Here we used to do squaring x that only requires one number to be passed as an argument where the Parentheses are omitted from the list.

Defining the square function:

const square = x => {

return x * x;

}

// Invoke function to find product

square(7);

Output

49

If the function is only a single-line return, the curly brackets and the return statement can be omitted, as seen in the example below.

const squares = x => x * x;

// Invoke function to find product

squares(9);

Output

99

ES6 Variables :

And now, we can look into the variables assigned in the Javascript on the features of ES6.

LET :

In javascript, the keyword Let can’t get hoisted, and it can be reassigned but can’t be redeclared, and it comes under the Block Scope.

console.log(city)  //   ERROR

let city = 'coimbatore'

console.log(city) // Coimbatore

Output:

ERROR / Coimbatore

The console.log (city) is declared even before the initialisation, showing an error.

Const:

In Javascript, the Const keyword comes under block scope, where we cannot be able to hoist, reassign, and redeclare.

 //console.log(destination) // ERROR

 const destination = "Chennai"

 console.log(destination) // Chennai

Output :

Chennai

Properties of the Arrow functions :

In ECMAScript 2015 (ES6), arrow functions are a straightforward way to write anonymous, lexically scoped functions.

The arrow function uses fewer lines of code to achieve the same result as the regular function.

The arrow function automatically binds this object to the context of the surrounding code.

The value of this keyword inside the arrow function does not depend on how it is called or defined.

The arrow functions may include both regular and other arrow functions.

If the arrow is in the inner function, it refers to the parent scope in which it is defined.

Conclusion :

As we discussed, those mentioned above explain the ECMAScript and some of its arrow function properties in-depth manner.

Also, read our article: blog.skillsafari.in/top-5-trending-technolo..

Did you find this article valuable?

Support Skill Safari by becoming a sponsor. Any amount is appreciated!