3-2. 실행 컨텍스트(스코프, 변수, 객체, 호이스팅)

0. 기본정보

#스파르타코딩클럽 #부트캠프 #경과훈련일_11일/94일
- 학습주제: 「자바스크립트 종합반」 (3주차)
- 학습내용: 실행 컨텍스트(스코프, 변수, 객체, 호이스팅)

- 특별사항: [제출] 자바스크립트 개인과제
- 학습일: 2024. 4. 29.

---

1. 배운 배용 요약

 

(이미지 출처:  https://velog.io/@leejuhwan/%EC%8A%A4%ED%83%9DSTACK%EA%B3%BC-%ED%81%90QUEUE)

- 실행 컨텍스트: 실행할 코드에 제공할 환경 정보들을 모아놓은 객체

- 실행 컨테스트 객체 종류 :

• VE(VariableEnvironment) : record, outer, snapshot
• LE(LexicalEnvironment) : record, outer, 변경사항 실시간 반영
• ThisBinding

 

---

1) LE (LexicalEnvironment)

(1) environmentRecord(=record)와 호이스팅(hoisting, 끌어올리기)

- 컨텍스트 내부를 처음부터 끝까지 순서대로 훑어가며 수집

- 호이스팅 : 변수정보 수집 과정을 이해하기 쉽게 설명한 ‘가상 개념’

- 호이스팅 규칙:

• 매개변수 및 변수는 선언부를 호이스팅 한다.
• 함수 선언은 전체를 호이스팅 한다
• 함수 선언문, 익명 함수 표현식, 기명 함수 표현식

 

(이미지 출처:  https://jess2.xyz/JavaScript/scope-chain-closure/)

(2) 스코프, 스코프 체인, outerEnvironmentReference(=outer)

• 스코프 : 식별자에 대한 유효범위
• 스코프 체인: 식별자의 유효범위(=스코프)를 안에서부터 바깥으로 차례로 검색해나가는 것
• outer : 스코프 체인이 가능하도록 하는 것(=외부 환경의 참조정보)

---

 

2) ThisBinding

(1) 상황에 따라 달라지는 this

1) 실행 컨텍스트가 생성될 때(=함수를 호출할 때) 결정

- 전역 공간에서의 this === 전역 객체

  ▶ 예1: 브라우저 환경 this === window

  ▶ 예2: node 환경 this === global

 

2) 메서드로서 호출할 때 그 메서드 내부에서의 this

- 예: 객체.메서드();

- 메서드 this : 자신을 호출한 대상 객체에 대한 동작을 수행함

- 메서드로서의 호출 구분 기준: 점(.), 대괄호([])

- 메서드 내부에서의 this : 호출을 누가 했는지에 대한 정보가 담김

 

3) 함수로서 호출할 때 그 함수 내부에서의 this

- 함수 내부에서의 this === 항상 전역객체 (지정 안 함, 호출 주체 알 수 없음)

- 메서드의 내부함수에서의 this === (예외 없이) 전역객체

- 메서드의 내부 함수에서의 this 우회 :

  ① 변수를 활용하는 방법, ② 화살표 함수 (=this를 바인딩하지 않는 함수) 🤯

메서드의 내부 함수에서의 this 우회:  ① 변수를 활용하는 방법 예시

 

4) 콜백 함수 호출 시 그 함수 내부에서의 this === 전역 객체

cf. 콜백 함수도 “함수”이기 때문에 함수의 this는 항상 전역 객체

 

5) 생성자 함수 내부에서의 this 🤯

---

 

(2)  명시적 this 바인딩 - this에 별도의 값을 저장하는 방법

1) call 메서드

- 호출 주체인 함수를 즉시 실행하는 명령어

call 메서드 예시

 

2) apply 메서드

- call 메서드와 완전 동일 (단, this에 binding할 객체는 똑같이 넣어주되 나머지 부분만 배열 형태로 넘겨줌)

apply 메서드 예시

 

3) call / apply 메서드 활용

- 유사배열객체(array-like-object)에 배열 메서드를 적용  ※ 반드시 length가 있어야만 유사배열이라고 인식함

- Array.from 메서드(ES6)

- 생성자 내부에서 다른 생성자를 호출(공통된 내용의 반복 제거) - 예시: this 사용 전/후 비교

- 여러 인수를 묶어 하나의 배열로 전달할 때 apply 사용할 수 있어요.

call / apply 메서드 활용 예시 - 활용 여부에 따른 비효율/효율

(call / apply 메소드 사용 전 비효율성 예시)

(call / apply 메소드 사용 후 효율성 예시 - 함수가 간략해져서 기독성이 좋아짐)

 

4) bind 메서드

- call 메서드와 비슷하지만, 즉시 호출하지 않고 넘겨받은 this 및 인수들을 바탕으로 새로운 함수를 반환하는 메서드

- 목적: ① 함수에 this 미리 적용, ② 부분 적용 함수 구현할 때 용이

- name 프로퍼티 : bind – bound(수동태)

bind 메서드 예시

 

5) 화살표 함수의 예외사항

---

 

2. 오류일지 & 해결방법 : 없음

 

3. 오늘의 회고

- 칭찬: 담임매니저님께 상담을 요청한 것😭

포기하고 도망가고 싶을 때 누군가에게 '도와달라' 먼저 손을 내미는 것도 용기가 필요하다. 나는 그 용기를 냈다. 그리고 지금 이렇게 글을 쓸 수 있게 되었다. '용기내줘서 고맙다'고 스스로에게 칭찬 한마디를 던진다. 더불어 함께 이 난관을 헤쳐나갈 리액트 5기 동료들에게도 격하게 독려하고 싶다.!

- 반성: 정규과정을 벗어난 것 😱

모든 일에는 이유가 있다.

개인과제와 함께 자바스크립트 강의 수강권을 주는 것도 결코 우연이 아니다.

 

그러나 나는 이 뜻을 몰랐다. 그래서 정규 과정을 벗어나 잔머리를 굴렸다. 어려운 정규 강의가 아닌  인터넷 검색(개발 블로그, 유투브 영상 등)으로 개인과제를 손쉽게 해치우고 싶었기 때문이다.

 

결국 이 행동으로 인해 나는 나 자신을 더 궁지로 몰았다. 주말 내내 걱정이 되어 잠도 오지 않았고 우울한 생각까지 들었다. 특강 시간이었지만 급하게 담임 매니저님을 찾아 도움을 요청했다. 마음을 가다듬고 현재 내가 할 수 있는 최선이 무엇인지 고민했다.

 

"기본으로 돌아가자 = 어려운 강의를 이어서 수강하자"

 

여전히 이해되지 않은 내용이었지만... 프론트엔드 개발자라면 누구나 이 과정을 거쳤을테니... 조금만 더 버텨보자. 버티다보면 언젠간 이해되는 날이 올 거다.

- 보충: 개인과제 해설 강의를 참고하여 개인과제 수정하기 (재제출 마감: 4/30, 18:00)