4. 변수

• 변수가 존재하지 않을 시,
  • 값은 메모리 주소에 저장된다.
  • 메모리 주소를 통해 값에 직접 전근하려는 시도는 올바른 방법이 아니다.
• 변수
  • 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름
  • 값의 위치를 가리키는 상징적인 이름

 

1. 식별자

• 변수 이름을 식별자라고 한다.
• 식별자는 값이 아니라 메모리 주소를 기억하고 있다.
• 변수, 함수, 클래스 등의 이름은 모두 식별자이다.
• 위의 이름과 같은 식별자는 네이밍 규칙을 준수해야한다.
• 선언에 의해 JS에 식별자의 존재를 알린다.

 

2. 변수 선언

 

• 변수 선언
  • 변수를 생성하는 것
  • var, let, const 키워드 사용

 

• JS engine에서 변수 선언 2 step
  1. 선언 단계: JS에 변수의 존재를 알림
  2. 초기화 단계 : undefined 할당해 초기화
     이전 app에서 사용한 값이 메모리에 남아 있을 수 있으므로 초기화단계를 꼭 거친다.

 

• 변수 이름의 등록 위치
  • 변수를 비롯한 모든 식별자는 실행 컨텍스트에 등록
  • 실행 컨텍스트
    • JS engine이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역
    • 변수 이름, 변수 값은 실행 컨텍스트 내에 key/value 라는 객체 형식으로 등록되어 관리

 

• 선언하지 않은 식별자에 접근할 시, error : ReferenceError(참조 에러) 발생

 

 

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

 

• 변수 선언의 실행 시점
  • JS engine은 소스코드 실행하기 앞서 먼저 소스코드의 평과 과정을 거치면서 소스코드 실행하기 위한 준비
  • 2단계
    1. 준비 단계인 소스코드 평과 과정에서 JS engine은 변수 선언을 포함한 모든 선언문(변수 선언문, 함수 선언문 등) 소스코드에서 찾아내 먼저 실행한다.
    2. 실행 단계에서 변수 선언을 포함한 모든 선언문을 제외하고 소스코드를 한 줄씩 순차적으로 수행
       
       
• 변수 호이스팅
  • 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 JS의 고유의 특징
  • 변수 선언, var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅된다.

 

4. 값의 할당

 

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

 

• 주의점 : 변수 선언과 값의 할당의 실행 시점이 다르다
  • 변수 선언: 준비 단계에서 먼저 실행
  • 초기화(=값의 할당) : 준비 단계가 끝난 후 , runtime 때 실행

 

• 메모리상 주의점
  • 변수 선언: 메모리 주소 0x100 에 score 가 선언 되고 default로 undefined 가 값으로 할당
  • 초기화 : 0x100 공간에 값이 덮어써지는 것이 아니라 0x200이란 다른 메모리 주소에 score 변수와 연결되고 그 공간에 초기화 값이 할당 된다.
  • 값의 재할당 : score =100;으로 재할당시, 0x300이란 다른 메모리 주소에 score 변수와 해당 메모리 주소가 연결된다.
    
    
  • 식별자인 변수와 이제 관계가 없어진 0x100 주소는 gc에 의해서 청소된다.

 

• 예제

// 1. 경우 : hoisting
console.(score); // undefined
score = 80;
var score; // 또 다시 score
console.log(score) // 80

// 2. 3. 경우는 아주 안좋은 방법

// 2. 경우 : hoisting 안됨
console.(score); // reference error
score = 80;

// 3. 경우 : hoisting은 안되지만 코드 실행 위치에서 score 선언이 안된 상태서 초기화 할 경우, 전역변수로 설정해준다.
score = 80;
console.(score); // 80

 

5. 식별자 네이밍 규칙

• 특수문자를 제외한 문자, 숫자, _ , $ 포함 가능
• 단 숫자로 식별자가 시작되지는 못한다.
• 예약어는 식별자로 사용 불가하다.

 

• 네이밍 컨벤션
  • 카멜 케이스 : var firstName
  • 스네이크 케이스 : var first_name
  • 파스칼 케이스 : var FirstName

 

• js 네이밍 컨벤션 권장 규칙
  • 일반적 변수, 함수 이름 : 카멜 케이스
  • 생성자 함수, 클래스 이름 : 파스칼 케이스