학습 반복: 사랑 이야기(아니면 그 반대)

반복이란 무엇입니까?

이것은 JavaScript 메서드를 구성하는 추상화에 노출되었을 때 내가 가진 첫 번째 질문이었습니다. 저는 이 모든 개념이 마음에 들지 않았습니다. 사실 대부분이 제 머리를 아프게 했습니다. 나는 결코 전문가가 아니며 그의 여정을 공유하는 학생일 뿐입니다.

텍스트와 코드 페이지를 읽는 것은 벅차고 스트레스를 주기도 합니다. 반복자에 대해 읽을 때 나는 "도대체 왜 개체나 배열을 "통과"하거나 반복해야 할까요?"라고 자문했습니다. 몇 주 동안 다양한 다른 개념으로 내 두뇌를 폭격한 후에 그것은 나에게 분명해졌습니다.

To show where my learning started, here's an example.

const numbers = [1, 2, 3, 4];

for (num = 0; num < numbers.length; num++) {
  console.log(numbers[num]);
} 

//=> [ 2, 3, 4, 5 ]

이런 종류의 말이 맞죠? 배열의 숫자를 나타내기 위해 num을 선택했습니다. num은 0부터 시작하고 num이 (총 길이)보다 작은 동안 배열의 길이에 도달할 때까지 num을 1씩 증가시킵니다. 꽤 깔끔한! 이 개념은 이해하기 쉽고 숫자를 증가시키는 데 많이 사용됩니다.

내 뇌리를 맴돌았던 그..

서문으로 돌아가서 이해하는 데 시간이 걸렸던 개념입니다. ...나에게 분명해진 다양한 다른 개념으로 내 뇌를 공격하는 것은 forEach() 루프입니다. forEach() 루프는 흥미롭습니다. "이 개체 또는 배열을 반복하고 각 항목에 대해 이 작업을 수행하십시오!"라는 말을 정확히 수행합니다.

A simple example, lets add 1 to each item in our array.

const numbersArray = [1, 2, 3, 4];

numbersArray.forEach((num, index) => {
  numbersArray[index] = num + 1;
});

console.log(numbers);

//=> [ 2, 3, 4, 5 ]

이것도 언뜻 보기에는 많은 의미가 있지만 이 두 개념은 더 크고 복잡한 것에 적용될 수 있습니다. 내가 정말로 집중하려고 하는 것은 forEach() 루프입니다.

forEach(더 큰 것)

DOM에 요소를 추가하는 방법을 배우기 시작했을 때 forEach() 루프의 힘을 진정으로 깨달았습니다. JavaScript에서는 아시다시피 기본 HTML로 시작하여 헤더, 단락 등의 스타일을 지정하는 몇 가지 CSS 규칙을 결정할 수 있습니다. 동일한 기본 구조(레스토랑 정보를 표시하는 yelp 결과 생각)로 페이지에 여러 요소가 있는 상황에서 forEach()를 사용하여 동일한 관련 정보를 모두 포함하는 각 레스토랑 카드를 하드 코딩하는 반복을 피할 수 있습니다. . 이것은 또한 코드를 더욱 동적으로 만듭니다. 언젠가는 검색 기준에 맞는 레스토랑이 10개 있을 수 있지만 다음 날에는 두 개가 더 열릴 수 있습니다. 이러한 방식으로 코드를 작성하면 돌아가서 실행 취소하거나 하드 코딩된 레스토랑 카드를 다시 실행할 필요 없이 얼마나 많은 결과가 관련성을 유지하든 관계없이 함수를 재사용할 수 있습니다.

Here's an example...

// Our returned fetch object:

 const restaurant = {
    name: "Midtown Sushi",
    rating: "4.3",
    location: "2801 P Street",
  };

  // To keep it simple, lets pretend that searchQuery is a
  // form that calls this function when you search for food.

  searchQuery.addEventListener("submit", (e) => {
    e.preventDefault();

    const restaurantQuery = (rest) => {
      // Select our list and give it a variable name
      const restaurantList = document.querySelector("#restaurant-list");
      // Create a 'home' for each of our fetch data items
      const card = document.createElement("div");
      card.className = "rest-info";
      const header = document.createElement("h2");
      header.textContent = rest.name;
      card.append(header);
      const rating = document.createElement("p");
      rating.textContent = rest.rating;
      card.append(rating);
      const location = document.createElement("p");
      location.textContent = rest.location;
      card.append(rating);
      // Append that new 'card' to our list
      restaurantList.append(".rest-info");

      fetch("http://your-local-restaurant-api.com")
        .then((r) => r.json())
        .then((data) => data.forEach((restaurant) => displayCard(restaurant)));
    };
  });

This example is missing tons of relevant data, and much more complex that I could really fit on a single blog post.

실제로 요점은 동적 웹사이트를 디자인할 때 관련 데이터를 가져올 수 있고 JavaScript를 사용하여 키/값 쌍에 해당 데이터 홈을 제공할 수 있다는 것입니다. 레스토랑 카드의 forEach(), 우리는 이 템플릿이 우리를 위해 일하도록 만듭니다! 이러한 종류의 템플릿은 우리에게 많은 유연성을 제공하고 항상 돌아가서 내용을 편집할 필요 없이 코드 조각을 재사용할 수 있게 해줍니다.

결론

이 주제는 내가 보여준 것보다 훨씬 더 깊이 들어가지만 웹 개발에서 JavaScript가 제공하는 강력한 기능을 잘 보여줍니다. 반복은 반복되는 문제에 고유한 도구를 제공하며 반복을 피하는 데 도움이 되는 간단한(또는 복잡한) 작업을 적용할 수 있습니다. 아직 배우는 중이고 내 예제에 실수가 있다고 확신하지만 이것이 초보 개발자가 우리 코드 내에서 반복자와 반복자의 가치에 대해 조금 더 이해하는 데 도움이 되기를 바랍니다. 제 예를 설명하는 더 좋고 간단하거나 더 깔끔한 방법이 있다고 생각하시면 아래에 의견을 남겨주세요. 수정하겠습니다!

읽어 주셔서 감사합니다!
-타일러