23/10/12 TIL _ switch / break / continue

ㅋ

 

 

 

오늘은 javaScript 문법 강의를 들었다. 

헷갈렸던 부분을 다시 되집기에 정말 좋았는데,  

그동안 잘 사용하지 않았던 switch문에 대해 적어보려고 한다.

 

if문과 비슷하게 조건에 해당하는 결과를 지정해 줄 수 있지만,

좀더 직관적이라고 느껴졌다. 

 

일단 아래의 예시를 살펴보자.

 

🚗  switch

 

switch문은 해당 값이 이런 경우~ 이렇게 해주고 멈춰줘~ 

이렇게 사용된다.

 

배열의 요소들을 forEach문 이용해서 반복시키며 switch문을 사용해 보겠다.

배열에 담긴 값이기 때문에, 앞에 요소부터 순서대로 돌아간다. 

 

❓break를 사용하지 않을 경우  ➡️    계속 아래로 흘러서 해당하는 경우 이후의 모든 경우가 출력된다.

let na = ["김", "박", "김", "선우", "남궁"];

na.forEach((e) => {
  switch (e) {
    case "박":
      console.log("박씨");
    case "김":
      console.log("김씨");
    case "서":
      console.log("서씨");
  }
});

//콘솔값
김씨
서씨
박씨
김씨
서씨
김씨
서씨

 

• 결과를 살펴보면, 첫 출력값이 김씨인 것을 볼 수 있다. 조건에 해당하는 경우에 출력을 한다는게 증명이 된다.
• 또한 break를 쓰지 않았기 때문에, 조건에 해당하고도 그 이후에 계속 다음 조건에 해당하는 것처럼 값이 출력된다. 

 

 

❓default 값이 존재하는 경우  ➡️   case에 걸려있는 어떤 것에도 해당하지 않는 경우 default 에 지정된 값을 출력한다.  

let na = ["김", "박", "김", "선우", "남궁"];

na.forEach((e) => {
  switch (e) {
    case "박":
      console.log("박씨");
    case "김":
      console.log("김씨");
    case "서":
      console.log("서씨");

    default:
      console.log("두글자 성임");
  }
});


//콘솔값
김씨
서씨
두글자 성임
박씨
김씨
서씨
두글자 성임
김씨
서씨
두글자 성임
두글자 성임
두글자 성임

 

 

 

 

❓break가 있는 경우  ➡️    조건에 해당하게 된다면 그 즉시 {}를 빠져나온다.

let na = ["김", "박", "서", "선우", "남궁"];

na.forEach((e) => {
  switch (e) {
    case "박":
      console.log("박씨");
      break;
    case "김":
      console.log("김씨");
      break;
    case "서":
      console.log("서씨");
      break;
    default:
      console.log("두글자 성임");
  }
});


//콘솔값 
//김씨
//박씨
//서씨
//두글자 성임
//두글자 성임

 

 

• break가 작동하게 되면 자신을 직접적으로 가지고있는 {} 만 빠져나온다. 
• 만약 forEach 문이 없고, switch문만 존재했다면, 한번이라도 조건이 해당하는 경우, 동작을 멈추게 된다. 

 

 

🧐 if문 / switch문  차이점

if문	switch문
switch보다는 가독성이 떨어진다.	가독성이 좋다
조건에 해당할때 까지 순차적으로 계속 실행한다.	조건에 해당하는 요소로 바로 가서 결과값을 출력한다.

 

 

참고 블로그

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

[JaveScript] Switch와 If의 비교

 

 

 

 

 

그 외에 잘 몰랐던 부분들 다시 리마인드

 

문자열 결합하기 .concat()

//문자열 결합하기 str1.concat(str2)
let str2 = "hello";
let str1 = "f";
console.log(str1.concat(str2));  //fhello

 

문자열 검색하기 .search('검색할 문자')

let str3 = 'hello'
//문자열 검색
console.log(str3.search("o")); //해당 문자열이 처음으로 위치하는 인덱스

 

문자열과 Number 타입의 데이터 형변환.

//형변환

//(더하기 연산자의 경우 __ 문자열이 우선시 됨)
let result = "1" + true;
console.log(result); //1true  __ 문자열로 형변환

//(더하기 연산자가 아닌 경우 __ 숫자가 우선시 됨.) //빼기, 곱하기, 나누기 
let result2 = 1 - "2";
console.log(result2); //-1 __ Number 타입으로 형변화

//let result4 = "3" * "2";   //6

let result3 = "j" * "2";
console.log(result3); //Nan