자바스크립트 딥다이브 1일차

변수

10 + 20

- 자바스크립트 엔진은 10 + 20을 어떻게 계산할까?? 

자바스크립트 엔진이 10 + 20이라는 식을 수행하기 위해서는 좌변과 우변의 숫자 값, 즉 피 연산자를 기억한다. 

 

컴퓨터가 연산 하는 방법

- 컴퓨터는 연산과 기억을 한번에 못해서 분리를 했다.

연산 - CPU, 저장 - 메모리

그래서 저 10과 20을 계산을 하기 위해서는 메모리에 데이터를 저장해야 한다

메모리 - 데이터를 저장할 수 있는 메모리 셀의 집합이다, 각 셀은 고유의 메모리 주소를 갖는다. 
또한 메모리 값은 2진수로 저장된다!
메모리 셀 하나의 크기는 1바이트 즉 8비트다

 

오른쪽 사진은 이제 메모리에 저장을 했으니 CPU가 계산을 하는 사진이다. 

성공적으로 연산 결과도 메모리에 저장이 되었지만, 하나의 문제점이 있는데 CPU가 연산해서 만든 숫자 값 30을 재사용을 할 수 없다는 것이다. 

연산결과 30이 저장된 메모리 공간에 직접 접근하는 것 이외에 방법이 없다. 
직접 메모리 공간에 접근하면 치명적 오류를 발생시킬 수 있어, 이래서 필요한 것이 바로 변수다. 

 

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

 

 

즉 변수는 값의 위치를 가르키는 상징적인 이름이다

아까 값 30을 재사용하지 못했는데 result라는 변수를 사용해 다시 읽어 들여 재사용 할 수 있다. 

메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름을 변수이름이라 한다. 그리고 저장된 값을 변수 값이라고한다

 

변수에 값을 저장하는 것을 할당(대입, 저장)이라 하고
변수에 저장된 값을 읽어들이는 것을 참조라고 한다.

 

 

식별자

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

- 위 사진처럼 변수명 식별자는 메모리 주소(공간)을 기억해야 한다.  -> 또 다른 말로 식별자는 메모리 주소와 매핑관계를 맺는다 라고 한다. 

즉 0x0669F913를 기억애햐 한다는 의미이다.  

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

변수 선언

- 변수선언이란 값을 저장하기 위한 메모리 공간을 확보하고, 변수 이름과 확보된 메모리 공간 주소를 연결해 값을 저장할 수 있게 준비하느 것이다. 

- 변수를 사용하기 위해서는 선언이 필요하다. 변수는 let, const, var 키워드를 사용한다.

var score;

사진을 보면 특이한 점이 있다. var scroe로 변수  선언을 하였고, 변수는 메모리 주소와 매핑이 잘 되었다. 

근데 값을 할당하지 않았는데 undefined라는 값이 할당되어 초기화 되어있다. 이는 자바스크립트 엔진의 특징이다. 

자바스크립트 엔진의 변수 선언 단계
- 선언 단계 : 변수 이름을 등록해 자바스크립트 엔진에 변수의 존재를 알린다. 
- 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined가 할당해 초기화 한다.

 

✅ 변수 이름과 식별자는 실행 컨텍스트에 저장이 된다고 하는데 실행 컨텍스트 내에 키/값 형식인 객체 형식으로 저장이 된다고 한다. 나중에 자세히 알아보자 

 

- 다시 돌아와 var 키워드를 사용한 변수 선언은 선언단계와 초기화 단계가 동시에 진행된다. 이로 인해 undefined가 암묵적으로 메모리에 저장이 된다. 

- 만약 초기화 단계를 없이 ?? 한다면 메모리 공간에는 이전에 다른 애플리케이션이 사용했던 값이 남아 있을 수 있는데, 이러한 값을 쓰레기 값이라고 한다. 

- 즉 값을 할당하지 않은 상태에서 곧바로 변수 값을 참조하면 쓰레기 값이 나올 수 있다. 

- 변수를 사용하기 위해서는 선언이 필요한데, 변수 뿐만 아니라 모든 식별자(함수, 클래스)등이 그렇다. 만약 선언하지 않은 식별자에 접근하면 ReferenceError(참조 에러)가 발생한다.  ReferenceError는 식별자를 통해 참조하려 했지만, 자바스크립트 엔진이 등록된 식별자를 찾을 수 없을 떄 발생한다. 

 

변수 선언 시점과 호이스팅

console.log(score);

var score;

console.log로 찍으면 왜 undefined가 나올까? 

- 자바스크립트는 인터프리터에 의해 한줄씩 순차적으로 코드가 실행된다. 그래서 console.log 다음 var에 접근하는데 왜 ReferenceErriorr가 안날까?? 

 - 그 이유는 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 실행되기 때문이다

✅ 자바스크립트 엔진 실행 순서 
자바스크립트 엔진은 소스코드를 순차적으로 실행하기 앞서,
1. 소스코드 평가과정을 거치면서 소스코드를 실행하기 위한 준비를 한다.  
2. 이 때 소스코드 실행을 위한 준비 단계인 소스코드 평가 과정에서 자바스크립트 엔진은 변수 선언을 포함한  모든 선언문을 소스코드에서 찾아 먼저 실행한다. 
3.  소스코드 평가과정이 끝나면 변수 선언을 포함한 모든 선언문을 제외하고 소스코드를 한 줄씩 순차적으로 실행한다. 

즉 자바스크립트 엔진은 변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행한다. 이로 인해 변수 선언이 소스코드의 어디에 위치해 있던 변수를 참조 할 수 있게 된다. 

위 처럼 변수 선언문이 코드의 선두로 끌어 올려지는 것처럼 동작하는 것을 변수 호이스팅이라고 한다. 
ex)var, let, const, function, classs 키워드를 사용해서 선언하는 모든 식별자는 호이스팅이 된다, 

🤔 궁금한점 const, function, let도 호이스팅이 된다고 하는데
콘솔에 찍으면 ReferenceError가 발생한다.

 

const, function,. let 호이스팅 🤔 ?
- 콘솔에 아래와 같이 찍으면 ReferenceError가 나오는데, 이유는 TDZ떄문이리고 한다
TDZ란 '일시적 사각지대'라고 하는데,  TDZ는 변수 선언문 실행 시점에 실행이 된다.
이로 인헤 변수 호이스팅은 되지만 에러가 나는데, 선언문이 실행되기 전까지 TDZ에 놓여 ReferenceError가 난다. 

 

값의 할당

- 변수에 값을 할당할 때는 할당할 때는 할당 연산자를 사용한다.

변수 선언과 값의 할당을 다음과 같이 하나의 문으로 단축할 수 있다. 

var scroe;
score = 80;

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

자바스크립트 엔진은 변수 선언과 값의 할당을 하나의 문으로 단축해도 변수 선언과 값의 할당을 2개의 문으로 나누어 각각 실행된다. 

이 때 주의사항 ⚠️

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

즉 자바스크립트 엔진은 변수 선언을 먼저 실행 후 그 다음 값을 할당한다. 

 

값의 재할당

- v ar 키워드로 선언한 변수는 재할당을 할 수 있다. 재할당은 현재 변수에 저장된 값을 버리고 새로운 값을 저장하는 것이다. 

- var 키워드로 선언한 변수는 선언과 동시에 undefined로 초기화되기 때문에 엄밀히 말하면 변수에 처음으로 값을 할당하는 것도 재할당이다. 

var score = 80;
score = 90;

- 근데 값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아니라 상수 라고 한다

변수에 값을 재할당하면 score 변수는 이전 80에서 90으로  변경된다. 

80이 저장되어 있던 메모리 공간을 지우고 그 메모리 공간에 재할당 값 90을 저장하는 것이 아니라 새로운 메모리 공간을 확보하고, 그 메모리 공간에 90을 저장한다. 

이전에 undefined와, 80은 이제 필요가 없으니 가비지 콜렉터에 의해 메모리에서 자동으로 해제된다. 단 메모리에서 언제 해제될지는 에측불가하다. 

 

🤔 가비지 콜렉터 
- 가비지 콜렉터는 애플리케이션이 할당한 메모리 공간을 주기적으로 검사해 사용하지 않은 메모리를 해제하는 기능이다. 
사용하지 않는 메모리는 어떤 식별자도 참조하지 않는 메모리 공간을 의미한다. 
자바스크립트는 가비지 콜렉터를 내장하고 있어 메모리 누수를 방지한다.