[TIL/모던 자바스크립트 Deep Dive] 2023/03/05

4장. 변수(Variable)

4-1. 변수란 무엇인가? 왜 필요한가?

변수란 무엇인가?

변수(Variable)란 하나의 값을 '저장'하기 위해 확보한 '메모리 공간 자체' 또는 그 메모리 공간을 '식별하기 위해 붙인 이름'을 말한다.

이미지 출처: https://codingclimber.tistory.com/28

<10 + 20>을 계산할 때

사람 1. '10', '20', '+' 각각의 '기호'의 의미를 알고 있다. 2. '10 + 20'라는 '식'의 의미를 알고 있다. 3. 숫자 10과 20을 기억한다. 결과값 30도 기억한다. _4. 일련의 과정이 모두 '두뇌'에서 진행된다._

컴퓨터 1. '10', '20', '+' 각각의 '기호'의 의미를 알고 있다. 2. '10 + 20'라는 '식'의 의미를 알고 있다. 식을 연산한다. 3. 숫자 10과 20을 기억한다. 결과값 30도 기억한다. _4. 연산은 CPU에서, 기억은 메모리에서 진행된다._

일반적으로 컴퓨터의 CPU를 사람의 '두뇌'로 비유한다. 사람과 컴퓨터의 연산 매커니즘은 4번에서(=메모리에서) 차이가 난다.

변수가 왜 필요한가?

결론부터 말하자면, '메모리 주소를 통해 값에 직접 접근하는 것'에 여러 제한 사항이 존재하기 때문에 변수가 필요하다.

메모리(Memory)는 데이터를 저장할 수 있는 메모리 셀(Memory Cell)의 집합체다. 메모리 셀 하나의 크기는 1바이트(=8비트)이며, 컴퓨터는 1바이트 단위로 data를 저장하거나 읽어들인다. 이러한 memory cell은 고유의 '주소'를 갖는다.

앞서 <10 + 20>이라는 연산을 했는데, 연산 결과가 필요했고 이를 통해 무언가를 하겠다는 의도가 있었을 것이다. '변수'라는 개념이 없었다고 가정하면, 해당 결과값을 '재사용'하기 위해 메모리 셀에 직접 접근하는 것 외에는 방법이 없다는 사실을 알 수 있다.

메모리 주소를 통해 값에 직접 접근하면 치명적인 오류를 발생시킬 가능성이 매우 높다고 한다. 여러 이유로 자바스크립트 개발자는 직접적인 메모리 제어를 허용하지 않는다.

아 됐고! 그래서 변수가 뭐야?

우리가 어떤 작업을 수행하면 컴퓨터는 'CPU'에서 연산하고, '메모리'에서 기억해! 그런데 우리가 결과값을 활용하려고 메모리 주소에 '직접 접근'하면 치명적인 오류가 발생할 수 있대! 우리가 원하는 data가 있는 메모리 위치를 가리키는 상징적인 이름이 '변수'고 우리는 변수 덕분에 원하는 데이터에 안전하게 접근할 수 있는거징!!

추가적인 개념

변수는 결국에 하나의 data를 저장하기 위해 해당하는 방에 이름을 붙여주는 것이다. 방에 여러 개의 data가 들어가려면 원래는 여러 가지 변수를 사용해야 한다. 다만, 배열이나 객체 같은 자료구조를 활용하면 관련이 있는 여러 data를 하나의 값처럼 사용할 수 있다.

컴퓨터가 메모리 주소에 직접 접근하는 것을 극도로 싫어하기에 변수를 사용하지만, 사실 코드라는게 나랑 컴퓨터만 읽는 것은 아니다. 미래의 동료 개발자들이 읽게 될 '개발 문서'라는 점에서, 능률적인 협업을 위해 변수를 열심히 공부해서 가독성 높은 코드를 작성하도록 하자!!

4-2. 식별자(Identifier)

식별자란 무엇인가?

식별자(Identifier)는 '어떤 값을 구별해서 식별할 수 있는 고유한 이름'을 말한다. 곧 '변수 이름'이다. 핵심은 식별자는 '값'이 아니라 '메모리 주소'를 기억한다는 점이다. 하지만 변수에만 국한되는 개념이라기 보다는 조금 더 범용적인 의미로 사용된다.

변수, 함수, 클래스 등 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 '식별자'이며, 우리는 주어진 '네이밍 규칙'을 준수해야 하고, '선언'을 통해 자바스크립트 엔진에 식별자의 존재를 알리게 된다.

4-3. 변수 선언(Variable Declaration)

변수 선언이란 무엇인가?

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

변수를 선언하기 위해(=생성하기 위해) 'var, let, const'와 같은 키워드를 사용하게 된다.

var 키워드에 여러 단점이 있기에, ES6 문법에서는 'let, const'라는 변수 선언 키워드를 도입하게 되었다. let, const를 이해하기 위해 우선은 'var 키워드'를 통해 '변수 선언'을 학습했다.

변수 선언의 방법

'value'라는 변수명을 가진 변수를 var를 통해 선언했다. 눈에 보이지는 않지만 우리는 'value'가 특정 메모리 공간을 확보했다는 점을 알 수 있다.

그런데, 나는 value라는 변수에 아무런 값도 할당하지 않았는데, 콘솔에 변수의 타입을 찍어보면 'undefined'가 반환된다. 메모리 공간이 비어 있을 것이라고 생각했지만, 자바스크립트 엔진은 'undefined'라는 값을 암묵적으로 할당하여 해당 변수를 초기화했다. 자바스크립트의 독특한 특징이다.

일반적으로 자바스크립트 엔진은 변수 선언을 2단계에 거쳐 수행한다.

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

var 키워드를 통한 변수 선언은 '선언'과 '초기화'를 동시에 진행한다.

'초기화' 단계를 거치지 않으면, 확보된 메모리 공간에 이전에 다른 애플리케이션이 사용했던 값(=garbage value)이 남아있을 수 있다. 값을 할당하지 않은 상태에서 곧바로 변수 값을 참조하면 garbage value가 나올 수 있다.

var 키워드는 '선언'과 '초기화'를 동시에 진행하기 때문에 이러한 염려로부터 안전하다.

추가적으로, 선언하지 않은 식별자에 접근하면 'ReferenceError'가 발생한다. 위 코드를 보면 result는 선언된 적이 없다.

ㅇㅋ 오늘 자바스크립트 공부는 여기까지!!!