호쌤
호쌤 Just For Fun

[JS] 프로그램의 흐름제어(3) - 기본문법 활용하기

크리에이티브 커먼즈 라이선스 ITPAPER(호쌤,쭈쌤)에 의해 작성된 ≪[JS] 프로그램의 흐름제어(3) - 기본문법 활용하기≫은(는) 크리에이티브 커먼즈 저작자표시-비영리-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.
이 라이선스의 범위 이외의 이용허락을 얻기 위해서는 leekh4232@gmail.com으로 문의하십시오.

[JS] 프로그램의 흐름제어(3) - 기본문법 활용하기

조건문, 반복문을 구성하는 블록 {} 안에 다른 문법 표현이 포함될 수 있습니다. 이러한 규칙으로 다양한 문법 중첩 패턴이 생기는데 이 중에서 자주 사용되는 패턴으로는 if-if, if-for, for-if, for-for가 있습니다.

#01. if-if 구조

특정 조건이 참으로 판단되어 블록안에 진입했을 때, 상세조건을 판별하는 구조.

1
2
3
4
5
6
7
8
9
10
11
var point = 78;

if (point > 70 && point <= 80) {
    if (point > 77) {
        console.log("C+ 입니다.");
    } else if (point < 74) {
        console.log("C- 입니다.");
    } else {
        console.log("C0 입니다.");
    }
}
▶ 출력결과
1
C+ 입니다.

#02. if-for 구조

특정 조건이 참으로 판단되어 블록안에 진입했을 때, 반복을 수행하는 구조.

1
2
3
4
5
6
7
8
9
10
var k = 3;
//var k = 10;

if (k > 1 && k < 10) {
    for (var i=1; i<10; i++) {
        console.log(k + " x " + i + " = " + (k*i));
    }
} else {
    console.log("2~9 사이의 수식만 출력합니다.");
}
▶ 출력결과(1) - k가 3인 경우
1
2
3
4
5
6
7
8
9
3 x 1 = 3
3 x 2 = 6
3 x 3 = 9
3 x 4 = 12
3 x 5 = 15
3 x 6 = 18
3 x 7 = 21
3 x 8 = 24
3 x 9 = 27
▶ 출력결과(2) - k가 10인 경우
1
2~9 사이의 수식만 출력합니다.

#03. for-if 구조

반복문 안에서 매 반복 수행시마다 조건을 판별한다. 주로 반복문에 사용되는 조건값에 대한 조건 판별을 위해 사용된다.

짝,홀 수의 합

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var max = 10;
var oddSum = 0;
var evenSum = 0;

for (var i=1; i<=max; i++) {
    if (i % 2 == 0) {
        console.log(i + "는 짝수");
        evenSum += i;
    } else {
        console.log(i + "는 홀수");
        oddSum += i;
    }
}

console.log("1~" + max + "까지 홀수들의 합: " + oddSum);
console.log("1~" + max + "까지 짝수들의 합: " + evenSum);
▶ 출력결과
1
2
3
4
5
6
7
8
9
10
11
12
1는 홀수
2는 짝수
3는 홀수
4는 짝수
5는 홀수
6는 짝수
7는 홀수
8는 짝수
9는 홀수
10는 짝수
1~10까지 홀수들의 합: 25
1~10까지 짝수들의 합: 30

공배수 구하기

어떤 수 i가 x로 나누어도 나머지가 0이고 y로 나누어도 나머지가 0일 때 이 수를 x와 y의 공배수라고 한다.

1부터 100까지의 범위 안에서 x와 y의 공배수를 모두 출력하고 공배수의 총 합인 sum값을 구해 출력하시오.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var x = 3;
var y = 5;

// 합산 결과를 저장할 변수
var sum = 0;

// 1부터 100까지 반복 설정
for (var i=1; i<=100; i++) {
    // x로 나누었을 때 나머지가 0이고 y로 나누었을 때 나머지가 0인 값 판별
    if (i % x == 0 && i % y == 0) {
        console.log(i);
        sum+=i;
    }
}

console.log("공배수의 총 합: " + sum);
▶ 출력결과
1
2
3
4
5
6
7
15
30
45
60
75
90
공배수의 총 합: 315

반복 수행 시 마지막 회차는 생략하기

조건값이 마지막이 아닌 경우만 실행하도록 if문을 구성

  1. 조건식이 변수 < 최대값 인 경우 : 변수 + 1 < 최대값
  2. 조건식이 변수 <= 최대값 인 경우 : 변수 < 최대값
1
2
3
4
5
for (var i=0; i<10; i++) {
    if (i + 1 < 10) {
        console.log("i=" + i);
    }
}

