<자바스크립트> ? 연산자와 ?? 연산자

 

* 조건부 연산자 '?'

 - 조건에 따라 다른 값을 변수에 할당해줄 때, if문 대신 조건부 연산자 '?'를 사용할 수 있다.

let sojuAllowed;
let age = prompt('나이는? : ');

if (age > 18) {
    sojuAllowed = true;
} else {
    sojuAllowed = false;
}

 

 - 나이가 19세 이상이어야 소주를 허용하는 코드를 작성했다. 위를 조건부 연산자를 사용하여 표현하면 다음과 같다.

 

let sojuAllowed = (age > 18) ? true : false;

 

 - 코드가 매우 간결해 졌음을 알 수 있다. 물음표 연산자의 사용법은 다음과 같다.

 변수 = 조건 ? 값1 : 값2;

 

 - 사실 위는 비교 연산자 자체가 true와 false를 반환하므로 물음표 연산자가 필요없긴 하다.

 

 - 하지만 물음표 연산자는 여러개를 연결하여 복수의 조건을 처리할 수도 있다.

 

let age = prompt('나이는? :', 0);

let message = (age < 8)? '어린이 입니다' :
    (age < 18) ? '청소년 입니다' :
    '성인 입니다';

alert(message);

 

 - 첫 번째 물음표에서 조건을 확인하고 falsy이면 :(콜론)을 넘어서 실행되고 여기도 조건이 있으므로 확인하게 된다.

 

 - 두 번째 물음표의 조건이 truty이면 청소년이라고 반환될 것이고 이 또한 falsy라면 콜론을 넘어서 실행되어 반환된다.

 

 - 물음표 연산자는 조건에 따라 반환 값을 달리하려는 목적으로 만들어졌다. 이런 목적에 부합하는 상황이 아니라면 되도록 if 조건문을 사용하자.

 

* null 병합 연산자 '??'

 - null 병합 연산자는 값이 확정되어 있는 변수를 찾을 때 유용하다.

 

 - a ?? b 의 결과는 a가 null 또는 undefined가 아니면 a이고 그 외에는 b이다.

 

 - 여러 변수 중 정해진 변수의 값을 출력하고 싶은데 모두 정해지지 않았을 경우에도 어떤 값을 출력하고 싶을 때 유용하다. 말이 어려우니 코드를 보자.

 

let realName = null;
let nickName = null;

alert( (realName ?? nickName ?? "익명") + "님 반갑습니다");

 

 - 위는 사용자의 이름이 있으면 이름으로, 없으면 닉네임으로, 그것도 없으면 익명으로 이름을 출력하게 하였다.

 

 - 위와 같이 작성하면 빈 값으로 두지 않을 수 있다는 장점이 있다.

 

 - 첫 번째 정의된(defined) 값을 반환한다는 점에서 ||(or)과 다르므로 유의하자. 즉 숫자 0의 경우 ||에서는 false로 보고 다음으로 넘어가지만 ??는 정의되어 있다고 보기때문에 0을 반환한다.

 

* 옵셔널 체이닝 '?.'

 - 옵셔널 체이닝 문법은 비교적 최근에 생긴 문법이다.

 

 - 프로퍼티가 없는 중첩 객체에 에러 없이 접근하기 위해 생긴 문법이다. 이전까지는 &&연산자를 사용해서 없으면 undefined를 반환하도록 했었다.

 

let user = {};

alert( user && user.number && user.number.phone ); // undefined

 

 - 위처럼 기존에는 유저의 번호중 폰 번호에 접근하기 위해서 하나하나 && 연산자를 통해 확인했다. 하나라도 없으면 에러없이 undefined가 반환된다.

 

 - 하지만 위는 아래처럼 옵셔널 체이닝 문법으로 나타낼 수 있다.

 

let user = {};

alert( user?.number?.phone); // undefined

 

- '?.' 는 왼쪽 평가대상의 값만을 평가하고 제 역할을 다한다. 이 때 가장 왼쪽의 평가대상 변수는 반드시 선언은 되어 있어야 한다.

 

 - 옵셔널 체이닝은 obj?.prop 뿐만아니라 obj?.[prop] , obj?.method() 와 같은 형태로도 사용할 수 있다. 각각 obj.prop, obj[prop], obj.method()를 반환 또는 호출하고, 그렇지 않으면 undefined를 반환한다.

 

 

 

 

---

 

 

 

참고

 

 

 

모던 자바스크립트 튜토리얼

모던 JavaScript 튜토리얼