[javascript] if 와 switch 에 대해 알아보자

if 문 / switch 문

지정한 조건이 참인 경우 명령문을 실행한다.

조건이 거짓인 경우 또다른 else if 문이나 else 를 사용해 다른 명령문을 실행할 수 있다.

 

 

👉 test 값에 따른 명령문 실행

let test = 1;

if(test === 1){
  alert("1이 맞습니다")
} else if(test === 2){
  alert("2가 맞습니다")
} else {
  alert("1도 2도 아닙니다.")
}

 

 

👉 test 값에 따른 함수실행

let test = 1;

if(test === 1){
  test01(); //조건에 맞는 함수 실행
} else if(test === 2){
  test02(); //조건에 맞는 함수 실행
} else {
  another(); //조건에 맞는 함수 실행
}

// 함수선언
test01(){
	alert("01입니다")
}

test02(){
	alert("02입니다")
}

another(){
	alert("1도 2도 아닙니다")
}

 

실무를 접하다보면 무의미하게 if 문을 사용하는 경우가 있는데 가독성과 기능이 좋지 못하다. 코드리펙토링시에도 굉장히 까다로운 작업이 될 수 있다. 그래서 간단한 구문 통과는 switch를 이용한다.

 

 

👉 switch case 문 사용

let caseNum = 1;

switch (caseNum) {
  case 1 : {
  	alert('1이라는 숫자가 들어왔습니다.')
  	break; // 반드시 break로 멈춰주어야 한다.
  }
  case 2 : {
  	alert('1이라는 숫자가 들어왔습니다.')
  	break; // 반드시 break로 멈춰주어야 한다.
  }
  case 3 : {
  	alert('3이라는 숫자가 들어왔습니다.')
  	break; // 반드시 break로 멈춰주어야 한다.
  }
  default : {
  	alert('기본설정값입니다')
  	break;
  }
}

 

코드 줄은 좀 더 길게 느껴질 수 있으나. 가독성이 좋고 break로 여러분기 실행을 멈춰준다.(break로 멈춰주지 않으면 무의미하게 코드가 낭비되고 다음구절이 실행될 수 있다. 대부분의 프레임워크나 eslint에서 이같은 상황을 방지해주지만 미리 알고있는것이 좋다.) 코드 리펙토링시에도 매우 좋다. 간단한 테스트를 통해 익히고 싶다면 w3scools 참고하기

 

break 구문은 상황에 따라 다르게 사용해도 좋다.

 

JavaScript Switch Statement

 

👉 switch case 문 사용 (case 다수 적용)

let caseNum = 1;

switch (caseNum) {
  case 1 :
  case 2 :
  case 3 :{
  	alert('1,2,3이라는 숫자가 들어왔습니다.')
  	break; // 반드시 break로 멈춰주어야 한다.
  }
}