반응형

안녕하세요, 왕초보 코린이를 위한 코딩유치원에 오신 것을 환영합니다.

 

 

오늘 부터는 항상 다뤄오던 파이썬을 잠시 미뤄두고, 자바스크립트를 빠르게 공부해보려합니다. 빠른 시간 안에 최대한 핵심만 짚고 넘어가는 식으로 정리하였으며, 왕초보를 위한 Javascript 관련 글은 다음에 여유가 될 때 꼭 쓰도록 하겠습니다.

 

공부는 TCP스쿨의 JavaScript 글을 참고하여 진행하였으니, 세부적인 내용을 알고 싶으시면 TCP 스쿨을 참고해주세요.

 

 

2021.03.21 - [코딩 공부 사이트] - [코딩유치원] 파이썬 독학으로 공부할 때 유용한 사이트 5가지

 

 

<자바스크립트 관련 글>

 

2021.04.21 - [웹 개발/프론트앤드] - Javascript 문법 요약정리 (1편. 자료형과 기초 문법)

2021.04.22 - [웹 개발/프론트앤드] - Javascript 문법 요약 정리 (2편. 연산자)

2021.04.23 - [웹 개발/프론트앤드] - Javascript 문법 요약 정리 (3편. 제어문_if/switch/while/for 문)

 

 

프로그램의 순차적인 흐름을 제어해야 할 때 사용하는 실행문을 제어문이라고 합니다. 이러한 제어문에는 조건문, 반복문 등이 포함됩니다. 이러한 제어문은 모든 프로그래밍 언어에 존재하는 기본 개념이며, 크게 if문, for문, while문 3가지로 나뉩니다. 언어에 따라서 switch문은 있을 수도 있고 없을 수도 있습니다. ( C / Javascript는 있고, Python은 없음 ) 

 

조건문

 

if문

if문은 상황에 따라서 3가지로 나뉩니다.

 

1) if문

: 표현식(조건)이 참일 경우 코드 실행

 

// if문 문법

if (표현식) {

    표현식의 결과가 참일 때 실행하고자 하는 실행문;
    
}

 

2) if/else문

: 표현식(조건)이 참일 경우 A 코드 실행, 그 외 경우는 B 코드 실행

 

if (표현식) {

    표현식의 결과가 참일 때 실행하고자 하는 실행문;

} else {

    표현식의 결과가 거짓일 때 실행하고자 하는 실행문;

}

 

3) if/else if/else문

: 표현식 a가이 참일 경우 A 코드 실행, 표현식 b가 참일 경우 B 코드 실행, 그 외 경우는 C 코드 실행

  (else if는 여러번 사용 가능)

 

if (표현식1) {

    표현식1의 결과가 참일 때 실행하고자 하는 실행문;

} else if (표현식2) {

    표현식2의 결과가 참일 때 실행하고자 하는 실행문;

} else {

    표현식1의 결과도 거짓이고, 표현식2의 결과도 거짓일 때 실행하고자 하는 실행문;

}

 

switch문

switch문은 if / else문과 마찬가지로 주어진 조건 값에 따라 프로그램이 다른 명령을 수행하도록 하는 조건문입니다. case별로 분류해두어서 가독성이 좋다는 장점이 있습니다.

 

switch (조건 값) {

    case 값1:

        조건 값이 값1일 때 실행하고자 하는 실행문;

        break;

    case 값2:

        조건 값이 값2일 때 실행하고자 하는 실행문;

        break;

    ...

    default:

        조건 값이 어떠한 case 절에도 해당하지 않을 때 실행하고자 하는 실행문;

        break;

}

 

default 절은 어떤 case 절에도 해당하지 않을 때 실행됩니다. 이 구문은 반드시 존재해야 하는 것은 아니며, 필요할 때만 선언할 수 있습니다.

 

각 case 절 및 default 절은 반드시 break 키워드를 포함하고 있어야 합니다. break 키워드는 조건 값에 해당하는 case 절이나 default 절이 실행된 뒤에 전체 switch 문을 빠져나가게 해줍니다.

 

 

반복문

 

반복문이란 프로그램 내에서 똑같은 명령을 반복하여 수행하도록 제어하는 실행문입니다. 크게 while문과 for문으로 나뉩니다.

프로그램이 처리하는 대부분의 코드는 반복적인 형태가 많으므로, 가장 많이 사용되는 실행문 중 하나입니다.

 

while문

 

1) while문

 

while문은 특정 조건을 만족할 때 까지, 계속해서 주어진 실행문을 반복 실행합니다. 만약 조건을 만족 못하면 무한히 while문을 빠져나갈 수 없답니다. 그래서 항상 while문 안에 조건식을 변경해주는 코드를 넣어주는 방식으로 프로그램을 만들어줍니다.

while (표현식) {

    표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문;

}

 

예를 들어 아래와 같이 i++를 넣어줘서 조건식에 있는 i가 1씩 커지다가, i < 10 이 거짓이 되어 while문을 종료하게 되는 방식입니다.

var i = 1;

while (i < 10) { // 변수 i가 10보다 작을 때만 while 문을 반복함.

    document.write(i + "<br>");  // i를 웹페이지에 쓰고 줄 바꾸는 구문.

    i++; // 반복할 때마다 변수 i를 1씩 증가시켜 변수 i가 10보다 커지면 반복문을 종료함.

}

 

 

 

2) do / while문

 

