A few important things to consider before we begin: I am a beginner developer and writing articles is my way of learning, this means that there might be errors. If you find any, please let me know in the comments and І will correct them :) Some of the information like definitions or examples are taken from the internet, if you see something that belongs to you and would like credit or it to get removed - please contact me and І will be happy to do so. Learning is fun, so let’s go!🔥 Arrow Functions are a new ES6 js feature and they are essential to understand as they help make your life as a developer easier and more fun :) Let's try to understand it better by comparing them with regular Functions. Here are a few examples of regular functions: Example 1 - Function with two parameters: function sum(a, b) {
 return a + b
} Example 2 - Function with one parameter: function isPositive (number) { 
return number ›= 0 
} Example 3 - Function with no parameters: function randomNumber() {
return Math.random 
} Example 4 -  Anonymous function without a name: document. addEventListener('click', function() { 
console.log(‘Click’)
}) Now let’s try to convert these into the . Regular Functions Arrow Functions Example 1 - Function with two parameters. function sum(a, b) {
 return a + b
}

step 1: 
sum(a, b) {
 return a + b
}

step 2: 
let sum = (a, b) {
 return a + b
}

step 3: 
let sum = (a, b) => {
 return a + b
} This is one of the easiest and most common functions to go around. Step 1 - remove keyword. This is because with arrow function keyword is assumed. function function Step 2 - assign our function to a variable. When we have keyword, it will do it for us but since we remove it, we have to assign our function to a variable in order to store it. For this, we use . Thus we create a variable and with sign store our arrow function in there. function sum let sum = Step 3 - add Arrow ➡️ 😄. This is what creates the magic. It shows that we have parameters on the left side of the Arrow and on the right side of it, in the brackets, we have the function. Now our Example 1 function and function in step 3 are the same! Congratulations on your first arrow function 🎉 This is not the end, we could make it even better! step 3: 
let sum = (a, b) => {

 return a + b

}

Shorten to one line
let sum = (a, b) => a + b With the arrow function, we can shorten our code to one line. This can be done by removing keyword and curly brackets. This is possible because everything after the arrow is assumed to be returned so we can omit and . Now 1st example function = function in step 3 = one-line function, AMAZING MAGIC 🔥 return return {} Example 2 - Function with one parameter: function isPositive (number) { 
return number ›= 0 
} 

Step 1: 
isPositive (number) { 
return number ›= 0 

}

Step 2: 
let isPositive = (number) { 
return number ›= 0 
}

Step 3: 
let isPositive = (number) => { 
return number ›= 0 
}

Step 4: 
let isPositive = (number) => number ›= 0 

Step 5: 
let isPositive = number => number ›= 0 Now lets repeat the proccess for our function with one parameter. Step 1 - remove keyword. function Step 2 - store our function by creating variable with the help of statement. let Step 3 - ARROW ➡️ Step 4 - Remove and brackets. Beautiful 🤓 return Step 5 - since we have one parameter, we can even remove parentheses around the parameter we pass into the function. Bonus Example 3 - Function with no parameters function randomNumber() {
return Math.random 
} “І want to play a game” 👹 Let’s practice a bit. This example follows our 4 steps. Try to do it by yourself and write in the comments one line that you get. Before that, don’t look into the comments. Example 4 -  Anonymous function without a name: document. addEventListener('click', function() { 
console.log(‘Click’)
})
step 1: 
document. addEventListener('click', () => { 
console.log(‘Click’)
})
step 2: 
document. addEventListener('click', () => console.log(‘Click’)) Anonymous function without a name this is where really shine. Arrow Functions Step 1 - remove and add arrow ➡️. Note that we don’t have to assign it to a variable by writing and . function let = Step 2 - put everything in one line and remove curly brackets. It is nice that Arrow Functions help us to write less code but now comes the whole point of using them -  they redefine keyword inside of Arrow Functions as opposed to in Normal Functions. Here it is used much differently. this this : w3schools explains the difference “In regular functions the this keyword represented the object that called the function, which could be the window, the document, a button, or whatever. With arrow functions the this keyword represents the object that defined the arrow function.” always So basically, Arrow Functions helps us to simplify function scope and make the process of using keyword much easier. this To better understand it let’s see how is used in ES5. this var cat = {
name: 'Garfield', 
showName: function() {
 alert(this.name);
  }
};
cat.showName(); // it will show - Garfield Here we have a simple object - cat. Inside this object, we have a (function that belongs to an object). So what is referring to here? Right! It will point out to the object method this cat. Next, lets see how behaives inside method’s function: this var cat = {
  name: 'Garfield',
  tasks: ['transform', 'eat fish', 'sleep'],
  showTasks: function() {
    this.tasks.forEach(function(task) {
      alert(this.name + " wants to " + task);
    });
  }
};
cat.showTasks();
// [object Window] wants to transform
// [object Window] wants to eat fish
// [object Window] wants to sleep Hmm… you see how instead of we are getting [object Window]? cat What might be our guesses as to why this is happening? Method’s inner function? showTasks: function() {
    this.tasks.forEach(function(task) {
      alert(this.name + " wants to " + task);
    }); The whole object - cat? The truth is that has fallen out of scope. ‘This’ always points to the owner of the function it is in and since we are out of the scope - we then deal with a global object, which is window. this When it is inside of an object’s method — the function’s owner is the object. Thus the ‘ ’ keyword is bound to the object. Yet when it is inside of a function, either stand-alone or within another method, it will always refer to the window/global object. this Our method has two functions with , the one that should point to the name is inner and thus falls out of the scope. this One more example from the internet: function Person() {
    this.name = 'Jack',
    this.age = 25,
    this.sayName = function () {

        // this is accessible
        console.log(this.age);

        function innerFunc() {

            // this refers to the global object
            console.log(this.age);
            console.log(this);
        }

        innerFunc();

    }
}

let x = new Person();
x.sayName();

// output:
// 25
// undefined
// Window {} So, in regular functions changes according to the way that function is invoked - it is dynamic. This is a poor design which can in some cases lead to unpredicted behavior while using keyword. this this On the other hand, the value of inside an arrow function remains the same throughout the lifecycle of the function and is always bound to the value of in the closest non-arrow parent function which means No matter how or where being executed, value inside of an arrow function always equals value from the outer function. this this this this function Person() {
    this.name = 'Jack',
    this.age = 25,
    this.sayName = function () {

        console.log(this.age);
        let innerFunc = () => {
            console.log(this.age);
        }

        innerFunc();
    }
}

const x = new Person();
x.sayName();
// output:
// 25
// 25 One Important thing to remember is that even though Arrow Functions brings lexical scoping that makes it easier to use , you should be careful because we cannot use it everywhere. this If you like the article and find it helpful, І will be happy to further explore Arrow Functions together with you  🎉 JS Arrow Functions For Newbies Pt2?  👍 👎

JS Arrow Functions for Newbies

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Is Artificial Intelligence Turning Human Learning a Thing of the Past?

A Deep Dive Into the JavaScript Some() Method

Demystifying this.bind in React

Navigate JavaScript ES6 Syntaxes for Efficient and Readable Code

Getting Started With Functions in JavaScript: Declarations, Parameters, and More

Is Artificial Intelligence Turning Human Learning a Thing of the Past?

A Deep Dive Into the JavaScript Some() Method

Demystifying this.bind in React

Navigate JavaScript ES6 Syntaxes for Efficient and Readable Code

Getting Started With Functions in JavaScript: Declarations, Parameters, and More

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps