JavaScript 제어문

1. 제어문 (Control flow statement)

코드의 흐름을 제어한다.

 

2. 조건문(Conditional Statement)

조건문은 특정한 조건일때만 원하는 코드를 실행하도록 하는 것이 조건문이다.

ex) if, switch 등등

 

2-1. if, else if

if(조건) {}
if(조건) {} else {}
if(조건1) {} else if(조건2) {} else {}

 

예시를 봐보자.

let fruit = 'orange'; // 만약 이 조건을 만족하지 못한다면 다음 코드로 넘어가게 된다.
if (fruit === 'apple') {
  console.log('🍎')
} else if (fruit === 'orange') {
  console.log('🍊');
} else {
  console.log('😀')
}

 

else if 의 경우는 if 조건이 해당되지 않는 경우 다른 조건을 내세울 수 있다. 

if (2 < 1) { // 이 조건이 값이 true or false인지 코드블럭을 실행할지 제어 할 수 있다.
  // (null, undefined, false, 0, '') 등등이 false라 출력이 안됨
  console.log('출력되면 안됨'); // 이것을 출력하지 않으려면 조건문이 false여야 출력이 되지 않는다.
}

 

2-2. Switch

정해진 범위 안의 값에 대해 특정한 일을 해야하는 경우

예시를 봐보자

let day = 6; // 0:월요일, 1:화요일, ... 6:일요일
let dayName;
if (day === 0) {
  dayName = '월요일';
} else if (day === 1) {
  dayName = '화요일';
} else if (day === 2) {
  dayName = '수요일';
} else if (day === 3) {
  dayName = '목요일';
} else if (day === 4) {
  dayName = '금요일';
} else if (day === 5) {
  dayName = '토요일';
} else if (day === 6) {
  dayName = '일요일';
}

위 코드는 switch를 사용한 것이 아닌 if else if를 사용한 조건문이다. 코드가 깔끔하지 않다. 

 

switch를 사용한 코드를 봐보자.

switch (day) {
  case 0:
    dayName = '월요일';
    break; // 코드가 멈출 수 있도록 break, 조건이 맞다면 이 코드에서 수행하고 멈추도록
  // break를 사용하지 않는다면 코드를 쭉 지나가서 마지막을 출력한다.

  case 1:
    dayName = '화요일';
    break;

  case 2:
    dayName = '수요일';
    break;

  case 3:
    dayName = '목요일';
    break;

  case 4:
    dayName = '금요일';
    break;

  case 5:
    dayName = '토요일';
    break;

  case 6:
    dayName = '일요일';
    break;
  default: // 마지막에 위 조건들 중에 해당하지 않는 경우 아래와 같이 코드 실행 가능하다.
    console.log('해당하는 요일이 없음');

}

 

위 코드는 switch를 사용한 코드인데, switch를 사용할 때는 break 문을 사용해야한다. 그 이유는 break를 사용하지 않고 그대로 코드를 작성한다면, switch문 내에게 그 다음 case의 코드를 실행하게 된다. 이를 fall through라고 하며 마지막 case까지 가게 된다. 그래서 각 case에 break 문을 사용하여, 그 조건이 해당이 되는 경우 case를 종료하고 switch 블록을 벗어나게 된다. 그리고 dafault는 모든 case가 일치하지 않을 때 실행된다.

 

3. 삼항 조건 연산자(Ternary Operator)

조건식 ? 참인 경우 : 거짓인 경우
조건식 ? 표헌식1 : 표현식2
조건식이 true 라면 표현식 1이 실행이 되고, false 라면 표현식2가 실행이 된다.

 

예시를 봐보자.

let fruit = 'apple'; // 만약 이 조건을 만족하지 못한다면 다음 코드로 넘어가게 된다.
if (fruit === 'apple') {
  console.log('🍎')
} else {
  console.log('😀')
}
fruit === 'apple' ? console.log('🍎') : console.log('😀'); // 위 조건을 간단하게 표현할 수 있다.

let emoji = fruit === 'apple' ? '🍎' : '😀'; // 삼항 연사자를 변수에 저장도 가능하다. true 라면 첫번째 사과를 출력, false라면 표정 이모지가 출력된다.
console.log(emoji);

 

퀴즈를 한번 풀어보자!

문제

let num = 2;
num의 숫자가 짝수이면 👍, 홀수라면 👎을 출력하도록

 

정답

// if(조건문)
let num = 2;

if (num % 2 === 0) {
  console.log('👍');
} else {
  console.log('👎');
};

// ternary(삼항 연산자)
num % 2 === 0 ? console.log('👍') : console.log('👎');
let emoji = num % 2 === 0 ? '👍' : '👎'; // 좀 더 코드를 간결하게 하는 법, 변수 저장 
console.log(emoji);

 

