자바스크립트 논리 연산자의 중요성

 

일반적으로 논리 연산자를 생각하면 그냥 간단하게 and, or 연산자라고만 생각했다.

뒤로 갈수록 이 논리연산자를 사용하는 경우가 많아지는거 같다.

코드의 가독성? 코드의 간결함? 을 위해서라도 사용할 수 밖에 없다.

 

특히나 함수를 사용하면서 빠질 수 없는 연산자인건 틀림없는 사실이다.

 

다시한번 상기시키면서 정리를 해보려고한다!

 

논리 연산자를 사용해서 단축평가를 할 수 있다.

 

논리합 ||, 논리곱 && 이건 true, false만의 값이 아니다.

다른 값들과도 사용이 되고 다른 경우들과도 조건들을 비교한다.

---

console.log("곽튜브" || "빠니보틀"); // 곽튜브
console.log("곽튜브" && "빠니보틀"); // 빠니보틀

논리합 || 연산자는 두개다 true의 값일 경우 첫번째 피연산자를 반환한다.

논리곱 && 연산자는 두개 다 true의 값일 경우 두번째 피연산자를 반환한다.

 

true, false로 반환하는게 아니다.

 

논리합 | | 연산자

두개의 피연산자 중에서 하나만 true로 평가되어 true를 반환한다.

1. 첫 피연산자가 true로 평가되어 "곽튜브"를 반환한다.

 

논리곱 && 연산자

둘다 true값일 때 두번째 피연산자를 반환한다.

1. 첫번째 피연산자 "곽튜브"는 Truthy 값이므로 true로 평가한다.

2. 이 시점까지는 위 표현식을 평가할 수 없다.

3. 두 번째 피연산자까지 평가할때 앞에 있는 피연산자가 true였기 때문에 뒤에있는 "빠니보틀"을 반환한다.

---

* 여기서 알아야하는 중요한 점이 논리합 || 연산자, 논리곱 && 연산자는

피연사자들의 타입을 변환하지 않고 그대로 반환하는것이다.

---

단축평가는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평과 과정을 생략하는 평가이다.

대부분의 언어들도 그렇지만 프로그래밍언어를 자바스크립트로 처음시작했던 나한텐 신기했던 결과!!

 

표현식	결과
true || any	true
false || any	any
true && any	any
false && any	false

 

console.log("곽튜브" || "빠니보틀"); // 곽튜브
console.log(false || "빠니보틀"); // 빠니보틀
console.log("곽튜브" || false); // 곽튜브

console.log("곽튜브" && "빠니보틀"); // 빠니보틀
console.log(false && "빠니보틀"); // false
console.log("곽튜브" && false); // false

---

논리연산자를 그럼 어떻게 사용할까?

if 조건문을 대신하여 사용하는걸 알고있다.

 

 

그럼 true값일 때 실행되도록 논리곱&&으로 사용해보자!!

let message = "";

// 논리곱 연산자니깐 true면? 뒤에 있는걸 반환한다.
message = true && "완료";

console.log(message); // 완료

 

만약 논리합 || 으로 대체하려면?

let message = "";
// 첫번째 피연산자가 false이기 때문에 "미완료"가 반환
message = false || "미완료";

console.log(message);

---

삼항연산자에서도 true, false가 아니어도 사용할 수 있다.

let message = "";

// 만약 true면 message에 "완료"를 대입한다.
// false면? 뒤에 있는걸 반환한다.
message = true ? "완료" : "미완료";

console.log(message); // 완료

---

논리연산자를 사용해서 Error를 해결하자.

let error = null;

let value = error.value;
console.log(error); // TypeError: Cannot read property 'value' of null

* 변수값이 객체가 아니라 null, undefined 면 타입에러가 발생하는걸 볼 수 있다.

 

let error = null;

let value = error && error.value;
console.log(error); // null

* error가 아닌 null이 반환되는걸 볼 수 있다.

---

매개변수에 기본값을 단축평가로 설정해보자

function getStrLength(str) {
  str = str;
  return console.log(str.length);
}
getStrLength(); // TypeError: Cannot read property 'length' of undefined

* 이렇게 undefined값이 전달되면 에러가 나오는걸 볼 수 있다.

const prefixer = new Prefixer("-webkit-");
function getStrLength(str) {
  str = str || "";
  return console.log(str.length);
}
getStrLength(); // 0

논리합 연산자를 통해서 0으로 출력이되고 에러는 나지 않는다.

 

function getStrLength(str = "") {
  return console.log(str.length);
}
getStrLength();

* 매개변수에 바로 기본값을 할당하는 방법도 있다.

---

반복문 뿐만 아니라 고차함수를 사용하면서도 조건을 정하는 문제들은 계속 발생한다.

거기서 논리연산자는 빠질 수 없는 연산자 중에 하나라고 생각한다!