JavaScript arguments keyword and multiple arguments ...args

Question

I have some issues with my code. Here I will show two versions of my code but one of them is not working.

This code using the arguments keyword is not working:

$(document).ready(function(){
  var data = {
    'one':'b',
    'two':'c',
    'three':'d'
  }
  function func(){
    for(var i=0;i<arguments.length;i++){
      $('.a').each(function(){
        if($(this).hasClass(data[arguments[i]])){
          $(this).css('background','red')
        }
      })
    }
  }
  func('one','two')
})

body{
  margin:0;
  pading:0;
  height:100vh;
}
.a{
  height:50px;
  width:50px;
  background:green;
  margin:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="a"></div>
<div class="a b"></div>
<div class="a c"></div>

However when I use a rest parameter, ...val, everything works perfectly:

$(document).ready(function() {
  var data = {
    'one': 'b',
    'two': 'c',
    'three': 'd'
  }

  function func(...val) {
    for (var i = 0; i < val.length; i++) {
      $('.a').each(function() {
        if ($(this).hasClass(data[val[i]])) {
          $(this).css('background', 'red')
        }
      })
    }
  }
  func('one', 'two')
})

body {
  margin: 0;
  pading: 0;
  height: 100vh;
}

.a {
  height: 50px;
  width: 50px;
  background: green;
  margin: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="a"></div>
<div class="a b"></div>
<div class="a c"></div>

How do I make this code work perfectly without using ...val and by using only the arguments keyword?

The arguments object gets a new value on every function call, including the function passed to .each(). The value of arguments inside there is not the same as the value outside. If you used a => function for the .each() callback, it would work, because such functions work differently in that respect. — Pointy
– Pointy, Commented Jun 9, 2019 at 13:48

Lelouch · Accepted Answer · 2019-06-09 14:09:49Z

3

This is because 'arguments' is a reserved keyword in Javascript. It's context will change when you call it inside other function inside the .each(). It is not just like any other variable that will be passed inside as it is.

If you want to achieve that, you should use arrow functions.
Arrow functions in JS
Hope that the issue was fixed.

answered Jun 9, 2019 at 14:09

Lelouch

12910 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ajay Nagar · Accepted Answer · 2019-06-09 14:37:30Z

2

There are two more possible ways to do this in addition to your way:

Use an arrow function so that the scope of arguments is still linked to the outer function.
If you want to keep the function, you can pass the value every time as a parameter, but that's just a wastage of computational power.

answered Jun 9, 2019 at 14:37

Ajay Nagar

334 bronze badges

Comments

DDupont · Accepted Answer · 2019-06-10 01:53:57Z

Try using a local var inside func():

    $(document).ready(function(){
      var data = {
        'one':'b',
        'two':'c',
        'three':'d'
      }
      function func(){
        for(var i=0;i<arguments.length;i++){
          var key = arguments[i]
          $('.a').each(function(){
            if($(this).hasClass(data[key])){
              $(this).css('background','red')
            }
          })
        }
      }
      func('one','two')
    })

In the original posted form, the nested anonymous function was referring to its own arguments, but the intent (as I interpreted it) was to refer to the arguments of the call to func() instead. As it was pointed out by others, that is not possible since the arguments keyword is always local to the current function. Therefore by adding a var to the closure (inside func() but outside of the nested anonomous function) you can refer to that "copy" of the data in the outer arguments instead when inside the nested function.

Andy K · Accepted Answer · 2019-06-09 14:21:35Z

0

You need to use input parameter (...val in your case). Every time you call your method you pass a new parameter in it.

edited Jun 9, 2019 at 14:21

Andy K

7,3324 gold badges45 silver badges57 bronze badges

answered Jun 9, 2019 at 14:14

user11621610

1 Comment

Ayush Gupta Over a year ago

according to my question i actually do not wanna use ...val i was asking for some alternatives

Collectives™ on Stack Overflow

JavaScript arguments keyword and multiple arguments ...args

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related