[Javascript] 윈시 타입(Primitive Type) vs 참조 타입(Reference Type)

1. 힙(Heap) & 스택(Stack)

1_1. 힙(Heap)이란?

Heap은 메모리 할당이 일어나는 곳입니다.

즉, 프로그램에서 선언한 변수 or 함수등이 저장되는 공간입니다.

이러한 heap은

- 장기적 메모리

- 주로 브라우저에서 작동함

 

1_2. 스택(Stack)이란?

Stack은 코드 실행에 따라 호출 스택이 쌓이는 곳입니다.

즉, 현재 실행되고있는 함수,변수등을 관리하는 공간입니다.

이러한 stack은

- 단기적 메모리

 

1_3. Heap과 Stack의 흐름

const getName = () => {
  return prompt("당신의 이름을 작성해주세요: ", "");
}

const dummyFn2 = () => {
  const userName = getName();
  console.log("당신의 이름은 " + userName + "입니다.");
}

dummyFn2();

1. 함수 및 변수등을 정의함

2. 해당 함수 및 변수가 heap에 쌓임

3. 코드 실행

4. stack에 익명 코드가 쌓이고 실행됨 = 전체적인 스크립트가 실행됨

5. dummyFn2() 함수 실행 = heap에서 stack으로 dummyFn2()함수를 푸쉬하여 쌓음

6. 그 다음 stack에서 dummyFn2() 위에 getName()함수가 쌓임

7. 마지막으로 stack에 prompt() 함수가 쌓임

(stack에서는 맨위에 있는 항목이 항상 현재 실행중인 항목임)

8. 함수의 작업이 끝나면(반환되면) stack에서 방출된다

9. 마지막으로 익명코드가 방출되면서 코드가 종료된다.

 

 

2. 윈시 타입(Primitive Type) vs 참조 타입(Reference Type)

2_1. 원시 타입(Primitive Type)

- 종류: String, Number, Boolean, null, undefined, Symbol

이러한 원시 타입들은 메모리에 저장된다.(보통 Stack에..)

이러한 원시값을 복사하면(새로운 변수에 할당하는 작업) 실제로 복사되는 것은 값이다.

  -> 복사한 후에 원래값을 다른값으로 바꿔도 복사된것은 바뀌지않는다

  -> 즉, 복사본이 새롭게 만들어지는것이다

let nameA = "messi";
let anNameA = nameA;

nameA = "pedri";

console.log(nameA);
// 결과 => pedri

console.log(anNameA);
// 결과 => messi

 

2_2. 참조 타입(Reference Type)

- 종류: 원시 타입을 제외한 모든 객체들

이러한 참조값들은 메모리에 저장된다(보통 Heep에..)

원시값은 실제 값을 메모리에 저장하는것과는 달리, 참조값은 메모리에서의 주소를 저장한다

  -> 복사한 후에 원래값을 다른값으로 바꾸면 복사한 값도 변경된다.

let arr = ["messi"];
let newArr = arr;

arr.push("pedri");

console.log(arr);
// 결과 => ["messi", "pedri"]

console.log(newArr);
// 결과 => ["messi", "pedri"]

만약 원시 타입과 같이 실제 복사본을 만들고 싶다면?

=> 스프레드 연산자를 사용하면된다.

let dummyObj = {age: 30};
let newDummyObj = {...dummyObj};

dummyObj.age = 40;

console.log(dummyObj.age);
// 결과 => 40

console.log(newDummyObj.age);
// 결과 => 30

*추가 참고사항

let obj1 = {age: 30} / let obj2 = {age: 30} 일때

obj1 === obj2 의 결과는 false다.. 왜그럴까?

=> 왜냐하면 참조값들은 값과 상관이 각각의 다른 주소를 가지기때문

 

2_3. const 와 참조 타입의 관계

const는 상수를 의미하고, 상수는 기본적으로 값을 변경할 수 없다.

그렇다면 아래의 코드는 오류가 발생할 것이다.

const arr1 = [1, 2];
arr1.push(3);
console.log(arr1);

하지만, 결과적으로 오류는 발생하지 않는다. 왜일까?

=> const로 인해서 변해서 안되는것은 "주소"이지 값이 아니다.

     즉, 값을 바꾸는 행위는 const로 인한 문제가 발생하지 않는다.

     단, = 을 이용하여 새롭게 할당하려하면 오류 발생함