1. 객체 참조 시

const obj = {
  a: 1,
  b: 2
};

function onClick() {
  console.log(o.a);
}

위와 같은 코드에서 obj는 a, b 속성 두 가지를 갖고 있다.
실제로 console.log에서 사용되는 값은 a밖에 없지만 a에 접근하기 위해 obj객체 전체를 onClick함수 범위에서 로딩해야 되기 때문에 b도 메모리를 차지하게 된다.
즉, onClick을 실행하면 obj전체를 찾고, 그 중에서 a만 사용하게 되는 것이다.

2. DOM 사용시 메모리 누수

const btn = document.querySelector('.btn');
const div = document.querySelector('.div');

btn.addEventListener('click', () => {
  div.remove();
  console.log(div);
})

위 코드는 btn 클래스를 갖고 있는 버튼을 클릭하면 div 클래스를 삭제 하는 코드다.
처음에 버튼을 클릭하면 div가 삭제되는데 계속 클릭하게되면 이미 삭제된 div에 계속 접근하려한다.
DOM이 HTML에서 사라져도 eventListener의 callback함수에는 참조가 계속 남아있는다.
이런 경우도 메모리 누수가 생기기 때문에 코드 수정이 필요하다.

const btn = document.querySelector('.btn');

btn.addEventListener('click', () => {
  const div = document.querySelector('.div');
  div.remove();
  console.log(div);
})

위 같은 방법으로 callback이 외부 변수를 계속 참조하는 것이 아니라 event가 발생할 때 찾아서 실행하게 하는 것이다.
한 번 삭제하고 나면 다시 클릭했을 때 접근할 DOM이 없기 때문에 에러가 난다.

또 다른 방법으로는 removeEventListener를 이용해 event를 끊는 것인데 코드구현은 따로 안했다.

3. 함수 인자

const obj = {
  a: 1,
  b: 2
}

function f(o) {
  console.log(o.a);
}

f(obj);

obj의 속성 중 a를 console.log로 출력하는 함수가 있다.
위 처럼 구현을 하게되면 함수 인자로 객체 전체가 참조되는데 만약 객체에 속성값이 엄청 많다면 메모리 사용이 그만큼 늘어날 것이다.

const obj = {
  a: 1,
  b: 2
}

function f(p) {
  console.log(p);
}

f(obj.a);

그래서 위처럼 특정 속성값을 전달해 메모리 사용량을 줄이는 방법도 있다.