[JS Deep Dive] 4장 변수(1)

 

 

 

📌 컴퓨터의 동작원리  

 

변수를 이해하기 위해서는 컴퓨터의 동작원리를 먼저 이해해야한다. 

컴퓨터는 사람을 모델로 디자인되었기 때문에 사람과 유사하게 동작한다.

 

사람은  10 과 20, '+' 기호의 의미, 그리고 이 결과가 30 이 나온다는 것 각각을 알고 있어야

10+20=30 을 계산할 수 있다. 

 

따라서 컴퓨터도 마찬가지로 자바스크립트 엔진이 이 코드를 작동시키기 위해서는 10, 20, + 기호, 표현식의 의미, 그리고 이걸 해석(파싱) 하는 각각을 알고 있어야 한다. 

 

 

 

사람은 각각을 뇌에 저장해두고 뇌에서 꺼내 기억하지만

컴퓨터는 연산을 하는 부품과 기억을 하는 부품이 나뉘어져 있다. 

=> 컴퓨터는 CPU 를 사용하여 연산하고, 메모리를 사용해 데이터를 기억한다. 
즉 메모리는 데이터를 저장할 수 있는 메모리셀의 집합체이다. 

따라서 각 셀은 고유의 공간의 위치를 나타내는 메모리 주소를 가진다.
이 메모리주소는  0부터 시작해서 메모리의 크기만큼 정수로 표현된다. 

 

 

===> 따라서 컴퓨터는 데이터를 저장할 수 있는 메모리 라는 공간이 있는데  프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 여기에 저장된 값을 읽어들여 재사용할 수 있다. 

 

그렇다면 우리가 이 메모리에 저장되어 있는 값들에 어떻게 접근할까?
우리가 직접 그 메모리 주소를 하나하나 기억하기엔 너무나 어려운 일이다....
= > 따라서 우리는 '변수'라는 매커니즘을 사용하여 변수를 통해 값의 위치를 가리킬 수 있게끔 사용한다.. 

 

 

 

 

👩🏻‍💻 변수 

 

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

따라서 쉽게 말하면 값의 위치를 가리키는 상징적인 이름

 

변수는 프로그래밍 언어의 컴파일러에 의해 값이 저장된 메모리공간의 주소로 치환이 되어 실행이 되는 것임...

따라서 개발자가 직접 이 메모리 주소를 하나하나 기억하고 저장할 필요가 없고 변수를 통해 안전하게 값에 접근할 수 있는 것임

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

 

=> 변수 이름을 사용해 참조를 요청하면 자바스크립트 엔진은 변수 이름과 이 매핑된 메모리 주소를 통해 이 공간에 접근을 해서 저장된 값을 반환을 할 수 있게 된다. 

 

정리를 해보자!

만약 변수를 왜 사용하냐? ? ! 라고 물어본다면??

 

 

컴퓨터는 데이터를 저장하는 셀들로 이루어진 메모리 라는 공간을 가지고 있는데 우리가 이 데이터들을 사용하려면 

메모리 공간에 위치한 데이터들을 꺼내서 재사용을 해야한다.

 

그런데 그렇다고 해서 우리가 이 메모리 주소를 하나하나 외울수는 없기 때문에

이 메모리 공간을 식별하기 위해서 변수를 사용하는 것이다.

따라서 이 변수라는 값의 위치를 가리키는 상징적인 이름 통해서 우리가 직접 메모리 주소에 접근하는 것이 아니라 변수를 통해 치환하여 접근을 할 수 있어서 안전하게 메모리에 접근을 할 수 있게 한다. 

 

 

---

🤔 식별자(identifier) 

• 값을 구별해서 식별할 수 있는 고유한 이름
• 사람을 이름, 성별, 이런것들로 구별해서 식별하는 것처럼 값도 식별자로 구분해서 식별하는 것이다.
• 식별자는 값이 아니라 메모리 주소를 기억하고 있고
• 식별자로 값을 구별해서 식별한다는 것은 식별자가 기억하고 있는 메모리 주소를 통해서 메모리 공간에 저장된 값에 접근을 한다는 것이다. 
• 자바스크립트 엔진에 식별자를 알리는 것을 선언(declaration)  이라고 한다.

 

 

 

🔇 변수 선언

변수를 사용하기 위해서는 변수를 선언을 먼저 반드시 해주어야 한다.

=> 자바스크립트 엔진은 변수 선언을 두단계에 걸쳐서 한다...

선언단계와 초기화단계이다! 

 

선언단계
변수 이름을 등록하여 변수가 있다~라고 존재를 알림

초기화단계
값을 저장하기 위한 메모리 공간을 확보하고 이 메모리 공간을 비워두는 것이 아니라
암묵적으로 undefined 로 할당해서 초기화한다.
* 만약 초기화단계를 거치지 않는다면 메모리 공간에는 이전 애플리케이션이 사용했던 값이 남아있을 수 있기 때문에 위험할 수 있다.

 

 

= > var, let, const 키워드를 사용한다. 

 

var let const 차이점이 뭘까??

 

결론부터 말하면
var - 중복선언 가능, 재할당이 가능
let - 중복선언 불가능, 재할당은 가능
const - 중복선언 불가능, 재할당도 불가능

 

먼저 var 부터 말해보자

• 선언단계와 초기화단계가 동시에 일어난다.
• var score ; 라고 하면 이름을 등록하고 바로 score 변수에 암묵적으로 undefined 를 할당해 초기화한다. 
• var 로 변수를 선언하면 동일한 이름으로 여러번 중복해서 선언이 가능하다.
• -> 따라서 이렇게 되면 마지막에 할당된 값이 변수에 저장된다.

var name = 'hihilong';
console.log(name); // hihilong

var name = 'kim';
console.log(name); // kim

 

 

오호라 let 의 특징을 봐보자..

• 얘는 var 과 달리 이미 저장된 변수라고 에러가 뜬다.
• 하지만 만약에 초기화를 시킨다면 다시 할당을 시킬 수 있다.

let name = 'hihilong';
console.log(name); // hihilong

let name = 'kim';
console.log(kim);
// Uncaught SyntaxError: Identifier 'name' has already been declared

 

 

const 특징은? ? 

• 상수를 뜻하기 때문에 한번 값이 지정이 되면 바꿀 수 없음

const name = 'hihilong';
console.log(name); // hihilong

const name = 'kim';
console.log(name);
// Uncaught SyntaxError: Identifier 'name' has already been declared

 

 

변수의 재할당

변수에 값을 재할당할 때 기존에 사용하고 있는 메모리 공간을 지우고 재할당하는 게 아니라 
새로운 메모리 공간을 확보해서 저장한다.

 

변수의 재할당

 

 

 

 

요약본 정리

https://github.com/9rooom-deepdive-study/javascript-study/blob/main/01%ED%9A%8C%EC%B0%A8/%EA%B9%80%ED%98%9C%EC%9B%90(4%2C5%2C6%EC%9E%A5).md