inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

시나브로 자바스크립트

01. DOM API 의 기본 - (5 of 6) Event handling in bulk

클로저에 대해서 제가 아는 부분을 공유합니다!

해결된 질문

668

withkey

작성한 질문수 13

1

클로저에 대해서 어렴풋이 알고 있었지만, 막상 이벤트 핸들러 안에서 그것을 바라보니 조금 이해가 안되었는데요!

저처럼 아직 클로저가 익숙하지 않은 분들은 이벤트핸들러를 분리해서 보면 조금 더 이해가 쉽습니다!

그리고 디버거를 이용해서 스코프 안에 있는 변수들을 같이 보면 조금 더 이해가 되실거에요!

일단 클로저를 "어떤 함수가 선언될 때 외부 영역을 기억하는 것" 이라고 생각하고 이 코드를 바라보면

onHelloButtonHandler 라는 함수(이벤트핸들러) 가 선언될 때 myCardCount 의 값을 기억합니다. 즉, Add Card를 할 때마다 + 1씩 올라간다고 하더라도 onelloButtonHandler 에게는 선언될 당시의 cardCountmyCardCount 로 받아서 기억하는 것이죠! 개발자 도구 우측에 Scope을 보면 onHelloButtonHandler 함수의 스코프체인을 볼 수 있는데요. myCardCount 가 로컬에 없기 때문에 그 위 스코프를 바라보는데요! 그 스코프가 바로 클로저이고! 저 클로저 스코프 안에 있는 myCardCount 라는 값은 이 함수가 선언될 당시의 값으로 정해집니다! 끝!!

javascript vanilla-js

답변 1

1

이은재

공유 감사합니다 devWithkey 님! 😊

[46강] EventEmitter를 활용한 10가지 패턴 중 플러그인 아키텍처

0

13

2

강의가 누락된것 같습니다.

0

33

2

용어 발음법이 계속 바뀌는 것 같은데 이런 부분들 개선이 가능할까요...?

0

42

1

counter01.html은 어디있을까요?

1

16

1

존재하지 않는 일기 url입력 시 alert이 두 번 떠요

0

36

1

useState 직접 구현 부분에서 질문이 있습니다.

1

43

1

학습을 하고 블로그에 정리를 해도 괜찮을까요?

1

41

1

교재(3쇄)와 강의 내용 문의

0

36

2

섹션2번 부분 강의 화면이 잘 못된것 같아서 문의합니다.

0

23

1

call stack 표현이 잘못표현된것이 아닌가요?

0

80

2

React 와 Virtual DOM 의 이야기 영상 실행이 안됩니다.

0

35

1

깃헙 초대 관련

0

77

2

virtual dom과 관련된 인식 피드백

0

79

1

getInitialHTML을 꼭 빌드된 dist 디렉토리 내 파일에서 import하는 이유가 있나요??

1

172

2

번들러를 꼭 사용해야하나요?

3

646

1

filter test 마지막 문제 결과값이 이상합니다.

2

363

1

reactivity.js 를 proxy로 수정 후 오류

0

525

2

첫 강의 배포 & 번들러의 기초에 대한 제 이해가 맞는지 궁금합니다

1

539

1

yarn dev 안되요..

1

571

1

yearn create 1분정도

1

350

1

콘솔창 $0과 this에 대해

0

692

1

소스파일

0

683

2

백틱 치환 기능이 궁금합니다.

0

558

1

쇼핑물 api 입니다.

4

814

1