*🔐Study Keyword :

프로그래밍 언어에서 🔑변수가 ✅왜 필요한건지 파헤쳐보자 팍팍

💡TIP) 'use strict'?

• WHAT IS❓ 'use strict' 은 자바스크립트 파일 가장 상단에 선언하면 유연한 JavaScript 언어 규칙을 보다 엄격하게 만들어줄 수 있는 명령어다.
  그러니 JavaScript 파일을 만들면 항상 상단에 'use strict'을 적도록 습관화하자!

💡Quiz!) 프로그래밍 언어의 핵심은?

A. 입력, 처리(연산), 출력✨

• 애플리케이션은 데이터를 다룬다. 결국 데이터를 입력받아 처리하고 그 결과를 출력하는 것이 전부라고 볼 수 있다.
• EX>애플리케이션은 사용자로부터 콘솔이나 UI로 입력받은 DATA를 잘 처리(연산)해 알맞은 결과를 사용자에게 3>출력하는 과정을 가진다.

-1. 변수가 왜 필요한가?

<script>
10 + 20; 
</script>

• ※ 컴퓨터는 위 식을 어떻게 계산할까❓💁‍♂️

자바스크립트를 해석하고 실행하는 자바스크립트 엔진은 위 코드를 우선 실행한다. 자바스크립트 엔진이 이 코드를 계산(평가)하려면
1) 먼저 10, 20, +라는 기호(리터럴과 연산자)의 의미를 알아야하고
2) 10+20이라는 표현식의 의미도 알아야한다.
3) 그리고 이것을 해석(파싱)할 수도 있어야한다.
또한 사람과 달리 컴퓨터는 CPU를 사용해 연산을 하고 메모리를 사용해 데이터를 기억(저장)해 기억과 연산을 수행하는 부품이 나눠져있음을 꼭 기억하자아.

- WHAT IS❓ 메모리...그게뭐쥬....❓🙋‍♂️

메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체입니다.
메모리 셀 하나의 크기는 1바이트(8비트)이며 컴퓨터는 1바이트(메모리셀 한개!) 단위로 데이터를 저장하거나 읽어들인다.
그림처럼 각 메모리 셀은 고유의 메모리 주소를 갖고 있는데 이 주소가 메모리 공간의 위치를 나타낸다.

💡상식T.I.M.E마) 컴퓨터는 모든 데이터를 2진수로 처리한다.

메모리에 저장되는 데이터(숫자, 텍스트, 이미지, 동영상)의 종류 상관없이 모두 2진수로 저장된다. 위 그림은 저자님께서 이해를 위해 편의상 10진수로(LIKE 10, 20과 같이) 표현되었지만 실제 메모리에 저장되는 모든 값은 2진수로 저장된다는 상식은 알고가쟝

10 + 20 숫자 값 10, 20 역시 메모리 상의 임의 위치인 메모리주소에 *저장되고 CPU는 이 값을 읽어들여 *연산을 수행한 결과로 생성된 숫자 값 30 역시 메모리 상 임의의 위치인 메모리 주소에 저장된다는 사실!

🚫문제는 CPU가 연산하여 만든 숫자 값 30을 재사용할 수 없다는 것이다........ㅜ😥

• 그냥 메모리 공간에 접근해서 재사용하면 안되나유...❔❕🤷‍♂️

🙅‍♂️ NOPE❌! 직접 메모리 공간에 접근하면 안되는 이유 !

1. 메모리 공간에 직접 접근하는 방식은 오류를 발생시킬 가능성이 높다.
   운영체제가 사용하고 있는 값이 실수로 변경되면 시스템이 멈추는 대형사고가 생길지도..(우리가 알고 있는 블루스크린 화면 현상같은 무시무시한..)
2. 코드 실행 전 값이 저장된 메모리 주소를 알 수 있는 방법이 없다.
   메모리 주소는 코드 실행 될 때 마다 메모리 상황에 따라 임의로 결정되어 동일한 코드가 실행되도 값이 저장될 메모리 주소가 변경된다.
   ->따라서 자바스크립트는 개발자의 직접적인 메모리 제어를 허용하지 않는다.

그
래
서

💻프로그래밍 언어에서 제공한 메커니즘이 바로 변수!🙆‍♂️

• 기억하고 싶은 값을 메모리에 저장하고 저장된 값을 읽어들여 재사용을 위해 탄생한 변수 🙆‍♂️
• 변수야말로 프로그래밍 언어에서 ✅데이터를 관리(저장 및 값을 읽어 재사용) 하기 위한 핵심 개념이라 할 수 있다.

• WHAT IS 변수❔❕

• 변수란 프로그래밍 언어에서 값을 저장하고 참조하는 메커니즘으로
  하나의 1>값을 저장하기 위해 확보한 메모리 공간 자체 또는
  2>그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.
• 여기서 말하는 이름은 🔶값이 저장된 메모리 공간의 위치🔶를 가리키는 상징적인 이름을 말한다.

<script>
var result(변수 이름) = 10 + 20(변수의 값);
</script>

-상징적인 이름의 변수는 프로그래밍 언어의 컴파일러 또는 인터프리터에 의해서 값이 저장된 메모리 공간의 주소로 치환되어 실행된다. 이 때문에 개발자는 변수를 이용하여 안전하게 값에 접근할 수 있다.

• HOW TO USE❕❓

메모리 공간에 지정된 값을 식별할 수 있는 고유한 이름을 변수명(또는 식별자)이라하고 그 변수에 저장된 값을 변수값이라 고한다.

-값이 저장된 메모리 공간에 붙인 상징적인 이름인 변수명(ex>result)을 사용해 참조를 요청하면 자바스크립트 엔진은 변수명과 매핑된 메모리 주소를 통해 메모리 공간에 저장된 값인 변수 값(ex>30)을 반환한다.

var result = 10 + 20;
변수에 값(10+20=30)을 저장하는 것을 할당(대입, 저장)이라한다.
result // 30
변수를 참조하여 변수에 저장된 값을 읽어 들일 수 있다.

- 식별자란?

• WHAT IS 식별자❔❕

• 식별자란 변수 이름으로 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다.
• 식별자는 메모리 공간에 저장되어 있는 어떤 값을 식별하기 위해
  어떤 값이 저장되어 있는 메모리 주소를 기억(저장)한다.

• HOW TO USE❕❓

<script>
var result(식별자) = 10 + 20(변수의 값);
</script>

• 식별자 result가 값 30을 식별하기 위해서는 값이 아닌
  값 30이 저장된 메모리 주소 (0x0069F913, 임의의 주소)와 매핑관계를 맺어 이 정보를 기억한다.
  -->따라서 식별자는 기억하고 있는 값의 메모리 주소를 통해 메모리 공간에 저장된 값에 접근할 수 있게 된다.

💡 함수, 클래스 등의 이름은 모두 식별자)

-식별자인 변수명으로 메모리 상에 존재하는 변수 값을 식별하듯
함수명으로 존재하는 함수(자바스크립트에서 함수 = 값✨)값을,
클래스 명으로 메모리 상에 존재하는 클래스 값 역시 식별해 낼 수 있다.
-->이는 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자라는 것을 증명한다.

• 그렇다면 식별자의 존재는 어떻게 알려지는 걸까❓💁‍♂️
  식별자의 존재는 바로 선언에 의해 자바스크립트 엔진에게 알려진다.🙆‍♂️

- 3. 선언이란?

• WHAT IS 변수 선언❔❕

• 변수 선언이란 변수를 생성하는 것으로 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수도록 준비하는 것을 말한다.

• HOW TO USE❕❓

• 변수가 사용되려면 반드시 선언이 필요한데 변수를 선언 할때 var, let, const키워드를 쓴다.
• var, let, const 키워드는 뒤에 오는 변수이름으로 새로운 변수를 선언할 것을 지시하는 키워드로. 각각의 키워드가 변수를 어떻게 활용할 것인지에 대한 목적을 결정하기 때문에 그 목적에 맞게 사용됩니다.

• 자바스크립트 엔진은 변수 선언을 2단계 거처 수행하는데

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

• 단, var 키워드를 사용한 변수선언의 경우 두 단계가 암묵적으로 동시에 진행되는데 초기화란 변수가 선언된 이후 최초로 값을 할당하는 것을 말한다.

아래의 변수 선언문은 변수 이름을 등록하고 값을 저장할 메모리 공간을 확보해 undefined값을 할당하여 초기화한다.

<script>
var(변수 선언 키워드) score(변수명, 식별자);//변수 선언문
// 변수선언 - 변수명 등록해 변수의 존재 알림 
// 초기화 단계 - 값을 저장하기 위한 메모리 공간을 확보 한 뒤 undefined를 할당해 초기화
</script>

💡 선언 하지 않으면?)

• 변수 뿐만 아니라 모든 식별자(함수, 클래스) 역시 사용하기 위해선 선언을 해야한다.
• 식별자를 통해 값을 참조(접근)하려 했지만 자바스크립트 엔진이 등록된 식별자를 찾을 수 없을 땐 ReferenceError, 참조에러가 발생한다.

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

<script>
//순차적으로 실행하면 참조에러가 발생할 것 같지만
console.log(score)//undefined가 출력된다.
var score ;//변수 선언문
</script>

• 이는 변수 선언이 소스코드가 한줄씩 순차적으로 실행되는 시점, 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문이다
• 즉 자바스크립트 엔진은 선언문(변수, 함수 선언문 등)이 어디에 있든 상관없이 다른 코드 보다 먼저 실행한다.

• 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라고 한다.
• 모든 선언문은 런타임 이전 단계에서 실행 되기 때문에 변수 선언문 뿐만 아니라 var, let, const, fuction, class 키워드를 사용해서 선언하는 모든 식별자는(변수, 함수, 클래 등) 호이스팅된다.

-5. 값의 할당

변수에 값을 할당할 때 =(할당연산자)를 사용한다. 우변의 값을 좌변의 변수에 할당함을 의미한다.

<script>
var score ;// 변수 선언
score = 80; // 값의 할당
//위의 선언과 할당을 하나의 문으로 단축표현할 수 있다.
var score = 80; // 변수 선언과 값의 할당
</script>

🔅선언과 할당의 실행 시점 주의🔅)

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

<script>
console.log(score)// undefined - 변수 선언이 런타임 이전에 실행되었기 때문에 초기화 값이 나온다.
var score ;// 변수 선언 - 런타임 이전 실행
score = 80; // 값의 할당 - 런타임 이후 실행
console.log(score) // 80 - 값의 할당이 런타임 이후에 실행되어 새로운 메모리 공간을 확보해 재할당 된 값을 출력한다.
</script>

-6. 값의 재할당

• 재할당이란 이미 값이 할당된 변수에 새로운 값을 다시 할당하는 것을 말한다. 마찬가지로 이미 존재한 변수에 저장된 값을 버리고 새로운 메모리 공간에 값을 저장한다.
  -만약 값을 재할당 할 수 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아닌 상수이다. 상수, const 키워드는 한번 정해지면 변하지 않는 값으로, 값을 딱 한 번만 할당 할 수 있는 변수이다.

• 위 이미지 처럼 어떤 식별자도 참조하지 않은 undefined와 값 80처럼 불필요한 값들을 담은 메모리 공간은 가비지 콜렉터에 의해 자동으로 해제된다.

<script>
var scoreA = 80;//변수 선언과 값의 할당
scoreA = 90; //값의 재할당
var IamVar = scoreA
console.log(IamVar)
//let도 재할당 가능
let scoreB = 80;//변수 선언과 값의 할당
scoreB = 90; //값의 재할당
let IamLet = scoreB
console.log(IamLet)
//const는 상수여서 재할당 불가능
const scoreC = 80;//변수 선언과 값의 할당
scoreC = 90; //값의 재할당
const IamConst = scoreC
console.log(IamConst)
</script>

*💡conclusion

• Q. 프로그래밍 언어의 핵심은?
  A. 입력, 연산(처리), 출력
  데이터를 입력받아 처리(연산)하여 결과를 출력하는 것
• Q. 메모리란?
  A. 컴퓨터는 CPU로 연산을하고 메모리를 사용해 데이터를 저장하는데
  메모리는 데이터를 저장할 수 있는 1바이트(8비트) 크기의 메모리셀의 집합체이며 각각의 메모리셀은 메모리 공간의 위치를 나타내는 메모리 주소를 가진다.
• Q. 변수란?
  A. 데이터를 관리(값을 저장 및 참조하여 재사용)하기 위한 개념으로 값을 저장하기 위해 확보한 메모리 공간 자체 혹은 값이 저장된 메모리 공간의 위치를을 식별하기 위해 붙인 상징적인 이름이다.
• Q. 식별자란?
  A. 변수의 이름으로 어떤 값이 저장되어 있는 메모리 공간의 주소를 기억함으로서 값을 식별하기 위해 붙인 고유한 이름이다.
• Q. 선언이란?
  A. 변수를 생성하는 것으로 값을 저장하기 위한 메모리 공간의 주소를 확보하고 변수의 이름과 확보된 메모리 공간의 주소를 연결하여 값을 저장할 수 있도록 준비하는 것을 의미한다.
• Q. 변수 선언의 실행시점과 호이스팅이란?
  변수 선언의 실행시점은 런타임 이전이고 값의 할당은 런타임에 실행된다.
  변수 뿐만 아니라 선언문은 항상 런타임 이전에 실행 되기 때문에 선언된 모든 식별자가 코드의 선두로 끌어올려진 것처럼 동작하는 특징을 호이스팅이라한다.
• Q. 값의 할당과 재할당은?
  A. 값의 할당은 할당연산자를 활용해 변수에 메모리 공간을 확보하여 값을 할당하는 것을 의미하고 값의 재할당은 이미 값이 할당된 변수에 새로운 메모리 공간을 확보해 새로운 값을 저장하는 것을 말한다.
  할당(초기화 값이 undefined 이기에)과 재할당 모두 기존의 저장된 값을 버리고 새로운 메모리 공간에 값을 저장한다.

#📑Study Source

1. 책 - 모던 자바스크립트 딥다이브