JavaScript 입문 : switch ~ case 문

본 내용은 제로초 TV의 자바스크립트 강좌와 MDN Mozilla를 기본으로 하고 있습니다. 

 

▒ switch ~ case 문

 

지난 시간 까지는 프로그래밍이라는 개념을 배울때 나름 첫 항목에 자리잡고 있는 if  조건문에 대해 정리를 해 보았습니다.  if 조건문의 변형식이자 간편식으로 사용되고 있는 switch 문에 대해 이해를 해 보도록 하겠습니다. 

 

크게는 switch의 영어의 뜻을 보면 바꾼다라는 개념이고 case라는 단어까지 있는 것으로 봐서 case별로 조건이 맞으면 결과값을 나타낸다라고 추측을 하고 가도록 하겠습니다. 

 

---

 

1. 기본구문 

기본 구문은 다음과 같이 쓰여집니다. 

 

switch (조건식 or 변수값) {

  case 해당되는 조건식 or 변수값 : 동작이 일어나는 문 ; 

}

 

중요한 점은 case 다음에 일어나는 동작문을 연결하는 기호는 콜론 (:) 입니다. 세미콜론을 잘못 사용했다가 에러의 늪에 빠졌습니다. 

 

사과를 나타내는 예문을 만들어 보겠습니다. 

 

---

 

2. case별 구문 

 

제가 생각하기에 switch ~ case를 사용하는 이유는 if 문의 간소화를 나타낼 수 있을 수 있을것 같습니다. 즉, case 별로 동작문에 따르는 코딩이 필요할 때 사용이 가능할 것으로 보여집니다. 

 

그럼 다음과 같이 여러 동작문을 case에 적용하는 예를 들도록 하겠습니다. Apple, Banana, Mango를 case별로 나누고 어떤 결과가 나오는지 확인해 보겠습니다. 

 

 

위 결과를 보면 변수값이 apple 로 되어 있고 첫번째 case가 apple이므로 Apple, Banana, Mango가 전부 출력이 되었습니다. switch문의 특성은 제약이 없으면 첫번째 case 동작이 실행이 true로 진행이 되면 위에서 아래로 case의 모든 값이 동작하여 출력됩니다.   

이를 방지하기 위하여 break; 문을 사용합니다. 다음을 참조하세요.

 

 

---

☞ 들여쓰기, callback 지옥

기본적으로 코딩을 할 때 가독성을 위하여 들여쓰기를 지키라고 합니다. 기본은 예전의 원고지에 문장을 쓰는 것 처럼 줄바꿀때 들여쓰기 하는 개념으로 보면 되는데 (자바스크립트에서는 줄 바꿈시 보통 2칸 들여쓰기) 이를 지키다 보면 다음 그림과 같이 아름답지 못한 코딩이 된다고 합니다. 

그러한 경우가 함수를 사용할 경우 구문들이 호출되어 연결되는 프로그래밍을 전부 표현해야 하는데 이를  callback이라 하며 이러한 코딩이 무거워질 때 들여쓰기를 지켜야되서 개발자들은 callback 지옥 (또는 개미지옥)에 빠졌다고 하는군요.

출처: 구글

저는 그래서 제 나름대로 띄어쓰기와 코딩 모양을 고민하면서 깔끔하게 노력하고자 비록 초보이지만 여러가지 고민을 하면서 진행하고자 합니다. (아직 답을 완벽히 찾지는 못했습니다. )

---

 

3. break와 default

 

switch ~ case 문에서 case에 없는 경우를 고려하여야 합니다. 이를 위한 구문은 default입니다. if문의 else로 보면 될 것 같습니다. 

다음 예문을 보시죠.

 

 

다음 시간에 switch문을 한번 더 보고 다음 과정으로 넘어 가겠습니다.