오늘 공부한것 & 기억하고 싶은 내용
이벤트위임
- 이벤트 리스너를 자식 요소가 아닌 부모 요소에 등록한다.
- DOM요소가 동적으로 추가 되거나 변경되는 경우에 유용
- 자식에서 부모방향으로 전파되는 버블링을 이용함
- 메모리 사용량과 성능 측면에서 효율적
<ul id="list">
<li><button></button></li>
<li><button></button></li>
</ul>
const list = document.getElementById('list');
list.addEventListener('click', function(event) {
if (event.target.tagName === 'BUTTON') {
console.log(event.target.textContent + ' clicked');
}
});스코프
- 변수와 함수의 유효범위를 정의하는 개념
전역스코프
- 어디서든 접근 할 수 있는 변수와 함수 (선언된 변수는 스크립트 모든 부분에서 사용 가능)
let title = "Title";
function test() {
console.log(title); // Title
}
test();
console.log(title); // Title함수 스코프
- 함수 내부에서 선언된 변수, 함수는 내부에서만 유효
function myFunction() {
let title = "Title";
console.log(title); // Title
}
myFunction();
console.log(title); // ReferenceError블록스코프
- {}으로 감싸진 코드 블록 내에서만 유효한 변수
스코프 체인
- 변수를 찾기 위해 스코프를 탐색
클로저
- 외부에서도 변수를 기억하고 사용
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2렉시컬 환경
- 변수와 함수의 유효성을 관리한다. 환경 레코드와 외부 렉시컬 환경의 참조로 구성
- 변수를 검색할때 현재 환경에서 시작하여 외부 환경으로 올라가며 검색
- 함수가 자신이 생성될 당시의 스코프는 기억하는 매커니즘
렉시컬 환경은 함수가 생성될 떄의 스코프, 변수와 함수의 유효성 결정
클로저는 내부 함수가 외부 함수의 렉시컬 환경을 기억하여 외부 변수에 접근 할 수 있도록 해준다.
배운점 & 느낀점
스코프, 클로저, 렉시컬 환경 세가지 다 변수와 함수의 유효성을 관리하고 서로 밀접한 관계라는것을 배웠고 비슷하면서도 다른 역할이기에 헷갈리는 부분이 있어 여러번 개념을 익혀야겠다.
