모던 자바스크립트 Deep Dive(4)

Daon·2023년 3월 22일
0

모던자바스크립트

목록 보기
4/12
post-thumbnail

_제어문

제어문은 주어진 조건에 따라 코드 블록을 실행하거나 반복 실행 할 때 사용한다.
제어문은 코드의 실행 순서를 인위적으로 제어할 수 있다.

1. 블록문

블록문은 0개 이상의 문들이 중괄호로 묶인 것
코드 블록 or 블록 이라고 부르기도 한다.

// 블록문
{
  var foo = 10;
  console.log(foo);
}

// 제어문
var x = 0;
while (x < 10) {
  x++;
}
console.log(x); // 10

// 함수 선언문
function sum(x, y) {
  return x + y;
}
console.log(sum(1, 2)); // 3

2. 조건문

조건문은 주어진 조건식의 평가 결과에 따라 코드 블럭의 실행을 결정합니다.
조건식은 불리언 값으로 평가 될 수 있느 ㄴ표현식입니다.

_if..else문

주어진 조건식의 평가 결과, 즉 논리적 참, 거짓에 따라 실행할 코드 블록을 결정합니다. 조건식의 평가 결과가 불리언 값이 아니라면 강제변환되어 참 거짓을 구별

if (조건식1) {
  // 조건식1이 참이면 이 코드 블록이 실행된다.
} else if (조건식2) {
  // 조건식2이 참이면 이 코드 블록이 실행된다.
} else {
  // 조건식1과 조건식2가 모두 거짓이면 이 코드 블록이 실행된다.
}

if...else문은 삼항 조건 연산자로 바꿔쓸 수 있다.
또한 num > 0 ? '양수' : '음수'는 표현식이므로 다른 표현식의 일부가 될 수 있다.

만약 코드 블록 내의 문이 하나라면 중괄호를 생략할 수 있다.

var num = 2;
var kind;

if (num > 0)      kind = '양수';
else if (num < 0) kind = '음수';
else              kind = '영';

console.log(kind); // 양수

_switch문

switch문은 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case 문으로 실행 순서를 이동시킨다.

// 월을 영어로 변환한다. (11 → 'November')
var month = 11;
var monthName;

switch (month) {
  case 1:
    monthName = 'January';
  case 2:
    monthName = 'February';
  case 3:
    monthName = 'March';
  case 4:
    monthName = 'April';
  case 5:
    monthName = 'May';
  case 6:
    monthName = 'June';
  case 7:
    monthName = 'July';
  case 8:
    monthName = 'August';
  case 9:
    monthName = 'September';
  case 10:
    monthName = 'October';
  case 11:
    monthName = 'November';
  case 12:
    monthName = 'December';
  default:
    monthName = 'Invalid month';
}

console.log(monthName); // Invalid month

위에 예제는 November이 출력되야 하지만 default 값인 Invalid month가 출력된다 그 이유는 case 11로 이동되어 실행된 것은 맞지만 switch 문을 탈출하지 않고
끝날 떄까지 모든 case문과 default를 실행했기 때문이다. 이를 폴스루(fall through)라 한다.
이를 해결하기 위해 case문 마다 break문을 사용하여야 한다.

if..else고 비교하여 가독성이 좋은 것을 사용하는 편이 좋다.

3. 반복문

반복문은 주어진 조건식의 평가 결과가 참인 경우 코드 블럭을 실행한다.
위 과정을 조건식이 거짓일 때까지 반복된다.

for, while, do..while, for..in, for..of, 등 반복문의 종류는 다양하지만
이 글에서는 기본적인 for, while, do..while을 작성하려 한다.

_for문

조건식이 거짓일 때 까지 반복하는 가장 일반적인 반복문이다.

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

