ProgramGuru

Functions as Values

Choose how a student name should appear

A school report needs uppercase names, while a welcome message needs names with a greeting. The surrounding task is the same: take a name and apply a chosen formatting rule.

A function is a first-class value when a language allows it to be stored, passed as an argument and returned from another function. JavaScript supports these operations, so the formatting rule itself can become an input.

  1. Pass a function

    Supply a formatting rule without running it too early.

  2. Follow the callback

    Identify who calls the rule and which argument it receives.

  3. Choose a contract

    Specify the expected input and returned value.

Pass the rule together with the student name

  1. Two inputs

    Supply data and the operation to apply.

    Maya + uppercase

  2. Apply the rule

    Call the supplied function with the name.

    transform(name)

  3. Use the result

    Receive a formatted string.

    MAYA
Read these stages alongside the complete example. They explain the relationship; they do not execute code.

Passing a function leaves the decision to the receiver

A callback is a function supplied to other code to be called there. The word describes its role, not its timing: callbacks can run immediately or later, depending on the receiving code.

Writing uppercase passes the function value. Writing uppercase("Maya") calls it immediately and produces a string. Our formatName function expects a callable second argument, not an already formatted string.

Before starting, review parameters and returned values. These examples use JavaScript; other languages can use different syntax and rules.

Use two rules with the same formatter

formatName calls transform(name) and returns its result. uppercase receives Maya and returns MAYA; welcome receives Ravi and returns Welcome, Ravi.

The function declarations define the rules. The calls at the bottom select which rule to use for each student.

JavaScript · local teaching example

function uppercase(name) {
  return name.toUpperCase();
}
function welcome(name) {
  return "Welcome, " + name;
}
function formatName(name, transform) {
  return transform(name);
}
console.log(formatName("Maya", uppercase));
console.log(formatName("Ravi", welcome));

Expected output

MAYA
Welcome, Ravi

Apply the rule to a small change

Create a badge rule that adds Student: before a name, then pass that rule to formatName for Asha.

Worked answer

badge must return the new string. Passing badge without parentheses lets formatName supply Asha when it calls the rule.

JavaScript · local teaching example

function badge(name) {
  return "Student: " + name;
}
function formatName(name, transform) {
  return transform(name);
}
console.log(formatName("Asha", badge));

Expected output

Student: Asha

Recognize mistakes and limits

Define the callback contract: here it receives one string and returns one string. A function that only prints the name returns undefined and does not meet that contract.

A function value does not become asynchronous simply because it is passed elsewhere. This formatter calls its rule during the current call. A timer uses a different scheduling contract.

Do not pass an unexpected value and hope it behaves like a function. At an external boundary, validate the input or use a restricted list of supported formatting rules.

For the language or tool rules used here, see JavaScript function behavior.

Check the core idea

Which argument lets formatName call the uppercase rule with its own name?
Choose one answer. You can try again.

Answer and explanation

uppercase

Correct. The function value can be called by formatName.

Apply the idea to a new situation

Does receiving a callback guarantee asynchronous execution?
Choose one answer. You can try again.

Answer and explanation

No; the receiving operation determines when the callback runs.

Correct. Our formatter calls it synchronously.

A function can be an input, not only a named task

Passing operations as values separates a reusable task from the rule that varies. State the callback contract and distinguish passing the function from calling it.

Connect this idea with functions that return other functions and collection operations that receive callbacks.

Apply this idea to an interface in React event handlers and callback props: a component passes a function now so an interaction can call it later.

Reaching the recap and completing the quizzes are separate milestones.

    Next lesson: Map, Filter and Reduce →