"Passing a variable as an argument to a function in JavaScript

Question

"Passing a variable as an argument to a function in JavaScript

I've been working on setting up a basic loop of animation functions. Each function is stored in an array, and I have successfully logged out each object as a string upon click event. However, I'm encountering difficulties when trying to call the corresponding functions during that event.

One of my attempts led to an error message stating "nt[rt] is not a function".

arrAnimations[activeScene]()

In my effort to resolve this issue, I explored various solutions from similar scenarios on stack overflow. One approach involved creating a helper function like the one below:

myFunction = function(){};   
   var arrAnimations = {italy: myFunction};

    
    arrAnimations['activeScene'](); //executes the function

I also experimented with another method, as shown here:

var tmp = arrAnimations[activeScene]
     window[tmp]

Below is the code snippet:


      
         var arrAnimations = ['italy', 'czech', 'russia']
        
      var activeScene = 0;

          document.getElementById('animate').addEventListener("click",  function incNumber() {
               if (activeScene < arrAnimations.length - 1) {
                activeScene++;
                } else if (activeScene == arrAnimations.length - 1) {
                 activeScene = 0;
             }
           
        })
          
           function italy() { console.log('italy') }

           function czech() { console.log('czech') }

            function russia() { console.log('russia') }

<div id="animate">Animate</div>

javascript arrays object

Answer 1

Answer №1

The array in this code snippet is unique because it stores the actual functions themselves, rather than just their names.

function italy()  { console.log('italy') }
function czech()  { console.log('czech') }
function russia() { console.log('russia') }

var arrAnimations = [ italy, czech, russia ]

To execute a function from the array, you can easily locate the item by its index and call it:

var activeScene = 0;
arrAnimations[activeScene]()

Demo using Stack Snippets

function italy()  { console.log('italy') }
function czech()  { console.log('czech') }
function russia() { console.log('russia') }

var arrAnimations = [ italy, czech, russia ]

var index = 0;

function callNextFunction() {
    index = index >= arrAnimations.length - 1 ? 0 : index + 1
    
    arrAnimations[index]()
}

var btn = document.getElementById('animate')
btn.addEventListener("click", callNextFunction)

<button id="animate">Animate</button>

Answer 2

The array in this code snippet is unique because it stores the actual functions themselves, rather than just their names.

function italy()  { console.log('italy') }
function czech()  { console.log('czech') }
function russia() { console.log('russia') }

var arrAnimations = [ italy, czech, russia ]

To execute a function from the array, you can easily locate the item by its index and call it:

var activeScene = 0;
arrAnimations[activeScene]()

Demo using Stack Snippets

function italy()  { console.log('italy') }
function czech()  { console.log('czech') }
function russia() { console.log('russia') }

var arrAnimations = [ italy, czech, russia ]

var index = 0;

function callNextFunction() {
    index = index >= arrAnimations.length - 1 ? 0 : index + 1
    
    arrAnimations[index]()
}

var btn = document.getElementById('animate')
btn.addEventListener("click", callNextFunction)

<button id="animate">Animate</button>

Answer 3

Answer №2

Here is some advice on your commented out line:

console.log(arrAnimations[activeScene])

The issue here is that you are trying to call a method on an array, but the array only contains strings. To fix this, you should extract the string value from the array and then use it to call a method on the window object.

window[arrAnimations[activeScene]]();

To simplify your code and avoid using multiple if statements, you can consider using lambda functions. Here's an example for you to try:

<div id="animate">Animate</div>

<script>
    var arrAnimations = [
        () => console.log('italy'),
        () => console.log('czech'),
        () => console.log('russia')
    ]

    var activeScene = 0;

    document.getElementById('animate').addEventListener('click', () => {

        arrAnimations[activeScene]();

        activeScene++;
        activeScene = activeScene % arrAnimations.length;
    });
</script>

Answer 4

Here is some advice on your commented out line:

console.log(arrAnimations[activeScene])

The issue here is that you are trying to call a method on an array, but the array only contains strings. To fix this, you should extract the string value from the array and then use it to call a method on the window object.

