Study JavaScript 0415 - 1hr if else 논리 연산자

1. if, else, '?'

1. if

if( ) : ( ) 안에 들어가는 조건이 ture이면 코드가 실행된다.
복수의 문을 실행하고 싶으면 중괄호{ } 를 사용한다.

    let year = prompt('올해는 몇 년도 일까요?', '');

    if (year == 2022) {
      alert( "정답입니다!" );
      alert( "복수의 문을 실행하고 싶으면 중괄호 사용!" );
    }

이때 boolean형 변환으로 인하여 0, ""(빈 문자열), null, undefined, NaN은 false가 된다.
이 외의 값은 boolean형 변환시 true가 된다.

    if (0) { // 0은 false
      alert("false");
    }

    if (1) {  // 1은 true
      alert("true");
    }

다음과 같이 평가를 통해 확정된 불린값을 if문에 전달이 가능하다.

    let cond = (year == 2022); // 동등 비교를 통해 true/false 여부를 결정한다.

    if (cond) {
      alert("true");
    }

2. else

else : if문에 else절을 사용할 수 있으며 else는 거짓일 때 실행된다.

    year = prompt('올해는 몇 년도 일까요?', '');

    if (year == 2015) {
      alert( '정답입니다!' );
    } else {
      alert( '오답입니다!' ); // 2022 이외의 값을 입력한 경우
    }

더 많은 조건을 사용하고 싶으면 else if를 사용해 주면 된다.

    if (age < 3) {
      message = '응애야 안녕?';
    } else if (age < 18) {
      message = '좀 큰 응애야 안녕!';
    } else if (age < 100) {
      message = '형님들 환영합니다!';
    } else {
      message = '선생님...어떤 삶을 살아오신 겁니까..?';
    }

3. '?'

조건부 연산자 '?' : 조건에 따라 다른 값을 변수에 할당해 줘야 한다.

    let accessAllowed;
    let age = prompt('나이를 입력해 주세요.', '');

    if (age > 18) {
      accessAllowed = true;
    } else {
      accessAllowed = false;
    }

    alert(accessAllowed);

'?'를 사용한 삼항 연산자로 바꾸어 쓸 때
(조건문을 괄호로 감쌀 필요가 없다. 연산자 우선순위에 따라 age > 18이 먼저 실행되기 때문이다.)

    let accessAllowed = (age > 18) ? true : false;
    accessAllowed = age > 18 ? true : false;

2. OR (||), AND (&&), NOT (!)

1. OR (||)

  1. OR (||) : ‘OR’ 연산자는 두 개의 수직선 기호로 표현한다.
    인수 중 하나라도 true이면 true를 반환하고 그렇지 않으면 false를 반환한다.
    alert( true || true );   // true
    alert( false || true );  // true
    alert( true || false );  // true
    alert( false || false ); // false

boolean 형변환을 이용한 예시

 if (1 || 0) { 
      alert( 'truthy!' );
    }

if문을 통한 예시

    let hour = 12;
    let isWeekend = true;

    if (hour < 10 || hour > 18 || isWeekend) {
      alert( '영업시간이 아닙니다.' ); // 주말이기 때문임
    }
  • OR의 연산 순서
  1. 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가한다.
  2. 각 피연산자를 불린형으로 변환한다. 변환 후 그 값이 true이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환한다.
  3. 피연산자 모두를 평가한 경우(모든 피연산자가 false로 평가되는 경우)엔 마지막 피연산자를 반환한다.

OR연산자를 여러개 체이닝하면 첫 번째 true값을 반환하고 피연산자에 ture값이 하나도 없으면 마지막 피연산자를 반환한다.

    alert( 1 || 0 ); // 1 (1은 true임)

    alert( null || 1 ); // 1 (1은 true임)
    alert( null || 0 || 1 ); // 1 (1은 true임)

    alert( undefined || null || 0 ); // 0 (모두 false이므로, 마지막 값을 반환함)
  • OR의 기능 단락평가
    OR기능 진행 중 ture를 만나면 나머지 값들은 건드리지 않은 채 평가를 멈추는 것을 이용한다.
    true || alert("not printed");
    false || alert("printed");    // 이 메세지만 출력된다.

2. AND(&&)

AND(&&) : 두 개의 앰퍼샌드를 연달아 쓰면 AND 연산자 &&를 만들 수 있다.
모두가 true이면 true를 반환하고 하나라도 ture가 아니면 false를 반환한다.

	alert( true && true );   // true
    alert( false && true );  // false
    alert( true && false );  // false
    alert( false && false ); // false
  • AND의 연산 순서
    1.가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가한다.
  1. 각 피연산자는 불린형으로 변환된다. 변환 후 값이 false이면 평가를 멈추고 해당 피연산자의 변환 전 원래 값을 반환한다.
  2. 피연산자 모두가 평가되는 경우(모든 피연산자가 true로 평가되는 경우)엔 마지막 피연산자가 반환한다.

AND연산자는 첫번째 false값을 반환하며 피연산자에 false값이 없다면 마지막 값을 반환한다.

첫 번째 피연산자가 true이면, AND는 두 번째 피연산자를 반환한다.

	alert( 1 && 0 ); // 0
    alert( 1 && 5 ); // 5

첫 번째 피연산자가 false이면, AND는 첫 번째 피연산자를 반환하고, 두 번째 피연산자는 무시한다.

    alert( null && 5 ); // null
    alert( 0 && "아무거나 와도 상관없습니다." ); // 0
  • AND 체이닝
	// null이 false값 이므로 null 반환
    alert( 1 && 2 && null && 3 ); // null
    // 피연산자 모두 true값이므로 마지막 값 반환
    alert( 1 && 2 && 3 ); // 마지막 값, 3

3. NOT(!)

NOT(!) : 'NOT' 논리 연산자 NOT은 느낌표 !를 써서 만들 수 있다.

NOT 연산자는 인수를 하나만 받고, 다음 순서대로 연산을 수행한다.
1. 피연산자를 불린형(true / false)으로 변환한다.
2. 1에서 변환된 값의 역을 반환한다.

 	alert( !true ); // false
    alert( !0 ); // true

NOT을 두 개 연달아 사용(!!)하면 값을 불린형으로 변환할 수 있다.

	alert( !!"non-empty string" ); // true
    alert( !!null ); // false

내장함수 Boolean을 사용하면 !!을 사용한 것과 같은 결과를 도출할 수있다.

    alert( Boolean("non-empty string") ); // true
    alert( Boolean(null) ); // false

좋은 웹페이지 즐겨찾기