Javascript Exercise [logical operators - replit 8 : 논리 연산자]

Javascript Exercise Assignment 08 - [논리 연산자]

1) 논리 연산자 - (||(OR 연산자), &&(AND 연산자))

(1) 논리 연산자란?

10-1. 논리 연산자(Logical Operators)의 필요성

if문으로 조건문을 생성하고 사용하는 법을 이전 08. if 문 단원에서 학습하였습니다. 
이번 단원에서는 논리연산자를 사용해야하는 필요성에 대해 앞서 배운 조건문과 연관지어 이해해보려 합니다.

예시)
const answer = prompt("어디사세요?");
if (answer === "선릉") {
  alert("가까우시네요!");
} else if (answer === "강남") {
  alert("가까우시네요!");
} else if (answer === "을지로") {   
  alert("조금 멀리 사시네요."); 
} else {
 alert("거긴 어디인가요?");
}

위 예시 코드는 
강남권을 기준으로 가까운 정도를 판별하는 간단한 코드입니다. 
조건문을 보면 answer가 "선릉", "강남"일 때는 조건은 다르지만, 
"가까우시네요!"라는 같은 결과값을 출력합니다. 만일 역삼, 삼성도 근거리의 지역으로 
조건문에 추가될 때, 같은 결과("가까우시네요!")를 출력해야 한다면 어떻게 될까요? 

이 경우에는 약 2줄이 새롭게 추가되면서 코드가 길어질 것입니다. 
결과는 같지만 불필요하게 반복이 이루어지고, 생산성이 떨어져 보입니다.
이럴 때는 다음의 예시처럼 같은 결과를 반환하는 조건들이 
하나의 결과를 출력하도록 묶어볼 수 있습니다.

예시)
if (선릉 또는 강남 또는 삼성 또는 역삼) {   
    alert("가까우시네요!"); 
}

(2) 논리 연산자의 사용법

바로 "또는(or)" 이라는 논리 연산자를 사용하는 것입니다. 
"또는(or)"에 해당하는 JavaScript 연산자는 || 입니다. 
(shift + \)

아래처럼 다시 작성해볼 수 있습니다.

예시)
const answer = prompt("어디사세요?");
if (answer === "선릉" || answer === "강남" || answer === "역삼") {
  alert("가까우시네요!");
} else if (answer === "을지로") {   
  alert("조금 멀리 사시네요."); 
} else {
 alert("거긴 어디인가요?");
}

조건문을 한 번 살펴봅시다. 
하나의 if 문에 참(true)/거짓(false)을 판단할 조건은 세 개(선릉,강남,역삼)입니다.
prompt 함수에서 리턴받은 answer가 선릉, 강남, 역삼 중 하나일 경우. 
즉, 저 셋 중에 하나로 대답하면 해당 if문이 실행됩니다.

(참고로, alert 메서드는 replit 브라우저에선 
실행되지 않으므로 VSC 에서 실행해보시는것을 추천드립니다.) 

이번에는 취미와 성향을 받아서 동아리를 추천해보려고 합니다. 
취미가 꼭 축구여야하고, 아침형 사람만 조기축구회를 추천받는 로직을 작성합니다.

(취미가 축구인데, 저녁형 인간일 경우에는 조기축구회 추천을 받지 않습니다)

이렇게 어떤 조건 하나만 맞으면 되는 것이 아니라 모두 충족해야할 때 사용하는 
"그리고(and)" 연산자인 && 를 보겠습니다.

예시)
const hobby = prompt("취미가 무엇인가요?");
const morning = prompt("아침형 인간인가요?");

if (hobby === "축구" && morning === "네") {
  alert("조기축구회를 추천합니다.");
} else {
  alert("무슨 동아리가 좋을지 생각해볼게요.");
}

위의 코드를 작성하고 테스트 해봅시다.

(3) 연산자를 활용한 조건문의 다양한 표현

다음은 여러가지 연산자를 활용한 if문에서 표현할 수 있는 다양한 표현입니다. 
하나하나씩 보고 먼저 이해하는 시간을 가져봅시다.

전체 코드)
if (age > 65 || age < 21 && res === "한국"){
	return true;
}

아! 정말 헷갈리네요. 이렇게도 저렇게도 해석이 될 것 같습니다. 
일단 || 가 먼저 있어서 || 기준으로 나누어봤습니다. 
그럼 아래 중에 둘 중에 하나만 참이어도 if문이 실행됩니다.

age가 65를 넘거나,
age가 21보다 아래이면서 사는 곳은 한국이다.

1) ||(OR 연산자) 기준
[age가 65를 넘거나 / age가 21보다 아래이다]
[age > 65 || age < 21]

이런 해석이라면 아래와 같은 경우 참입니다.(예)
- 66세이다. 
- 20이면서 한국에 산다.

2) &&(AND 연산자) 기준
[age가 21보다 아래이고 / 사는 곳은 한국이다.]
[age > 21 && res === "한국"]

 이런 해석이라면 아래와 같은 경우 참입니다.(예)
- 66세, 한국에 산다.
- 20세, 한국에 산다.

위의 두 가지 해석중 무엇이 맞을까요? 컴퓨터 언어는 작성된 순서대로 코드를 해석되기 때문에
첫 번째 내용이 맞는 해석입니다. 컴퓨터는 본인이 정한 기준으로 실행이 되지만, 
개발자인 사람은 볼 때마다 헷갈리는 경우가 있으니 항상 괄호로 묶어주는 습관을 들이면 좋을 것 같습니다. 
위의 코드를 가독성있게 바꾼다면, 아래와 같을 것입니다.

if (age > 65 || (age < 21 && res === "한국"))

혹시 두 번째 해석이 원했던 결과라면 아래와 같이 괄호를 묶어주셔야 합니다.

if ((age > 65 || age < 21) && res === "한국"))

Assignment

1. index.js에 있는 가위 바위 보 게임 함수를 아래 조건에 맞게 구현해주세요.

- rockScissorsPaper 함수를 구현해서 가위, 바위, 보 게임을 구현해주세요.
- 가능하면 || 와 && 연산자 둘 다 사용해주세요.
- player1과 player2 중 이긴 사람이 누군지 리턴해주세요.
- player1 과 player2 의 값은 다음 셋 중 하나 입니다.
-- "가위"
-- "바위"
-- "보"

tip) 
1) player1이 이겼으면 "player1" 이 리턴 되고 
그 반대의 경우라면 "player2"가 리턴이 되어야 합니다.
2) player1의 값이 "가위" 이고 player2의 값이 "보" 이면 
"player1" 이 결과로 리턴 되어야 합니다.
3) 만일 비기는 경우에는 무조건 "player1"이 리턴 되어야 합니다.

힌트)
* 가위 -> 바위 -> 보 순서로 이루어짐

1) player1 기준
- player1 : 가위 / player2 : 보
- player1 : 바위 / player2 : 가위
- player1 : 보 / player2 : 바위
result : player1 승리

2) player2 기준
- player1 : 가위 / player2 : 바위
- player1 : 바위 / player2 : 보
- player2 : 보 / player2 : 가위
result : player2 승리

Assignment - Javascript Code

function rockScissorsPaper(player1, player2) {
  // (가위,바위,보 : 총 3가지의 조건을 세워야함)
  // 1. 만약 player1이 가위, player2가 보를 내면?
  if ((player1 === "가위" && player2 === "보") || (player1 === "가위" && player2 === "가위")) {
    // player1이 리턴
    let finalresult1 = "player1"
    return finalresult1;
    // 만약 player1이 바위, player2가 가위를 내면?
  } else if ((player1 === "바위" && player2 === "가위") || (player1 === "바위" && player2 === "바위")) {
    // player1이 리턴
    let finalresult2 = "player1"
    return finalresult2;
    // 만약 player1이 보, player가 바위를 내면?
  } else if ((player1 === "보" && player2 === "바위") || (player1 === "보" && player2 === "보")) {
    // player1이 리턴
    let finalresult3 = "player1"
    return finalresult3;
    // 2. 그 반대의 경우
  } else {
    // player2가 리턴
    let finalresult4 = "player2"
    return finalresult4;
  }
}
const result1 = rockScissorsPaper("가위", "보");
console.log(result1); // player1
const result2 = rockScissorsPaper("가위", "바위");
console.log(result2); // player2