window[arrAnimations[activeScene]]();

To simplify your code and avoid using multiple if statements, you can consider using lambda functions. Here's an example for you to try:

<div id="animate">Animate</div>

<script>
    var arrAnimations = [
        () => console.log('italy'),
        () => console.log('czech'),
        () => console.log('russia')
    ]

    var activeScene = 0;

    document.getElementById('animate').addEventListener('click', () => {

        arrAnimations[activeScene]();

        activeScene++;
        activeScene = activeScene % arrAnimations.length;
    });
</script>

Answer 5

Answer №3

spain = () => console.log('spain')
germany = () => console.log('germany')
france = () => console.log('france')

if Array of functions:

let arrCountriesAsFunctions = [ spain , germany , france];
arrCountriesAsFunctions.forEach(country => country())

if Array of Strings:

let arrCountriesAsStrings = [ 'spain' , 'germany' , 'france' ];
arrCountriesAsStrings.forEach(country => eval(country)())

use eval to execute a string as JavaScript code

Answer 6

spain = () => console.log('spain')
germany = () => console.log('germany')
france = () => console.log('france')

if Array of functions:

let arrCountriesAsFunctions = [ spain , germany , france];
arrCountriesAsFunctions.forEach(country => country())

if Array of Strings:

let arrCountriesAsStrings = [ 'spain' , 'germany' , 'france' ];
arrCountriesAsStrings.forEach(country => eval(country)())

use eval to execute a string as JavaScript code

Answer 7

Answer №4

Is this the desired outcome?

foo = () => console.log('foo')
bar = () => console.log('bar')
baz = () => console.log('baz')

fns = {
  foo,
  bar,
  baz
}

Object.keys(fns).forEach(fn => fns[fn]())

fns['foo']()
fns['bar']()

Please note that attempting to convert a string into a function in JavaScript is not possible:

let fn = () => {}
let foo = 'fn'
foo() // X
// foo is a string, not a function. It is merely coincidental that the string's content matches a function name.

Answer 8

Is this the desired outcome?

foo = () => console.log('foo')
bar = () => console.log('bar')
baz = () => console.log('baz')

fns = {
  foo,
  bar,
  baz
}

Object.keys(fns).forEach(fn => fns[fn]())

fns['foo']()
fns['bar']()

Please note that attempting to convert a string into a function in JavaScript is not possible:

let fn = () => {}
let foo = 'fn'
foo() // X
// foo is a string, not a function. It is merely coincidental that the string's content matches a function name.

"Passing a variable as an argument to a function in JavaScript

Answer №1

Demo using Stack Snippets

Answer №2

Answer №3

Answer №4

Similar questions

Using my aspx page as the central point for my web application, incorporating HTML5 codes for development

What is the best way to initiate a fresh AJAX request whenever the submit button is pressed?

Enhancing Browser Experience: The correct method for dynamically adding an AngularJS controller through a Chrome Extension's Content

Do not include any null or empty objects when assigning to an array in Mongoose

Looking to display parent and child elements from a JSON object using search functionality in JavaScript or Angular

Attempting to enter text into a text field using Selenium

How to iterate through an array in jQuery/JavaScript and create variables in each loop?

Protractor's browser.wait function is not functioning properly when conducting tests on a non-AngularJS website

Get data from ajax request in controller

React Native (or React) utilizes separate TypeScript modules to detect and respond to style adjustments for dark mode

Exploring z-indices in event bubbling

The onClick function is failing to work properly, and I need to pass the value of 'cid' based on the result of the button

Submitting a form in a Chrome packaged app

Using Vue app and Javascript to dynamically add an object to an array based on a certain condition

Creating an eternal loop within the useEffect hook in order to monitor the presence of a specific property within the window object

In what way does this operate in an asynchronously?

PHP - array_push function

Tips for achieving a slow scrolling effect similar to the one displayed on these websites

Is the toString() method explicitly invoked by Number() if the value is not of type number or string? (such as a function)

Issue with JQuery's parentsUntil method when using an element as a variable not producing the desired results