본문 바로가기

Programming/javascript

[3일차] Do it! 자바스크립트 입문 / 04 흐름을 제어한다! 제어문

전구 모양(💡) 이모티콘은 공부하면서 깨달은 부분을 적어두었습니다.

04-1 조건에 따라 흐름 조절하기 - if문, if···else문과 조건 연산자

- if문 : 소괄호 안의 조건이 ture면 중괄호 안의 자바스크립트 소스를 실행,

          false면 중괄호 안의 자바스크립트 소스를 무시

- if···else문 : 조건이 맞을 때와 안 맞을 때 실행할 명령이 따로 있다면 사용

  * 무조건 if문의 조건을 먼저 확인함

 

- 조건 연산자 ㅡ ?(물음표)와 :(콜론)

  : 조건이 하나이고 true일 때와 false일 때 실행할 명령도 하나뿐이라면 사용

var score = 75;
(score >= 60) ? alert("통과"):alert("실패")
//   조건     ?   true일 때  : false일 때

 

- truthy 값과 falsy 값

  : 논리형 자료 값은 true와 false 뿐

  : 하지만 일반 값 중에서도 'true로 인정할 수 있는 값' 'false로 인정할 수 있는 값'이 있음

    => truthy : true로 인정할 수 있는 값
    => falsy : false로 인정할 수 있는 값

  : truthy 값과 falsy 값은 조건을 확인할 때 유용하게 사용 가능!

falsy 값 종류
0 숫자
"" 빈 문자열
NaN 숫자가 아님(Not a Number)
※ 보통 변수를 선언만 한 상태(값을 할당하지 않은 상태)에서
    연산을 하면 볼 수 있는 값
undefined  
null  

 

- if···else문을 만들 때 true가 될 경우가 많은 조건을 if문에 넣고

  다른 조건을 else문에서 처리하는 것이 좋음

 

 

[ 실습 - 3의 배수 검사기 만들기 ]

- 1단계 : 사용자가 입력했는지 확인하기

숫자 입력 받기                                                                        취소를 눌렀을 때

 

 

- 2단계 : 3의 배수인지 확인하기

3의 배수일 때                                                                              3의 배수가 아닐 때

 

 

 

 

 

04-2 조건이 많을 때 흐름 조절하기 - switch문

- switch문 : 한꺼번에 여러 개의 조건을 확인 가능

- switch문의 변수는 case 값 중 하나에만 일치해야 함

- break문 : 명령 실행 후 완전히 switch문을 빠져나오도록 함

소스
관심 세션 선택
                  1~3번만 선택했을 때                                                          그 이외의 숫자를 입력했을 때

 

 

 

 

 

04-3 명령 반복 실행하기 - for문

- 반복문 : 어떤 동작을 여러 번 실행하는 데 사용

- 횟수가 정해져 있는 반복 명령을 작성할 때 편리

 

[ 실습 - for문 작동 과정 이해하기 ]

- 카운터 변수는 선언과 동시에 초기화 필수!!

//    ┌ 카운터 변수 : 선언과 동시에 초기화!
for (var i = 1; i < 6; i++) {
            sum += i;
}

                소스                                                                                          실행 결과

 

- for···of문 : ES6에는 인덱스는 사용하지 않고 값을 기준으로 반복

                               소스                                                                                           실행 결과                                           

 

 

 

 

 

04-4 for문 반복하기 - 중첩 for문

[실습 - 별 찍기 실습으로 중첩 for문 알아보기 ]

- * 문자 30개씩 5줄 찍기

- 💡 잘 모를 때는 수동으로 소스를 작성한 후

      중복 코드를 중첩 for문으로 바꾸는 연습을 해보면 됨!!

 같은 내용의 for문                                                                      중첩 for문으로 수정                                                   

 

 

[ 실습 - 구구단 프로그램 만들기 ]

- 1단계 : for문 중첩하기

- 2개 이상 for문을 중첩해서 사용할 때

  먼저 실행하는 for문을 안쪽에, 나중에 실행하는 for문을 바깥쪽에 작성

  예) 각 단을 1~9까지 곱하는 부분 : 안쪽 for문

       각 단(2~9단)을 출력하는 부분 : 바깥쪽 for문

  => 💡 먼저 실행 완료하고 싶은 for문을 안쪽에, 나중에 실행 완료하려는 for문을 바깥쪽에 라고 이해하면 될듯!!

 

- 2단계 : 구구단 소스 작성하기

 소스                                                                                         실행 결과

 

 

 

 

 

04-5 특정 조건에 따라 반복하기 - while문, do···while문

- 특정 조건을 만족하는 동안에만 명령을 반복

- while문 예제

var i = 0
while (i < 10) {
	document.write('반복 조건이 true면 반복합니다.<br>');
	i += 1;
}

 

- do···while문

  * 조건이 맨 뒤에 붙음

  * 무조건 문장을 한 번 실행한 후 조건을 확인

var a = 0;
do {
	document.write('반복 조건이 true면 반복!<br>');
	a += 1;
} while (a < 10);

 

- 어떤 반복문을 사용해야 할까?

  : for문, while문, do···while문은 특정 문장을 여러 번 반복해서 실행할 수 있다는 공통점!

  : for문은 초깃값이 있으면서 일정한 간격으로 반복할 때 주로 사용

  : while문, do···while문은 초깃값이나 반복 간격이 없음

   조건만 주어지기 때문에 그 조건을 만족하는 동안 반복!

   => 조건에 맞지 않을 경우 명령을 실행하지 않으면 while문

        일단 명령 실행 후 상황에 따라 반복할 수 있고 안할 수도 있다면 do···while문 사용

 

 

[ 실습 - 팩토리얼 계산기 만들기 ]

                        소스                                                           실행 결과(숫자를 입력받아 팩토리얼 결과 출력)                                         

 

 

 

 

 

04-6 반복을 건너뛰거나 멈추기 - break문, continue문

- 반복문의 흐름을 제어하고 싶을 때 사용

- break문 : 반복문의 흐름에서 바로 빠져나올 때 사용

                                    소스                                                                                    실행결과

 

 

- continue문 : 주어진 조건에 맞는 값을 만났을 때 실행하던 반복 문장을 건너뛰고

                   반복문의 맨 앞으로 되돌아감 -> 다시 반복문 시작

                   즉, continue문 다음 문장들 건너뛰기!

                                           소스                                                                                        실행결과

 

 

[ 실습 - 짝수 더하기 프로그램 만들기 ]

                  소스                                                                                      실행결과