논리연산자&& (AND)(심층)자바스크립트2023. 7. 13. 18:58
Table of Contents
728x90
반응형
요즘 다시 자바스크립트의 개념을 공부하고 있는데,
그동안 많이 헷갈렸던 부분에 대하여 이번에 배우게 되어 정리를 해보고자 한다.
나는 논리연산자 &&, 즉 AND가
둘 다 true일 때 true를, 하나라도 false이면 false를 출력하는 용도로만 사용되는 줄 알았다.
근데 이 방식은 전통적인 프로그래밍 방식이라고 한다.
alert(true&&true);
// true
alert(false&&true);
// false
alert(true&&false);
// false
alert(false && false);
// false
if(1 && 0) {
// 피연산자가 숫자형이지만 논리형으로 바뀌어 true && false가 됩니다.
alert("if 문 안에 falsy가 들어가 있으므로 alert창은 실행되지 않습니다.");
}
하지만 이것 외에도 다른 용도로 사용된다는 것을 알게 되었다.
- 첫 번째 falsy를 찾는 AND 연산자 ‘&&’
AND 연산자 &&는 아래와 같은 순서로 동작한다.
- 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가한다.
- 각 피연산자는 불린형으로 변환된다. 변환 후 값이 false이면 평가를 멈추고 해당 피연산자의 변환 전 원래 값을 반환한다.
- 피연산자 모두가 평가되는 경우(모든 피연산자가 true로 평가되는 경우)엔 마지막 피연산자가 반환됩니다.
정리해 보자면 이렇다.
AND 연산자는 첫 번째 falsy를 반환한다. 피연산자에 falsy가 없다면 마지막 값을 반환한다.
위 알고리즘은 OR 연산자의 알고리즘과 유사한다.
차이점은 AND 연산자가 첫 번째 falsy를 반환하는 반면, OR은 첫 번째 truthy를 반환한다는 것이다.
예시:
// 첫 번째 피연산자가 truthy이면,
// AND는 두 번째 피연산자를 반환합니다.
alert(1 && 0);
// 0
alert(1 && 5);
// 5
// 첫 번째 피연산자가 falsy이면,
// AND는 첫 번째 피연산자를 반환하고, 두 번째 피연산자는 무시합니다.
alert(null && 5);
// null
alert(0 && "아무거나 와도 상관없습니다.");
// 0
AND 연산자에도 피연산자 여러 개를 연속해서 전달할 수 있다.
첫 번째 falsy가 어떻게 반환되는지 예시를 통해 살펴보자.
alert(1 && 2 && null && 3);
// null
아래 예시에선 AND 연산자의 피연산자가 모두 truthy이기 때문에 마지막 피연산자가 반환된다.
alert(1 && 2 && 3);
// 마지막 값, 3
⚠⚠⚠
&&의 우선순위가 ||보다 높다.
AND 연산자 &&의 우선순위는 OR 연산자 ||보다 높다.
따라서 a && b || c && d는 (a && b) || (c && d)와 동일하게 동작한다.
⚠⚠⚠
if를 ||나 &&로 대체하지 말라.
어떤 개발자들은 AND 연산자 &&를 if문을 ‘짧게’ 줄이는 용도로 사용하곤 한다.
예시:
let x = 1;
(x > 0) && alert( '0보다 큽니다!' );
&&의 오른쪽 피연산자는 평가가 && 우측까지 진행되어야 실행된다.
즉, (x > 0)이 참인 경우에만 alert문이 실행된다.
위 코드를 if 문을 써서 바꾸면 다음과 같다.
let x = 1; if (x > 0) alert( '0보다 큽니다!' );
&&를 사용한 코드가 더 짧긴 하지만
if문을 사용한 예시가 코드에서 무엇을 구현하고자 하는지 더 명백히 드러내고, 가독성도 좋다.
그러니 if 조건문이 필요하면 if를 사용하고 AND 연산자는 연산자 목적에 맞게 사용하자.
728x90
반응형
'(심층)자바스크립트' 카테고리의 다른 글
정규표현식 : regexp (0) | 2024.01.18 |
---|---|
[2023-12-06] JAVASCRIPT - 생성자 함수 내에서 일반 함수와 화살표 함수의 차이점 (0) | 2023.12.06 |
다시 한 번 자바스크립트 class 파헤치기 (0) | 2023.06.13 |
다시 시작하는 자바스크립트 - 스코프 (0) | 2023.04.27 |
다시 시작하는 자바스크립트 - 비동기 (0) | 2023.04.25 |
@min' :: 개발을 하자
github : https://github.com/dnjfht
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!