[자바스크립트] for문과 foreach 실전 예제 비교

for문

let tabs = document.querySelectorAll(".task-tabs div");

for (let i = 1; i < tabs.length; i++) {
  tabs[i].addEventListener("click", function (event) {
    filter(event);
  });
}

foreach문

let menus = document.querySelectorAll(".menus button");

menus.forEach((menu) =>
  menu.addEventListener("click", (event) => getNewsByTopic(event))
);

const getNewsByTopic = (event) => {
  console.log("클림됨", event.target);
};

 

분석

 

let tabs = document.querySelectorAll(".task-tabs div");

for (let i = 1; i < tabs.length; i++) {
  tabs[i].addEventListener("click", function (event) {filter(event);});
}

 

let menus = document.querySelectorAll(".menus button");

menus.forEach((menu) =>
  menu.addEventListener("click", (event) => getNewsByTopic(event))
);

원본

let tabs = document.querySelectorAll(".task-tabs div");

for (let i = 1; i < tabs.length; i++) {
  tabs[i].addEventListener("click", function (event) {
    filter(event);
  });
}

function filter(event) {
  mode = event.target.id;
  filterList = [];
  console.log("filter 클림됨!", event.target.id);
  if (mode == "all") {
    render();
  } else if (mode == "ongoing") {
    for (let i = 0; i < taskList.length; i++) {
      if (taskList[i].isCompleted == false) {
        filterList.push(taskList[i]);
      }
    }
    render();
  } else if (mode == "done") {
    for (let i = 0; i < taskList.length; i++) {
      if (taskList[i].isCompleted == true) {
        filterList.push(taskList[i]);
      }
    }
    render();
  }
}

 

 

'

let menus = document.querySelectorAll(".menus button");

menus.forEach((menu) =>
  menu.addEventListener("click", (event) => getNewsByTopic(event))
);

const getNewsByTopic = (event) => {
  console.log("클림됨", event.target);
};

const getNewsByTopic = async (event) => {
  //console.log("클림됨", event.target.textContent);
  let topic = event.target.textContent.toLowerCase();
  let url = new URL(
    `https://api.newscatcherapi.com/v2/latest_headlines?countries=KR&topic=${topic}&page_size=5`
  );
  //console.log("uuu", url);
  let header = new Headers({
    "x-api-key": "mq7AfahUuQLPwY4_WhXjc9YCjgQKkKz6KhZvMbEDthE",
  });
  let response = await fetch(url, { headers: header });
  let data = await response.json();
  news = data.articles;
  render();
  //console.log("토픽뉴스 데이터", data);
};