Return values in Javascript - Deep Dive

Overview - Return values

What is it?

Return values are the results that a function sends back after it finishes running. When you call a function, it can do some work and then give you a value to use later. This value is called the return value. If a function does not explicitly return something, it returns undefined by default.

Why it matters

Return values let functions communicate results to the rest of the program. Without return values, functions could only do things inside themselves but never share outcomes. This would make programs less flexible and harder to build because you couldn't reuse or combine results easily.

Where it fits

Before learning return values, you should understand what functions are and how to call them. After mastering return values, you can learn about function parameters, callbacks, and how to chain functions together for more complex tasks.

Mental Model

Core Idea

A return value is the output a function hands back after doing its job, like handing you a finished product.

Think of it like...

Imagine ordering a sandwich at a deli. You tell the worker what you want (call the function), they prepare it (run the function), and then they hand you the sandwich (return value) to eat or share.

Function call → [Function does work] → Returns value → Program uses value

┌───────────────┐       ┌───────────────┐       ┌───────────────┐
│ Call function │ ───▶ │ Function body │ ───▶ │ Return value  │
└───────────────┘       └───────────────┘       └───────────────┘

Build-Up - 7 Steps

1

Foundation

What is a return value?

Concept: Introduce the idea that functions can send back a result after running.

In JavaScript, a function can use the keyword return followed by a value to send that value back to where the function was called. For example: function add(a, b) { return a + b; } Calling add(2, 3) will give back 5.

Result

Calling add(2, 3) returns 5.

Understanding that functions can produce outputs is key to using them beyond just running code blocks.

2

Foundation

Default return value is undefined

Concept: Explain what happens if a function does not explicitly return anything.

If a function does not have a return statement, JavaScript automatically returns undefined. For example: function greet(name) { console.log('Hello ' + name); } Calling greet('Alice') prints a message but returns undefined.

Result

greet('Alice') outputs 'Hello Alice' but returns undefined.

Knowing that functions return undefined by default helps avoid confusion when no return is present.

3

Intermediate

Returning different data types

🤔Before reading on: do you think a function can only return numbers? Commit to your answer.

Concept: Functions can return any type of value: numbers, strings, objects, arrays, or even other functions.

JavaScript functions are flexible and can return any kind of data. Examples: function getName() { return 'Bob'; } function getList() { return [1, 2, 3]; } function getObject() { return { age: 30 }; } function getFunction() { return function() { return 'Hi'; }; }

Result

Each function returns a different type: string, array, object, and function respectively.

Recognizing that return values can be any data type opens up powerful ways to structure code.

4

Intermediate

Return stops function execution

🤔Before reading on: does code after a return statement run? Commit to yes or no.

Concept: When a return statement runs, the function immediately stops and sends back the value.

Consider this function: function test() { return 1; console.log('This will not run'); } The console.log line never executes because return ends the function.

Result

Calling test() returns 1 and skips the console.log line.

Understanding that return ends function execution helps prevent bugs where code after return is mistakenly expected to run.

5

Intermediate

Returning multiple values using objects or arrays

Concept: Since functions return only one value, you can return an object or array to send multiple pieces of data.

Example returning an object: function getUser() { return { name: 'Alice', age: 25 }; } Example returning an array: function getCoordinates() { return [10, 20]; } You can then access parts like user.name or coordinates[0].

Result

Functions return grouped data that can be unpacked or accessed later.

Knowing how to return multiple values in one package makes functions more versatile and expressive.

6

Advanced

Returning functions (higher-order functions)

🤔Before reading on: can a function return another function? Commit to yes or no.

Concept: Functions can return other functions, enabling powerful patterns like closures and function factories.

Example: function multiplier(factor) { return function(number) { return number * factor; }; } const double = multiplier(2); console.log(double(5)); // 10 Here, multiplier returns a new function that remembers the factor.

Result

Calling double(5) returns 10, showing the returned function works with stored data.

Understanding returned functions unlocks advanced JavaScript patterns like closures and functional programming.

7

Expert

Return value optimization and pitfalls

🤔Before reading on: do you think returning large objects always copies them? Commit to your answer.

Concept: JavaScript returns references to objects and arrays, not copies, which can lead to unexpected mutations if not careful.

When you return an object or array, you return a reference to the original data, not a new copy. For example: function getArray() { const arr = [1, 2, 3]; return arr; } const myArr = getArray(); myArr.push(4); This changes the original array inside the function's scope if it was accessible elsewhere. Also, returning large objects is efficient because only references are passed, not full copies.

