[TypeScript] 타입스크립트 옵셔널 체이닝 (Optional Chaining)

🎯 타입스크립트 옵셔널 체이닝 (Optional Chaining)

• 옵셔널 체이닝은 객체뿐만 아니라 배열과 함수에도 사용할 수 있다.
• 접근하는 객체의 프로퍼티가 null 또는 undefined일 수 있는 optional property인 경우 if 문을 사용하지 않고 넘어가게 하는 체이닝 방법이다.
• es2020에서 추가된 문법이며 객체가 null 또는 undefined이면 undefined를 리턴하고 그렇지 않은 경우 데이터 값을 리턴한다.
• 프로그래밍에서 ?는 보통 옵셔널을 뜻한다. 있을 수도 있고 없을 수도 있다. ex) data?.property

 

📝 &&와 ?.의 차이점은?

📕 && 사용

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

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

function 꼬리살랑살랑(dog: Dog): string {
    // -> string | false
    return dog.hasTail && dog.살랑살랑(); 
    // dog.hasTail이 true면 뒤에 연산자(dog.살랑살랑())를 실행, 만약 false면 논리 연산자가 앞에 걸(dog.hasTail) 반환시킨다. 
        // 우리의 의도는 string을 반환하는건데 dog.hasTail가 false면 boolean 값을 반환한다.

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

• 논리 연산자는(&&) falsy(false, null, undefined, ‘’, 0, -0, NaN) 값 체크한다.
  • falsy 한 값이란? false로 평가될 수 있는 값을 의미한다.

 

📕 Optional Chaining 사용

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

// Dog에 tail이라는 객체가 있고 그 안에 살랑살랑이라는 메서드가 있다.


function 꼬리살랑살랑(dog: Dog): string {
    return dog.tail?.살랑살랑();
    // tail이라는 객체가 있다면 살랑살랑 메서드를 호출
    // 주의!! 만약 undefined가 아니면 살랑살랑을 호출하겠지만, 만약 tail이 null or undefined면 옵셔널 체이닝에 의해서 undefined를 리턴한다.
}

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

 

📝 옵셔널 체이닝은 객체뿐만 아니라 배열과 함수에도 사용할 수 있다.

//Object
type CustomResponse = {
    data: any;
};
const findData = (response?: CustomResponse) => {
    return response?.data;
};

//Array
type Post = {
    comments?: string[];
};
const getFirstComment = (post: Post) => {
    return post.comments?.[0]; // index로 접근할 때도 사용 가능
};

type Cat = {
    sitDown?: () => void;
};

function trainCat(cat: Cat) {
    cat.sitDown?.(); // ** sitDown이라는 함수가 cat 객체이 있을 때 호출 가능or undefined로 실행 X
}

 

📝 옵셔널 체이닝을 사용하면 if문을 줄여준다.

📕 if문 사용

type Tail = {
    살랑살랑: () => void;
};

type Human = {
    call: (dogName: string) => void;
};

type Dog = {
    name: string;
    tail?: Tail;
    주인?: Human;
};

function petDog(dog: Dog) {
    // != null: null 또는 undefined가 아닌 경우
        // 가독성이 안 좋아진다.
    if (dog.주인 != null) {
        dog.주인.call(dog.name);
    }
    if (dog.tail != null) {
        dog.tail.살랑살랑();
    }
}

 

📕 if문 대신 옵셔널 체이닝 사용

type Tail = {
    살랑살랑: () => void;
};

type Human = {
    call: (dogName: string) => void;
};

type Dog = {
    name: string;
    tail?: Tail;
    주인?: Human;
};

function petDog(dog: Dog) {
    dog.주인?.call(dog.name); // **
    dog.tail?.살랑살랑(); // **
}

• 코드가 간결해진다.
• 그러나 if문과 같이 분기 처리를 해줘야 된다. 주인이 없다면 에러를 던지는 처리를 해줘야 된다.