[JS 기본] IF문과 논리연산자에 숨겨진 기능

[2.10]  IF문 / 삼항연산자

1. 기본구조

- js에서의 if문도 다른 언어와 비슷하게 조건 + 조건 만족 시 수행할 블록 의 구조를 이룬다.

- 조건을 판단하기 위한 변수를 prompt로 넘겨줄 수 있다.

- 또한 if + else if + else 조합을 사용할 수 있다.

 

let year=prompt('이티의 나이는?','');
if (year<23){ alert('더 나이가 많습니다.'); }
else if (year>35){ alert('그 정도로 많진 않습니다.'); }
else{ alert('네 24짤입니다.'); }

---

2. 삼항 연산자

- 위와 같은 구문은 조건부 연산자로 간결하게 표현 가능하다.

- 삼항 연산자라고 불리는 이유 : 피연산자를 3개 가지기 때문이다.

 

(조건) ? 참일 때 값 : 거짓일 때 값

age=24
let question = age>25? true : false;
console.log(question) //false 출력

 

- 다중으로 ? 연산자를 이용해서 if-else 문을 간결하게 만들 수 있다.

let year=prompt('이티의 나이는?','');
let message= (year<23)?'더 나이가 많습니다.':
    (year>35)?'그 정도로 많진 않습니다.':
    '네 24짤입니다.';
alert(message);

 

- 하지만 조건부 연산자는 조건에 따른 변수의 다양한 값 할당을 위한 연산자임을 잊지 말자. 

- 피연산자의 값으로 값을 부여하는 것이 아니라 조건에 따라 alert, prompt 등의 표현식을 수행하게 만들면 if-else문보다 가독성이 떨어지기 때문이다.

 

---

[2.11]  논리연산자 OR AND NOT

1) OR ||

- 조건 중 하나라도 참이면 참.

- js에서는 추가 기능을 가진다.

• 바로 OR 연산자에 들어있는 피연산자가 여러 개인 경우, 앞에서부터 시작하며 그 값이 true이면 연산을 멈추고 값을 반환하는 것이다.
• 여기서 값이 true라는 의미는 null, undefined, 0이 아닌 숫자를 의미한다.
• 만약 true인 값이 없으면 마지막 피연산자를 반환한다.

 

- 이런 기능을 이용해서, 값이 존재하는 지를 파악하고, 그 존재하는 값의 첫번째를 확인할 수 있다.

- 또한 아래와 같이 단락 별로 값을 판단하는 평가를 할 수 있다.

 

false || 반환하고자 하는 값
true || 반환하고자 하지 않는 값

 

---

2) AND &&

- 조건 중 하나라도 거짓이면 거짓.

- 이 또한 추가 기능을 가지는데, OR이 첫번째 true를 반환한다면, AND는 첫번째 false를 반환한다는 점에서 차이점을 가진다.

 

// OR 추가기능
alert( null || 0 || 1 ); // 1 
// AND 추가기능
alert( 1 && 2 && null && 3 ); // null

 

- 연쇄작용 특성 상 앞의 구문을 조건처럼 읽어들일 수 있음. (앞의 값이 참일 때 뒤를 수행)

- 다만 &&과 ||의 연쇄작용을 이용해 if문처럼 구현하려고 하는 것은 가독성이 떨어진다는 측면에서 올바르지 않다.

let x=1
(x > 0) && alert( '0보다 큽니다!' ); // 지양
if (x > 0) alert( '0보다 큽니다!' ); // 지향

---

3) NOT ! !!

- !을 앞에 붙임으로써 반대를 구현

- !! 혹은 boolean()을 통해 값의 불린형 결과를 확인할 수 있다.

 

console.log(!!0); //false
console.log(Boolean(null)); //false

---

4) 연습문제 - 코드 결과 예측 해보기

1번 OR 연산자의 피연산자가 alert 라면?

alert( alert(1) || 2 || alert(3) ); // 1 2

-> 처음 alert(1)이 수행된다. -> 1 출력

-> alert(1)은 undefined 값을 가지므로 -> 다음 연산자를 수행한다.

-> 2는 truthy함으로 -> 2가 결론적으로 반환된다.

-> 위 구문은 alert(2)가 되어 -> 2출력

 

 

2번 AND 연산자의 피연산자가 alert 라면?

alert( alert(1) && alert(2) ); // 1 undefined

-> 처음 alert(1)이 수행된다. -> 1 출력

-> alert(1)은 undefined 값을 가지므로 -> 첫번째 false인 undefined를 반환한다.

-> -> 위 구문은 alert(undefined)가 되어 -> undefined출력

 

 

3번 OR AND OR 연산자로 구성된 표현식

 

alert( null || 2 && 3 || 4 ); //3

-> &&가 ||보다 우선시 된다. -> 2&&3은 3을 반환한다.

-> null || 3 || 4 의 수행 값은 첫번째 true값인 3이 된다.

 

---

💡 깨달은 점 

- 다중 연산자와 같이 ?를 이용해서 삼항연산자를 잘 활용할 수 있다.

- 연산자의 추가기능을 잘 이해하면 더 간결하고 가독성 있는 코드를 짤 수 있다. 또한 남의 코드도 더 잘 이해할 수 있다.

 

https://ko.javascript.info/ifelse

if와 '?'를 사용한 조건 처리