TIL _ for...in 과 for...of 반복문

1. for...in 반복문

2. for...of 반복문

1. for...in 반복문

🔑 for...in 반복문을 사용하면 객체의 모든 키를 반복하여 대입할 수 있습니다.

// 기본 문법
for (variable in object) {
    body 
}
// 객체(object) 내 각 프로퍼티의 키(key)를 반복 대입하여 본문(body)을 실행합니다.
// 객체 자리에 배열(array)을 넣을 경우, variable은 배열 내 각 요소들의 인덱스 값을 순회합니다.

// 예시(객체)
let player = {
  name: "Kim Yeon-Koung",
  age: 33,
  height: "192cm"
}

for (key in player) {
  // 키 값을 반복
  console.log(key);  // name, age, height
  // 키에 해당하는 값(value)을 반복
  console.log(player[key]); // Kim Yeon-Koung, 33, 192cm
}

// 예시(배열)
let alphabet = ['a', 'b', 'c', 'd', 'e']

for (index in alphabet) {
  // 인덱스 값을 반복
  console.log(index);  // 0, 1, 2, 3, 4
  // 인덱스에 해당하는 요소를 반복
  console.log(alphabet[index]); // a, b, c, d, e
}

2. for...of 반복문

🔑 for...of 반복문은 iterable(ex. array, string, set 등) 내 요소(또는 문자, 밸류 등)를 반복하여 대입할 수 있습니다.

// 기본 문법
for (variable of iterable) {
  body 
}

// 예시(배열)
let alphabet = ['a', 'b', 'c', 'd', 'e']

for (element of alphabet) {
  // 배열의 요소들을 반복
  console.log(element); // a, b, c, d, e
}

// 예시(문자열)
let vic = 'victory'

for (cha of vic) {
  // 문자열의 각 문자들을 반복
  console.log(cha); // v, i, c, t, o, r, y
}

• 참고자료

1. 유튜브 codeSTACKr 채널 https://youtu.be/c5a4sNshBA4,
2. 모던 자바스크립트 튜토리얼 객체 파트 https://ko.javascript.info/object
   
   
   
   

"작성 내용 중 오류나 오타가 있다면, 댓글로 알려주시면 감사하겠습니다. 주니어 개발자에게 남겨주시는 작은 피드백이 큰 도움이 될 것 같습니다. 고맙습니다 :)"