[모던 자바 스크립트 Deep Dive] - 8장. 제어문

 

---

 

모던 자바 스크립트 Deep Dive 를 읽고 정리한 글 입니다.

---

 

제어문

조건에 따라 코드 블록을 실행(조건문) 하거나 반복 실행(반복문) 할 때 사용

코드의 실행 흐름 인위적 제어 가능

가독성 저하

 

 

---

 

8.1 블록문

 

블록문 (코드 블록, 블록)

• 0개 이상의 문을 중괄호로 묶은 것
• 블록문을 하나의 실행 단위로 취급
• 블록문의 끝에서는 세미 콜론을 붙이지 않음

// 블록문
{
var foo = 10;
}

//제어문
var x = 1;
if (x<10) {
	x++;
    }
    
// 함수 선언문
function sum(a, b) {
	return a + b;
    }

 

 

---

 

8.2 조건문

 

조건문

주어진 조건식의 평가 결과에 따라 블록문의 실행을 결정

조건식은 불리언 값으로 평가 될 수 있는 표현식

 

if ... else 문

주어진 조건식의 평가 결과 논리적 참, 거짓에 따라 실행할 코드 블럭 결정

조건식은 불리언 값으로 평가 -> 암묵적 타입 변환\

else if문은 여러번 사용 가능

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

 

코드 블록 내의 문이 하나라면 중괄호 생략 가능

var num = 2;
var kind;

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

consloe.log(kind); 		//=> 양수

 

if... esle문 => 삼항 조건 연산자

num > 0 ? '양수' : '음수"  는 표현식 => 삼항 조건 연산자는 값으로 평가되는 표현식 => 변수 할당 가능

if ... else 문 는 표현식 아님 => 값으로 사용할 수 없음 => 변수에 할당 불가능

• 단순 값의 결정 : 삼항 조건 연산자
• 여러 줄의 문 : if ... else

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

if (x % 2) {		// 2 % 2는 0이다. 이때 0은 false로 암묵적 변환
	result = '홀수';
}	else {
	result = '짝수';
}

console.log(result); 		// => 짝수

-----------------------------------------------------------------

// 두 가지 경우의 수를 갖을 때
var x = 2;

//0은 false로 취급
var result = x % 2 ? '홀수' : '짝수';

console.log(result); 		// => 짝수

-----------------------------------------------------------------

// 세 가지 경우의 수를 가질 때
var num = 2;

//0은 false로 취급
var kind = num ? (num > 0 ? '양수' : '음수' ) : '영';

console.log(kind); 		// => 양수

 

 

switch 문

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

• case 문 : 상황을 표현하는 표현식
• default 문 : 일치하는 case 문이 없을 때, 선택 사용

불리언 값보다 문자열, 숫자 값의 표현식이 더 많음

참, 거짓 보다 다양한 상황에 따라 실행할 코드 블록 결정할 때 사용

가독성을 높이기 위해서 if.. else문 사용 우선

break 문이 없다면 case 문의 표현식과 일치하지 않더라도 실행 흐름이 다음 case 문으로 연이어 이동

default 문에는 break 문을 생략

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

 

폴스루 

문을 실행한 후 switch문을 탈출하지 않고 모든 case문과 default문 실행

break 문을 생략한 폴스루가 유용한 경우도 있음

 

 

---

 

8.3 반복문

 

반복문

조건식의 평가 결과가 참인 경우 코드 블록 실행

그 후 조건식을 다시 평가하여 여전히 참인 경우 코드 블록 다시 실행

조건식이 거짓일 때까지 반복

 

반복문 대체 기능

forEach 메서드 : 배열 순회

for ... in 문 : 객체의 프로퍼티 열거

for ... of 문 : 이터러블 순회

 

 

for 문

조건식이 거짓으로 평가 될 때까지 코드 블록 반복 실행

반복 횟수 명확

변수 선언문, 조건식, 증감식 선택적 사용

