[JS] ?. (옵셔널 체이닝 연산자)

document.querySelector(".main")?.classList.add("active");

 

• document.querySelector(".main"):
  • HTML 문서에서 .main이라는 클래스를 가진 첫 번째 요소를 선택합니다.
  • 만약 해당 클래스의 요소가 존재하지 않는다면 null을 반환합니다.
• ?. (옵셔널 체이닝 연산자):
  • 옵셔널 체이닝 연산자는 앞에 있는 표현식이 null 또는 undefined일 경우, 그 뒤의 코드를 실행하지 않고 undefined를 반환합니다.
  • 즉, 선택한 요소가 존재하지 않으면 뒤에 있는 classList.add("active")가 실행되지 않게 막아줍니다.
• .classList.add("active"):
  • 선택된 요소의 클래스 목록(classList)에 "active"라는 클래스를 추가합니다.
  • 이 작업은 선택된 요소가 존재할 때만 실행됩니다.

 

 

정리:

해당 코드는 .damble-main-btn 클래스를 가진 요소가 존재할 때만 "active"라는 클래스를 추가하려는 것입니다. 만약 해당 요소가 존재하지 않으면 에러를 발생시키지 않고 안전하게 넘어가게 됩니다. 중간의 ?.는 이를 보장하기 위한 장치입니다.