멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 39 (루프(Loop), forEach 루프)

 

목차

• 루프(Loop)
• while 문
• do ... while 문
• for 문
• 흐름 제어문
• 배열 반복
• 객체 반복
• forEach 루프
• 오늘 하루를 돌아보며

 

루프(Loop)

while 문

while 문은 if 문과 유사한 구조로 if 키워드 대신, while 키워드를 사용한다. 단, 조건이 참일 동안 반복적으로 블록 내부의 코드가 실행된다는 점이 다르다. 그래서 while 문을 사용할 때는 무한 루프(Infinite Loop)에 빠지지 않도록 주의해야 한다. 루프가 종료될 수 있도록 특정 상황에서 조건이 거짓으로 평가되도록 해야 한다.

function draw() {
  // 드로잉 코드 작성
}

// [조건] 반복자(iterator)
let i = 0

// [반복문] 조건 평가
// i 값이 50보다 작으면 참 (반복)
// 50이상이 되면 거짓 (반복 종료)
while (i < 50) {
  // 반복될 코드
  draw()
  // 조건인 반복자 값 변경
  i = i + 1 // 또는 i += 1 또는 i++
}

 

마지막 반복자 값을 증가하거나 감소할 때 코드를 간소화하기 위해 증가 연산자(++)나 감소 연산자(--)를 사용할 수 있다. while 문의 조건으로 0이 오면 거짓인 값으로 평가하기 때문에 위 코드를 아래처럼 간소화할 수 있다.

let i = 50
while (i--) draw()

 

do ... while 문

do ... while 문은 while 문과 달리, 먼저 구문을 실행하고 이후에 조건을 평가한다. 따라서, 조건이 거짓으로 평가되더라도 구문을 반드시 1회 실행한다.

do {
  // 실행 코드 (최소 1회 실행)
} while (조건) // 조건이 거짓이어도 1회 실행

 

 

for 문

while 문이나 do ... while 문처럼 for 문 또한 코드를 반복 처리한다. 위에서 살펴보던 while 문을 for 문으로 바꿔보자.

function draw(n) {
  console.log(n + '번 드로잉합니다.')
}

// for (변수 선언, 값 할당; 변수가 유효한지 비교; 변수 변경)
for (let i = 0; i < 50; i++) {
  draw(i)
}

 

while 문의 조건 식과 조건 변경 구문이 모두 for 문의 괄호(()) 안에 사용되기 때문에 while 문보다 간결한 for 문이 더 많이 사용된다.

 

for 문의 실행 순서는 다음과 같다.

1. let i = 0: 변수 선언 값 할당
2. i < 20: 변수가 유효한지 비교
3. draw(i): 코드 실행
4. i++: 변수 변경

 

흐름 제어문

특정 상황에서 코드를 건너뛰어 이어가거나, 중단하고 싶을 때는 반복문 내부에 continue 또는 break 흐름 제어문을 사용한다.

 

continue를 만나면 코드를 이어서 실행하지 않고 반복문 처음으로 돌아간다.

function draw(n) {
  console.log(n + '번 드로잉합니다.')
}

let i = 0

while (i < 20) {
  i = i + 1

  // [특정 상황] 흐름 제어
  // i 값이 6 ~ 14인 동안, draw(i) 건너뛰어 이어가기
  if (i > 5 && i < 15) {
    continue
  }

  draw(i)
}

 

break를 만나면 반복문을 중단하고 밖으로 빠져나간다.

function draw(n) {
  console.log(n + '번 드로잉합니다.')
}

let i = 0

while (i < 20) {
  i = i + 1

  // [특정 상황] 흐름 제어
  // i 값이 15일 때 반복문 종료하기
  if (i === 15) {
    break
  }

  draw(i)
}

 

배열 반복

실제로 반복문을 주로 사용하는 경우는 배열과 같이 여러 항목을 포함한 집합을 순환할 때다. 배열을 반복할 때 배열의 각 항목을 한 번씩 탐색한다. 배열의 length 속성을 사용할 수 있다.

const fruitBasket = ['체리망고', '토마토', '스트로베리']

for (let i = 0; i < fruitBasket.length; ++i) {
  const fruit = fruitBasket[i]
  console.log('과일 바구니 안에는 "' + fruit + '" 과일이 있습니다.')
}

 

배열의 각 항목을 역순(逆順)으로 순환하도록 하려면 다음과 같이 작성한다. 미비하긴 하지만, 역순 반복이 좀 더 빠르다. 성능 차이는 반복 횟수가 증가할수록 커진다.

for (let i = fruitBasket.length - 1; i >= 0; --i) {
  const fruit = fruitBasket[i]
  console.log('과일 바구니 안에는 "' + fruit + '" 과일이 있습니다.')
}

 

배열을 반복할 때 for ... of 문을 사용하면 for 문을 사용할 때보다 코드 가독성이 좋아진다.

for (const fruit of fruitBasket) {
  console.log('과일 바구니 안에는 "' + fruit + '" 과일이 있습니다.')
}

 

 

객체 반복

배열을 반복할 때 for 문을 사용하지만, 객체를 반복할 때는 for ... in 문을 사용한다. 속성 in 객체는 객체 안에 속성이 있는지 여부를 불리언 값으로 반환한다.

for (let 속성 in 객체) {
  const 값 = 객체[속성]
}

 

forEach 루프

모든 배열 객체는 forEach() 메서드를 사용할 수 있다. 이 메서드를 사용하면 배열의 모든 항목을 읽기 쉬운 방식으로 반복할 수 있다. 배열 객체의 forEach() 메서드에 콜백을 전달하면, 전달된 콜백 함수는 세 개의 매개변수를 받는다.

array.forEach((item, index, array) => {
  // ...
})

 

인덱스를 비롯한, 배열 그 자체 인수가 필요하지 않을 경우 항목만 사용할 수 있다. 필요할 때 인덱스나 배열을 전달한다.

const fruitBasket = ['체리망고', '토마토', '스트로베리']

fruitBasket.forEach((fruit) => {
  console.log('과일 바구니 안의 과일에는 "' + fruit + '"가 포함되어 있습니다.')
})

 

오늘 하루를 돌아보며

JavaScript는 내용이 어려워서 격주로 휴강이 있다. 처음에는 휴강이 두 주에 한 번씩 있길래 신났는데 이건 아무리 봐도 놓친 내용 따라잡으라고 주는 휴강인 것 같다. 많은 양의 정보가 한 번에 우르르 머리로 들어오니까 정리하고 받아들일 시간이 필요하다.

 

진도를 빨리 나간다고 다 좋은 게 아니라는 게 무슨 말인지 알 것 같다. 내용이 많든 적든 배운 것을 소화하고 정리할 시간이 필요하다. 배운 내용을 받아들이고 머릿속에서 처리하는 데 시간이 걸린다. 오늘 배운 게 내일 당장은 생각나지 않아도, 그 다음 날에 소화가 되면 갑자기 이해되고 자연스럽게 사용하고 있다.

 

그래도 역시 많이 보고, 많이 연습하고, 많이 써봐야 한다. 이번 주에 진도를 마저 못 나가서 과제가 없어졌다. 여러 요소를 선택하는 거랑, 노드와 요소의 비교, 그리고 아코디언까지 진도를 나갔어야 과제를 할 수 있는데, 그 내용을 다 못 배웠다. 내일이랑 주말 동안 열심히 예습하고 학습 자료 읽어보면서 과제를 살짝 해봐야겠다. 못 하더라도 시도해 볼 수는 있으니까!