[TIL] 논리연산자 AND(&&), 논리합(||)

자바스크립트에는 세 종류의 논리 연산자 ||(OR), &&(AND), !(NOT)이 있습니다.

연산자에 '논리’라는 수식어가 붙긴 하지만 논리 연산자는 피연산자로 불린형뿐만 아니라 모든 타입의 값을 받을 수 있습니다. 연산 결과 역시 모든 타입이 될 수 있습니다.

AND(&&)

AND 연산자는 두 피연산자가 모두가 참일 때 true를 반환합니다. 그 외의 경우는 false를 반환합니다.

alert( true && true );   // true
alert( false && true );  // false
alert( true && false );  // false
alert( false && false ); // false

OR 연산자와 마찬가지로 AND 연산자의 피연산자도 타입에 제약이 없습니다.

if (1 && 0) { // 피연산자가 숫자형이지만 논리형으로 바뀌어 true && false가 됩니다.
  alert( "if 문 안에 falsy가 들어가 있으므로 alert창은 실행되지 않습니다." );
}

falsy를 찾는 AND 연산자 ‘&&’

일반적으로 연산자는 왼쪽에서 오른쪽으로 평가할 때 발견된 첫 번째 거짓 피연산자 의 값을 반환하거나, 모두 true 인 경우 마지막 피연산자의 값을 반환 합니다.

// 첫 번째 피연산자가 truthy이면,
// AND는 두 번째 피연산자를 반환합니다.
alert( 1 && 0 ); // 0
alert( 1 && 5 ); // 5

// 첫 번째 피연산자가 falsy이면,
// AND는 첫 번째 피연산자를 반환하고, 두 번째 피연산자는 무시합니다.
alert( null && 5 ); // null
alert( 0 && "아무거나 와도 상관없습니다." ); // 0

AND 연산자 &&는 아래와 같은 순서로 동작합니다.

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

|| (OR)

인수 중 하나라도 true이면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

alert( true || true );   // true
alert( false || true );  // true
alert( true || false );  // true
alert( false || false ); // false

피연산자가 모두 false인 경우를 제외하고 연산 결과는 항상 true입니다.

피연산자가 불린형이 아니면, 평가를 위해 불린형으로 변환됩니다.

if (1 || 0) { // if( true || false ) 와 동일하게 동작합니다.
  alert( 'truthy!' );
}

truthy를 찾는 OR 연산자 ‘||’

OR ||연산자는 다음 순서에 따라 연산을 수행합니다.

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

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

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

alert( undefined || null || 0 ); // 0 (모두 falsy이므로, 마지막 값을 반환함)

! (NOT)

논리 연산자 NOT은 느낌표 !를 써서 만들 수 있습니다.

result = !value;

다음 순서대로 연산을 수행합니다.

1. 피연산자를 불린형(true / false)으로 변환합니다.
2. 1에서 변환된 값의 역을 반환합니다.

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

논리연산자 ||(내배캠 자바스크립트 예제30문제)

오늘은 논리연산자의 개념을 정리해본 이유가 하루에 한문제씩 알고리즘 문제를 풀려고 연습하는데 오늘의 문제가 논리연산자 ||의 문제였닷..!!

// 아래의 결과와 같이 출력되도록 함수를 완성해 보세요.

function order(item, quantity, price) {
	// item, quantity, price 중 하나라도 입력이 되어 있지 않으면
	// '주문 정보를 모두 입력해주세요' 를 리턴합니다.
	// quantity 수량이 0이하면
	// '수량은 1개 이상 입력해주세요' 를 리턴합니다.
	// 위 두 가지 경우만 아닌 경우에만 아래와 같이 주문 완료 메시지를 출력합니다.
  // 이 부분에 코드를 작성해 보세요.
}

console.log(order('아이폰 12', 2, 1200000));
// 출력 결과: '주문이 완료되었습니다. 아이폰 12 2개를 2400000원에 구매하셨습니다.'

console.log(order('맥북 프로', -1, 2500000));
// 출력 결과: '수량은 1개 이상 입력해주세요'

console.log(order('아이패드 에어', 1, null));
// 출력 결과: '주문 정보를 모두 입력해주세요'

내가 생각한 코드

function order(item, quantity, price) {
  if(item || quantity || price === null) {
    return "주문 정보를 모두 입력해주세요.";
  } else if (quantity <= 0) {
    return "수량은 1개 이상 입력해주세요.";
  } else {
    totalPrice = quantity * price;
    return `주문이 완료되었습니다. ${item} ${quantity}개를 ${totalPrice}원에 구매하셨습니다.`;
  }
}

console.log(order('아이폰 12', 2, 1200000)); // 주문 정보를 모두 입력해주세요.

console.log(order('맥북 프로', -1, 2500000)); // 주문 정보를 모두 입력해주세요.

console.log(order('아이패드 에어', 1, null)); // 주문 정보를 모두 입력해주세요.

원하는 결과는 안나오고 안나오고... 쭉 첫번째 if문에서 넘어가지 않아서 고민하고 다른분들께도 물어본 결과 맞는거 같은데.. 왜 안되는지 다들 이해를 못해서..ㅠㅠ 결국 튜터님께 질문을 하러 갔다와서 이유를 바로 알아차릴 수 있었닷..!!

수정코드

function order(item, quantity, price) {
  if (
    item === null ||
    item === undefined ||
    quantity === null ||
    quantity === undefined ||
    price === null ||
    price === undefined
  ) {
    return "주문 정보를 모두 입력해주세요.";
  } else if (quantity <= 0) {
    return "수량은 1개 이상 입력해주세요";
  } else {
    totalPrice = quantity * price;
    return `주문이 완료되었습니다. ${item} ${quantity}개를 ${totalPrice}원에 구매하셨습니다.`;
  }
}
// order("아이폰 12");
console.log(order("아이폰 12", 2, 1200000));
// 출력 결과: '주문이 완료되었습니다. 아이폰 12 2개를 2400000원에 구매하셨습니다.'

console.log(order("맥북 프로", -1, 2500000));
// 출력 결과: '수량은 1개 이상 입력해주세요'

console.log(order("아이패드 에어", 1, null));
// 출력 결과: '주문 정보를 모두 입력해주세요'

결론

1. 첫번째 실수
   ||연산자를 사용할때는 수학느낌처럼 내생각의 (item || quantity || price) === null라고 생각했지만 저렇게 생각하면 안된다

2. 두번째 실수
   null과 undefined는 엄연히 다른값이여서 두가지를 &&연산자로 묶어서 값을 나오게 한 것이다.

item === null && item === undefined || 
  quantity === null && quantity === undefined ||
  price === null && price === undefined

10 || 100 || 1000 // 10
10 && 100 && 1000 // 1000

모두가 true일때 ||(OR)연산자는 바로 왼쪽부터 true값을 바로 내보낸다면 &&(AND)연산자는 왼쪽부터 true값이 맞으면 오른쪽으로 한 칸씩 이동해서 확인후 제일 마지막 값을 확인할 수 있닷..!!