자바스크립트에서 for 루프 문을 가지고 놀기.

루프는 동일한 코드를 반복해서 실행하려는 경우에 편리하며 특히 배열과 함께 사용됩니다.

3개의 for 문 루프를 살펴보겠습니다.

대

인

FOR OF

재미로 PokéAPI( https://pokeapi.co/ )를 사용하고 있습니다. 포켓몬 이름을 가져오고 반복할 수 있는 사용하기 쉽고 재미있는 API입니다 🚀

다음과 같이 API 호출을 할 수 있습니다.

const axios = require('axios')
const baseURL = `https://pokeapi.co/api/v2`

async function obterPokemon() {
  const request = await axios.get(`${baseURL}/pokemon/?limit=150`)
  const pokemons = request.data.results
  return pokemons
}

console.log(pokemons) 를 전달하면 API가 객체 배열을 반환하는 것을 볼 수 있습니다. 예를 들면 다음과 같습니다.

[
  { name: 'bulbasaur', url: 'https://pokeapi.co/api/v2/pokemon/1/' },
  { name: 'ivysaur', url: 'https://pokeapi.co/api/v2/pokemon/2/' },
  { name: 'venusaur', url: 'https://pokeapi.co/api/v2/pokemon/3/' },
  { name: 'charmander', url: 'https://pokeapi.co/api/v2/pokemon/4/' },
  { name: 'charmeleon', url: 'https://pokeapi.co/api/v2/pokemon/5/' },
  ... 145 more items
]

...

오늘 우리의 임무는 3개의 고유한 "FORS"를 사용하여 이 배열을 반복하는 것입니다.

을 위한

Sintaxfor ([initialization]; [condition]; [final expression])
{declaration}
for 루프 문은 3개의 선택적 표현식과 필수 선언으로 구성된 루프를 생성합니다.

초기화
일반적으로 예를 들어 let i = 0와 같이 초기 값이 있는 var로 표시됩니다.

상태
이 부분은 일반적으로 초기화 객체(이 경우 "i")와 배열 또는 0보다 큰 숫자i <= array.length로 표시되는 코드 실행을 유지하거나 중단하는 역할을 합니다.

최종 표현
이 사람들은 일반적으로 i++ ou i--로 표시되는 전달되는 항목에 따라 루프 번호를 위 또는 아래로 만듭니다.

선언
이 부분에서 루프가 끝날 때까지 실행될 조건을 전달할 수 있습니다. for 문 다음에 대괄호 안에 전달해야 합니다.

....

코드로 이동합시다! 여기서 우리는 전통적인 "for"를 사용하여 약간의 반복을 할 것입니다.

async function getPokemons() {
const request = await axios.get(`${baseURL}/pokemon/?limit=150`)
const pokemons = request.data.results

console.time('FOR - RUNTIME')
const pokemonNames = []

     for (let i = 0; i < pokemons.length; i++) {
       pokemonNames.push(pokemons[i].name)
     }

console.log(pokemonNames)
console.timeEnd('FOR - RUNTIME')
}

getPokemons()

터미널에서 반환

I did 5 tests and they all took about 13ms with an average of 13.749ms

안으로

Sintaxfor (variable in object) {...}
FOR IN 루프는 객체의 열거된 속성 위에서 동일한 삽입 순서로 상호 작용합니다. 나는 FOR과 거의 동일하지만 sintax가 사용하기에 더 깨끗합니다. 여기에는 선언 외에 2개의 매개변수만 있습니다.

변하기 쉬운
쉽고, 개체의 "고유한"속성을 나타냅니다.

물체
반복하려는 객체입니다.

...

동일한 배열로 위에서 수행한 것과 동일한 반복을 수행하지만 FOR IN을 사용합니다.

async function getPokemons() {
  const request = await axios.get(`${baseURL}/pokemon/?limit=150`)
  const pokemons = request.data.results

  console.time('FOR IN - RUNTIME')
  const pokemonNames = []

        for (let i in pokemons) {
          pokemonNames.push(pokemons[i].name)
        }

  console.log(pokemonNames)
  console.timeEnd('FOR IN - RUNTIME')
}

getPokemons()

터미널에서 반환

I did 5 tests and they all took about 13ms with an average of 13.431ms

~을 위해

Sintaxfor (variable of iterable) {declaration}
FOR OF 루프는 더 많은 유형의 컬렉션을 반복하며 객체의 모든 개별 값에서 실행될 명령과 함께 함수를 호출하고 2개의 매개변수와 선언을 가집니다.

변하기 쉬운
반복할 때마다 다른 속성 값이 이 변수에 할당됩니다.

반복 가능한
반복하려는 객체입니다.

...

코드에 약간의 변화가 생겼습니다!

async function getPokemons() {
  const request = await axios.get(`${baseURL}/pokemon/?limit=150`)
  const pokemons = request.data.results

  console.time('FOR OF - RUNTIME')
  const pokemonNames = []

        for (let pokemon of pokemons) {
          pokemonNames.push(pokemon.name)
        }

  console.log(pokemonNames)
  console.timeEnd('FOR OF - RUNTIME')
}

getPokemons()

터미널에서 반환

I did 5 tests and they all took about 13ms with an average of 13.550ms

이력서에
결과를 통해 우리는 FOR 루프 간의 차이가 성능보다 훨씬 더 크다는 것을 알 수 있습니다. 모든 루프에는 세부 사항과 특이점이 있습니다.

FOR OF 루프는 우리의 삶을 더 쉽게 만들어 주지만 밀리초 만에 FOR IN이 약간 더 빠르다는 것을 알 수 있습니다.


보너스
Console.log는 코드에 영향을 미칩니다.

console.log 사용(5회 실행)
FOR = 13.749ms
FOR IN = 13.431ms
FOR OF = 13.550ms

console.log 없이(5회 실행)
FOR = 1,011ms
FOR IN = 0,386ms
FOR OF = 0,414ms

여기까지입니다 읽어주셔서 감사합니다...