Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Arrow Function In JavaScript
Mohammad Moiz Ali
Mohammad Moiz Ali

Posted on • Originally published atMedium

     

Arrow Function In JavaScript

Arrow functions are a newer syntax for creatingfunctions inJavaScript. They provide a more concise syntax and a different way of handling thethis keyword compared to traditional functions. In this blog post, we'll explore arrow functions in JavaScript, including their syntax, parameters, and benefits.

Syntax of Arrow Functions in #"Hello, world!");}

Enter fullscreen modeExit fullscreen mode

In this code, we declare an arrow function calledmyFunction that logs the message"Hello, world!" to the console when it is called. To call the function, we simply use its name followed by a set of parentheses:

myFunction(); // logs "Hello, world!" to the console
Enter fullscreen modeExit fullscreen mode

Parameters in Arrow Functions:

Like traditional functions, arrow functions can also accept input values called parameters, which allow you to pass data into the function when it is called. Parameters are declared inside the parentheses when the function is declared. Here's an example of an arrow function that takes two parameters and logs their sum to the console:

const addNumbers = (num1, num2) => {  console.log(num1 + num2);}
Enter fullscreen modeExit fullscreen mode

In this code, we declare an arrow function calledaddNumbers that takes two parameters:num1 andnum2. When the function is called, it logs the sum ofnum1 andnum2 to the console. To call the function with specific values for the parameters, we pass them in as arguments inside the parentheses:

addNumbers(5, 7); // logs 12 to the console
Enter fullscreen modeExit fullscreen mode

Benefits of Arrow Functions:

Arrow functions provide a number of benefits over traditional functions in JavaScript. One major benefit is their more concise syntax, which can make your code easier to read and understand. For example, the arrow function syntax allows you to write a simple function like this:

const doubleNumber = num => num * 2;
Enter fullscreen modeExit fullscreen mode

This function takes a single parameter callednum, and returns its value multiplied by 2. The arrow function syntax allows you to omit the parentheses around the parameter, as well as the curly braces around the function body, since it's a one-liner.

Another benefit of arrow functions is that they handle thethis keyword differently than traditional functions. In traditional functions, the value ofthis can be affected by how the function is called. In arrow functions, however, the value ofthis is always determined by the surrounding context where the function is declared. This can make your code more predictable and easier to reason about.

Conclusion:

Arrow functions provide a more concise syntax and a different way of handling thethis keyword compared to traditional functions. They can make your code easier to read and understand, and provide a more predictable behavior for thethis keyword. By understanding how to use arrow functions in JavaScript, you can write more efficient and maintainable code.

Top comments(2)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
tracygjg profile image
Tracy Gilmore
After my first contact with a computer in the 1980's, I taught myself to program in BASIC and Z80 assembler. I went on to study Computer Science and have enjoyed a long career in Software Engineering.
  • Email
  • Location
    Somerset, UK
  • Education
    BSc (Hons) Computer Science
  • Work
    Software Engineer specialising in web technologies, frontend and full stack (Node & xAMPP)
  • Joined

Hi Mohammad,
May I suggest you add syntax highlighting to your code blocks. This can be done by adding the word javascript immediately after the initial three back-ticks.

Take a look at this

Regards, Tracy

CollapseExpand
 
makstyle119 profile image
Mohammad Moiz Ali
Full Stack DeveloperAnime and manga loverCodingJavaScriptalways with errorMAKSTYLE11903/06/2022😵
  • Education
    Arbre IT Supported and Solution
  • Work
    Frontend Developer
  • Joined

thanks a lot 😇, Tracy, I'm surely going to use this for now on

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Full Stack DeveloperAnime and manga loverCodingJavaScriptalways with errorMAKSTYLE11903/06/2022😵
  • Education
    Arbre IT Supported and Solution
  • Work
    Frontend Developer
  • Joined

More fromMohammad Moiz Ali

DEV Community

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

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp