[리액트 기초 스터디] JavaScript의 Null 병합 연산자와 typeof 연산자, 삼항 연산자

목차 (OPEN)

• 📑 JavaScript의 Null 병합 연산자와 typeof 연산자, 삼항 연산자
• 🟪 Null 병합 연산자 (Nullish Coalescing Operator)
• 🟨 typeof 연산자
• 🟥 삼항 연산자 (Ternary Operator)
• 📚 결론

 

 

 

 

 

 

📑 JavaScript의 Null 병합 연산자와 typeof 연산자, 삼항 연산자

자바스크립트에는 기본적인 산술 및 논리 연산자 외에도 실무에서 자주 사용되는 유용한 연산자들이 있다.

특히 null 병합 연산자(??), typeof 연산자, 삼항 연산자(?:)는 조건 처리, 자료형 확인, 기본값 지정 같은 상황에서 매우 많이 활용된다고 한다.

 

따라서 이번 포스팅에서는 이 세 연산자의 개념과 사용법을 예제와 함께 정리해보고자 한다.

 

 

---

🟪 Null 병합 연산자 (Nullish Coalescing Operator)

??는 null 또는 undefined가 아닌 값을 선택하는 연산자이다.

즉, 값이 없을 때(null 또는 undefined일 때)만 대체값을 사용한다.

let var1;
let var2 = 10;
let var3 = 20;

let var4 = var1 ?? var2;
console.log(var4); // 10 (var2의 값을 가져옴)

let var5 = var1 ?? var3;
console.log(var5); // 20 (var3의 값을 가져옴)

let var6 = var2 ?? var3;
console.log(var6); // 10 (앞의 값이 유효하므로 앞에 있는 var2의 값을 가져옴)

 

이처럼 ??는 존재하는 값을 추려내는 데에 특화된 연산자이다.

 

 

예를 들면, 사용자의 닉네임이 비어있을 때 기본 값을 보여주고 싶으면 아래와 같이 ??를 활용할 수 있다.

let nickName = "ssosso";
let basicName = "guest";

let displayName = nickName ?? basicName;
console.log(displayName); // "ssosso" (nickName에 값이 있으니 이걸 가져옴)

let nickName = "";
let basicName = "guest";

let displayName = nickName ?? basicName;
console.log(displayName); // "guest" (nickName에 값이 없으니 basicName을 가져옴)

 

 

📌 참고

||(OR 연산자)와 혼동하기 쉬운데,

||는 0, "" (빈 문자열), false 같은 falsy한 값도 대체해버리지만,

??는 오직 null과 undefined 만 체크한다.

console.log("" || "대체값"); // "대체값" (""는 falsy한 값이니까 "대체값"을 선택함)
console.log("" ?? "대체값"); // "" (null이나 undefined가 아니니까 ""를 선택함)

 

 

---

🟨 typeof 연산자

자바스크립트 변수는 동적 타이핑(Dynamic Typing) 특성을 가지고 있어서

아래와 같이 하나의 변수에 여러 자료형을 순차적으로 담을 수 있다.

let var7 = 1; // number
var7 = "hello"; // string

 

이처럼 변수의 타입이 언제든지 바뀔 수 있기 때문에 현재 값의 자료형을 확인하는 방법이 필요하고,

이때 사용할 수 있는 게 typeof 연산자이다.

var7 = "hello";
let t1 = typeof var7;
console.log(t1); // string

 

 

📌 참고

typeof는 반환되는 값이 문자열 형태라는 특징이 있다.

console.log(typeof 123);       // "number"
console.log(typeof "abc");     // "string"
console.log(typeof true);      // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null);      // "object"
console.log(typeof {});        // "object"
console.log(typeof []);        // "object"
console.log(typeof function(){}); // "function"

 

이때 주의할 점이 typeof null은 "object"를 반환한다는 것이다.

자바스크립트의 오래된 설계 버그라고 하는데 ,, 호환성 때문에 지금까지도 유지되고 있다고 한다.

 

그리고 배열([ ])과 객체({ })는 모두 "object"라고 나오기 때문에

이 둘을 구분하려면 Array.isArray()를 사용해야 한다.

console.log(typeof null);      // "object"
console.log(Array.isArray([])); // true

 

이처럼 typeof는 기본적인 타입 확인에는 유용하지만

정교한 타입 판별이 필요할 때는 추가적인 함수(Array.isArray, instanceof 등)를 함께 활용해야 한다.

 

---

🟥 삼항 연산자 (Ternary Operator)

삼항 연산자는 `조건식 ? 참일 때 값 : 거짓일 때 값`의 형태로

조건에 따라 다른 결과를 반환할 때 사용한다.

let var8 = 10;

// 요구사항: var8이 짝수면 "짝수", 아니면 "홀수"
let res = var8 % 2 === 0 ? "짝수" : "홀수";
console.log(res); // "짝수"

 

 

이걸 활용하면 간단한 조건문을 한 줄로 처리할 수 있어서

조건부 렌더링이나 UI 표시 로직에서 자주 활용된다고 한다.

let isLoggedIn = true;
let message = isLoggedIn ? "환영합니다!" : "로그인이 필요합니다.";
console.log(message); // "환영합니다!"

 

 

 📌참고

다만 조건이 복잡해지면 if문이 더 가독성이 좋기 때문에

삼항 연산자는 짧고 단순한 조건 처리에만 쓰는 것이 바람직할 것 같다.

// 가독성이 떨어지는 예시
let grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "F";

 

if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else if (score >= 70) {
  grade = "C";
} else {
  grade = "F";
}

 

 

---

📚 결론

C나 Java 같은 정적 타입 언어를 다뤄왔을 때는 타입이 고정적이라 이런 고민을 할 일이 별로 없었는데,

자바스크립트는 동적 타이핑 언어라서 상황에 따라 값과 자료형이 계속 변할 수 있다는 점이 아직은 어색한 것 같다.

그래서 typeof 같은 연산자를 적극적으로 활용해서 디버깅과 안정성 확보를 해야겠다고 느꼈다.

 

또한 ?? 연산자와 ?: 연산자는 코드를 훨씬 간결하게 만들어주는 동시에

짧고 직관적인 표현식을 선호하는 자바스크립트의 특성을 잘 보여주는 것 같다.

다만, 너무 남용하면 가독성을 해칠 수도 있으니 잘 판단해서 써야겠다.