Retrieving the First Class

Checking a JS property with and without mid-function returns

by nevkatz

HTML

<div id="root">
 <div id="test0">
 
 </div>
  <div id="test1">
  
  </div>
  <div id="test2">
  
  </div>
  <div id="test3">
  
  </div>
</div>

JavaScript

let myTeacher = {
    data:{ 
       classes: [{
             classId:123,
             pupils:[
                {
                    firstName:'Nevin',
                    lastName:'Katz'
                }
             ]
       }]
    }
};

function getFirstClass0(teacher) {
  return (!!teacher?.data?.classes?.length && teacher.data.classes[0]) || null;
}
function getFirstClass1(teacher) {
     if (teacher && teacher.data && teacher.data.classes) {
          return teacher.data.classes[0] || null;
     }
}
function getFirstClass2(teacher) {
     if (teacher && teacher.data && teacher.data.classes) {
       
       if (teacher.data.classes.length > 0) {
          return teacher.data.classes[0];
       }
     }
     return null;
}
function getFirstClass3(teacher) {
     if (!teacher) {
         return null;
     }
     if (!teacher.data) {
          return null;
     }
     if (!teacher.data.classes) {
          return null;
     }
     if (teacher.data.classes.length == 0) { 
          return null;
     }
     return teacher.data.classes[0];
}

function init() {
 let test0 = document.querySelector('#test0');
 let test1 = document.querySelector('#test1');
 let test2 = document.querySelector('#test2');
 let test3 = document.querySelector('#test3');
 
 let class_obj = getFirstClass0(myTeacher);
 
 test0.textContent = class_obj.classId;
  
 class_obj = getFirstClass1(myTeacher);
 test1.textContent = class_obj.classId;
 
 class_obj = getFirstClass2(myTeacher);
 
 test2.textContent = class_obj.classId;
 
 class_obj = getFirstClass3(myTeacher);
 
 test3.textContent = class_obj.classId;
 
}
init();