조건문

조건 분기에 따라 다른 state를 실행

if

if(...) 문은 괄호 안에 있는 조건을 평가하고, 그 결과가 참(true)이면 블록이 실행된다.

if(condition){
  state
}


//예제
let i = 20; 
if(i === 20){
	console.log('숫자는 20입니다.')
}

 

state가 단일이라면 생략 가능하나, 코드 가독성을 높이기 위해서는 블록 사용을 추천을 한다고 한다. 

 

if ... else

if 문에 else를 통해 다른 분기를 처리할 수 있다. if문이 참이 되지 않고 거짓일 때 실행된다.

let i = 25; 
if(i === 20){
	console.log('숫자는 20입니다.');
} else {
	console.log('숫자가 20이 아닙니다.');
}

if ... else if ... else

if else에서 조건이 여러개 일 경우 처리하는 방법

let i = 23; 
if(i === 20){
	console.log('숫자는 20입니다.');
} else if (i === 23) {
	console.log('숫자가 23이 입니다.');
} else {
	console.log('숫자가 20이 아닙니다.');
}

switch

switch 또한 여러 값으로 평가할 수 있는 표현식으로 if else를 switch로도 바꾸어서 사용할 수 있다.

switch(expression){
  case 'value1':
  //state
  [break;]
    
  case 'value2':
  //state
  [break;]
    
  ...
    
  default: 
  //state
  [break;]
}

expression을 평가하고 일치하는 case를 찾아서 break, return, continue, thorw를 만나거나 switch 문이 끝날 때까지 실행한다.

switch(2){
  case 1: 
  console.log('1입니다.');
  break;
    
  case 2: 
  console.log('2입니다.');
    
  case 3: 
  console.log('3입니다.');
  break;
    
  case 4: 
  console.log('5입니다.');
  break;
    
  case 5: 
  console.log('5입니다.');
  break;
    
  default:
  console.log('1~5가 아닙니다.');
}

// 2입니다.
// 3입니다.

break;가 없는 경우, case2, 3번이 실행된 후 만나는 break;에서 종료된다.

 

삼항 연산자

변수에 조건에 따라 다른 값을 넣을 때 사용

let result = condition ? value1 : value2;

//예제
let a = 5;
let text = a === 5 ? '5입니다.' : '5가 아닙니다.';

//"5입니다."

condition이 참일 때 value1, 거짓일 때 value2가 result 변수에 할당된다.

삼항 연산자를 중첩해서 사용 가능하나, 가독성 좋지 않아 보인다.

let result = condition1 ? value1 : condition2 ? value2 : value3;

역시 잘 맞춰서 사용을 하자