Write a Small Arrow Function

An arrow function is a compact callable value. An expression body returns its expression directly; a brace body needs return when a result is required. Arrows inherit this from their surrounding context.

Before this topic, review Store a Function as a Value if its terms are unfamiliar.

This is JavaScript using language features and the host console. Read the initial values, then follow each operation to its displayed result. A declaration names a value, a function call performs an operation, and console.log displays its arguments.

Arrow functions, introduced in ES6, are a modern way to write functions in JavaScript. They are shorter, often more intuitive, and come with lexical this binding—meaning they inherit the this value from their surrounding context. In this tutorial, we'll dive deep into how they work, where to use them, and where they may surprise you.

The syntax of an arrow function is concise and clean:

const add = (a, b) => {
  return a + b;
};

This is equivalent to a traditional function like:

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

If your function has only one expression and you want to return it, you can omit the return keyword and the curly braces:

const multiply = (x, y) => x * y;

console.log(multiply(3, 4)); // 12

If the arrow function takes only one parameter, parentheses are optional:

const square = x => x * x;

console.log(square(5)); // 25

To return an object literal, wrap it in parentheses to avoid confusion with the function block:

const getUser = () => ({ name: "Alice", age: 30 });

console.log(getUser()); // { name: "Alice", age: 30 }

The biggest shift with arrow functions is their handling of this. Unlike regular functions, arrow functions do not bind their own this. Instead, they inherit it from the parent scope.

function Timer() {
  this.seconds = 0;
  setInterval(() => {
    this.seconds++;
    console.log(this.seconds);
  }, 1000);
}
new Timer();

// Logs incrementing seconds: 1, 2, 3, ...

If we had used a regular function inside setInterval, this would be undefined or refer to the global object, breaking the logic.

Arrow functions are not meant to be used with new keyword. They lack a [[Construct]] method and will throw an error:

const Person = (name) => {
  this.name = name;
};
const p = new Person("Bob"); // TypeError

Arrow functions do not have their own arguments object. If you try to use it, you’ll get the arguments from the outer function scope.

const showArgs = () => {
  console.log(arguments);
};
showArgs(1, 2); // ReferenceError: arguments is not defined

If you need arguments, use a regular function.

• Callback functions like map, filter, reduce, forEach
• Event handling in frameworks like React
• Simple utility functions with concise logic

const nums = [1, 2, 3, 4];
const doubled = nums.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8]

• When you need dynamic this (e.g., in event handlers that refer to the element)
• When you need arguments object
• When defining object methods that rely on this

const user = {
  name: "Ella",
  greet: () => {
    console.log("Hi, " + this.name);
  }
};
user.greet(); // Hi, undefined

Here, this.name is undefined because this is not bound to the object.

Arrow functions offer a sleek and powerful way to write JavaScript. They simplify syntax and bring clarity in many scenarios—especially where lexical scoping of this is beneficial. However, they are not a complete replacement for regular functions. Understanding where they fit and where they don’t will elevate your JavaScript fluency.

An arrow is not a constructor and has no own this or arguments. Returning an object literal requires parentheses around the literal.

Your task: Replace passed(72) with passed(40). Predict the result before running the edited program.

The source is repeated here. If the edit targets the HTML rather than the script, use the markup repeated below; the worked answer also repeats the changed markup.

The expression body returns the comparison for the new argument.

An arrow function is a compact callable value. An expression body returns its expression directly; a brace body needs return when a result is required. Arrows inherit this from their surrounding context.

Check your variation against this explanation: The expression body returns the comparison for the new argument.

Use the JavaScript array reference library for individual array operations and boundary tests to check a rule independently.