[자바스크립트] 딥다이브) 제어문

제어문 (control flow statement) 

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

ㄴ일반적으로 위에서 아래방향으로 순차 실행

ㄴ제어문 사용시 코드 실행흐름 인위적으로 제어 가능 => 순차흐름을 바꾸면 "가독성"을 해침 => 오류로 이어지기도함 

 

1) 블록문 (block statement/ compound statement = 코드 블록 = 블록)

ㄴ0개 이상의 문을 중괄호로 묶은 것 

ㄴ자바스크립트가 1개의 실행단위로 취급함

ㄴ단독 사용보다는 제어문, 함수를 정의 할때 사용하는 것이 일반적

ㄴ블록문은 자체종결성을 가져서 ;는 안붙임 

{
let num = 10;
}

let x = 1;
if( x < 10 ) {
x++;
}

function sum (x, y){
return x + y;
}

 

 

2) 조건문 (conditional statement)

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

ㄴ조건식 : boolean값으로 평가될수 있는 표현식 

  - 1) if ... else문

ㄴelse if를 중간에 넣을수 있고, 여러번 사용가능 

ㄴ만약 코드블록 내의 문의 하나 뿐이면 중괄호 생략 가능 

ㄴ단순한 값을 결정하는 경우 삼항연산자를 이용하는 것이 좋고, 복잡한 여러줄의 문이라면 if...else문이 가독성에 좋음 

if(조건식){
//조건식이 참이면 실행
} else {
//조건식이 거짓이면 실행
}

let num = 1, kind;

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


//삼항연산자로 바꿔쓸수 있음 
num > 0 ? kind = '양수' : num < 0 ? kind = '음수' : kind = 0;
num ? (num > 0 ? '양수' : '음수') : 0 ; // 0은 falsy


let x = 1;
let result = x % 2 ? '홀수' : '짝수' ;

 

 

  - 2) switch문

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

ㄴswitch문의 표현식과 일치하는 case문이 없으면 default문으로 이동 (optional)

ㄴ스위치문의 표현식은 boolean보다는 문자열이나 숫자 값인 경우가 많음 (= 다양한 케이스 대응할 코드 블록 결정시 사용)

ㄴbreak 없이 작성하면 full through로 case를 통해 블록문이 실행된후 맨마지막까지 실행하여 default문이 재할당됨

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

let month = 1;
let monthName;
switch(month){
	case 1:
    monthName = '1월';
    break;
    
    case 2:
    monthName = '2월';
    break;
    
    case 3:
    monthName = '3월';
    break;              //브레이크 문이 없으면 default값이 할당될수 있음 (빠져나오지 못해서)
    
    default:
    monthName = 'Invalid';
    //마지막이라 break문 필요 없음
    
}

ㄴfull through문으로 작성하면 더 좋은 예시도 있음 (p.100)

 

 

 

3) 반복문 (loop statement)

ㄴ조건식의 평가 결과가 참인 경우 코드 블록을 실행 => 이후 조건식을 다시 평가하여, 여전히 참인경우 코드 블록을 다시 실행하고 조건식이 거짓이 될 때까지 반복됨 

ㄴfor문, while문, do...while문

ㄴ반복문 대체 할 수 있는 매서드 : 배열순회 forEach문 / 객체 프로퍼티 열거 for ... in문 / 이터러블 순회 for ... of문

 

  - 1) for문

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

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

for(let i = 0 ; i < 2 ; i++){ 
console.log(i)
}
//변수 선언문 실행 - 조건식 실행
//0 
//증감식 실행 - 조건식 실행 
//1
//증감식 실행 - 조건식 실행 (변수 i가 2로 false) - for문 종료

 

 

  - 2) while문

ㄴ주어진 조건식의 평가결과가 참이면 코드블록을 반복 실행 / 평가결과가 거짓되면 코드 블록 실행하지 않고 종료됨 

ㄴfor문은 반복횟수가 명확할때, while문은 반복 횟수가 명확하지 않을 때 사용함 

ㄴ무한루프 탈출할수 있는 조건문 잘써서 렉안나게 주의  

let count = 0;
while(count < 3) { // 변수 count가 3보다 작을 때까지 블록 반복실행
	console.log(count);
	count++;
}

while(true){
	console.log(count);
	count++;
    if(count === 3) break; //count가 3이면 탈출 
}

 

 

  - 3) do ... while문

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

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

let count = 0 ;

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

 

 4) break문

ㄴ레이블문, 반복문(for/ for...in / for...of / while / do...while)또는 switch문의 코드 블록을 탈출 <=이외 블록에 break문 사용하면 에러

ㄴ 레이블문? 프로그램의 실행 순서를 제어하는 데 사용 (switch문의 case와 default도 레이블 문)

 

 

5) continue문

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

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

let str = 'Hello World';
let search = 'l';
let count = 0;

//문자열은 유사 배열으로 for문으로 순회할 수 있음
for (let i = 0 ; i < string.length ; i++) {
	if(str[i] !== search) continue; //'l'이 아니면 현 지점에서 continuet실행안되고 반복문의 증감식으로 이동
    count++;  // continue문이 실행되면 이 문은 실행되지 않는다. 
  }
  
  console.log(count);  // 3
  
// continue문 사용했을 때보다 가독성 좋음
for(let i = 0 ; i < string.length ; i++) {
	if (str[i] === search) count++;
   }  
   
//String.prototype.match 메서드를 사용해도 동일한 동작함 
const reg = new RegExp(search, 'g');
console.log(str.match(reg).length); // 3