여기서 나머지 연산자를 사용했다. 그 이유는 나눠서 나온 나머지가 0인 경우는 짝수 경우에만 가능하다. 예를 들면 4를 2로 나눴을 때 몫이 2이고 나머지가 0이다. 만약 홀수의 경우 3를 2로 나눈다면 몫은 1이고, 나머지가 1이다. 그래서 주로 짝수 홀수를 구별할 때 이러한 방법을 이용한다.

 

 

4. 반복문(Loop Statement)

 

반복적으로 수행하도록 할 수 있는 것이 반복문이다.

ex) for, while

 

4-1. for

반복문 Loop Statement
for(변수선언문; 조건식; 증감식) { 해당 조건이 맞을때까지 코드 블럭 실행함 }
실행순서 :
1. 변수선언문
2. 조건식의 값이 참이면 {} 코드블럭을 수행
3. 증감식을 수행
4. 조건식이 거짓이 될 때까지 2번과 3번을 반복함

 

예시를 봐보자.

for (let i = 0; i < 5; i++) {
  console.log(i)
}

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

 

아래와 같이 설명이 있다. 둘이 같은 내용이지만, 설명이 조금씩 다르기에 둘다 보는 것이 좋다.

 

1. 외부 루프 for (let i = 0; i < 5; i++) 가 시작이 된다. i는 0으로 초기화
2. 외부 루프의 조건 (i < 5)를 검사한다. 처음에는 이 조건이 참이다(0 < 5), 그래서 루프 내부로 진입한다.
3. 내부 루프 for (let j = 0; j < 5; j++)  가 시작이 된다. j는 0으로 초기화 된다.
4. 내부 루프의 조건(j < 5)을 검사한다. 처음에는 이 조건이 참이다(0 < 5), 그래서 루프 내부로 진입한다.
5. console.log(i, j)가 실행이 된다. 처음 실행될 때는 i와 j가 모두 0이다.
6. 내부 루프 j++가 실행이 되어 j가 1 증가한다.
7. 내부 루프의 조건을 다시 검사한다. 이 과정은 j가 5 될때까지 반복한다. j가 5 되면 내부 루프의 조건이 거짓이 되어 내부 푸르가 종료된다.
8. 외부루프로 돌아가 i++가 실행이 되어 i가 1 증가한다.
9. 외부 루프의 조건을 다시 검사한다. i가 5보다 작은 동안 이 과정이 반복된다.
10. 외부 루프의 i가 5되면 외부 루프의 조건도 거짓이 되어 외부 루프가 종료된다. 이때 모든 반복이 완료된다.

 

1. 외부 루프 시작: 외부 루프의 초기 조건 설정(i의 초기값)으로 시작합니다.
2. 외부 루프 조건 검사: 외부 루프의 조건(i < 5와 같은)을 검사합니다. 이 조건이 참이면 외부 루프 내부로 진입합니다. 거짓이면 외부 루프가 종료됩니다.
3. 내부 루프 시작: 외부 루프 내부에서 내부 루프의 초기 조건 설정(j의 초기값)으로 시작합니다.
4. 내부 루프 조건 검사: 내부 루프의 조건(j < 5와 같은)을 검사합니다. 이 조건이 참이면 내부 루프 내부로 진입합니다. 거짓이면 내부 루프가 종료되고 외부 루프의 다음 단계로 넘어갑니다.
5.내부 작업 실행: 내부 루프 조건이 참일 때 실행할 작업(console.log(i, j)와 같은)을 수행합니다.
6. 내부 루프 증가: 내부 루프의 증가문(j++와 같은)을 실행합니다.
7. 내부 루프 조건 재검사: 4번으로 돌아가 내부 루프의 조건이 거짓이 될 때까지 4~6번을 반복합니다.
8. 외부 루프 증가: 내부 루프가 종료되면 외부 루프의 증가문(i++와 같은)을 실행합니다.
9.  외부 루프 조건 재검사: 2번으로 돌아가 외부 루프의 조건이 거짓이 될 때까지 2~8번을 반복합니다.

 

