04장 변수

4.1 변수랑 무엇인가?

• 애플리케이션은 곧 데이터를 다룸
• 데이터를 입력받아 처리하고 결과를 출력하는 게 전부!
• 즉, 변수는 데이터를 관리하기 위한 핵심 개념

10 + 20

• 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다. 또한 모든 데이터를 2진수로 처리한다.
• 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체, 메모리 셀 하나의 크기는 1바이트(8비트)
• 위 예시에서 10과 20은 메모리 상의 임이의 위치(메모리 주소)에 저장되고 CPU는 이 값을 읽어 연산을 수행

변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 or 그 메모리 공간을 식별한다. 즉 값의 위치를 가리키는 상징적인 이름이라고 할 수 있다.

4.2 식별자

• 변수 이름을 식별자라고도 한다. 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다.
• 식별자는 값이 아니라 메모리 주소를 기억하고 있다.
• 변수, 함수, 클래스 등의 이름 모두 식별자라고 할 수 있다. 이들은 네이밍 규칙을 준수해야 하며, 선언에 의해 자바스크립트 엔진에 식별자의 존재를 알린다.

4.3 변수 선언

• 변수를 생성하는 것을 뜻한다. 값을 저장하기 위한 메모리 공간 확보와 확보된 주소를 연결해서 값을 저장할 수 있게 준비한다.
• 변수 사용 시 반드시 선언이 필요함
• ES6 에서 let, const 키워드가 도입되기 전까지 var 키워드는 js 에서 변수를 선언할 수 있는 유일한 keyword 였음.
• var 키워드 : 블록 레벨 스코프 (block-level scope)를 지원하지 않고, 함수 레벨 스코프를 지원함, 따라서 의도치 않게
  전역 변수가 선언되어 부작용이 발생하기도 한다. 그 이유 때문에 let, const 키워드가 도입되었다.

var, let, const

자바스크립트 엔진의 변수 선언 단계

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

• var 키워드를 사용한 변수 선언은 선언 단계와 초기화 단계가 동시에 진행된다.
• 보통 초기화란 변수가 선언된 이후로 최초로 값을 할당하는 것을 말함. var 키워드로 선언한 변수는 unddefinded로 암묵적인 초기화가 자동 수행됨.
• var 키워드는 암묵적 초기화 수행을 통해 쓰레기 값 (garbage value)로부터 안전하다.
• 변수를 사용하려면 반드시 서언이 필요하고, 모든 식별자(함수, 클래스 등)도 마찬가지이다. 선언하지 않은 식별자에 접근하면 참조에러(ReferenceError)가 발생한다.

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

console.log(score);
var score;

• 변수 선언문인 var score; 보다 변수를 참조하는 코드인 console.log(score); 가 앞에 있다. 코드가 순차적으로 진행될 경우 아직 변수가 선언되기 이전이므로 위 코드를 참조하면 참조에러가 발생해야 한다. 하지만 undefined 가 출력된다! 🤭
• 이는 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문이다.
• 변수 선언이 코드의 앞으로 끌어 올려진 것처럼 동작하는 자바스크립트의 고유의 특징을 변수 호이스팅이라고 한다.

4.5 값의 할당

• 변수에 값을 할당 할때는 할당 연산자(=)를 사용한다.

var score;
score = 80;

var score = 80; //  변수 선언과 값의 할당 동시에

• 위 두개의 코드는 정확하게 동일하다.
• 다만, 주의할 점은 변수 선언과 값의 할당 실행 시점이 다르다는 것!
• 변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행되지만 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.

4.6 값의 재할당

• 재할당이란 이미 값이 할당되어 있는 변수에 새로운 값을 또다시 할당하는 것을 말한다.
• 재할당은 볒수에 저장된 값을 다른 값으로 변경함, 그래서 변수라고 하는 것!
• 값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아니라 상수이다.
• ES6에서 도입한 const 키워드를 사용해 선언안 변수는 재할당이 금지됨. 즉 const 키워드는 단 한 번만 할당할 수 있는 변수를 선언한다.

언매니지드 언어와 매니지드 언어

• 언매니지드 언어 : 메모리 제어를 개발자가 주도, 개발자의 역량에 따라 최적의 성능을 확보할 수 있지만, 그 반대일 경우 오류 생산 가능성이 있다.
• 매니지드 언어 : 메모리의 할당 및 해제를 위한 메모리 관리 기능을 언어 차원에서 담당함. 개발자의 직접적인 메모리 제어를 허용하지 않는다. 개발자의 역량에 의존하는 부분이 상대적으로 작아져 생산성 확보의 장점이 있지만, 성능면에서 손실을 감수해야 한다.

4.7 식별자 네이밍 규칙

• 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어, 달러 기능을 포함할 수 없다.
• 식별자는 특수문자를 제외한 문자, 언더스코어, 달러 기호로 시작해야 한다. 숫자로 시작하는 것은 허옹 X
• 예약어를 식별자로 사용할 수 없음

네이밍 컨벤션

• 하나 이상의 영어 단위로 구성된 식별자를 만들 때 가독성 좋게 단어를 한눈에 구분하기 위해 규정한 명명 규칙
• 자바스크립트에서는 일반적으로 변수나 함수의 이름에는 카멜 케이스를 사용하고, 생성자 함수, 클래스의 이름에는 파스칼 케이스를 사용한다. 코드 전체의 가독성을 높이려면 카멜 케이스와 파스칼 케이스를 따르는 것이 유리하다!

🌳 느낀점

• 변수 호이스팅 기억하기.
• JS 에서는 카멜케이스와, 파스칼 케이스 활용하기

---

위 글은 위키북스의 모던 자바스크립트 Deep Dive 를 읽고 정리한 내용입니다.