제로초님의 자바스크립트 신간 체험단 미션을 하다가, 이틀 동안 알아차리지 못 해 괴로웠던 '아주 간단한 개념'을 정리해보고자 한다.
// number1
document.querySelector('#num-0').addEventListener('click', onClickNumber);
// number2
document.querySelector('#num-0').addEventListener('click', onClickNumber());
고차함수에 대해 배우던 중 위 두 코드의 차이를 알아차리지 못 해 어려움을 겪었는데, 그 차이를 발견하고나서야 겨우 내용을 이해할 수 있었다.
아래 코드에는 함수명 뒤에 소괄호가 붙어있다. 지금까지 대수롭지 않게 생각했는데, 이 소괄호가 붙냐 안붙냐의 차이를 명확하게 인지하고 있었어야 했다...
-
()는 호출 연산자로, 함수를 호출(실행)한다. 함수의 이름 뒤 괄호를 붙이고, 괄호 안에 인자를 넣으면 함수가 호출되는 것이다. 함수를 호출하면 코드 블록에 담긴 문들이 일괄적으로 실행되기 때문에 결국 이를 "반환값과 같다"고 생각하며 사용할 수 있다.
function()이라고 하는 것과 그 자리에 function을 실행한 결과(반환값)를 넣는 것이 똑같다는 것이다!
-
반면, () 없이 함수명만 있으면 함수를 가리키는 변수라고 생각하면 된다. 자바스크립트에서 함수는 다른 변수와 마찬가지로 객체이다. 그렇기 때문에 어떤 언어에서는 함수의 이름만 언급해도 함수가 실행되지만, 자바스크립트에서는 괄호를 붙여야만 호출된다!
간단히 예를 들어보자면, sayHello라는 문자열 "Hello"를 반환하는 함수가 있을 때, 프로그램 내에서 sayHello는 함수 객체를 sayHello()는 "Hello"라는 함수 결과를 말하는 것이다!
언뜻 알고는 있었는데 확실히 개념이 머리 속에 정리되지 않아 이 두 차이를 제대로 인지 하지 못하였었다. 앞으로는 절대 헷갈리지 말아야지...
