[JavaScript(5)] 조건문과 논리 연산자

 

 

안녕하세요~  경제적 자유입니다.

오늘은 JavaScript의 조건문, 논리 연산자, nullish 병합 연산자를 리뷰해보려고 합니다.

 

OverView

---

 

JavaScript를 공부하다 보면 이런 상황을 자주 만나게 됩니다.

 

“만약 로그인을 했다면 마이페이지를 보여주고, 로그인을 안 했다면 로그인 페이지로 보내야 한다.”

 

이럴 때 필요한 개념이 바로 조건문입니다.

 

그리고 조건이 하나가 아니라 여러 개일 때는 논리 연산자를 사용합니다.

 

• 나이가 20살 이상이고
• 회원가입도 되어 있고
• 로그인도 되어 있다면

 

특정 기능을 사용할 수 있게 만들 수 있습니다.

 

또한 값이 비어 있을 때 기본값을 넣어주고 싶을 때는 nullish 병합 연산자 ??를 사용할 수 있습니다.

 

추가로 더 자세히 공부하고 싶다면 아래 MDN 문서를 참고해보세요.

 

• 참고 링크: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else

 

 

개념 설명

---

 

 

1. 조건문 if...else란?

if ... else는 조건에 따라 다른 코드를 실행하게 만드는 문법 입니다.

 

쉽게 말하면 컴퓨터에게 이렇게 말하는 것입니다.

 

“만약 이 조건이 맞으면 이 코드를 실행하고, 아니면 다른 코드를 실행해줘.”

 

예를 들어, 비가 오면 우산을 챙기고 비가 오지 않으면 그냥 나가는 것과 비슷합니다.

if (조건) {
  // 조건이 true일 때 실행되는 코드
} else {
  // 조건이 false일 때 실행되는 코드
}

 

여기서 중요한 점은 if 안의 조건이 반드시 true 또는 false만 들어가는 것은 아니라는 점입니다.

 

JavaScript는 조건식에 들어온 값을 자동으로 Boolean처럼 판단합니다.

 

false
0
""
null
undefined
NaN

 

이런 값들을 falsy 값이라고 합니다.

 

반대로 대부분의 값들은 true처럼 취급됩니다.

 

예를 들어 아래 값들은 truthy 값입니다.

"hello"
1
[]
{}

 

빈 배열 []과 빈 객체 {}도 truthy라는 점은 초보자가 자주 헷갈리는 부분입니다.

 

---

 

2. 논리 연산자란?

 

논리 연산자은 여러 조건을 연결하거나, 조건을 반대로 바꾸거나, 값 중 하나를 선택할 떄 사용하는 연산자입니다.

 

• && 연산자

&&은 "그리고"라고 이해하면 쉽습니다. 

const isLogin = true;
const isAdult = true;

if (isLogin && isAdult) {
  console.log("서비스를 이용할 수 있습니다.");
}

 

위 코드는 이렇게 해석할 수 있습니다.

 

“로그인도 했고, 성인이기도 하다면 서비스를 이용할 수 있다.”

 

둘 중 하나라도 false라면 조건 전체는 false가 됩니다.

 

• || 연산자

||는 “또는”이라고 이해하면 쉽습니다.

const hasCoupon = false;
const isVip = true;

if (hasCoupon || isVip) {
  console.log("할인을 받을 수 있습니다.");
}

 

위 코드는 이렇게 해석할 수 있습니다.

 

“쿠폰이 있거나, VIP라면 할인을 받을 수 있다.”

 

둘 중 하나만 true여도 조건 전체는 true가 됩니다.

 

• ! 연산자

!는 값을 반대로 바꿉니다.

const isLogin = false;

if (!isLogin) {
  console.log("로그인이 필요합니다.");
}

 

isLogin은 false입니다.

 

그런데 앞에 !가 붙었기 때문에 !isLogin은 true가 됩니다.

 

그래서 "로그인이 필요합니다."가 출력됩니다.

 

---

 

3. nullish 병합 연산자 "??" 란?

 

??는 왼쪽 값이 null 또는 undefined일 때만 오른쪽 값 사용하는 연산자입니다.

 

문법은 다음과 같습니다.

const result = 값 ?? 기본값;

 

왼쪽 값이 null 또는 undefined이면 오른쪽 기본값을 사용합니다.

 

하지만 왼쪽 값이 0, "", false라면 오른쪽 값으로 넘어가지 않습니다.

 

이 부분이 ||와 가장 큰 차이입니다.

 

const result1 = point || 100; 
const result2 = point ?? 100; 

console.log(result1); // 100
console.log(result2); // 0

 

 

마무리

---

 

오늘은 JavaScript의 조건문, 논리 연산자, nullish병합 연산자를 정리해봤습니다.

 

??은 값이 null 또는 undefined일 때만 기본값을 넣어주는 연산자라는 점,

 

II 와 &&의 사용에 대해서 다시한번더 개념정리를 할 수 있는 시간이어서 뜻 깊은 공부였네요!

 

너무나 많이 쓰이는 문법임으로 계속해서 헷갈리지 않게 알고리즘으로 연습하는 것이 필요할 것 같네요..

 

화이팅!