Result

Returned objects are references, so changes affect the original data if shared.

Knowing that return passes references, not copies, helps avoid bugs with unintended data changes and improves performance awareness.

Under the Hood

When a function runs, JavaScript creates a new execution context with its own variables. The return statement immediately exits this context and sends the specified value back to the caller. For primitive values like numbers or strings, the actual value is returned. For objects and arrays, a reference to the memory location is returned, not a copy. This means the caller can access or modify the original object if it holds the reference.

Why designed this way?

Returning values allows functions to be reusable and composable by producing outputs that other parts of the program can use. Returning references instead of copies for complex data types improves performance by avoiding expensive memory duplication. Early programming languages influenced this design to balance flexibility and efficiency.

┌───────────────┐
│ Call function │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Function runs │
│  (local vars) │
└──────┬────────┘
       │ return value
       ▼
┌───────────────┐
│ Return to     │
│ caller with   │
│ value or ref  │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does a function without a return statement return null? Commit to yes or no.

Common Belief: If a function has no return statement, it returns null.

Reality: Functions without a return statement return undefined, not null.

Why it matters: Mistaking undefined for null can cause bugs when checking function results or debugging.

Quick: Do you think code after a return statement runs? Commit to yes or no.

Common Belief: Code after a return statement still runs.

Reality: Code after return never runs because return immediately exits the function.

Why it matters: Expecting code after return to run can cause logic errors and confusion.

Quick: Does returning an object create a new copy each time? Commit to yes or no.

Common Belief: Returning an object always creates a new copy.

Reality: Returning an object returns a reference to the same object, not a copy.

Why it matters: Assuming copies are made can lead to unexpected mutations and bugs.

Quick: Can a function return multiple separate values directly? Commit to yes or no.

Common Belief: Functions can return multiple separate values directly.

Reality: Functions return only one value; to return multiple pieces, you must package them in an array or object.

Why it matters: Expecting multiple direct returns can cause syntax errors or misunderstandings.

Expert Zone

1

Returned references to objects can lead to subtle bugs if the caller modifies the data unintentionally, so cloning or freezing objects is sometimes necessary.

2

JavaScript engines optimize return statements for performance, but returning large primitive values repeatedly can still impact speed compared to returning references.

3

Arrow functions with implicit returns can improve code brevity but may hide complex return logic, affecting readability in large codebases.

When NOT to use

Avoid relying on return values when side effects or asynchronous operations are the main goal; instead, use callbacks, promises, or events. Also, do not return mutable objects if you want to protect internal state; use copies or immutable data structures instead.

Production Patterns

In real-world code, return values are used to build pure functions that are easy to test and reuse. Returning functions enables middleware patterns in frameworks like Express.js. Returning objects or arrays is common for APIs that need to send multiple related data points together.

Connections

Functions

Return values are the output part of functions, completing the input-process-output cycle.

Understanding return values deepens your grasp of how functions transform inputs into outputs, which is fundamental to programming.

Promises (Asynchronous JavaScript)

Promises use return values to pass results asynchronously, often returning new promises from functions.

Knowing how return values work helps you understand chaining and handling asynchronous results with promises.

Mathematical Functions

Return values in programming mirror the output of mathematical functions given inputs.

Seeing return values as function outputs connects programming to math, helping learners appreciate the logic and predictability of code.

Common Pitfalls

#1 Expecting code after return to run

Wrong approach:

function example() {
return 5;
console.log('This runs');
}

Correct approach:

function example() {
console.log('This runs');
return 5;
}

Root cause:

Misunderstanding that return immediately stops function execution.

#2 Returning multiple values without packaging

Wrong approach:

function getValues() {
return 1, 2, 3;
}

Correct approach:

function getValues() {
return [1, 2, 3];
}

Root cause:

Believing functions can return multiple separate values directly.

#3 Modifying returned object unintentionally

Wrong approach:

function getConfig() {
return { debug: true };
}

const config = getConfig();
config.debug = false;

Correct approach:

function getConfig() {
return Object.freeze({ debug: true });
}

const config = getConfig();
config.debug = false; // fails silently or throws error

Root cause:

Not realizing returned objects are references that can be changed outside the function.

Key Takeaways

Return values let functions send results back to the code that called them, enabling reuse and composition.

If a function has no return statement, it returns undefined by default, not null or zero.

Return immediately stops function execution, so code after return does not run.

Functions can return any data type, including objects, arrays, and even other functions.

Returned objects and arrays are references, so modifying them affects the original data unless you create copies.