모던 자바스크립트 Deep Dive - 3

JA_X·2023년 3월 14일
0

Deep Dive 개인 공부

목록 보기
3/43

08장 제어문

8.2 조건문

8.2.1 if ... else 문

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

// x가 짝수이면 result 변수에 문자열 '짝수'를 할당하고, 홀수이면 문자열 '홀수'를 할당한다
var x = 2;
var result;

if(x % 2){ // 2 % 2는 0이고, 이때 0은 false로 암묵적 강제 변환된다
  result = '홀수'; // 1 -> true
}else{
  result = '짝수'; // 0 -> false
}

console.log(result); // 짝수

위의 예제는 다음과 같이 삼항 조건 연산자로 바꿔 쓸 수 있다.

var x = 2;

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

위 예제는 두 가지 경우의 수('홀수' 또는 '짝수')를 갖는 경우이다. 만약 경우의 수가 세 가지('양수, '음수', '영')라면 다음과 같이 바꿔 쓸 수 있다.

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

console.log(kind); // 양수

num > 0? '양수' : '음수'는 표현식이다. 즉, 삼항 조건 연산자는 값으로 평가되는 표현식을 만든다. 따라서 삼항 조건 연산자 표현식은 값처럼 사용할 수 있기 때문에 변수에 할당할 수 있다. 하지만 if...else 문은 표현식이 아닌 문이기 때문에 값처럼 사용할 수 없어 변수에 할당할 수 없다.

조건에 따라 단순히 값을 결정하여 변수에 할당하는 경우 if...else 문보다 삼항 조건 연산자를 사용하는 편이 가독성이 좋다. 하지만 조건에 따라 실행해야 할 내용이 복잡하여 여러 줄의 문이 필요하다면 if...else 문을 사용하는 편이 가독성이 좋다.

8.2.2 switch 문

switch 문은 주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case 문으로 실행 흐름을 옮긴다.
switch 문의 표현식과 일치하는 case 문이 없다면 실행 순서는 default 문으로 이동한다. default 문은 선택사항으로, 사용할 수도 있고 사용하지 않을 수도 있다.
아래의 예제는 switch 문을 사용하여 월을 입력하면 영어로 변환하는 문이다.

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

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

console.log(monthName); // November

case 문에 해당하는 문의 마지막에 break 문을 사용하는데, break 키워드로 구성된 break 문은 코드 블록에서 탈출하는 역할을 한다. break 문이 없다면 switch 문을 탈출하지 않고 switch 문이 끝날 때까지 이후의 모든 case 문과 default 문을 실행하게 된다. 이를 폴스루(fall through)라 한다. 때에 따라서는 폴스루가 유용한 경우도 있는데 여러개의 case 문을 하나의 조건으로 사용하여 조건에 맞는 여러 개의 case 문에서 같은 값을 유도 할 수 있다.

8.4 break 문

break 문은 switch 문뿐만 아니라 반복문에서도 사용이 가능하다. 다음 예제는 문자열에서 특정 문자의 인덱스(위치)를 검색하는 예이다.

var string = 'Hello World.';
var search = 'l';
var index;

for(var i = 0; i < string.length; i++){
  if(string[i] === search){
    index = i;
    break; // 반복문을 탈출한다
  }
}

console.log(index); // 2

// 참고로 String.prototype.indexOf 메서드를 사용해도 같은 동작을 한다
console.log(string.indexOf(search)); // 2

8.5 continue 문

continue 문은 반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동시킨다. break 문처럼 반복문을 탈출하지는 않는다.
다음은 문자열에서 특정 문자의 개수를 세는 예다.

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

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

console.log(count); // 3

// 참고로 String.prototype.math 메서드를 사용해도 같은 동작을 한다
const regexp = new RegExp(search, 'g');
console.log(string.match(regexp).length); // 3
// 위의 예제의 for 문 형식
for(var i = 0; i<string.length; i++){
  if(string[i] === search) count++
}

console.log(count); // 3

0개의 댓글