[JavaScript] 기본 문법 활용

기본 문법 활용

조건문, 반복문을 구성하는 블록{} 안에 다른 문법 표현이 포함될 수 있으며, 이런 규칙으로 인해 다양한 문법 중첩 패턴이 생겼다. 자주 사용되는 패턴으로는 if-if, if-for, for-if, for-for 등이 있다.

---

if문 안에 포함된 흐름 제어

1. if-if 구조

특정 조건이 true로 판단되어 블록 안에 진입했을 때, 블록 안의 상세 조건을 판별하는 구조이다. 블록이라는 것이 생기면 밖에서 안으로 진행 후, 그 다음 블록으로 넘어가게 된다.

if (조건) {
    if (조건) {
        ...
    }
} else if (조건) {
    if (조건) {
        ...   
    } else {
        ...
    }
} else {
    if (조건) {
        ...
    } else if (조건) {
        ...
    } else {
        ...
    }
}

예제

const point = 78;

if (point >= 70) {
    console.log("Pass 입니다.");

    if (point > 90) {
        console.log("A");
    } else if (point < 80) {
        console.log("B");
    } else {
        console.log("C");
    }
} else {
    console.log("NonPass 입니다.");
}


/** 결과 **/
Pass 입니다.
B

2. if-for 구조

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

if (조건) {
    for (초기식; 조건식; 증감식) {
        ...
    }
}

예제

const k = 5;

// k를 2~9 사이로 제한
if (k > 1 && k < 10) {
    for (let i = 1; i < 10; i++) {
        console.log("%d x %d = %d",k ,i, k*i);
    }
} else {
    console.log("2~9 사이의 수식만 출력합니다.");
}


/** 결과 **/
5 x 1 = 5
5 x 2 = 10
5 x 3 = 15
5 x 4 = 20
5 x 5 = 25
5 x 6 = 30
5 x 7 = 35
5 x 8 = 40
5 x 9 = 45

---

for문 안에서의 흐름 제어

반복문 안에서의 조건문

반복문 안에서 매 반복 수행시마다 조건을 판별하며, 주로 반복문에서 사용되는 조건 값(=초기식에서 생성한 변수)에 대한 조건 판별을 위해 사용된다.

1. 짝홀수의 합

let oddSum = 0; //홀수의 합
let evenSum = 0; //짝수의 합

// i가 1~10까지 1씩 증가하는 동안 반복
for (let i=1; i<=10; i++) {
    //반복문 안에서의 조건문은 주로 반복문의 초기식 변수(i)에 대한 경우의 수를 판별
    if (i % 2 === 0) {
        console.log("%d(은)는 짝수", i);
        evenSum += i;
    } else {
        console.log("%d(은)는 홀수", i);
        oddSum += i;
    }
}

console.log("1~10 까지 홀수들의 합: %d", oddSum);
console.log("1~10 까지 짝수들의 합: %d", evenSum);



/** 결과 **/
1(은)는 홀수
2(은)는 짝수
3(은)는 홀수
4(은)는 짝수
5(은)는 홀수
6(은)는 짝수
7(은)는 홀수
8(은)는 짝수
9(은)는 홀수
10(은)는 짝수
1~10 까지 홀수들의 합: 25
1~10 까지 짝수들의 합: 30

2. 공배수 구하기

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

// 1부터 100까지의 범위 안에서 3과 5의 공배수를 모두 출력하고 공배수의 총 합인 sum값을 구해 출력
const x = 3;
const y = 5;

// 공배수의 총 합을 저장할 변수
let sum = 0;

for (let i=1; i<=100; i++) {
    //if (i % (x*y) == 0) {
    if (i%x === 0 && i%y === 0) {
        console.log(i);
        sum += i;
    }
}

console.log("%d과 %d의 공배수의 총 합: %d", x, y, sum);


/** 결과 **/
15
30
45
60
75
90
3과 5의 공배수의 총 합: 315

3. 마지막 회차 생략

• 조건식이 "변수 < 최대값"인 경우의 조건: 변수 + 1 < 최대값

for (let i = 1; i < 10; i++) {
    if (i + 1 < 10) {
        console.log(i);
    }
}


/** 결과 **/
1
2
3
4
5
6
7
8

• 조건식이 "변수 <= 최대값"인 경우의 조건: 변수 < 최대값

for (let i = 1; i <= 9; i++) {
    if (i < 9) {
        console.log(i);
    }
}


/** 결과 **/
1
2
3
4
5
6
7
8

• 글자 사이에 콤마(,) 넣기
  • 마지막 숫자에서는 제외

let str = "";

for (let i = 1; i < 10; i++) {
    str += i;

    if (i + 1 < 10) {
        str += ",";
    }
}

console.log(str);


