Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
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.
Advertisements
