DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for JS Arrow Function
Mursal Furqan Kumbhar
Mursal Furqan Kumbhar

Posted on

JS Arrow Function

In JavaScript, we often don't need to name our functions, especially when passing a function as an argument to another function. Instead, we can create inline functions. We don't need to name these functions because we don't reuse them anywhere else.

There're two ways to use arrow functions. Let's see the syntax.

Syntax

const ArrowFun = function() {
     const myVar = 'Value'
     return myVar
}
Enter fullscreen mode Exit fullscreen mode

We can omit the function keyword. See the below syntax which results similar to above

const ArrowFun = () => {
     const myVar = 'Value'
     return myVar
}
Enter fullscreen mode Exit fullscreen mode

Also, there's this other way to write down an arrow function in JavaScript. Like, when there's no function body, and only a return statement, arrow function syntax allows to omit the keyword return as well as the brackets surrounding the code. Have a look on to a below code snippet. πŸ”½

const myFunc = () => 'Value'
Enter fullscreen mode Exit fullscreen mode

The above mentioned code will still return the strong value by default.

const magic = {} => new Date() //returns a Date
Enter fullscreen mode Exit fullscreen mode

Moreover, just like any other function, you can pass Params and other operators to the arrow functions in JavaScript.

Top comments (1)

Collapse
 
suchintan profile image
SUCHINTAN DAS

Yes Mursal 🌝, I also use arrow functions a lot during my day to day work. It's really really helps in making the codebase clean and simple for any new developers ✌.

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

β­οΈπŸŽ€ JavaScript Visualized: Promises & Async/Await

async await