JavaScript 프로젝트를 하면서 헷갈리는 것 적기 - 1편
1. 자바스크립트에서 함수를 사용할때 괄호 있고 없고의 차이는 뭔가요?
// 1번 : infinite함수를 괄호 없이 사용했을때
<script type="text/javascript">
window.onload = function() {
setInterval(infinite, 5000)
};
function infinite() {
console.log("aaa");
};
</script>이 경우에는 5초 후, console창에 aaa가 5초마다 찍힌다.
이름 자체는 function infinite(){console.log("aaa");}와 같이 함수 자체의 내용을 담고 있다.
// 2번 : infinite함수를 괄호 있이 사용했을때
<script type="text/javascript">
window.onload = function () {
setInterval(infinite(), 5000);
};
function infinite() {
console.log("aaa");
};
</script>시작과 동시에 aaa가 찍히고 더이상 찍히지 않는다. infinite()를 콜백함수로 쓰면 실행한 후 바로 리턴값을 받아준다는 의미이므로 undefined가 반환된다.
니꼴라스님이 전에 설명해줬던게 다시 어렴풋이 떠올랐다.
콜백함수를 쓸때 ()없이 쓰는건, 콜백함수를 호출하는 함수가 호출 스위치를 나중에 누르게 하도록 하는 것. 반면, ()을 쓰면 자기 자신이 스위치를 먼저 눌러버려서 바로 함수를 실행해버리고 다시 누를 수 없다는 것.
잊지말자!
2. AddEventListener과 콜백함수 알아보기
먼저, AddEventListener() 이란?
: 특정 이벤트가 발생했을 경우를 선택해 주는 함수
그리고 콜백함수란?
: 어떤 사건이 발생한 다음 연이어 작동하는 함수
<script type="txt/javascript">
// 예제 1
// input요소에 글자를 입력할때마다 현재 입력된 글자가 무엇인지 알려주는 코드를 작성했을 때.
document.querySelector('input').addEventListener(
'input', (event) => {
console.log('입력한 글자:', event.target.value);
});
</script>🤓 : input요소의 변경이 일어날때마다 알려주는 것을 만들려고 하니까 input요소가 변경될때마다 EventListener이 파악해주는것이 좋겠지?
위처럼 코드를 작성하면, input 요소가 변경된 직후에 화살표 함수가 실행된다. 이 말은 input태그에서 입력할때마다 입력된 문자열을 가지고 있는셈. (글자를 입력할때마다 콜백함수를 실행한다)
<script type="txt/javascript">
// 예제2
// button 누를때마다 '버튼클릭'이라는 콘솔로그 찍게 하기
const onClick = () => {
console.log('버튼클릭');
}
document.querySelector('button').addEventListener('click', Onclick);
</script>원래 익명함수였던 콜백함수를 onClick 변수에 담은 다음 호출했다. 그 다음, addEventListener 함수에 'click' 이벤트가 발생할때마다 onClick 콜백함수를 호출하게 하였다.
하지만, addEventListener('click', onClick())을 하게 되면, 그 즉시 함수를 수행하는데 우리는 버튼을 누를때만 onClick이 수행되길 원하므로 버튼을 누르기도 전에 처음 렌더링될때 바로 함수가 수행될 것이다. 정작 버튼을 누를때에는 onClick 함수에서 생략된 undefined가 리턴돼 아무것도 실행되지 않는다.(기본적으로 함수에서 아무것도 리턴하지 않을땐 undefined를 리턴)
출처 :
https://kth990303.tistory.com/169
https://hoo-dev.tistory.com/entry/Javascript-Javascript%EC%97%90%EC%84%9C-%ED%95%A8%EC%88%98-%ED%98%B8%EC%B6%9C-%EB%95%8C-%EA%B4%84%ED%98%B8%EC%9D%98-%EC%9C%A0%EB%AC%B4
