[Javascript] 📚 단축 평가 (feat. 옵셔널 체이닝 연산자, null 병합 연산자)

단축 평가

논리 연산자에 대해 알고 있다면 다음 사항은 잘 숙지하고 있을 것이다.

true && true // true
true && false // false
true || false // true
false || true // true

보통 논리합(||) 또는 논리곱(&&) 연산자 표현식의 평가 결과는 boolean타입으로 인해서 결과값은 true(1) 또는 false(0) 것이라고 생각할 수 있지만, 꼭 불리언 값이 아닐 수 있다. 문자열이나 숫자, 객체를 사용 할 수도 있고, 해당 값이 Truthy 하냐 Falsy 하냐에 따라 결과가 달라진다.

다음과 같이 문자열도 하나의 값으로 평가되는 것을 볼 수 있다.

'Cat' && 'Dog' // "Dog"
'Cat' || 'Dog' // "Cat"

논리합(||) 또는 논리곱 (&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다. 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환한다. 이를 단축 평가라고 한다. 두 연산자 모두 좌항에서 우항으로 평가를 진행한다.

논리곱(&&)

'Cat' && 'Dog' // "Dog"

논리곱(&&) 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환하며, 좌항에서 우항으로 평가가 진행된다. 첫 번째 피연산자 'Cat'은 truthy한 값이므로 true로 평가된다. 하지만 위 표현식은 이 시점에서 평가할 수 없다. 두 번째 피연산자까지 평가해 보아야한다.
즉, 두 번째 피연산자가 논리곱 연산자 표현식의 평가 결과를 결정하며, 논리곱 연산자는 논리 연산의 결과를 결정하는 두 번째 피연산자 'Dog'를 그대로 반환한다.

논리합 (||)

'Cat' || 'Dog' // "Cat"

논리합(||) 연산자는 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환하며, 좌항에서 우항으로 평가가 진행된다. 첫 번째 피연산자 'Cat'은 true로 평가됩니다. 이 시점에 두 번째 피연산자까지 평가하지 않아도 위 표현식을 평가할 수 있다.
논리합 연산자는 논리 연산의 결과를 결정한 첫 번째 피연산자, 문자열 'Cat'을 그대로 반환한다.

그럼 단축 평가는 어떤 상황에서 유용하게 사용될까?

• 어떤 조건이 true 혹은 false일 때 뭔가를 해야한다면 if문을 대체할 수 있다.

let done = true;
let message = "";

if (done) message = "완료";
// 위아래의 코드는 같은 동작을 수행
message = done && "완료";
---

if (!done) message = '미완료'
// 위아래의 코드는 같은 동작을 수행
message = done || '미완료';

• 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때, 단축 평가를 사용하면 에러가 발생하지 않는다.

let elem = null;

let value = elem.value; // TypeError: Cannot read property 'value' of null
let value = elem && elem.value; // // null

• 함수의 인자를 초기화할 때 단축 평가를 사용하여 매개변수의 기본값을 설정하면 undefined로 인해 발생할 수 있는 에러를 방지할 수 있다.

// 단축 평가를 사용한 매개변수의 기본값 설정
function getStringLength(str) {
  str = str || "";
  return str.length;
}

getStringLength(); // 0
getStringLength("hi"); // 2

// ES6) 다음과 같이 매개변수로 기본값을 설정하는 방법도 있다.
function getStringLength(str = "") {
  return str.length;
}

getStringLength(); // 0
getStrringLength("hi"); // 2

---

옵셔널 체이닝 연산자

옵셔널 체이닝 연산자 (?.)는 좌항의 피연산자가 null또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티를 이어간다.

옵셔널 체이닝을 사용하면 프로퍼티가 없는 중첩 객체를 에러없이 안전하게 접근할 수 있다.

다음 예제를 살펴보자.

const students = {
  mark: {
    age: 20,
    score: {
      korean: 90,
      english: 80,
      math: 40,
    },
  },
  john: {
    age: 20,
  },
};

john이라는 사람은 시험점수가 없다. 따라서 특정 과목 점수 정보에 접근하려고 하면 에러가 발생할 것이다.

console.log(students.john.score.math); // TypeError: Cannot read property 'math' of undefined

옵셔널 체이닝을 이용하면 에러를 발생시키지 않고 undefined를 반환한다.

console.log(students.john.score?.math); // undefined

이 문제는 위에서 언급한 단축 평가의 && 연산자로도 해결할 수 있다. 하지만 이처럼 객체의 특정 프로퍼티에 접근하기 위해 거쳐야 할 구성요소가 많아지면 이렇게 코드가 길어지는 단점이 있다.

console.log(
  students && students.john && students.john.score && students.john.score.math
); // undefined

주의 ❗️

• 옵셔널 체이닝을 남용하지 않도록 주의해야한다
  ?.는 존재하지 않아도 괜찮은 대상에만 사용해야한다. 위 예시에서는 사용자의 시험점수가 필수값이 아니다. 따라서 students.john.score?.math를 사용하는 것이 바람직하다.

• ?. 앞의 변수는 꼭 선언되어 있어야 한다
  위의 예시에서 students가 선언되어있지 않으면 students.anything 평가시 에러가 발생한다.

console.log(students?.john); // ReferenceError: students is not defined

students?.john을 사용하려면 let, const를 이용해 students를 정의해야한다.

null 병합 연산자

null 병합 연산자(??)는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.

let firstName = null;
let lastName = null;
let nickName = "바이올렛";

// null이나 undefined가 아닌 첫 번째 피연산자
console.log(firstName ?? lastName ?? nickName ?? "익명의 사용자"); // 바이올렛

옵셔널 체이닝 연산자(?.)와 논리 연산자(&&) / null 병합 연산자(??)와 논리 연산자(||)의 차이

위의 개념만 본다면 옵셔널 체이닝 연산자(?.)와 논리 연산자(&&) 그리고 null 병합 연산자(??)와 논리 연산자(||)는 서로 별다를것이 없어 보인다. 실제로 위에서 설명한 예시들에서 ??를 ||로 바꿔도 그 결과는 동일하다.

하지만 중요한 차이점이 존재한다. 무엇이 다를까 ❓

• 논리연산자 (&&, ||)는 피연산자가 truthy 혹은 falsy한 값인지에 대해 초점을 둔다.
• 옵셔널 체이닝 연산자(?.) 와 null 병합 연산자(??) 는 피연산자가 null 혹은 undefined인지에 대해 초점을 둔다.

이 차이점은 null, undefined과 / ""같은 string 이나 숫자 0 을 구분지어야할 때 중요한 역할을 한다.

• ex) string ""

let str = "";
let length1 = str && str.length;
let length2 = str?.length;

console.log(length1); // ''
console.log(length2); // 0

str && str.length는 str에 ""를 할당하지만, ""을 fasly한 값으로 취급하기 때문에 str의 값인 ""을 반환한다.

반면 str?.length는 str이 null이거나 undefined일 경우에만 undefined를 반환한다. 그런데 ""는 그렇지 않으므로 우항의 프로퍼티를 참조하게 된다. 따라서 비어있는 문자열의 length를 출력하게 되므로 0이 된다.

따라서 빈 문자열 ""이 할당될 수 있는 변수를 사용해 기능을 개발한다면 옵셔널 체이닝 연산자가 더 적합하다.

• ex) 숫자 0

let height = 0;

console.log(height || 100); // 100
console.log(height ?? 100); // 0

height || 100는 height에 0을 할당하지만, 0을 falsy한 값으로 취급하기 때문에 null이나 0을 할당한 것과 동일하게 처리한다.

반면 height ?? 100은 height가 null이거나 undefined일 경우에만 100이 된다. 따라서 0이 출력된다.

따라서 0이 할당될 수 있는 변수를 사용해 기능을 개발한다면 null 병합 연산자가 더 적합하다.