자바스크립트의 AND(&&)와 OR(||) 연산 이해하기

📘 자바스크립트의 AND(&&)와 OR(||) 연산 이해하기

---

자바스크립트의 AND(&&)와 OR(||) 연산자는 조건문이나 논리 연산에서 매우 자주 사용됩니다. 단순한 참(true), 거짓(false) 판별 외에도 특정 값을 반환하는 독특한 동작 방식을 이해하면, 코드를 더 간결하고 효율적으로 작성할 수 있습니다.

---

1️⃣ AND 연산자 (&&)

기본 동작

- A && B는 두 조건 모두 참일 때만 true를 반환합니다.

- 왼쪽 값(A)이 Falsy 값이면, 오른쪽 값(B)을 확인하지 않고 A를 반환합니다. → 이를 단축 평가(short-circuit evaluation)라고 합니다.

진리표

 

A	B	A && B
true	true	true
true	false	false
false	true	false
false	false	false

예시

console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false

---

단축 평가 (Short-Circuit Evaluation)

&& 연산은 왼쪽 값이 Falsy일 경우, 오른쪽 값을 확인하지 않습니다.

console.log(0 && "hello"); // 0 (왼쪽 값이 Falsy)
console.log("world" && "hello"); // "hello" (왼쪽 값이 Truthy이므로 오른쪽 반환)

활용 예: 조건부 실행

Truthy 조건에서만 코드를 실행하도록 설정할 수 있습니다.

const isLoggedIn = true;
isLoggedIn && console.log("사용자가 로그인했습니다.");
// 출력: "사용자가 로그인했습니다."

---

2️⃣ OR 연산자 (||)

기본 동작

- A || B는 두 조건 중 하나라도 참이면 true를 반환합니다.

- 왼쪽 값(A)이 Truthy 값이면, 오른쪽 값(B)을 확인하지 않고 A를 반환합니다.→ 이 역시 단축 평가(short-circuit evaluation)입니다.

진리표

A	B	A || B
true	true	true
true	false	true
false	true	true
false	false	false

예시

console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false

 

---

단축 평가 (Short-Circuit Evaluation)

|| 연산은 왼쪽 값이 Truthy일 경우, 오른쪽 값을 확인하지 않습니다.

console.log("hello" || 0); // "hello" (왼쪽 값이 Truthy)
console.log(0 || "world"); // "world" (왼쪽 값이 Falsy이므로 오른쪽 반환)

활용 예: 기본값 설정

Falsy 값일 때 기본값을 설정하는 데 사용됩니다.

const name = ""; // Falsy 값
const displayName = name || "기본 이름";
console.log(displayName); // "기본 이름"

---

3️⃣ AND(&&)와 OR(||)의 조합

&&와 ||를 조합하면 더욱 복잡한 조건도 쉽게 처리할 수 있습니다.

예시: 우선순위

&&는 ||보다 우선순위가 높습니다. 괄호를 사용해 우선순위를 명확히 표현하는 것이 좋습니다.

console.log(true || false && false); // true (AND 먼저 계산)
console.log((true || false) && false); // false

활용 예

const userName = "철수";
const message = userName && `안녕하세요, ${userName}님!` || "방문자입니다.";
console.log(message); // "안녕하세요, 철수님!"

---

4️⃣ 주의할 점

Truthy와 Falsy 값에 주의

&&와 ||는 불리언 값만 반환하지 않으며, Truthy/Falsy 여부에 따라 원래 값을 반환합니다.

console.log(null || "hello"); // "hello" (null은 Falsy)
console.log(0 && "hello"); // 0 (0은 Falsy)

 

- 단축 평가로 인해 의도치 않은 값 반환 가능

- 조건이 복잡해질수록 코드의 흐름을 이해하기 어려울 수 있습니다. 괄호를 활용해 명확히 작성하세요.

---

5️⃣ 결론

• AND (&&):
  • 왼쪽 값이 Falsy 값이면 왼쪽 값을 반환합니다.
  • 왼쪽 값이 Truthy 값이면 오른쪽 값을 반환합니다.
• OR (||):
  • 왼쪽 값이 Truthy 값이면 왼쪽 값을 반환합니다.
  • 왼쪽 값이 Falsy 값이면 오른쪽 값을 반환합니다.

단축 평가를 활용하면 조건부 실행, 기본값 설정 등 다양한 작업을 간결하게 처리할 수 있습니다.

반환값이 정확히 무엇인지 확인해야 코드의 의도를 명확히 이해할 수 있으며, 코드를 작성할 때 괄호를 활용해 우선순위를 명확히 하는 것이 중요합니다.