JavaScript Functions & Arrow Syntax

Reusable blocks of code, parameters, and arrow functions

« JavaScript Variables & Data Types« Previous JavaScript Arrays & Methods »Next »

A JavaScript function is a block of code designed to perform a particular task, executed when "something" invokes it (calls it).

Function Declarations vs Arrow Functions

Standard function declaration: function add(a, b) { return a + b; }

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

Arrow functions provide a concise syntax and do not bind their own this.

Functions & Arrow Functions

Try It Yourself »

// Traditional function
function calculateGrade(score) {
  if (score >= 90) return "Distinction";
  if (score >= 80) return "Merit";
  if (score >= 70) return "Pass";
  return "Needs Improvement";
}

// Modern Arrow Function
const calculatePercentage = (points, total) => Math.round((points / total) * 100);

const userScore = 48;
const totalPossible = 50;
const percent = calculatePercentage(userScore, totalPossible);
const grade = calculateGrade(percent);

console.log(`Score: ${percent}%, Grade: ${grade}`);

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

What is the syntax for an ES6 arrow function with two parameters x and y returning their sum?

« Previous: JavaScript Variables & Data Types Next: JavaScript Arrays & Methods »