do / while문은 가장 처음 do { } 안의 실행문을 1회 실행한 후, while문을 들어가는 반복문입니다. 그 외에는 while문과 같습니다.

do {

    표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문;

} while (표현식);

 

 

for 문

for문은 초기값, 조건식, 증감식을 갖는 반복문입니다. for 문을 구성하는 초기값, 조건식, 증감식은 각각 생략될 수 있습니다.

또한, 쉼표 연산자(,)를 사용하면 여러 개의 초기식이나 증감식을 동시에 사용할 수도 있습니다.

 

for (초기값; 조건식; 증감식) {

    표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문;

}

 

위에서 while문으로 작성했던 코드를 for문으로 똑같이 구현하면 아래와 같습니다.

 

for (var i = 1; i < 10; i++) {

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

}

 

for문에는 for/in문과 for/of문이 더 있지만 일단 아직 배우지 않은 객체와 프로퍼티 개념을 알아야하기에 생략하도록 하겠습니다.

 

 

 

루프의 제어를 위한 label의 개념과 break, continue

 

일반적으로 조건식의 검사를 통해 루프로 진입하면, 다음 조건식을 검사하기 전까지 루프 안에 있는 모든 실행문을 실행합니다.

하지만 continue 문과 break 문은 이러한 일반적인 루프의 흐름을 사용자가 직접 제어할 수 있게 해줍니다.

label 문을 사용하면 continue 문과 break 문의 동작이 프로그램의 흐름을 특정 영역으로 이동시킬 수 있습니다.

 

continue

 

continue는 루프 내에서 사용하여 해당 루프의 나머지 부분을 건너뛰고, 바로 다음 조건식의 판단으로 넘어가게 합니다.

보통 반복문 내에서 특정 조건에 대한 처리를 제외하고자 할 때 자주 사용됩니다.

 

예를 들어, 1부터 10까지 숫자 중에 홀 수만 출력하고 싶을 때 continue를 이렇게 사용할 수 있습니다.

 

for (var i = 1; i <= 10; i++) {

    if (i % 2 == 0) // 2의 배수는 continue로 아래의 코드를 실행하지 않고 해당 for문의 다음 단계 실행

        continue;

    document.write(i + " ");  // i를 출력하고 한 칸 띄우기

}


<결과>
1 3 5 7 9

 

break

 

break는 루프 내에서 사용하여 해당 반복문을 즉시 종료시키고 다음 코드로 넘어갑니다.

즉, 루프 내에서 조건식의 판단 결과에 상관없이 반복문을 완전히 빠져나가고 싶을 때 사용합니다.

 

빠른 이해를 위해 방금 봤던 continue의 예제를 조금만 바꿔 보았습니다.

i가 3인 경우, 즉시 break로 for문을 종료하고 다음 코드를 실행합니다. 여기서는 다음 코드가 없으므로 프로그램을 종료합니다.

 

for (var i = 1; i <= 10; i++) {

    if (i == 3) // i가 3이면 for문 종료

        break;

    document.write(i + " ");  // i를 출력하고 한 칸 띄우기

}


<결과>
1 2

 

label

 

제가 배웠던 Python 언어와 Javascript의 차이점은 이 label입니다.

label은 위에서 배웠던 '제어문에 이름표를 붙여주는 것'이라고 생각하시면 됩니다.

 

label:

특정 영역 제어문 (주로 for문 / while문)

 

이렇게 이름을 붙여서 어디에 쓰는걸까요? 바로 위에서 배운 continue와 break의 뒤에 붙여서 사용합니다. 

복잡한 설명보다는 코드를 보면서 설명드리는게 좋을것 같아요.

 

아래는 평범한 구구단 출력 코드입니다. 2단 for문을 이용해서 2단부터 9단까지 모두 출력하죠.

이 코드를 label과 break를 사용해서 5단까지만 출력해보는 코드로 바꾸어 보겠습니다.

for (var i = 2; i <= 9; i++) {

    for (var j = 1; j <= 9; j++) {
    
        document.write(i + " * " + j + " = " + (i*j) + "<br>");
    }
}

 

 

가장 첫 for문에 gugudan이라는 label을 붙여주고, 안의 for문에는 dan이라는 label을 붙여줬습니다.

그리고 break 뒤에 label을 붙여줌으로써 i > 5일 때 gugudan이라는 이름표가 붙은 for문을 종료하는 코드입니다.

 

 

gugudan:

for (var i = 2; i <= 9; i++) {

    dan:

    for (var j = 1; j <= 9; j++) {

        if (i > 5)

            break gugudan;

        document.write(i + " * " + j + " = " + (i*j) + "<br>");

    }

}

 

 

여기까지 자바스크립트의 제어문을 알아보았습니다. 다음시간에는 배열(Array)에 대해서 알아보겠습니다.

반응형

'웹 개발' 카테고리의 다른 글

웹 개발 환경 구축하기 (VS code / Open in Browser 익스텐션 / HTML 자동완성)  (0) 2021.04.29
Javascript 문법 요약 정리 (4편. 배열_array)  (0) 2021.04.28
Javascript 문법 요약 정리 (2편. 연산자)  (0) 2021.04.22
Javascript 문법 요약정리 (1편. 자료형과 기초 문법)  (1) 2021.04.21
[코딩유치원] IT 개발 분야 (큰 그림을 그려보자!)  (0) 2021.04.11

+ Recent posts

티스토리툴바