궁금합니다.

Question

안녕하세요, 먼저 명강의 너무 감사드립니다.

기존에 일만하기 위한 자바스크립트가 얼마나 날림으로 일을 하는건지 돌아볼수 있었습니다. 반성합니다 ㅜㅜ

클로저와 지역변수 관련 강의를 듣고 궁금한 점이 있어서 글을 남기게 되었습니다. 클로저는 함수가 종료되어도 return에 function을 두고 최초 선언시의 정보를 유지하게 된다고 해서 생각해보니....

업무 중에 아래와 같은 소스로 click function을 만들어 놓고

사용한 적이 있는데 어떤 원리인지 궁금합니다.

동일하게 호출하는데 매개변수를 다르게 주고 호출하면 각각 매개변수에 맞는 function으로 정상적으로 동작했었습니다...

제대로 모르는 상태에서 업무를 했고 이제와서 강의를 듣다보니 오히려 머리속이 더 복잡해 졌습니다 ㅜㅜ 도와주세요

function test(a,b){

$(".t_"+a).click(function(){

alert("in_"+a);

})

}

var temp = new test(1,2);

var temp = new test(5,3);

Answer

어떤 질문인지 정확히 이해되지 않아 조금 유추를 해보자면...

마지막 두 줄에서 test 함수를 '생성자'로써 호출했는데,
함수 실행이 종료된 뒤에도 동작이 문제가 없는 이유가 궁금하신 것 같습니다.

우선.. 위 코드는 제이쿼리를 쓰고 있네요.
test 함수 내부에서 `.click(function(){ })` 부분은
자바스크립트의 `addEventListener('click', function(){ ... })` 와 같습니다.

그러니까

test(1) 을 실행하면 => '.t_1' 이라는 클래스를 가진 html DOM을 선택하여
해당 DOM을 클릭하면 alert을 띄우는 이벤트 핸들러가 등록됩니다.

test(5)를 실행하면 => '.t_5' 이라는 클래스를 가진 html DOM을 선택하여
해당 DOM을 클릭하면 alert을 띄우는 이벤트 핸들러가 등록됩니다.

각 test 함수의 실행은 종료되었지만, 이벤트 핸들러는 여전히 html DOM에 등록된 상태이기 때문에
클릭시 alert이 뜨는 동작에는 문제가 없습니다.

이 때 alert에서 지역변수 a를 참조하고 있기 때문에,
말씀하신 대로 클로저에 의해 test함수의 실행 종료에도 불구하고 원래의 값이 계속 출력될 수 있겠죠.

----------------------------------

그리고... 일단 동작은 되고는 있지만
test 함수 호출시 'new' 연산자는 쓰지 않는 것이 맞습니다.
new 연산자는 생성자함수로 호출할 때에 쓰는 것입니다.