what are arrow functions

before we jump into what is an arrow function lets talk about functions in JavaScript. before ES6 every time we wrote a function we use the word Function Keyword,

ex,
const divide = function (x,y){
return x/y;
}

we could had an Anonymous function
or a name function

ex,
function divide(){
}

but we still using the function keyword. and that could get kinda lengthy in our code specially when we are using more complex code and always passing in the function keyword.

so this is where arrow functions come in.

Arrow function is one of the features introduced in the ES6 version of JavaScript. It allows you to create functions in a cleaner way compared to regular function expression.

but theres also on some situations they do behave differently. we will talk about that as we go but for now what this really means is that makes the function shorter in a way of writing a function.

SYNTAX

ex, from the divide function from above lets write in as an arrow function

const divide = (x,y) => {
return x/y;
}

Implicit Return

we can also write as an implicit return that means i wont need the return keyword and we get rid of the curly braces and replace it with parenthesis

ex,
cont divide = (x,y) => (x / y) whatever expression is inside of the parenthesis will be automatically returned, it's an explicit return.

but we can also write it even shorter cont divide = (x,y) => x / y by taking out the parenthesis. you can only do this if you have a single expression, you cannot pass a if else statement

but this is not the only difference between arrow functions and regular functions. if we go to the MDN

other differences:

Use of this keyword

unlike Regular functions, arrow function does not have their own "this" keyword. like a regular function expression does.
the keyword this is going to change is going to be set in a given function depending on how the function is called.

but with an arrow function the keyword this is not going to change relative to the context or the parent that the function is define in.

ex,

const person ={
name: "Lupita",
sayHi: function () {
console.log(this.name, "says hi!")
}
}
person.sayHi()

okay when i call person.sayHi the value of this is going to be determined by how I'm calling it, I'm calling it sayHi() on person the object person will be the value of this - this.name should be Lupita. so when i run the code i get

Lupita says hi!

However if i use an arrow function instead

we just get says hi! so whats going on here is that the value of this is not being changed , not being set when im calling person.sayHi() like a normal function would. if we look at just this.

const person ={
name: "Lupita",
sayHi:()=> {
console.log(this)
console.log(this.name, "says hi!")
}
}

we see here this is just set to the window objet, just as if this function where defined on its own no inside of the person object. and it doesn't matter how i call that function
if its an arrow function the value of this is not going to be set to that person object unless i where to bind it. but it's own an arrow function does not get a new or diff value for this.

Using a new keyword

Regular functions created using function declarations or expressions are constructible and callable. Regular functions are constructible; they can be called using the new keyword.

However, the arrow functions are only callable and not constructible, i.e., arrow functions can never be used as constructor functions.

ex,

regular function

as you can see it returns 5,

Arrow function

So this is basically Arrow functions. If you want further reference, MDN
is a good place to check.

Thank you for reading :)