2023-05-17 TIL

• Java Script

1. Data Type

원시 ( Primitive ) 타입

❗️ 단일 데이터를 담고있음 1. number  2. string 3. boolean 4. null 5. undefined 6. Symbol

객체 ( Object ) 타입

❗️ 복합 데이터를 담고있음 1. Object     -> array 외에 여러 데이터를 담을수 있는 자료구조 2. function

👉 두 타입의 차이점

 

먼저 메모리 구조는 크게 4단계로 나누어 볼수 있다.

 

Code

Data

Stack

Heap

Code : app을 실행하기 위한 코드를 저장

Data : app에 관련된 변수들을 저장

Stack : app을 구동하기위한 순서들을 저장

Heap : 다양한 객체 데이터들을 유동적으로 저장할수 있는 공간

 

✨ 원시타입 할당 -> Data , Stack

✨ 객체타입 할당 -> Heap

 

예를 들어보자

 

let lemon = 'fruit'

 

이 변수는 원시타입에 해당하기에 Data에 저장이 될것이다. 하지만 단순 String이 아니라 객체라면?

 

let lemon = {

        name: 'lemon',

        color: 'yellow',

        type: 'fruit',

        display: '🍋'

}

이 데이터는 객체 타입이기 때문에 Heap 영역에 저장되게 된다. 그럼 Data 영역에선 어떻게 값을 불러오게 되는걸까를 잘 알아야 한다.

사실 변수라는것은 하나의 표지판 이라고 생각하면 편하다. '난 여기를 가리키고 있어요' 를 하는것이다.

 

원시타입일 경우, Data 영역의 메모리 셀 '0x000123' 에 데이터 값을저장을 했다면

객체타입일 경우엔 Data 영역의 메모리셀에 가보았더니 Heap 영역의 메모리 주소값 '0X00000B' 를 가르키고 있는것.

 

👉 최종적으로 '0X00000B' 의 영역에 가지고 있는 복합 데이터들을 불러오게 되는것이다.

 

그래서 console.log( lemon['color'] )  혹은  console.log( lemon.color ) 을 호출하게 되면, 참조값을 타고 가서 해당 된 데이터중

color의 값을 가져오게 되는것.

 

- 정리 -

 

변수를 생성하면 그 변수는 각 메모리셀에 저장을 하게 되고, 원시타입은 해당 메모리셀에 값을 바로 저장하고 객체타입은 해당 메모리셀에 Heap 메모리 주소값을 저장하게 되어 호출시, 해당 Heap영역을 찾아가게 된다.

 

 

❗️❗️❗️ 값과 참조의 이해 ❗️❗️❗️

let a = 1;
let b = a;

console.log(a); // a = 1
console.log(b); // b = 1

a = 2;

console.log(a); // quiz 1
console.log(b); // quiz 1

Quiz. 1

a 와 b 는 원시타입 number 를 값으로 가진 변수이다. 먼저 a 에 1 을 할당해주었고, b 에 a 를 넣어주면 b 도 1을 가지게 된다.

그럼 중간에 a에 2의 값을 넣어주면 b도 a의 값을 가지고 있으니까 2의 값을 가지는게 맞을까?

 

답은 ' No '

 

a 와 b 는 엄연히 다른 메모리 셀에 각각 저장되어진 값이다. 고로 a의 값이 변한다 해서 b의 값이 영향을 받지 않는것.

 

let lemon = {
	name: 'lemon',
    color: 'yellow',
    display: '🍋'
    }

let another_lemon = lemon;

lemon.price = 1000;

console.log(lemon);
// { name: 'lemon', color: 'yellow', display: '🍋', price: 1000}

// Quiz 2

console.log(another_lemon)
// another_lemon의 값은?

 

 

객체타입은 Heap영역의 메모리 주소값을 값으로 가진다고 했다는 점을 주목하자.

 

another_lemon 에 lemon의 값을 넣어주었고, 같은 값을 가지게 되었으나 둘은 명칭이 다른 변수니까 lemon에 price를 추가해줘도 변동이 없을까?

 

답은 ' No '

 

위 포인트를 집자면, Heap의 메모리 주소값을 값으로 가지기에 결국 두 변수는 같은 주소지를 가리키고 있는것이다 다름없다. 고로 어느 변수건 값을 변하게 하면 이 메모리 주소값이 할당된 변수들은 다 영향을 받게 되는것이다.

 

another_lemon = { name: 'lemon', color: 'yellow', display: '🍋', price: 1000 }

 

이 나오게 되는것.

---

2. 변수에 대하여

 

• let
• const

둘의 차이점은 딱 하나이다. '값을 부여해준후 다시 재 할당이 가능한가' 이다.

예시를 통해 알아보자

 

let num_1 = 10;

const num_2 = 20;

console.log(num_1) // 10

console.log(num_2) // 20

num_1 = 30;

num_2 = 40; // 여기서 오류발생
        // Uncaught TypeError: Assignment to constant variable.

 

const로 할당한 num_2 같은 경우 값을 재할당 해줄수 없기때문에 오류메세지가 나오는걸 알수가있다.

 

그럼 여기서 퀴즈!

 

만약 const에 원시타입이 아닌 객체타입의 값을 넣어주었을 경우, 그 값은 변경이 가능할까?

 

답은 'YES' 

 

메모리 셀에 할당된 값은 특정 값이 아닌 메모리 참조값 이다. Heap 영역 내에 있는 데이터들은 언제든지 재할당이 가능하단 얘기!!

 

const라 해서 무조건 값을 변경 해줄수 없는 것이 아니라, 객체타입을 넣어줬을경우 그 변수엔 다른 객체는 다시 넣어줄순 없지만, 객체 타

 

입 내의 값은 다시 재 할당이 가능하단 점을 유의하자!