• Hajipur, Bihar, 844101

☰
❮
❯

JavaScript

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

JavaScript

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

JS Arrow Function

← Previous Next →

📘 JavaScript Arrow Functions – Shorter Syntax, Different this

An arrow function is a compact alternative to traditional function expressions. It has no this, no arguments, no super, and no new.target bindings.

🔹 Basic Syntax

// Traditional function
function add(a, b) {
  return a + b;
}

// Arrow function
const add = (a, b) => a + b;

🔹 Key Differences from Regular Functions

Feature Regular Function Arrow Function
this binding Dynamic (based on caller) Lexical (based on surrounding scope)
arguments object Available Not available
Constructor support Can be used with new ❌ Cannot be used as constructor

🔹 Example 1 – Without Braces

const greet = name => `Hello, ${name}`;
console.log(greet("Amit")); // Hello, Amit

🔹 Example 2 – With Block Body

const multiply = (x, y) => {
  return x * y;
};

🔹 Example 3 – With Array Methods

const numbers = [1, 2, 3, 4];
const squares = numbers.map(n => n * n);
console.log(squares); // [1, 4, 9, 16]

Practice Questions

Q1. Write an arrow function double(x) that returns double the input. Call it with 10.

Q2. Create an arrow function greet(name) that returns "Hello, name". Test it with "Riya".

Q3. Convert this regular function to arrow function:

function sum(a, b) {
  return a + b;
}

Q4. Use an arrow function to map over [1, 2, 3] and return their cubes.

Q5. Create an arrow function isEven(num) that returns true if the number is even.

Q6. Write an arrow function inside setTimeout that prints "Hi after 1 second" after 1000ms.

Q7. Write an arrow function filterWords(words) that filters all words longer than 4 letters from an array.

Q8. Create a function getFullName that takes first and last names and returns full name using an arrow function.

Q9. Create a function that returns another arrow function to multiply a number by a fixed multiplier. Test it.

Q10. Inside an object method, use an arrow function as a callback to preserve this when using setTimeout.

JS Arrow Function Quiz

Q1: What is a main feature of arrow functions?

A. Longer syntax
B. Their own this
C. Lexical this
D. Always async

Q2: Which of the following is a correct arrow function?

A. let greet = => "Hello"
B. let greet = () => "Hello"
C. let greet = [] => "Hello"
D. let greet = {} => "Hello"

Q3: Can arrow functions be used as constructors with new?

A. Yes
B. Only in strict mode
C. No
D. Only for classes

Q4: Arrow functions automatically return the result if:

A. Used inside loops
B. No parameters exist
C. Braces {} are used
D. Braces {} are not used

Q5: Do arrow functions have their own arguments object?

A. Yes
B. No
C. Only in strict mode
D. Only inside classes

Q6: How do arrow functions handle this?

A. They define a new this
B. They ignore this
C. They capture this from the enclosing scope
D. They throw error if this is used

Q7: Which of these is NOT true about arrow functions?

A. They are concise
B. They can be async
C. They have lexical this
D. They support new keyword
← Previous Next →
Login
Go Back Top