/** 결과 **/
1,2,3,4,5,6,7,8,9

for문 안의 for문

바깥의 반복문(부모)이 1회 수행할 때마다 안쪽의 반복문(자식)이 매번 처음부터 새로 시작하는 이중 반복문 구조이다. 두 반복문 간의 조건 값이 서로 달라야 하며, 변수 이름이 중복될 수 없다.

for (let i = 0; i <3; i++) {
    console.group("i에 대한 반복 수행 시작 >> i=%d", i);

    for (let j=0; j<5; j++) {
        console.log("i = %d, j = %d", i, j);
    }

    console.groupEnd();
}


/** 결과 **/
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=1
  i = 1, j = 0
  i = 1, j = 1
  i = 1, j = 2
  i = 1, j = 3
  i = 1, j = 4
i에 대한 반복 수행 시작 >> i=2
  i = 2, j = 0
  i = 2, j = 1
  i = 2, j = 2
  i = 2, j = 3
  i = 2, j = 4

1. 구구단

for (let i = 2; i < 10; i++) {
    console.group("%d단", i);

    for (let j=1; j < 10; j++) {
        console.log("%d x %d = %d", i, j, i*j);
    }

    console.groupEnd();
}


/** 결과 **/
2단
  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단
  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단
  4 x 1 = 4
  4 x 2 = 8
  4 x 3 = 12
  4 x 4 = 16
  4 x 5 = 20
  4 x 6 = 24
  4 x 7 = 28
  4 x 8 = 32
  4 x 9 = 36
.
.
.
9단
  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

 

반복 범위 동적 설정

자식 반복문의 조건식이 부모 반복문의 조건 변수를 활용하여 구성되면, 자식 반복문의 반복 범위에 변화를 줄 수 있다. 안쪽 for은 열을 담당하게 되고, 바깥쪽 for은 행을 담당하게 된다.

for (let i = 0; i < 5; i++) {
    console.group("i에 대한 반복 수행 시작 >> i=" + i);

    for (let j = 0; j < i+1; j++) {
        console.log("i=%d, j=%d", i, j);
    }

    console.groupEnd();
}


/** 결과 **/
i에 대한 반복 수행 시작 >> i=0
  i=0, j=0
i에 대한 반복 수행 시작 >> i=1
  i=1, j=0
  i=1, j=1
i에 대한 반복 수행 시작 >> i=2
  i=2, j=0
  i=2, j=1
  i=2, j=2
i에 대한 반복 수행 시작 >> i=3
  i=3, j=0
  i=3, j=1
  i=3, j=2
  i=3, j=3
i에 대한 반복 수행 시작 >> i=4
  i=4, j=0
  i=4, j=1
  i=4, j=2
  i=4, j=3
  i=4, j=4

1. 별 찍기

for (let i = 0; i < 5; i++) {

    let str = "";

    for (let j = 0; j < i+1; j++) {
        str += "*";
        
    } 
    console.log(str);
} 


/** 결과 **/
*
**
***
****
*****

2. 별 찍기 역행

for (let i = 0; i < 7; i++) {

    let str = "";

    for (let j = 0; j < 7-i; j++) {
        str += "*";
    }

    console.log(str);
}


/** 결과 **/
*******
******
*****
****
***
**
*

무한 루프

절대로 조건식이 종료되지 않는 형태의 반복문이다. 

1. while문의 무한 루프 형식

while (true) {
    ...
}

let y = 0;

while (true) {
    y++;

    if (y % 2 == 0) {
        // 반복문의 흐름이 조건식으로 넘어가도록 제어
        continue;
    }

    // 반복이 종료될 조건을 반드시 지정
    if (y > 10) {
        // 반복의 수행을 강제로 종료하도록 제어
        break;
    }

    console.log("Hello World ::: %d", y);
}


/** 결과 **/
Hello World ::: 1
Hello World ::: 3
Hello World ::: 5
Hello World ::: 7
Hello World ::: 9

2. for문의 무한 루프 형식

for(초기식; true; 증감식) {
...
}

for (let i = 0; true; i++) {
    if (i % 2 == 0) {
        continue;
    }

    if (i > 10) {
        break;
    }

    console.log("Hello World ::: %d", i);
}


/** 결과 **/
Hello World ::: 1
Hello World ::: 3
Hello World ::: 5
Hello World ::: 7
Hello World ::: 9

반복문 제어

반복을 몇 번 수행해야 하는지 판단할 수 없는 경우, 우선 무한 루프 형태로 지정하고, 특정 조건이 충족되는 지에 따라 반복의 중단 여부를 결정한다.

반복문의 흐름 제어 기능을 갖는 키워드

키워드	설명
continue	조건식으로 강제 이동
break	현재 반복문을 강제로 종료하고 블록을 빠져 나간다.