Modern JavaScript Deep Dive 4장

younghyun·2022년 5월 4일
0

변수

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

복잡한 애플리케이션도 데이터 입력받아 처리하고 결과를 출력하는 게 전부. 변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념.

10 + 20
자바스크립트 엔진이 위 코드를 계산(평가)하려면 10, 20, + 기호(리터럴, 연산자)의미를 알고 있어야 하며, 10 + 20 식의 의미도 해석(파싱)할 수 있어야 함. 해석하면, +연산 수행 위해 먼저 피연산자를 기억함. 컴퓨터는 CPU를 통해 연산하고, 메모리를 통해 데이터를 기억함.

메모리는 메모리셀 집합체(데이터 저장), 셀 하나 크기는 1바이트(8비트), 1바이트 단위로 데이터 저장하거나 읽어들임.
각 셀은 메모리 주소(메모리 공간 위치, 0부터 메모리 크기만큼 정수 표현, 0 * 00000000 ~ 0 * FFFFFFFF)를 가짐.
데이터는 종류(숫자, 텍스트, 이미지, 동영상 등) 상관없이 2진수로 저장됨.

연산 결과는 재사용 불가. 메모리 공간에 직접 접근하는 것은 운영체제가 사용하는 값을 변경해서 시스템을 멈추게 하는 치명적인 오류가 발생할 수 있음.
자바스크립트가 개발자 직접적인 메모리 제어를 허용해도 문제가 있음. 값이 저장될 메모리 주소는 코드가 실행될 떄 메모리 상황에 따라 임의로 결정됨. 동일한 컴퓨터에서 동일한 코드를 실행해도 실행될 떄 마다 값이 저장될 메모리 주소는 변경됨.
코드 실행되기 이전에는 값이 저장된 메모리 주소를 알 수 없으며, 알려 주지도 않음.

변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름, 값을 저장하고 참조하는 메커니즘. 값의 위치(메모리 공간 주소)를 가리키는 상징적인 이름. 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간 주소로 치환되어 실행됨.(변수 이름을 이용해 참조를 요청하면 자바스크립트 엔진은 변수 이름과 매핑된 메모리 주소를 통해 메모리 공간에 접근해서 저장된 값을 반환함.)
변수 이름 : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름, 저장된 값의 의미를 명확히 알 수 있도록 네이밍.(변수명이 의도를 잘 나타내면 코드를 이해하기 쉽고, 협업/품질 향상에 도움됨)
변수 값 : 변수에 저장된 값
할당(대입, 저장): 변수에 값을 저장하는 것
참조 : 변수에 저장된 값을 읽어들이는 것

식별자

어떤 값을 구별해서 식별할 수 있는 고유한 이름. 메모리 공간에 저장되어 있는 어떤 값을 구별해서 식별해낼 수 있어야 함. 즉, 식별자는 어떤 값이 저장되어 있는 메모리 주소를 기억해야 함.
선언에 의해 자바스크립트 엔진에 식별자 존재를 알림.
ex) 변수 이름으로는 메모리 상 변수 값 식별, 함수 이름으로는 메모리 상 함수 값(자바스크립트에서 함수는 값) 식별

변수 선언

메모리 공간을 확보, 변수 이름과 확보된 메모리 공간 주소를 연결해서 값을 저장할 수 있도록 준비하는 것. 변수 선언 시에는 var, let, const키워드 사용
변수 선언문은 변수 이름을 등록하고, 값을 저장할 메모리 공간 확보함. 그리고 자바스크립트 엔진에 의해 undefined라는 값이 암묵적으로 할당되어 초기화 됨.

  • 자바스크립트 엔진 변수 선언 단계
    선언 단계 : 변수 이름 등록해서 자바스크립트 엔진에 변수 존재 알림
    초기화 단계(변수 선언 이후 최초 값을 할당. 초기화 단계가 없으면 쓰레기 값이 남아있을 수 있음.): 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined 할당

var키워드를 사용한 변수 선언은 선언 단계, 초기화 단계가 동시 진행
선언하지 않은 식별자에 접근하면 ReferenceError가 발생함.

** 키워드 : 자바스크립트 엔진이 수행할 동작을 규정한 일종의 명령어.
ex) var키워드를 만나면, 자바스크립트 엔진은 뒤에 오는 변수 이름으로 새로운 변수 선언

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

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

변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 런타임이 아니라 자바스크립트 코드가 인터프리터에 의해 한줄씩 실행되기 이전 소스 코드 평가 과정( 모든 선언문을 소스코드에서 찾아내 먼저 실행)에서 먼저 실행됨.

변수 호이스팅 : 변수 선언문잉 코드 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유 특징

값의 할당

var core
score = 80;

var score = 80;

변수 선언과 값의 할당을 2개의 문으로 나눈 코드와 하나의 문으로 단축한 코드는 정확히 동일하게 동작함.

변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행되지만, 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행

** 가비지 콜렉터 : 애플리케이션이 할당한 메모리 공간을 주기적으로 검사해 사용되지 않는 메모리(어떤 식별자도 참조하지 않는 메모리 공간)를 해제 하는 기능. 자바스크립트는 가비지 콜렉터를 내장하고 있는 매니지드 언어. 메모리 누수를 방지

식별자 네이밍 규칙

  • 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($) 포함 가능
  • 특수문자, 숫자로 시작 불가. 문자, 언더스코어(_), 달러 기호($) 포함 가능
  • 예약어는 식별자로 사용 불가
  • 자바스크립트는 대소문자 구별
  • 변수 이름은 변수 존재 목적 쉽게 이해하도록 명확히 의미 표현
  • 4가지 유형 네이밍 컨벤션 (일관성 유지, 자바스크립트에서는 보통 변수/함수 이름에는 카멜 케이스, 생성자 함수/클래스 이름에는 파스칼 케이스 사용)
    카멜 케이스, 파스칼 케이스, 스네이크 케이스, 헝가리언 케이스
profile
선명한 기억보다 흐릿한 메모

0개의 댓글