원시타입 값 vs 객체타입 값

Study/Javascript

원시타입 값 vs 객체타입 값

kdhoooon 2022. 4. 25. 10:01

Javascript 에서 사용하는 데이터 타입

원시 타입(primitive type)
- Boolean : 논리 요소를 나타내며 true와 false 두 가지의 값을 가질 수 있음
- Null : null 하나의 값만 가질 수 있음
- Undefined : 값을 할당하지 않은 변수
- Number : Number와 BigInt 두 가지의 내장 숫자 타입을 가지고 있고, 정수 실수 구분 없이 하나의 숫자 타입만 존재함
- BigInt : 임의 정밀도로 정수를 나타낼 수 있는 JavaScript 숫자 원시 값, Number의 안전 한계를 넘어서는 큰 정수도 안전하게 저장하고 연산할 수 있음
- String : 텍스트 데이터를 나타낼 때 사용하는 문자열 타임
- Symbol : 고유하고 변경 불가능한 값
객체 타입(object/ reference type)
- 객체, 함수 배열 등

원시 타입

변경 불가능한 값(immutatble value)
원시 값은 변경 불가능하다 -> 원시 값 자체를 변경할 수 없다는 것이지 변수 값을 변경(교체)할 수 없다는 것은 아님
원시 값의 경우 값 변경이 불가능하기 때문에, 변수가 참조하던 메모리 공간의 주소가 바뀌는 방식으로 값을 바꿈(실제로 해당 값이 바뀌는 것이 아니라 값을 저장하는 주소가 바뀌기 때문에 기존의 원시 값은 그대로 존재함)
원시 타입 변수의 값을 변경하는 순서
1. 새로운 메모리 공간을 확보
2. 재할당한 값을 저장
3. 변수가 참조하던 메모리 공간의 주소를 변경

이러한 값의 특성을 불변성(immutability)라고 함
불변성을 갖는 원시 값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법이 없음
실제로는 var score = 80 을 해도 80 값을 할당하기 전 undefined 를 먼저 할당하고 80을 재할당 하는 방식으로 2개의 메모리를 할당받는 방식이다

문자열

원시 값을 저장하려면 먼저 확보해야 하는 메모리 공간의 크기를 결정해야 함
문자열은 몇 개의 문자로 이뤄졌느냐에 따라 필요한 메모리 공간의 크기가 결정되므로 보통 다른 언어에서는 원시 타입으로 문자열을 제공하지 않음
하지만, Javascript에서는 문자열을 원시타입으로 제공함
유사 배열 객체이면서 이터러블 임
- 유사 배열 객체
  - 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고 length 프로퍼티를 갖는 객체를 말함
인덱스를 통해 각 문자에 접근할 수 있으며, for 문으로 순회할 수 있음 (유사 배열 객체이기 때문)
원시 값을 객체처럼 사용하면 원시 값을 감싸는 래퍼 객체로 자동 변환됨
원시 값이기 때문에 배열처럼 인덱스로 값에 접근할 수는 있어도 값을 변경할 수는 없음

var str = 'string';

console.log(str[0]); //s
console.log(str.length); //6
console.log(str.toUpperCase()); //STRING

//배열과 유사하지만 원시 값이기 때문에 인덱스의 값을 변경 할 수는 없다.
str[0] = 'S';

값에 의한 전달

Javascript 는 참조에 의한 전달 방식

다음과 같은 순서로 값을 할당할 경우 '값에 의한 전달'을 방식을 알아보자

num1 = 80 // num1 에 80을 할당
num2 = num1 //num2 는 num2 의 값을 복사함
num1 = 100 // num1 에 100을 재 할당
이 때, num1 과 num2 의 값은?

값에 의한 전달 과정은 num1 을 할당한 상태에서 num2는 num1의 값만 전달받아 저장한다.
나중에 num1 이 재할당 되면 그때의 메모리를 새로 할당받아서 해당 값을 저장한다.
따라서 num1 = 100, num2 = 80 의 결과가 나온다.

참조에 의한 전달 과정은 num1이 가리키는 메모리의 주소 값을 전달받아 num2가 저장한다.
나중에 num1 이 재할당 되면 그때의 메모리를 새로 할당받아서 해당 값을 저장한다.
따라서 num1 = 100, num2 = 80의 결과가 나온다.

