데이터 타입의 차이점
데이터 타입에서 JavaScript는 크게 2가지의 타입(Primitive type과 Object type)이 있다고 했습니다.
이 두 가지 타입은 큰 차이점이 있습니다.
- Primitive type의 값은 변경이 불가능하고, Object type의 값은 변경이 가능합니다.
- Primitive type의 값은 메모리 내 실제 값이 저장되고, Object type의 값은 메모리 내 참조 값이 저장됩니다.
- 변수를 복사할 경우, Primitive type은 깊은 복사가 일어나고, Object type은 얕은 복사가 일어납니다.
값의 저장 및 변경
Primitive type
Primitive type의 값은 변경이 불가능합니다.
앞서 포스팅했던 변수에서 설명했던 값 할당을 예제코드와 함께 되짚어 보도록 하겠습니다.
var smaple = 10;
sample = 20;첫 번째 라인에서는 다음과 같은 동작을 합니다.
- 메모리 공간 확보
- 메모리 공간과 변수명
sample을 연결 - 해당 메모리 공간에
undefined할당 - 새로운 메모리 공간에
10할당 - 새로운 메모리 공간과 변수명
sample연결
두 번째 라인에서는 다음과 같은 동작을 합니다.
- 다른 새로운 메모리 공간에
20할당 - 다른 새로운 메모리 공간과 변수명
sample연결
위에서 알 수 있듯, 메모리 내부의 값을 변경하는 것이 아니라 새로운 메모리에 값을 넣고 그 메모리 주소에 변수명을 연결합니다.
이렇게 값을 변경할 수 없는 특성을 불변성이라고 합니다.
Object type
Object type의 값은 변경이 가능합니다.
아래는 객체를 선언하고 값을 변경하는 예제 코드입니다.
var person = {
name: 'Hyeonsik',
age: 30,
};
person.age = 20;변수 선언부에서 다음과 같은 동작을 합니다.
- 메모리 공간 확보 및 변수명
person과 연결 - 객체 리터럴을 담을 메모리 공간 확보 및 값 저장
person의 값에 객체 리터럴 메모리 공간의 주소 저장
값 변경하는 코드에선 다음과 같은 동작이 일어납니다.
person변수에 접근- 객체 리터럴 메모리 공간의 주소로 접근
age프로퍼티에 접근하여 값 변경
이렇게 실제로 저장되어 있는 값의 내용을 변경하게 됩니다.
이는 객체 리터럴 메모리를 참조하는 모든 변수에 영향을 미칩니다.
하지만 Primitive type처럼 동작할 경우, 메모리의 효율과 성능이 떨어져 위와 같은 동작 방식이 일어납니다.
값의 복사
Primitive type
Primitive type의 값을 복사해 보도록 하겠습니다.
var original = 10;
var copy = original;
original = 20;
console.log(original);
console.log(copy);result>
20
10두 번째 라인에서 copy는 original과 같은 값을 가지는 다른 메모리 공간을 가집니다.
따라서 두 변수는 서로에게 영향을 주지 않습니다.
이를 깊은 복사라고 얘기합니다.
Object type
Object type의 값도 복사해 보겠습니다.
code>
var original = {
value: 10,
};
var copy = original;
original.value = 20;
console.log(original);
console.log(copy);result>
{ value: 20 }
{ value: 20 }위 복사에서 copy 변수는 객체 리터럴이 저장되어 있는 메모리의 주소를 가지게 됩니다.
따라서 둘 중 하나의 객체 변수에 접근하여 값을 바꾸며 다른 객체 변수에도 영향을 끼칩니다.
이를 얕은 복사라고 합니다.
