[🍦] 단축 평가 (Short Circuit Evaluation)

논리 연산자를 사용하여 조건문을 처리할 때

전체 표현식을 평가하지 않고 최소한의 평가로 결과를 도출하는 방식을 말한다.

단축 평가는 주로 && (논리곱), || (논리합), ?? (null 병합 연산자)를 사용할 때 발생한다.

 

논리합( || ) 연산자

논리합 연산자 ||는 좌변의 피연산자가 falsy 값(false, 0, "", null, undefined, NaN)일 때만 우변의 피연산자를 평가한다.

좌변의 피연산자가 truthy 값일 경우, 그 값이 바로 결과값으로 반환되며, 우변은 평가되지 않는다.

 

쉽게 설명하자면 

A || B

A가 false라면 B를 반환하고,

A가 true라면 B는 무시, A에 맞는 값을 반환한다.

 

+) falsy한 값 : false, 0, "", null, undefined

 

 

📍예시

// 유저 정보가 제공되지 않았을 때 기본 이름 제공
function getUsername(user) {
    return user.name || '신원미상';
}

console.log(getUsername({ name: '르탄이' })); //르탄이
console.log(getUsername({})); //신원미상

 

👇🏻이 식이 어떻게 나온 거지?

과정

1.  getUserName 의 값을 반환하기

function getUsername(user) {
    return user.name;
}

const person = {
age: 25, 
};

console.log(getUsername(person);

=> undefined이 나온다. (falsy한 값)

 

 

2. 값이 undefined 일 때 "신원 미상"을 출력하기

function getUsername(user) {
	if(user.name === undefined) {
    return "신원 미상"
	}
  return user.name;
}

const person = {
age: 25, 
};

console.log(getUsername(person);

 

 

3. 값이 falsy 할 때로 확장하기

function getUsername(user) {
	if(!user.name) {
    return "신원 미상"
	}
  return user.name;
}

const person = {
age: 25, 
};

console.log(getUsername(person);

 

 

4. 간단히 나타내기

function getUsername(user) {
	return user.name || "신원 미상"
}

const person = {
age: 25, 
};

console.log(getUsername(person);

 

 

5. 화살표 함수 적용하기

const = getUsername = (user) => return user.name || "신원 미상"

const person = {
age: 25, 
};

console.log(getUsername(person);

 

 

논리곱(&&) 연산자

논리곱 연산자 &&는 좌변이 truthy일 때만 우변을 평가한다.

 

쉽게 설명하자면 

A || B

A가 true일 때만 B를 반환한다.

 

조건에 따라 특정 코드를 실행하고자 할 때 유용하다.

 

 

📍예시

// 사용자가 로그인 상태이면 환영 메시지를 출력
let loggedIn = true;
let username = '르탄이';
loggedIn && console.log('환영합니다! ' + username); //환영합니다! 르탄이

loggedIn = false;
loggedIn && console.log('환영합니다! ' + username); //아무것도 출력되지 않음

 

 

 

Optional Chaining (?.)

객체의 속성에 접근할 때 해당 경로에 속성이 존재하지 않아도 에러를 발생시키지 않고, 대신 undefined를 반환한다.

오류를 발생시키지 않기 때문에, 객체의 중첩된 속성에 안전하게 접근할 수 있다.

 

 

📍작동 방식

예를 들어 다음과 같은 객체가 있다고 가정하자:

const user = {
    profile: {
        name: "르탄이",
        details: {
            age: 30,
            location: "서울시 강남구"
        }
    }
};

 

여기서 사용자의 나이를 접근하려면 일반적으로 다음과 같이 작성할 수 있다:

console.log(user.profile.details.age);  // 출력: 30

 

그러나, profile 또는details가 undefined 또는 null일 경우 이 코드는 에러를 발생시킨다.

Optional chaining을 사용하면, 이러한 문제를 예방할 수 있다:

console.log(user.profile?.details?.age); // 출력: 30

 

이제 profile이나 details 중 하나라도 undefined나 null이면, 

?. 연산자는 그 시점에서 평가를 멈추고 undefined를 반환한다:

const user = {};
console.log(user.profile?.details?.age);  // 출력: undefined

 

Optional chaining은 객체의 속성뿐만 아니라, 메소드 호출에도 사용할 수 있다.

예를 들어, 객체가 메소드를 가지고 있지 않은 경우에도 안전하게 메소드를 호출할 수 있다:

const result = user.profile?.getDetails?.();  
// user.profile.getDetails가 존재하지 않으면 undefined 반환

 

 

optional chaining은 중첩된 객체 구조에서 안전하게 값을 읽거나 메소드를 호출할 때 유용하게 사용되며,

코드의 안정성을 높이고 간결하게 만드는 데 도움을 준다.

 

 

 

Null 병합 연산자 (??)

?? 연산자는 좌변이 null이나 undefined일 경우에만 우변을 평가한다.

null 또는 undefined가 아닌 falsy 값들을 유효한 값으로 처리하고 싶을 때 사용된다.

// 사용자의 위치 설정이 없으면 기본 위치를 제공
let userLocation = null;
console.log(userLocation ?? 'Unknown location');  // 출력: Unknown location

userLocation = 'Seoul';
console.log(userLocation ?? 'Unknown location');  // 출력: Seoul

// 사용자 입력이 0인 경우에도 0을 유효한 값으로 취급
const temperature = 0;
console.log(temperature ?? 25);  // 출력: 0

 

 

 

📍||(논리 OR) 와 ??(null 병합 연산자)의 차이!

truthy한 값이냐 아니냐 vs null이나 undefined이냐 아니냐

function displayPreferences(preferences) {
  // `||` 연산자 사용 예
  const textLength = preferences.textLength || 50; // textLength가 0일 경우 50이 할당됨
  console.log(`Text Length: ${textLength}`);

  // `??` 연산자 사용 예
  const itemsPerPage = preferences.itemsPerPage ?? 10; // itemsPerPage가 null 또는 undefined일 때만 10이 할당됨
  console.log(`Items Per Page: ${itemsPerPage}`);
}

// 테스트 케이스
const userPreferences = {
  textLength: 0, // 0이 유효한 값이지만 || 연산자로 인해 50이 출력됨
  itemsPerPage: null // null 값에 대해 ?? 연산자로 인해 10이 출력됨
};

displayPreferences(userPreferences);