[Javascript] 변수 선언과 데이터 할당

변수 선언과 데이터 할당

var a; // 변수 선언

a = "namju"; // 변수 a에 데이터 할당

var b = "namjuyun"; // 변수 선언과 할당을 한 문장으로 씀 (일어나는 일은 동일)

1) 변수 선언

var a; // 변수 선언

➡️ 변할 수 있는 데이터를 만든다, 이 데이터의 식별자는 a로 한다
= 변경 가능한 데이터가 담길 수 있는 공간, 그릇을 만드는 것

실제 메모리 영역에서 일어나는 일
- 메모리에 비어있는 공간 하나를 확보
- 그 공간의 이름(식별자)을 a라고 지정

2) 데이터 할당

a = "abc"; // 데이터 할당

실제 메모리 영역에서 일어나는 일
- 데이터를 저장하기 위한 별도의 메모리 공간을 다시 확보
- 문자열 'abc'를 저장
- → 그 주소를 변수 영역에 저장함

변수영역에 직접 데이터를 할당하지 않는 이유
→ 데이터 변환을 자유롭게 할 수 있게 하며, 메모리를 더욱 효율적으로 관리하기 위해

ex) 변수영역에서 데이터 변환이 일어난다면 해당 공간의 크기를 늘리는 작업이 필요
이 작업이 앞뒤로 다른 데이터들이 있는 상황에서 일어난다면?
→ 뒤의 데이터들을 모두 옮기고 다시 식별자에 연결하는 작업이 필요해짐

3) 데이터 재할당

a = a + "def"; // 'abcdef'로 재할당

실제 메모리 영역에서 일어나는 일
- 새로운 데이터를 저장하기 위한 다른 메모리 공간 확보
- 그곳에 데이터 'abcdef' 저장
- 새로운 메모리 주소를 a 변수와 연결 (기존의 데이터는 가비지 컬렉터의 대상이 됨)

다수의 변수들이 같은 값을 가지고 있을 때엔?
a, b, c, d, e, f 변수들 모두 5를 할당 했을 때엔
5가 있는 데이터 공간이 6개 만들어지는 것이 아닌,
한개만 만들어서 그 값을 6개의 변수 영역들이 참조한다.
➡️ 중복 데이터 처리 효율 높아짐!

---

기본형 데이터, 참조형 데이터의 차이

1) 불변값

변수, 상수(constant)
변수 영역의 메모리가 변경 가능한지?
= 변수에 할당한 데이터 식별자가 변경될 수 있는지?

불변성
데이터 영역의 메모리가 변경 가능한지?
이미 존재하는 데이터를 바꿀 수 있는지? 아니면 새로 데이터를 만드는지?

기본형 데이터 Number, String, Boolean, null, undefined, Symbol은 모두 불변값
절대 한 데이터 주소 내의 값을 바꾸지 않고, 그냥 새 데이터 주소에 새 값을 만들어서 재할당한다!

var a = "abc";
a = a + "def";

변수 a에 문자열 'abc'를 할당한 이후 뒤에 'def'를 추가
→ 기존의 'abc'가 바뀌는 것이 아닌, 새로운 문자열 'abcdef'를 생성하고 이를 변수 a에 저장함

var b = 5;
var c = 5;
b = 7;

변수 b에 할당할 숫자 5가 이미 메모리에 있는지 확인, 없으니까 새로 만들어서 할당
변수 c에 할당할 숫자 5가 이미 있으니까 그 주소를 할당
변수 b의 값을 7로 바꾸고 싶음 → 있던 5를 바꾸는 것이 아니라 7이 담긴 영역을 새로 만듦
➡️ 결론, b는 새로만든 7를 저장, c는 원래 있던 5를 저장하고 있다!

불변값의 성질 = 한번 만들어진 값은 가비지 컬렉팅 당하지 않는 한 영원히 변하지 않는다.

2) 가변값

참조형 데이터는 기본적 성질은 모두 가변값 (불변값으로 만들 수 있는 방법도 있음)

var obj1 = {
  a: 1,
  b: "bbb",
};