결과적으로 두 방식의 결과 값은 같은 결과를 가져온다.

하지만 과정의 차이가 있고, 자바스크립트 엔진을 구현하는 제조사에 따라 실제 내부 동작 방식은 위와 같이 미묘한 차이를 가질 수 있다.

자바스크립트에서는 공유에 의한 전달이라고도 표현 엄격하게 표현하면 변수에는 값이 전달되는 것이 아니라 메모리 주소가 전달되기 때문
변수와 같은 식별자는 값이 아니라 메모리 주소를 기억하고 있음
두 변수의 원시 값은 서로 다른 메모리 공간에 저장된 별개의 값이 되어 어느 한쪽에서 재할당을 통해 값을 변경하더라도 서로 간섭할 수 없음

객체

프로퍼티의 개수가 정해져 있지 않음
동적으로 추가되고 삭제할 수 있음
프로퍼티 값에도 제약이 없음
원시 값과 같이 확보해야 할 메모리 공간의 크기를 사전에 정해 둘 수 없으므로 구현 방식도 브라우저 제조사마다 다를 수 있음

* Javascript 객체 관리 방식

자바스크립트 객체는 프로퍼티 키를 인덱스로 사용하는 해시 테이블(hash table)과 비슷한 방식으로 구현된다. 대부분의 자바스크립트 엔진은 해시 테이블과 유사하지만 높은 성능을 위해 일반적인 해시 테이블보다 나은 방법으로 객체를 구현한다. 이는 자바 C++ 같은 클래스 기반 객체지향 프로그래밍 언어의 사전에 정의된 클래스 기반으로 객체(인스턴스를) 생성하는 방식과는 차이가 있다.
Javascript 객체 관리 방식

변경가능한 값

객체 타입의 값은 변경이 가능함
객체를 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 참조 값(reference value)에 접근할 수 있음

원시 값은 변수 값을 변경하려면 재할당을 해야 하지만, 객체는 재할당 없이 객체를 직접 변경할 수 있음
객체를 복사하는 방법은 '얕은 복사', '깊은 복사' 두개가 존재함
- 더보기
  얕은 복사 vs 깊은 복사
  
  * 얕은 복사
  객체를 프로퍼티 값으로 갖는 개체를 한 단계까지만 복사하는 것, 참조하고 있는 주소만 복사하는 것
  따라서 참조하고 있는 값의 변화가 잃어 나면 해당 값을 참조한 변수 모두의 값이 바뀐다.
  
  *깊은 복사
  객체의 중첩되어 있는 객체까지 모두 복사하는 것
  참조한 값의 변화가 잃어나도 별도의 메모리 공간을 가지기 때문에 값의 변화가 없다.
얕은 복사가 가능하기 때문에, 여러 개의 식별자가 하나의 객체를 공유할 수 있음

참조에 의한 전달

var person = {
	name = 'Ggul'
};

var copy = person

위 코드를 참조에 의한 전달에서 살펴보면,

다음과 같이 person 객체의 참조값을 복사하여 값을 전달받아 두 개의 식별자가 하나의 객체를 공유하는 '얕은 복사'가 일어난다.

마지막으로 아래의 코드를 보면서 정리를 해보면,

var person1 = {
	name : 'Ggul'
};

var person2 = {
	name : 'Ggul'
};

console.log(person1 === person2); // false
console.log(person1.name === person2.name); // true

person1 과 person2 는 내용물은 같은 값을 가지지만, 각자 다른 메모리 공간을 가지고 다른 곳을 참조하고 있는 객체기 때문에

`person1 === person2`는 false 값이 나오게 된다.

하지만 string 은 원시 값이기 때문에, 원시 값 'Gugl' 은 서로 같은 값이다. 따라서 `person1.name === person2.name`의 값은 true 값이 나오게 된다.

이 때, 두 객체 값이 같은 지 비교하려면, `JSON.strigify()` 을 사용해서 비교할 수 있다.

var person1 = {
	name : 'Ggul'
};

var person2 = {
	name : 'Ggul'
};

console.log(Json.stringify(person1) === Json.stringify(person2)); // true

단, 객체 안에 있는 값의 순서도 같아야 한다는 점을 주의 해야한다.