반복문은 자바스크립트 뿐만 아니라 많은 프로그래밍 언어에서도 쓰인다.
왜냐하면 반복적인 작업이 필요한 순간이 있기 때문이다.
똑같은 작업을 10000번 ? 이나 해야 하는데 반복문이 없다면 정말 좌절스러울 것이다.
반복문에는 대표적으로 for문과 while 문이 있다.
for 문에서도 for in, for of 등등 상황에 따라 쓸수 있는 여러가지가 있다.
for loop(for 문)
for 반복문은 어떤 특정한 조건이 거짓으로 판별될 때까지 반복한다.
문법은 이렇다.
for ([초기문]; [조건문]; [증감문]) 문장
for(let i=0; i<10; i++){
console.log('*');
}
// **********
for 문에서는 i나 j같은 문자를 자주쓴다.
어떤 뜻이 있는건 아니고 그냥 반복은 몇 번 하겠다 루프의 목적으로 사용한다.
코드를 보면,
초기문 i = 0 // i는 0부터 시작
조건문 i<10 // i가 10보다 작으면
증감문 i++ // i를 1씩 증가시켜라
프로세스를 보면
1. 초기문과 조건문을 비교해서
2. 문장을 실행한다.
3. 실행 후 증감
4. 조건 확인
5. 문장 실행
5-1. 종료
1 > 2 > 3 > 4 까진 간다
만약 4에서 조건에 맞지 않으면 for 문을 종료하고 (5-1)
맞다면 2 > 3 > 4 를 조건에 맞지 않을 때까지 반복한다.
조건문에 비교 연산자를 잘못써서 무한루프가 될 수 있으니 주의하자
배열 루프
for문을 배열에 유용하게 쓸 수 있다.
배열에 인덱스가 있기 때문에 for문과 아주 찰떡이다.
const animals = ['lion', 'dog', 'cat'];
for(let i=0; i<2; i++){console.log(i, animals[i]);}
// 0, 'lion'
// 1, 'dog'
// 2, 'cat'
이런 식으로 배열의 데이터를 모두 가져와 보여줄 수 있다.
만약 배열의 길이가 1000 이 넘는다면
조건문에 배열의 길이만큼 넣어주면 된다.
for(let i=0; i<animals.length;i++)
배열은 또 다른 방법도 있다
바로 for of문인데
변수에 배열을 넣어서 돌리는 방식이다
const animals = ['lion', 'dog', 'cat'];
for(let print of animals){
console.log(print);
}
// 'lion'
// 'dog'
// 'cat'
배열이 오는 부분에 문자열도 가능하다
만약 인덱스를 써야하는 상황에서는 for문을 사용하자
루프 중첩
루프안에 루프를 넣을 수 있는데
구구단을 예시로 들면
for(let i=1;i<10;i++){
for(let j=1;j<10;j++){
console.log(i + "*" + j + "=" i*j);
}
}
// 1 * 1 = 1
// 1 * 2 = 2
// 1 * 3 = 3
// ...
// 9 * 1 = 9
// 9 * 2 = 18
// 9 * 3 = 27
// ...
이런식으로 중첩을 이용해서 활용을 할 수도 있다.
j도 루프에서 자주 사용되는 변수이다.
만약 다차원 배열이 있다면 루프 중첩을 이용해서 데이터를 가져올 수 있다.
또 다른 루프 while
while문도 반복작업을 위한 반복문이다.
while 문의 문법은
while (condition) statement
while(조건){문장}
while에는 따로 증감문이 없어도 돌아가기 때문에
필요한 증감문은 넣어줘야한다.
1~10까지의 수를 출력하는 것을 예로 들면
let i=0;
while(i<10){
i++;
console.log(i);
}
// 1
// 2
// ...
// 10
이런식으로 증감문은 while 안쪽에 위치해 있다.
while문은 몇 번 반복해야 할지 모를 때 사용하면 좋을 것 같다.
루프 정지
루프를 정지 시킬 수 있는 방법도 있다.
바로 break 키워드 이다.
for문이나 while 문에 조건문을 넣고 break 키워드를 넣어주면
원하는 조건일 때 반복문을 정지 시킬 수 있다.
0~9 까지 도는 반복문인데 3일 때 정지시키려는 예시를 들면
for(let i=0;i<10;i++){
console.log(i);
if(i === 3) break;
}
이런식으로 정지가 가능하다
'javascript' 카테고리의 다른 글
자바스크립트 함수 범위와 표현식 (0) | 2023.03.19 |
---|---|
자바스크립트 함수 (0) | 2023.03.17 |
자바스크립트 객체 (0) | 2023.03.14 |
자바스크립트 배열 메소드 (2) | 2023.03.12 |
자바스크립트 배열 (0) | 2023.03.11 |