for문의 실행순서
1. for 문을 실행하면 가장 먼저 초기화식 var i = 0이 실행된다. 초기화식은 단 한번만 실행된다.

  1. 초기화식의 실행이 종료되면 조건식으로 실행 순서가 이동한다. 현재 변수 i는 0이므로 조건식의 평가 결과는 true다.

  2. 조건식의 평가 결과가 true이므로 실행 순서가 코드 블록으로 이동하여 실행된다. 증감문으로 실행 순서가 이동하는 것이 아니라 코드 블록으로 실행 순서가 이동하는 것에 주의하자.

  3. 코드 블록의 실행이 종료하면 증감식으로 실행 순서가 이동한다. 증감식 i++가 실행되어 i는 1이 된다.

  4. 증감식 실행이 종료되면 다시 조건식으로 실행 순서가 이동한다. 초기화식으로 실행 순서가 이동하는 것이 아니라 조건식으로 실행 순서가 이동하는 것에 주의하자. 초기화식은 단 한번만 실행된다. 현재 변수 i는 1이므로 조건식의 평가 결과는 true다.

  5. 조건식의 평가 결과가 true이므로 실행 순서가 코드 블록으로 이동하여 실행된다.

  6. 코드 블록의 실행이 종료하면 증감식으로 실행 순서가 이동한다. 증감식 i++가 실행되어 i는 2가 된다.

  7. 증감식 실행이 종료되면 다시 조건식으로 실행 순서가 이동한다. 현재 변수 i는 2이므로 조건식의 평가 결과는 false다. 조건식의 평가 결과가 false이므로 for 문의 실행이 종료된다.

_while문

while문은 조건문의 결과가 거짓이 되면 실행을 종료한다.
또한 결과가 불리언 값이 아니라면 강제 변환되어 구별한다.

var count = 0;

// count가 3보다 작을 때까지 코드 블록을 계속 반복 실행한다.
while (count < 3) {
  console.log(count);
  count++;
} // 0 1 2

반복문은 무한루프에 빠지지않도록 조심하여야한다.

_do..while문

while문은 조건문이 바로 거짓이면 1번조차 실행하지 않지만
do..while문은 조건문이 거짓이여도 무조건 한 번 이상 실행된다.

var count = 0;

// count가 3보다 작을 때까지 코드 블록을 계속 반복 실행한다.
do {
  console.log(count);
  count++;
} while (count < 3); // 0 1 2

4. break문

switch 문과 while 문에서 살펴보았듯이 break 문은 코드 블록을 탈출한다. 좀 더 정확히 표현하자면 코드 블록을 탈출하는 것이 아니라 레이블 문, 반복문(for, for…in, for…of, while, do…while) 또는 switch 문의 코드 블록을 탈출한다. 레이블 문, 반복문, switch 문의 코드 블록 이외에 break 문을 사용하면 SyntaxError(문법 에러)가 발생한다.

if (true) {
  break; // Uncaught SyntaxError: Illegal break statement
}

레이블 문이란 식별자가 붙은 문을 말한다.

// foo라는 식별자가 붙은 레이블 블록문
foo: {
  console.log(1);
  break foo; // foo 레이블 블록문을 탈출한다.
  console.log(2);
}

console.log('Done!');

위의 레이블 문을 활용하여 중첩된 for문을 탈출하는것이 좋은 예시다

// outer라는 식별자가 붙은 레이블 for 문
outer: for (var i = 0; i < 3; i++) {
  for (var j = 0; j < 3; j++) {
    // i + j === 3이면 외부 for 문을 탈출한다.
    if (i + j === 3) break outer;
  }
}

console.log('Done!');

이외에는 레이블문을 사용하는 것을 권장하지 않는다.
이유는 프로그램의 흐름이 복잡해져서 가독성이 나쁘고 오류의 가능성이 높아지기 떄문이다.

5. continue문

continue문은 반목문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 이동한다(for(i++))break문처럼 반복문을 탈출하지는 않는다.

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

// 문자열은 유사배열이므로 for 문으로 순회할 수 있다.
for (var i = 0; i < string.length; i++) {
  // 'l'이 아니면 현 지점에서 실행을 중단하고 반복문의 증감식으로 이동한다.
  if (string[i] !== 'l') continue;
  count++; // continue 문이 실행되면 이 문은 실행되지 않는다.
}

console.log(count); // 3

// 참고로 String.prototype.match 메소드를 사용해도 같은 동작을 한다.
console.log(string.match(/l/g).length); // 3

위에 에시처럼 사용하여 실행해야 할 코드의 실행을 줄이지만
예시처럼 실행해야 할 코드가 한줄이라면 굳이 continue를 사용하지 않아도 된다.

for (var i = 0; i < string.length; i++) {
  // 'l'이면 카운트를 증가시킨다.
  if (string[i] === 'l') count++;
}

참조
https://poiemaweb.com/js-control-flow

profile
같이 일하고싶은 그런 개발자!

0개의 댓글