[JS] if문과 switch문

리액트에서 간간이 사용되는 switch문.

기능은 if문과 비슷해보이는데 자주 써본적이 없어서 둘의 차이가 궁금해졌다.

 

알고있던 내용

 

📍if문

형태 :

if(조건) {
로직1
} else {로직2
};

설명 : if문의 조건이 참일 때 로직1이 실행되고 거짓일 때 로직2가 실행된다.

로직에는 변수 선언, 함수, 삼항연산자 등 다양한 값이 들어갈 수 있다.

 

 

📍switch문

형태 :

switch (요소) {
   case "a"
      return "a-1"
    break;
  case "b"
      return "b-1"
   default :
      return "c-1"
};

설명 : 인풋으로 들어온 요소의 값이 a라면 a-1을, b라면 b-1을, 그 무엇도 아니라면 c-1을(default의 값) 반환한다.

break를 만나면 그 즉시 로직이 종료되며 이후 로직은 실행되지 않는다. break가 없으면 모두 실행된다.

case와 return에는 같은 타입의 값만 올 수 있다.

(? 정확하진 않지만 헷갈리는 부분)

 

 

 

실제 내용

 

📍switch문

const findName = (name: string) => {
	switch(name) {
      case "철수":
        console.log("철수는 뚝뚝이입니다.")
        break;
      case "영희":
        console.log("영희는 똑똑이입니다.")
        break;
      default:
        console.log("모두 똑뚝이입니다.")
    }
}

위의 예제에서 name이라는 매개변수가 비교할 값이 되며

'철수', '영희'가 조건값 console.log는 동작하는 문장이 된다.

+ case 에는 : 를 꼭 붙이기

 

출력값 :

findName("철수") // "철수는 뚝뚝이입니다."

 

만약 break를 쓰지 않는다면 모든 case가 실행이 된다.

findName("철수")
// 철수는 뚝뚝이입니다. 영희는 똑똑이입니다. 모두 똑뚝이입니다.

 

[특징]

• jump-table을 사용하여 한 번에 원하는 조건에 이동이 가능(단 한 번의 평가)
• 여러 개의 경우를 동시에 검사할 수 있으며, 각 case 문은 서로 중복되지 않아야 함.
• 각 case 문의 마지막에는 break; 문을 사용하여 해당 case 문의 실행을 중단
• default 문은 선택사항

[장점]

• 가독성
• 비교적 좁은 범위(특정한 값)에서 사용
• 유지보수 측면에서 관리 유용 (각각의 경우를 명확하게 정의)
• 일반적으로 성능이 좋아 실행 속도 향상

[단점]

• 일반적으로 값의 동일 여부를 검사
  따라서 복잡한 조건을 처리하는 데에 부적합
• 길이가 길어질 경우에 가독성이 감소
• 동일한 코드의 반복

 

 

📍if문

위의 예제를 if문으로 바꾼다면 다음과 같다.

const findName = (name: string) => {
	if(name === '철수') console.log("철수는 뚝뚝이입니다.")
    else if(name === '영희') console.log("영희는 똑똑이입니다.")
    else console.log("모두 똑뚝이입니다.")
}

 

[특징]

• 원하는 조건이 나올 때까지 순차적으로 모든 경우의 수를 하나씩 비교
• 참과 거짓에 따라 조건을 판별
• 정확한 조건과 모든 경우를 고려

[장점]

• 특정 조건에 따라 다르게 동작할 수 있어 유연하고 다양한 상황에 대응 가능
• 프로그램의 흐름 제어
• 여러 개의 조건을 동시에 검사
• 다양한 조건을 순차적으로 검사
• 복잡한 상황에 대응 가능

[단점]

• 가독성이 떨어짐
• 유지보수에 비교적 어려움
• 오류가 발생하기 쉬움

 

📍switch문과 if문, 언제 사용하면 좋을까?

• if문
  • 개별적인 조건을 처리해야 하거나 범위를 비교할 때
  • 복잡한 조건이 필요한 경우
  • 다양한 조건을 조합하여 처리해야 하는 경우
• switch문
  • 값의 일치 여부에 따라 분기 처리할 때
  • 여러 경우의 수를 명확하게 처리할 때
  • 간결하고 명확한 분기 처리가 필요한 경우

---

참고 : https://velog.io/@ahsy92/JaveScript-Switch-If

 

https://programmingdev.com/c-if%EB%AC%B8%EA%B3%BC-switch%EB%AC%B8%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%99%80-%EC%96%B8%EC%A0%9C-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%95%BC%ED%95%98%EB%8A%94%EC%A7%80%EC%9E%A5%EC%A0%90-%EB%8B%A8%EC%A0%90/#i-7