For 루프의 기초: For...in 또는 For...of?

Javascript를 배우면서 For 루프의 기본 사항에 대해 과거로부터 조금 알게 되었습니다. 지난 수업에서 간단히 배웠고 이전에 사용했을 수도 있습니다. for 문에 대해 더 많이 배우기 시작했을 때 for...in 및 for...of와 씨름했습니다. 이제 내가 당신을 돕기 위해 여기 있습니다! 코딩을 배우는 것은 처음에는 무서울 수 있지만 정말 재미있을 수도 있습니다. 보여드리겠습니다!

For 루프란 무엇입니까?

먼저 for 루프를 이해했는지 확인해 봅시다. for 루프를 간단히 정의하기 위해 MDN은 다음과 같이 설명합니다. ]". 간단히 말해서 for 문은 루프가 시작되어야 하는 시작 지점, 루프를 통과하는 방법, 마지막으로 루프가 중지되고 영원히 실행되지 않도록 하는 끝을 제공합니다. 그런 다음 다음 문을 기반으로 해당 루프를 실행합니다. 다음은 간단한 추가 예입니다.

let a = '';
for (let i = 0; i < 5; i++) {
  a = a + i;
}
console.log(a);
//=> "01234

간단한 for 루프는 내가 배울 때 나에게 의미가 있었기 때문에 for…in 및 for…of를 소개했을 때 많은 질문이 있었습니다. 내 첫 번째는 일반 for 루프를 사용하지 않는 이유는 무엇입니까? 나중에 계속 배우면서 혼란스러워졌습니다. 어쨌든 for...in과 for...of의 차이점은 무엇입니까? 빠른 속도로 학습하다 보면 때때로 혼란스럽거나 무언가를 잊어버리기 쉽습니다. 그래서 for...in은 객체를 반복하는 것이고 for...of는 배열과 같은 모든 반복 가능한 객체를 반복하는 것임을 깨닫는 데 약간의 시간이 걸렸습니다.

For...In을 어떻게 사용합니까?

MDN에서 설명하는 for...in은 "상속된 열거 가능한 속성[2]을 포함하여 개체의 모든 열거 가능한 문자열 속성(기호로 키가 지정된 속성 무시)을 반복하는 문"입니다. 즉, for…in은 객체의 키를 반복합니다. 7개의 키 값 쌍 또는 7개의 드워프가 있는 개체가 있고 각각 다음과 같이 연관된 숫자가 있다고 가정해 보겠습니다.

let object = { bashful: 1, doc: 2, dopey: 3, grumpy: 4, happy: 5, sleepy: 6, sneezy: 7 }

이제 객체의 7개 문자 각각을 반복하고 각각에 대한 문장을 기록하는 for…in 루프를 만들어 봅시다!

for (const dwarf in object){
    console.log(`the ${object[dwarf]} dwarf is ${dwarf}`)
}
//=> "dwarf 1 is bashful"
//=> "dwarf 2 is doc"
//=> "dwarf 3 is dopey"
//=> "dwarf 4 is grumpy"
//=> "dwarf 5 is happy"
//=> "dwarf 6 is sleepy"
//=> "dwarf 7 is sneezy"

For...Of를 어떻게 사용합니까?

w3schools가 설명하는 for…of 루프의 차이점은 "반복 가능한 객체의 값을 반복하는 문"입니다. Arrays, Strings, Maps, NodeLists 등과 같은 반복 가능한 데이터 구조를 반복할 수 있습니다[3]”. 이해를 돕기 위해 이 예제에서는 배열을 사용할 것입니다. 다음은 세 개의 이름을 가진 배열입니다…

const array = ['Robbie', 'Miley', 'Jackson'];

이제 for…of 루프를 사용하여 배열의 각 이름을 반복하고 성이 첨부된 각 이름을 기록할 것입니다!

for (const name of array) {
   console.log(name + ' Stewart')
};
//=> Robbie Stewart 
//=> Miley Stewart 
//=> Jackson Stewart

결론:

for…in과 for…of 루프의 차이점과 루프를 올바르게 사용하는 경우를 이해하는 데 도움이 되었기를 바랍니다. 또한 제 예제를 통해 코딩이 재미있을 수 있음을 보여주는 데 도움이 되었기를 바랍니다.

참조:
[1] "용 - Javascript: MDN."자바스크립트 | MDN, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for .
[2] "For...in - Javascript: MDN."자바스크립트 | MDN, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in .
[3] "For Of 루프."Of에 대한 자바스크립트, https://www.w3schools.com/js/js_loop_forof.asp .