1 minute read

LOOPS 루프

​ 어떤 기능을 반복 수행하는 것

​ 빠르고 간편하게 반복적인 일을 완료할 수 있다


FOR 루프

특정 코드 실행 횟수를 정의할 수 있으며, 배열에 사용 가능한 배열루프

[ Syntax ]

for (반복문 실행 시간을 정의하는 코드) {
  반복할 실행문
}


[ For 루프에서 자주 사용하는 템플릿 ]

for (i = 0; i < 배열.length; i++) {
  console.log(배열[i])
}

// 1.  i = 0  => 초기값
// 2.  i < 배열.length  => 종료 조건(반복 실행 시간 정의):불리언 타입. 이 조건이 거짓이 될 때 루프가 종료
// 3.  i++  => 증감 표현식(업데이트 값) : 변수의 값을 변화시킴

// 세미콜론(;)으로 구분


For 반복문 변수로는 반복을 의미하는 “i” 가 일반적

“iterator” 또는 “index”를 나타내는 “i”는 단순히 관행적으로 사용되는 이름이며,

반복문 내에서만 사용할 수 있는 도우미 변수이다

이 변수는 반복 인덱스를 나타내며 각 반복에서 현재 위치를 나타낸다


 i < 배열이름.length 여기서 ‘ < ‘인 이유는

length는 배열의 개수가 나오는데 인덱스는 0부터 시작하기 때문에 배열개수에서 1을 빼야 최대 인덱스임

따라서 ‘ i <= 배열.length - 1 ‘ 또는 ‘ i < 배열.length ‘ 인데 후자가 더 간단하기 때문



루프사용의 간편함

루프 X 루프 O
image-20240307113133966 image-20240307131618408
image-20240307113648038 image-20240307131344738



 [ For 반복문 연습 ]

  • 1 - 20 사이 ‘ 짝수 ‘ 추출하기

    image-20240307135646994

    image-20240307135712643


  • 1 - 20 사이 ‘ 홀수 ‘ 추출하기

    image-20240307135902800

    image-20240307135926380


  • 100에서 10씩 빼며 0 만들기

image-20240307140248088

image-20240307140356158


  • for 반복문 활용 실습 ( 변수 people 속 이름을 모두 대문자로 )

image-20240307150922271



For 루프 중첩

- 보통 중첩된 배열을 통과하거나 반복해야할 때 사용

- for루프 안에 for루프

( 실습 1 )

image-20240307221240033

image-20240307221331711

=>  바깥의 i 루프가 한 번 실행할 때, 안쪽의 j 루프는 유효한 만큼 반복 실행 


( 실습 2 )

image-20240307224438608

=>   ${i + 1} 여기서 i에 1을 더한 이유는 인덱스는 0부터 시작하는데 행은 1행부터 표현하기 위해

image-20240307224511686

image-20240307224837889

=>  seatingChart[i] 를 따로 변수에 저장하지 않아도 가능



[ 구구단 만들기 ]

image-20240417210118834

[ 짝수 제외한 구구단 출력 ]

(방법 1)

image-20240417211602692

=> 곱하는 두 수 중 하나라도 짝수면 결과는 짝수가 나오기 때문에 i 와 j 모두에 짝수일 경우 건너뛰도록 함


(방법 2)

image-20240417212552999

=> i 와 j의 조건을 한 줄에 같이 씀


(방법 3)

image-20240417213327556

=> 변수의 값을 1에서 시작해 2씩 더해 짝수의 값이 나오지 않게




[ ✯무한 루프의 위험성✯ ]

image-20240307143116088

=> 20에서 계속 1씩 증가하는데 조건에 증가의 한계점이 없다

=> 실행하게 되면 브라우저가 중단되거나 느려진다

Updated: