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

• 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합
• 메모리 셀 하나의 크기는 1바이트
• 컴퓨터는 메모리 셀의 크기인 1바이트 단위로 데이터를 저장 및 읽기
• 각 셀은 고유의 메모리 주소를 갖는다

10 + 20

위 연산을 실행하면 30이 새로운 메모리 셀에 저장

⇒ 30을 재사용하고 싶다면 해당 메모리 주소로 접근해야함!

⇒ But, 자바스크립트는 개발자의 직접적인 메모리 제어를 허용하지 않음 (오류 발생 가능성 때문에)

⇒ 또 동일한 코드를 실행하더라도 값이 저장되는 메모리 주소는 달라진당

⇒ 따라서 메모리 주소를 알 수도 없지만 직접 접근하는 것은 올바른 방법이 아님

⇒ 변수를 이용해야!

변수

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

즉, 값의 위치를 가리키는 상징적인 이름

이 변수는 컴파일러 혹은 인터프리터에 의해 값이 저장돤 메모리 공간 주소로 치환되어 실행됨

변수에 저장하는 것을 **“할당”**이라고 하고, 변수에 저장된 값을 읽어 들이는 것을 **“참조”**라고 함

변수에 저장된 값의 의미를 정확하게 파악할 수 있는 이름을 지어야 함!!!!!!

개발자의 의도가 명확하게 드러날 수 있도록!

식별자

변수의 이름을 식별자라고 함~~

어떤 값을 구별해서 식별할 수 있는 고유한 이름

이 식별자는 값이 저장되어 있는 메모리 주소를 저장

⇒ 식별자와 값이 저장된 메모리 주소를 매핑 ⇒ 이 매핑 정보도 메모리에 저장 ㅋㅋ

식별자는 값이 아니라 메모리 주소를 기억하고 있는거 (=메모리 주소에 붙인 이름)

변수에만 국한되는 게 아니고, 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름들은 모두 식별자

변수 선언

값을 저장하기 위한 메모리 공간을 확보 + 변수 이름과 메모리 주소를 연결

⇒ 해제되기 전까지 누구도 확보된 메모리 공간을 사용할 수 없음

변수를 사용하기 위해선 반드시 선언이 필요하당

⇒ var, let, const 키워드 사용

💡 var
함수 레벨 스코프만 지원 ⇒ 의도치 않게 전역 변수 선언 ES6에서 let, const 도입

변수를 선언하고 값을 할당하지 않았음

⇒ 확보된 메모리 공간은 자바스크립트 엔진에 의해 undefined라는 값이 암묵적으로 할당됨!

자바스크립트의 변수 선언 2step

1. 선언 : 이름 등록 ⇒ 엔진에 변수 존재를 알림
2. 초기화 : 메모리 공간을 확보 ⇒ 암묵적으로 undefined 초기화

💡 변수 이름은 어디에 등록될까요옹?
모든 식별자는 실행 컨텍스트에 등록

실행 컨텍스트란 뭘까요옹?
- 자바스크립트 엔진이 소스 코드를 평가하고 실행하기 위해 필요한 환경을 제공실행 결과를 실제로 관리하는 영역
- 자바스크립트 엔진은 실행 컨텍스트를 통해서 식별자와 스코프를 관리!

 

변수 초기화를 하지 않을 때, 이전 어플리케이션이 사용했던 값이 남아있을 수도 있음 (쓰레기값) ⇒ 하지만 자바스크립트 var는 암묵적으로 undefined 초기화를 진행하기 때문에 이러한 위험 x ㅋㅋ

만약 선언하지 않은 식별자로 접근 ⇒ ReferenceError 발생

변수 실행과 호이스팅!!!!!!!!

console.log(score); //undefined

var score;

자바스크립트는 인터프리터 언어잖

⇒ 선언 전에 참조하면 참조 에러가 나야 하는거 아님?

⇒ ㄴㄴ!!

변수 선언은 런타임이 아니라 그 이전 단계에서 먼저 실행!!!!!!!!!!!

자바스크립트는 한 줄씩 순차적으로 실행하기에 앞서 먼저 소스코드를 평가

⇒ 이때 모든 선언문을 먼저 찾아내서 먼저 실행하게 됨

⇒ 이후 런타임 때는 선언문을 제외한 소스코드를 한 줄씩 순차 실행

⇒ 선언문은 어디에 있든지 다른 코드보다 먼저 실행 된당

⇒ 즉, 위치에 상관없이 어디서든지 변수를 참조할 수 있음

변수 선언문이 코드 선두로 끌어올려진것 처럼 동작하는 이 JS의 특징은 변수 호이스팅이라고 함

값의 할당

var score = 80;

변수 선언은 런타임 이전에 실행되지만, 값 할당은 런타임에 실행됨 ㅋㅋ

처음엔 score가 가리키는 위치에 undefined 저장

⇒ 이후 80이 할당

⇒ 근데 이때 undefined 위치에 80을 덮어쓰는 게 아니고!!!!!!!!!!!!!!!!!!

⇒ 새로운 메모리 공간을 확보하고 여기에 80을 저장 ⇒ score도 여기 주소를 저장

값의 재할당

var score = 80;
score = 90;

일케 되면 메모리 공간에는 score가 가리켰던 undefined, 80, 현재 가리키고 있는 90이 저장

⇒ undefined, 80은 현재 아무 식별자와도 연결되어 있지 않음

⇒ 이런 불필요한 값들은 가비지 콜렉터에 의해 자동 해제 (메모리 누수 방지)

⇒ 하지만 언제 해제될지는 예측할 수 없음!

💡 언매니지드 언어 vs 매니지드 언어
- 언매니지드 언어 개발자가 직접 메모리 제어 ⇒ 개발자가 주도적으로 최적의 성능 확보 가능 but 오류 생산 가능 ex. C언어매니지드
- 언어 메모리 관리 기능은 언어 차원에서 담당, 개발자가 직접적으로 메모리 제어 불가 ⇒일정한 생산성 확보 가능 but 어느 정도의 손실은 감수해야 ex. JS

식별자 네이밍 규칙

• 특수문자를 제외한 문자, 숫자, 언더스코어, 달러 사인 포함 가능
• 하지만 숫자로 시작되는 식별자는 허용하지 않음
• 키워드를 식별자로 사용할 수 없슴

var person, name, vall, tmp

쉼표로 여러개 변수 선언 ⇒ 가독성이 나빠져서 권장 ㄴㄴ

복잡한 로직도 아닌 변수 선언에 주석이 필요하다묜 ⇒ 변수 존재 목적을 명확히 드러내지 못하는 것

자주 사용되는 네이밍 컨벤션

• camelCase
• snake_case
• PascalCase
• typeHungarianCase
  • strFirstName

일반적으로

변수, 함수 ⇒ 카멜 케이스

생성자 함수, 클래스 ⇒ 파스칼 케이스