자바스크립트에서 루핑하기

자바스크립트를 능숙하게 다루기 위해서는 특정 상황에서 어떤 유형의 루프를 사용해야 하는지 뿐만 아니라 객체를 반복하는 방법에 대한 지식이 매우 중요합니다. 다음은 사용 가능한 5가지 유형의 루프와 각각을 사용해야 하는 경우의 예입니다.

For-in 루프:

개체를 반복하는 데 사용됩니다.

예시:const pet = { name: “Rex”, breed: “Pug”, color: “brown” }
for (const key in pet) { console.log(pet[key]) } // => Rex / Pug / brown
참고: 이것은 열거 가능한 속성(기호가 아닌)이 있는 모든 개체에서 작동합니다. 따라서 배열에서 작동하지만 배열용으로 설계된 루프를 사용하는 것이 훨씬 좋습니다.

주의: 속성이 개체와 동일한 순서로 방문된다는 보장은 없습니다. 루프 중에 속성을 수정하는 경우 피해야 합니다. 더 나은 옵션은 루프에서 사용할 수 있는 배열을 반환하는 Object.keys(pet)를 사용하는 것입니다.

For-of 루프:

배열을 반복하는 데 사용됩니다.

예시:

const petArray = 
  [
    { name: “Rex”, breed: “Pug”, color: “brown” },
    { name: “Pebbles”, breed: “Dalmatian”, color: “white with 
      black spots” },
  ]

for (const element of petArray) { console.log(element[‘name’]) } //=> Rex / Pebbles

참고: 이것은 문자열, 배열 및 배열과 유사한 객체에서 작동합니다.

문자열 반복의 예:const stringArray = “this is a string”
for (const letter of stringArray) { console.log(letter) } //=> t / h / i / s / …
주의: 이것은 각 요소를 방문해야 하고 요소를 변경하지 않을 때 가장 잘 사용됩니다. 각 요소에 대해 작업을 수행하려면 map 및 reduce와 같은 더 나은 방법이 있습니다. 반복을 제어하거나 루프의 요소 인덱스에 액세스하려면 기본 for 루프가 더 잘 작동합니다.

For-Each 루프:

콜백 함수를 사용하여 배열을 반복합니다. 선택적 인덱스, 배열 및 thisArg 인수.

예시:petArray.forEach( (element, index) => console.log(index, element.name)) //=> 0 “Rex” / 1 “Pebbles”
참고: for-of 루프와 유사하지만 콜백 함수가 필요합니다. 인덱스에 액세스해야 하거나 더 복잡한 작업을 수행해야 하는 경우에 유용합니다. 다시 말하지만, 이것은 배열의 각 요소를 방문해야 할 때 가장 잘 사용됩니다. 더 복잡한 상황에서는 일반 for 루프가 더 나을 수 있습니다.

루프:

세 개의 선택적 표현식이 있는 루프에 사용됩니다.

예시:

let numbers = []

for (let i=0; i<5; i++) { numbers.push(i) }
console.log(numbers) //=> [0,1,2,3,4]

참고: 괄호 안의 표현식은 선택 사항이며 매우 유연합니다. 루프에서 처리하는 방법을 쉽게 사용자 지정할 수 있습니다. 이것은 for 루프를 더 복잡한 상황에 대한 훌륭한 옵션으로 만듭니다.

주의: 선택적 표현식을 지정하지 않으면 루프에서 평가하고 업데이트해야 합니다. 그렇지 않으면 무한 루프 및/또는 예기치 않은 결과를 얻게 됩니다.

동안 / Do-While:

지정된 조건이 false로 평가될 때까지 반복하는 데 사용됩니다.

while 루프의 예:

let i = 0

while (i < 5) {
  console.log(‘Hi!’, i)
  i++
} //=> Hi! 0 / Hi! 1 / Hi! 2 / Hi! 3 / Hi! 4

참고: 조건은 루프 시작 시 확인되므로 조건이 즉시 false로 평가되면 while 루프가 실행되지 않습니다.

do-while 루프의 예:

let k = 5

do {
  console.log(‘Hi Again!’, k)
  k++
} while (k < 5) //=> Hi Again! 5

참고: 이 조건은 루프가 끝날 때 확인되므로 루프는 항상 최소한 한 번은 실행됩니다.

계속/중단:

루프로 작업할 때 두 가지 유용한 키워드입니다.

계속: 루프의 다음 반복으로 건너뜁니다.

중단: 루프를 종료합니다.

이것은 JavaScript에서 사용할 수 있는 루프에 대한 간략한 요약이었습니다. 이러한 중요한 개념을 알면 더 나은 JavaScript 프로그래머가 되는 데 도움이 됩니다.