#04. For-For 구조

바깥의 반복문(부모)이 1회 수행할 때 마다 안쪽의 반복문(자식)이 매번 처음부터 새로 시작하는 이중 반복문구조.

두 반복문간의 조건값이 서로 달라야 한다.

1
2
3
4
5
6
7
8
9
for (var i=0; i<3; i++) {
    console.log("i에 대한 반복 수행 시작 >> i=" + i);

    for (var j=0; j<5; j++) {
        console.log(" :::: i=" + i + ", j=" + j);
    }

    console.log("i에 대한 반복 수행 종료 >> i=" + i);
}
▶ 출력결과
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
i에 대한 반복 수행 시작 >> i=0
    i=0, j=0
    i=0, j=1
    i=0, j=2
    i=0, j=3
    i=0, j=4
i에 대한 반복 수행 종료 >> i=0
i에 대한 반복 수행 시작 >> i=1
    i=1, j=0
    i=1, j=1
    i=1, j=2
    i=1, j=3
    i=1, j=4
i에 대한 반복 수행 종료 >> i=1
i에 대한 반복 수행 시작 >> i=2
    i=2, j=0
    i=2, j=1
    i=2, j=2
    i=2, j=3
    i=2, j=4
i에 대한 반복 수행 종료 >> i=2

구구단

2단부터 9단까지의 모든 구구단 수식을 출력하세요.

마지막 9단을 제외한 모든 단은 종료시마다 구분선 (-------)을 출력하도록 구현하세요.

1
2
3
4
5
6
7
8
9
for (var i=2; i<10; i++) {
    for (var j=1; j<10; j++) {
        console.log(i + " x " + j + " = " + (i*j));
    }

    if (i + 1 < 10) {
        console.log("--------------");
    }
}
▶ 출력결과
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2 x 1 =  2
2 x 2 =  4
2 x 3 =  6
2 x 4 =  8
2 x 5 = 10
2 x 6 = 12
2 x 7 = 14
2 x 8 = 16
2 x 9 = 18
--------------
3 x 1 =  3
3 x 2 =  6
3 x 3 =  9
3 x 4 = 12
3 x 5 = 15
3 x 6 = 18
3 x 7 = 21
3 x 8 = 24
3 x 9 = 27
--------------
4 x 1 =  4
4 x 2 =  8

... 생략 ...

8 x 7 = 56
8 x 8 = 64
8 x 9 = 72
--------------
9 x 1 =  9
9 x 2 = 18
9 x 3 = 27
9 x 4 = 36
9 x 5 = 45
9 x 6 = 54
9 x 7 = 63
9 x 8 = 72
9 x 9 = 81

이중 반복문에서 안쪽 반복문의 반복 범위를 동적으로 설정하기

자식 반복문의 조건식이 부모 반복문의 조건변수를 활용하여 구성되면 자식 반복문의 반복 범위에 변화를 줄 수 있다.

예제

1부터 5까지의 범위를 갖는 반복문 안에 자식 반복문을 추가하고 자식 반복문이 부모 반복문의 반복 회차 만큼 실행되록 하기

1
2
3
4
5
6
7
8
9
for (var i=0; i<5; i++) {
    for (var j=0; j<i+1; j++) {
        console.log("i=" + i + ", j=" + j);
    }

    if (i + 1 < 5) {
        console.log("------");
    }
}
▶ 출력결과
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
i=0, j=0
------
i=1, j=0
i=1, j=1
------
i=2, j=0
i=2, j=1
i=2, j=2
------
i=3, j=0
i=3, j=1
i=3, j=2
i=3, j=3
------
i=4, j=0
i=4, j=1
i=4, j=2
i=4, j=3
i=4, j=4

별찍기

아래의 출력결과가 표시되로록 구현하시오.

변수는 반복문에 사용되는 i, j외에 사용할 수 없으며 출력문은 console.log()만을 사용해야 합니다.

  • i가 0일때 1회를 수행하기 위해서 j < 1
  • i가 1일때 2회를 수행하기 위해서 j < 2
  • i가 2일때 3회를 수행하기 위해서 j < 3
  • i가 3일때 4회를 수행하기 위해서 j < 4
  • i가 n일때 i+1회를 수행하기 위해서 j < i+1
1
2
3
4
5
6
7
8
9
10
11
// 바깥의 반복은 행을 결정한다.
for (var i=0; i<7; i++) {
    var str = "";

    // 안쪽의 반복은 열을 결정한다.
    for (var j=0; j<i+1; j++) {
        str += "*";
    }

    console.log(str);
}
▶ 출력결과
1
2
3
4
5
6
7
*
**
***
****
*****
******
*******

