(JS)클린 코드 시리즈1 - Optional Chaining #?. #옵셔널 체이닝

개발할때 보통 api에서 데이터를 가져온 후 Object 형식의 useState에서 setState로 데이터를 넣어준 후 보통 아래처럼 데이터를 사용합니다.

    let fireball = user.skill.fireball;

    or

    (<div>{user.skill.fireball}</div>)

근데 만약 여기서 user.skill이 null이라면 "Uncaught TypeError: Cannot read property 'fireball' of null"
이런 문구의 에러가 발생합니다.

 

여기서 만약 optional chaining을 모른다면

let fireball = user.skill && user.skill.fireball;

or

(<div>{user.skill && user.skill.fireball}</div>)

user.skill.fireball 앞에 user.skill && 을 붙여 유효성 검사를 하고 user.skill이 있다면 user.skill.fireball값을 참조하게 할 것입니다.

사실 user.skill ? user.skill.fireball : '' 이 코드 보다는 깔끔하긴 합니다. 하지만 우리의 optional chaining을 알고 있다면

훨씬 깔끔한 코드를 작성할 수 있습니다.

 

 

 

 

optional chaining은 ?. 이렇게 쓰여지고 각 참조가 null인지 undefined인지 미리 확인하여 줍니다.

let fireball = user.skill?.fireball;

or

(<div>{user.skill?.fireball}</div>)

 

단지 . 앞에 ? 하나 붙이면 Uncaught TypeError 에러를 피할 수 있다니 엄청 훌륭하지 않습니까?!

 

이는 아래의 코드와 기능이 같습니다.

let fireball = ((user.skill === null || user.skill === undefined) ? undefined : user.skill.fireball);

 

 

함수를 호출할때도 optional chaining을 쓸 수 있습니다.

let magicAttack = userSkillTree.Meteor?.();

 

 

만약 ?.을 쓰지 않고 userSkillTree에 Meteor함수가 없다면 TypeError exception (userSkillTree.Meteor is not a function). 에러가 뜰 것입니다.

 

 

이외 object나 array를 참조할때도 쓸 수 있습니다.

 

 

let fireSkill = skill?.['fire' + 'Arrow'];

let userItem = inventory?.[3];

 

이정도 예시만 보아도 optional chaining의 쓰임새를 어느정도 파악 하셨으리라 생각됩니다.

다들 optional chaining과 함께 즐거운 클린 코딩 하세요!

 

 

- 참조 -

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining