제어문(조건문, 선택문, 반복문) 7가지 핵심 정리

 

 

제어문(조건문, 선택문, 반복문) 7가지 핵심 정리를 해보겠습니다.

 

제어문은 조건문, 선택문, 반복문 이렇게 3가지로 나뉩니다.

 

그리고 자바스크립트에서 사용 가능한 제어문은 각각 아래와 같이 세분화 할 수 있으며 이 글에서 전부 알아볼 것 입니다.

 

• 조건문 : if, else, else if
• 선택문 : switch
• 반복문 : while(+do while), for

 

그리고 반복문에서 활용할 수 있는 break와 continue에 대해서도 살짝 알아보겠습니다.

참고로 이 자바스크립트 연재는 처음 자바스크립트를 시작하는 초보가 꼭 알아야할 것들만 핵심 정리하는 연재입니다.

 

또한 프로그래밍 문법으로는 이번 글이 마지막 글이 될 것 입니다. 이후에는 실습과 함께 객체나 함수, 라이브러리를 공부할거에요.

 

 

이전 글이라고 해봐야 2개뿐이니 아래 글에서 변수와 자료형, 연산자에 대한 글을 읽고 오시면 더욱 이해가 빨리 되실 겁니다.

 

자바스크립트 공부 순서 4단계로 정리

 

그럼 이제 제어문에 대해 하나씩 살펴볼까요?

 

1. 조건문(if, else, else if)

 

조건문에는 if, else, else if가 있습니다.

 

조건식이 참이면 true를, 거짓이면 false를 반환하여 코드를 실행할 수 있습니다.

 

if, else

 

if문은 조건식이 true일 경우에만 그 안의 코드를 실행하며, if문 안에 또 if문을 중첩해서 사용할 수도 있습니다.

 

주로 만족하는 데이터가 있을 때 실행하거나, 만족하는 데이터가 여러개일 경우에 사용합니다.

 

주의할 점은 조건식에 0, null(데이터가 없음), ""(빈 문자), undefuned(데이터가 부여되지 않은 기본값),빈 값이면 false가 나와 실행이 안됩니다.

 

이 외에 논리적으로 참인 조건식을 쓰면 true로 인식됩니다.

 

 

사용법은 if(조건식){실행할 코드}; 입니다.

 

1<2 처럼 논리적으로 참인 조건식을 소괄호안에 쓸 수도 있지만, confirm과 같은 

let result = confirm("정말 탈퇴하시겠습니까?");

if(result){
    document.write("탈퇴 되었습니다.");
}else{
    document.write("탈퇴 취소되었습니다.");
}

 

else안에는 위의 예시에서 보았듯이, if에 쓴 조건식에 해당하지 않을 경우 실행할 코드를 적어넣을 수 있습니다.

 

하지만 if와 else만으로는 우리가 원하는 조건의 경우를 모두 관리할 수 없습니다.

 

물론 if를 중첩해서 쓸 수도 있지만, 중첩 if문은 1단계가 참이면 그 안에 2단계를 실행하는데 더 유용하게 쓰입니다. (글이 길어지니까 중첩 if문은 글 아래에 따로 예시를 두겠습니다.)

 

따라서 좀 더 경우의 수를 늘리고 싶을 때 else if를 쓸 수 있습니다.

 

 

else if

 

만약 if 조건식에 만족하는 값이 없을때, else if에 케이스마다 조건식을 두어 특정 조건이 만족하면 실행하도록 할 수 있습니다.

 

let mon = prompt("지금 몇 월 인가요?","");

if(mon >= 9 && mon <= 11){
    document.write("가을이네요.");
}
else if(mon >= 3 && mon <= 5){
    document.write("봄이네요.");
}
else if(mon >= 6 && mon <= 8){
    document.write("여름이네요.");
}
else {
    document.write("겨울이네요.");

}

 

