title: What does the `map` method mean in RxJS?
body: <p>I'm learning <a href="https://github.com/Reactive-Extensions/RxJS">RxJS</a> by reading this tutorial <code>http://reactive-extensions.github.io/learnrx/</code>.</p>
  
  <p>I have a hard time understanding the <a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/select.md">map</a> method of <code>Observable</code>. The <code>Array</code> version of <code>map</code> is really simple and straightforward. I have no idea about what exactly the <code>map</code> means in case of a <code>Observable</code>(and why does it have a alias named <code>select</code>?!).</p>
  
  <p>Here is what the documentation told me. Might not be helpful for most beginners...</p>
  
  <blockquote>
    <p>Projects each element of an observable sequence into a new form by incorporating the element's index. This is an alias for the select method.</p>
  </blockquote>
  
  <p>I don't understand <code>map</code> in the context of <code>event</code>.
  For example, the code below works exactly what I expected. I thought of this piece of code as : "Listen to the <code>click-event</code> from the event-stream of <code>#btn</code>".</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var btnClicks, observable;
  
  btnClicks = Rx.Observable.fromEvent($('#btn'), "click");
  
  observable = btnClicks.subscribe(function(e) {
   console.log(e);
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>But what happens when it becomes to this?? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var btn2Clicks, btnClicks, observable;
  
  btnClicks = Rx.Observable.fromEvent($('#btn'), "click");
  
  btn2Clicks = Rx.Observable.fromEvent($('#btn2'), "click");
  
  observable = btnClicks.map(function(e) {
    return btn2Clicks;
  }).subscribe(function(e) {
    console.log(e);
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>What I thought is use the <code>map</code> to transform a collection of a click-event to another collection of event-collection.
  The <code>filter</code> is easy to understand, it just as the word <code>filter</code> means, take the event only I interested, and skip others. But how about the <code>map</code> in the context of <code>event</code>? If it means 'transform a collection to another ones' just as the array version, why it still fires when <code>#btn</code> clicked?? </p>
  
  <p>I mean I'v mapped it to another collections, now it's no longer a collection of click-event of <code>#btn</code> but it's a new collection of something... But it still fires when <code>#btn</code> clicked which not make sense for me.</p>