Javascript Switch 문

목차

1. Swich 문

---

1. Switch 문

 

if 조건문은 switch 문으로 바꿀 수 있다.

 

switch문을 사용한 비교법은 특정 변수를 다양한 상황에서 비교할 수 있게 해준다.

 

swich 문의 장점은 비교 상황을 잘 설명해준다.

 

문법(Syntax)

switch(변수) {
  case '값':  // if (변수 === '값')
    ... // 코드 본문
    [break]

  case '값':  // if (변수 === '값')
    ... // 코드 본문
    [break]

  default:
    ... // 코드 본문
    [break]
}

- 하나 이상의 case문으로 구성된다.
- default는 써도되고 안써도된다.

 

작동원리

1. 변수와 값을 일치하는지 비교한다.
2. 해당 case에서 일치하는 경우 코드 본문을 실행한다. break문을 만나면 코드 실행을 멈춘다.
3. 일치하는 case가 없었다면 맨 아래의 default 본문을 실행한다.( default가 있을 경우에만)

 

※ 주의할 점

 

일치여부( = )를 판별해 주기 때문에 데이터 타입이 중요하게 작용한다.

Number와 String을 육안으로 구분이 안되지만 컴퓨터 입장에서는 다르므로 주의해야한다. 

 

예시(Sample)

switch (e.target.className) {
        case "comment-delete-btn":
            const flag = confirm("삭제 하시겠습니까?")
            if (!flag) return

            state.splice(index, 1) // D
            drawing()

            break
        case "comment-update-btn":
            state[index].updated = !state[index].updated
            const content = e.target.innerHTML
            contentNode.innerHTML = ""
            const item = getBox(state[index].updated, content)
            contentNode.append(item)
            
            break
    }

 

위의 코드가 복잡해 보일수도 있지만, 간단하게 해석이 가능하다.

 

코드가 어떻게 기능하는지 보지말고, 진행방향만 보도록하자.

 

1. switch문의 변수는 e.target.className 이다.
2. 변수를 첫번째 case인 "comment-delete-btn"과 비교한다. if ( e.target.className = "comment-delete-btn" )
3. 일치할 경우 본문을 실행하고 break를 만나 switch문을 종료시킨다, 아닐 경우에 다음 case문으로 넘어간다.
   1. 다음 case문으로 넘어간 경우, "comment-update-btn"과 비교한다.
   2. 일치할 경우 본문을 실행하고 break 만나 종료한다.

생각보다 단순한 동작을 하는 코드이다.

 

---

여러가지 case문 한번에 묶기

 

    switch (e.target.className) {
    	case "comment-btn":
        case "comment-delete-btn":
            const flag = confirm("삭제 할꺼야?~")
            if (!flag) return

            state.splice(index, 1) // D
            drawing()

            break
        case "comment-update-btn":
            state[index].updated = !state[index].updated
            const content = e.target.innerHTML
            contentNode.innerHTML = ""
            const item = getBox(state[index].updated, content)
            contentNode.append(item)
            break
    }

위의 경우, switch문 첫번째 코드에 case가 있으나 본문이 없다.

 

이 경우에는 "comment-btn"일 경우 "comment-delete-btn"을 실행한다.

 

그 이유는 첫번째 case문에 break가 없기 때문에 다음 case를 실행하기 때문이다. 

 

 

---

참고자료
https://ko.javascript.info/switch