Arrow Functions (Basic)0%
Array Basics and Methods

Arrow Functions (Basic)

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Arrow Functions (Basic) in JavaScript

Introduced in ECMAScript 2015 (ES6), Arrow Functions provide a concise, modern syntax for writing functions. Beyond their compact appearance, arrow functions have important lexical scoping properties that make them indispensable in modern frontend libraries like React.

1. Syntax Evolution: From Regular to Arrow

Let's see how traditional function syntax transforms into an arrow function:

JavaScript
// 1. Traditional Function Expression:
const add = function(a, b) {
return a + b;
};
 
// 2. Arrow Function (Standard):
const add = (a, b) => {
return a + b;
};
 
// 3. Arrow Function with Implicit Return (Concise Body):
const add = (a, b) => a + b;

2. The Power of Implicit Return

If an arrow function contains only a single expression, you can:

  1. 1
    Omit the curly braces { ... }.
  2. 2
    Omit the return keyword!

The expression is automatically evaluated and returned:

JavaScript
// Double a number:
const double = x => x * 2;
console.log(double(15)); // 30
 
// Capitalize text:
const shout = msg => msg.toUpperCase();
console.log(shout("javascript")); // "JAVASCRIPT"
Important Warning
[!WARNING] If you open curly braces { ... }, the implicit return is disabled! You must write return explicitly: ```javascript // ❌ WRONG: Returns undefined because curly braces require 'return'! const multiply = (a, b) => { a * b; }; // ✅ CORRECT: const multiply = (a, b) => a * b; // OR: const multiply = (a, b) => { return a * b; }; ```

3. Returning Object Literals with Implicit Return

If you want an arrow function to implicitly return an object literal, wrap the object in parentheses ({ ... }) so JavaScript doesn't confuse the object braces with function body braces:

JavaScript
// ❌ FAILS: Engine thinks {} is a function code block!
const makeUser = (name, age) => { name: name, age: age };
 
// ✅ CORRECT: Wrap in parentheses:
const makeUser = (name, age) => ({ name, age });
 
console.log(makeUser("Sumit", 25)); // { name: "Sumit", age: 25 }

4. Arrow Functions as Callbacks

Arrow functions shine brightest as inline callbacks for array methods and event listeners:

JavaScript
const prices = [100, 200, 300, 400];
 
// Clean 1-line transformation:
const discounted = prices.map(p => p * 0.9);
console.log(discounted); // [90, 180, 270, 360]
 
// Filtering:
const highPrices = prices.filter(p => p >= 250);
console.log(highPrices); // [300, 400]

5. When NOT to Use Arrow Functions

Arrow functions do not have their own this, arguments, or prototype:

  • Do not use arrow functions for object methods that rely on this.
  • Do not use arrow functions as class constructors (cannot use with new).
Interactive Quiz

Practice Quiz

Question 1
What character sequence defines an arrow function in JavaScript?
Question 2
What is an "implicit return" in an arrow function?
Question 3
How do you implicitly return an object literal from a concise arrow function?
Question 4
What is the output of const calc = (x, y) => { x + y }; console.log(calc(2, 3));?
Question 5
Can arrow functions be used as constructors with the new keyword?
Next Lesson

Array Basics and Methods

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Function Parameters and Return ValuesArray Basics and Methods

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext