title: How exactly works this example that use Angularfire2 to retrieve a list from a Firebase DB?
body: <p>I am not so into JavaScript\TypeScript and I have some problem to understand how exactly works this example used into an Angular application to retrieve data from a Firebase database. It works fine but I have some doubts about its logic (I think that it should be something related to functional programming paradigm and I am not so into this topic).</p>
  
  <p>So I have this code that uses <strong>Angularfire2</strong> library (the new <strong>^5.0.0-rc.4</strong> version) to query my Firebase DB:</p>
  
  <pre><code>@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'app';
  
     courses$: Observable&lt;{}[]&gt;;
  
      constructor(private db: AngularFireDatabase) {
          console.log("TEST");
  
          this.courses$ = db.list('courses').snapshotChanges()
              .map(actions =&gt; {
                  return actions.map(action =&gt; ({
                      $key: action.key,
                      value: action.payload.val(),
                  }))
              });
  
          this.courses$.subscribe(console.log);
      }
  
  }
  </code></pre>
  
  <p>So the <code>courses$</code> variable it shoul be an array of <code>Observable</code> (is it correct?). From what I know the <code>Observable</code> is an Object that emit events that can be subscribed. It will contain a list retrieved from Firebase DB.</p>
  
  <p>This code section:</p>
  
  <pre><code>db.list('courses')
  </code></pre>
  
  <p>should simply create the binding with the <code>courses</code> node into my Firebase database (that contains itself a list of node) as a list. But I am not so sure if my interpretation is correct or if I am missing something.</p>
  
  <p>Then on this binding is called the <code>snapshotChanges()</code> that should return an <code>Observable</code>. </p>
  
  <p>Here I have the following doubts:</p>
  
  <ol>
  <li><p>This <code>Observable</code> is related to a single element of the list of courses that I am retrieving or to the whole list of courses retrieved from the DB? (I think the second one but I am not so sure).</p></li>
  <li><p>The exact type returned by the <code>snapshotChanges()</code> method seems to be <code>Observable&lt;SnapshotAction[]&gt;</code>. So what exactly means. It is an Observable that have an array of <code>SnapshotAction</code> as type. What exactly is and what exactly means?</p></li>
  </ol>
  
  <p>Then there is this <code>map()</code> function:</p>
  
  <pre><code>.map(actions =&gt; {
      return actions.map(action =&gt; ({
          $key: action.key,
          value: action.payload.val(),
      }))
  });
  </code></pre>
  
  <p>Here I am pretty stuck...I think that it is the more functional section. I think that it used to create my output each time that something changes into the observed <code>courses$</code>.</p>
  
  <p>Reading the documentation it seems that the <code>map()</code> method creates a new array (infact I am creating an array) with the results of calling a provided function on every element in this array.</p>
  
  <p>So it should mean that this is the function called on each element of array:</p>
  
  <pre><code>actions =&gt; {
      return actions.map(action =&gt; ({
          $key: action.key,
          value: action.payload.val(),
      }))
  }
  </code></pre>
  
  <p>But what array? I think that it should be the previous <code>Observable&lt;SnapshotAction[]&gt;</code> returned by <code>snapshotChanges()</code> method.</p>
  
  <p>I am absolutly not sure about this assertion....</p>
  
  <p>So the idea is that every time that a change happens into the subscribed <code>courses$</code> observable the <code>map()</code> method is executed on the new data... But I think that I am missing a lot of intermediate stuff</p>
  
  <p>How exactly does this work?</p>