[Javascript] 자바스크립트 논리연산자(&&, ||), 단축평가

Jin Lee·2022년 2월 13일
1

자바스크립트에는 true/false를 포함하여 null과 undefined 존재한다.

null 과 undefined

  • 널(Null) 이라고 부르는 이 원시형 타입은 자바스크립트에서는 변수가 빈값으로 초기화가 된 상태임을 표시 다른 개발 언어에서는 초기화 조차 되지 않은 상태를 의미기도 하기 때문에 다른 언어에 경험이 있는 경우 혼동할 수 있습니다.

  • 언디파인드(Undefined) 는 변수가 정의되지 않은 것입니다. 선언되지 않았기 때문에 변수 명만 존재하고 아무 것도 할당되지 않은 것을 말합니다.

자바스크립트는 원시형 데이터 타입도 내부적으로는 객체로 래핑(Wrapping) 을 해서 구현을 합니다.
즉 원시형 변수를 선언했지만, 내부적으로는 객체가 생성된다는 뜻입니다.

선언내부 객체 생성참조 주소값 할당
nullOOX
undefinedXXX

널(Null)은 내부적으로 널 객체가 생성되고, 변수는 이 널 객체의 참조 주소를 가지고 있습니다. 널 객체에는 물론 값이 할당되지 않습니다.

언디파인드(Undefined)는 내부 객체가 생성된 것이 없습니다. 따라서 변수는 객체의 참조 주소도 가지고 있지 않습니다.

둘다 실제 값은 없지만, 하나는 내부적으로 사용하는 객체 조차도 생성되지 않은 것입니다.

자바스크립트에서 false로 평가하는것

empty array와 empty object는 어떻게 평가 될까?

if에 쓴 조건이 true로 판단되어 통과되었고 console.log에 true라는 문자열이 출력되었다.
엥? 근데 저 undefined는 뭘까?

크롬 내부에서 console이 찍히는 과정을 간략하게 보자면 아래와 같이 사용자가 입력한 문장을 받아서 그대로 리턴값을 보여주는데 사용한 if문은 리턴값이 없기 때문에 undefined가 뜨게된다.

if([]) console.log("true")

console.log(if([]) console.log("true"))

정리하자면 논리연산시 null과 undefind는 false로 empty array와 empty object의 경우 true로 판단하기 때문에 이 부분을 주의해야한다.

단축평가

||(논리합), 논리곱(&&) 연산자는 왼쪽부터 오른쪽으로 평가를 진행하는데 중간에 평가결과가 나오면 오른쪽 끝까지 가지 않고 평가 결과를 반환한다. 이를 단축평가라고 하며, 피 연산자의 타입을 변환하지 않고 그대로 반환한다.

논리합(||)의 경우

|| 의 경우, 둘 중 하나만 true면 true로 평가되므로 왼쪽 피연산자가 true이면 바로 true를 반환한다.

true || false; // true(오른쪽의 false는 볼 것도 없이, 왼쪽의 true 반환)
true || true; // true(오른쪽의 true는 볼 것도 없이, 왼쪽의 true 반환)
false || true; // true (오른쪽 값이 반환된다)
false || false; // false (오른쪽 값이 반환된다)
false || "banana"; // "banana"
"apple" || "banana"; // "apple"

논리곱(&&)의 경우

&& 의 경우 둘다 true여야만 true이므로, 왼쪽 피연산자가 false면 바로 false로 평가된다.

false && true; // false (오른쪽은 볼것도 없이, false)
false && false; // false (오른쪽은 볼것도 없이, false)
false && "banana"; // false
null && false;  // null
true && true;  // true
true && false;  // false
"apple" && true; // true
"apple" && false; // false
true && "banana"; // "banana"
"apple" && "banana" // "banana"

ref)
1. https://developer.mozilla.org/en-US/docs/Glossary/Falsy
2. https://curryyou.tistory.com/193
3. https://blogpack.tistory.com/634

profile
깃허브 : https://github.com/jinlee9270

0개의 댓글