JavaScript functions as values: first-class functions and return values

JavaScript functions treated like variables: assign, pass, and return functions; how to return a value from javascript function vs returning a function; map callbacks; object and class methods; first order function in javascript; optional range factory.

Published

Updated

Read time 5 min read

Reviewed byDeepak Prasad

JavaScript functions as values: first-class functions and return values

Many searches read like homework questions: how to return a value from javascript function, javascript function to return value, or javascript return value from function. Others ask about javascript functions treated like variables or a first order function in javascript. All of that is the same big idea in the language spec: functions are values—you can store them, pass them, return them, and attach them to objects, just like numbers or strings. That is what people mean by first-class functions.

This guide pairs that idea with higher-order patterns (functions that take or return other functions), the normal return statement for plain data, and a small answer to the occasional javascript range function query using a function that builds an array.

Tested on: Node.js v20.18.2. A short note after each runnable snippet describes what you should see in the console.


Assign a function to a variable

A function expression produces a value you can bind with const or let, then call later by name.

javascript
const sayHello = function () {
  console.log('Hello, GoLinuxCloud!');
};

sayHello();
Output

You should see one line logging Hello, GoLinuxCloud!.


Pass a function as an argument

When javascript functions are treated like variables, you can hand one into another function the same way you would pass a number. The callee invokes the callback when it is ready.

javascript
const sayHello = function () {
  console.log('Hello, GoLinuxCloud!');
};
function callFunction(func) {
  func();
}
callFunction(sayHello);
Output

You should see one line logging Hello, GoLinuxCloud!.


Return a function from a function (closures)

Returning a function is still “returning a value”—the value happens to be callable. The inner function closes over name, which is why the greeting still works after createGreetingFunction has finished.

javascript
function createGreetingFunction(name) {
  return function () {
    console.log(`Hello, ${name}!`);
  };
}
const sayHelloToJohn = createGreetingFunction('John');
sayHelloToJohn();
Output

You should see one line logging Hello, John!.


How to return a value from a javascript function (primitives)

For the common phrasing javascript function that returns a value or function in javascript return value, use the return statement. Execution jumps back to the caller and passes the expression after return.

javascript
function add(a, b) {
  return a + b;
}
console.log(add(2, 3));
Output

You should see one line logging 5.

If you omit return or write return; without an expression, the caller receives undefined.


Function expressions and higher-order helpers

An anonymous function in an expression position is still a value. Arrays such as map accept a callback function and call it for each element.

javascript
const sayHello = function () {
  console.log('Hello, world!');
};
sayHello();
Output

You should see one line logging Hello, world!.

javascript
const numbers = [11, 24, 36];
const doubled = numbers.map(function (number) {
  return number * 2;
});
console.log(doubled);
Output

You should see one line logging [ 22, 48, 72 ].


Arrow functions as callback values

Arrow functions are concise function values, ideal for short callbacks like map.

javascript
const numbers = [1, 2, 3];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);
Output

You should see one line logging [ 2, 4, 6 ].


Functions as object properties

Object literal methods are still function values stored on a property; this refers to the receiver when you call person.sayHello().

javascript
const person = {
  name: 'John',
  sayHello() {
    console.log(`Hello, my name is ${this.name}!`);
  },
};
person.sayHello();
Output

You should see one line logging Hello, my name is John!.


Functions as class methods

Class bodies declare methods on the prototype chain; instances share the same function shape while keeping separate data in this.

javascript
class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.name}!`);
  }
}
const person = new Person('David');
person.sayHello();
Output

You should see one line logging Hello, my name is David!.


javascript range function: returning data from a factory

There is no single built-in range() like some other languages, but returning an array from a function is the same return-value story. Here range returns indices 0..n-1 using Array.from:

javascript
function range(n) {
  return Array.from({ length: n }, (_, i) => i);
}
console.log(range(4));
Output

You should see one line logging [ 0, 1, 2, 3 ].

You can generalize the callback to produce numeric intervals or stepping logic for your domain.


Summary

JavaScript treats functions as first-class values: you can assign them to variables, pass them as arguments, return them from other functions, and store them on objects or in closures. That is why javascript function as values and javascript return function value searches converge on the same idea—callbacks for Array.prototype.map, event listeners, dependency-injection style factories, and deferred work created by inner functions.

Readers often ask whether returning a function allocates heavily or breaks this; closures do capture outer variables by reference, so avoid capturing huge structures unintentionally, and remember that arrow functions close over lexical this while traditional functions honor dynamic this unless you bind them. Use named nested functions when stack traces matter, and anonymous arrows when brevity wins.


References

Olorunfemi Akinlua

Boasting over five years of experience in JavaScript, specializing in technical content writing and UX design. With a keen focus on programming languages, he crafts compelling content and designs …