1에서 12사이의 숫자를 입력한다면, 위의 코드는 어떤 월이든 만족하는 조건이 있으므로 해당하는 메세지를 내보낼 수 있을 것 입니다.

중첩 if문

 

이번에는 위에서 잠시 언급했던 중첩 if문에 대해서 알아보겠습니다.

 

let id = "myID",
    pw = "1234";
    
let user_id = prompt("아이디를 입력해주세요","");


if( id == user_id){
	let user_pw = prompt("비밀번호를 입력해주세요.","");

    if(pw == user_pw ){
        document.write(user_id+" 님 반갑습니다.");
    }

    else{
        alert("비밀번호가 일치하지 않습니다.");
        location.reload();
    }
}//1단계 if문 끝나는 부분

else{
    alert("아이디가 일치하지 않습니다.");
    location.reload();
}

 

위와 같이 맨 바깥에 있는 1단계 if문이 true여야 그 속에 있는 if문과 else문도 실행됩니다.

 

아이디가 맞으면 2단계로 패스워드를 물어보고, 아이디가 틀리면 경고창을 띄우는 것 입니다.

 

참고로 첫번째 줄의 콤마는 변수를 계속 선언할 때 let을 쓰는 것을 생략하는 효과가 있습니다. 관련된 변수를 표시하기에 유용합니다.

 

 

2. 선택문(switch)

 

선택문은 이름과 같이, 여러 경우의 값 중에 일치하는 데이터를 선택하는 것 입니다.

 

if문이 여러개의 데이터가 만족할 때 실행한다면, switch는 여러개의 경우의 수 중에 일치하는 데이터를 찾아서 해당하는 코드를 실행하기 위한 것이라는 차이가 있습니다.

 

let food= prompt("한식, 일식, 중식, 양식 중 좋아하는 음식은?");
let msg;

switch(food){
    case "한식": msg ="한식을 좋아하시는 군요.";
    break;
    case "일식": msg ="일식 좋아하시는 군요.";
    break;
    case "중식": msg ="중식 좋아하시는 군요.";
    break;
    case "양식": msg ="양식 좋아하시는 군요.";
    break;

    default:alert("보기 중에 없습니다.");
}

if(food) document.write(msg);

 

위의 코드를 실행하면, 케이스마다 검사하며 만족하는 경우에 break해서 검사를 종료하고 해당되는 메세지를 출력하게 됩니다.

 

마지막 줄의 if문은 위에서 언급했던 특수한 값을 제외하면 대부분 true를 반환하기 때문에, 그 옆에 쓴 코드를 실행하게 됩니다.

3. 반복문(while, do while, for)

 

이제 마지막으로 반복문에 대해서 알아보겠습니다. 반복문도 중요하니까 조금 지치셨다면 쉬었다가 좋겠습니다.

 

반복문은 특정한 조건을 만족할 때까지 코드를 반복할 수 있게 하며 while, do while, for이 있습니다.

 

이전 글에서 언급했던 삼항 조건 연산자처럼 축약해서 쓸 수 있기 때문에 for을 가장 많이 사용하지만 각각의 용도가 있습니다.

 

while

 

먼저 while에 대해 알아보겠습니다. 단어의 뜻처럼 ~ 동안 실행할 코드를 담아둘 수 있습니다.

 

사용법은 while(조건식){반복할 코드와 증감연산자}; 입니다.

 

// 괄호안의 조건식을 만족할때까지 검사하고 실행한다.
let i=1;

while(i<=30){
    if(i%2==0 && i%6==0){
        document.write(i,"<br>");
    }
    i++;
}

document.write("<br>");
//구구단 5단 출력

let i=1;
while(i<=9){
    document.write("5X"+i+"="+i*5,"<br>");
    i++;
}

 

위의 예시에는 2가지 코드가 있습니다.

 

첫번째 코드는 i(1)가 30이 될 때까지 계속 1씩 더하면서 2의 배수이면서 6의 배수인 숫자를 출력합니다.

 

