¿Why "this.memberSkills" is undefined?

I have a problem, when I call the groupSkillsByExpertise() function in ngOninit, I get a console.log that shows the property this.memberSkills as undefined. However, in the html template I can show the content of membersSkills. The goal is to filter in the groupSkillsByExpertise() function the array of memberSkills to show only the skills with expert level. But as I get memberSkills as undefined, I can't apply the filter.

This is my member-profile-component.ts:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { MemberContact } from 'src/app/models/member-contact/member-contact.interface';
import { MemberProfileService } from 'src/app/services/member-profile/member-profile.service';
import { Skill } from 'src/app/models/skill/skill.interface';
import { Language } from 'src/app/models/language/language.model';

@Component({
  selector: 'app-member-profile',
  templateUrl: './member-profile.component.html',
  styleUrls: ['./member-profile.component.css']
})
export class MemberProfileComponent implements OnInit {

  memberId: number;
  member: MemberContact;
  memberSkills: Array<Skill>;
  memberLanguages: Array<Language>;
  expertList: Array<Skill>;
  intermediateList: Array<Skill>;
  beginnerList: Array<Skill>;

  constructor(
    private activatedRoute: ActivatedRoute,
    private memberProfileService: MemberProfileService
  ) { }

  ngOnInit(): void {
      this.getMemberProfile();
      this.getMemberSkills();
      this.getMemberLanguages();
      this.groupSkillsByExpertise();
  }

  getMemberProfile() {
    this.memberId = Number(this.activatedRoute.snapshot.paramMap.get('id'));
    this.memberProfileService.findMemberById(this.memberId)
    .subscribe(member => this.member = member);
  }

  getMemberSkills() {
    this.memberId = Number(this.activatedRoute.snapshot.paramMap.get('id'));
    this.memberProfileService.findSkillsByMemberId(this.memberId)
    .subscribe(skills => this.memberSkills = skills);
  }

  getMemberLanguages() {
    this.memberId = Number(this.activatedRoute.snapshot.paramMap.get('id'));
    this.memberProfileService.findLanguageByMemberId(this.memberId)
    .subscribe(languages => this.memberLanguages = languages);
  }

  groupSkillsByExpertise() {
    console.log(this.memberSkills); // Why is this undefined?
    /* this.expertList = this.memberSkills.filter(skill => skill.skillLevel?.skillLevel === "Expert"); */  
  } 
}

Because you have a subscription setting your memberSkills in getMemberSkills, you will need to wait for that subscription to set the data before using it.

The data will be visible in the template because the change detection will update it when the data becomes available.

To make correct the order, you can either make the group of functions async, or, simply place the grouping function within the subscription, i.e:

  ngOnInit(): void {
      this.getMemberProfile();
      this.getMemberSkills();
      this.getMemberLanguages();
  }

  getMemberSkills() {
    this.memberId = Number(this.activatedRoute.snapshot.paramMap.get('id'));
    this.memberProfileService.findSkillsByMemberId(this.memberId)
    .subscribe(skills => {
            this.memberSkills = skills;
            this.groupSkillsByExpertise();
        });
  }