Nullish Coalescing을 이용하여 자바스크립트에서의 툴팁 처리 방법
툴팁은 웹 앱이나 웹사이트에서 사용자에게 추가적인 정보를 제공하는데 사용되는 일반적인 기능입니다. 간단한 예로, 마우스를 요소 위에 올렸을 때 해당 요소에 대한 설명이 툴팁으로 표시될 수 있습니다. 이번 포스트에서는 자바스크립트에서 Nullish Coalescing 연산자를 활용하여 툴팁의 기본값을 설정하는 방법을 알아보겠습니다.
Nullish Coalescing 연산자란?
| Nullish Coalescing 연산자는 두 개의 피연산자를 가지고 첫 번째 피연산자가 null 또는 undefined인 경우에만 두 번째 피연산자를 반환하는 연산자입니다. 이 연산자는 ES2020에서 도입되었으며, 논리 연산자인 OR 연산자( | )와 비슷한 역할을 합니다. 하지만 OR 연산자는 falsy한 값을 처리할 때 예상과 다를 수 있는 경우가 있어서 Nullish Coalescing 연산자가 도입되었습니다. |
툴팁 처리에서의 Nullish Coalescing 활용
툴팁 처리에서 Nullish Coalescing 연산자를 활용하여 기본값을 설정할 수 있습니다. 일반적으로, 툴팁의 텍스트는 변수에 저장되어 있습니다. 그리고 이 변수의 값이 null 또는 undefined인 경우에 기본값을 사용하고 싶을 수 있습니다. 다음은 Nullish Coalescing 연산자를 사용하여 툴팁의 기본값을 설정하는 예시 코드입니다.
const tooltipText = null;
const defaultText = "No information available";
const tooltip = tooltipText ?? defaultText;
console.log(tooltip); // "No information available"
위의 코드에서, tooltipText 변수의 값은 null입니다. 따라서 Nullish Coalescing 연산자를 사용하여 tooltip 변수에는 defaultText 값인 “No information available”이 할당됩니다. 따라서 콘솔에는 “No information available”이 출력됩니다.
결론
Nullish Coalescing 연산자는 자바스크립트에서 툴팁 처리 등에서 기본값을 설정하는데 유용한 기능입니다. 이 연산자를 사용하면 변수의 값이 null이거나 undefined인 경우에만 기본값을 설정할 수 있습니다. 깔끔하고 간결한 코드를 작성할 수 있으며, 읽기 쉽고 유지보수하기도 좋습니다.