Javascript For Loop 带 2 组圆括号（圆括号） - FOR ()()

Question

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 ie 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

Answer 1

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.