안녕하세요. 신기한 연구소입니다.
저번 달 카드 사용 내역을 받아서 화면에 보여주고 싶은 경우,
우리 반 학생 명단을 화면에 보여주고 싶은 경우,
온라인 쇼핑몰에서 장바구니에 담아 준 목록을 또는 기존 구매 목록을 보여주고 싶은 경우 등
공통점은 여러 건의 데이터를 받아서 화면에 보여주고 싶은 경우인데요.
이렇게 목록을 하나씩 꺼내서 화면에 한 줄씩 추가해 주는 반복적 기능을 구현할 때
루프(반복) 문을 사용하면 된답니다.
반복문으로 사용하는 명령어는 for, for...in, for...of, while, do...while이 있는데
이번 포스팅은 for문에 대해 알아보겠습니다.
for문
위 경우 중 어떤것도 괜찮습니다. 같은 경우니까요.
그럼 온라인 쇼핑몰의 장바구니를 가지고 다시 생각해보겠습니다.
사고 싶은 상품을 장바구니에 담아뒀습니다.
장바구니에 들어가면 해당 상품들을 볼 수 있어야겠지요?
장바구니에 5개의 상품이 있다고 가정해봅니다.
for 반복문의 구조를 보겠습니다.
|
1
2
3
|
for (초기문; 조건문; 증감문){
실행구문;
}
|
cs |
그럼 장바구니 반복문을 위 구조대로 만들어보면서 각 부분에 대해 설명해볼게요.
먼저 이름을 지정하겠습니다.
장바구니 목록은 bucketList
반복문에 사용할 인덱스는 i로 시작해봅니다.
장바구니에는 5개의 상품이 있다고 했습니다. 조건으로 사용하면 됩니다.
for (초기문; i < 5; 반복문) 또는 for (초기문; i < 6; 반복문)
조건문에 둘 중 하나를 사용하면 됩니다. 그런데~~
장바구니에 상품 5개가 있다고 했습니다.
그럼 bucketList.length로 장바구니 내의 목록 개수를 가져오는 length 프로퍼터를 사용했다면
i < 5 스타일이 더 낫겠네요.
그럼 적용해보겠습니다.
for (초기문; i < bucketList.length; 증감문) // bucketList.length는 5입니다.
조건문이 완성되었으니 이제 초기문을 만들어보겠습니다.
초기문은 반복문이 시작할 때 초기화 해야 하는 변수 또는 구문으로 구성됩니다.
우리는 인덱스로 i를 사용하기로 했습니다.
|
1
|
for (var i ; i < bucketList.length; 증감문)
|
cs |
i를 선언했는데 할당을 안했군요.
bucketList가 5이고 i는 5보다 작을 경우라는 조건문을 만들었습니다.
만약 i를 1로 할당한다면 5보다 작은 조건문에서 1, 2, 3, 4 딱 4번만 실행하게 됩니다.
우리는 장바구니에 5개가 있으므로 5번 실행돼야 하는 것을 잊으면 안 됩니다.
i를 0으로 한다면 0, 1, 2, 3, 4 로 정확히 5번 실행하게 됩니다.
즉, 장바구니 목록 개수보다 작다는 표현이 사용되었으므로 0부터 시작한다면 문제없이 작동할 겁니다.
|
1
|
for (var i = 0; i < bucketList.length; 증감문)
|
cs |
멋지네요.
이제 마지막 증감문이 남았네요.
증감문이란 말 그대로 값을 증가하거나 감소하는 기능 말합니다.
반복문의 횟수는 i가 맡고 있기에 i를 증가하거나 감소하면 되겠네요.
만약 i를 증감하지 않으면 i는 0으로 계속 존재할 것이고 조건문의 평가는 0 < 5가 돼서
계속 true가 되므로 무한루프로 빠질 수 있답니다. (무한루프가 되면 for문이 계속 실행됩니다.)
증감문은 보통 i++, i-- 연산자를 사용하기도 하고
i+2, i*3 등의 산술식을 사용해도 된답니다.
우리의 장바구니는 0부터 1씩 증가하면 되기에
i + 1 또는 i++을 사용하면 되겠네요. 일반적으로 사용하는 i++로 하겠습니다.
|
1
|
for (var i=0; i<bucketList.length; i++)
|
cs |
for반복문이고 i=0으로 초기 할당을 하고 i가 장바구니 물품수보다 작은지 평가하고
i를 1 증가시킨 후 평가가 true면 for문의 명령어를 실행합니다.
for문은 하나 이상의 실행문을 만들 수 있는데 블록문 { }로 묶어주면 된답니다.
|
1
2
3
4
5
|
for (var i=0; i<bucketList.length; i++) {
명령문1;
명령문2;
...
}
|
cs |
for문의 특징을 더 알아보겠습니다.
1. 초기문은 for문이 실행될 때 가장 먼저 실행되고 딱 한 번만 실행됩니다.
또한 하나 이상의 변수를 , 를 사용해서 초기화할 수 있답니다.
|
1
|
for (var i=0, j=1; i<bucketList.length; i++)
|
cs |
초기화문은 생략도 가능합니다.
for문 앞에서 i를 선언 및 할당해서 사용할 수도 있지요.
|
1
2
|
var i = 0;
for (; i<bucketList.length; i++)
|
cs |
2. 조건문은 참/거짓으로 평가합니다.
그래서 다른 조건문으로 반복을 진행할지 평가할 수 있습니다.
|
1
|
for (var i=0; true; i++)
|
cs |
또는 생략도 가능한데 그럼 평가가 되지 않아 무한루프가 됩니다.
|
1
|
for (var i=0; ; i++)
|
cs |
for문의 조건이 아닌 for문 내부 명령에서 로직을 넣어 반복문을 중단할지 판단할 때 사용하면 되는데요.
이런 경우 break문으로 종료하는 로직을 넣을 수 있습니다.
|
1
2
3
4
|
for (var i=0; ; i++){
console.log(i);
if (i==100) break;
}
|
cs |
3. 반복문도 역시~생략이 가능합니다.
해당 기능을 명령문에 넣어서 사용해도 된답니다.
|
1
2
3
4
5
|
for (var i=0; ; ){
console.log(i);
i++;
if (i==100) break;
}
|
cs |
단순 증감일 경우는 for문에 넣어주면 가독성이 더 좋겠지요?
세 가지 모두 생략 가능하다고 했기에 다음처럼 사용할 수도 있습니다.
for (;;)
기본 무한루프를 돌리고 for문의 실행 구문 { ] 안에 해당 조건들과 기능을 넣어 구현할 수도 있답니다.
장바구니 목록을 화면에 뿌리기 샘플입니다.
|
1
2
3
|
for (var i=0; i<bucketList.length; i++) {
console.log(bucketList[i].goods);
}
|
cs |
목록을 받아서 하나씩 꺼내 사용해야 하는 경우 반복문을 사용하면 편리합니다.
다음 포스팅에서는 for...in과 for...of에 대해 알아보겠습니다.
즐 코딩하세요.
'Software > JavaScript' 카테고리의 다른 글
| [자바스크립트]while문 사용하기 편. (루프와 반복) (0) | 2022.06.26 |
|---|---|
| [자바스크립트]for..in문과 for..of문 알아보기 편. (루프와 반복) (0) | 2022.06.25 |
| [자바스크립트]switch 문 사용하기 편. (조건문) (0) | 2022.06.19 |
| [자바스크립트]if...else문 사용하기 편. (if 조건문) (0) | 2022.06.12 |
| [자바스크립트] 리터럴(literal) 쉽게 이해하기 편. with javascript (1) | 2022.05.24 |
