[JavaScript Deep Dive] 4. 변수

s0zzang·2023년 5월 30일
1
post-thumbnail

내가 알았던 것은 럽 다이브 뿐이었지만 ,,,
자바스크립트로 딥 다이브 해보겠다. 자스로 딥다이브 하는 나, 꽤나 멋진걸요?

철재남 선생님 말씀처럼 ! 잘 모르더라도 다회독 목표로 지치지말고 해보자고 ~
1~3장은 세팅 관련된 내용이라 냅다 4장 시작 !

4. 변수

1. 변수란?

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

변수의 목적

  1. 메모리 공간 자체
  2. 식별자

변수 관련 용어

변수 이름

  • 메모리 공간에 저장된 값을 식별할 수 있는 고유의 이름
    식별자라고 하기도 함

변수 값

  • 변수에 저장된 값

할당

  • 변수에 값을 저장하는 것

참조

  • 변수에 저장된 값을 읽어 들이는 것

2. 식별자

변수의 위치를 기억하는 저장소

  • 식별자는 값이 아닌, 메모리 주소를 기억함
  • 메모리 주소에 붙인 이름

변수 이름에만 국한에서 사용되지 않기도 함

  • 변수 ,함수 ,클래스 등의 이름 모두 식별자
  • 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자

식별자는 네이밍 규칙을 준수해야함
선언에 의해 자바스크립트 엔진에 식별자 존재 알림

3. 변수 선언

변수 선언이란 ? 변수를 생성하는 것 !
변수를 선언할 때 발생되는 일의 순서

  1. 값을 저장하기 위한 메모리 공간을 확보
  2. 변수 이름과 확보된 메모리 공간의 주소를 연결
  3. 값 저장

변수를 선언할 때 사용하는 키워드

  • var
  • let
  • const

키워드란?

  • JS 코드를 해석하고 실행하는 JS 엔진이 수행할 동작을 규정한 일종의 명령
  • 자바스크립트 엔진이 키워드를 만나면 약속된 동작을 수행함

변수 선언의 과정

  • 변수 선언 후 값을 할당하지 않았음
  • 변수 선언에 의해 확보된 메모리 공간은 확보가 해제되기 전까지 보호되어 안전함
  • 선언하지 않은 식별자(변수 포함)에 접근하면 ReferenceError 발생

var

ES5 까지의 문법으로 많은 단점이 있음

  • 블록 레벨 스코프 미지원, 함수 레벨 스코프 지원 13장 스코프 참고
  • 의도치 않은 전역 변수 선언으로 심각한 부작용 발생 가능성 있음
  • 변수 선언 후 값을 할당하지 않았을 때, 자바스크립트 엔진에 의해 undefined 값 암묵적 할당되어 초기화됨

ES5와 ES6

  • ES6는 하위 호환성 유지 + ES5 기반 위에 새로운 기능 추가
  • ES6 = ES5의 상위 집합

자바스크립트 엔진의 변수 선언 단계

  1. 선언 단계 : 변수 이름 등록, 자바스크립트 엔진에 변수의 존재 알림
  2. 초기화 단계 : 값을 저장하기 위한 메모리 공간 확보, undefined 할당하여 초기화

변수 이름의 이름은 어디에 등록되는가?

  • 변수 이름을 포함한 모든 식별자는 실행 컨텍스트에 등록됨

실행 컨텍스트란 ?

  • 자스 엔진이 소스 코드를 평가, 실행하기 위해 필요한 환경을 제공
  • 코드의 실행 결과를 실제로 관리하는 영역
  • 실행 컨텍스트를 통해 식별자와 스코프 관리

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

console.log(score); // undefiend
var score; // 변수 선언

변수 선언의 실행 시점

자바스크립트는 한 줄씩 위에서부터 읽는 인터프리터를 따른다. 그렇다면 score를 변수 선언 전에 호출하였으니 참조에러가 떠야 하는데 undefiend가 출력된다
변수 선언은 [소스 코드가 한 줄식 순차적으로 실행되는] 런타임이 아닌, 그 이전 단계에서 먼저 실행된다.

소스코드 순차적 실행보다, 소스코드의 평가 과정을 먼저 거치면서 실행을 위한 준비를 한다. 평가 과정에선 변수 선언, 함수 선언 등을 소스코드에서 찾아서 먼저 실행한다.
따라서 소스코드 내에 변수 선언이 어디에 있든, 다른 코드보다 먼저 실행되기 때문에 어디서든 변수를 참조할 수 있다.

변수 호이스팅

변수 선언문이 코드의 선두로 올려진 것처럼 동작하는 자바스크립트 고유의 특징이다. 런타임 (한 줄씩 순차적 실행)보다 이전 단계에 먼저 실행되는 모든 식별자에 해당함

5. 값의 할당

var score; // 변수 선언
score = 80; // 값의 할당

var age = 20; // 변수 선언과 값의 할당

변수 선언과 값의 할당 2개의 문을 한 번에 단축하여 작성할 수 있지만, 선언과 값의 할당 간의 실행 시점은 다르다. 변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행되고, 값의 할당은 런타임에 실행된다.

런타임 이전에 변수 선언이 먼저 실행되어 변수의 값은 undefiend로 초기화 되어 있다. 변수에 값을 할당하면 undefined로 초기화된 값에 20이 할당되는 것 !
이때 새롭게 할당된 20은 undefiend가 저장되어 있던 메모리 공간을 지우고 그 공간에 들어가는 것이 아니라, 새로운 메모리 공간을 확보하여 저장한다 !

6. 값의 재할당

var score = 80;
score = 90;

값의 재할당도 할당과 마찬가지로 80이 저장되어 있던 메모리 공간을 지우고 그 공간을 차지하는 것이 아니라, 새로운 메모리 공간을 확보해 그 공간에 숫자 90을 저장하는 것이다.

할당 전 초기화될 때 저장됐던 undefiend와 80은 어떤 변수도 값으로 갖고 있지 않다. 즉 식별자와 연결되어 있지 않다 ! 아무도 사용하지 않는 것이고 필요하지 않다는 뜻 ! 이런 필요 없는 값은 가비지 콜렉터에 의해 메모리에서 자동으로 해제된다.

상수 는 단 한번만 할당할 수 있는 변수 !

가비지 콜렉터 는 애플리케이션이 할당한 메모리를 주기적으로 검사하여 더이상 사용되지 않는 메모리를 해제하는 기능이다. 이 기능을 통해 메모리 누수를 방지한다.

자바스크립트는 매니지드 언어 !
매니지드 언어란 메모리 할당 및 해제를 위한 메모리 관리 기능을 언어 차원에서 담당하는 것(가비지 콜렉터 등)이다. 언매니지드 언어는 C언어가 있고 개발자가 명시적으로 메모리를 할당하고 해제하기 위한 명령어를 사용한다.

7. 식별자 네이밍 규칙

식별자에는 변수도 포함되므로 변수 이름을 지을 때도 똑같이 적용된다.

  • 숫자로 시작 금지
  • 쉼표로 구분할 수 있지만 가독성이 떨어짐
  • 알파벳 외의 언어도 사용할 수 있지만 바람직하지 않음
  • 대소문자를 구별함
  • 의미를 명확하게 표현하는 이름을 지을 것 !


정리하는데 넘 오래걸려버렸다 ... 한번 쓱 훑더라도 책을 한 번 훑는 것에 목표를 두고 ! 하루에 너무 조금씩 하지 말고 꾸준히 공부해보자잉 ~

profile
" 퍼블리셔에서 프론트엔드로 Level up 중 ... 💨 "

0개의 댓글