[모던 자바스크립트 딥다이브]_변수 어디까지 보고 오셨어요?

변수란?

변수에 대해 설명을 하기 이전

우리는 먼저 컴퓨터의 관점에서 세상을 바라볼 준비를 해야 합니다.

컴퓨터는 가장 크게 어떤 구조로 이루어져 있을 까요?

CPU

여기 가장 기본적인 컴퓨터의 머리를 담당하는 CPU가 있습니다.

RAM

그리고 이를 보조해줄 RAM이라는 기억장치가 있습니다.

이 두개의 장치는 서로 긴밀하게 연결되어 있습니다.

CPU에서 연산한 결과를 RAM에 저장을 하게 되는 것입니다.

즉 우리가 컴퓨터에게 어떤 일을 시키면 CPU는 열심히 연산을 통해
값을 도출해 내고 이를 RAM에 저장한다는 말입니다.

따라서 우리가 이제 배울 변수는 이러한 구조를 알고 있다는 것을 전제로 진행하겠습니다.

 

예를 들어 우리가 컴퓨터에게 5+20을 계산을 시킨다면

다음과 같은 순서로 처리가 됩니다.

5, 20이라는 수를 인식하고 RAM속에 저장.

연산자 ' + '인식

5 + 20 을 계산한 후 25 값 도출

25의 값을 메모리셀에 저장

우리는 이것을 처리에 대한 흐름을 확인한 것입니다.

 

그렇다면 메모리에서는 어떤 식으로 일어나는지 확인해보겠습니다.

위와 같은 모양의 RAM이 있다고 하겠습니다.

RAM의 격자는 각 메모리셀에 해당한다고 생각하면 되겠습니다.

(사람마다 메모리셀을 설명하는 모양이 다르기 때문에 쉽게 이해가는 모양을 선택하면 됩니다.)

 

그래서 설명을 이어가면

5
...	...	...	...
	20
		25
...	...	...	...

다만 우리는 메모리셀 어디에 값을 저장할지는 알수가 없습니다.

(다시 말씀드리지만 메모리셀 도식은 단순히 이해를 돕기 위한 예시입니다.)

그래서 각 값들은 서로 이어져 있을수도 있고, 먼 곳에 떨어져서 저장될 수 있습니다.

그렇다면 우리는 다시 이 값들을 재사용해야 할 때 어떻게 사용할 수 있을 까요?

정답은 주소를 이용하는 것입니다.

 

0x00000000 5	0x00000001	0x00000002	0x00000003
...	...	...	...
0x000000F1	0x000000F2 20	0x000000F3	0x000000F4
0x000000F5	0x000000F6	0x000000F7 25	0x000000F8
...	...	...	...

0x00000000 이런 형식은 컴퓨터가 사용하는 16진법에 해당합니다.

0부터 9까지의 숫자와 A부터 F까지의 알파벳을 이용해 만들 수 있습니다.

따라서 이렇게 주소가 있을 때 우리는 값이 들어있는 주소에 접근하면

값에 도달할 수 있게 됩니다.

그리고 이제 드디어

이 주소의 이름을 변수라는 이름에 할당하면

그토록 바라던 변수가 값을 가리키게 됩니다.

식별자는 변수의 또 다른 이름입니다.

어떤 값을 구별해서 식별할 수 있다는 고유한 이름입니다.

---

선언, 초기화, 할당

이제 변수가 무엇인지 알았다면

어떤 순서로 값에 연결하는지 알아보겠습니다.

 

선언은 우리가 변수라는 이름을 컴퓨터에게 인식시키는 과정입니다.

var라는 키워드를 사용해 변수를 선언합니다.

var 필중;

이런 식으로요.

필중은 변수 이름입니다~

그리고 초기화란 자바스크립트의 독특한 특징 중 하나인데요.

변수에 해당하는 메모리를 확보하는 과정에서

미리 메모리 속에 Undefined라는 값을 미리 할당합니다.

뜻은 정의되지 않았다는 것입니다.

그래서 미리 방을 빼고 새입자를 받을 준비를 하는 것이죠.

 

그리고 이제 우리는 우리를 위해 준비된 메모리셀에 값을 집어넣어 줄 수 있게 되었죠.

할당을 하면 확보된 메모리셀엔 값이 저장됩니다.

var 필중;

필중 = 'human';

자, 그럼 필중에 대한 값을 사용하고 싶다면 

변수를 사용하면 됩니다.

왜냐하면? 변수는 값의 주소를 가리키기 때문이죠.

그럼 바로 변수를 사용해보겠습니다.

var 필중;
console.log(필중); // undefined

필중='human';
console.log(필중); // human

우리는 이렇게 console.log라는 메소드를 통해 콘솔창에 값을 나타낼 수 있습니다.

그리고 값을 확인해보면,

변수를 선언한 직후 출력된 값이 undefined인 것을 확인할 수 있습니다.

그리고 변수에 값을 할당한 후에는 human이라는 값이 잘 출력되었습니다.

 

그럼 만약 콘솔 메소드를 선언 전에 해버리면 값이 나올까요?

