[자바스크립트 딥다이브] 4장 변수

# 변수란 무엇인가? 왜 필요한가?

변수란 데이터 를 관리하기 위한 핵심 개념으로 연산된 결과 를 재사용 하기 위한 방법이다.
데이터 는 피연산자 와 연사자의 결과 를 의미한다.

10 + 20

 

위의 과정은 피연산자 10 과 20, 연산자 + 를 연산하는 과정이다.
피연산자 는 각각 임의의 메모리 주소 에 저장되며, 이 값을 읽어 연산된 결과 또한 임의의 메모리 주소 에 저장되게 된다.
이러한 연산된 결과를 재사용 하기 위해서는 해당 메모리 주소 로 접근 해야한다.

 

TIP.

자바스크립트 에서는 치명적 오류를 야기할 수 있는 메모리 직접 접근 은 허용하지 않으며 , 메모리 주소 는 임의 로 결정된다.
따라서, 코드가 실행되기 전 에는 연산된 결과의 메모리 주소 를 알 수 없다.

변수 란 값을 저장하기 위한 메모리 공간 을 의미한다.

변수 는 메모리 공간 자체 를 의미하고, 식별자 는 해당 메모리 공간을 가리키는 이름 을 의미한다.
식별자 를 명명할 때는 해당 값이 무엇인지 이해되기 쉽도록 작성 하는 것이 좋다.

 

예제.

const result = 10 + 20;

 

10 + 20 의 연산을 통해 새로운 값 30 이 생성되었다.
변수값이 저장된 메모리 공간 이 생성되었으며, 이 메모리 공간을 가리키는 식별자 의 이름은 result이다.

 

# 식별자

식별자는 변수의 고유한 이름 을 의미이며, 변수로 선언된 메모리 공간을 정확하게 식별할 수 있도록 하는 메모리 주소이다.

식별자라는 용어는 변수 이름 뿐 아니라, 변수, 함수, 클래스 등의 이름 등에 모두 사용된다.
즉, 메모리 상에 존재하는 어떤 값을 식별 할 수 있는 이름을 모두 식별자 라고 한다.

식별자는 선언 에 의해 자바스크립트 엔진 에 식별자의 존재를 알린다.

 

# 변수 선언

변수를 생성 하는 것을 의미한다.

값을 저장하기 위한 메모리 공간 을 확보 하고, 변수 이름(식별자)과 해당 메모리 공간의 주소 를 연결 하여 값을 저장할 수 있게 준비한다.
변수 선언에 의해 확보된 메모리 공간은 해제 되기 전까지 보호 되어 안전하게 사용할 수 있다.

변수를 사용하기 위해서는 반드시 변수 선언 이 필요하다.
변수 선언 키워드는 var, let, const 를 사용하며, ES6 이후로는 var 키워드 사용은 지양된다.

 

Why?

var 키워드는 함수 레벨 스코프 를 지원하여 전역 변수가 되어 사이드 이펙트가 발생하는 경우가 있다.

 

1. 변수의 선언과 초기화

자바스크립트 엔진은 변수 선언 을 선언 과 초기화 단계를 거쳐 수행한다.

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

 

2. 변수 이름은 어디에 등록되는가?

변수 이름을 포함한 모든 식별자 는 키와 값 형식인 객체 로 실행 컨텍스트 에 등록 되어 관리된다.
변수 선언을 하지 않은 식별자 에 접근 할 경우 참조에러 ReferenceError 가 발생한다.

 

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

console.log(score) // undefined

var score

 

위의 코드에서는 변수 선언보다 먼저 식별자를 참조한 코드가 있지만 ReferenceError 가 발생하지 않는다.
그 이유는 변수 선언은 소스코드가 순차적으로 실행되는 런타임 시점이 아닌, 그 이전 단계에 먼저 실행되기 때문이다.

자바스크립트 엔진은 런타임 이전에 소스 코드 를 평가를 진행한다.
이때, 변수 선언을 포함한 모든 선언문(변수 선언문, 함수 선언문 등)을 소스코드에서 찾아 먼저 실행한다.

평가 이후 선언문을 제외한 코드를 런타임 과정에서 동작한다.

즉, 자바스크립트 엔진은 소스 코드 내 변수 선언 위치와 관계없이 다른 코드보다 먼저 실행하고, 어디에서든 참조할 수 있다.

이러한 특징을 호이스팅이라 한다

 

TIP.

변수 선언 뿐만 아니라, var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅이 된다.
모든 선언문은 런타임 이전 소스코드 평가 단계에서 먼저 실행되기 떄문이다.

 

