개인공부/TIL(Today I Learned)

TIL 31일차_함수와 클로저

soon327 2021. 2. 18. 00:40

이벤트리스너에 매개변수 전달하기

이벤트리스너로 함수를 실행하고자 할때, 원하는 매개변수를 넣는 방법!
함수에 바로 매개변수를 넣어서 이벤트리스너에 할당하면 함수가 바로 실행되므로 다른방법이 필요하다.

바로 익명함수! 익명함수를 사용하면 쉽게 해결할 수 있다.

//아래의 함수를 이벤트 리스너에 할당하자.
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에 할당된다.