조건 관리하기 ⚖️

코드를 작성할 때, 조건을 활용한다면 특정 조건 하에 코드의 흐름을 바꾸거나 다른 결과를 도출하는 등의 진행을 유도할 수 있다. 그러한 조건을 다룰 수 있는 방법은 여러가지가 존재하는데 대개 if 나 삼항연산자를 통한 방법 등이 익숙한 방식이지 않을까 싶다. 이번 포스팅에선 위 두 가지 방법을 포함하여 조건을 관리할 수 있는 자바스크립트 문법들을 알아보고자 한다.

if 와 삼항연산자 ❔

조건을 다루는 가장 기본적인 문법인 if 와 삼항연산자의 문법은 다음과 같다.

// if 문
if (condition1) {
  console.log('if');
} else if (condition2) {
  console.log('else if');
} else {
  console.log('else');
};
  
// 삼항연산자 (Ternary operator)
condition ? "if true" : "if false";

다들 알겠지만, 두 가지 문법에 대해 간단히 설명하면 if 문은 우선적으로 조건을 제시하고, 해당 조건에 대해 truthy 한 값이면 if 문 내의 구문을 실행하고, 반대의 경우 else if 혹은 else 의 경우를 실행하거나 코드 흐름을 이어간다.

삼항연산자는 참 아니면 거짓인 상황에서 if 문을 축약하여 작성할 수 있는 문법으로, 위 예시에선 condition 이 참일 경우 "if true" 영역을 실행하고 반대의 경우 "if false" 의 영역을 실행한다. 간단하게 말하자면 if 와 else 의 경우 만을 정의할 때 유용하게 사용할 수 있는 문법이다.

삼항연산자를 통해 if 문을 축약하여 사용할 수 있지만, falsy 인 경우를 꼭 규정해야 한다는 점에서 나름대로의 아쉬움이 있는 문법이다. 그렇기에 true 인 경우만 규정하고 싶은 경우 다음과 같은 문법을 사용할 수 있다.

단축 평가 ✅

단축 평가는 논리 연산자(논리곱: &&, 논리합: ||)를 활용하여 조건을 관리할 수 있는 방법이다. 보통 논리 연산자는 복수인 조건들의 관계를 정하고자 할 때 사용하는데, 논리연산자의 유용한 사용 방법을 활용하면 조건을 좀 더 유연하게 다룰 수 있다. 논리 연산자를 활용한 출력 값은 다음과 같다.

const truthy = "TRUE"

false && truthy // false
truthy && false // false
truthy && true // true
true && truthy // "TRUE"

truthy || false // "TRUE"
truthy || true // "TRUE"
false || false // false
false || truthy // "TRUE"

위 예시를 보면 경우에 따라 해당 영역의 결과를 출력하는데 true , false 가 아닌 해당 변수의 값인 "TRUE" 가 반환되는 것을 확인할 수 있다. 이처럼 논리 연산자는 단순히 전체의 결과가 truthy 혹은 falsy 한 값인지를 판단하는 것만이 아니라, 경우에 따라 다른 값을 반환하도록 하는 방식으로도 활용할 수 있다.

arr.map(a => 실행 구문);

예를 들어 다음과 같은 경우에 arr 라는 변수가 배열이라면 해당 배열이 온전한 형태를 가지면 문제가 없지만, 배열이 아닌 undefined 와 같은 값이 들어올 경우 map() 메서드를 실행하지 못하고 에러가 발생한다. 이러한 문제를 다음과 같이 해결할 수 있다.

arr && arr.map(a => 실행 구문);

다음과 같이 수정하면 arr 값이 undefined 일 경우, 논리곱 연산자 뒤 구문인 arr.map() 은 실행되지 않고 undefined 값을 반환하고 끝난다. 그렇기 때문에 위와 같은 상황에서 오류 핸들링을 손 쉽게 할 수 있다. 이와 비슷하게 예상되는 오류 상황을 조작할 수 있는 문법이 있다.

Optional chaining ⛓️

옵셔널 체이닝(Optional chaining)은 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있는 자바스크립트 문법이다. 그렇기 때문에 해당 문법을 잘 사용하면 참조 누락 가능성이 존재하는 체인이 있는 경우 연결된 속성으로 접근하여 더 짧고 간단한 표현식을 만들 수 있도록 도와준다. 무슨 말인지 예시와 함께 알아보자.

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined

console.log(adventurer.someNonExistentMethod?.());
// expected output: undefined

위 예시에서 원래라면 TypeError: Cannot read properties of undefined (reading ~) 이 발생해야 할 코드인데 반환 값으로 undefined 를 반환하고 있다. 그 이유는 .name 이 참조하는 dog 값이 undefined(nullish 값) 이기에 옵셔널 체이닝에서 이를 undefined 로 반환하고 마무리 한 것이다.

사실 해당 코드를 옵셔널 체이닝 없이 작성하고자 하면 다음과 같이 작성할 수 있다.

const dogName = adventurer.dog && adventurer.dog.name

바로 앞의 단축 평가를 활용한 작성법이다. 하지만 해당 코드에 adventure.dog 부분이 반복되는 것이 아주 불-편하게 느껴지므로 Optional chaninig 을 활용하여 보다 더 간략하게 사용할 수 있는 것이다. 또한 다음과 같은 예시에서 유용하게 사용할 수 있다.

arr.map(a => 실행 구문).filter(a => 실행 구문).indexOf...

이어지는 예시와 같이 끝도 없이 길어지는 체이닝에 어지러운 와중에 위 메서드 참조 중 하나라도 nullish 값에 해당한다면 에러가 발생하여 구문 실행조차 하지 못하게 될 것이다. 이러한 부분을 방지하고자 옵셔널 체이닝 문법을 사용하여 사전에 발생할 오류를 방지할 수 있음과 동시에 간략한 코드를 작성할 수 있다.

🔖 출처

벨로퍼트와 함께하는 모던 자바스크립트 : 단축 평가 논리 계산법
MDN Web Docs : Optional chaining