모던 자바스크립트 Deep Dive #1

SESE·2022년 11월 7일
0
post-thumbnail

1. 변수

  • 하나의 값을 저장하기 위해 확보한 메모리 공간 자체
  • 그 메모리 공간을 식별하기 위해 붙인 이름

2. 식별자

어떤 값을 구별해서 식별할 수 있는 고유한 이름. 변수 이름을 식별자라고도 한다.

식별자는 값이 아니라 메모리 주소를 기억하고 있다

3. 변수 선언

var let const

var score;

변수를 선언한다는 것은 다음 과정을 의미한다.

  1. 변수 이름이 실행 컨텍스트에 등록된다.

    실행 컨텍스트는 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다.

  1. 값을 저장할 메모리 공간을 확보한다.

    확보된 메모리 공간에는 자바스크립트 엔진에 의해 undefined 값이 암묵적으로 할당되어 초기화 된다.

var 키워드를 사용한 변수 선언은 선언 단계(1)와 초기화 단계(2)가 동시에 진행된다.

4. 변수 선언의 실행 시점과 변수 호이스팅

자바스크립트 엔진은 소스코드를 한줄한줄 실행하기 전에 소스코드의 평가 과정을 거친다.

이때 자바스크립트 엔진은 소스코드 평가 과정에서 변수 선언을 포함한 모든 선언문(변수 선언문, 함수 선언문, 모든 식별자)을 소스코드에서 찾아내 먼저 실행한다.

따라서 변수 선언이 소스코드의 어디에 위치하던지 우리는 어디서든 변수를 참조할 수 있다.

이렇게 변수 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅(variable hoisting) 이라 한다.

5. 값의 할당

console.log(score);   // --> undefined

score = 80;
var score;

console.log(score);   // --> 80
  • 변수 호이스팅에 의해 첫 console.log에서 score는 undefined 로 출력된다.
  • 이후 score를 80으로 할당하였으므로 두번째 console.log에서 score는 80으로 출력된다.

변수 선언은 런타임 이전에 먼저 실행되지만, 값의 할당은 런타임에 실행된다.

6. 값의 재할당

변수에 값을 재할당 하면 새로운 메모리 공간을 확보하고 그 메모리 공간에 값을 저장한다.

var score   // ---> (메모리공간1) undefined

score = 80   // ---> (메모리공간2) 80

score = 100   // ---> (메모리공간3) 100

메모리공간1과 메모리공간2는 가비지 컬렉터에 의해 메모리에서 자동 해제되나, 해제되는 시점은 예측할 수 없다.

ES2021에서 가비지 컬렉터와 관련된 새 문법이 등장했다. WeakRef .

7. 값과 리터럴, 표현식

값(value) : 식이 평가(식을 해석해서 값을 생성하거나 참조)되어 생성된 결과. 변수에 할당된다.

리터럴(literal) : 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법. 값을 생성하기 위해 미리 약속된 표기법.

표현식(expression) : 값으로 평가될 수 있는 문.

8. 문

문(statement) : 프로그램을 구성하는 기본 단위이자 최소 실행 단위.

토큰(token) : 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소. 문은 여러 토큰으로 구성된다.

문은 명령문이라고도 부른다.

문에는 선언문, 할당문, 조건문, 반복문 등으로 구분된다.

표현식인 문과 표현식이 아닌 문
문에는 표현식인 문과 표현식이 아닌 문이 있다.
변수에 할당할 수 있는 문은 표현식인 문이며, 할당이 불가능한 문은 표현식이 아닌 문이다.
변수 선언문과 조건문, 반복문은 표현식인 문이 아닌 문이다.


FE재남 님의 유튜브: https://www.youtube.com/watch?v=3ZP3VPlrr0U&list=PLjQV3hketAJnP_ceUiPCc8GnNQ0REpCqr&index=1

profile
스타트업에서 근무하고 있는 Frontend 개발자 sese

0개의 댓글