JS. 논리 연산자

MJ·2022년 8월 22일
JavaScript
0

Java Script

목록 보기
16/57
post-thumbnail

논리 연산자

자바스크립트는 세 종류의 논리 연산자가 있습니다.

  • || : OR 연산자
  • && : AND 연산자
  • ! : NOT 연산자

논리 연산자는 피 연산자에 논리형뿐만 아니라 모든 타입의 자료형을 할당할 수 있습니다.



1. || (OR 연산자)

  • 피 연산자가 한개라도 참이라면 true를 반환, 그렇지 않다면 false를 반환합니다.
❤️ 형식 

alert( true || true );		// 결과 : true
alert( true || false );		// 결과 : true
alert( false || false );	// 결과 : false (참이 1개도 없다)

❤️ 논리 연산자는, 피 연산자의 자료형을 논리형으로 변환 후 연산한다.

if(1 || 0) {		// 1과 0은 논리형이 아니므로, 논리형으로 형변환 ( true || false )
 alert('truthy !')	// 1은 참이기 때문에 조건이 만족되어 실행된다.
}

❤️ if() 조건문에서 사용 (1)
      
let hour = 8;

if( hour < 9 || hour > 18 ) {		// hour이 9보다 작거나, 18보다 크다면 발동됨
 	alert('영업 시간이 아닙니다'); 	  // hour은 8이므로 조건문이 발동한다.
}

❤️ if() 조건문에서 사용 (2)
  
let hour = 12;
let isWeekend = true;

if( hour < 10 || hour > 18 || isWeekend ){	// 세 가지 조건중 하나라도 참이라면 발동
 alert('영업시간이 아닙니다.'); 				
  										    
}


/* */
1) hour(12)는 hour < 10 || hour > 18 조건에 만족하지 않는다. 
2) 10보다 작지 않고, 18보다 크지 않으므로 거짓이지만 IsWeekend 변수는 참인 값이므로 조건문이 만족
3) alert가 실행된다.



1.1 OR 연산자로 truthy값을 찾아내기

  • 피 연산자가 여러 개인 경우에서 OR 연산자를 사용하면, 어떤 변수가 참인 값을
    갖고 있는지 확인할 수 있습니다. 아래 예제를 살펴봅시다.
let result = value1 || value2 || value3;


/* 
1. 피 연산자 value1, 2, 3을 논리형으로 형 변환 
2. 왼쪽 피 연산자부터 우측 피 연산자를 차례대로 검사한다.
3. 피 연산자중에 truthy(true)값이 있다면, 피 연산자의 형 변환 전의 값을 반환하고 종료.
   (value1이 truthy이고, 형 변환전 값이 1이 였다면 1의 값을 반환)

4. 마지막 연산까지 true가 없다면, 마지막 false의 값을 반환하고 연산을 종료한다.
*/

1.1.1 truthy 값 찾아 내기

/*1*/ alert( 1 || 0 );	// 참, 1 반환
/*2*/ alert( null || 1 );	// 참, 1 반환		
/*3*/ alert( null || 0 || 1 );	// 참, 1 반환
/*4*/ alert( undefined || null || 0 );	// 거짓, 0 반환


/* 결과 */
( null || 0 || 1 );
1. 모든 피연산자를 논리형으로 형 변환 ( false, false, true )
2. 좌측부터 우측으로 평가, true를 찾았으므로 해당 값을 반환 1

( undefined || null || 0 );
1. 모든 피연산자를 논리형으로 형 변환 ( false, false, false )
2. 좌측부터 우측으로 평가, 모든 피연산자가 거짓이므로 마지막 피연산자인 0의 값을 반환
   

❗ `undefined` `null` `숫자 0`은 모두 값이 없습니다. 즉 모두 false, 거짓이므로
  마지막 피 연산자인 숫자 0을 반환한다.



1.2 변수나 표현식에서 truthy 값 찾기

  • OR연산자를 이용해서 피 연산자가 여러 개인 경우에서, 변수나 표현식에 대한 참된 값을
    찾아낼 수 있습니다.

  • 이는 위의 자료형에 대해서 참인 값을 찾는 과정과 동일합니다.

