[javascript] 애로우 함수와 동적 스타일 변경

11 Dec 2023

javascript

자바스크립트에서 애로우 함수(arrow function)을 사용하여 코드를 간결하게 작성할 수 있습니다. 애로우 함수는 함수 표현식을 간단히 하고, this의 스코프를 함수가 정의된 시점에 상속하여 사용할 수 있습니다.

애로우 함수를 사용하면 함수를 간결하게 정의할 수 있어 코드를 읽고 이해하기 쉽습니다. 예를 들어, 다음과 같이 애로우 함수를 사용하여 간단한 함수를 정의할 수 있습니다.

const add = (a, b) => a + b;

또한, 동적으로 HTML 요소의 스타일을 변경할 때 유용하게 애로우 함수를 활용할 수 있습니다.

<!DOCTYPE html>
<html>
<body>

<button id="myButton">Click me</button>

<script>
  const button = document.getElementById('myButton');
  button.addEventListener('click', () => {
    button.style.backgroundColor = 'blue';
    button.style.color = 'white';
  });
</script>

</body>
</html>

위의 예제에서 addEventListener를 사용하여 버튼을 클릭할 때 스타일이 변경되도록 했습니다. 이때 애로우 함수를 사용하여 콜백 함수를 정의하여, 버튼 요소에 동적으로 스타일을 변경할 수 있었습니다.

애로우 함수는 코드를 간결하고 가독성을 높여주며, 동적으로 스타일을 변경하는 등 다양한 상황에서 유용하게 활용할 수 있습니다.

더 보기: