[Java Script] 모던 자바스크립트 DEEP DIVE: 시작 & 04. 변수

** 본 글은 모던 자바스크립트 DEEP DIVE 를 읽고 정리한 글입니다.
** 본인이 책 내용의 이해를 돕기 위해 정리한 글이며, 부 정확한 정보전달이 있을 수 있습니다.

---

시작하면서...

작년에 코딩을 처음 접한 이후로 대부분의 이론은 최대한 적게 배우고 많이 활용하는 식으로 사용을 해 왔다.

한 가지 방법을 이해하기 위해서 알아야 될 것들이 끝이 없었기 때문이다.

그렇게 미뤄오던 Java Script의 이론을 이제는 배워야 할 것 같아서 "모던 자바스크립트 DEEP DIVE"를 읽게 되었다.

 

** 1 ~ 3 장은 직접적으로 정리할 만한 내용이 없어서 넘깁니다.

직접 그린 우리 js 도마뱀

 

---

04. 변수 

변수란?

코딩, 그리고 Java Scirpt 를 접하고 나서부터 계속 사용해 오던 변수.

이전 까지는 수학에서 x = 10 과 같은 값을 사용하던 것 처럼 어떤 공식에 따라 변할수 있는 값 정도로 이해하고 넘어갔었다.

그러나 프로그래밍에서는 하나의 값을 저장하기 위해 확보한 메모리 공간을 의미한다.

즉, 우리가  x = 10 이라고 할당한 변수는 컴퓨터 메모리 공간 어딘가에 저장되며,

사실 이 변수는 어딘가에 저장 된 주소를 기억 하고 있는 것이다.

이해를 돕기 위한 그림. 컴퓨터 어딘가에 저장 된 메모리의 주소를 갖고 있는 게 변수다.

그리고 우리가 변수를 호출(사용) 할 때에는 가진 메모리 주소로 메모리에 접근하여 값을 읽어오는 것이다.

 

추가로, 위에서 변수를 할당한 A 는 식별자이다.

메모리 주소를 구분할 수 있는 고유한 이름 이며, 변수 외에 함수, 객체, 클래스 등 붙인 이름들이 식별자이다.

 

 

변수 선언과 할당

사실 이 두 부분은 따로 설명 하는 것이 좋겠지만, 통상적으로 나(우리)는 이 두 부분을 함께 사용해 왔다.

그래서 함께 그려보자면

var result; // 변수 선언
result = 10; // 변수 할당. result에 10 이라는 숫자를 할당한다.

var result = 10; // 변수 선언과 할당. 위 두 줄의 코드와 같은 역할을 한다

변수 선언 / 할당의 과정에 따른 메모리 변화

변수가 선언 / 할당 될 때는 이와 같은 메모리의 변화 과정을 거친다.

 

변수 선언과 초기화

변수 선언시, 메모리는 초기화의 과정을 거친다.

처음에 메모리가 텅텅 비어 있을 것이라고 생각하지만, 우리가 다른 웹(앱) 개발에 쓰였던 변수들이 사실 메모리에 남아있다. 이렇게 남아있던 쓰레기 값(garbage value) 을 undefined 라는 빈 값으로 우선 초기화 하여 다른 값을 할당 할 준비를 해주는 것이다.

 

그럼 지금 안 쓰이는 메모리는 어떻게 되나요?

위 처럼 변수 선언 / 할당 / 재할당의 과정을 거치면서 해당 메모리가 갈아끼워지는것이 아니라
새로운 메모리를 할당하고, 이전 메모리는 사용하지 않는 것을 볼 수 있다.
이렇게 사용되지 않는 메모리는 자바스크립트의 가비지 콜렉터 (garbage collector) 자동으로 정리해준다.
다만 메모리를 정리하는 정확한 시점은 알 수 없기 때문에,
직접 메모리를 추가, 삭제하며 관리하는 C와 같은 다른 언어들과 성능 차이가 발생할 수 있다.

변수 식별자는 어디에 등록되는가?

실행 컨텍스트 (excution context)
실행 컨텍스트는 자바스크립트 엔진이 코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드 실행 결과를 관리하는 영역이다.
이 실행 컨텍스트는 key: value의 객체 형태로 관리되는데, 예시를 들면

var A = 'A'; // 이 변수는

//실행 컨텍스트 내부
{ 
  A: "A"
  ...
} // 이러한 형태로 등록되어 관리된다.

 

아직 이해가 잘 되진 않으나 추후 제대로 배울 테니 간단하게 이해하고 넘어가자.

 

변수 할당 / 재할당

선언한 변수들에 값을 넣어주는 것을 할당이라고 한다.

= 연산자를 사용하여 값을 할당 해 줄 수 있다.

처음 할당할때나, 재할당 할 때 모두 위와 같은 메모리의 흐름을 거친다.

 

 

변수 호이스팅

변수 호이스팅은 선언한 것들 (변수, 함수 선언식 등) 을 코드의 가장 위로 끌어올려주는 것 이라고 이해하면 편하다.

코드는 항상 첫번째 줄부터 마지막 줄까지 위에서 아래로 읽어가는데,

자바스크립트는 함수 호이스팅 때문에

1. 첫번째 줄부터 선언한 것들을 먼저 읽어서 참조함
2. 다시 첫번째 줄부터 할당 및 사용한 것들을 읽음

과 같은 과정을 거친다고 볼 수 있다. 때문에

console.log(A);
var A = 'A'; // undefined 출력.

위 코드를 변환하면 =>

var A;
console.log(A):
A = 'A';

위와 같은 코드도 에러 없이 undefined 를 출력하며 실행은 된다.

다만 변수의 할당은 호이스팅되지 않으니, 주의할 것

 

+ 추가로, ES6에 등장하여 요새 사용중인  let 은 호이스팅을 발생시키지 않는 것 같은데, 정확한건 추후에 알아보도록 하자.

 

 

식별자의 규칙과 유형

자바스크립트 그리고 다른 프로그래밍 언어에는 예약어 라는 값이 존재한다.

예악어는 var 키워드와 같이 이미 사용되고 있는 것들이며

var, const, function, await, 등 다양하게 존재한다.

다 외울 필요는 없으니 사용한 변수가 에러를 뱉었을 때, 눈치껏 바꿔주는 센스정도만 탑재하자.

 

그 외에 규칙으로는

• 특수문자는 $ _ 두 가지만 사용가능하다.
• 숫자는 변수 첫자로 올 수 없다.
• 변수는 대/소문자를 구분한다.

을 유의하여, 적절한 네이밍 규칙과 컨벤션을 따라 사용하자.

• MainPage 파스칼 케이스, 첫 자 부터 대문자로 구분
• mainPage 카멜 케이스, 첫 자 이후부터 대문자로 구분
• main_page 스네이크 케이스, 언더바로 구분
• strMainPage 헝기리안 케이스, 첫 시작시 자료형 명시 이후 카멜 케이스

---

오늘의 후기

아직 첫 변수 부분을 읽었을 뿐인데 메모리 참조와 관련하여 부족했던 부분이 조금 채워지는 느낌을 받았다.

사실 시작하기 전만 해도 이걸 꼭 해야되나... 라는 생각이 있었는데, 하긴 해야겠구나... 로 생각이 바뀌었다.

 

아무튼 꾸준히 해보자.