모던 자바스크립트 Deep Dive - 제 4장

<모던 자바스크립트 Deep Dive - 제 04장>

2023. 01. 26

 

---

 

 

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

컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해서 데이터를 기억한다!

 

'메모리'는 데이터를 저장할 수 있는 메모리 셀의 집합체다. 

메모리 셀 하나의 크기는 1바이트(8비트)

 

각 셀에는 고유의 메모리 주소가 있는데 이 주소는 메모리 공간의 위치를 나타냄

 

 

 

ex) 10 + 20 이라는 코드를 컴퓨터에 실행한다면?

-> 10과 20이 각각 메모리 상의 임의의 위치에 저장됨

-> CPU는 이 값을 불러와서 연산을 수행함

-> 연산의 결과값인 30도 메모리 상의 임의의 위치에 저장됨

 

 

그런데 이때 우리가 연산의 결과값인 30을 사용하고 싶다면?

결과값 30이 저장된 메모리 공간에 직접 접근하는 것 외에는 방법이 없다. 

하지만 이 방법은 치명적 오류를 발생시킬 가능성이 높은 위험한 방법임

 

 

따라서 우리는 기억하고 싶은 값을 메모리에 저장하고,

저장된 값을 읽어 들여서 재사용하기 위해 변수라는 메커니즘을 사용함. 

 

 

 

 

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

간단히 말해, 값의 위치를 가리키는 상징적인 이름!

 

위의 예시에 적용해보면 10 + 20 으로 끝나는게 아니라

 

const result = 10 + 20 과 같은 방법으로 

result라는 이름의 변수를 사용해 30이라는 연산 결과값을 재사용할 수 있다. 

 

 

---

 

 

4.2 식별자 

 

변수를 '식별자'라고 하기도한다. 

이때 식별자(변수)는 특정 값이 아니라 그것이 저장된 메모리 주소를 기억하고 있다. 

 

 

---

 

4.3 변수선언

 

변수를 사용하려면 반드시 선언이 필요하다. 

변수를 선언할 때는 var, let, const 키워드를 사용한다. 

 

(var는 거의 사용할일 X) => 함수 레벨 스코프를 지원하기 때문에 오류 발생 가능

나중에 따로 한번 정리하기!

 

 

변수 선언은 다음과 같은 2단계에 거쳐 수행됨.

1. 선언

2. 초기화

 

 

ex) const name; 이라는 코드를 작성 

선언 단계 -> 변수 이름 name을 등록

초기화 단계 -> name 변수에 암묵적으로 undefined를 할당해서 초기화함

 

즉, 어떤값도 변수에 할당하지 않았더라도 

초기화 단계를 거쳐서 'undefined'라는 값을 갖게됨.

 

why? 

초기화 단계를 거치지 않으면 메모리 공간에

이전에 다른 애플리케이션이 사용했던 값이 남아있을 수 있음

이를 쓰레기 값 (garbage value)라고 함. 

따라서 초기화 단계를 거쳐서 쓰레기 값이 나오지 않도록 하는것임

 

 

---

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

 

 

책에서 제공한 예제

console.log(score); var score;

 

현재 예시를 보면 변수를 참조하는 코드가 선언문보다 앞에 있음.

생각해보면 에러가 뜰거같은데 에러가 발생하지 않고 초기값인 undefined가 출력된다. 

 

그 이유는 

변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점,

즉 런타임(runtime)이 아니라 그 이전 단계에서 먼저 실행되기 때문

 

 

자바스크립트는 소스코드를 한줄씩 순차적으로 실행하기 이전에 

먼저 소스코드의 평가 과정을 거치면서 준비를 한다.

 

이때 평가과정에서 변수 선언을 포함한 모든 선언문(변수, 함수 등)을 먼저 실행한다. 

즉, 변수 선언이 어디 줄에 있던 상관없이 다른 코드보다 먼저 실행한다. 

 

이처럼 변수 선언문이 코드 제일 앞쪽으로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을

변수 호이스팅(variable Hoisting)이라고 한다. 

 

 

---

 

4.5 값의 할당 

 

값을 할당할 때는 할당연산자 =를 사용

 

주의!) 변수를 선언하는 것과 값을 할당하는 것은 실행 시점이 다르다

=> 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다!!!

 

책에서 제공한 예제>

console.log(score); const score;     변수 선언 score = 80;     변수에 값을 할당 console.log(score);

앞의 내용들을 적용해서 살펴보자면 

첫줄의 console.log(score); 에서는 undefined가 출력된다. 

런타임 이전에 score라는 변수가 이미 선언되었고 초기화 되었기 때문이다. 

 

하지만 마지막줄의 console.log(score); 에서는 80이 출력된다. 

값을 할당하는건 선언과 다르게 런타임에 실행되기 때문이다

 

 

---

4.6 값의 재할당 

 

const 키워드를 사용해서 선언한 변수는 재할당이 금지됨.

const는 한번만 할당할 수 있는 변수를 선언하는 상수를 표현하는 키워드임

 

 

---

4.7 식별자 네이밍 규칙 

 

예악어는 식별자로 사용할 수 X

예악어를 전부 알아놓기보다는 필요할때마다 구글링으로 찾아보기

 

 

네이밍 컨벤션>

식별자를 만들 때 가독성 좋게 단어를 한눈에 구분하기 위한 규칙임.

 

1) 카멜 케이스 

const firstName;

 

2) 스네이크 케이스

const first_name;

 

3) 파스칼 케이스

const FirstName;

 

4) 헝가리언 케이스이건 굳이 정리 X

 

 

--- 일반적으로 자바스크립트에서 변수나 함수에는 카멜 케이스 사용생성자 함수, 클래스의 이름에는 파스칼 케이스를 사용함