코드를 리팩토링 하면서 다른 분들의 논리연산자를 활용한 짧은 코드들을 접하게 됐습니다. 그리고 논리연산자를 잘 활용하면 간결한 코드를 작성할 수 있다는 걸 배웠어요.
기본적인 논리연산자의 종류
- 논리 AND(&&)
- expr1 && expr2 : expr1의 값이 true이면 expr2를 반환하고, false이면 expr1을 반환합니다.
- 논리 OR(||)
- expr1 || expr2 : expr1의 값이 true이면 expr1를 반환하고, false이면 expr2을 반환합니다.
- 논리 NOT(!)
- !expr : 단일 피연산자의 값이 true이면 false를 반환합니다. 그렇지 않으면 true를 반환합니다.
false로 변환할 수 있는 표현 5가지
- null
- NaN
- 0
- 빈 문자열 (" ", ' ', ``)
- undefined
연산자 우선순위
논리연산자에도 우선순위가 있으며 && 연산자가 || 이전에 실행됩니다. 따라서 아래 두 식은 서로 다른 결과가 나옵니다.
true || false && false // returns true, because && is executed first
(true || false) && false // returns false, because operator precedence cannot apply
이중 NOT(!!)
개인적으로는 가장 헷갈렸던 부분입니다. NOT 연산자를 이중으로 사용하면 아무 값이나 불리언 원시값으로 강제 변환할 수 있습니다. 쉽게 말하면 0, null, undefined 등과 같이 정의되지 않은 변수들을 강제 변환하여 확실한 논리 결과(true or false)로 반환하는게 이중 느낌표를 사용하는 목적입니다. 예제로 볼게요.
let a = 0;
console.log(a); //0
console.log(!a); //true
console.log(!!a); //false
let b = null;
console.log(b); //null
console.log(!b); //true
console.log(!!b); //false
let c = undefined;
console.log(c); //undefined
console.log(!c); //true
console.log(!!c); //false
let d = '';
console.log(d); //
console.log(!d); //true
console.log(!!d); //false
let e = {};
console.log(e); //{}
console.log(!e); //false
console.log(!!e); //true
n1 = !!true // !!truthy returns true
n2 = !!{} // !!truthy returns true: any object is truthy...
n3 = !!(new Boolean(false)) // ...even Boolean objects with a false .valueOf()!
n4 = !!false // !!falsy returns false
n5 = !!"" // !!falsy returns false
n6 = !!Boolean(false) // !!falsy returns false
위의 내용을 바탕으로 아래는 실제 코드를 살펴볼게요.
1. 함수 인자를 통한 변수 초기화 : || 연산자
인자가 없을 경우 보통 if 문을 통해 처리를 해주었는데요,
function foo(string) {
if(!string) {
foo = "untitled";
}
}
이 코드를 논리연산자 ||를 활용하면 다음과 같이 됩니다.
string 값이 있으면 해당 값으로 할당, 또는 없으면 "untitled"를 할당 합니다. 같은 내용이지만 더 간결해 졌어요.
function foo(string) {
string = string || "untitled";
}
foo("title") // string = "title"
foo() // string = "untitled"
또한 설정할 값은 함수를 대입할 수도 있습니다.
function test() {
return "test";
}
function foo(string) {
string = string || test();
}
foo() // string = "test"
2. 조건문의 && 연산자
age 값이 있고 17보다 크면 true, 아니면 false를 반환하는 조건문입니다. 이 코드를 &&연산자를 활용해 보면 아래와 같습니다.
function isAdult(age) {
if (age && age > 17) {
return true;
}
else {
return false;
}
}
function isAdult(age) {
return age && age > 17;
}
isAdult(16) // false
isAdult(18) // true
isAdult() // false
&& 연산자를 || 와 함께 사용할 수 도 있습니다.
userName이 있으면 logIn(userName)을 호출하고, 없다면 signUp 함수를 호출합니다.
if (userName) {
logIn (userName);
}
else {
signUp();
}
userName && logIn (userName) || signUp();
논리연산자를 활용하면 코드를 간결하게 줄일 수 있습니다. 하지만 너무 많아지면 가독성이 떨어질 수 있습니다.
레퍼런스:
'Coding > TIL (Today I Learned)' 카테고리의 다른 글
[JavaScript] __proto__, constructor, prototype의 관계, 그리고 Class (0) | 2019.12.20 |
---|---|
[Javascript] 명령어 return의 쓰임 (2) | 2019.12.18 |
[JavaScript] Recursion (재귀) (0) | 2019.12.14 |
Data Structure 03. Tree, Binary Search Tree (0) | 2019.12.13 |
Data Structure 02: (0) | 2019.12.09 |