변수 뒤의 ?. optional chaining 정리

 

게시판 세부 페이지 구현 중,

반복문으로 게시글들의 정보를 가져온 후,

사용자가 게시글 하나를 클릭하면 모달창으로 해당 세부 페이지를 보여주는 로직을 짰는데

이상하게 계ㅔㅔㅔ속 서버에러가 났다

 

문제의 에러 코드

server error : Cannot read property 'id' of null

 

분명 넘겨준 변수에는 배열값이 예쁘게 들어있는데 말이다ㅏㅏㅏ ㅠ

 

저 에러가 나는 이유는 해당 배열 내에

내가 꺼내고자 하는 값이 할당되어있지 않은 ( == undefined or null )

변수가 있기 때문이었다ㅏㅏㅏ

 

 

*** 나는 배열의 길이값만큼 반복문을 돌리고,

id값이 사용자가 누른 게시물의 id값과 일치하는 각 게시물을 조회해서 들고오는 로직을 짰고,

그 중에서는 사용자가 보지 못하게 거른 몇 개의 게시글이 있었다ㅏㅏㅏ!!!

그 빈 변수들이 에러를 일으켰던 것ㅅㅅㅅ ***

 

그래서 해결 방법을 검색 후 optional chaining 이라는 연산자를 알아냈다!!

 

optional chaining = ?. 이란?

?.은 변수 뒤에 써주면 되고, 해당 변수에 undefined 이나 null 값이 할당되어 있으면,

로직을 멈추고 undefined를 반환한다

ex)

let user = []; // 유저 배열 선언

user 배열 내에는 user값이 있다없다하는 많은 변수들이 있다고 가정

for(i = 0; i < user.length; i++) {

	consol.log(user?.id); // user 값이 undefined 이면 undefined 반환
    
	consol.log(user?.id); // user 값이 존재하면 해당 값의 id를 반환
    
}

 

+++

사실, 나의 경우에는 td 태그에 onclick으로 해당 td의 id 값이 js함수로 넘어와서,

빈 변수를 반환할 가능성이 제로이기 때문에,

이렇게 사용해도 되지만,

만약 빈 변수를 호출하게 되면, 그 순간 함수는 멈추고, undefined를 반환하기 때문에

해당 변수가 빈 변수로 나와서 undefined를 반환해도 괜찮은 경우에만 사용해야 한다ㅏㅏㅏ

 

 

참조 :

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

Optional chaining - JavaScript | MDN

 

https://ko.javascript.info/optional-chaining

옵셔널 체이닝 '?.'