[코어 자바스크립트 요약] 2장. 실행 컨텍스트

Ina·2023년 3월 1일
0

Javascript

목록 보기
3/3

2장으로 넘어가기 전, 1장에서 transcribe 한 내용을 chatGPT에게 알려주고 질문해달라고 했다. 공부하고 한 이틀 지나고 대답하려니 가물가물하다.

  1. Can you explain the difference between primitive types and reference types in JavaScript?
    기본형과 참조형 데이터 타입의 차이점
  • 1차 답안
    • 기본형 데이터 : 불변형. 변경할 수 없음.
    • 참조형 데이터 : 가변형. 참조하는 주소를 변경할 수 있음.
  • 2차 답안
    • 기본형 데이터 :
      - 할당이나 연산시에 값이 담긴 주소값을 바로 복제. 불변성을 띔.
    • 참조형 데이터 : 할당이나 연산시에 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제.
  1. How does static type languages like C/C++ and Java handle memory allocation compared to dynamic type languages like JavaScript?
    정적타입언어의 메모리 할당 처리방법

  • 1차 답안
    - 정적타입언어 : 변수 선언시에 지정되는 데이터 타입에 따라 정해진 만큼의 메모리를 할당

    • 동적타입언어 : 선언시에 메모리 넉넉하게(?) 할당하고, 형변환되면 그에 따라 추가적인 메모리 할당.

  • 2차 답안
    - 정적타입언어 : 메모리 낭비 최소화 위해 데이터 타입별로 할당할 메모리 영역을 미리 정해둠.

    • 동적타입언어 : 메모리 공간을 넉넉하게 할당. 숫자는 8바이트(64비트), 문자열은 한 글자마다 n바이트 확보하여 메모리 할당량이 가변적임.
  1. What is a variable in JavaScript, and what is a identifier?
  • 1차 답안
    - 변수 : 데이터를 담을 수 있는 메모리 공간
    • 식별자 : 변수의 이름. 변수명
  • 2차 답안
    - 변수 : 변할 수 있는 데이터(풀어 설명하면, 변경 가능한 데이터가 담길 수 있는 공간 또는 그릇)
    • 식별자 : 어떤 데이터를 식별하는 데 사용하는 이름. (변수명)
  1. Can you describe the process of declaring a variable and assigning data to it in JavaScript?

  • 1차 답안
    : 변수의 식별자 정보를 보관한 메모리 공간을 할당함. 변수의 값이 기존 메모리 공간에 할당되어있는지 확인 후 있으면 해당 메모리공간의 주소를 변수의 값에 저장. 없는 값이라면 새로운 메모리 공간 할당 후 해당 주소를 변수의 값에 저장.

  • 2차 답안
    : 비어있는 메모리 공간 하나를 확보하고 해당 공간의 식별자를 지정(변수 선언 단계) 그리고 해당 식별자 를 가진 주소를 검색해서 그곳에 데이터 또는 데이터 주소를 할당.(데이터 할당 단계)

  1. Why does JavaScript use a two-step process for assigning data to a variable instead of directly assigning it?
    JS에서 변수에 2단계로 나누어 데이터 할당하는 이유
  • 1차 답안 : 데이터와 변수 영역을 나누어서 할당하는 것이 중복적으로 데이터에 대한 메모리 영역을 절약할 수 있는 방식이라고 판단되어서.
  • 2차 답안 : 변수 영역에 값을 직접 대입하지 않고 굳이 한단 계를 더 거치는 이유는 "데이터 변환을 자유롭게하고, 메모리 관리를 효율적으로 하기 위한 고민의 결과". 형변환이 일어나는 경우 변환한 데이터를 다시 저장하기 위해서 '확보된 공간을 변환된 데이터 크기에 맞게 늘리는 작업'이 필요한데, 이로 이핸 연쇄적으로 주소&식별자를 다시 연결해줘야 하는 연산을 피하기 위해서 이러한 방법을 고안하게 됨.

2-1 실행 컨텍스트(Execution Context)란?

: 실행할 코드에 제공할 환경 정보들을 모아놓은 객체. JS의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념.

스택과 큐

  • 스택 : 출입구가 하나뿐인 깊은 우물같은 데이터구조. a,b,c,d 저장시 d,c,b,a 순서로 꺼냄
  • 큐 : 양쪽이 모두 열려있는 파이프. 보통 한쪽은 입력, 한쪽은 출력 담당. a,b,c,d 저장시 a,b,c,d 순서로 꺼냄

동일한 환경에 있는 코드를 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성 - 콜스택에 이를 쌓아올리고 - 가장 위에 있는 컨텍스트와 관련 있는 코드를 실행하는 식으로 전체 코드의 환경과 순서를 보장함.

  • 실행 컨텍스트와 콜 스택
  • 실행 컨텍스트에서 수집하는 정보
    • VariableEnvironment(이하 V)
    • LexicalEnvironment(이하 L)
    • ThisBinding(이하 TB)

2-2 VariableEnvironment

: LexicalEnv와 같지만 최초 실행 시의 스탭샷을 유지한다는 점이 다름. 실행컨텍스트 생성시 V정보를 담고 - 이를 그대로 복사해서 L을 만들고 - 이후로는 L을 주로 활용함.

2-3 LexicalEnvironment

: 의역으로 "사전적인 환경"으로 표현 가능. "현재 컨텍스트 내부에는 a,b,c같은 식별자들이 있고, 외부 정보는 D를 참조하도록 구성돼있다."라는 컨텍스트 구성 환경 정보를 사전에서 접하는 느낌으로 모아둔 것.

2-3-1 environmentRecord와 호이스팅

environmentRecord - 현재 컨텍스트와 관련된 코드와 식별자 정보 저장됨.
컨텍스트 내부를 처음부터 끝까지 훑으며 순서대로 수집. 매개변수의 이름, 함수 선언, 변수명(값X) 등이 담김.

참고
전역 실행 컨텍스트는 변수 객체를 생성하는 대신 JS 구동환경이 별도로 제공하는 객체(전역 객체. window, global)를 활용하며, 이들은 내장 객체가 아닌 호스트 객체로 분리됨.

실행 컨텍스트가 관여할 코드들이 실행되기 전 상태이더라도, 해당 환경에 속한 변수 정보를 모두 알고 있음. 👉 이러한 실제 동작방식 대신에 'js엔진은 식별자들을 최상단으로 끌어올려놓은 뒤 실제 코드를 실행한다'라고 해석함. 이것이 호이스팅 개념.

profile
Ina
프론트엔드 개발자. 기록하기, 요가, 등산
이전 포스트

[코어 자바스크립트 요약] 1장. 데이터 타입

0개의 댓글