[자바스크립트] 자바스크립트의 자료형 - 참조형

권가야·2022년 9월 23일
0
post-thumbnail
자바스크립트의 자료형

-숫자 타입 ( Number ) : 숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존재한다.
-문자열 타입 ( String ) : 문자열
-불리언 타입 ( boolean ) : 논리적 참 (true)과 거짓 (false)
-undefined 타입 : var 키워드로 선언된 변수에 암묵적으로 할당되는 값
-null 타입 : 값이 없다는 것을 명시할 때 사용하는 값
-심벌 타입 (symbol) : ES6에서 추가된 7번째 타입

-객체 타입 : 객체, 함수, 배열 등

객체 타입이란 ?

자바스크립트의 데이터 타입은 6가지의 원시 타입 ( Number, String, boolean, undefined, null, symbol) 과 객체 타입으로 ( 참조형 ) 구분할 수 있다.

왜 원시타입과 객체 타입으로 구분할까 ?

원시 타입의 값은 변경이 불가능한 값이고
객체(참조) 타입의 값은 변경 가능한 값이기 때문이다.

그렇다 이해가 안된다.

원시 타입에 대해 더 깊게 들어가보자

변수와 값을 구분해서 생각해보자.

let a = 10; // 변수 선언

위와 같이 변수를 선언하면 10이라는 값을 저장하기 위해 메모리에 공간을 할당 받는다.
할당받은 메모리에는 10이라는 값이 저장된다.
그리고 10이라는 값이 저장된 메모리를 찾아갈 수 있게 지정해 놓은 이름을 변수명이라고 생각하는게 정신 건강에 이롭다.

변수 메모리
a --- 10 (a가 할당 받은 메모리)

다른 예시를 들어보자

let a = 10; // 변수 선언
let b = a; // b = 10

예제를 보면 a 의 값도 10이고 b의 값도 10이다.
a와 b가 각각 한 개씩의 메모리 영역을 할당 받아서 값을 각각 저장한다. (총 2개)

변수 메모리
a --- 10 (a가 할당 받은 메모리)
b --- 10 (b가 할당 받은 메모리)

다른 상황을 예로 들어보자

let a = 10; 	// 변수 선언
let b = a; 		// b = 10
a = 100; 		// a = 100

a 변수에 대해 재할당이 된 경우이다.
이 경우에는 우선 a와 b가 각각 한 개의 메모리의 영역을 할당받아 값을 각각 저장한다.
그 이후에 a는 하나의 메모리를 추가로 할당 받아서 100이라는 값을 저장한다.
기존에 a가 10을 저장한 메모리는 가비지 콜렉터가 해제를 시킨다.

변수 메모리
10 -> 가비지 콜렉터에 의해 메모리 해제가 된다.
a --- 100 (a가 할당 받은 메모리)
b --- 10 (b가 할당 받은 메모리)

위 동작 과정을 이해하였으면 원시 타입의 값은 변경이 불가능하다는 것을 알 수 있다.

즉, 변수는 값 변경은 재할당이 가능하다.
재할당은 새로운 메모리를 할당받아 새로운 원시 값을 저장하고 사용하지 않는 메모리는 해제한다.
직접적으로 메모리에 저장된 데이터(원시 값)를 변경할 수 없다는 것을 의미하고
위 내용이 원시 타입은 데이터 변경이 불가능한 값이라는 뜻이다.

우리는 왜 이 고생을 해가면서 원시 타입은 값을 변경할 수 없다는 것을 이해했을까?
왜냐하면 다음에 나올 객체와 비교해가면서 이해하려고 했기 때문이다.


진짜 객체 타입이란 ? 

객체는 프로퍼티의 개수가 정해져 있지 않으며, 동적으로 추가되고 삭제할 수 있다.
또한 프로퍼티의 값에 제약이 없다.

참조형은 원시 데이터의 집합이다.

객체(참조) 타입의 값, 즉 객체는 변경 가능한 값이다.

배열, 객체, 함수가 대표적인 참조 타입이다.

객체를 만들어서 변수에 할당해보자

// 변수에 객체를 할당
let person = {
	name : 'kim' 			
}

console.log(person); 		// {name: 'kim'}
console.log(person.name); 	// 'kim'

무슨 일이 벌어졌는지 확인해보자

person 변수에는 객체가 저장되어있는 메모리의 주소가 할당된다. 이를 참조 값이라고 한다.
person 변수는 자신에게 할당 된 메모리의 주소 값을 통해 객체에 접근할 수 있다.

변수 메모리
person --- '객체가 저장된 메모리의 주소' -ㄱ
(줄을 맞춰야) ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ ㅣ
(하는 것이여) ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ ㅣ
(얘네는 무시하세요잉) { name : 'kim' } <ㅡㅢ
어우 힘들다


// 변수에 객체를 할당
let person = {
	name : 'kim',
  	addr : 'guro'
}

person.name = 'dindin';	// 프로퍼티 값 갱신
person.age = 46;		// 프로퍼티 동적 생성
delete person.addr;		// 프로퍼티 삭제

console.log(person);	// {name: 'dindin', age: 46}

객체는 변경이 가능한 값이므로 메모리에 저장된 객체를 직접 수장할 수 있다.
이때 객체를 할당한 변수에 재할당을 하지 않음으로 person에 할당된 객체 메모리의 값은 변화가 없다.


요약
1. 원시 타입의 데이터는 변경이 불가능하다. ( 메모리에 저장된 값 )
1-1. 재할당을 통해 변수의 값을 변경할 수 있으나 이는 새로운 메모리를 할당 받는 것이다.
2. 참조형 데이터는 변수에 객체의 메모리 주소를 저장한다.
2-1. 변수에 저장된 메모리 주소를 통해 객체에 접근이 가능하다.
2-2. 객체의 값을 변경하더라도 재할당이 일어나지 않아 변수에 저장된 객체의 메모리 값에는 변경이 없다.

*오타 혹은 오류 지적해주시면 감사하겠습니다 !!

0개의 댓글