[Javascript] 더 짧은 코드 작성을 도와주는 새로운 연산자들

1. 객체의 유효성을 체크하는 연산자 ?

객체의 속성 값에 접근할 때 하위 속성이 추가로 있을 경우 상위 속성의 유효성을 체크하지 않으면 예기치 않은 오류가 발생할 수 있습니다.

const obj = {
    name : {
        firstName : 'John',
        lastName : 'Doe',
    },
    age : 25
}

기본적으로 조건문으로 유효성을 체크하는 방법은 다음과 같습니다.

if(obj.name){
    if(obj.name.firstName){
        console.log('first name:'+obj.name.firstName)
    }
}

조금 더 세련되게 체크를 하면 다음과 같이 1개의 if문으로 줄일 수 있습니다.

if(obj.name && obj.name.firstName){
        console.log('first name:'+obj.name.firstName)
    }
}

유효성을 체크하는 새로운 연산자인 ?를 사용하면 다음처럼 단일 조건문으로 체크를 할 수 있습니다.

하위 속성에 접근하는 도트 연산자 앞에 ?를 붙여서 상위 속성이 있는지 유효성 체크를 할 수 있습니다.

if(obj.name?.firstName){
        console.log('first name:'+obj.name.firstName)
    }
}

2. 널리시(Nullish) 체크 연산자 ??

널리시(Nullish)는 null 과 undefined 를 말합니다. 변수 값이 널리시인 경우, 변수에 연산자 오른쪽의 값을 대입합니다.

함수 파라미터의 기본 인자 값을 체크하거나, 결과 값이 널리시인 경우 다른 값으로 대체해서 이후의 코드들이 변수의 널리시 값에 대한 예외처리를 하지 않아도 되도록 전처리를 하는데 유용합니다.

사용 방법은 간단합니다.

let x = x ?? 1;

널리시 연산자를 사용할 때 주의할 점이 있습니다.변수가 널리시 값이면 연산자 오른쪽의 값을 변수에 대입한다고 했으므로, 널리시 값이면 연산자 오른쪽의 값을 반환합니다. 그리고, 변수 값이 널리시 값이 아니면 변수 값 자신을 반환합니다.그러니까 널리시 연산자 오른쪽에 값이 한 개만 있지만, 실제로는 이항 연산자처럼 동작하고, 실제로 이항 연산자의 축약 버전입니다.앞서의 사용방법은 다음의 이항 연산자와 동일합니다.

let x = x ? x : 1;

앞서의 객체에서 firstName 유효성을 체크하는 if문은 다음과 같이 축약해서 속성이 없는 경우에 대한 처리까지 할 수 있습니다.

console.log(obj.name?.middleName ?? "No middle name");

3. 조건부 함수호출 축약 표현 연산자 &&

&& 연산자는 양변의 논리 값이 모두 true 이면 true가 되는 논리 연산자입니다.

이 논리 연산자는 조건부로 함수를 호출하는 제어문에서 제어문을 짧게 줄여주는 연산자의 역할도 할 수 있습니다.

함수 호출을 하는 경우에만 제한적으로 사용할 수 있는 제약이 있습니다.

if(x > 0){
    dofunction();
}

이 함수 호출 조건문은 && 연산자를 사용해 다음과 같이 축약해 사용할 수 있습니다.

x > 0 && dofunction();