[JS] && 혹은 ||는 어떻게 사용할까?

star_delight.yeji·2023년 5월 20일
0

개발 일지

목록 보기
11/15
post-thumbnail

JavaScript에서 사용되는 연산자는 다양하다.
그 중 이번에 알아볼 연산자는 &&연산자||연산자이다.

논리연산자 &&와 ||

&&연산자AND연산자로 두 피연산자 모두가 true인 경우에 true를 반환한다. 하나라도 false를 반환하는 경우 false를 반환한다.
||연산자OR연산자로 두 피연산자 중 하나만 true인 경우라도 true를 반환한다. 모두 false인 경우에만 false를 반환한다.

JavaScript에서 false를 return하는 것

  • undefined
  • null
  • NaN
  • 0 (숫자 리터럴), -0
  • '' (빈 문자열)
  • false

예제를 가지고 &&||를 비교해보자.

&& 연산자

1 && 2 && 3 && 10   // 10
'Cat' && 'Dog'      //"Dog"
false && 'Cat'      // false

true && true인 경우 앞에서부터 값을 비교하다 마지막까지 true이면 마지막 값을 return해준다.
만약 false && true인 경우 false이기 때문에 false 값을 return한다.

|| 연산자

1 || 3 || 10 || 0         // 1
'Cat' || 'Dog'            //"Cat"
'' || 3 === 4             // false
false || '' || 10 || 10   // 10

false || false 인 경우를 제외하고 모두 true를 반환하는 연산자이기 때문에 앞에서부터 값을 읽고 true 값이 있으면 바로 true인 값을 반환한다.
false와 false를 출력하는 값만 있는 경우 false를 출력한다.

&&와 || 연산자

1 && 2 || 3                         // 2
false && 10 || 0 || null            // null
'hello' && 10 && true || 10 || null // true

&&|| 연산자를 같이 사용하는 경우이다. 앞에서부터 2개씩 값을 비교한다.
2번째 예시인 경우 false && 10을 했을 때 false를 return하고 다음 false || 0을 비교한다. 0은 JS에서 false이기 때문에 false || false인 경우 뒤의 false 값을 return한다. 마지막으로 0 || null를 비교하는데 null도 false이기 때문에 마지막 false인 null을 반환해준다.

마지막 예시는 'hello' && 10은 둘 다 true이므로 뒤의 값인 10이 return된다. 10 && true는 모두 true이기 때문에 뒤의 true 값인 true가 반환된다. true || 10은 모두 true인 경우 ||를 사용했기 때문에 앞에 있는 true 값을 return하므로 true가 return된다. 마지막으로 true || null은 true와 false이기 때문에 true 값인 true가 반환된다.

0개의 댓글