참조 오류가 발생할까요?

console.log(필중); // undefined

var 필중;

정답은 undefined 였는데요.

왜일까요?

자바스크립트는 다른 언어와 마찬가지로

런타임에는 탑다운 방식으로 코드를 읽어나갑니다.

하지만 변수 선언이 있다면,

런타임 이전에 변수 선언부터 먼저 읽습니다.

그래서 콘솔 메소드가 실행될 시점은

이미 변수가 선언되고 메모리에 undefined값으로 초기화 된 상태였던 것입니다.

우리는 이것을 변수 호이스팅이라고 부릅니다.

만약 변수가 아니라 함수라면, 함수 호이스팅이라고 부르겠죠?

그건 앞으로 나중에 더 배워보도록 하겠습니다.

 

ES6 즉, 자바스크립트 의 뿌리라고 할 수 있는

ECMA Script 사양이 업그레이드 되면서

var라는 변수 선언 예약자 말고도

let과 const라는 예약자가 추가되었습니다.

그럼 차이점을 중점으로 알아보겠습니다.

var	-var는 ES5 이전 버전에서 변수를 선언하는 키워드로 사용되었습니다. -var로 선언된 변수는 함수 스코프(function-scoped)를 갖습니다. 즉, 함수 내에서 선언된 변수는 함수 내에서만 접근이 가능하며 함수 외부에서는 접근할 수 없습니다. -var는 호이스팅(hoisting)이 발생합니다. 호이스팅이란 변수 선언이 해당 스코프의 최상단으로 끌어올려지는 현상을 말합니다. 이로 인해 변수 선언 전에도 변수를 사용할 수 있지만, 값은 할당되지 않은 상태(undefined)가 됩니다.
let	-let은 ES6(ECMAScript 2015)에서 추가된 변수 선언 키워드입니다. -let으로 선언된 변수는 블록 스코프(block-scoped)를 갖습니다. 즉, 중괄호({})로 둘러싸인 블록 내에서만 접근이 가능하며 블록 외부에서는 접근할 수 없습니다. -let은 호이스팅이 발생하지만, 초기화되기 전까지는 일시적인 사각지대(temporal dead zone)에 빠져 변수를 사용할 수 없습니다.
const	-const는 또 다른 ES6의 변수 선언 키워드입니다. -const로 선언된 변수는 상수를 선언하는데 사용되며, 재할당이 금지됩니다. 즉, 선언 후에 값을 변경할 수 없습니다. -const로 선언된 변수도 블록 스코프를 갖습니다.

각 차이점을 생각하면서 다음의 예제를 살펴보겠습니다.

console.log(ilove); // undefined
console.log(coding); // Uncaught ReferenceError
console.log(somuch); // Uncaught ReferenceError

var ilove;
let coding;
const somuch;

신기하지 않나요?

var는 초기화가 되어 undefined 값이 출력되지만

나머지 예약어는 분명 초기화를 할텐데도 참조오류라고 말해줍니다.

왜 그럴까요?

정답은 ES6로 사양이 업그레이드 되면서 생겨난 let과 const는

var의 태생적 문제를 보완하기 위해 생겨난 예약어이기 때문입니다.

var는 이전에 봤던 것처럼 메소드를 사용해도 이후에 변수가 선언되어도,

앞으로 끌어올려져서 원래의 코드의 의도와는 달라질 위험 있습니다.

그래서 let과 const는 TDZ(temporal Dead Zone)이라는 단계가 있는 것입니다.

만약 우리가 원하지 않았는데 실수로 변수가 선언되어 사용되고, 오류를 보여주지 않아

우리가 일일히 코드를 파헤쳐가는 것을 방지하는 것입니다.

즉, 함수에 사용될 변수를 미리 선언하도록 오류를 통해 알려줄 수 있게 된 것이죠.

그림으로 보면 다음과 같습니다.

선언

초기화

할당

이것이 var 라면,

선언

TDZ

초기화

할당

이건 let과 const 입니다.

---

변수 네이밍 규칙

변수는 세가지 규칙을 지켜서 지어야 합니다.

• 식별자는 특수문자를 제외한 문자, 숫자, 언더대시, 달러기호를 포함할 수 있습니다.
• 단 숫자로 시작할 수 없습니다.
• 예약어도 포함할 수 없습니다.

그리고 추가로 코드의 가독성을 높일 수 있도록 네이밍 컨벤션이라는 규칙을 활용할 수 있습니다.

var myData; // 카멜 케이스

var my_data; // 스네이크 케이스

var MyData; // 파스칼 케이스

var intMyData; //헝가리언 케이스

위와 같이 변수를 지을 때 일관된 규칙을 사용할 수 있습니다.

회사마다 팀마다 정해진 규칙이 있기 때문에 잘 지켜서 사용하면 되겠습니다.

혼자 프로젝트를 진행하더라도 일관된 규칙으로 코드를 작성해야 헷갈리지 않겠죠?

일반적으로는 변수나 함수에는 카멜 케이스를 사용하고,

생서자 함수, 클래스 이름에는 파스칼 케이스를 사용하고 있습니다.