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

2023. 4. 10. 14:57· Web/javascript
목차
  1. [2.10]  IF문 / 삼항연산자
  2. [2.11]  논리연산자 OR AND NOT
  3. 💡 깨달은 점 

[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와 '?'를 사용한 조건 처리

 

ko.javascript.info

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'Web > javascript' 카테고리의 다른 글

[javascript] 동기식 언어인 javascript가 통신을 하는 방법  (0) 2023.06.04
[Javascript] JS의 함수를 잘 활용하고 있나요? - JS 함수에 숨겨진 기능 톺아보기  (0) 2023.05.18
[javascript] 배열 총정리  (0) 2023.05.06
[JS기본] 객체의 모든 것 / 프로퍼티, 생성자함수, this와 메소드, 옵셔널 체이닝  (1) 2023.04.23
[JS 기본] 함수선언문 VS 함수표현식 / 콜백함수, 화살표함수 친해지기  (0) 2023.04.10
  1. [2.10]  IF문 / 삼항연산자
  2. [2.11]  논리연산자 OR AND NOT
  3. 💡 깨달은 점 
'Web/javascript' 카테고리의 다른 글
  • [Javascript] JS의 함수를 잘 활용하고 있나요? - JS 함수에 숨겨진 기능 톺아보기
  • [javascript] 배열 총정리
  • [JS기본] 객체의 모든 것 / 프로퍼티, 생성자함수, this와 메소드, 옵셔널 체이닝
  • [JS 기본] 함수선언문 VS 함수표현식 / 콜백함수, 화살표함수 친해지기
이티권
이티권
programming, design
이티권
ET WORLD
이티권
전체
오늘
어제
  • 분류 전체보기 (85)
    • Web (43)
      • Three.js (1)
      • javascript (6)
      • React (2)
    • algorithm (18)
      • BOJ (6)
    • Record (9)
      • 생각 (6)
      • 경험 (3)
    • Art (7)
    • Technology (8)
      • Data (2)
      • Info (5)

블로그 메뉴

  • WEB
  • RECORD
  • ALGORITHM
  • TECH
  • ART

공지사항

인기 글

태그

  • 레포지터리만들기
  • vue.js
  • CSS
  • HTML
  • 뷰링크
  • 나머지매개변수
  • js
  • 재귀함수
  • svgr
  • 깃 CLI
  • 깃허브시작
  • 뷰 프롭스
  • html tag
  • 기명함수 표현식
  • 불확신
  • 포토샵
  • 페이지 링크
  • 시니어프론트엔드개발자
  • 맥북소리녹화
  • 스프레드문법
  • 뷰라우터
  • 깃허브하는법
  • 컴포넌트 통신
  • C언어
  • 순환
  • 컴퓨터공학힘든가요
  • 퓨 이벤트
  • ChatGPT
  • 알고리즘
  • 알고리즘문제

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.1
이티권
[JS 기본] IF문과 논리연산자에 숨겨진 기능
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.