&&, ||, ?? 연산자 알아보기

• 단락 평가(Short-circuiting)는 연산자들이 특정 조건을 만족할때, 나머지 피연산자의 평가를 스킵하고 결과를 반환하는 동작을 한다.

---

Truthy와 Falsy란?

• 단락평가를 이해하기 위해서는 Truthy와 Falsy를 이해하면 좋다.
• Truthy와 Falsy는 참과 거짓을 나타내는 또 다른 개념이다.
• 자바스크립트는 true와 false값만을 사용하는게 아닌 Truthy와 Falsy라는 개념도 사용한다.

Truthy

Truthy한 값이 온다면 그건 논리적으로 참으로 간주된다. 아래의 값들은 모두 참으로 간주된다.

• true - 직접적인 참 값
• "Hello" - 비어있지 않은 문자열
• [ ], { } - 빈 배열, 빈 객체(값이 있는 배열과 객체도 참 값임)
• 1,2,3... - 0이 아닌 숫자
• Falsy값을 제외한 모든 값

Falsy

Falsy한 값이 온다면 그건 논리적으로 거짓으로 간주된다. 아래의 값들은 모두 거짓으로 간주된다.

• false - 직접적인 거짓 값
• 0, -0, NaN - 0과 NaN
• "", '' - 빈 문자열
• null - null값
• undefined - undefined값

참고) "0", "false"는 참 값이다. 빈 문자열을 제외한 문자열 값은 Truthy이다, 따라서 문자열인지 아닌지 반드시 확인하자!

---

1. AND(&&)연산자

• 첫 번째 피 연산자가 거짓인 경우, 두 번째 피연산자를 평가하지않고 결과를 첫 번째값 으로 반환한다.
• 첫 번째 피 연산자가 참인 경우, 결과를 두 번째값 으로 반환한다.

참(A) && 참(B) -> 참(B)를 반환
참(A) && 거짓(B) -> 거짓(B)를 반환
거짓(A) && 참(B) -> 거짓(A)를 반환
거짓(A) && 거짓(B) -> 거짓(A)를 반환

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

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

// &&와 Truthy한 값을 같이 사용했을때
  console.log([] && "빈 배열도 Truthy 인가요?"); // "빈 배열도 Truth 인가요?"
  console.log(['1'] && "값이 있는 배열도 Truthy 인가요?"); // "값이 있는 배열도 Truth 인가요?"
  console.log({} && "빈 객체도 Truthy 인가요?"); // "빈 객체도 Truth 인가요?"

// &&와 Falsy한 값을 같이 사용했을때
  console.log('' && "값이없네요"); // ''
  console.log(0 && true); // 0
  console.log(-0 && true); // -0

2. OR(||)연산자

• 첫 번째 피 연산자가 참인 경우, 두 번째 피연산자를 평가하지 않고 결과를 첫 번째값 으로 반환한다.
• 첫 번째 피 연산자가 거짓인 경우, 결과를 두 번째 값으로 반환한다

참(A) || 참(B) -> 참(A)를 반환
참(A) || 거짓(B) -> 참(A)를 반환
거짓(A) || 참(B) -> 참(B)를 반환
거짓(A) || 거짓(B) -> 거짓(B)를 반환

// ||와 Truthy한 값을 같이 사용했을때
  console.log([] || "빈 배열도 Truthy 인가요?"); // []
  console.log(['1'] || "값이 있는 배열도 Truthy 인가요?"); // ['1']
  console.log({} || "빈 객체도 Truthy 인가요?"); // {}

// ||와 Falsy한 값을 같이 사용했을때
  console.log('' || "값이없네요"); // '값이없네요'
  console.log(0 || true); // true
  console.log(-0 || false); // false

3. Nullish(??)연산자

• 왼쪽 피연산자가 null또는 undefind일 때만 오른쪽 피 연산자를 반환하고 그 외의 경우에는 왼쪽 피 연산자를 반환한다.

  const value1 = null;
  const value2 = "Hello, World!";

  const result = value1 ?? value2;

  console.log(result); // "Hello, World!"

• ||와 다르게 ?? 연산자는 왼쪽값이 null과 undefind일때만 오른쪽 피 연산자를 반환한다는것에 주의하자!

  console.log(0 || "a"); // "a"
  console.log(0 ?? "a"); // 0