JavaScript 04 조건문 (Conditionals)

if조건문

• 조건에 따라서 코드를 실행하거나 실행하지 않을 때 사용하는 구문
• 여기서 조건은 불 자료형
• ( )소괄호 안의 조건이 true면 { }중괄호 안의 문장을 실행하고, false면 문장을 무시하고 else절 실행

if(불 값이 나오는 표현식) {
   불 값이 참일 때 실행할 문장
} else {
   불 값이 거짓일 때 실행할 문장
}

• 복수 조건은 else if로 처리, 여러 개 가능

function isOkayToDrive(who) {
  if (who === 'son'){
    return 'Nope!'
  }
  else if (who === 'dad'){
    return 'Good!'
  }
  else if (who === 'grand father'){
    return 'Be careful!'
  }
  else {
    return "Who are you?"
  }
}

console.log(isOkayToDrive('dad'))

switch 조건문 ✍🏼

조건부 연산자(conditional operator)

기본문법

let result = condition ? valueIfTrue : valueIfFalse

• 조건이 true면 valueIfTrue를, false면 valueIfFalse를 반환
• JavaScript에서 항 3개를 갖는 연산자는 조건부 연산자가 유일해서 삼항 연산자(ternary operator)라고 부르기도 한다(=물음표 연산자)

let accessAllowed = (age > 18) ? true : false;

• (age > 18)의 괄호는 생략 가능하지만 가독성을 위해 권장
• 비교연산자 > 먼저 실행되고 우선순위가 낮은 물음표 연산자 ? 실행

다중 물음표 연산자

let age = prompt('나이를 입력해주세요.', 18);

let message = (age < 3) ? '아기야 안녕?' :
  (age < 18) ? '안녕!' :
  (age < 100) ? '환영합니다!' :
  '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';

alert( message );

• 첫 번째 물음표에선 조건문 age < 3을 검사합니다.
• 그 결과가 참이면 '아기야 안녕?'를 반환합니다. 그렇지 않다면 첫 번째 콜론 ":"에 이어지는 조건문 age < 18을 검사합니다.
• 그 결과가 참이면 '안녕!'를 반환합니다. 그렇지 않다면 다음 콜론 ":"에 이어지는 조건문 age < 100을 검사합니다.
• 그 결과가 참이면 '환영합니다!'를 반환합니다. 그렇지 않다면 마지막 콜론 ":" 이후의 표현식인 '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!'를 반환합니다.

출처 : https://ko.javascript.info/ifelse

결론

삼항연산자를 사용하면 코드가 간결해지기 때문에 단순한 조건 비교 후 결과값만을 취하는 로직이라면 더 효율적일 수 있으나, 조건에 따라 2개 이상의 결과값이나 추가적인 로직이 필요한 경우에는 사용하기 어렵다. 또한, 삼항 연산자를 남발하다보면 가독성도 좋지 않고 추후 유지보수가 어려울 수도 있기 때문에 꼭 필요한 곳에 사용하자.