JavaScript 기초 정리_7)제어문_모던 자바스크립트 Deep Dive

제어문

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

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

제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있음

 

코드의 실행 순서가 변경된다는 것은 코드의 흐름을 이해하기 어렵게 만들어 가독성을 해치는 단점이 있음.

8.1 블록문

블록문(block statement/ compound statement)는 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부름

자바스크립트는 블록문을 하나의 실행 단위로 취급

블록문은 단독으로 사용할 수도 있으나 일반적으로 제어문이나 함수를 정의할 때 사용

 

문의 끝에는 세미콜론을 붙임.하지만 블록문은 자체 종결성을 갖기 때문에 블록문의 끝에는 세미콜론을 붙이지 않음

//블록문
{
 var foo= 10;
  }
  
//제어문
var x=1;
if(x<10){
x++;
}

//함수 선언문
function sum(a,b){
return a+b;
}

8.2 조건문

조건문(conditional statement)은 주어진 조건식(conditional expression)의 평가 결과에 따라 코드 블록(블록문)의 실행을 결정.

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

 

8.2.1 if...else 문

if... else 문은 주어진 조건식(불리언 값으로 평가될 수 있는 표현식)의 평가 결과, 즉 논리적 참 또는 거짓에 따라 실행할 코드 블록을 결정한다. 조건식의 평가 결과가 true 일 경우 if 문의 코드 블록이 실행되고, false 일 경우 else 문의 코드 블록이 실행됨

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

if 문의 조건식은 불리언 값으로 평가되어야 함.

만일 if 문의 조건식이 불리언 값이 아닌 값으로 평가되면 자바스크립트 엔진에 의해 암묵적으로 불리언 값으로 강제 변환되어 실행할 코드 블록을 결정

조건식을 추가하여 조건에 따라 실행될 코드 블록을 늘리고 싶으면 else if 문을 사용

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

else if 문과 else 문은 옵션. 사용할수도 있고 사용하지 않을 수도 있음 

if문과 else 문은 2번 이상 사용할 수 없지만 else if 문은 여러 번 사용할 수 있음

var num =2;
var kind;

//if 문
if(num>0){
kind='양수';//음수를 구별할 수 없다
}
console.log(kind); // 양수

//if...else 문
if(num>0){
	kind='양수';
} else{
	kind='음수';//0은 음수가 아님
}
console.log(kind);//양수

//if ... else if 문
if(num>0){
	kind='양수';
    }else if(num<0){
    kind='음수';
    }else{
   	kind='영';
    }
    console.log(kind);//양수

 

만일 코드 블록 내의 문이 하나뿐이라면 중괄호를 생략할 수 있음

 var num=2;
 var kind;
 if(num>0) 			kind='양수';
 else if (num<0) 	kind='음수';
 else 				kind='영';
 
 console.log(kind); //양수

 

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

//x가 짝수이면 result 변수에 문자열 '짝수'를 할당하고, 홀수이면 문자열 '홀수'를 할당
var x=2;
var result;
if(x%2)	{//2%2는 0이다. 이때 0은 false로 암묵적 강제 변환됨.
 result='홀수';
	 } else	{
 	result='짝수';
     }
     
    console.log(result); //짝수

//삼항 조건 연산자

var x=2;
var result=x%2?'홀수':'짝수'; //0은 false 로 취급됨
console.log(result);//짝수

 

세 가지 조건일 경우 삼항 조건 연산자

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

console.log(kind);//양수

 

조건에 따라 단순히 값을 결정하여 변수에 할당하는 경우 if...else문보다 삼항 조건 연산자를 사용하는 편이 가독성이 좋음

하지만 조건에 따라 실행해야할 내용이 복잡하여 여러 줄의 문이 필요하면 if...else문을 사용하는 편이 가독성이 좋음