typescript - Is there a more compact/elegant way to write this?

Question

Kind of still new to JS/TS and the conventions that come along with them. I wrote this piece of code today and thought it just kind of looked wrong.

tldr: Look up depth-3 child using hierarchical-ordered names, while performing null-checks.

public loadChildChild(parentName: string, childName: string, childchildName: string) {
    var parent = myCollection.items.find(i => i.name === parentName)
    if(parent === undefined){
      console.error(`${parentName} not found in collection`);
    }
    else{
      var child = parent.children.find(c => c.name === childName)
      if(child === undefined){
        console.error(`${childName} not found in ${parentName}`);
      }
      else{
        var childChild = child.children.find(c => c.name === childChildName))
        if(childChild == undefined){
          console.error(`${childChildName} not found in ${parentName}>${childName}`)
        }
        else {
          this.selectedItem = childChild;
        }
      }
    }
  }

To me this seems like its a pain to read, and that there's probably some standard convention - or JS/TS magic for cleaning this up.

Answer 1

You can make it cleaner by doing a falsy check ((!parent)) instead of strict undefined check, and doing return on console.error so you don't need the else block

public loadChildChild(parentName: string, childName: string, childChildName: string) {
    var parent = myCollection.items.find(i => i.name === parentName)
    // Do a falsy check instead of strict undefined check, then return on console.error to eleminate else block
    if(!parent) return console.error(`${parentName} not found in collection`);

    var child = parent.children.find(c => c.name === childName)
    // Do a falsy check instead of strict undefined check, then return on console.error to eleminate else block
    if(!child) return console.error(`${childName} not found in ${parentName}`);
    
    var childChild = child.children.find(c => c.name === childChildName);
    if(!childChild) return console.error(`${childChildName} not found in ${parentName}>${childName}`);

    this.selectedItem = childChild;
}

Or if you don't care about console.error if parent is undefined or child is undefined, you can do optional chaining instead

public loadChildChild(parentName: string, childName: string, childChildName: string) {
    const childChild = myCollection
        .items.find(i => i.name === parentName)
        ?.children.find(c => c.name === childName)
        ?.children.find(c => c.name === childChildName);
    
    if(!childChild) return console.error(`${childChildName} not found in ${parentName}>${childName}`);

    this.selectedItem = childChild;
}