💻 JS This, 렉시컬 스코프 개념 전 알아보기 (feat. 왕초보 위클리 페이퍼 #3)

안녕하세요! 개발자 꿈나무 엠디노입니다.

현재 '웹개발 풀스택' 과정을 훈련하고 있습니다.

 

이번에는  '위클리 페이퍼 #3'를 포스팅하고자 합니다.

 

앞서 작성한 포스팅이 궁금하시다면 아래 링크를 클릭해주세요..!

 

⭐️  위클리 페이퍼 #1-CSS Cascading, 시맨틱 태그 [바로가기] ⭐️

웹 개발로 전향 후 깨달은 것: CSS Cascading과 시맨틱 태그 알아보기 (feat. 왕초보 위클리 페이퍼 #1)

 

 

⭐️  위클리 페이퍼 #2-GIT merge, GIT flow branch 전략 [바로가기] ⭐️

💻 Git branch merge, Git flow Branch 전략 알아보기 (feat. 왕초보 위클리 페이퍼 #2)

 

 

 

 

각설하고 바로 시작하겠습니다.

---

⭐️ 위클리 페이퍼 #3 주제

• 자바스크립트에서 this 키워드의 사용과 그 특성에 대해 설명
• 렉시컬 스코프(Lexical Scope)의 개념과 그 특성에 대해 설명

 

위클리 페이퍼를 하면서 느낀 게 있습니다.

이 주제들이 매주 금요일에 있는 이론시험 5문제 중 2문제에 포함되더라구요?

(2주 연속 그랬으니까 아마도 이번주에도 나오겠죠?)

 

그래서 시험전날인 오늘! 목요일에 공부하면서 포스팅을 하고 있습니다.

(기억이 날지는 모르곘으나...)

 

이번 주제를 보고 든 생각도 지난 주와 같습니다!

바로바로 "아 그거 나 들었는데... 아는데...!!" 였습니다.

 

그 후... 또 수많은 서칭과... 강의 복기와...

강사님의 은총인 노션과... 갓 구글의 재미나이가 준 정보들을 merge하여...

 

자 이제 숙제 시작해보겠습니다...!

(본격 숙제 포스팅 시작)

---

1. 자바스크립트에서 this 키워드의 사용, 특성

this 키워드는 자바스크립트의 핵심 개념으로 꼭 이해하고 넘어가야 합니다.

(사실 작성한 지금도 잘 모르겠습니다..)

 

💻  기본설명 - 호출한 객체를 가리킴

this란?

• 자바스크립트의 핵심 개념임
• 함수를 호출한 객체를 가리키는 키워드
• 값은 호출 시점에 결정됨

💻  this 특징 - 상황에 따라 다름

기본 값

• console.log(this); 처럼 this가 사용된 경우에는 전역 객체를 가리킴
  (브라우저 = window / node = global)

 

일반 함수 - 객체 메소드 시 권장

• this 호출 시 결정됨
• 호출한 객체를 가리킴

 

Arrow Fuction(=>) - 콜백 함수 권장

• this 선언 시 결정됨
• 선언 당시의 this 값을 그대로 유지

재미나이를 통해 생성

 

호출 방식	코드 형태	this가 가리키는 대상
1. 메서드 호출	obj.method()	obj (점 앞의 객체)
2. 일반 함수 호출	func()	전역 객체 (window / global) *엄격 모드(strict)에서는 undefined
3. 생성자 호출	new Func()	새로 생성된 인스턴스 객체
4. 명시적 바인딩	call, apply, bind	인자로 넘겨준 특정 객체
🚨 5. 화살표 함수	() => {}	상위 스코프의 this (Lexical this) *호출 방식과 무관하게 선언 위치가 중요

* 일반 함수는 '호출' 시점, 화살표 함수는 '선언' 시점에 this가 결정됩니다.

 

⭐️ 결론,  상황에 따라 다르게 작동하기에 사용에 주의해야 함. 누가 나를 불렀는가? 

---

2. 렉시컬 스코프(Lexical Scope)의 개념,특성

스코프란 참조 대상 식별자(변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙이다.

 

💻  렉시컬 스코프란 ?

- 함수를 어디서 선언하였는지에 따라 상위 스코프가 결정되는 것

- 다른 말로 정적 스코프(Static scope)라 불리기도 함

재미나이를 통해 생성

 

💻  이해를 위한 퀴즈

var x = 1; // 전역 변수

function foo() {
  var x = 10; // 지역 변수
  bar(); // 여기서 bar를 호출하면 어떤 x를 가져올까?
}

function bar() {
  console.log(x);
}

foo(); // 결과는?

 

결과는 1 입니다.

 

• 호출 위치는 무시한다: bar() 함수가 foo() 안에서 호출되었다는 사실은 스코프 결정에 아무런 영향을 주지 않습니다.
• 선언 위치만 본다: 코드를 작성할 때 bar() 함수가 어디에 적혀있는지 보세요. bar는 foo 안에 있는 게 아니라, 전역(Global) 공간에 덩그러니 선언되어 있습니다.
• 스코프 체인: bar 함수는 자신의 내부에서 x를 찾습니다. -> 없네? -> 그럼 나를 **감싸고 있는 부모(선언된 곳의 상위)**로 가서 찾자 -> 그곳은 전역 공간이네? -> 전역 변수 x = 1을 발견!

 

 

⭐️ 결론 및 심화,  이 개념을 알아야 하는 진짜 이유는 **클로저(Closure)**를 이해하기 위해서입니다.

"클로저는 함수가 종료되어도 렉시컬 스코프의 규칙 덕분에, 자신이 선언될 당시의 환경(변수들)을 계속 기억하고 있는 현상입니다."

---

 

 

이상 개발자 꿈나무 엠디노였습니다...

머지않아 크고 작은 숙제와 문제들로 찾아뵙겠습니다..

 

그럼 이만!