Javascript 핵심 개념 정리: 스코프부터 this까지

스코프

• 변수와 함수의 접근 가능한 범위
• 전역 스코프에 선언된 변수는 어디서든지 접근할 수 있지만, 지역 스코프에 선언된 변수는 해당 스코프 내에서만 접근 가능
• 함수 내에서 선언된 변수는 해당 함수의 지역 스코프에 속하며, 외부에서는 접근할 수 없음

 

클로저

• 함수와 그 함수가 선언된 스코프의 조합
• 함수가 다른 함수 내에 중첩되어 있을 때, 내부 함수가 외부 함수의 변수에 접근할 때 클로저가 생성
• 클로저를 통해 외부 함수의 변수가 소멸되더라도 내부 함수에서 해당 변수에 접근할 수 있음
• 클로저를 사용하면 비동기 작업, 콜백 함수 등 다양한 상황에서 활용할 수 있음

 

이벤트 캡처링

• 이벤트가 상위 요소로 전파되는 단계
• 캡처링 단계에서는 최상위 요소에서 시작하여 이벤트가 발생한 요소까지 이벤트가 전파

 

이벤트 버블링

• 이벤트가 하위 요소로 전파되는 단계
• 버블링 단계에서는 이벤트가 발생한 요소에서 시작하여 최상위 요소까지 이벤트가 전파
• 특정 요소에서 발생한 이벤트가 해당 요소의 상위 요소들에게도 영향을 줄 수 있음

 

해결방법 : stopPropagation() 전파 중단, return false(onClick과 같은 on 이벤트 걸어줬을 때 사용 가능), e.target으로 조건 걸어서 막기

 

this 이해하기

• 기본적으로 window 객체를 가리킴
• 객체 메서드로 this를 사용하면 this는 해당 객체를 가리킴
• 함수의 this는 bind() 메서드를 통해 값을 바꿀 수 있음
• 생성자 함수를 호출할 때 new를 붙이면 this는 생성자 함수가 새로 생성하는 객체가 됨

bind() 메서드는 자바스크립트에 내장된 메서드로 this를 수정하는 역할