JS 단원 06: 디폴트 처리, null 병합, 템플릿 리터럴 활용

1. || 연산자를 활용한 디폴트 값 처리

1-1. 기본 사용 예

let name = input || "기본이름";

• input이 falsy 값이면 "기본이름"이 할당됨
• falsy 값: false, 0, "", null, undefined, NaN

console.log("" || "default");  // "default"
console.log(0 || 100);         // 100

2. && 연산자를 활용한 조건 실행

isLoggedIn && showDashboard();

• isLoggedIn이 true일 때만 showDashboard() 실행
• 단축 평가(short-circuit evaluation) 원리 이용

3. 단축 평가의 한계

let val = 0;
let result = val || 10;
console.log(result); // 10 (원하지 않는 결과)

• 0은 falsy지만 실제 값일 수 있음
• 이럴 때는 ?? 연산자 사용

4. null 병합 연산자 (??)

let value = userInput ?? "기본값";

• null 또는 undefined일 경우에만 기본값 사용
• falsy 값(0, "", false)은 그대로 인정

console.log(0 ?? 100);     // 0
console.log(null ?? 100);  // 100
console.log(undefined ?? 100);  // 100

5. ??와 || 비교

→ ??는 값이 정말 없을 때만 기본값 적용

6. 템플릿 리터럴(``) 사용법

let name = "Tom";
console.log(`안녕하세요, ${name}님`);

• ${} 안에 변수나 표현식 사용 가능
• 줄바꿈도 자유롭게 가능

let html = `
<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>
`;

7. 표현식 삽입

let x = 3;
let y = 5;
console.log(`합은 ${x + y}`);

8. 템플릿 리터럴 vs 문자열 연결

// 전통 방식
"Hello, " + name + "님";

// 템플릿 방식
`Hello, ${name}님`;

→ 가독성, 유지보수, 중첩 구조 모두에서 템플릿 리터럴이 유리

9. 고급: Tagged Template

function tag(strings, ...values) {
  console.log(strings);
  console.log(values);
}

tag`이름은 ${name}이고, 나이는 ${age}입니다.`;

• 템플릿을 전처리하거나 변형할 수 있는 고급 기법
• 예: 다국어 처리, HTML 이스케이프 등

요약

• ||는 falsy 값 기준, ??는 null/undefined만 처리
• 단축 평가를 이용한 조건 실행은 간결한 패턴
• 템플릿 리터럴은 문자열 생성에 가장 현대적인 방식
• ${}로 표현식, 줄바꿈, HTML 템플릿까지 표현 가능

심화학습

Q1. false || "기본값"과 false ?? "기본값"의 결과 차이는?
A1. 앞은 "기본값"이 반환되고, 뒤는 false가 그대로 반환되어 조건 처리에 큰 차이가 발생합니다.

Q2. 템플릿 리터럴에서 표현식을 중첩해서 사용하는 방법은?
A2. ${condition ? "예" : "아니오"} 같이 삼항 연산자를 사용하여 복잡한 로직도 삽입할 수 있습니다.

Q3. Tagged Template은 어떤 상황에서 실용적으로 쓰일 수 있나요?
A3. 텍스트 필터링, XSS 방지 HTML escape, 다국어 처리 등에서 매우 강력한 기능을 제공합니다.