1. 빈 공간을 확보하여 그 주소의 이름을 'obj1'으로 정한다 @1002
2. 데이터를 저장하려 보니 여러 프로퍼티로 이루어진 데이터 그룹임 → 프로퍼티(key)들을 위한 별도의 변수 영역을 마련 @7103 ~ ?
3. 그 영역의 주소들을 한 데이터 영역에 저장 @5001
4. 프로퍼티 변수 영역에 key값들을 지정 → 'a', 'b' @7103, @7104
5. 데이터 영역에 빈공간 두개를 확보해 1, 'bbb'를 각각 저장 @5003, @5004
6. 이 데이터 주소값을 프로퍼티 변수 영역의 'a', 'b'에 할당

obj1.a = 2;

참조형 데이터가 가변적인 이유
기본적으로 데이터 영역에 저장된 값은 기본형과 똑같이 모두 불변값
하지만 객체의 프로퍼티 영역이 또 있는 구조이므로, 여기에는 다른 값들이 재할당될 수 있음
그러면 obj1가 참조하고 있는 주소값은(@5001)는 달라지지 않으면서 객체의 프로퍼티는 다른 값을 가지게 됨!
➡️ 가변성!!

이때 obj1의 값을 바꿔준다면?

obj1 = "string";

새로운 데이터 'string'을 만들어 'obj1'은 그 주소값을 다시 저장
➡️ 아무에게도 참조되지 않는 주소값이 생겨버림 (객체 프로퍼티의 변수 영역을 담고있는 데이터, 프로퍼티 영역의 변수들, 프로퍼티 변수들에 할당된 데이터값들)
➡️ 참조 카운트가 0이 된 메모리 주소는 순차적으로 가비지 컬렉터가 수거한다

변수 복사 비교

기본형

var a = 10;
var b = a;

1. 빈 공간에 변수 a를 지정
2. 숫자 10이 데이터에 있는지 확인하고 없으면 빈 공간에 저장
3. 해당 데이터를 변수 a에 저장
4. 복사 : 빈 공간에 변수 b를 지정하고 식별자 a를 검색해 값을 찾아와서 b에 저장
   ➡️ 지금은 a와 b가 같은 데이터를 참조하고 있음

a = 20;

1. 숫자 20이 데이터에 있는지 확인하고, 없으니까 빈 공간에 저장
2. 해당 데이터를 변수 a에 다시 할당
   ➡️ a와 b가 다른 데이터를 참조하고 있음! 이전의 10 주소값은 여전히 있고, b에 의해 참조되고 있음! 깔끔하게 복사완료!

참조형

var obj1 = { c: 10, d: "ddd" };
var obj2 = obj1;

1. 빈 공간에 변수 obj1를 지정
2. 데이터 그룹이니 프로퍼티들을 지정할 별도의 주소들 만듦
3. 이 주소들을 담고 있는 데이터 생성 → obj1에 할당
4. 프로퍼티 영역에 c, d 변수 지정
5. 데이터 영역에 10, 'ddd' 저장 → 각각 변수들에 할당
6. 복사 : 빈 공간에 변수 obj2를 지정하고 식별자 obj1가 참조하는 데이터를 저장
   ➡️ 지금은 obj1, obj2가 모두 같은 데이터를 참조하고 있음

obj1.c = 20;

console.log(obj1); // { c: 20, d: "ddd" }
console.log(obj2); // { c: 20, d: "ddd" }

1. 숫자 20이 데이터에 없으니 새로 만들고, 이를 프로퍼티 c에 저장함
2. 그러면 지금 obj1과 obj2가 참조하고 있는 값에는 전혀 변화가 없음 (가변성)
   ➡️ obj1, obj2는 같은 데이터를 아직도 참조하고 있고, obj1만 바꿨는데 obj2도 바뀌게 되어버림!

obj2 = { c: "hi", d: "everyone" };

console.log(obj1); // { c: 20, d: "ddd" }
console.log(obj2); // { c: "hi", d: "everyone" }

하지만 이렇게 새로운 객체를 할당해버리면, 아예 새로운 객체 영역이 생성되고, 새로운 참조값이 생김
➡️ 기본형 데이터와 같은 방식으로 재할당이 일어나게 됨!

'가변'은 참조형 데이터 자체를 변경할 경우가 아닌, 그 내부의 프로퍼티를 변경할 때만 성립