이벤트리스너에 매개변수 전달하기
이벤트리스너로 함수를 실행하고자 할때, 원하는 매개변수를 넣는 방법!
함수에 바로 매개변수를 넣어서 이벤트리스너에 할당하면 함수가 바로 실행되므로 다른방법이 필요하다.
바로 익명함수! 익명함수를 사용하면 쉽게 해결할 수 있다.
//아래의 함수를 이벤트 리스너에 할당하자.
function test(user) {
console.log(user.age);
}
//이벤트리스너에 함수가 할당되지 않고, 바로(클릭과상관없이) soon.age값이 바로 콘솔에 찍힌다.
aElement.addEventListener('click', test(soon));
//이벤트리스너에 함수가 할당되어 정상적으로 작동!
aElement.addEventListener('click', function () {
test(soon);
});
클로저
지금 머릿속으로 떠오르는 클로저의 개념을 읊어보자.
클로저는..
외부변수에 접근할 수 있는 내부함수.
함수와 함수를 둘러산 어휘적환경의 조합.
도통 감이 안왔는데, 오늘 조금은 감을 잡..진못하고 느꼈다.
function test(){
let a = 0;
function innerTest(){
return a = a+1}
return innerTest
}
// test()가 계속 호출되므로 0이 계속 할당되어 1만 출력됨
test()() //1
// 내부함수만을 실행시킨다.
let closer = test();
closer()//1
closer()//2
closer()//3
내부함수만을 실행시킨다.
클로저는 내부함수와 내부함수가 선언된 어휘적환경의 조합이다.
내부함수 innerTest는 같은 스코프의 지역변수인 a를 기억한다.
이값을 기억하고 함수내부의 가공을 거쳐 출력한다. 이 출력값은 다시 같은환경(같은 지역변수)의 a에 할당된다.
'개인공부 > TIL(Today I Learned)' 카테고리의 다른 글
TIL 33일차_CSS애니메이션 (0) | 2021.02.20 |
---|---|
TIL 32일차_데이터속성 (0) | 2021.02.19 |
TIL 30일차_논리연산자 (0) | 2021.02.17 |
TIL 29일차_ HTML개념&append() (0) | 2021.02.16 |
TIL 28일차_DOM 가운데배치, 키로 함수 실행 (0) | 2021.02.15 |