데이터 가변성 불변성

원시 데이터(Primitive Type)

원시데이터타입은 불변한다.

Number
String
Boolean
Null
Undefined
Symbol

const a = 1
const b = 1
// 1은 숫자데이터, 원시형
// 원시형은 같은 값이 또다른 메모리에 만들어지지 않는다.

const a = 1
let b = 1
b = 7
// 7은 값이 다르니 또 다른 메모리에 할당 된다.

const a = 1 에서 할당연산자 = 는 값을 복사하는 개념이 아닌, 메모리 주소를 참조하게하는거라고 생각하면 쉽다. 따라서 const b = 1 b 변수도 값이 1이니 a와 같은 메모리주소를 바라본다.

참조형 데이터(Reference Type)

참조형 데이터타입은 가변한다.

let a = {
 k : 1
};
let b = a;

a.k = 2;

객체데이터 { k : 1 } 를 변수 a에 할당했다. 그리고 b도 a와 같은 메모리주소를 바라보게끔 선언한 뒤에 k에 2를 할당하면 b도 같이 변하게 된다.

따라서 내가 생각지도 못한곳에서 값이 바뀔 수 있으니 참조형 데이터타입에서 가변성을 염두해두고 작업해야한다.

---

메모리 누수

addEventListener

만약 버튼 클릭이 한두번만 이루어져도 된다면? -> removeEventListener 를 사용하라.

const btnEl = document.querySelector('button')

btnEl.addEventListener('click', event => {
  console.log(123)
}) 

// 동작 후 이벤트를 멈춰줘야함 안그러면 메모리 누수 발생
btnEl.removeEventListener('click', )

회고

데이터타입을 배우면서 할당 연산자가 '메모리 주소'를 바라보게한다는 것을 배웠다. 내가 몰랐던 다른 세계가 또 펼쳐지는 느낌이랄까? 그리고 자주 사용하던 addEventListener에서 상황별로 메모리 누수가 발생할수 있다는 점도 깨달았다. 작업 시 메모리 관련해서도 많이 신경써야겠다.