컴퓨터를 공부하고자 마음먹은지 N일차

[51일차]javascript에서 for문과 while문의 활용법, break와 continue 쉽게 알자. 본문

📒Javascript

[51일차]javascript에서 for문과 while문의 활용법, break와 continue 쉽게 알자.

졸린새 2020. 10. 29. 00:15
728x90

while

 

while의 기본구조

 

1
2
3
while(if처럼 조건문){
    //반복할문자
}
cs

알아보기 쉽게 if처럼 조건이 괄호안에들어간다.

예로를 들면 while(true)가되면 무한히 반복한다.

 

1
2
3
while(true){
    console.log('hi'// 출력 hihihihihihihihi......
}
cs

 

안에 1이 들어가도 마찬가지다.

break를 안걸어줬다면 브라우저가 렉이 걸리고 꺼진다.

즉 안에 유효값이 1이라면 반복문이 실행된다.

 

이걸통해 다양하게 활용이 가능하다.

 

원한다면 1을넣어 무한루프를 타게할 수 있고, 

각종 논리연산식을 넣어서 활용할 수 있다.

1
2
3
4
5
let i = 0;
while(i >= 0 && i <= 7){
    console.log(i);
    i++;
}
cs

 

 

 

함수 집어넣기

 

문제를 풀면서 깨달았는데 while안에 함수를 집어넣어서 활용할 수 있다

리턴값이 true인 함수를 만들어 활용해 보자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function isEven(num){
    if (num === 0){
    return false
    }
    if (num % 2 === 0){
        return true;
    }else{
        return false;
    }
}
function evenPrinter(number){
    let i = 1
    //만약 number가 짝수이면 1부터 해당 숫자까지 출력한다
    while(isEven(number)){
        
        if(i > number){
            break;
        }
        console.log(i)
        i++
    }
    return 0;
}
cs

 

 

 

for

 

for의 기본구조

 

 

1
2
3
for(초기값;조건;성장값(업데이트되는값)){
    반복할내용
}
cs

 

조건은 while처럼 조건값이다 

예제로 1부터 7까지 출력하는 코드를 만들어 보자

 

1
2
3
for(let i = 1; i <= 7; i++){
    console.log(i)
}
cs

 

 

 

while에서 처럼 조건값에서(가운데 ;값) 논리연산식을 쓸 수 있을까?

 

1
2
3
for(let i = 1; i <= 7 && i >= 0; i++){
    console.log(i)
}
cs

 

된다. 사실 과제하면서 직접 해보기 전까지 몰랐던 사실이다.

 

while문처럼 활용하기

기본구조에 나온코드를 while로 바꿔보자.

 

1
2
3
4
5
6
7
8
/*for(let i = 1; i <= 7; i++){
    console.log(i)
}*/
let i = 1//초기값을 반복문이 실행되기전에 빼준다.
while(i <= 7){//조건값을 while문 조건안에 넣어준다.
    console.log(i)
    i++//성장값을 안으로 빼서 적절한 위치로 넣어준다.
}
cs

알맞게 바꿔졌다. 초기값과 성장시키고싶은 값, 그리고 조건을 어떻게 배치해야 되는지만 생각한다면

훌륭하게 둘을 각 때에 원활하게 활용할 수 있을것이다.

break 이제그만 멈춰!!

break 인식하는 즉시 그 반복문을 멈춘다.

 

1
2
3
4
5
while(1){
 console.log('이제그만 멈춰!')
    break;
}
console.log('그래, 이제 그만 멈출게')
cs

 

다소 귀여운 대화를 주고받다가 멈춘다.

 

그렇다고 break가 모든 반복문을 멈추는건 아니다!

 

 

1
2
3
4
5
6
7
8
9
10
11
let taxi = 0;
let goal = 3;
while(taxi <= goal){
    while(1){
        console.log('기사님, 이제 그만 내려주세요')
        break;
        }
    console.log('아직 목적지에 도착하지 않았습니다')
    taxi++
}
console.log('손님, 목적지에 도착했습니다.')
cs

 

break를 활용해서 다소 재밌는 상황을 만들어봤다.

taxi기사님이 goal에도착할때까지 내려주지않는다.

대화문말고 코드를 분석해보면 

손님이 내려달라고 계속재촉하며 break! 를 외친다.

하지만 taxi가 목적지값이 될때까지의 반복문은 멈추지않는다!

 

break를 활용해 반복문을 if문처럼 활용하기

사실 적절한 활용법은 아니다.

반복문을 반복문답게 쓰지 않는 방법이다!

하지만 나는 한번 이걸 써야될상황을 맞았다

ex)코드스테이츠는 이중반복문을 참 좋아하더라!

 

 

case1) while문으로 활용하기

 

1
2
3
4
5
6
let result
while(7 > 3){
    result = true;
    console.log(result)
    break;
    }
cs

case2)for문으로 활용하기

 

1
2
3
4
5
6
7
8
let result
for(;5 < 1;){
    result = true;
    console.log(result)
    break;
    }
result = false;
console.log(result)
cs

 

가운데 조건값에 5 < 1이 트루가 아니라서 무시하고 result에 false를 받았다.

 

이처럼 두 반복문 모두 가운데 조건값을 활용해서 원하는 조건문을 만들 수 있다!

 

 

continue 무시하고 다시 진행해!

 

이것도 과제도 덜했으면서 다음진도를 나가려는 학생과

선생님의 대화를 통해 재밌고 쉽게 이해해보자.

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
let 진도 = 3;
 
for(let 과제 = 0; 과제 <= 진도; 과제++){
    console.log('과제는 다 했니?, 얼른 과제나 집중하자')
    if(true){
        console.log('선생님 얼른 진도나 나가요!')
 
        continue;// 과제도 덜했으면서 ! 무시하고 진행해!!
 
        console.log('아오 학교 때려칠래요!')
    }
}
console.log('오! 드디어 다했구나 이제, 다음 진도로 ')
cs

 

continue는 해당하는 반복문의 뒤에 코드를 무시하고 반복문의 처음으로 다시 진행한다.

 

선생님의 강력한 continue 명령으로 다음말에 분명 '학교 때려칠래요'가 있는데 차마 말을 못하고있다.

엄한 선생님이신가 보다.

Comments