TIL 14. JS 반복문

rahula·2021년 5월 14일
0

javascript

목록 보기
6/15
post-thumbnail

javascript의 반복문, for과 while에 대해 알아보겠습니다. 이 글은 MDN 문서를 토대로 쓰여졌습니다.

반복문이란?

Loops offer a quick and easy way to do something repeatedly.

반복문은 어떤 태스크를 반복적으로 수행해야 할 때, 빠르고 쉬운 해결책이 된다.
예를 들어 게임에서 다섯 발자국을 가려고 한다면, 매번 발을 옮긴다고 코드를 적는 것보다 반복문을 쓰는 것이 훨씬 효율적이다.

for (let step = 0; step < 5; step++) {
  // Runs 5 times, with values of step 0 through 4.
  console.log('Walking east one step');
}

반복문에는 여러가지가 있지만, 본질적으로 하는 역할은 모두 똑같다. 어떤 조건이 충족될 때까지 {} 안에 쓰인 코드를 반복한다는 것. for과 while은 반복문을 수행하는 2가지 방법이라고 이해하면 좋다.

while 반복문

while 문은 어떤 조건문이 참이기만 하면 문장을 계속해서 수행한다.

초기문
while(조건문){
  반복할 코드
  증감문
}
let i = 0;
while (i < 3) {
  alert(i);
  i++;
}
//// shows 0, then 1, then 2 in the alert

참고 : 조건문은 항상 거짓이 될지라도 무한 루프는 피해야 합니다. 그렇지 않으면 그 반복문은 영원히 끝나지 않을 것입니다. 아래의 while 문은 조건문이 절대 거짓이 될 수 없으므로 영원히 반복될 것입니다.

for 반복문

for 반복문은 명시된 조건이 false가 될 때까지 태스크를 반복한다.

for ([초기문]; [조건문]; [증감문]){
  반복할 코드
}

for반복문의 흐름을 단계별로 이해하기.

  1. 초기문 : 당연한 얘기지만, 반복문에는 카운트가 필요하다. 카운트의 초기값을 정함으로써 해당 코드가 몇번 반복될지를 결정해야 한다. 그래서 반복문 for block에서만 쓰일 변수를 선언해야 한다.

  2. 조건문 : 조건문은 for 반복문이 조건을 검사하기 위해서 쓰여진다. 조건의 boolean값이 true인 한, 반복문 속의 코드는 계속해서 실행된다. false가 되면 for 반복문은 멈춘다.

  3. 증감문 : 조건문의 조건이 true일 때, 초기문에서 선언됐던 변수가 얼마나 증가할지 혹은 얼마나 감소할지를 결정한다.

  4. 반복할 코드 : 실행된다.

  5. 한 번 실행이 끝난 후, 반복문의 실행 흐름은 다시 조건문 단계로 돌아간다.

for...in 문

for...in 문은 객체의 열거 속성을 통해 지정된 변수를 반복합니다. 각각의 고유한 속성에 대해, JavaScript는 지정된 문을 실행합니다.

for (key in object) {
  statements
}

object property의 key & value 쌍이 있으면, for..in문에서 in 앞에 오는 것은 key이다. key의 갯수만큼 반복문을 실행하고 싶다면 for...in문이 제격.

const obj = {
  name : "john",
  age : 19,
  job : "developer"
}

for(key in obj){
  console.log(key)
}
// name
// age
// job

배열에 대한 for...in문과, 보통의 for문은 정말 비슷한 모양을 하고 있다.

const arr = [1,2,3,4,5]

for(let i = 0; i <= arr.length; i ++){
  console.log(arr[i])
}
// 1
// 2
// 3
// 4
// 5

for(key in arr){
  console.log(arr[key])
}
// 1
// 2
// 3
// 4
// 5

for...of 반복문

for...in 반복문이 key & value쌍의 key를 다뤘다면, for...of문은 value를 다룬다.

for(value of obj){
  console.log(key)
}
// john
// 19
// developer
profile
백엔드 지망 대학생

0개의 댓글