Surya JS Journey

Learn JavaScript through concepts, code, and guided practice.

A focused workspace for concept study, interactive examples, visual explanations, and challenge solving.

FunctionsBeginner

Arrow Functions

Arrow functions provide a shorter function syntax and handle `this` differently from regular functions.

Arrow functions are concise and commonly used in callbacks, array methods, and modern component logic. Unlike regular functions, they do not create their own `this`, which makes them useful in some cases and inappropriate in others. Understanding both the syntax and the `this` behavior is essential.

Explanation

Arrow functions are concise and commonly used in callbacks, array methods, and modern component logic. Unlike regular functions, they do not create their own `this`, which makes them useful in some cases and inappropriate in others. Understanding both the syntax and the `this` behavior is essential.

Key Points

  • Arrow functions are shorter and often clearer for small callback logic.
  • They do not bind their own `this` value.
  • A concise arrow body can return an expression implicitly.

Common Mistakes

  • Using an arrow function as an object method and expecting `this` to point to the object.
  • Forgetting parentheses or braces when switching between implicit and explicit return styles.
  • Assuming arrow functions always replace regular functions safely.

Practice Workspace

arrow-functions.js

Edit the code, run it in the browser, and inspect the console output below. Reset restores the original snippet for this page.

Editor

3 lines

Output

0 entries

Mode

practice

Workspace Notes

Changes stay local until you run the code. Reset restores the original snippet immediately for another pass.

Live editing

Safe to change before every run.

Fast reset

Return to the original starter instantly.

arrow-functions.js
3 linesMonaco Editor
Loading...

Editor Actions

Use the editor to explore the example, then run it to inspect the console.

Console0 entries

Run the code to see output here.

Expected Output

6

Continue in Playground

Open this concept example in the shared playground to keep experimenting without leaving the broader workspace flow.

Open in Playground

Related Concepts

Functions

Functions package reusable behavior and are one of the most important building blocks in JavaScript.

Callbacks

A callback is a function passed into another function so it can run later or customize behavior.

This Keyword

The value of `this` depends on how a function is called, not where it was written.

Practice Challenges

Complete an arrow callback

7 min

Use an arrow function to transform a list of numbers into doubled values.