별찍기 역순 출력

별찍기 예제에서 자식 반복문의 j값에 대한 조건식만 수정하여 반대의 결과가 표시되도록 소스코드를 수정하시오.

  • i가 0일때 7회를 수행하기 위해서 j < 7
  • i가 1일때 6회를 수행하기 위해서 j < 6
  • i가 2일때 5회를 수행하기 위해서 j < 5
  • i가 3일때 4회를 수행하기 위해서 j < 4
  • i가 n일때 7-i회를 수행하기 위해서 j < 7-i
1
2
3
4
5
6
7
8
9
// 바깥의 반복은 행을 결정한다.
for (var i=0; i<7; i++) {
    var str = "";
    // 안쪽의 반복은 열을 결정한다.
    for (var j=0; j<7-i; j++) {
        str += "*";
    }
    console.log(str);
}
▶ 출력결과
1
2
3
4
5
6
7
*******
******
*****
****
***
**
*

#05. 변수의 유효성 범위 (변수의 스코프)

1) var 키워드의 특성

중복 선언 가능

1
2
3
var a = 100;
var a = 200;
console.log(a);
▶ 출력결과
1
200

블록 ‘{}’ 안에서 선언된 변수는 블록의 실행 여부에 따라 식별됨.

조건문이 실행되면 변수는 블록 밖에서 식별 됨
1
2
3
4
5
if (true) {
    var hello = "안녕하세요.";
}

console.log(hello)
▶ 출력결과
1
안녕하세요.
조건문이 실행되지 않을 경우 블록 밖에서 사용되는 변수는 할당되지 않은 undefined가 됨
1
2
3
4
5
if (false) {
    var world = "자바스크립트";
}

console.log(world);
▶ 출력결과
1
undefined

2) let 키워드의 특성

중복 선언 불가

1
2
let mylet = 123;
let mylet = 234;
▶ 출력결과
1
2
3
4
evalmachine.<anonymous>:2
let mylet = 234;
    ^
SyntaxError: Identifier 'mylet' has already been declared

블록 안에서 선언된 변수는 블록 밖에서 식별할 수 없음

1
2
3
4
5
if (true) {
    let foo = "hello world";
}

console.log(foo);
▶ 출력결과
1
2
3
4
evalmachine.<anonymous>:5
console.log(foo);
            ^
ReferenceError: foo is not defined

변수의 범위가 블록안으로 한정되므로 서로 다른 블록끼리는 중복 선언 가능

1
2
3
4
5
6
7
if (true) {
    let bar = 1;
    console.log(bar);
} else {
    let bar = 2;
    console.log(bar);
}
▶ 출력결과
1
1

3) for문의 초기식에 대한 유효성 범위

var 키워드를 사용한 경우

초기식에서 선언된 변수가 for문 밖에서 식별 가능함

1
2
3
4
for (var i=0; i<10; i++) {
    console.log("반복문 안 ::: " + i);
}
console.log("반복문 밖 >>> " + i);
▶ 출력결과
1
2
3
4
5
6
7
8
9
10
11
반복문 안 ::: 0
반복문 안 ::: 1
반복문 안 ::: 2
반복문 안 ::: 3
반복문 안 ::: 4
반복문 안 ::: 5
반복문 안 ::: 6
반복문 안 ::: 7
반복문 안 ::: 8
반복문 안 ::: 9
반복문 밖 >>> 10

let 키워드를 사용한 경우

초기식에서 선언된 변수는 for문 밖에서 식별 할 수 없음.

1
2
3
4
for (let z=0; z<10; z++) {
    console.log("반복문 안 ::: " + z);
}
console.log("반복문 밖 >>> " + z);
▶ 출력결과
1
2
3
4
5
6
7
8
9
10
11
12
13
14
반복문 안 ::: 0
반복문 안 ::: 1
반복문 안 ::: 2
반복문 안 ::: 3
반복문 안 ::: 4
반복문 안 ::: 5
반복문 안 ::: 6
반복문 안 ::: 7
반복문 안 ::: 8
반복문 안 ::: 9
evalmachine.<anonymous>:4
console.log("반복문 밖 >>> " + z);
                           ^
ReferenceError: z is not defined

크리에이티브 커먼즈 라이선스 ITPAPER(호쌤,쭈쌤)에 의해 작성된 ≪[JS] 프로그램의 흐름제어(3) - 기본문법 활용하기≫은(는) 크리에이티브 커먼즈 저작자표시-비영리-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.
이 라이선스의 범위 이외의 이용허락을 얻기 위해서는 leekh4232@gmail.com으로 문의하십시오.

comments powered by Disqus