옵셔널 체이닝

if (sensorA.type.pm10)
	...
    
if (sensorA.type.pm25)
	...

옵셔널 체이닝은 타입스크립트에만 있는 문법은 아니다. 최근 자바스크립트에도 옵셔널 체이닝이 쓰인다.

 

자바스크립트의 옵셔널 체이닝

이해를 돕기 위해 아래와 같은 객체 두개를 사용한다.

const sensorA = {
  "mac_addr" : "***",
  "type" : {
    "pm10" : {
      value: 123,
      avg_value: 50,
      max_value: 150,
      min_value: 30
    },
    "pm25" : {
      value: 123,
      avg_value: 50
    }
  }
}

const sensorB = {
  "mac_addr" : "***",
  "type" : {
    "pm10" : {
      value: 100,
      avg_value: 50,
    },
    "temp" : {
      value: 20,
      avg_value: 15,
      max_value: 23
    }
  }
}

위 예시에서 사용된 두개의 객체는 센서에 대한 객체이며, 각 센서는 mac_addr이란 필드와, type이란 필드를 가진다.

type필드는 센서가 측정할 수 있는 값들에 대한 정보를 가지며 각 값들은 (value, avg_value, max_value, min_value)중 1개 이상의 값을 가진다.

ex) sensorA의 pm10은 max_value를 제공하지만, sensorB의 pm10은 max_value를 제공하지 않음.

 

이때 각 센서마다 어떠한 값을 가지는지 모르는 상태에서 우리는 값에 안전하게 접근하기위해 if문 같은 방법을 사용할 수 있다.

if (sensorA.type.["pm10"] && sensorA.type.["pm10"].max_value)
	...
    
if (sensorB.type.["pm25"] && sensorB.type.["pm25"].avg_value)
	...

이러한 if문을 사용하여, 해당값의 존재여부를 검사 후 해당값에 접근하는 방법을 통해 우리는 객체에 접근할 수 있다.

 

옵셔널 체이닝은 이 과정을 줄여줄 수 있다.

console.log(sensorA.type.pm10?.max_value ?? 0)
console.log(sensorB.type.pm25?.avg_value ?? 0)

 

이를 통해 첫번째 줄의 경우 pm10의 max_value가 존재하므로 150이라는 값을 리턴해 줄것이다.

하지만 두번째 줄의 경우 pm25라는 값을 가지지 않으므로, 0을 리턴해주게 될 것이다.

 

 

주로 사용되는 옵셔널 체이닝

A?.B?.C

가장 많이 사용되는 방법이며, 다음과 같다.

A가 존재한다면 B를 검사한다. 이후 B가 존재한다면 C를 리턴한다. 하지만 이때 C에대한 결과는 알 수 없다.

C가 만약 undefined이지만, 안전한 값을 사용해야 한다면 ?? 를 같이 사용해야한다.

ex) A?.B?.C ?? 0

 

A.B?.()

A객체에서 B라는 는 함수가 존재할때 실행이 되고, 없다면 undefined를 리턴하게 된다.