understanding a Jquery snippet about Map()

Question

i am very new to JS and Jquery and i have a small difficulty understanding a certain function , I.E. i want to understand the order of execution of a very simple function that i found in the jquery documentation , look below (the example can also be found here.)::

HTML ::

<form method="post" action="">
  <fieldset>
    <div>
      <label for="two">2</label>
      <input type="checkbox" value="2" id="two" name="number[]">
    </div>
    <div>
      <label for="four">4</label>
      <input type="checkbox" value="4" id="four" name="number[]">
    </div>
    <div>
      <label for="six">6</label>
      <input type="checkbox" value="6" id="six" name="number[]">
    </div>
    <div>
      <label for="eight">8</label>
      <input type="checkbox" value="8" id="eight" name="number[]">
    </div>
  </fieldset>
</form>

JS ::

$( ":checkbox" )
  .map(function() {
    return this.id;
  })
  .get()
  .join();

The result is ::

 "two,four,six,eight".

i understand what the indivisual functions are doing above , but can somebody tell me whats the order of execution of the above script .I.E.

is map() returning indivisual id's to get() ? or is it looping over all the checkbox's and then passing all the id's at once ?

map operates on the collection set and returns an array of the results you return in the map. — Taplar
– Taplar, Commented May 20, 2015 at 13:27
@Taplar , i get what the whole function is doing , my question is , is map() returning indivisual id's to get() ? or is it looping over all the checkbox's and then passing all the id's at once ? , Thanks for your help though ! — Tenali Raman
– Tenali Raman, Commented May 20, 2015 at 13:31
As said above, it returns an array. It operates over the entire set, keeping an internal array of the results, and at the end it returns the result array. — Taplar
– Taplar, Commented May 20, 2015 at 13:32
map() is returning array like object , then you call on it the get() method to get an array on which you can use array protype methods as join() — A. Wolff
– A. Wolff, Commented May 20, 2015 at 13:33

Liam · Accepted Answer · 2015-05-20 15:20:40Z

2

The functions are executed in turn, once they complete they hand the result onto the next function, etc.

It's the equivalent of:

var first = $( ":checkbox" ).map(function() {
    return this.id;
  });
var second = first.get();
var third = second.join();

the above is just a shorthand that doesn't require the extra varibales.

edited May 20, 2015 at 15:20

answered May 20, 2015 at 13:30

Liam

30k28 gold badges143 silver badges206 bronze badges

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

1 Comment

Tenali Raman Over a year ago

thanks just to reconfirm , only after .map() iterates over all the checkbox's does get() execute(i mean in my version of the code) ?

Milind Anantwar · Accepted Answer · 2015-05-20 13:38:36Z

2

is map() returning indivisual id's to get() ? or is it looping over all the checkbox's and then passing all the id's at once

As per docs for .map(),

Pass each element in the current matched set through a function, producing a new jQuery object containing the return values

Answer: It loops over all the elements available in object and append the id in array at a time. The array generated from .map() is jquery object. .get() converts the object into value array.

edited May 20, 2015 at 13:38

answered May 20, 2015 at 13:33

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

1 Comment

A. Wolff Over a year ago

But OP is using jQuery. fn.map

aorfevre · Accepted Answer · 2015-05-20 13:27:26Z

0

the order is as you read it , I mean

1-

   $( ":checkbox" )
  .map(function() {
    return this.id;
  })

2- get()

3- join()

answered May 20, 2015 at 13:27

aorfevre

5,0744 gold badges23 silver badges54 bronze badges

2 Comments

Tenali Raman Over a year ago

Nooooooo :D not that order my question is s map() returning indivisual id's to get() ? or is it looping over all the checkbox's and then passing all the id's at once ?

aorfevre Over a year ago

First query is processed totally, this means loop all checkbox. Then secong query is processed with result of checkbox. Then third

Collectives™ on Stack Overflow

understanding a Jquery snippet about Map()

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related