[JavaScript] 1. 변수

📖 모던 자바스크립트 교재) 4장. 변수

 

01. 변수란?

하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름

 

🖥️ 예제 코드

var result = 10 + 20;

• 변수 이름(변수명) : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름 (위의 예제에서, result)
• 변수 값 : 변수에 저장된 값 (위의 예제에서, 30)
• 할당(대입, 저장) : 변수에 값을 저장하는 것
• 참조 : 변수에 저장된 값을 읽어 들이는 것

---

02. 식별자

어떤 값을 구별해서 식별할 수 있는 고유한 이름 또는 변수 이름

 

값은 메모리 공간에 저장되어 있으므로, 식별자는 값이 아니라 메모리 주소를 기억하고 있다.

즉, 식별자는 메모리 주소에 붙인 이름이라고 할 수 있다.

 

---

03. 변수 선언

변수를 사용하려면 반드시 선언이 필요하다.

변수를 선언할 때는 var, let, const 키워드를 사용한다.

 

let, const 키워드가 도입되기 전에는 자바스크립트에서 변수를 선언할 수 있는 키워드는 var 키워드가 유일했다.

그러므로 먼저 var 키워드를 사용하여 변수를 선언하는 방법을 살펴보도록 하자.

 

💡 키워드

키워드는 자바스크립트 코드를 해석하고 실행하는 자바스크립트 엔진이 수행할 동작을 규정한 일종의 명령어다.
자바스크립트 엔진은 키워드를 만나면 자신이 수행해야 할 약속된 동작을 수행한다.

 

🖥️ 예제 코드

var score;

var 키워드는 뒤에 오는 변수 이름으로 새로운 변수를 선언할 것을 지시하는 키워드다.

 

💡 자바스크립트의 독특한 특징

변수를 선언한 이후, 변수에 값을 할당하지 않았지만 메모리 공간이 비어있는 것은 아니다.
확보된 메모리 공간에는 자바스크립트 엔진에 의해 undefined라는 값이 할당되어 초기화된다.

 

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

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

 

💡 ReferenceError(참고 에러)

• 식별자를 통해 값을 참조하려 했지만, 자바스크립트 엔진이 등록된 식별자를 찾을 수 없을 때 발생하는 에러

---

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

🖥️ 예제 코드

console.log(score); // undefined

var score; // 변수 선언문

 

만약 코드가 순차적으로 실행되는 런타임에 변수 선언이 실행된다면

console.log(score);가 실행되는 시점에는 아직 변수가 선언되기 이전이므로 참조 에러(ReferenceError)가 발생해야 한다.

하지만 undefined가 출력된다.

 

이는 자바스크립트의 특징인 변수 호이스팅 때문이다.

 

💡 변수 호이스팅(variable hoisting)

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

 

자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서 먼저 소스코드의 평가 과정을 거치면서 소스코드를 실행하기 위한 준비를 한다.

1. 소스코드의 평가 과정 -> 모든 선언문을 소스코드에서 찾아내 먼저 실행
2. 모든 선언문 제외하고 소스코드를 한 줄씩 순차적으로 진행

---

05. 값의 할당

할당(대입, 저장) 연산자 = 사용

 

🖥️ 예제 코드

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

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

 

💡 변수 호이스팅에 따른 주의점

• 변수 선언 : 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행
• 값의 할당 : 소스코드가 순차적으로 실행되는 시점인 런타임에 실행

---

06. 값의 재할당

🖥️ 예제 코드

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

var 키워드로 선언한 변수는 값을 재할당할 수 있다.

 

💡 const 키워드

const 키워드를 사용해 선언한 변수는 재할당 금지
따라서 const 키워드를 사용하면 상수를 표현할 수 있다.

---

07. 식별자 네이밍 규칙

💡 식별자의 네이밍 규칙

• 식별자는 특수문자를 제외한 문자, 숫자. 언더스코어(_), 달러 기호($)를 포함할 수 있다.
• 단, 식별자는 특수문자를 제외한 문자, 언더스코어(_), 달러 기호($)로 시작해야 한다. 숫자로 시작하는 것은 금지.
• 예약어는 식별자로 사용할 수 없다.

 

💡 네이밍 컨벤션(naming convention)

// 카멜 케이스(camelCase)
var firstName;

// 스네이크 케이스(snake_case)
var first_name;

// 파스칼 케이스(PascalCase)
var FirstName;

 

💡 일반적 사용

• 변수나 함수의 이름 : 카멜 케이스
• 생성자 함수, 클래스의 이름 : 파스칼 케이스
• ECMAScript 사용에 정의되어 있는 객체와 함수들 : 카멜 케이스, 파스칼 케이스

 

📖 참고자료

https://www.inflearn.com/course/%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%94%A5%EB%8B%A4%EC%9D%B4%EB%B8%8C/dashboard

[무료] 모던 자바스크립트 딥다이브 스터디 - 인프런 | 강의