Accessing an array returned by a function in JavaScript

In JavaScript, functions can return arrays that can be accessed and manipulated directly. This is useful for creating reusable code that generates data structures.

Basic Syntax

function functionName() {
    let array = [/* elements */];
    return array;
}

// Access the returned array
let result = functionName();

Example: Returning and Accessing Arrays

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>


<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to return an array from retTable() function and access it</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    
    function retTable(num) {
        let tempNum = [];
        for (let i = 1; i <= 10; i++) {
            tempNum.push(i * num);
        }
        return tempNum;
    }
    
    BtnEle.addEventListener("click", () => {
        let tableArr = retTable(5);
        resEle.innerHTML = "tableArr = " + tableArr;
    });
</script>
</body>
</html>

Multiple Ways to Access Returned Arrays

<!DOCTYPE html>
<html>
<body>

<script>
    function getNumbers() {
        return [10, 20, 30, 40, 50];
    }
    
    function getFruits() {
        return ["apple", "banana", "orange"];
    }
    
    let output = document.getElementById("output");
    
    // Method 1: Direct assignment
    let numbers = getNumbers();
    output.innerHTML += "Numbers: " + numbers + "<br>";
    
    // Method 2: Access specific elements
    let fruits = getFruits();
    output.innerHTML += "First fruit: " + fruits[0] + "<br>";
    
    // Method 3: Use array methods directly
    let doubled = getNumbers().map(num => num * 2);
    output.innerHTML += "Doubled: " + doubled + "<br>";
    
    // Method 4: Destructuring assignment
    let [first, second, ...rest] = getNumbers();
    output.innerHTML += "First: " + first + ", Second: " + second;
</script>
</body>
</html>

Common Use Cases

Use Case Example Function Description
Data Processing filterData() Return filtered array results
Mathematical Operations calculateSequence() Generate number sequences
String Manipulation splitAndProcess() Process and return string arrays

Key Points

  • Functions can return arrays just like any other data type
  • Returned arrays can be stored in variables or used directly
  • You can access individual elements using bracket notation
  • Array methods can be chained directly on function calls
  • Destructuring assignment works with returned arrays

Conclusion

Accessing arrays returned by functions is straightforward in JavaScript. Store the result in a variable or use it directly with array methods for flexible data processing.

Updated on: 2026-03-15T23:18:59+05:30

883 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements