1주차의 스터디 주제는 자바스크립트 기본이다.
자바스크립트의 기본 문법에 대해 살펴보면서 기초를 단단히 하는 것이 목표이다.
내 파트인 switch문, 함수/함수 표현식, 화살표 함수 기본에 대해 알아보고자 한다.

✨ switch문

특정 변수에 대해 다양한 상황에서 비교하기 위해 사용되는 조건문이다.
복수의 if 조건문으로 코드가 복잡해진 상황에 사용된다.

문법

하나 이상의 case문으로 구성되며, defalut는 선택이다.

function caseFruits(fruit){
  let quantity;
  switch(fruit){
    case "apple":
      quantity = 1;

    case "orange":
      quantity = 2;

    case "banana":
      quantity = 3;

    default:
      quantity = 0;
  }
  return quantity;
}
console.log(caseFruits("apple"));		// 0
console.log(caseFruits("orange"));		// 0
console.log(caseFruits("banana"));		// 0
console.log(caseFruits());				// 0

함수의 인자 유무에 관계없이 default문이 들어가 있기에 오류를 방지시켰다.
하지만, break문이 사용되지 않았기에 quantity값이 모두 0으로 대입된다.

break문을 사용하면, switch문이 끝나면 코드 실행이 멈춘다.

function caseFruits(fruit){
  let quantity;
  switch(fruit){
    case "apple":
      quantity = 1;
      break;

    case "orange":
      quantity = 2;
      break;
    
    case "banana":
      quantity = 3;
      break;

    default:
      quantity = 0;
      break;
      
  }
  return quantity;
}
console.log(caseFruits("apple"));		// 1
console.log(caseFruits("orange"));		// 2
console.log(caseFruits("banana"));		// 3
console.log(caseFruits());				// 0

처음 예제 코드에 break문을 case별로 추가하였다. 그 결과 각각의 case에 대해 quantity값이 다르게 출력됨을 확인하였다.

위의 코드를 if / else if문으로 나타내면 다음과 같다.👇

function caseFruits(fruit){
  let quantity;
  
  if(fruit === "apple")  quantity = 1;
  else if (fruit === "orange") quantity = 2;
  else if (fruit === "banana") quantity = 3;
  else quantity = 0;
  
  return quantity;
}

switch문을 사용하는 것이 더 간편할 수도 있다.

코드가 같은 여러 개의 case를 묶을 수도 있다.

function caseFruits(fruit){
  let quantity;
  switch(fruit){
    case "apple":
    case "orange":
      quantity = 1;
      break;
    
    case "banana":
    default:
      quantity = 3;
      break;
      
  }
  return quantity;
}
console.log(caseFruits("apple"));		// 1
console.log(caseFruits("orange"));		// 1
console.log(caseFruits("banana"));		// 3
console.log(caseFruits());				// 3

중복되는 case를 여러 개로 묶었더니 apple, orange를 인자로 받으면 1을 출력하고, banana나 인자가 없을 경우에는 3을 출력하게끔 유도하였다.

❗️ switch문은 일치 / 비교로 조건을 판단하기 때문에 자료형을 신경써서 작성하는 것이 중요하다.

🌈 결론

if문 깊이가 길어질 경우, switch문을 사용하는 것이 용이하다. 다만, 자료형과 break문, default문을 정확하게 사용하는 것에 주의하는 것이 필요할 듯 하다.

📚 학습할 때, 참고한 자료 📚

• 2.14 - switch문
• [JavaScript] Switch 조건문 사용하기