4-2. 무한 루프

 for (; ;) { // 무한루프처럼 빠지지 않게 조건을 잘해야한다. 언젠가 false가 되도록 해야한다.
//   console.log('!')
// }

 

반복문 제어

반복문 제어에는 continue, break가 있다.

for (let i = 0; i < 20; i++) {
  if (i === 10) {
    console.log('i가 드디어 10이 되었다.')
    continue;
    // break; // 반복문을 특정 조건에서 그만되게 할 수 있음
  }
  console.log(i);
}

 

continue 경우 i가 10이 될때, i가 드디어 10이 되었다. 는 출력이 되고, 그 후 continue 문이 실행이 되어,

console.log(i); 가 무시되고 다음 반복으로 넘어간다. 따라서 i가 10일 때는  console.log(i); 가 실행되지 않으며, 0부터 9까지와 11부터 19까지의 숫자가 출력된다. i가 10인 경우 i가 드디어 10이 되었다. 라는 메세지만 출력이 되고, 그 숫자는 출력이 되지 않는다.

4-3. continue

반복문의 현재 반복에서 남은 코드를 무시하고 반복문의 다음 반복으로 넘어간다. 즉 continue가 실행되면 그 아래에 있는 코드는 무시되고, 반복문의 조건 검사로 바동 이동하여 다음 반복을 시작하게 된다. continue 는 주로 특정 조건을 만족하는 경우에 나머지 코드를 실행하지 않고 반복문의 다음 단계로 건너뛰고 싶을때 사용한다.

4-4. break

반복문을 완전히 종료시키는 역할을 한다. break가 실행이 되면 반복문은 즉시 종료되고, 반복문 다음에 있는 코드의 실행을 계속한다.

 

 

4-5. while

while(조건) {}
// 조건이 false가 될때까지 {}코드를 반복 실행
// 반복문의 시작 부분에서 조건을 검사한다. 조건이 true일 경우메나 코드 블록을 실행한다. 
// 따라서 조건이 처음부터 false인 경우, 코드 블록은 한 번도 실행되지 않는다.

 

예시를 봐보자.

let num = 5;
while (num >= 0) {
  console.log(num);
  num--;
}

 

위 코드는 num 변수가 0이상인 동안 반복을 한다. while 루프는 조건이 참(true)인 동안 루프 내의 명령을 반복 실행한다. 여기서 num이 0보다 크거나 같으면, 루프의 num의 현재 값을 콘솔에 출력한다. 그 이후 num을 1 감소 시킨다(num --). num 이 -1이 되면, 조건 num >= 0은 거짓(false)이 되며, 루프는 종료가 된다. 따라서 이 코드는 5부터 0까지의 숫자를  차례대로 출력한다.

 

let isActive = true;
let i = 0;
while (isActive) {
  console.log('아직 살아있다.');
  if (i === 1000) {
    break;
  }
  i++;
}

 

위 코드는 isActive 변수가 참인 동안 '아직 살아있다.'를 출력하는 while 루프를 포함시킨다. while(isActive) 루프는 isActive 의 값이 true인 동안 계속 실행이 된다. i 변수는 각 반복마다 1씩 증가한다.

if (i === 1000) 조건문은 i가 1000에 도달했는지 확인 한다. 만약 i 가 1000이면 break문이 실행되어 while 루프를 즉시 종료한다. 이는 무한 루프를 발지하고, 특정 조건(이 코드는 i가 1000일 때)에서 벗어날 수 있게 한다. 따라서 이 코드는 최대 1001번 '아직 살아있다.'를 출력하고 종료된다.(i가 0부터 시작하기 때문에)

 

4-6. do while

// do...while 반복문은 반복문의 끝에서 조건을 검사한다. 
// 이는 코드 블록이 조건의 true 또는 false 여부와 상관없이 최소 한 번은 실행된다. 
// 이후 조건이 true인 경우 계속해서 코드 블록이 실행된다.
do { console.log('아직 살아있다.'); } while (isActive);

 

 

5. 논리연산자(Logical Operator)

&& 그리고
|| 또는
! 부정(단항연산자에서 온것)
!! 불리언값으로 변환 (단항연산자 응용버젼)

 

let num = 8;
if (num >= 0 && num < 9) { // && 그리고 연산자는 둘다 true 이여야 코드블럭이 실행된다.
  console.log('👍');
}

let secondNum = 8;
if (secondNum >= 0 || secondNum > 20) { // || 둘 중 하나만 true만 되면 된다. 코드블럭이 실행된다.
  console.log('👍');
} if (secondNum != 9) {
  console.log('👑')
}

 

5-1. && 연산자

console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false

 

5-2. || 연산자

console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false

 

5-3. !, !! 연산자

console.log(!'text'); // false 문자를 부정
console.log(!!'text'); // true  불리언으로 바꾸기 때문에 'text'가 문자이기때문에 true

 

이번 시간에는 JS의 꽃이 반복문, 조건문을 배웠다. 그리고 조건문에서 자주 사용하는 삼항 연산자, if, else if, switch, &&,(그리고) ||(또는) 연산자, 반복문에 for, while 등을 익혔다. 이는 알고리즘 문제를 풀 때 자주 이용되기에 열심히 공부 하자.