# 값의 할당

할당 연산자 = 를 활용하여 값을 할당할 수 있다.

할당 연산자 =는 우변의 값을 좌변의 변수에 할당한다.

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

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

 

위의 두 코드는 동일하게 동작한다.
자바스크립트 엔진은 변수 선언 과 값의 할당 을 하나의 문으로 단축 표현 해도 변수 선언과 값의 할당을 2개의 문으로 나누어 각각 실행 한다.

 

주의사항

변수 선언과 할당의 실행 시점이 다르다.
변수 선언은 소스코드 평가 단계에서 먼저 실행되지만, 값의 할당은 런타임 단계에서 실행되기 때문이다.

 

# 값의 재할당

존재하고 있는 변수 에 새로운 값 을 할당하는 것을 의미한다.

변수의 초기화 과정은 엄밀히 말하면 값의 재할당하는 것이다.
값을 재할당을 할때 기존의 메모리 공간을 지우고 새로운 값을 할당하는 것이 아니라, 새로운 메모리 공간을 확보해서 그 곳에 값을 저장한다.
값을 재할당 할 수 있기 때문에 변수라는 표현을 하며, 변수에 있는 값을 재할당을 할 수 없는 경우에는 상수라고 표현한다.
즉, 다시 말해 상수는 단 한번만 할당할 수 있는 변수이다.

1. const 키워드

ES6 에서 도입된 const 키워드를 사용해 선언한 변수는 재할당이 금지된다.
즉, 단 한번만 할당할 수 있는 상수를 표현하는데 사용하는 키워드이다.

let score = 30; // 값의 할당
score = 40; // 값의 재할당

 

변수 score는 값 30이 저장된 메모리 공간을 가리키고 있었으나, 재할당을 통해 40의 메모리 공간을 가르키게 되었다.
기존에 사용되었던 30의 메모리 공간은 아무도 사용하지 않게되었고, 이런 불필요한 값은 가비지 컬렉터에 의해 자동으로 메모리에서 해제된다.
단, 메모리에서 언제 해제될 지는 예측할 수 없다.

 

 + 가비지 콜렉터

애플리케이션이 할당한 메모리 공간을 주기적으로 검사 하여 더 이상 사용되지 않는 메모리를 해제 하는 기능이다.
더 이상 사용되지 않는 메모리란, 어떤 식별자도 참조하지 않는 메모리 공간 을 의미한다.

 

# 식별자 네이밍 규칙

식별자는 변수로 선언된 메모리 공간을 가리키는 고유한 이름이다.
식별자 네이밍 규칙을 통해 어떤 값을 의미하는지 이해하기 쉽도록 이름을 부여해야한다.

• 식별자는 특수문자를 제외한 문자, 숫자, 언더바(_), 달러($)를 포함할 수 있다.
• 단, 숫자로 시작하는 것은 허용되지 않는다.
• 예약어는 식별자로 사용할 수 없다.
• 예제 : score_01, _score_$
• 그외의 경우 : 0_score -> 유효하지 않은 토큰이라는 에러가 발생

1. 예약어

프로그래밍 언어에서 사용되고 있거나, 사용될 예정인 단어를 의미한다.
await, break, case, catch, class, const 등등..

 

2. 식별자는 대소문자를 구분한다.

ES5 부터 유니코드 문자를 허용하여 알파벳 외의 문자도 식별자로 사용할 수 있으나 권장하지 않는다.

let firstname;
let firstName;
let FirstName;

 

위의 코드는 모두 다른 식별자 이다.

 

3. 이해하기 쉽도록 이름을 부여한다.

좋은 변수 이름은 코드의 가독성을 높인다.

let x = 3; // Bad. x 변수가 의미하는 바를 알 수 없다.
let score = 100 // Good. score 변수는 점수를 의미한다.

4. 네이밍 컨벤션

가독성을 높이기 위해 정해진 네이밍 명명 규칙이다.

• 카멜케이스
  소문자로 시작해서 단어의 첫글자마다 대문자로 표기하는 방법
  일반적으로 변수나 함수의 이름에는 카멜케이스를 사용한다.
  let firstName;
• 파스칼 케이스
  모든 첫글자를 대문자로 표기하는 방법
  일반적으로 생성자 함수, 클래스의 이름에 사용한다.
  let FirstName;
• 스네이크 케이스
  소문자로 표기하며 단어마다 언더바로 구분지어 표기하는 방법
  let first_name
• 헝가리언 케이스
  자료형 구조를 앞에 붙여 표기하는 방법. 최근에는 사용하지 않는 추세이다.
  let strFirstName;