자바스크립트는 다양한 조건문을 활용하여 동적으로 웹 페이지를 제어하는 데 사용됩니다. 이 중에서도 Ternary 연산자는 간단하면서도 효율적인 방법으로 조건에 따른 처리를 할 수 있는 연산자입니다. 이번 글에서는 Ternary 연산자를 사용하여 네비게이션 메뉴의 표시 여부를 제어하는 방법을 알아보겠습니다.
Ternary 연산자란?
Ternary 연산자는 세 개의 피연산자를 가지며, 조건식의 평가 결과에 따라 두 개의 표현식 중 하나를 반환합니다. 일반적인 문법은 다음과 같습니다.
condition ? expression1 : expression2
조건식 condition이 참이면 expression1이 실행되고, 거짓이면 expression2가 실행됩니다.
네비게이션 메뉴 표시 예제
이제 Ternary 연산자를 사용하여 네비게이션 메뉴의 표시 여부를 제어하는 예제를 살펴보겠습니다. 가정해보겠습니다. 웹 페이지에서 로그인한 사용자만이 특정 메뉴를 볼 수 있어야 한다는 요구사항이 있습니다.
HTML 마크업에서는 다음과 같이 네비게이션 메뉴를 구성합니다.
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Profile</li>
</ul>
자바스크립트에서는 Ternary 연산자를 사용하여 사용자가 로그인한 경우에는 모든 메뉴를 표시하고, 로그인하지 않은 경우에는 “Profile” 메뉴를 제외한 메뉴를 표시하도록 구현할 수 있습니다.
const isLoggedIn = true; // 사용자가 로그인한 경우
const menuItems = document.querySelectorAll('.menu li');
menuItems.forEach(menuItem => {
menuItem.style.display = isLoggedIn ? 'block' : menuItem.textContent === 'Profile' ? 'none' : 'block';
});
위의 예제에서는 isLoggedIn 변수를 통해 사용자가 로그인했는지 여부를 나타내고, menuItems 변수를 통해 모든 메뉴 아이템을 선택합니다. 그런 다음 forEach 메서드를 사용하여 각 메뉴 아이템에 대해 Ternary 연산자를 적용하여 표시 여부를 결정합니다.
조건식 isLoggedIn이 참인 경우에는 모든 메뉴를 표시하고, 거짓인 경우에는 menuItem.textContent가 ‘Profile’인 경우에만 메뉴를 숨깁니다.
이와 같이 Ternary 연산자를 사용하면 간단하게 조건에 따른 처리를 할 수 있습니다.
결론
Ternary 연산자는 자바스크립트에서 간단한 조건 처리를 위해 매우 유용한 연산자입니다. 네비게이션 메뉴 표시와 같이 조건에 따라 다른 처리를 해야 할 때 편리하게 사용할 수 있습니다.
더 다양한 자바스크립트 연산자에 대해 알아보고 싶다면 공식 문서를 참조해보세요.
#javascript #navigation