JavaScript study :: switch문

👉(비록 남의 코드 따라하기지만)테트리스 만들기 대성공했던 포스팅👈

JavaScript study :: 테트리스 만들기(유튜버 데브리님👍)

 

나와 같은 초보자들은 다들 경험이 한 두번 씩 있을거다.. 유튜브 보고 똑같이 따라쳤는데 ? 왜지? 내껀 실행이 안된다..?

그래서 어떤 프로젝트를 시작하든, 따라하든 나의 목표는 단 하나

코드의 제공자와 똑같이 따라쳐서 기능이 구현되게만 하자! 위의 테트리스 만들기 프로젝트도 동일했다.

당연히 중간에 또 코드가 실행이 안되서 한참을 뻘짓했지만 ㅋㅋㅋㅋ 남의 코드를 그대로 보고 따라 치는 것도 상당히 어려운일이다.

똑같이 따라칠 때도, 몇 번 줄에 몇 번 들여써야 하는지 아는 게 핵심 포인트기 때문!!

그리고 코드를 따라 치다보면 이 코드는 무슨 뜻이지.. 하고 자연스레 궁금해지게 된다.

이번 포스팅의 주제는 switch문. 테트리스 만들기 할때도 등장했던 코드였다.

따라 칠 때는 무슨 뜻인지 몰랐지만, 이번 기회에 정리하면서 아래의 코드가 어떤 의미로 쓴 건지 정리해보는 시간을 갖도록 하겠다.

---

Switch문

- Switch(조건) => '조건'의 값이 아래의 case문에 해당되는 값일 경우, 해당되는 로그문이 실행된다.

- 조건이 맞는 case문을 실행하고, 아래의 조건들도 계속 비교한다.

let fruit = prompt("무슨 과일을 사고 싶나요?");

switch(fruit){
  case '사과' :
    console.log('4000원 입니다.')
  case '한라봉' :
    console.log('15000원 입니다.')
  case '딸기' :
    console.log('10000원 입니다.')
  case '바나나' :
    console.log('3800원 입니다.')
}

 

위와 같은 코드를 입력하면, 사용자에게 입력을 받을 수 있는 창이 뜬다. 한라봉을 입력했을 때 15000원입니다 라는 문장만 출력되면 좋은데, 아래에 적어둔 딸기와 바나나의 가격도 같이 출력이 된다. case는 if, else if, else 문과 달리 아래의 코드들도 같이 실행하기 때문이다. 그래서 한라봉의 가격만 출력하고 싶다면 break와 같이 사용해야한다.

 

break와 함께 쓰는 Switch문

let fruit = prompt("무슨 과일을 사고 싶나요?");

switch(fruit){
  case '사과' :
    console.log('4000원 입니다.')
    break;
  case '한라봉' :
    console.log('15000원 입니다.')
    break;
  case '딸기' :
    console.log('10000원 입니다.')
    break;
  case '바나나' :
    console.log('3800원 입니다.')
    break;
}

 

이렇게 break문을 넣어주면, 딸기를 입력하면 딸기의 가격인 10000원만 출력이 되고, 한라봉을 입력하면 한라봉의 가격 15000원만 출력이 된다. 만약 사용자가 case에 적어두지 않은 과일을 입력했을 때, '없는 과일입니다' 라는 출력메세지를 띄우고 싶다면 어떻게 해야할까? 즉, else문과 같은 처리를 하기 위해서 말이다. 그럴때 swith문에서는 default를 사용하면 된다.

 

Switch문에서의 else처리는 default로

let fruit = prompt("무슨 과일을 사고 싶나요?");

switch(fruit){
  case '사과' :
    console.log('4000원 입니다.')
    break;
  case '한라봉' :
    console.log('15000원 입니다.')
    break;
  case '딸기' :
    console.log('10000원 입니다.')
    break;
  case '바나나' :
    console.log('3800원 입니다.')
    break;
  default :
    console.log('없는 과일입니다.')
}

 

그럼 이제 case에 해당되는 과일말고 다른 과일을 사용자가 입력하게 되면, default에 적어둔 로그가 실행이 된다.

이제 테트리스 만들기에서의 switch문을 다시 살펴보자.

 

위의 switch문에서는 e.keyCode가 조건이였다. 그리고 e.keyCode의 값이 39, 37, 40, 38, 32 일때 실행시키고 싶은 함수들을 break와 함께 적어줌으로써 하나의 함수만 실행되도록 했고, 그 외의 케이스가 들어올 경우에는 default문장을 적어줘서 해당 실행값을 처리하게끔 작성한 코드다. 

 

자바스크립트도 파이썬처럼 비교적 가독성이 좋은 프로그래밍 언어인 것 같다. 영어처럼 쭉 읽히니까 재밌다 자바스크립트😊

그 위의 정체불명의 코드들도 얼른 읽을 수 있는 순간이 오길 바라며, switch 포스팅 끝!

---

* 테트리스 프로젝트 : 데브리님 유튜브

* 자바스크립트 참고한 유튜브 강의 : 코딩앙마