04. 변수 - 모던자바스크립트 DeepDive

1. 변수란?

• 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름.
• 즉, 값의 위치를 가리키는 상징적인 이름이다.

2. 식별자

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

1. 값은 메모리 공간에 저장되어 있다.
2. 메모리 공간에 저장되어 있는 어떤 값을 구별해서 식별해낼 수 있어야 한다.
3. 이를 위해 식별자는 어떤 값이 저장되어 있는 메모리 주소를 기억해야 한다.

= 이처럼 식별자는 값이 아니라 메모리 주소를 기억하고 있다.

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

3. 변수 선언

• 변수를 사용하려면 반드시 선언이 필요하다. 선언에는 var, let, const 키워드를 사용

💡 var는 여러 단점때문에 잘 사용하지 않는다.

ex) 함수레벨스코프 지원으로 인해 의도치않은 전역변수 선언.

3.1 undefinded

자바스크립트에서 제공하는 원시 타입의 값이다. 아래는 예시

var score;

• 위 변수 선언문은 다음과 같이 변수 이름을 등록하고 값을 저장할 메모리 공간을 활용한다.
• 자바스크립트 엔진에 의해 undefined라는 값이 암묵적으로 할당되어 초기화된다.

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

console.log(score);

var score;

js코드는 인터프리터에 의해 한 줄씩 순차적으로 실행된다.

하지만 참조 에러가 발생하지 않는다.

그 이유는 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문. 이것이 바로 변수 호이스팅이라고 한다.

4.1 변수 호이스팅

++ 스터디원분께서 면접 때 호이스팅 관련 이야기를 해주시면서 추가적으로 설명해주셨다.

흔히들 하는 착각

var 만 호이스팅되고 let/const는 호이스팅 되지 않는다. → 틀린 말

호이스팅

변수 선언문이 코드의 위로 끌어 올려진 것처럼 동작하는 것

var, let, const, function, class, function* 모든 식별자가 호이스팅된다. (선언문은 런타임 이전에 실행되기 때문)

식별자: 상수/변수/함수의 이름

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

아래는 call by value, call by reference관련하여 참고한 블로그이다.

(자알쓰) call by value vs call by reference

• javascript는 기본적으로 항상 call by value

• parameter vs arguments

• Parameter(매개변수)는 함수 선언부에 정의

• Arguments(인자)는 함수 호출부에 사용

var a = 1;
var func = function(b) {
// code..
};

func(a);

4.2 call by value

1. argument로 값이 넘어온다.
2. 값이 넘어올 때 복사된 값이 넘어온다.
3. caller가 인자를 복사해서 넘겨줬기 때문에 호출당한 callee에서 아무리 바꿔도 영향을 받지 않는다.

var a = 1;
var func = function(b) { // callee
  b = b + 1;
}
func(a); // caller
console.log(a); // 1

4.2 call by reference

1. arguments로 reference를 넘겨준다.
2. reference를 넘기다 보니 해당 reference가 가리키는 값을 복사하지는 않는다.
3. caller가 인자를 복사해서 넘기지 않았으므로 callee를 바꾸면 영향을 받는다.

var a = {};
var func = function(b) { // callee
  b.a = 1;
}
func(a); // caller
console.log(a.a); // 1

4.3 call by sharing

참조 타입을 넘겼지만 값이 변하지 않았다. js에서는 call by value로 작동하기 때문이다.

var a = {};
var func = function(b) { // callee
  b = 1;
}
func(a); // caller
console.log(a); // {}

5. 값의 할당

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

console.log(score); // undefined

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

console.log(score); // 80

6. 값의 재할당

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

var score = 80;
score = 90;

재할당은 변수에 저장된 값을 다른 값으로 변경한다. 그래서 변수라고 하는 것.

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

변수에 값을 재할당하면 score 변수의 값은 이전 값 80에서 재할당한 90으로 변경된다.

그 위에 덮어씌우는 것이 아니라 새로운 메모리 공간을 확보하고 그 공간에 저장한다.

• 가비지 콜렉터란? 애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더 이상 사용되지 않는 메모리를 해제하는 기능.

7. 식별자 네이밍 규칙

-식별자는 특수문자를 제외한 문자, 숫자, 언더 스코어(_),달러기호($)를 포함할 수 있다.

-단 식별자는 특수문자를 제외한 문자, 언더스코어,달러기호로 시작해야한다. 숫자로 시작하는 것은 허용되지 않는다.

-예약어는 식별자로 사용할 수 없다.