[JS] 변수

13 Oct 2020

변수란?

처리해야 하는 데이터를 담을 수 있는 공간
변수 명은 내가 원하는 것으로 정할 수 있다. 단, 의미있는 이름으로 하는게 좋다.
변수를 선언하는 동시에 메모리에 내가 선언한 변수를 위한 공간이 생긴다. 그 공간에 할당된 값이 저장된다.

let number = 2;
let num = '2';
let age = 10;

1. Primitive Type

담을 수 있는 가장 작은 단위의 데이터들을 말한다.
- number, string, boolean, null, undefined

let number = 2;
let number2 = number;

console.log(number) //2
console.log(number2) //2

위 코드에서 ‘number2’라는 변수에 ‘number’를 할당했다.
그러면 또 다른 공간에 ‘number2’를 위한 공간이 생기고, ‘number’에 할당되었던 값이 복사되어 ‘number2’에 할당이 된다.

let number2 = 3;

console.log(number) //2
console.log(number2) //3

‘number2’에 ‘3’으로 업데이트 하고, ‘number2’와 ‘number’를 출력해보면
‘number’는 ‘3’으로 업데이트가 되지 않고, 기존처럼 ‘2’가 출력된다.
그 이유는 ‘number’에 할당된 데이터 값이 복사되어 ‘number2’에 들어왔기 때문에 ‘number2’의 값을 바꾸었다 하더라도 ‘number’에는 전혀 영향을 주지 않는다.

2. Object Type

Object Type이란 최소한 한 두가지의 다양한 데이터를 한 곳에 묶어놓은 것을 말한다.
- 함수, 배열, 리스트 모두 Object이다.
Primitive Type을 제외한 모든 것들은 Object Type이라고 볼 수 있다.
Object는 적어도 한 두가지 이상의 큰 데이터가 들어있기 때문에 우리가 단순히 변수를 선언하는 곳에 다 담을수가 없다.

let obj = {
    name : 'shinninja',
    age : 10
};

object에는 ‘key’와 ‘value’로 구성되어 있다.
위의 변수 ‘obj’에는 ‘name’이라는 ‘key’에 ‘shinninja’라는 ‘value’가 들어있고,
‘age’라는 ‘key’에 숫자 ‘5’의 ‘value’가 들어있다.
object에 있는 key도 각각의 key마다 메모리가 할당 된다.
집집마다 주소가 있듯이, 이런 key들을 묶어서 위치를 나타내는 reference가 있다.
예를 들어 메모리가 ‘123’이라는 주소에 ‘obj’의 ‘key’들에 대한 정보가 들어있다고 생각하면 된다.
변수 ‘obj’에는 ‘123’이라는 주소가 들어있다.

let obj = {
    name : 'shinninja',
    age : 10
};
console.log(obj.name) //shinninja

obj.name하게 되면 ‘obj’의 ‘123’이 가리키는 곳에 ‘name’의 값을 찾는다는걸로 이해할 수 있다.

let obj = {
    name : 'shinninja',
    age : 10
};

let obj2 = obj;
console.log(obj2.name) //shinninja

obj에 아까 number2에 number를 할당 했던 것처럼 obj2라는 변수를 만들고 obj를 할당해 보자.
obj2라는 변수에 새로운 메모리공간이 생기고, obj를 할당할건데, obj에는 무언가를 가리키고 있는 주소가 들어있다.
변수를 할당할때는 무조건 그 변수에 할당되어져 있는 값이 복사되어서 들어온다. 그러므로 obj가 가지고 있는 주소인 123이 복사되어 obj2에 할당되어진다.

let obj = {
    name : 'shinninja',
    age : 10
};

let obj2 = obj;

obj.name = 'James';
console.log(obj.name) //James
console.log(obj2.name) //James

이제 obj의 name을 james로 변경하고, obj.name과 obj2.name을 출력해 보면 모두 james로 바뀌는것을 확인 할 수 있다.
그 이유는 obj나 obj2나 결국은 가리키고 있는 Object가 동일하기 때문에 어떤곳을 통해서 업데이트해도 모두 변경되는것이다.

[정리]
변수를 선언하면 데이터를 담을 수 있는 공간이 할당이 되고, 그 변수는 할당된 공간을 가리키고 있다.
Primitive Type은 데이터가 작은 단위이기 때문에 메모리에 데이터가 바로 저장되지만,
Object Type은 큰 단위이기 때문에 Object가 따로 할당이 어딘가에 할당이 되어있고, 그것을 가리키고 있는 주소가 있는데 그것을 reference라고 하며, 그 주소가 변수에 저장이 된다.

변수를 또다른 변수에 할당하거나 전달할때 변수안에 들어있는 값이 복사되어 들어가게 되는데,
Primitive Type은 값 자체가 들어있으니까 값 자체가 복사되어서 전달되고,
Object Type은 reference가 복사되어서 전달된다. 그래서 object를 통해서 무엇인가 변경하면 object가 가리키고 있는 데이터가 업데이트 된다.

3. let VS const

let : 선언하고 나서 나중에 값을 또 바꿀 수 있다.

let a = 2;
a = 5;
a = 9;

const : 상수 변수라고 하는 이것은 한 번 선언하고 나면 값을 변경할 수 없다.

const obj = {
    name : 'shinninja',
    age : 10;
};

obj = {
    name : 'James',
    age : 7;
} // error 발생

obj.name = 'James';

obj를 상수 변수로 만들면 obj에는 어딘가에 있는 object의 데이터들을 가리키고 있는 reference가 저장이 되어있는데, obj를 다른 object로 변경하는것은 안 된다.
하지만, 자체의 reference를 변경하는 것 말고, key에 직접 접근을해서 변경하는것은 가능하다.
왜냐, 자체의 reference은 잠겨있기 때문에 변경이 불가능하지만, reference가 가리키고 있는 object의 안에 내용들은 잠겨있지 않기 때문에 변경이 가능하다.

출처 : 엘리 youtube