let firstName = '';
let lastName = '';
let nickName = '파인애플';

alert( firstName || lastName || nickName || '익명' );	// 파인애플 출력


/* 
1. 모든 자료형을 논리형으로 형 변환 ( false, false, true, true )
2. 좌측부터 우측으로 연산 수행, 세 번째 피연산자가 true인 것을 발견 
3. true의 값을 반환한다. '파인애플' 문자열이 반환됨
*/

❗ OR 연산자로 여러 변수들 중에서 값이 들어있는 변수명과 값을 찾을 수 있습니다.
  만약 모든 피연산자가 거짓이였다면, '익명' 문자열이 출력될 것 입니다.

1.3 단락 평가

  • OR 연산자는 피 연산자를 좌측부터 우측으로 평가하게 됩니다.
    그리고 truthy인 값을 만나면 연산을 종료하고 나머지 값들은 평가하지 않습니다.

  • 이러한 프로세스를 단락 평가 라고 합니다. 

true || alert("출력되지 않는다");	
/*
1. 피 연산자중에 true을 찾을 때 까지 평가를 진행
2. 첫 번째 피연산자가 true이므로 이 값을 반환하고 연산 종료 > 함수는 실행되지 않음
*/


false || alert("출력 된다"); || alert("이것도 출력 된다");			
/*
1. 피연산자중에 true을 찾을 때 까지 평가를 진행
2. 첫 번째 피연산자가 false이므로 다음 피 연산자를 평가. 평가하면서 2 번째 함수가 호출 됨
3. 함수는 true가 아니므로, 다음 평가를 진행 > 3번째 함수도 호출되고 연산이 종료된다.

즉, 거짓인 피연산자뒤에 함수같은 명령들이 있으면 거짓인 조건에서 함수가 호출된다.
*/


❗ 이런식의 OR 연산자를 사용하는 방법을 단락평가라고 하며, 단락평가는 거짓된 조건에서
  명령을 실행하기 위해서 주로 사용합니다.



2. && (AND 연산자)

  • AND연산자는 피 연산자가 모두 참일 때, true을 반환합니다. 하나라도 거짓이라면
    false를 반환합니다. 
/*1*/ alert( true && true );
/*2*/ alert( true && false );
/*3*/ alert( false && false );

/*
1. 두 개의 피 연산자가 모두 참이므로 true을 반환
2. 하나의 피 연산자만 참이므로 false를 반환
3. 모든 피 연산자가 거짓이므로 false를 반환 
*/

2.1 if 문에서 사용

let hour = 12;
let minute = 30;

if ( hour == 12 && minute == 30 ) {
 alert(' 현재 시간은 12시 30분입니다. '); 
}


/* */
AND 연산자도 논리형이기 때문에, 피연산자 hour과 minute를 논리형으로 변환합니다.
둘 모두 true이기에 , true을 반환해서 if 조건문이 실행됩니다.

2.2 AND 연산자로 거짓된 값(falsy) 찾아내기

  • OR 연산자는 참된 값을 찾아내고 연산을 종료하며 반환하지만, AND연산자는
    거짓된 값을 찾아내면 연산을 종료하고 반환합니다.
❤️ falsy 값 찾아내기 (1)

result = value1 & value 2 & value 3


/* */
1. 모든 피 연산자를 논리형으로 변환
2. 피 연산자가 true라면 다음 평가를 수행하고 false라면 연산을 종료하고 false의 형 변환전 값을 반환
3. 모든 피연산자가 true라면, 마지막 true의 형 변환전 값을 반환합니다.

❤️ falsy 값 찾아내기 (2)

/*1*/ alert ( 1 && 0 );			// 0
/*2*/ alert ( 1 && 5 );			// 5
/*3*/ alert ( null && 3 );		// null
/*4*/ alert ( 0 && "문자열" );	// 0


