[Javascript] 제어문

2019. 10. 28. 18:59

공부했던 자료 정리하는 용도입니다.

재배포, 수정하지 마세요.

제어문

if문, else-if문
switch문
for, 중첩 for문
for ... of문
while, do-while문
break문
continue문

truthy와 falsy

논리형의 자료 값은 true , false 뿐이지만 일반 값 중에서도 true 로 인정할 수 있는 값은 truthy 값, false 로 인정할 수 있는 값을 falsy 값이라고 한다. 이 값들은 모두 조건식에서 true , false 와 똑같이 사용 가능하다. 아래 나온 falsy 한 값을 제외한 나머지 값들은 truthy 값이 된다.

falsy한 값

숫자 0
"" : 빈 문자열
NaN : 숫자가 아님(Not a Number)
변수를 선언만 한 상태(값을 할당하지 않은 상태)에서 연산을 하면 나온다.
undefined
null

var input = prompt("이름을 입력하세요.");
if(input){
    alert("이름을 입력했습니다 : " + input);
}else{
    alert("이름을 입력하지 않았습니다. ");
}

truthy 값과 falsy 값을 이용해서 사용자가 프롬프트 창에 입력을 했는지 확인하는 예제이다.

무엇이든 값을 입력하면 조건식이 true 가 되고, 아무것도 입력하지 않으면 input 변수가 null 이 되므로 조건이 false 가 된다.

if문

if(조건식){
    [조건식이 true일 때 실행할 명령어];
}

조건식이 true 면 { } 안의 명령을 실행하고 false 면 if 문을 실행하지 않고 빠져나온다.

■ if-else문

if(조건식){
	[조건식이 true일 때 실행할 명령어];
}else{
	[조건식이 false일 때 실행할 명령어];
}

if 문과 비슷하지만 if-else 문은 조건식이 false 일 때도 명령어를 지정해줄 수 있다는 점이 다르다.

실행시간을 고려해서 true 가 될 경우가 많은 조건을 if 문에 넣고 다른 조건을 else 문에서 처리하는 것이 좋다.

■ 조건 연산자(삼항 연산자)

(조건) ? [true일 때 실행할 명령] : [false일 때 실행할 명령]

(score >= 60) ? alert("통과") : alert("실패");

조건이 하나이고 실행할 명령도 하나뿐이라면 조건 연산자를 사용하는 것이 간단하다.

switch문

switch([비교할 값]){
    case (값1) :
	[값이 1일때 실행할 명령어];
        break;
    case (값2) :
        [값이 2일때 실행할 명령어];
        break;
    ...
    default : 
        [값이 위의 case에 모두 해당되지 않을 때 실행할 명령어];
}

조건이 여러 개인 경우 if-else 문보다 switch 문을 사용하는 게 더 나은 경우도 있다.

break 문을 사용하지 않으면 break 문을 만나기 전까지 다음 문장이 계속해서 실행되므로 주의한다.

<script>
    var session = prompt("관심 세션을 선택해 주세요. 1-마케팅, 2-개발, 3-디자인", "1");
		
    switch(session){
        case "1" : document.write("<p>마케팅 세션은 <strong>201호</strong>에서 진행됩니다. </p>");
    	    break;
        case "2" : document.write("<p>개발 세션은 <strong>203호</strong>에서 진행됩니다. </p>");
    	    break;
        case "3" : document.write("<p>디자인 세션은 <strong>205호</strong>에서 진행됩니다. </p>");
    	    break;
        default : alert("잘못 입력했습니다.");
    }
</script>

switch 문을 사용하는 예시이다.

prompt( ) 함수로 사용자에게 값을 입력받는데 이때 입력받은 값은 숫자가 아니라 문자이기 때문에 case 문에 숫자를 " 로 묶어 문자열로 처리해야 한다.

for문

for([카운터 변수] ; [조건식] ; [증감식]){
    [반복 실행할 명령어];
}

(초기값이 있으면서) 횟수가 정해진 반복 작업을 해야 할 때 주로 for 문을 사용한다.

카운터 변수 : for 문 안에서만 사용할 카운터 변수 선언
for 문을 실행할 때 반복 횟수의 기준이 되는 변수이다. 반복문을 시작하기 전에 반드시 초기화해야 한다.
조건식 : for 문을 실행 여부를 판단하는 조건식
조건이 true 면 for 문 안의 명령어를 실행하고, false 면 for 문을 벗어난다.
증감식 : 카운터 변수를 조절하는 식

■ 중첩 for문

<body>
	<h1>구구단</h1>
	<script>
		for(var i = 2 ; i <= 9 ; i++){
			document.write("<div>");
			document.write("<h3>" + i + "단</h3>");
			for(var j = 1 ; j <= 9 ; j++){
				document.write(i + " X " + j + " = " + i*j + "<br>");
			}
			document.write("</div>");
		}
	</script>
</body>

fora for 문을 중첩해서 사용하면 좀 더 복잡한 반복 작업을 만들 수 있다.

중첩 for 문을 이용한 구구단 출력 예시이다.

■ [ES6] for ... of 문

let seasons = ["봄", "여름", "가을", "겨울"];
for(let value of seasons){
    console.log(value);
}

for 문을 사용한 반복문은 인덱스 값을 기준으로 반복하지만 for ... of 문은 인덱스를 사용하지 않고 값을 기준으로 반복한다.

while문

while(조건식){
     [조건식이 true일 동안 실행할 문장];
}

for 문과 달리 횟수가 정해지지 않은 반복 작업을 할 때 주로 while 문을 사용한다. 조건식이 참인 동안 명령을 반복하지만 조건식이 false 인 경우엔 한 번도 실행되지 않을 수 있다. 무한루프를 방지하기 위해 카운터 변수를 별도로 설정해서 반복 횟수를 제어하기도 한다.

■ do-while문

do {
    [반복 실행할 명령어];
} while(조건식);

do-while 문도 while 문과 마찬가지로 조건식이 참인 경우 명령을 반복한다.

조건식이 뒤에 온다는 점이 다르고 일단 문장을 실행한 후 조건을 확인하기 때문에 적어도 한 번 이상은 반복문이 실행된다.

break, continue

break문 : 반복문을 빠져나올 때 사용
continue문 : 현재 순서의 반복 문장을 건너뛰고 다음 순서의 반복을 진행한다. ( continue 문 이후의 명령어를 건너뛴다.)

저작자표시 비영리 변경금지

'Front end > Javascript' 카테고리의 다른 글

[Javascript] 이벤트(event) (0)	2020.01.02
[Javascript] 함수(function), 함수표현식, 스코프(scope) (0)	2019.11.11
[Javascript] 변수, 자료형, 연산자 (0)	2019.10.26
[Javascript] Javascript의 특징, console, 입출력 (0)	2019.10.25
[Javascript] WEB2 Javascript 정리 (0)	2019.05.15

pridiot