title: Passed-in Values Not Available at Run-time of Function in Angular App
body: <p>I realize there is something I'm missing in terms of how and specifically <em>when</em> the products of certain functions are available in JavaScript. </p>
  
  <p>In my Angular app, in order to get a user's initials, I am parsing data being returned from the API, and retrieving the first letter of the firstName, as well as the first letter of lastName in two different functions. These two functions are working as expected, and I can see the correct results in the console:</p>
  
  <pre><code>getFirstNameFirstLetter() {
      if (this.authenticationService.isAuthenticated()) {
          const userObj = JSON.parse(sessionStorage.getItem('currentUser'));
          const userInfo = userObj.data;
          const firstName = userInfo.name.first;
          const firstNameFirstLetter = firstName.trim().charAt(0);
          console.log(firstNameFirstLetter);
          return firstNameFirstLetter;
      }
  }
  
  getLastNameFirstLetter() {
      if (this.authenticationService.isAuthenticated()) {
          const userObj = JSON.parse(sessionStorage.getItem('currentUser'));
          const userInfo = userObj.data;
          const lastName = userInfo.name.last;
          const lastNameFirstLetter = lastName.trim().charAt(0);
          console.log(lastNameFirstLetter);
          return lastNameFirstLetter;
      }
  }
  </code></pre>
  
  <p>Now comes the part I'm not fully understanding. When I then pass the returned values of these two functions, in order to get the initials, like this:</p>
  
  <pre><code>getInitials(firstNameFirstLetter, lastNameFirstLetter) {
      if (this.authenticationService.isAuthenticated()) {
          if (!this.firstNameFirstLetter || !this.lastNameFirstLetter) {
              console.log('Names not ready!');
              return;
          } else if (this.firstNameFirstLetter &amp;&amp; this.lastNameFirstLetter) {
              console.log(firstNameFirstLetter + lastNameFirstLetter);
              return firstNameFirstLetter + lastNameFirstLetter;
          }
      }
  }
  </code></pre>
  
  <p>... I get "Names not ready!" printed to the console each time. </p>
  
  <p>By the way, I am running these functions within Angular's ngOnInit life cycle hook, like this:</p>
  
  <pre><code>ngOnInit() {
      this.getFirstNameFirstLetter();
      this.getLastNameFirstLetter();
      this.getInitials(this.firstNameFirstLetter, this.lastNameFirstLetter);
  }
  </code></pre>
  
  <p>I know this has something to do with what's available when, because I get 'undefined' when I use break points and debug the two values being passed into the "getInitials()" function. In other words, the function doesn't have access to the returned values of the other two functions at the time it's run -- hence I'm getting 'Names not ready!' printed to the console. My question is, what am I missing, architecturally, to resolve this kind of issue?</p>