[Javascript] Direct(직접) vs Indirect(간접적) 함수 실행

자바스크립트 함수 실행

자바스크립트에서 함수를 'scheduled for execution'할 수 있는 두 가지 방법이 있다.

1. 함수를 직접 실행시키는 방법 : someFunction()
2. 나중에 함수 실행을 시키는 방법(비동기) : el.addEventListener('click', someFunction)

---

일반적인 경우의 함수/실행

function init() {
  // Do initialization work
  const myElement = document.createElement('li');
  myList.append(myElement);
}

init();

'init' 함수가 정의되면 해당 함수 내부에서 <li> 요소를 생성하고 이를 다른 요소(스크립트 내 다른 곳에서 선택되었을 가능성이 있는 myList)에 추가하는 코드를 실행한다.

'init' 내부 코드는 'init'함수가 로드되고 파싱될 때 즉시 실행되진 않고,  'init'함수가 호출된 후에만 실행된다. (init(); 부분)

 

위 내용들은 기존에 잘 알고 있는 내용이다. 그럼 다음 경우를 살펴보자.

 

복잡한 경우의 함수/실행

function greet() {
  alert('Hi there!');
}

someButton.addEventListener('click', greet);

❓ 'greet'에서 왜 괄호 '()'가 빠져있을까? 다음과 같이 함수를 실행 시키려면 '()'를 추가해야 하지 않나?

someButton.addEventListener('click', greet());

추가하면 안된다!

 

'()'를 추가하면 addEventListener에 'greet' 함수에 대한 참조를 전달하지 않고 대신 'greet()'를 호출한 결과를 전달한다.

따라서, 버튼 클릭(ex)이 발생했을 때 JavaScript가 'greet' 함수를 실행해야 한다고 자바스크립트에 전달하기 위해선,

'greet' 다음에 '()'를 추가해서는 안된다.

---

References vs Function Parameters

'greet' 함수가 매개변수(name)을 받고 다음과 같이 버튼에 연결 하고 있다.

function greet(name) {
  alert('Hi ' + name);
}

someButton.addEventListener('click', greet);

 

❓ 브라우저/자바스크립트가 name에 어떤 값을 입력해야 하는지 알 수 있을까? 알 수 없다.

현재, 버튼을 클릭하면 'Hi undefined'로 출력 될 것이다. 이러한 문제를 해결할 두 가지 방법이 있다.

 

• 방법 1

function greet(name) {
  alert('Hi ' + name);
}

someButton.addEventListener('click', function() {
  greet('Max'); // 출력 : 'Hi Max'
});

• 방법2

function greet(name) {
  alert('Hi ' + name);
}

someButton.addEventListener('click', greet.bind(null, 'Max')); // 출력 : 'Hi Max'

 

'방법1'은 addEventListener의 이벤트 처리 핸들러로 'greet' 함수를 전달하지 않고, 익명 함수를 만들어 전달(해당 함수에 대한 참조가 전달됨)하여 해결하였다.

• 익명 함수 정의 뒤에 괄호를 추가하지 않았기 때문에 JavaScript가 라인에 도달했을 때 즉시 실행되지 않고, 내부 코드는 버튼을 클릭한 후에만 실행된다.

 

'방법2'에서는 bind() 메소드를 호출하여 해결. 

bind() 메소드란❓
bind() 메소드가 호출되면 새로운 함수를 생성(반환)한다.
받게되는 첫 인자의 value로는 this 키워드를 설정하고, 이어지는 인자들은 바인드된 함수의 인수에 제공된다.

bind 메소드의 첫 번째 매개변수는 항상 this 키워드 참조이고, 그 이후의 다른 모든 매개변수는 호출될 함수(즉, bind를 호출한)에 공급되는 인수이다. 따라서 'greet' 함수의 첫 번째 매개변수는 bind 메소드에 전달된 두 번째 매개변수를 가져온다.

따라서 'greet'함수가 호출될 때 bind 메소드에 전달된 두 번째 매개변수 'Max'를 가져와 출력할 수 있게 된다.

 

이 외에도 bind 메소드가 쓰여지는 경우는 다양하니 참고 링크를 꼭 보자!

---

영어 원문보면서 정리한건데 영어를 한글로 정리하기가 쉽지가 않다..맞게 정리한건지도 모르겠다..😂

 

참고 링크

• https://academind.com/tutorials/function-bind-event-execution
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind