23.06.01) 자바스크립트 반복문 for문, for in문, for of문

🤓오늘 공부한 내용

자바스크립트 예제 문제를 공부하면서 for문을 자주 쓰게 되는데 추가로 for in문, for of문의 

차이점에 대해 명확하게 이해하고 있지 않은 것 같아서 다시 개념을 공부 중이다.

 

📌1.for 반복문

- 가장 범용적으로 쓰이는 'for 반복문'은 특정횟수 만큼 반복하고 싶을때 사용한다.

- 자체적으로 초기식, 표현식, 증감식을 모두 포함하고 있는 반복문이다.

- for문은 다른 반복문과 다르게 반복 변수를 let 키워드로 선언해야한다.

- for문은 배열과 조합해서 많이 사용하는데 보통 배열의 length 속성만큼 반복을 돌리는 형태로 사용한다.

for (let i = 0; i < 반복 횟수; i++) {
문장
}

 

가장 기본적인 예제를 하나 가져오면 

let output = 0

for(let i = 0; i <= 100; i++){
  output += i
}
console.log(`1부터 100까지의 숫자를 모두 더하면 ${output}입니다.`)

//1부터 100까지의 숫자를 모두 더하면 5050입니다.

1부터 시작해야 하므로 i를 1로 초기화 하고,

i가 100보다 작거나 같을 때 까지 반복해야 하기 때문에 <=100을 쓴다.

 

📌2.for in 반복문

- 배열과 함께 사용할 수 있고 배열 요소를 하나 하나 꺼내서 특정 문장을 실행할 때 사용한다.

- 객체의 key값에 접근 가능하지만 value값에는 직접적으로 접근은 불가하다.

- 객체의 반복을 위해 만들어졌지만, 배열의 반복을 위해서는 추천되지 않고,

  쉽게 객체의 속성을 확인(순회)할 수 있도록 할 때 사용한다.

- 객체의 모든 열거 가능한 속성을 대상으로 쓴다.

for (const 반복 변수 in 배열 또는 객체) {
 객체의 모든 열거 가능한 프로퍼티의 갯수 만큼 반복적으로 실행하고자 하는 실행문
}

기본예제)

const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']

for(const i in todos){
  console.log(`${i}번째 할 일: ${todos[i]}`)
}
//0번째 할 일: 우유 구매
//1번째 할 일: 업무 메일 확인하기
//2번째 할 일: 필라테스 수업

- 반복변수에는 요소의 인덱스들이 들어온다.

 

📌3.for of 반복문

- 반복가능한 객체를 반복하고 순회할 수 있도록 해준다.

- 자바스크립트에서 반복할 수 있는 Iterator 속성이 있는 객체 Array, Map, Set, String, arguments 등을 대상으로 한다.

for (const 반복 변수 of 배열 또는 객체) {

}

 

기본예제)

const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']

for(const todo of todos){
  console.log(`오늘의 할 일: ${todo}`)
}
//오늘의 할 일: 우유 구매
//오늘의 할 일: 업무 메일 확인하기
//오늘의 할 일: 필라테스 수업

 

🔻참고자료

- 혼자 공부하는 자바스크립트 (이윤성) 책 참고

-https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...of

-https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...in