TypeScript

TypeScript 옵셔널 체이닝 (Optional Chaining)

심나라 2023. 2. 18. 06:26
728x90

 

  • TypeScript에는 옵셔널 체이닝(Optional Chaining) 이라는 문법이 있습니다. 
  • 객체가 "null" 또는 "undefined"이면 "undefined"를 리턴하고 그렇지 않은 경우 데이터 값을 리턴 합니다.​
  • Optional Chaining은 객체 뿐만 아니라 배열과 함수에도 사용할 수 있습니다.
  • 접근하는 객체의 프로퍼티가 "null" 또는 "undefined"일 수 있는 optional property인 경우 if문을 사용하지 않고 넘어가게 하는 Chaining 방법입니다.
  • 프로그램에서 "?"는 보통 옵셔널을 의미합니다. 있을 수도 있고 없을 수도 있다는 의미 입니다.
  • 예시) data?.property - data 객체가 "null" or "undefined" 인 경우 "undefined"를 리턴하고, 그렇지 않은 경우 data.property를 리턴 합니다.

 

논리 연산자 "&&" 와 옵셔널 체이닝 "?."의 차이점

 

1. 논리 연산자 사용 ( && )

  • 논리 연산자(&&)는 falsy 값을 체크합니다. 
  • falsy 란 false (false, null, undefined, '', 0, -0, NaN) 값을 의미합니다.
  • 예시) return obj.hasName && obj.name - obj.hasName 값이 true(falsy 값이 아니면) obj.name을 리턴하고 false 이면 obj.hasName값 리턴.

 

2. Optional Chaining 사용 ( ?. )

  • ?. 는 "null" 과 "undefined" 만 체크 합니다. 
  • 객체 접근 : return obj?.name - obj가 null, undefined가 아니면 obj.name 리턴.
  • 배열 접근 : return arr?.[0] - arr이 null, undefined가 아니면 배열의 첫 번째 요소(arr[0])를 리턴.
  • 함수 호출 : return func?.() - 함수 func이 null, undefined가 아니면 func함수 호출. 
  • 위 3개의 예시( 객체 접근, 배열 접근, 함수 호출 )에서 null 이나 undefined 이면 undefined를 리턴.​

 

 

728x90