두번째 코드는 구구단을 출력하는 것인데, i(1)이 9이하가 될 때까지 계속 1씩 더하면서 5이하의 값을 곱한 결과값을 출력합니다.

 

 

그럼 do while은 뭘까요?

 

do while

 

이름처럼 do. 먼저 무언가 코드를 실행 하고, 그 다음에 while문이 옵니다.

 

그냥 while문은 만족할때까지 반복, do while문은 만족하면 종료한다는 차이가 있습니다.

 

// //do의 내용을 무조건 한 번 실행한 후에 while의 조건식에 따라 종료한다.
let i=0;
let result ='';

do{
    i+=1;
    result=result+i;
}
while(i<5);

document.write(result);

 

do에서 i를 계속 1씩 더하니까 1, 2, 3, 4, 5가 되고 i가 5보다 작다는 while문의 조건식이 false가 되어 종료됩니다.

 

 

자 이제 드디어 제어문 마지막! for입니다. 자주 쓰이는 반복문이니 알아두시면 굉장히 유용할 거에요.

for

 

for문은 while문과 원리는 같지만, 쓰기가 편해서 while문보다 더 자주 사용되는 반복문입니다.

 

사용법은 for(초기값; 조건식; 증감식){반복할 코드};입니다.

 

for(let i=1; i <= 10; i++){
    if(i==6)break;
    document.write(i,"<br>");
}

document.write("End"+"<br>");

document.write("<br>");
//중첩 for문

for(let i=1; i<=3; i++){
    for(let k=1; k<=2; k++){
        document.write(i+"행"+k+"열 ");
    }
    document.write("<br>");
}

 

변수 i를 1로 선언하고, i가 10이하가 될때까지 1씩 더한다는 내용을 소괄호안에 간단하게 적어넣을 수 있었습니다.

 

두번째 코드인 중첩 for문은 중첩 if문과 마찬가지로, 1단계 바깥쪽의 for문 조건식이 만족할때까지 2단계 for문 조건식에 맞게 반복합니다.

 

1행에 3열 이런식으로 표를 만들 때 유용하게 쓰이겠죠?

 

이제 모든 제어문을 살펴보았습니다. 끝으로 반복문에서 쓸 수 있는 break와 continue에 대해 잠시 보고 글을 마치겠습니다.

 

break

 

위의 예시에서 if문 옆의 break는 조건식이 만족하면 그 다음의 코드를 실행하지 않겠다는 의미입니다.

 

꼭 if문을 같이 쓰지 않더라도, for문이나 while문 안에서 원하는 지점에서 반복을 중지할 때 사용할 수 있습니다.

 

 

continue

 

for, while문에서 제외하고 싶은 조건 옆에 continue를 쓰면 다음으로 오는 코드를 건너뛰고 조건식을 검사합니다.

 

제외할 것을 왜 적는지 의아해질 수도 있습니다. 전체 조건에서 예외 처리할 것들을 적는 용도라고 보시면 쉽겠습니다.

 

for(let i=1; i<=10; i++){
    if(i%2==0) continue;
    document.write(i,"<br>");
}

document.write("End");

 

위의 예시는 변수 i가 1이고 10이하까지 1씩 증가할때 2의 배수는 제외하겠다는 의미를 가집니다.

 

결과적으로 10 이하의 홀수만 출력되게 됩니다. 이런식으로 예외로 거를 것을 따로 길게 코드를 적지 않아도 continue로 간편하게 실행할 수 있습니다.

 

 

 

이제 기초 문법은 끝냈으니, 자바스크립트 객체를 이용해서 미리 만들어진 기능들을 자유롭게 쓰실 수 있을 것 입니다.

 

자바스크립트 객체 사용법, 3종류 객체 핵심 정리

 

여기까지 제어문(조건문, 선택문, 반복문) 7가지 핵심 내용을 정리해보았습니다. 읽어주셔서 감사합니다.