논리 연산자 && (AND), || (OR) 비교하기

 

자바스크립트의 true, false

 

&& (AND), || (OR) 연산자는 논리 연산자의 종류 중 일부이다.

논리 연산자는 결괏값으로 참, 거짓의 여부를 반환한다.

 

우선, 논리 연산자를 다루기 앞서 자바스크립트의 참과 거짓에 대한 특성에 대해 알아보려고 한다.

자바스크립트에서 참과 거짓을 판별할 수 있는 기준으로는 10 < 20 과 같이 옳고 그름을 판별할 수 있는 '식'의 경우도 있지만, 기본적으로 식이 아닌 문자열이나 숫자만으로 이루어진 경우에도 true, false 값을 반환한다.

 

▶ true 값을 반환하는 경우

자료형	예시
문자 및 문자열	'a', "car"
0을 제외한 정수	10, -20
참인 식	10 < 20

 

▶ false 값을 반환하는 경우

- ""(빈 문자열), 0, null, undefined, NaN, 틀린 식

 

▶ if 문을 통한 참, 거짓 예제

let boolean1 = 0;
if( boolean1 ) {
    console.log( '안녕하세요!' );
}

let boolean2 = "이것은 참입니다."
if( boolean2 ) {
    console.log( boolean2 );
}

if 문의 소괄호 안에는 논리 자료형인 true 와 false 값만 들어갈 수 있다. 만약 그 외의 자료형이 들어가게 될 경우 자바스크립트는 그 자료형을 논리형으로 변환시킨다. 숫자 0의 경우 false값으로 변환되고, 문자열의 경우 true값으로 변환된다.

 

 

'식'의 경우 어느 정도 직관적으로 true, false 값을 판별할 수 있기에 if 문에 조건식으로 많이 사용하는 편이지만, 실제로는 이렇게 특정한 자료형을 단일로 사용해도 논리값을 반환하게 된다.

 

---

 

&& (AND 연산자)

 

- && 기호를 사용하는 AND 연산자는 논리 연산자 중 하나이다.

- 연산에 사용된 피연산자가 모두 참이어야 true 값을 반환한다.

 

- 피연산자 순차 검사 중 false값이 있다면 그 즉시 그 값을 반환한다.

- 피연산자가 모두 참이라면 마지막 값을 반환한다.

 

▶ if 문을 통한 && 연산자 활용

let score = 97;
if( score>=95 && score<=100 ) {
	console.log('A+ 입니다.');
}

 

score라는 변수 안에 숫자형 데이터 97을 할당했다.

숫자 97은 95보다 크거나 같고 100보다 작거나 같으므로 연산에 사용된 피연산자가 모두 참임을 확인할 수 있다.

따라서, AND 연산자로 연결되어 있는 소괄호 안의 조건식은 최종적으로 참이 되어 "A+입니다."라는 문자열을 출력하게 된다.

 

이번에는 '식'이 아닌 다른 자료형으로 구성되어 있는 코드를 한번 살펴보자.

let boolean1 = undefined && "hello javascript!";
console.log(boolean1);

 

앞에서 undefined는 false, 문자열은 true로 변환된다는 사실을 알았다.

모든 피연산자가 true가 아니므로 AND 연산자는 주어진 연산을 false로 반환할 것이다.

 

그렇다면 console.log 명령어로 변수 boolean1을 출력하면 false가 출력될까?

 

 

이 경우 undefined가 출력된다.

앞선 두 예제로 두 가지 사실을 예상할 수 있다.

 

예상 1 : 식은 식 그 자체로서 반환값으로 논리형이 나올 수 밖에 없다.

- score 예제의 경우 비교 연산자( <=, >= )로 각각의 값을 '비교'했기 때문에 결괏값은 항상 true, false였고, 두 식에서 나온 논리값(true/false)을 AND 연산자로 다시 확인했기 때문에 true의 값이 반환되었다.

 

예상 2 : && 연산자의 피연산자 중 false로 판단되는 값이 있다면, 그 값을 그대로 반환한다.

 

그렇다면 양쪽 다 false로 판단되는 자료형을 AND 연산자 사용 후 변수 안에 할당하면 어떤 결과가 나올까?

let boolean2 = null && 0;
console.log(boolean2);

 

null도 숫자 0도 모두 false로 판단되는 값이기 때문에 && 연산자를 통한 논리값은 당연히 false이다.

그렇지만 출력되는 값은 처음에 위치한 false값인 null임을 확인할 수 있다.

 

즉, AND 연산자는 순차적으로 true, false 여부를 판단하다가 false 값이 나오면 그 즉시 반환한다는 사실을 알 수 있다.

 

이번에는 양쪽이 다 true 값일 경우를 알아보자.

let boolean3 = 'abcde' && 'hello';
console.log(boolean3);

 

양쪽이 다 true값일 경우 가장 마지막 값을 반환함을 확인할 수 있다.

 

최종적인 AND 연산자의 true 값 반환여부를 확인하는 과정에 있어서 피연산자들에게 true 값이 계속 나오게 된다면 결국 마지막 값까지 향할 수밖에 없기 때문에 모든 값을 검사한 후 마지막 값을 반환하게 된다.

 

여기서 다시 score 예제로 돌아가보자.

let score = 97;
if( score>=95 && score<=100 ) {
	console.log('A+ 입니다.');
}

 

score>=95와 score<=100은 각각이 비교 연산자를 통한 식이며, score 값으로 97이 할당되어 있기 때문에 모두 참임을 확인할 수 있다. 그런데 AND 연산자는 피연산자가 모두 참일 경우 마지막 값을 반환하기 때문에 실제로 반환된 값은 'score <=100'이라는 식임을 알 수 있고, score값은 97로 100보다는 당연히 작거나 같으므로 최종적으로 참이 된다.

 

---

 

|| (OR 연산자)

 

- || 기호를 사용하는 OR 연산자도 논리 연산자 중 하나이다.

- 연산에 사용된 피연산자 중 하나라도 참이면 true값을 반환한다.

 

- 피연산자 순차 검사 중 true값이 있다면 그 즉시 그 값을 반환한다.

- 피연산자가 모두 거짓이라면 마지막 값을 반환한다.

 

|| 연산자도 && 연산자와 결은 같지만 반대의 기능을 수행한다.

let boolean1 = 'hello' || null ;
console.log(boolean1);

let boolean2 = 'javascript' || 'html';
console.log(boolean2);

 

OR 연산자는 true 판별을 위한 순차 검사 중 단 하나의 true 값만 나오면 그 뒤의 값은 검사할 필요가 없기 때문에,

AND 연산자에서 false값을 즉시 반환하듯 OR 연산자에서는 true값이 발견되면 즉시 그 값을 반환한다.

 

let boolean3 = 0 || null ;
console.log(boolean3);

 

모든 값이 false일 경우 OR 연산자는 단 하나의 true 값을 찾기 위해 순차 검사를 마지막까지 진행하므로 마지막 false 값을 반환하게 된다.

 

let num = 50;
if( num > 30 || num < 10 ) {
    console.log( num );
}

 

위 코드의 경우 두 번째 식인 num<10은 false이지만 첫 번째 식의 결과가 true이므로 두 번째까지 판별할 필요가 없다.

즉, 이 코드에서는 결괏값이 참인 num>30 만 반환되었고 50은 30보다 크므로 최종적으로 참임을 확인할 수 있다.