모던 자바스크립트 Deep Dive 4장 변수

출처 : 예스24

스터디를 진행하면서 책을 읽고 내용과 떠오르는 생각, 용어들을 정리하고 있습니다.
문제 되는 부분이나 틀린 부분이 있다면 편하게 말씀해 주세요.

4장 변수

4.1 변수란 무엇인가? 왜 필요한가?

컴퓨터가 계산(평가 evaluation)을 하려면 먼저 10, 20, +,- 같은 기호(리터럴과 연산자)의 의미를 알고 있어야 하고 기호로 이루어진 식(표현식 expression)의 의미도 해석할 수 있어야 한다. 

※ 리터럴이란?

문자 그대로인 값 그 자체. 즉 10은 10이라는 숫자 리터럴이고, "안녕하세요"는 문자 리터럴이다.

※ 연산자란?

 : 연산 실행에 있어서 수학적 논리적인 움직임을 지시하는 것. 흔히 아는 +, - , x 같은 기호들을 의미한다.

※ 표현식이란?

 : 주로 식별자, 연산자, 리터럴 등으로 구성되어 결과가 하나의 값으로 표현되는 문장을 의미한다.
   예를 들어 (4-3) 은 결과값이 1 임을 알 수 있는 표현식이다. x = 2 도 x가 2이라는 결과값을 알 수 있기 때문에 표현식이라 볼 수 있다.

 

자바스크립트 엔진은 연산을 수행하기 위해 연산자의 좌변과 우변의 숫자. 즉 피연산자를 기억하고 CPU를 사용해 연산하고 메모리를 사용해 데이터를 기억한다(폰 노이만 구조). 메모리 셀 하나의 크기는 1바이트(8비트)이며, 각 셀은 고유의 메모리 주소를 갖는다. 컴퓨터는 모든 데이터를 2진수로 처리한다.

변수는 이때 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. 즉, 값의 위치를 가리키는 상징적인 이름이다.

하나의 값을 저장하기 위한 메커니즘이나, 배열이나 객체 같은 자료구조를 사용하면 여러 개의 값을 그룹화해서 하나의 값처럼 사용할 수 있다.

※ 폰 노이만 구조란?

 : 폰 노이만이 제시한 컴퓨터 구조를 의미한다. 컴퓨터의 구조를 중앙처리장치(CPU), 메모리, 프로그램 이렇게 구성요소를 나누었고, 값을 저장되게 했다는데 큰 의미가 있다.

 

메모리 공간에 저장된 값의 위치를 식별할 수 있게 저장한 것이 변수이름. 저장된 값을 변수 값. 그리고 변수에 값을 저장하는 행위를 할당(대입, 저장)이라 하고 저장된 값을 읽어 들이는 것을 참조(reference)라고 한다.

4.2 식별자

식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다. 변수를 '식별자'라고도 하며, 식별자는 값이 아니라 메모리 주소를 기억하고 있다. 즉, 메모리 주소와 관련 있는 변수, 함수, 클래스 등의 이름은 모두 식별자라고 볼 수 있다.

4.3 변수 선언

변수 선언은 값을 저장하기 위한 메모리 공간을 확보하고 메모리 공간의 주소를 연결하도록 준비하는 것이다. 변수를 사용하려면 반드시 선언이 필요하다. 변수를 선언할 때는 var, let, const 키워드를 사용한다. ES6부터 let과 const가 도입되며 var의 단점을 보완하였는데 ES6는 하위 호환성을 유지하면서 새로운 기능을 추가한 것으로 ES6 기준으로 학습하더라도 ES5를 잘 이해할 필요가 있고 let과 const의 도입 배경에 대해 개념을 이해하는 게 중요하다.

※ var의 단점?

 : 의도치 않게 전역 변수가 선언되어 부작용이 발생한다.

  예를 들어 변수를 할당하고 함수 내에서 의도치 않게동일한 변수명으로 재할당할 수 있고, 함수 종료 후에는 재할당한 값이 유지된다.

 

변수 선언에 의해 확보된 메모리 공간은 자바스크립트 엔진에 의해 undefined라는 값이 암묵적으로 할당되어 초기화된다. 초기화란 변수가 선언된 이후 최초로 값을 할당하는 것을 의미한다. 변수명이나 식별자는 실행 컨텍스트에 등록되고, 자바스크립트 엔진은 실행 컨텍스트를 통해 식별자와 스코프를 관리한다.

※ 실행 컨텍스트란?

 : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 코드 평가단계, 실행단계로 구분된다.

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

실행 컨텍스트는 코드 평가단계, 실행단계로 구분된다. 변수 선언문은 소스코드가 실행되는 런타임 시점이 아니라 평가 단계에서 먼저 실행된다. 따라서 변수 선언 전에 해당 코드를 참조하는 코드가 있으면  오류가 발생해야 하나 'undefined'가 출력된다. 실행 콘텍스트가 평가 단계에서 변수 선언을 먼저 확인하기 때문에 코드 입력 순서를 무시하고 변수 선언 시 자동할당되는 값인 undefined를 반환하는 동작으로 마치 코드가 최상위에 끌어올려진 것처럼 선동작한다 하여 이를 '호이스팅'이라 한다. 마찬가지 모든 선언문은 런타임 이전 단계에서 실행되기 때문에 모든 식별자(변수, 함수, 클래스 등)는 호이스팅 된다.

4.5 값의 할당

할당 연산자(=)는 우변의 값을 좌변의 변수에 할당한다. 선언과 할당을 동시에 할 수 있지만 변수 선언 시 undefined가 자동할당 되는 것은 똑같다. 변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행되지만 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.

