JavaScript에서 함수의 매개변수와 이벤트 객체 사용

JavaScript에서 함수의 매개변수와 이벤트 객체 사용

JavaScript에서 function()의 괄호 안에 값을 넣을지 말지에 대한 차이점은, 함수가 매개변수(parameter)를 받는지 아니면 받지 않는지에 따라 다릅니다. 특히, addEventListener와 같은 이벤트 리스너에서 중요한 개념인 이벤트 객체를 다룰 때 이 차이를 이해하는 것이 중요합니다. 이 글에서는 함수의 매개변수와 이벤트 객체 사용법에 대해 알아보겠습니다.

1. 함수에서 매개변수를 받지 않는 경우

function()처럼 매개변수를 비워두면, 해당 함수는 외부에서 전달된 값을 받지 않습니다. 이 경우 함수는 고정된 동작을 수행하거나 외부 값을 참조하지 않는 로직을 처리할 때 사용됩니다.

예시

function sayHello() {
    console.log('Hello!');
}
sayHello(); // "Hello!" 출력

위 예시에서 sayHello 함수는 매개변수를 받지 않으며, 함수 내에서 외부 데이터를 참조하지 않고 고정된 동작을 수행합니다.

2. 함수에서 매개변수를 받는 경우

반면, function(e)처럼 매개변수를 받는 함수는 호출 시 제공된 값(즉, 인수(argument))을 사용하여 동작합니다. 특히, 이벤트 리스너에서 사용되는 e는 이벤트 객체로, 이 객체는 이벤트가 발생할 때마다 브라우저가 자동으로 생성하여 함수로 전달합니다.

이벤트 객체에는 이벤트의 발생 위치, 클릭된 요소 등 다양한 정보가 담겨 있으며, 이를 활용하면 동적으로 이벤트를 처리할 수 있습니다.

예시 (이벤트 객체 사용)

button.addEventListener('click', function (e) {
    console.log(e.target); // 클릭된 버튼 요소 출력
    e.stopPropagation();  // 이벤트 전파를 막음
});

위 예시에서 e는 이벤트 객체로, 클릭된 요소(e.target)와 같은 정보를 제공하며, e.stopPropagation()을 통해 이벤트의 전파를 막는 기능도 사용할 수 있습니다.

3. 이벤트 객체를 사용하지 않는 경우

만약 이벤트 객체를 사용할 필요가 없다면, 매개변수를 비워두어도 문제가 없습니다. 이벤트와 관련된 추가 정보가 필요 없다면, function()만으로도 충분합니다. 이 경우 함수 내부에서는 이벤트 객체를 참조하지 않고, 고정된 동작을 실행하게 됩니다.

예시 (이벤트 객체를 사용하지 않음)

button.addEventListener('click', function () {
    console.log('버튼 클릭됨');
});

위 예시에서는 클릭된 버튼에 대한 정보나 이벤트 전파를 막을 필요가 없으므로, 매개변수를 비워두고 function()만 사용해도 정상적으로 동작합니다.

요약

• 이벤트 객체를 사용하는 경우: addEventListener 같은 이벤트 리스너에서 브라우저가 자동으로 전달하는 이벤트 객체를 받아서, 클릭된 요소나 발생 위치 등의 정보를 활용합니다.
• 이벤트 객체를 사용하지 않는 경우: 이벤트와 관련된 정보가 필요 없다면 매개변수를 비워두고 function()처럼 단순히 동작만 수행합니다.

JavaScript에서 함수의 매개변수와 이벤트 객체를 어떻게 다룰지에 대한 이해는 더 효율적인 코드 작성과 이벤트 처리에 큰 도움이 됩니다.