TIL#6 JS) Conditionals / Boolean Logic

luneah·2021년 10월 29일
0

JavaScript

목록 보기
6/16
post-thumbnail

조건문

01. if

조건에 따라 결과를 설정할 수 있다. if~else 절로 조건을 걸고 그에 따른 코드를 실행한다. else 절은 if 조건에 거짓결과가 나올 때 실행된다.

function checkAge(name, age) {
  if (age < 21) {
    return  ('Go home, ' + name + '!');
  }
  else {
    return ('Nice to meet you, ' + name + '!');
  }
}

checkAge('Amy', 27);   // --> Nice to meet you, Amy!

유사하지만 약간씩 차이가 있는 조건 여러 개를 처리해야 할 때가 있다. 이때는 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?"
  }
}

isOkayToDrive('Amy');  // --> Who are you?

02. 조건부 연산자 '?'

조건에 따라 다른 값을 변수에 할당해줘야 할 때가 있다. '물음표(question mark) 연산자’라고도 불리는 '조건부 연산자’를 사용하면 짧고 간결하게 변형할 수 있다.

조건부 연산자는 물음표?로 표시한다. 피연산자가 세 개이기 때문에 조건부 연산자를 '삼항(ternary) 연산자’라고 부르는 경우도 있다.

| 문법

let result = condition ? value1 : value2;

평가 대상인 condition이 truthy라면 value1이, 그렇지 않으면 value2가 반환됨.

다중 ‘?’

물음표 연산자를 여러 개 연결하면 else if와 같이 복수의 조건을 처리할 수 있다.

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

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

alert( message );

위 코드는 아래와 동일하게 동작한다.

if (age < 3) {
  message = '아기야 안녕?';
} else if (age < 18) {
  message = '안녕!';
} else if (age < 100) {
  message = '환영합니다!';
} else {
  message = '나이가 아닌 값을 입력 하셨군요!';
}

부적절한 '?'

물음표 연산자는 조건에 따라 반환 값을 달리하려는 목적으로 만들어졌다. 이런 목적에 부합하는 곳에 물음표를 사용해야 한다. (여러 분기를 만들어 처리할 때는 if를 사용)

'?' 사용

let company = prompt('자바스크립트는 어떤 회사가 만들었을까요?', '');

(company == 'Netscape') ?
   alert('정답입니다!') : alert('오답입니다!');

if 사용

let company = prompt('자바스크립트는 어떤 회사가 만들었을까요?', '');

if (company == 'Netscape') {
  alert('정답입니다!');
} else {
  alert('오답입니다!');
}

출처 : https://ko.javascript.info/ifelse#ref-167

Boolean Logic

프로그래밍에서 비교란 주어진 값들이 같은지, 다른지, 큰지, 작은지를 구분하는 것을 의미한다. 이때 비교 연산자를 사용하는데 비교 연산자의 결과는 true나 false 중의 하나다. true는 비교 결과가 참이라는 의미이고, false는 거짓이라는 뜻이다.

01. 비교 연산자 (Comparison Operators)

==는 동등 연산자로 ""과 0, false를 구분하지 못한다. ===는 일치 연산자(strict equality operator)로 형변환 없이 값을 비교한다.

02. 논리 연산자 (Logical Operators)

자바스크립트엔 세 종류의 논리 연산자 ||(OR), &&(AND), !(NOT)이 있다. 연산자에 '논리’라는 수식어가 붙긴 하지만 논리 연산자는 피연산자로 불린형뿐만 아니라 모든 타입의 값을 받을 수 있다. 연산 결과 역시 모든 타입이 될 수 있다.

false 값

false
0
""
null
undefined
Nan

이외의 모든 것은 true이다.

Truthy와 Falsy

Truthy가 아니면 Falsy이고, Falsy가 아니면 Truthy이다.

  • Truthy : 참은 아니지만 참 같은 값. Boolean 데이터 타입의 진짜 True는 아니지만, True처럼 관리되는 값.
  • Falsy : 거짓은 아니지만 거짓 같은 값. Boolean 데이터 타입의 진짜 False는 아니지만, False처럼 관리되는 값.
let a = 0;
let b = 100;

if(a) {        // a에 0이 대입되어 false값으로 변하기 때문에, 이 조건문은 실행되지 않음.
  console.log("Falsy");
}
else if(b) {  // b에 100이 대입되어 실제 true값=1은 아니지만, 참값으로 여겨져 이 조건문이 실행됨
  console.log("Truthy");
}

// Truthy
profile
하늘이의 개발 일기

0개의 댓글