자바스크립트 Switch문 사용

switch문은 if문과 같은 기능을 가지고 있다. 하지만 조건값이 여러개일 경우 switch문을 사용하는게 가독성면에서 더 유리하다.

 

switch문 연습.

 

let fruit = 'banana';

 

fruit이라는 변수가 있다 그 안에 banana라는 데이터가 들어가있다.

 

이때 fruit변수에 과일이름이 데이터값으로 들어가면 그 데이터값 (과일이름)의 색상을 표시하고 싶다.

 

switch(fruit){
    case 'banana':
        console.log('yellow')
    break;
    case '참외':
        console.log('yellow')
    break;
    case 'apple':
        console.log('red')
    break;
    case 'kiwi':
        console.log('green')
    break;
    case 'watermelon':
        console.log('red')
    break;
    case 'grape':
        console.log('purple')
    break;
}

 

switch 문에서는 case와 break 를 사용한다.

 

case뒤에는 과일 이름을 넣고(조건) 걸리면 취할 액션을 작성해준뒤 break로 구문을 끝낸다.

 

이렇게 설정하고 fruit 값에 과일이름을 넣으면 콘솔로 내가 설정해둔 값이 찍힌다.

 

 

이걸 if문으로 작성해보면

 

if(fruit == 'banana' || fruit == '참외'){
    console.log('yellow');
}  else if(fruit == 'apple'){
    console.log('red');
} else if(fruit == 'kiwi' || fruit == 'watermelon'){
    console.log('green');
} else if(fruit == 'grape'){
    console.log('purple');
}

 

이렇게 되는데 조건을 확인할때 switch문의 가독성이 더 좋은 걸 확인할 수 있다.

 

 

 

여기서 조건에 걸리면 break로 switch문을 종료해줬는데 break를 쓰지 않으면 계속 진행 되기 때문에 같은 값이 나오는 과일들(참외 바나나 & 사과 수박)은 함께 묵어줄 수 있다. 

 

 

switch(fruit){
    case 'banana':
    case '참외':
        console.log('yellow')
    break;
    case 'apple':
    case 'watermelon':
        console.log('red')
    break;
    case 'kiwi':
        console.log('green')
    break;
    case 'grape':
        console.log('purple')
    break;

 

결과값은 위와 같지만 코드가 더 짧아지고 가독성도 좋은걸 볼 수 있다.

 

 

그리고 이때 fruit에 설정되지 않은 과일을 넣는다면 해당 값이 없다는 메세지를 보여주고 싶다.

 

그럴때 default 를 사용한다.

 

switch(fruit){
    case 'banana':
    case '참외':
        console.log('yellow')
    break;
    case 'apple':
        console.log('red')
    break;
    case 'kiwi':
    case 'watermelon':
        console.log('green')
    break;
    case 'grape':
        console.log('purple')
    break;
    default:
        console.log('해당되지 않는 과일입니다.')
    break;
}

 

switch문 맨 끝에 default값을 설정해 줌으로써 case로 설정해주지 않은 부분에 대한 설정을 해준다.

 

fruit에 설정되지 않은 값이 들어갈 때는 '해당되지 않는 과일입니다.' 라는 메세지가 찍힌다.

 

 

 

 

직접 사용해보자

 

API로 카카오 로그인 연결 중에 user info를 화면에 뿌려줄때 사용해 봤다.

 

app.get('/auth/info',authMiddleware,(req,res)=>{

    const {authData} = req.session;
    const provider = Object.keys(req.session.authData)[0];
    console.log(provider);
    switch(provider){
        case 'kakao':
            userinfo = {
                userid:authData[provider].properties.nickname,
                userimage:authData[provider].properties.profile_image,
            }
    }
    console.log(authData)
    res.render('info',{
        userinfo,
    })
})

 

provider에서 kakao라는 case를 만났을때 userinfo를 설정해주는 내용이다.

 

 

이때 switch문을 쓰지 않는다면 

 

    let {nickname,profile_image} = req.session.kakao.properties 
    res.render('./info.html',{
        nickname,
        profile_image
    })

 

이렇게 설정해 줘야 한다.