어떤 식도 선언하지 않으면 무한루프

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

 

 

이중 중첩 for 문

for (var i = 1; i <= 6; i++) {
	for (var j = 1; j <= 6; j++) {
    		if (i + j === 6) 
        	console.log ('[${i}, ${j}]');
    }
}

 

 

중첩된 for 문의 내부 for문에서 break 문을 실행 => 내부 for 문을 탈출하여 외부 for 문으로 진입

외부 for 문 탈출 => 레이블 문 사용

// outer 라는 식별자가 붙은 레이블 for문
outer: for (var i = 0; i < 3; i++) {
	for (var j = 0; j < 3; j++) {
    
   	 	// i + j === 3 이면 outer라는 식별자가 붙은 레이블 for문을 탈출
    	if (i+j === 3) break outer;
    	console.log('inner [${i}, ${j}');
    	}
}

console.log('Done!');

 

 

whlie 문

조건식의 평가가 참이면 코드 블록을 계속해서 반복 실행

반복 횟수 불명확

• 조건문의 평가 결과 거짓 : 코드 블록 실행하지 않고 종료    => 암묵적 타입 변환
• 조건문의 평가 결과 참 : 무한 루프    => if 문으로 탈출 조건을 만들고 break 문으로 코드 블록 탈출

var count = 0;

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

 

 

do ... while 문

코드 블록을 먼저 실행하고 조건식 평가

코드 블록은 무조건 한 번 이상 실행

var count = 0;

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

 

 

---

8.4 break 문

 

break 문

레이블 문, 반복문, switch 문 코드 블록 탈출

반복문을 더 이상 진행하지 않아도 될 때 불필요한 반복 회피

반복문, switch 문에 사용시 break 문에 레이블 식별자 지정하지 않음

그 이외 사용 시 문법 에러(SyntaxError) 발생

 

레이블 문

식별자가 붙은 문

프로그램의 실행 순서 제어

이중 중첩 for 문 이외의 경우에는 비권장

// foo라는 레이블 식별자가 붙은 레이블 문
foo: console.log('foo');

 

 

문자열에서 특정 문자의 인덱스 검색 예시

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

// 문자열은 유사 배열이므로 for문으로 순회 가능
for (var i = 0; i < string.length; i++) {
	// 문자열이 개별문자가 'l' 이면
    if (string[i] ==== search) {
    	index = i;
        break; // 반복문 탈출
    }
}

console.log(index); // => 2

// 혹은 String.prototype.indexOf 메소드를 사용해도 같은 동작
cosole.log(string.indexOf(search)): // => 2

 

 

---

 

8.5  continue문

 

continue문

반복문의 코드 블록 실행을 현 지점에서 중단

반복문의 증감식으로 실행 흐름을 이동

break문처럼 반복문을 탈출하지 않음

• if문 내에서 실행해야 할 코드가 한 줄 :  continue문 사용 지양 
• if문 내에서 실행해야 할 코드가 여러 줄 : continue문 사용

// continue문을 사용 안함 :  if문 내에 코드를 작성
for (var i = 0; i < string.length; i++ ) {
	// l 이면 카운트를 증가
    if (string[i] === search) {
    count++;
    //code
    //code
    //code
    }
}



// continue문을 사용 : if문 밖에 코드 작성 가능
for (var i = 0; i < string.length; i++ ) {
	// l 이 아니면 카운트를 증가시키지 않는다
    if (string[i] !== search) continue;
    
    count++;
    //code
    //code
    //code
    }
}

 

 

문자열에서 특정 문자의 개수를 세는 예

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

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

console.log(count); // => 3

// 혹은 String.prototype.indexOf 메소드를 사용해도 같은 동작
const regexp = new RegExp(search, 'g');
cosole.log(string.match(regexp).length): // => 3

 

 

---

 

https://wikibook.co.kr/mjs/

모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리