[1일1js] 코드에서 결정하기 — 조건부

Lee Tae-Sung·2021년 7월 22일

JavaScript js

JS

목록 보기

15/56

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals

https://github.com/2taesung/JSOfficialDoc

코드에서 결정하기 — 조건부

한 조건으로 받을 수 있습니다..!

if...else 문

=> ㅋㅋㅋ 가장 일반적인 유형의 조건문인 겸손한 if...else 문 ㅋ

마지막으로 if...else다음과 같은 속기 스타일로 중괄호 없이 작성된 문장을 볼 수 있습니다 .
=> 노 권장, 가독성이 떨어진다. 이런 코드를 보면 멈칫하게 된다.

비교 연산자에 대한 참고 사항

중첩 if ... else

논리 연산자: AND, OR 및 NOT

=> 어제 알고리즘 공부하다가 배웠는데 참고로

||

or에 해당하는 이 연산자는 앞의 조건이 true가 되면 뒤의 조건을 보지 않고 진행된다.

이를 통해 코드를 짤 수도 있긴 하다
근데 좋은 코드는 아니다.

흔히 하는 실수

=> 나도 처음에 뭔 잘못이 있었나 뚤어지게 쳐다봄.

if (x === 5 || 7 || 10 || 20) {
  // run my code
}

=> 해당 코드는 x가 5이거나 7이 참이거나 10이 참이거나 20이 참이거나

7이라는 숫자는 항상 참이니까 항상 해당 조건문은 참이 된다.

switch 문

보통 if else 조건문은 변수를 특정 값으로 설정하거나 조건에 따라 특정 명령문을 인쇄하려는 경우, 특히 선택 항목이 많은 경우 구문이 다소 번거로울 수 있습니다.

=> 괄호에 괄호 일명 콜백이 많이 발생하기도 한다.

        if (choice === 'sunny') {
            para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
        } else if (choice === 'rainy') {
            para.textContent = 'Rain is falling outside; take a rain coat and an umbrella, and don\'t stay out for too long.';
        } else if (choice === 'snowing') {
            para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
        } else if (choice === 'overcast') {
            para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
        } else {
            para.textContent = '';
        }
        }

        switch (choice) {
            case 'sunny':
                para.textContent = '해가 뜨었어용'
                break
            case 'rainy':
                para.textContent = '비가 뜨었어용'
                break
            case 'snowing':
                para.textContent = '눈이 뜨었어용'
                break
            default:
                para.textContent = "하핫"
            }
        }

=> 하나의 중괄호에 들어가면서 확실히 보기 편해지고 직관적으로 바꼈다는 것을 알 수 있다. default는 무조건 발생이 아니라 else와 같은 느낌. 위의 조건들에 아무것도 걸리지 않았을때 발생한다.

삼항 연산자

=> if...else 구조의 true/false로 선택되는 두 가지 선택 사항만 존재하는 경우

=> 다음과 같이 한 줄로 간단히 쓸 수 있다.

=> +수정) 점심 먹으면서 홍선이랑 얘기하면서 알게된 사실 삼항 연산자를 쓰는 이유는 가독성을 위해(난 반대로 삼항 연산자가 가독성을 해친다고 생각했는데 그건 내가 아직 익숙하지 않아서였다) 그리고 자바스크립트의 삼항 연산자는 다른 언어들의 삼항 연산자와 다르게 작동한다고 함(You don't know JS에 나온다고)

let greeting = ( isBirthday ) ? 'Happy birthday Mrs. Smith — we hope you have a great day!' : 'Good morning Mrs. Smith.';

const select = document.querySelector('select');
const html = document.querySelector('html');
document.body.style.padding = '10px';

function update(bgColor, textColor) {
  html.style.backgroundColor = bgColor;
  html.style.color = textColor;
}

select.onchange = function() {
  ( select.value === 'black' ) ? update('black','white') : update('white','black');
}