신기한 연구소입니다.
일반적으로 논리 연산자인 &&, ||, !는 조건문에서 둘 전부 참 또는 거짓이거나
둘 중 하나가 참 또는 거짓인 경우를 판별해서 활용하곤 했습니다.
그럼 꼼꼼히 잘 확인해 보고 기본 개념도 파악하고 활용할 수 있는 응용력도 키워보겠습니다.
1. && (논리 AND) 연산자.
&&를 사이에 두고 양쪽에 피연산자를 평가해서 둘 다 true이면 결과로 true가 나옵니다.
예를 들어볼께요.
|
1
2
3
4
5
6
|
var a = true, b = true, c = false;
console.log(a && b);
console.log(a && c);
console.log(c && b);
console.log(c && c);
|
cs |
결과.
|
1
2
3
4
|
true
false
false
false
|
cs |
Boolean 값을 할당받은 변수 a, b, c로 테스트를 해 봅니다.
3번 라인을 보면 a = true, b = true로 둘 다 true이기에 결과 1번 라인을 보면 true가 나옵니다.
4번 라인부터 6번 라인까지 보면 false값을 가진 변수 c가 들어가 있습니다.
결국 둘 중 하나 또는 둘 다 false인 경우는 && 논리 연산자는 false를 반환하게 됩니다.
&&를 사이에 둔 양쪽의 피연산자는 boolean값을 할당받은 변수뿐만 아니라
관계 표현식, 객체 프로퍼티, 함수 등 truthy, falsy 값의 형태로 변환된다면 모두 가능합니다.
|
1
2
3
4
|
var a = true, b = true, c = false;
var d = function () { return true; };
console.log(a && d());
|
cs |
위 코드를 보면 d에 함수를 할당했습니다.
true를 리턴하는 이 함수를 논리 연산에 피연산자로 사용했습니다.
결과는 true가 반환됩니다.
피연산자로 true/false인 불리언 값 외에도 truthy와 falsy로 불리언 값으로 평가될 수 있다면
모두 가능합니다.
우리가 false로 평가되는 값은 다음과 같습니다.
false로 평가되는 falsy들...
undefined.
null.
0 또는 -0.
'' 또는 "".
NaN.
그리고 정확한 false
위 falsy들은 false로 평가되며 논리 연산자에서 피연산자로 사용이 가능합니다.
만약 두 변수가 값이 할당된 경우에만 다음 문장을 실행해야 하는 경우라면
다음 예제를 확인해 봅니다.
|
1
2
3
4
5
6
|
var age = 20;
var fname = "james";
if (age && fname) {
console.log("Your age is ", age, " and name is ", fname);
}
|
cs |
변수 age와 fname을 논리 연산자를 사용해서 평가하고 있습니다.
age와 fname은 Boolean 값이 아니지만 평가가 됩니다.
null, undefined 등 falsy 평가가 아니면 truethy라 true로 평가되어 문제없이
if {} 문이 실행이 됩니다.
하지만 age 또는 fname에 값이 할당이 안되면
undefined로 기본 할당되기 때문에 falsy 평가로 false가 되므로
if {} 문은 실행되지 않게 됩니다.
&& (AND) 연산자의 특징 중 하나는 첫 번째 피연산자를 평가한 뒤 true인 경우만
두 번째 피연산자를 평가합니다.
단순히 생각하면 그렇구나 하겠지만
이를 응용한다면 조건식을 대신해서 간단하게 함수를 실행할 수 있습니다.
|
1
2
3
4
5
6
7
|
var chk = true;
function test() {
return console.log('test');
}
chk && test();
|
cs |
위 예제를 보면
chk가 true이면 7번 라인의 논리 표현식은 test() 함수를 실행합니다.
test() 함수가 true/false로 평가되는 것은 의미가 없고
단지 chk가 true이면 test() 함수를 실행시킬 수 있다는 것이 중요합니다.
chk가 false라면 함수 test()는 실행되지 않습니다.
두 피연산자가 true인지 false인지가 중요한 것이 아니라
첫 번째 피연산자를 평가해서 두 번째 피연산자를 실행하도록 구현한 것입니다.
if문을 대신해서 사용했다는 부분이 흥미롭습니다.
2. || (논리 OR) 연산자.
&&(AND)와 마찬가지로 이 논리 연산자도 두 개의 피연산자를 평가합니다.
다른 점은 둘 중 하나만 true이면 된다는 것입니다.
우선 첫 번째 피연산자를 평가합니다.
그리고 false가 나온다면 두 번째 피연산자를 평가합니다.
즉, 첫 번째 피연산자가 true가 된다면 두번째 피연산자를 평가할 이유가 없습니다.
이미 둘 중 하나가 true임을 만족하기 때문입니다.
우리가 생각하는 SQL 문의 A 또는 B라서 둘 다 적용하는 개념이 아닌
첫번째 피연산자를 Boolean으로 평가하는 형식입니다.
또한 표현식을 평가만 하지 않고 실행을 하고 평가를 한다는 부분이 중요합니다.
다음 예를 보겠습니다.
|
1
2
3
4
5
6
|
var mainObj;
var subObj = "apple";
var obj = mainObj || subObj || "lemon";
console.log(obj);
|
cs |
||(OR) 연산자를 사용해서 값을 할당하는 방법을 확인해봅니다.
4번 라인의 obj에 값을 할당하는 방식을 보면
mainObj가 true이면 그 값을 할당하고 뒤 2개의 표현식은 실행하지 않습니다.
하지만 undefined로 falsy로 평가되어 false가 되기에
두 번째 피연산자를 확인합니다.
subObj에 "apple"이 할당되어 있으므로 truthy가 되고 obj에 "apple"가 할당됩니다.
그리고 그다음 피연산자는 실행되지 않습니다.
마지막 "lemon"은 두 번째 피연산자가 true이기 때문에 평가되지 않습니다.
이렇게 값을 할당할 때 유용하게 사용할 수 있겠네요.
가끔 공통 js를 보면 첫 라인에 객체를 체크하는 부분이 있는데요.
var obj = obj || {};
obj객체가 있으면 obj객체를 사용하고 처음이면 빈객체 {}를 만든다는 의미입니다.
3. !(NOT) 연산자
! 은 피연산자 앞에 놓입니다.
피연산자는 하나이며 피연산자의 true/false를 반대로 바꾸는 역할을 합니다.
먼저 피연산자를 truthy/falsy로 평가하고 그 결과를 boolean인 true/false로 변환합니다.
그리고 반전을 시키는 구조입니다.
! 연산자는 결과가 항상 true/false 중 하나가 됩니다.
주의할 점은! 연산자를 사용할 때 식 전체를 적용할 경우는 ()를 사용해합니다.
!(a == b)
만약 어떤 truthy 또는 falsey 값을 true 또는 false값으로 바꾸고 싶다면
var a;
a = !!a; 로 하면 false로 할당됩니다.
와우~
'Software > JavaScript' 카테고리의 다른 글
| [왕초보]자바스크립트 Function.prototype.call() 함수 구문 이해하기. call(). (0) | 2022.03.13 |
|---|---|
| [왕초보]자바스크립트 in, instanceof 연산자 사용해보기. (0) | 2022.02.13 |
| [왕초보]자바스크립트의 데이터 타입, 문자열 타입 이해하기. (0) | 2021.11.07 |
| [왕초보]자바스크립트의 데이터 타입 ,원시 타입 중 숫자 타입(number) 이해하기. (0) | 2021.09.20 |
| [왕초보]자바스크립트 클로저(closure) 매우 쉽게 이해하기 편. javascript closure. (0) | 2021.09.12 |
