타입스크립트 Optional Chaining

Optional Chaining

접근하는 객체의 프로퍼티가 null 또는 undefined일 수 있는 optional property인 경우 if문을 사용하지 않고 넘어가게 하는 체이닝 문법이다.

 

if문을 작성하지 않고 다음으로 넘어가게 하려면 객체 체이닝할때, 앞에 물음표를 작성하면된다. data?.property

프로그래밍 언어에서 물음표(?)는 optional 하다. 즉, 존재할수도 있고 존재하지 않을수도 있다. 라는 의미로 이해하면된다.

 

es2020에서 추가된 문법이며 객체가 null 또는 undefined이면 undefined를 리턴하고 그렇지않은 경우 데이터 값을 리턴한다.

 

optional chaining으로 빈번하게 등장하는 null, undefined체크 시 간결한 코드를 작성할 수 있다.

?.과 같이 체이닝한다.

 

 

 

📝&&와 ?.의 차이점

optional Chaining과 자주 비교되는 논리 연산자 있다. 바로 && 연산자이다.

가장 큰 차이점은 falsy한 값을 체크한다는 것이다. falsy한 값이란 false로 평가될수 있는 값을 의미한다. 

(false, null, undefined, '', 0, -0, NaN) 값 체크

 

&&	falsy(false, null, undefined, '', 0, -0, NaN) 값 체크
?.	null과 undefiend만 체크

 

📕 && - false로 평가될수 있는 값

예제에 Dog타입에 hasTail 프로퍼티가 있고 만약 꼬리가 있을 경우 살랑살랑 함수가 있다.

꼬리살랑살랑 함수는 Dog타입의 dog파라미터를 받아서 dog.hasTail이 있으면 즉 ture일떄 && 논리연산자가 뒤의 함수를 실행 시킨다. dog.살랑살랑()함수가 호출이된다.

 

dog.hasTail이 false인 경우 &&논리연산자가 뒤에함수를 실행시키지 않고 앞에 함수를 반환한다.

 

그래서 이런 방법이 아닌 if문을 써서 hasTail이 있을 때만 dog.살랑살랑을 return하게 하면된다.

type Dog = {
    hasTail: boolean;
    살랑살랑: () => string;
}

/*
* hasTail이 ture인 경우 반환값은 string이지만
* false인 경우 &&연산자(and연산자)에 의해 dog.hasTail을 반환
* 따라서 의도와는 달리 string 또는 false를 반환하게됨
 */

function 꼬리살랑살랑(dog:Dog):string{
    // -> string | false
    return dog.hasTail && dog.살랑살랑();

    //이렇게 써야함
    // if(dog.hasTail){
    //  dog.살랑살랑();
    // }
}

 

📕 Optional Chaining - ?.는 null과 undefined만 체크

 

type Dog에 tail 객체가 있고 그안에 살랑살랑 메서드가 있다. 옵셔널 체이닝은 객체에 접근할 때 객체를 체이닝할 때 사용을한다. undefined가 아니면 살랑살랑()을 호출해서 string을 반환하지만 tail이 null 또는 undefined인 경우 옵셔널 체이닝을 의해서 undefined를 리턴하게 된다. 

꼬리살랑살랑() 함수는 string또는 undefined를 리턴하게된다.

type Dog = {
	tail?: {
	살랑살랑: () => string;
    };
};

function 꼬리살랑살랑(dog: Dog):string{
	return dog.tail?.살랑살랑();
}

 

📝 Optional Chaining 활용

옵셔널 체이닝은 Array와 Function에도 사용할수 있다.

인덱스에 접근할 때도 객체체이닝할때와 같게 ?. 으로 작성한다.

 

• 객체 접근: obj.?name obj가 null, undefined가 아니면 name을 리턴
• 배열 접근: arr?.[0] arr이 null, undefined가 아니면 첫번째 요소를 리턴 
• 함수 호출: func?.() 함수 func이 null, undefined가 아니면 func함수 호출

 

object, Array

 

 

Optional Function

함수를 호출할 때도 ?. 을 작성하면 sitDown 함수가 cat프로퍼티가 Cat이라는 객체에 있을 때 호출할수 있게 된다.

그렇지 않으면 undefined이기때문에 실행을 하지않는다.

 

 

Optional Chaining 좋은 점은 if문을 줄여준다.

petDog에서 null과 undefined를 체크하는 if문이 반복되고 있다. 이러한 if문이 여러개가 있다면 가독성이 좋지 않다.

이럴땐 옵셔널 체이닝을 활용하면 코드가 매우 간단해진다.🤓

optional chaining으로 리팩토링 - if문을 없애고 코드 한문장 표현

옵셔닝 체인은 ?.으로 null이나 undefined값이 아닌 경우 dog?.tail?.살랑살랑?.() 코드를 실행한다.