Executing a function stored in an array using JavaScript

Question

Executing a function stored in an array using JavaScript

While practicing JavaScript, I came across a sample code where I tried to call a function from an array. However, the output returned undefined along with the expected result from the function. I'm confused as to why this is happening, especially since I've correctly called the index of the array containing the function. Can someone help me understand what's going on?

const arr = [
    "test1",
    "test2",
    function(){console.log("hi")}
];

console.log(arr[2]());

Output:

Babel Compiler v6.4.4
Copyright (c) 2014-2015 Sebastian McKenzie
   
hi
undefined
=> undefined

javascript arrays

Answer 1

Answer №1

By nature, the function logs "hello" without returning anything. When using console.log(arr2), it will output the return value as undefined.

To achieve what you intended, consider a function structured like this:

function() {return "hello"}

Answer 2

By nature, the function logs "hello" without returning anything. When using console.log(arr2), it will output the return value as undefined.

To achieve what you intended, consider a function structured like this:

function() {return "hello"}

Answer 3

Answer №2

Hello there, to execute the function at index 2 in the array 'arr', simply write arr[2]() as shown below:

const arr = [
        "test1",
        "test2",
        function(){console.log("hi")}
    ];

arr[2]();

Answer 4

Hello there, to execute the function at index 2 in the array 'arr', simply write arr[2]() as shown below:

const arr = [
        "test1",
        "test2",
        function(){console.log("hi")}
    ];

arr[2]();

Answer 5

Answer №3

When you call the function inside a console.log statement, it means you are displaying the return value of that function.

To understand this concept better, take a look at the following example where we add the return values to explain:

const arr = [
    "test1",
    "test2",
    function(){console.log("hi")},
    function(){console.log("hello"); return "world"}
];

console.log('1. The return value of the function is: ', arr[2]());
console.log('2. The return value of the function is: ', arr[3]());

Answer 6

When you call the function inside a console.log statement, it means you are displaying the return value of that function.

To understand this concept better, take a look at the following example where we add the return values to explain:

const arr = [
    "test1",
    "test2",
    function(){console.log("hi")},
    function(){console.log("hello"); return "world"}
];

console.log('1. The return value of the function is: ', arr[2]());
console.log('2. The return value of the function is: ', arr[3]());

Executing a function stored in an array using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Parsing JSON data using PHP and AJAX decoding

Switch over to TypeScript - combining Socket.IO, Angular, and Node.js

Can PHP send back data to AJAX using variables, possibly in an array format?

Adding a component dynamically with a link click in Angular: A step-by-step guide

Proper method for declaring a global variable within a React component

What causes the difference between object[key] and Object.key in JavaScript?

Eliminate the hover background color from the bootstrap nav-link

Passing an array list back to the parent component in ag-grid(Vue) - A step-by-step guide

Picture in the form of a radio button

Can Three.js be used to create a compact canvas?

Implementing dynamic controls in an ASP.NET MVC5 application using AngularJS

What is the best way to integrate the express-session logic with Prisma for optimal performance?

Integration of PHP and MySQL with PayPal can be challenging, especially when the PayPal button fails to function unless the amount is

How to Remove a Dynamically Generated Popover in Angular

Discrepancies in rounding calculations between three.js on Chrome and Firefox

Making sure to correctly implement email input fields in HTML5: Surprising behaviors observed with the email input type in the Chrome browser

Challenges with rendering text in Three.js

The Vue.js @click event does not function properly when used in a selection on mobile

What methods can I use to minimize the duration of invoking the location.reload() function?

Leveraging Amplify for offline storage while transitioning between HTTP and HTTPS protocols