※ 호이스팅이란?

 : 변수가 선언되는 코드보다 이전에 변수를 참조하는 코드가 있어도 오류가 아니라 undefined를 반환하는 현상으로 실행 콘텍스트가 평가단계에서 변수 선언을 먼저 확인하기 때문에 마치 변수 선언 코드가 최상단에 있는 것처럼 코드 입력 순서를 무시하는 현상이다. 따라서 호이스팅시 문제가 되는 건 실제 변수선언 이전 코드에서 해당 변수가 참조될 때에는 undefined를. 이후 참조될 때는 실제 할당된 값을 반환하여 동일한 변수에 대해 코드 참조 위치에 따라 다른 결과를 반환하게 되는 것이다.

4.6 값의 재할당

이미 값이 할당되어 있는 변수에 새로운 값을 또다시 할당하는 것을 말한다. 엄밀히 말하면 우리가 변수에 처음으로 값을 할당하는 것도 자바스크립트 엔진이 선언한 변수에 undefined를 자동할당 한 이후 우리가 입력한 값이 할당되는 것이므로 재할당에 해당한다. 변수에 한번 저장된 값을 재할당할 수 없어서 변경할 수 없다면 변수가 아니라 상수라 한다. 값을 재할당하면 자바스크립트 엔진은 새로운 메모리 공간을 확보하고 그 메모리 공간에 새로운 값을 저장한다. 기존 값에 어떠한 변수나 식별자와도 연결되지 않는 불필요한 상황이 되면 일정시간 이후 가비지 콜렉터에 의해 메모리에서 자동 해제된다. 단, 언제 해제될지는 예측할 수 없다.

※ 가비지 콜렉터란?

 : 더 이상 사용하지 않는 메모리. 즉 어떤 식별자도 참조하지 않는 메모리 공간을 해제하는 기능으로 자바스크립트는 가비지 콜렉터 기능을 내장하고 있는 매니지드 언어고, 이를 통해 메모리 누수를 방지한다. 언제 메모리해제가 될지 알 수 없기 때문에 실시간 시스템에서 예측불가하여 메모리 관리가 어려울 수 있는 단점이 있다.

※ WeakRef란?

 : 참조된 객체가 가비지 콜렉터의 대상이 될 때 콜렉터에 수집되기 전까지는 해당 객체를, 수집 이후에는 undefined 값을 반환해 주는 함수이다.

※ FinalizationRegistry란?

 : 등록된 객체가 가비지 콜렉션의 대상이 될 때 함께 등록된 값(예를 들어 가비지콜렉터 확인을 위해 특정 객체에 WeakRef를 적용할 경우 해당 객체는 WeakRef 라는 또 하나의 쓸모없는 객체가 생기게 된다)을 모두 호출할 수 있다.

※ 매니지드 언어와 언매니지드 언어란?

 : 자바스크립트의 경우 매니지드 언어로 변수 할당 및 해제 시 메모리 처리가 자동으로 된다. 이는 일정한 생산성을 확보할 수 있다는 장점이 있지만 성능 면에서 어느 정도의 손실은 감수할 수밖에 없다. 매니지드 언어는 C언어를 예로 들 수 있고, C언어를 포기하게 만드는 주범인 포인터와 메모리 부분을 참고할 수 있다. 쉽게 설명하면 변수를 할당 시 메모리 주소( 0x7c255e4 와 같은 )를 직접 관리하는 것으로 그만큼 효율적인 메모리 관리가 가능하나 잘못하면 치명적인 오류가 발생할 수 있다.  

4.7 식별자 네이밍 규칙

식별자는 어떤 값을 구별해 식별할 수 있는 고유한 이름으로 변수도 식별자에 해당하며 네이밍 규칙을 준수해야 한다. 일반적으로 변수나 함수의 이름에는 카멜케이스( firstName )를 사용하고, 생성자 함수, 클래스의 이름에는 파스칼 케이스( FirstName )를 사용한다. 또한 존재 목적을 쉽게 이해할 수 있도록 명확한 의미로 짓는 것이 중요하다.

정리

정재남 님이 가비지 콜렉터 부분에서 WeakRef 함수를 언급하셔서 관련한 함수들(WeakRef, FinalizationRegistry)을 MDN에서 찾아보긴 했는데 가비지 콜렉션 대상을 확인할 수 있다는 것 말고 확인을 해서 어떻게 조치할 수 있다는 것까지는 잘 모르겠다. 대략 가비지콜렉터에 수집 여부를 조건문으로 하여 다른 조치를 한다는 정도로 이해했는데 활용 예시 같은 것도 검색되는 바가 별로 없어서 일단 현시점에서는 크게 중요한 부분은 아니라 생각하고 다음을 기약해야겠다.

호이스팅에 대해서는 프론트엔드 면접 필수질문으로 알고 있는데 이번 챕터를 통해 좀 더 명확하게 알게 되었다. 정리하면 실행 콘텍스트의 평가 단계와 실행단계가 구분되어 있기 때문이고 자바스크립트 엔진이 변수 선언이 자동할당하는 부분과도 연관되어 있었다.

변수 선언 시 메모리 공간을 확보한다는 것도 이전에 CS 공부한 부분과 연계해 폰 노이만 구조가 떠올라 같이 기록하였다. 변수에 대해서 별로 기록할 게 없을 거라 생각했는데 정리를 못하는 건지 연관된 내용들이 많은 건지 또 상당량을 기록하게 되었다..; 외우는 게 가장 좋지만 '기억보단 기록을'이라는 어느 CTO님의 생각에 동감하며 계속 기록으로 정리하고 남기도록 하겠다.