[Javascript] 5. 제어문

SebellKO·2022년 1월 11일

JavaScript

Javascript

목록 보기

6/23

내가 이해한대로 정리한 내용이니 정확하지 않을 수 있다. 😉

제어문

5.1 블록문

블록문은 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부르기도 한다.

5.2 조건문

조건문은 주어진 조건식의 평가 결과에 다라 코드블록의 실행을 결정한다.

자바스크립트는 if...else문, switch문으로 두가지 조건문을 제공한다.

5.2-1 if...else문

if...else문은 주어진 조건식의 평가 결과에 다라 실행할 코드 블록을 결정한다.
조건식의 평가 결과가 true일경우 if문의 코드 블록이 실행되고, false일 경우 else문의 코드 블록이 실행 된다.

조건식을 추가하여 조건에 따라 실행될 코드 블록을 늘리고 싶으면 else if 문을 사용한다. if문과 else문은 2번이상 사용할 수 없지만 else if문은 여러 번 사용할 수 있다.

대부분의 if...else문은 삼항 조건 연산자로 바꿔 쓸 수 있다.

var x = 2;
var result;

if (x % 2) {
  result = '홀수';
}
else {
  result = '짝수';
}
console.log(result); // 짝수

위 예제를 아래의 예제와 같이 바꿔 쓸 수 있다.

var x = 2;

var result = x % 2 ? '홀수' : '짝수';
console.log(result);

만약 경우의 수가 세가지라면 아래와 같이 바꿔 쓸 수도 있다.

var num = 2;

var kind = num ? (num > 0 ? '양수' : '음수') : '영';

console.log(kind); // 양수

5.2-2 switch 문

switch문은 주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case문으로 실행 흐름을 옮긴다.

switch문의 표현식과 일치하는 case문이 없다면 실행 순서는 default문으로 이동한다.
default문은 선택사항으로, 사용할 수도 있고 사용하지 않을 수도 있다.

switch (표현식) {
  case 표현식1:
    switch 문의 표현식과 표현식1이 일치하면 실행될 문;
    break;
  case 표현식2:
    switch 문의 표현식과 표현식2가 일치하면 실행될 문;
    break;
  default:
    switch 문의 표현식과 일치하는 case문이 없을때 실행될 문;
}

if...else문의 조건식은 불리언 값으로 평가되어야 하지만 switch 문의 표현식은 불리언 값보다는 문자열이나 숫자 값인 경우가 많다.
if...else문은 조건식의 참,거짓으로 코드 블록을 결정하고 switch 문은 case에 따라 코드 블록을 결정한다.

switch문의 각 case문에는 break 문을 넣어줘야 하는데, 만약 case문에 break 문이 없을시 코드는 switch문에 있는 case문을 조건에 맞는 case문부터 끝까지 통과하여 마지막 결과 값을 반환한다. 이를 폴스루(fall through)라 한다.

그러나 폴스루를 활용해 여러 개의 case문을 하나의 조건으로 사용할 수도 있다.
예제를 통해 살펴보자.

var year = 2000;
var month = 2;
var days = 0;

switch (month) {
  case 1: case 3: case 5: case 7: case 8: case 10: case 12:
    days = 31;
    break;
  case 4: case 6: case 9: case 11:
    days = 30;
    break;
  case 2:
    days = ((year % 4 === 0 && year % 100 != 0) || (year % 400 == 0)) ? 29 : 28;
    break;
  default:
    console.log('Invalid month');
}

console.log(days); // 29

위 예제는 2월의 일수를 윤년에 기반하여 계산하는 예제이다. 예제와 같이 switch문은 case, default, break등 다양한 키워드를 사용해야 하고 폴스루가 발생하는 등 문법도 복잡하기에 사용하는데 까다로울 수 있지만, if...else문으로 해결하기에 조건문이 많을 경우 switch문을 사용했을 때 가독성이 더 좋을 수 있다.

나는 아래의 2가지 이유로 switch문보다 if..else문을 주로 사용 하는 편이다.
1. switch문 case문 break문을 작성할때 들여쓰기 위치가 잘 맞지 않는다.
// 코드를 한창 짜다가 들여쓰기가 맞지 않을경우 찾아보면 대부분 이녀석이 문제였다..
2. switch문 표현식과 case문의 표현식을 맞추기가 어렵다.

