ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [JAVASCRIPT-모던자바스크립트] 옵셔널 체이닝 '?.'2
    Javascript& React study 2021. 10. 30. 22:28
    728x90
    반응형
    SMALL
    옵셔녈 체이닝을 남용하지 말아야 하는 이유
    ?.의 경우 존재하지 않아도 괜찮은 대상에서만 사용을 하는 것이 좋다.
    ?. 앞의 변수는 꼭 선언이 되어있어야 한다.

    변수 user가 선언되어 있지 않는다고 한다면 user?.anything 평가시 에러가 발생합니다.
    // error
    user?.address;

    user?.anything을 사용하게 되면 let이나 const,var를 사용하여 user를 정의해야 한다. 이렇게 옵셔널 체이닝은 선언이 완료된 변수를 대상으로만 동작하게 된다.

    단락 평가

    ?.는 왼쪽 평가대상에 값이 없게 된다고 한다면 즉시 평가를 멈추게 된다. 이런 평가방법을 단락 평가 (short-circuit)라고 부른다.

    그렇기 때문에 함수 호출을 비롯하여 ?. 오른쪽에 있는 부가 동작은 ?.의 평가가 멈췄을 때 더는 일어나지 않는다.

    let user = null;
    let x = 0;
    
    user.sayHi(x++); // 아무 일도 일어나지 않는다.
    
    alert(x); // 0, x는 증가하지 않는다.

    ?.()와 .[]

    ?.은 연산자가 아닙니다. ?.은 함수나 대괄호와 합께 동작하는 특별한 문법 구조체 (syntax construct)이다. 함수 관련 예시와 같이 함께 존재 여부가 확실하지 않는 함수를 호출할 경우 ?.()를 어떻게 쓸 수 있는지 알아보자.

    한 객체에는 메서드 admin이 있지만 다른 객체에는 없는 상황이다.

    let user1 = {
    	admin() {
        	alert('관리자 계정입니다.');
        }
    }
    
    let user2 = {};
    
    user1.admin?.(); // 관리자 계정입니다.
    user2.admin?.();

    두 상황 모두에서 user 객체는 존재하기 때문에 admin 프로퍼티는 .만 사용해 접근했습니다.

    그리고 난 후 ?.()를 사용해 admin의 존재 여부를 확인했습니다 user1엔 admin이 정의되어 있기 때문에 메서드가 제대로 호출되었고 반면 user2엔 admin이 정의되어 있지 않음에도 불구하고 메서드를 호출하게 되면 에러 없이 그냥 평가가 멈추는 것을 확인할 수 있습니다. 

    .대신 대괄호 []를 사용해서 객체 프로퍼티에 접근하는 경우에는 ?.[]를 사용할 수 있다. 위 예시에서는 ?.[]를 사용하게 되면 객체 존재 여부가 확실하지 않는 경우에도 안전하게 프로퍼티를 읽을 수 있다.

    let user1 = {
    	firstName: "Violet"
    };
    
    let user2 = null; // user2는 권한이 없는 사용자라고 가정
    
    let key = "firstName";
    
    alert( user1?.[key] ); // Violet
    alert( user2?.[key] ); // undefined
    
    alert( user1?.[key]?.something?.not?.existing ); // undefined

     

     

    728x90
    반응형
    LIST

    댓글

Designed by Tistory.