이번 주의 위클리 페이퍼는
🇶 자바스크립트에서 this 키워드의 사용과 그 특성에 대해 설명해 주세요.
🇶 렉시컬 스코프(Lexical Scope)의 개념과 그 특성에 대해 설명해 주세요.
이렇게 두 가지다.
JavsScript에 대해 방대한 양의 정보들이 들어왔고, 아직 배워야할게 산더미지만 차근히 알아가보자.
❓this 키워드
this는 현재 실행 중인 코드의 "실행 컨텍스트 객체"를 가리키는 키워드로
함수를 호출한 주체(객체)
를 가리킨다.
즉, this는 어디서 선언되는지가 아니라, 어떻게 호출되었는지에 따라 값이 결정된다.
this 특징
✔️ 호출 방식에 따라 값이 달라진다
const user = {
name: "Tom",
sayName: function () {
console.log(this.name);
}
};
user.sayName(); // Tom여기서는 sayName()을 호출한 객체가 user이기 때문에 this는 user를 가리킨다. 따라서 user의 name인 Tom이 결과값으로 나온다.
✔️ 일반 함수에서의 this
일반 함수로 호출하면 this는 전역 객체를 가리킨다.
function show() {
console.log(this);
}
show();브라우저 환경에서는 window가 출력된다.
✔️ 객체 메서드에서의 this
객체 안에서 호출하면 그 객체 자신을 가리킨다.
const car = {
brand: "BMW",
showBrand() {
console.log(this.brand);
}
};
car.showBrand(); // BMW✔️ 화살표 함수의 this
화살표 함수는 자신의 this를 가지지 않는다.
대신 외부 스코프의 this를 그대로 사용한다.
const obj = {
name: "Lee",
arrow: () => {
console.log(this.name);
}
};
obj.arrow();이 경우 this는 obj가 아니라 상위 스코프의 this를 사용한다
📌정리
- 실행 컨텍스트 객체를 가리키는 키워드
- 호출 방식에 따라 값이 달라진다
- 객체 메서드에서는 객체 자신을 가리킨다
- 일반 함수에서는 전역 객체
- 화살표 함수는 자신의 this가 없고 외부 this 사용
❓Lexical Scope (렉시컬 스코프)
변수가 선언된 위치에 따라 접근 가능한 범위가 결정되는 규칙
코드가 작성된 위치(구조)에 따라 스코프가 결정된다.
JavaScript는 Lexical Scope 기반 언어다.
코드로 살펴보자
const a = 10;
function outer() {
const b = 20;
function inner() {
const c = 30;
console.log(a, b, c);
}
inner();
}
outer(); // 10 20 30inner는c접근 가능outer의 변수b접근 가능- 전역 변수
a접근 가능
자신 → 부모 %rarr; 전역 스코프 순서로 변수탐색을 한다.
조금 난해하다.
차근히 살펴보자.
(1) 가장 먼저 변수 a가 선언된다. 이 변수는 전역 스코프(global scope) 에 존재하므로 프로그램 어디에서든 접근 가능하다.
(2) outer 함수 스코프
outer 함수 안에서는 새로운 스코프가 생성된다.
function outer() {
const b = 20;
}여기서 변수 b는 outer 함수 내부에서만 접근 가능한 변수이다.
(3) inner 함수 스코프
outer 함수 안에는 또 하나의 함수 inner가 있다.
function inner() {
const c = 30;
}inner 함수가 실행되면 또 하나의 새로운 스코프가 생성된다.
이 스코프 안에 변수c가 선언된다
(4) 변수 탐색 과정
console.log(a, b, c)가 실행될 때 JavaScript는
현재 스코프 (inner) 에서 c 발견 → 부모 스코프에서 (outer) b 발견 → 마지막으로 전역 스코프 (global)에서 a를 발견한다.
이처럼 함수가 선언된 위치에 따라 스코프가 결정되는 규칙을 Lexical Scope라 한다.