/* */
1. 1과 0을 논리형으로 변환 > true && false > false를 반환한다 > 출력 : 0
2. 1과 5를 논리형으로 변환 > true && true > 마지막 true를 반환한다 > 출력 : 5 
3. null과 3을 논리형으로 변환 > false && true > false를 반환한다 > 출력 : null
4. 0과 "문자열"을 논리형으로 변환 > false && true > false를 반환한다 > 출력 : 0


/* */
❗ 거짓된 값을 찾아내면 나머지 피 연산자를 평가하지 않고 즉시 연산을 종료하고 
  거짓된 값을 반환합니다.

❤️ falsh 값 찾아내기 (3)

/*1*/ alert( 1 && 2 && null & 3 );
/*2*/ alert( 1 && 2 && 3 );


/*  */
1. 피 연산자 논리형으로 변환 > true && true && false & true > false를 반환 > 출력 : null
2. 피 연산자 논리형으로 변환 > true && true && true > 마지막 true를 반환 > 출력 : 3


/* */
❗ 피연산자가 여러 개 이더라도, 동작하는 과정은 똑같습니다.
  거짓된 값을 찾아낼 때 까지 계속해서 연산을 평가하고 수행합니다.

2.3 AND 및 OR 연산자 같이 사용

/* 
1~5살 : 무료 입장
6~10 : 만원
11~64 : 2만원
65 ~ : 무료 입장

제대로된 나이가 아닌 경우에는 입장 불가(음수나이, 문자열 등)
*/

const age = 66;

if(age > 0 && age <= 5 || age >= 65) {
    console.log("FREE");
} else if(age > 5 && age <= 10) {
    console.log("10$");
} else if(age > 10 && age <= 64){
    console.log("20$");
} else {
    console.log('올바른 나이가 아닙니다.');
}


/*
음수거나 문자열등 올바른 나이가 아닌 경우에는 else가 실행된다. 

우선순위는 AND 연산자가 더 높기에, OR 연산자보다 우선으로 실행된다.
또는 괄호를 사용해서 명확하게 사용자에게 명시해도 된다.
*/



3. ! (NOT 연산자)

  • 논리 연산자 !은 피 연산자를 1개만 받고 연산을 수행합니다.

  • 피 연산자를 논리형(true/false)로 변환하고, 변환된 값을 정반대로 변환하고 반환합니다.

    ✅ true라면 false로, false라면 true로

❤️ 형식

/*1*/ alert( !true );	// false 출력
/*2*/ alert ( !0 );		// true 출력 

/* */
1. 피 연산자 true의 반대되는 값으로 형 변환 > false 반환 후 연산 종료
2. 피 연산자 0을 논리형으로 변환 > false > false의 반대되는 값으로 변환 > true 반환 후 연산종료
   

/* */
NOT 연산자는, 결과를 정반대로 뒤집습니다.
참이라면 거짓으로, 거짓이라면 참으로 이것만 기억하시면 됩니다.

❤️ !! 연산자 사용 

/*1*/ alert( !!"문자열" );
/*2*/ alert( !!null );

/* */
1. 피 연산자를 논리형으로 형 변환 > true > 정 반대의 값으로 2번 형 변환 > false > true
2. 피 연산자를 논리형으로 형 변환 > false > 정 반대의 값으로 2번 형 변환 > true > false
   

/* */
!! 연산자를 사용하는 과정은, Boolean() 함수로, 피연산자를 단순하게 논리형으로
변환하는것과 동일한 기능을 수행합니다.



정리

코드의 간소화를 위해 조건문 대신에 사용하는 코드 작성은 자신에게 편할지라도
가독성이 떨어져서 타인이 보기에는 난해하고 불편할 수 있습니다.
가급적 클린코드를 작성 합시다.

연산자의 우선순위를 기억합시다.

  • ! > AND > OR 순서 입니다.
profile
MJ
프론트엔드 개발자가 되기 위한 학습 과정을 정리하는 블로그
이전 포스트

JS. 조건문 (IF , ?)

다음 포스트

JS. nullish

0개의 댓글