자바스크립트는 동적으로 웹 페이지의 DOM을 조작하는 데 매우 강력한 언어입니다. 이때 Ternary 연산자를 사용하면 조건에 따라 DOM을 조작할 수 있어 코드의 간결성과 가독성을 높일 수 있습니다.

Ternary 연산자는 if-else 문의 한 줄 버전으로, 세 개의 피연산자를 사용합니다. 조건을 평가하고, 조건이 참일 경우 첫 번째 값이 반환되고, 조건이 거짓일 경우 두 번째 값이 반환됩니다.

아래 예제는 Ternary 연산자를 사용하여 ‘myElement’라는 id를 가진 요소를 조작하는 코드입니다.

const myElement = document.getElementById('myElement');

const isClicked = true;
const color = isClicked ? 'red' : 'blue';

myElement.style.color = color;

위 코드에서는 ‘isClicked’라는 변수에 true를 할당하고, Ternary 연산자를 사용하여 ‘color’ 변수에 값을 할당합니다. ‘isClicked’가 참일 경우 ‘red’를, 거짓일 경우 ‘blue’를 할당하게 됩니다. 그 후, ‘myElement’의 ‘style.color’ 속성에 ‘color’ 변수를 적용하여 요소의 텍스트 색상을 변경합니다.

Ternary 연산자를 사용하면 if-else 문을 작성하는 대신 한 줄로 간단하게 조건에 따라 DOM을 조작할 수 있습니다. 이를 통해 코드의 가독성과 유지 보수성을 향상시킬 수 있습니다.

더 자세한 정보를 원하시면, MDN 문서를 참고하세요.

#javascript #DOM조작