📖 modern javascript Deep Dive 4장

---

 

변수

프로그래밍 언어에서 데이터를 관리하기 위한 기본 핵심 개념

 

왜 필요한가? 

컴퓨터 = 연산(cpu) + 기억(memory)

 

✅ 메모리(memory)

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

: 2진수 형태로 저장됨

 

✅ cell

: 단위 ) 1바이트(8bit)

: 각 cell은 고유의 메모리 주소를 가짐

메모리 주소 : 메모리 공간의 위치

 

예제 > 10 + 20

각 10과 20은 메모리 상 임의의 위치에 기억되고 cpu는 이 값을 읽어 들여 연산을 수행

결과값 30 또한 메모리 상 임의의 위치에 저장된다.

그러나 이 결과값(30)은 재사용이 불가하다

재사용을 원한다면 직접 메모리 주소를 통해 저장된 메모리 공간에 직접 접근하는 것 외에 방법밖에 없다

 

이를 위해 변수의 정의를 내려보면 다음과 같다.

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

따라서, 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없어져 변수를 통해 안전하게 값에 접근이 가능하다.

부가적으로 변수 이름은 변수에 저장된 값의 의미를 파악하기 쉽게 잘 짓는 연습을 하는 것이 필요하다!

 

 

식별자 란?

식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름으로 값(30)이 아닌 메모리 주소를 기억하고 있다.

var result = 10 + 20;
// 30

메모리 -> 30
변수 이름(식별자) -> 메모리 주소 (0x0669F913)

 

변수 선언

변수를 생성하는 것으로 변수를 사용하기 위해선 반드시 선언이 필요하다.

변수를 선언하기 위해서 다음과 같은 키워드를 사용한다.

 

• var
• let
• const

ES6 에서 let과 const 키워드를 도입하였는데 var 키워드의 여러 단점을 보완하기 위함이다.

var score;  // 선언과 초기화 단계를 동시에 진행

1. 선언 단계 : 변수 이름을 등록하여 자바스크립트 엔진에 변수 존재를 알림

2. 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당하여 초기화함

 

 

 

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

console.log(score);  // undefined
var score;

다음과 같은 예시에서 변수 선언문보다 변수를 참조하는 코드가 더 앞에 있는 걸 볼 수 있다.

console.log(score);가 실행되는 시점에는 아직 score 변수가 선언되지 않아 참조 에러(ReferenceError)가 발생할 것 같지만 에러가 발생하지 않고 undefined가 출력된다.

변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문에 참조 에러는 발생하지 않는다.

자바스크립트 엔진은 소스코드를 한 줄 씩 순차적으로 실행하기 전, 먼저 소스코드의 평가과정을 거치면서 소스코드를 실행하기 위한 준비를 먼저 한다. 따라서 변수 선언이 소스코드의 어디에 위치하는지 상관없이 어디서든 변수를 참조할 수 있다.

 

이처럼 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라 한다.

 

 

 

값의 할당

변수에 값을 할당(대입, 저장)할 때는 할당 연산자(=)를 사용한다.

var score; // 변수 선언
score = 80; // 값의 할당

or

var score = 80;

⚠️ 변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행되지만 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.

 

console.log(score); //undefined

var score;  // 1️⃣ 변수 선언
score=80;  // 2️⃣ 값의 할당

console.log(score); // 80

1️⃣ 변수 선언은 런타임 이전에 먼저 실행됨

2️⃣ 값의 할당은 런타임에 실행

따라서, 2️⃣ 시점에서는 이미 변수 선언이 완료된 상태이며, 이미 undefined로 초기화되어 있다.

score 변수에 값을 할당하면 score 변수의 값은 undefined에서 새롭게 할당한 숫자 80으로 변경된다. (재할당)

 

 

 

값의 재할당

이미 값이 할당되어 있는 변수에 새로운 값을 또다시 할당하는 것이다.

var score = 80;
score = 90;

var 키워드로 선언한 변수는 선언과 동시에 undefined로 초기화되기 때문에 엄밀히 말하면 변수에 처음으로 값을 할당하는 것도 사실은 재할당이라고 할 수 있다. (위의 설명 참조)

 

변수는 저장된 값을 다른 값으로 변경 가능하다.

만약 값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아니라 상수(constant)라고 한다.

 

 

식별자 네이밍 규칙

식별자는 다음과 같은 네이밍 규칙을 따라야 한다.

특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러기호($) 포함이 가능하다.
단, 문자, 언더스코어(_), 달러기호($)로 시작해야 하며 숫자는 허용하지 않는다.
예약어는 식별자로 사용할 수 없다.
* 예약어 : 프로그래밍 언어에서 사용 중이거나 사용될 예정인 단어

var firstName;   // 카멜 케이스

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

var FirstName;   // 파스칼 케이스

var strFirstName;  // 헝가리언 케이스  (type + identifier)

자바스크립트에서는 일반적으로 변수나 함수의 이름에는 카멜 케이스를 사용하고,

생성자 함수, 클래스의 이름에는 파스칼 케이스를 사용한다.