5.3 반복문

반목문은 조건식의 평가 결과가 참인 경우 코드 블록을 반복해서 실행한다.

자바스크립트는 3가지 반복문을 제공한다.

5.3-1 for문

일반적으로 사용되는 for문의 형태는 다음과 같다.

for (변수 선언문 또는 할당문; 조건식; 증감식) {
  조건식이 참인 경우 반복 실행될 문;
}

예제를 통해 동작 과정을 살펴보자.

for (var i = 0; i < 2; i++) {
  console.log(i); // 0 1
}

for문의 매개변수를 보면 할당문 변수 i = 0, 조건문 i < 2, 증가식 i++을 확인 할 수 있다. 할당문, 조건문, 증가식 단어에 어려워 할 필요 없이 한 줄로 정리해보면 변수 i를 0부터 시작하여 1씩 증가시키면서 i의 값이 2미만이 될때까지 블록안의 문을 반복해서 실행 해라. 라는 뜻이다.

또한 for 문의 매개변수에 어떤 식도 선언하지 않으면 무한 루프가 되며 for문 내에 for문을 중첩하여 사용할 수 있고 이를 중첩 for문이라 한다.

for문의 변수 i는 반복을 의미하는 iteration의 i를 사용한다고 한다.

5.3-2 while문

while문은 주어진 조건식의 평가 결과가 참이면 코드 블록을 계속해서 반복 실행한다.

for 문은 반복 횟수가 명확할 때 주로 사용하고 while 문은 반복 횟수가 불명확할 때 주로 사용한다.

var count = 0;

while (count < 3) {
  console.log(count); // 0 1 2
  count++;
}

조건식의 평가 결과가 항상 참이면 무한 루프가 된다.

무한루프에서 탈출하기 위해서는 코드 블록 내에 if문을 사용하여 탈출 조건을 만들고 break 문으로 코드 블록을 탈출한다.

var count = 0;

while (true) {
  console.log(count);
  count++;
  // count가 3이면 while문 코드 블록을 탈출한다.
  if (count === 3) {
    break;
  }
}

42서울 이라는 프로그램에 참여했을때 반복문이 필요할 경우 모든 반복문은 while문으로 작성한다.라는 조건이 있었는데 아직까지 이유를 모르겠다.

5.3-3 do...while문

do...while 문은 코드 블록을 먼저 실행하고 조건식을 평가한다

var count = 0;

do {
  console.log(count);
  count++;
}
while (count < 3);

do 블록을 무조건 한번 실행하고 while문의 조건식을 평가하며 조건식의 판별 여부에 따라 true이면 do블록을 반복 실행, false이면 반복문을 종료한다.

개인적으로 잘 사용하지는 않지만, 가끔 for 문이나 while 문으로 애매할때 사용하면 미쳤다 라는 말이 절로 나오는 반복문

5.4 break문

break 문은 코드 블록을 탈출한다.

조금더 정확히 표현하자면 코드 블록을 탈출하는 것이 아니라 레이블 문, 반복문, switch 문의 코드 블록을 탈출한다.

레이블 문이란 식별자가 붙은 문을 말한다.
중첩된 for 문의 내부 for 문에서 레이블 문을 break 문과 같이 사용하여 외부 for문을 탈출할때 사용한다.

outer: for (var i = 0; i < 3; i++) {
  for (var j = 0; j < 3; j++) {
    if ( i + j == 3) {
      break outer;
    }
    console.log(`inner [${i}, ${j}]`);
  }
}
console.log('Done');

레이블 문이 상당히 유용하다고 생각 했지만, 중첩된 for 문 외부로 탈출할 때를 제외하고는 프로그램의 흐름이 복잡해져 가독성이 나빠지고 오류를 발생시킬 가능성이 높아지기에 일반적으로 권장하지 않는다고 한다.

5.5 continue문

continue 문은 반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동 시킨다.

예제를 통해 살펴보자

var string = 'Hello World.';
var search = 'l';
var count = 0;

for (var i = 0; i < string.length; i++) {
  if (string[i] !== search) {
    continue;
  }
  count++;
}
console.log(count); // 3