Javascript 조건문 if, 비교 연산자, 논리 연산자
Code/JavaScript

Javascript 조건문 if, 비교 연산자, 논리 연산자

반응형

우선, 조건문을 사용하려면 boolean 타입에 대한 이해가 필요하다.

 

let isAdult = true; // 또는 false;
let isStudent = false; // 또는 true;

 

조건문은 어떠한 조건을 판별하는 기준을 만드는 것이며, 조건문에는 반드시 비교 연산자(comparison operator)가 필요하다.

비교 연산자 (comparison operator)

3 > 5; // false;
9 < 10; // true;
'hello' === 'world'; // false;

 

비교의 결과는 늘 Boolean, 즉 true 혹은 false이다.

 

자바스크립트(JavaScript)는 엄격한 비교와 형변환 비교 두 가지의 비교 방법을 모두 가지고 있다.

엄격(일치) 비교(===)는 두 피연산자가 같은 자료형에, 그 내용도 일치해야만 참이다.

 

다양한 비교 연산자
형변환 비교

형변환 비교 연산자의 경우 타입을 엄격히 비교하지 않기 때문에 사용을 지양한다.

조건문 if 

if 문은 지정한 조건이 참인 경우 명령문(statement)을 실행한다. 조건이 거짓인 경우 또 다른 명령문이 실행 될 수 있다.

조건 문에는 Boolean 으로 결과가 나오는 비교구문이 들어간다.

 

if (조건1) {
  // 조건1이 통과할 경우
} else if (조건2) {
  // 조건1이 통과하지 않고
  // 조건2가 통과할 경우
} else {
  //모든 조건이 통과하지 않는 경우
}

 

위와 같이 작성할 수 있으며, 아래 처럼 if문을 중복하여 사용이 가능하다.

 

if (조건1)
   명령문1
else
   if (조건2)
      명령문2
   else
      if (조건3)
...

 

또한, 원시 불리언 값인 true (참) 과 false (거짓) 을 불리언 객체의 truthiness (참으로 보이는 것)falsiness (거짓으로 보이는 것)으로 혼동하면 안된다. false, undefined, null, 0, NaN, 또는 빈 스트링 ("") 이 아닌 모든 값, 그리고 false 값인 불리언 객체를 포함하는 모든 객체는 조건으로 사용될 때 truthy로 간주된다. 

 

예제)

var b = new Boolean(false);
if (b) // 이 조건은 참으로 보이는 것 (truthy) 이다.  

falsy

거짓 같은 값(Falsy, falsey로 쓰이기도 함) 값은 Boolean 문맥에서 false로 평가되는 값이다.

자바스크립트는 조건문, 반복문 등 불리언 값이 필요한 곳에서 형 변환을 이용해 특정 값을 불리언 값으로 변환한다.

 

다음은 기억해야 할 6가지 falsy 값이다.

6가지 falsy 값

if (false)
if (null)
if (undefined)
if (0)
if (NaN)
if ('')

 

위의 코드는 if 문에서 false 로 변환되므로, if 구문이 실행되지 않는다.

 

 

자, 이제 if문 조건을 작성했을 때 두가지 조건이 한 번에 적용되어야 하는 경우는 어떻게 해야 할까?

바로 논리 연산자(Logical Operator)를 사용한다. 

논리 연산자 ( Logical Operator ) 

1. AND 연산자, OR 연산자

//학생이면서, 여성일 때 통과
isStudent && isFemale; // AND 연산자 && 사용

//학생이거나, 여성일 때 통과
isStudent || isFemale; // OR 연산자 || 사용

 

&&과 || 연산자는 사실 피연산자 중 하나의 값을 반환한다.

그러므로 불리언 외의 다른 값과 함께 사용하면 불리언 값이 아닌 것을 반환할 수 있으니 주의해야한다.

 

2. NOT 연산자

//학생이면서, 여성일 때 통과
!isStudent && isFemale; // NOT 연산자 ! 사용

 

NOT 연사자는 truthy, flasy 여부를 반전시킨다.

 

n1 = !true               // !t returns false
n2 = !false              // !f returns true
n3 = !''                 // !f returns true
n4 = !'Cat'              // !t returns false

 

위의 예제와 같이 사용 가능하다.

반응형