옵셔널 체이닝

optional chaining 연산자 (?.)는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. 

 

간단히 예기하자면 에러가 발생하는 것 대신에 표현식 리턴 값으로 undefined를 준다. 함수 호출에서 사용될 때, 만약 주어진  함수가 존재하지 않는다면, undefined를 리턴한다. 

 

오늘 작업을 하다가 이미지 태그의 "src" 속성값을 읽어 오려고 했다.

그리고 나서 interlock, 만약 값이 없다면 어떻게 해야될까 고민이됬다. 

 

var imgData = document.querySelector('#img_id_box').src;

imgData로 값을 받아서 쓰긴했는데, src 없을 땐 에러를 띄워버려서 어떻게 해야 조건해결이 될까 고민을 하다가

구글링을 해봤고 옵셔널 체이닝이란걸 발견했다.

 

그래서 한번 사용해봤다. 

var imgData = document.querySelector('#img_id_box')?.src;

나는 이미지를 드래그 드롭했을 때 id 값을 "img_id_box"를 갖는 img 태그를 생성했고, 만약 드래그 앤 드롭이 발생하지 않으면 생성하지 않게 설계 헀다. 

 

그래서 위 와같은 내용이 호출 됬을 때 드래그 앤 드롭이 안됬으면 함수를 리턴하게 만들어서 에러 없이 문제를 해결했다.

 

익숙치는 않지만 정말 유용한 기능인거같다. 앞으로도 많이 활용했으면 좋겠다.