자바스크립트 동작원리

if문/for문 vs forEach vs Map/Filter

코드의 차이를 알아보자

if문/for문 방식으로 Code 작성

const makeAdultNameList = (humanList) => {
    let result = "";
    for (let i = 0; i < humanList.length; i++) {
        if (humanList[i].age < 20) {
            continue;
        }
        result += `<li>${humanList[i].name}</li>`
    }
    return result;
};
}

forEach방식으로 Code 작성

const makeAdultNameList = (humanList) => {
  let result = "";
  humanList.forEach((human) => {
    if (human.age < 20) {
      return;
    }
    result += `<li>${human.name}</li>`
  });
  return result;
};

Map과 Filter로 Code 작성

const makeAdultNameList = (humanList) => {
    let filtertedHumanList = humanList.filter(human => human.age >= 20);
    let result = filtertedHumanList.map(human => `<li>${human.name}</li>`)
    return result.join('');
};

다양한 방식의 콜백 함수들을 쓰고 난 뒤

for문과 if문을 썼을 때보다 코드의 가독성이 좋아진 것을 알 수 있다.