[#JS] 논리 연산

RookieAND·2022년 7월 8일

JavaScript

Javascript

목록 보기

2/19

📖 Before Start

이 글은 Javascript 내용을 복습하는 차원에서 작성되었습니다.

JS를 기반으로 코드를 작성하다 보면 논리 연산자를 사용할 때가 많다.
하지만 다른 언어와 차별된 내용들이 제법 있어 혼선을 빚을 때가 있다.
따라서 이를 명료하게 정리하여 개념을 온전히 숙지하고자 한다.

✒️ Boolean

Boolean 은 참과 거짓을 가지는 논리적인 데이터 타입이다.

Boolean 자료형은 true 와 false , 두 종류의 값만을 표현할 수 있다.

const isTrue = true;
const isFalse = false;

추가적으로 JS 에서는 Boolean 객체라는, wrapper 타입의 객체도 지원한다.
Java 에서도 Integer 처럼 래퍼 클래스가 있는데, JS 에도 있다니 놀라웠다.

const booleanObj1 = new Boolean(true); // Boolean {true}
const booleanObj2 = new Boolean(0);    // Boolean {false}

Boolean 생성자에 아래의 값을 넣어줄 경우, 초기값이 false 가 된다.
그 외의 경우는 어떤 값이던 간에 전부 초기값을 true 로 만들어준다.

0, -0, NaN
null, undefined, false
빈 문자열 ("")

한 가지 주의할 점은, Boolean 객체를 조건식에 사용하면 안된다는 것이다.
값이 undefined, null 이 아닌 모든 객체는 true 로 계산되기 때문이다.

const condition = new Boolean(false);
if (condition) {
  console.log("This function is executed.") // 실행됨.
}

따라서 Boolean 생성자의 값을 사용하고 싶다면, valueOf() 메소드를 쓰자.
valueOf() 메소드는 해당 Boolean 객체의 원시 값을 그대로 반환한다.

const condition = new Boolean(false);
if (condition.valueOf()) {
  console.log("This function doesn't executed.") // 실행되지 않음.
}

또한, Boolean 객체가 아닌 값을 변환하고 싶을 때는 Boolean() 함수를 쓰자.
Boolean() 함수는 매개변수로 받은 값에 따라 true 혹은 false 를 반환한다.
~~근데 굳이 이렇게 안해도 그냥 조건식만 써도 되긴 하다. 의미 없다~~

const condition = Boolean(10 > 11); // false
if (condition) {
  console.log("This function doesn't executed.") // 실행되지 않음.
}

✒️ Logical Operator

JS 에서는 총 3가지 의 논리 연산자를 지원합니다.

✅ AND (&&), OR(||), NOT (!)

NOT 연산자는 true 를 false 로, false 를 true 로 바꿔준다.
AND 연산자는 양쪽의 값이 둘 다 true 일때만 true 를 반환한다.
OR 연산자는 양쪽의 값 중 하나라도 true 라면 true 를 반환한다.

const isTrue = !false 		   // true
const isFalse = true && false  // false
const alsoTrue = true || false // true

✅ Comparison operator

JS 에서는 다른 언어와 마찬가지로 비교 연산자를 지원한다.
비교 연산자의 결과는 항상 true 혹은 false 중 하나다.

console.log(100 > 99); // true
console.log(80 <= 80); // true

숫자 뿐만 아니라 문자열 또한 비교 연산자를 통해 값을 반환시킬 수 있다.
이때 비교의 기준은 사전편집순이며, 사전 뒤쪽의 문자열이 더 크다고 판단한다.

console.log('Apple' > 'Banana'); // false
console.log('Growth' > 'Great'); // true
console.log('Bee' > 'Be'); // true

만약 앞 글자의 문자가 서로 같다면, 그 뒤의 문자를 비교하여 결과를 반환한다.
Growth 와 Great 의 경우, 세 번째 글자인 o 가 e 보다 더 뒤쪽에 나오므로
'Growth' > 'Great' 비교식의 결과는 true 가 반환되는 것이다

또한 두 문자의 사전편집순이 모두 같다면, 길이가 더 긴 문자열을 크다고 판단한다.
Bee 와 Be 의 경우, 두 번째 글자까지 같으므로 길이가 긴 Bee 를 크다고 판단한다.
따라서 'Bee' > 'Be' 비교식의 결과는 true 가 반환되는 것이다.

✅ Equality operator (==, ===)

JS 에서는 동등 연산자 (==) 뿐만 아니라 일치 연산자 (===) 또한 지원한다.
처음에는, 두 연산자의 차이점이 대체 무엇인지를 잘 몰라 꽤 혼란스러웠다.

동등 연산자 는 서로 다른 두 변수의 값 (Value) 만을 비교하는 것이고,
일치 연산자 는 나아가 두 변수의 자료형 (Type) 까지 비교하는 것이다.

console.log(0 == false); // true
console.log(0 === false); // false

상단의 코드를 보면 더 쉽게 파악이 가능하다.
첫번째 비교의 경우 0 은 false 로 처리되기에 결과적으로 true 를 반환했으나,
두번째 비교의 경우 0 과 false 의 자료형이 서로 다르므로 false 를 반환하였다.

console.log(null == undefined); // true
console.log(null === undefined); // false

null 과 undefined 키워드를 비교하는 경우에도 마찬가지로 결과가 서로 다르다.

console.log(2 == "2"); // true
console.log(2 === "2"); // false

숫자와 문자열의 경우도 마찬가지로 동등 연산자의 경우 자동으로 형변환이 되어서
true 를 반환했으나, 타입이 서로 다르기에 일치 연산자에서는 false 를 반환했다.

❓ 그렇다면 반대의 경우 (!=, !==) 는 어떨까?

console.log(2 != "2"); // false
console.log(2 !== "2"); // true

동등 연산자의 경우 두 변수의 값은 모두 2 로 동일하기에 false 를 반환했으나,
일치 연산자의 경우 두 변수의 타입이 다르기에 결과적으로는 true 를 반환했다.

✒️ Advanced Logical Operation

적절한 논리 연산자의 사용은 코드를 효율적으로 축약시킬 수 있다.

✅ Ternary operator

삼항 연산자 는 조건식의 결과에 따라 값을 다르게 설정할 수 있게 한다.
보통 단순한 if-else 조건식을 한 줄로 축약하고 싶을 때 많이 사용한다.

const condition = true;
let result = '';
if (condition) {
  result = '참';
} else {
  result = '거짓';
}

상단의 코드를 삼항 연산자를 통해 단축시키면, 아래와 같이 변경된다.
사용법은 조건식 ? 참일 경우의 값 : 거짓일 경우의 값 로 쓰면 된다.

const condition = true;
let result = condition ? '참' : '거짓';

✅ Short-circuit Evaluation

단축 평가 논리 계산법 또한 불필요한 if-else 구문을 축약할 때 쓰인다.

console.log(true && 'hello'); // hello
console.log(false && 'hello'); // false

A && B 연산의 경우 A 가 Truthy 하다면 무조건 B 가 결과 값이 된다.
반대로 A 가 Falsy 하다면 A 를 결과로 반환한다. 참 특이한 연산이다..

const Dog = {
	age: 10
}
const getAge = (animal) => {
	if (animal) {
    	return animal.age;
    }
	return undefined;
}

const age = getAge();

상단의 코드는 매개변수가 주어지지 않았을 경우를 대비해 조건문이 있다.
하지만 이를 && 연산자로 축약해버린다면 코드는 아래와 같이 변경된다.

const Dog = {
	age: 10
}
const getAge = (animal) => {
    return animal && animal.age;
}

const age = getAge(); // undefined

그 이유는 논리 연산자의 경우 비교 대상에 따라 결과가 변경되기 때문이다.
상단의 코드의 경우, animal 객체가 비었다면 Falsy 한 값으로 설정되므로
결과를 undefined 로 준다, 매개변수로 받을 animal 변수가 없기 때문이다.

|| 연산자는 만약 어떤 값이 Falsy 하다면 이를 대체할 값을 정할 때 쓰인다.

console.log(true || 'hello'); // true
console.log(false || 'hello'); // hello

A || B 연산의 경우 A 가 Truthy 하다면 무조건 A 가 결과 값이 된다.
반대로 A 가 Falsy 하다면 B 를 결과로 반환한다. 그냥 거꾸로 생각하면 된다.

const Dog = {
	age: 10
}
const getAge = (animal) => {
    return animal.age || '나이 없음';
}

const age = getAge(); // '나이 없음'

이렇게 animal.age 가 Falsy 할 경우 '나이 없음' 이라는 문자열을 대신 반환한다.
실제로 React 를 사용하면서 해당 문법을 정말 많이 응용하고 있으니 꼭 참고하자.

📖 Conclusion

논리 연산자의 적절한 사용은 실행 속도의 단축을 가속화시킨다.

삼항 연산자와 단축 논리 평가 계산법의 경우 특히나 더욱 중요한 문법이다.
이를 잘 준수하여 불필요한 조건문을 최대한 축약시키는 것이 중요해보인다.

📖 참고 자료 목록

RookieAND

항상 왜 이걸 써야하는지가 궁금한 사람

이전 포스트

[#JS] 변수와 자료형

다음 포스트