Javascript For Loop with 2 sets of parenthesis (round brackets) - FOR ()()

user_961645 0
Viewed 74

I just got a code from somewhere, which I trying to understand. But I stuck on a place which I can not understand. Javascript code is as below:

for(t_var=0,n_var=i_var.length; t_var<n_var; t_var++)
  (e_var=i_var[t_var])[0]
    .removeEventListener(e_var[1],d_var)

It is a single line javascript for loop. I can not understand the use of 2nd set of round bracket i.e. contains (e_var=i_var[t_var]). I think it might be creating some sort of array because [0] after 2nd set of parenthesis shows it as an array. But I am not sure what is its exact use?

Can anyone help with it please?

Regards

for-loop javascript
1 Answers

You could rewrite the code in the following manner to make it better understandable:

for(t_var=0,n_var=i_var.length; t_var<n_var; t_var++)(e_var=i_var[t_var])[0].removeEventListener(e_var[1], d_var);

// on multiple lines
for (t_var = 0, n_var = i_var.length; t_var < n_var; t_var++)
  (e_var = i_var[t_var])[0].removeEventListener(e_var[1], d_var);

// using a for-loop with curly brackets
for (t_var = 0, n_var = i_var.length; t_var < n_var; t_var++) {
  (e_var = i_var[t_var])[0].removeEventListener(e_var[1], d_var);
}

// splitting assignment and event listener removal
for (t_var = 0, n_var = i_var.length; t_var < n_var; t_var++) {
  e_var = i_var[t_var];
  e_var[0].removeEventListener(e_var[1], d_var);
  // ^ the expression `(e_var = i_var[t_var])` returns the value assigned to `e_var`
}

// removal of array length caching to make the loop more readable
for (t_var = 0; t_var < i_var.length; t_var++) {
  e_var = i_var[t_var];
  e_var[0].removeEventListener(e_var[1], d_var);
}

// more descriptive variable names
for (index = 0; index < array.length; index++) {
  arrayElement = array[index];
  arrayElement[0].removeEventListener(arrayElement[1], eventListener);
}

// using destructuring assignment
for (index = 0; index < array.length; index++) {
  arrayElement = array[index];
  const [htmlElement, eventType] = arrayElement;
  htmlElement.removeEventListener(eventType, eventListener);
}

// using for...of instead of standard for-loop
for (const [htmlElement, eventType] of array) {
  htmlElement.removeEventListener(eventType, eventListener);
}

Note that your example doesn't use var, let, or const to define the variables. The changes above doesn't use those either except for the new variables introduced by me. Normally variables should always be defined using 1 of the 3 keywords (preferably let or const), otherwise the variables are global. Global variables often lead to unexpected behaviour, resulting in bugs.

user_39825620
Related