nullish 병합 연산자(??)와 OR 논리 연산자(||)의 차이점!.!

# nullish 병합 연산자(nullish coalescing operator)(??)

nullish 병합 연산자(??)는 객체의 정의되지 않은 속성(property)에 접근할 경우 사용하며, 왼쪽 값이 null 혹은 undefined인 경우 오른쪽 값을 반환하고 그렇지 않은 경우 왼쪽 피연산자를 반환합니다. 즉, `??`라는 짧은 문법으로 여러 피연산자 중 그 값이 확정되어있는 변수를 찾을 수 있습니다. 

기본값 설정 등에서 사용되며, 특히 null 또는 undefined를 명시적으로 처리하는 상황에서 유용합니다.

 

---

# nullish 병합 연산자 사용형태

result = value1 ?? value2;

 

** `value1`이 `null` 또는 `undefined`면 `result`에서는 `value2`의 값이 할당됩니다.** 그 외의 경우에는 `result`에는 `value1`의 값이 할당됩니다. 

---

# nullish 병합 연산자 예시

예시1)

var A = null ?? 'Hello'; // Hello 반환

 

위 코드에서 왼쪽 피연산자가 null 이므로 오른쪽 피연산자인 'Hello'를 반환합니다.

---

예시2)

let username = null;
let defaultUsername = "Guest";

let displayName = username ?? defaultUsername;

console.log(displayName); // "Guest"

 

위 코드에서 `username`이 `null` 이므로 nullish 병합 연산자는 `defaultUsername`의 값을 선택하여 `displayName`에 할당합니다. 

 

---

예시3)

let value1 = null;
let value2 = undefined;
let value3 = 0;
let value4 = false;

let result1 = value1 ?? "기본값";
let result2 = value2 ?? "기본값";
let result3 = value3 ?? "기본값";
let result4 = value4 ?? "기본값";

console.log(result1); // "기본값" (null일 때만 기본값 사용)
console.log(result2); // "기본값" (undefined일 때만 기본값 사용)
console.log(result3); // 0 (0은 Falsy하지만 널리쉬 연산자는 사용)
console.log(result4); // false (false는 Falsy하지만 널리쉬 연산자는 사용)

 

nullish 병합 연산자는 `null` 또는 `undefined`일 때만 오른쪽 피연산자를 반환합니다. 따라서 `value1`과 `value2`는 각각 `null`과 `undefined`이므로 기본값이 사용되고, `vlaue3`과 `value4`는 Falsy 하지만 nullish 연산자는 이를 무시하고 왼쪽 값을 반환합니다.

---

# nullish 병합 연산자(??)와 OR 논리 연산자(||)의 차이점

왼쪽 값이 null 혹은 undefined의 경우 OR 연산자와 똑같이 작동하기 때문에 매우 유사하지만 두 연산자는 분명 차이가 있습니다. 

 

?? nullish 병합 연산자는 오직 null과 undefined를 체크하고 || OR 연산자는 true인 값을 체크 합니다. null과 undefined만 체크하고 싶은 경우 null 병합 연산자를 사용하고, false로 평가되는 모든 값을 체크하고 싶은 경우 OR 연산자를 사용합니다. 

?? 연산자에서 왼쪽 피연산자가 0 또는 false일 경우 왼쪽 피연산자를 반환
|| 연산자에서 왼쪽 피연산자가 0 또는 false일 경우 오른쪽 피연산자를 반환

---

# OR 연산자(OR Operator)(||)

OR 연산자(||)는 두 개의 피연산자 중 하나라도 `true`이면 결과가 `ture`가 되는 연산을 수행합니다. 

주로 불리언 값(Boolean)이 아닌 값들 간에 사용되면서 특정 값을 선택하는 데에도 사용됩니다.

---

# OR 연산자 사용형태

result = value1 || value2;

 

** `value1`이 `true`이면 `result`에서는 `value1`의 값이 할당됩니다.

** `value1` Falsy한 값이라면  `result`에서는 `value2`의 값이 할당됩니다.

---

# OR 연산자 예시

예시1) 

let isActive = true;
let isEnabled = false;

let status = isActive || isEnabled;

console.log(status); // true

 

위의 코드에서 `isActive`는 `true`이므로 `status`에는 `true`가 할당됩니다.

---

예시2) 

let userCount = 0;
let defaultCount = 10;

let totalCount = userCount || defaultCount;

console.log(totalCount); // 10

 

위의 코드에서 `userCount`는 Falsy한 값이 0이므로 OR 연사자는 `defaultCount`의 값을 선택하여 `totalCount`에 할당합니다.

---

예시3) 

let username = "";
let defaultUsername = "Guest";

let displayName = username || defaultUsername;

console.log(displayName); // "Guest"

 

위의 코드에서 `username`이 Falsy한 빈 문자열("")이므로 OR 연산자는 `defaultUsername`의 값을 선택하여 `displayName`에 할당합니다. 

 

---

예시4) 

let value1 = null;
let value2 = undefined;
let value3 = 0;
let value4 = false;

let result1 = value1 || "기본값";
let result2 = value2 || "기본값";
let result3 = value3 || "기본값";
let result4 = value4 || "기본값";

console.log(result1); // "기본값" (null이므로 오른쪽 값 사용)
console.log(result2); // "기본값" (undefined이므로 오른쪽 값 사용)
console.log(result3); // "기본값" (0은 Falsy하므로 오른쪽 값 사용)
console.log(result4); // "기본값" (false는 Falsy하므로 오른쪽 값 사용)

 

 

OR 연산자는 왼쪽 피연산자가 Falsy한 값이면 오른쪽 피연산자를 반환합니다. 따라서 `value1`, `value2`, `value3`, `value4` 모두 Falsy한 값이므로 기본값이 사용됩니다. `value3`과 `value4`의 경우 nullish 병합 연산자와 달리 Falsy한 값이면 오른쪽 피연산자를 반환하므로 "기본값"이 사용됩니다. 

 

---

# nullish 병합 연산자 실제 적용 사례 

// 마이페이지 정보 조회하는 API
userRouter.get("/me", needSignin, async (req, res)=>{
  try {
      const name = res.locals.user.name;
      const id = res.locals.user.id;
      const userInformation = await Users.findOne({
          where: { id }
      })
      const { nickname, oneLiner } = userInformation;
      res.status(200).json({
          name, 
          nickname: nickname ?? "롤 닉네임을 적어주세요",
          oneLiner: oneLiner ?? "자기소개를 해주세요",
          success: true,
          message: "내 정보 조회에 성공하였습니다."
      })
      }catch (error) {
          console.log(error);
          return res.status(500).json({
          success: false,
          message: '예상치 못한 에러가 발생했습니다. 관리자에게 문의하세요.',
          });
      }
})

 

위 코드에서 `nickname`과 `oneLiner`에 nullish 병합 연산자(??)를 사용하였으며 각각 기본 문자열 "롤 닉네임을 적어주세요', "자기소개를 해주세요"를 기본값으로 제공하는데 사용됩니다.