JS기초_보충(데이터 타입 심화)

데이터 타입의 종류

자바스크립트에서 값의 타입은 크게 기본형과 참조형으로 구분된다.

구분의 기준은 값의 저장 방식과 불변성 여부이다.

(이미지 출처 : https://velog.io/@imjkim49/자바스크립트-데이터-타입-정리 )

 

 

기본형과 참조형 데이터의 구분 기준

1. 복제 방식
   1. 기본형 : 값이 담긴 주소 값을 복제
   2. 참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제
2. 불변성의 여부
   1. 기본형 : 불변성을 가짐
   2. 참조형 : 불변성을 가지지 않음

 

 

메모리와 데이터 기본 개념

(이미지 출처 : https://namu.wiki/w/바이트 )

 

1. 메모리와 데이터 
   1. 비트
      1. 컴퓨터가 이해할 수 있는 가장 작은 단위
      2. 0과 1을 가지고 있는 메모리를 구성하기 위한 작은 조각
      3. 비트가 모여서 메모리를 구성
   2. 바이트
      1. 비트만 사용하여 데이터를 만드는 것은 한계가 있음
      2. 비트 8개를 묶어 새로운 단위인 바이트를 만듦
   3. 메모리 : 바이트(Byte) 단위로 구성
      1. 모든 데이터는 byte 단위의 식별자인 메모리 주소값을 통해서 서로 구분이 된다.
      2. 64비트 정수는 8개의 바이트로 분할하여 각 바이트를 메모리에 저장한다.

 

 

 

변수 선언과 데이터 할당

할당 예시

/** 선언과 할당을 풀어 쓴 방식 */
var str;
str = 'test!';

/** 선언과 할당을 붙여 쓴 방식 */
var str = 'test!';

주소	...	1002	1003	1004	1005	1006	....
데이터		str / @5002
주소	....	5002	5003	5004	5005	5006	.....
데이터		test!

위와 같이 str이라는 변수를 선언하고 'test!'라는 값을 할당해주었다.

그러면 예를 들어 1002 주소의 메모리에 변수 str이 할당되고 5002 주소의 데이터에 'test!' 값이 할당된 후에 변수 str이 담긴 1002 메모리에서는 5002 메모리를 바라보게 된다.

 

 

 

기본형 데이터와 참조형 데이터

메모리를 기준으로 나누는 주요 개념

 

변수와 상수

• 변수 : 변수 영역 메모리를 변경할 수 있음
• 상수 : 상수 영역 메모리를 변경할 수 없음

 

불변과 불변하지 않음

• 불변 : 데이터 영역 메모리를 변경할 수 없음
• 불변하지 않다 : 데이터 영역 메모리를 변경할 수 있음

 

 

가변값과 가변성

참조형 데이터의 변수 할당 과정

// 참조형 데이터는 별도 저장공간(obj1을 위한 별도 공간)이 필요합니다!
var obj1 = {
	a: 1,
	b: 'bbb,
};

주소	1001	1002	1003	1004	1005
데이터	obj1 / @7103~
주소	5001	5002	5003	5004	5005
데이터	1	bbb

 

주소	7103	7104	7105	7106
데이터	a / @5001	b / @5002

기본형 데이터의 변수 할당과 차이점은 객체의 변수(프로퍼티) 저장 영역이 별도로 존재한다는 것이다.

 

 

 

참조형 데이터의 가변성

var obj1 = {
	a: 1,
	b: 'bbb',
};

// 데이터를 변경해봅시다.
obj1.a = 2;

주소	1001	1002	1003	1004	1005
데이터	obj1 / @7103~
주소	5001	5002	5003	5004	5005
데이터	1	bbb	2

주소	7103	7104	7105	7106
데이터	a / @5003	b / @5002

할당된 값을 변경하는 과정

1. 변경할 값인 2를 데이터 영역에서 검색
2. 없음
3. 2를 데이터 영역 5003에 새로 추가하고 a가 바라보고 있는 주소를 5003으로 바꿈

 

불변 객체와 필요성

얕은 복사와 깊은 복사

• 얕은 복사 : 바로 아래 단계의 값만 복사
  문제점 : 중첩된 객체의 경우 참조형 데이터가 저장된 프로퍼티를 복사할 때, 주소값만 복사
• 깊은 복사 : 내부의 모든 값들을 하나하나 다 찾아서 모두 복사하는 방법

 

 

불변성을 위한 추가 방법 (JSON = JavaScript Object Notation)

장점

• JSON.stringify() 함수를 사용하여 객체를 문자열로 변환한 후, 다시 JSON.parse() 함수를 사용하여 새로운 객체를 생성하기 때문에 원본 객체와 복사본 객체가 서로 독립적으로 존재한다. 따라서 복사본 객체를 수정해도 원본 객체에 영향을 미치지 않는다.
• JSON을 이용한 깊은 복사는 다른 깊은 복사 방법에 비해 코드가 간결하고 쉽게 이해할 수 있다.

단점

• JSON을 이용한 깊은 복사는 원본 객체가 가지고 있는 모든 정보를 복사하지 않는다. 예를 들어, 함수나 undifined와 같은 속성 값은 복사되지 않는다.
• JSON.stringify() 함수는 순환 참조(Recursive Reference)를 지원하지 않는다. 따라서 객체 안에 객체가 중첩되어 있는 경우, 이 방법으로는 복사할 수 없다.

 

Undifined와 Null

둘 다 없음을 나타내는 값이지만 약간의 차이점이 있다.

 

1. Undifined

사용자가 직접 지정할 수도 있지만 일반적으로 자바스크립트 엔진에서 값이 있어야하는데 없는 경우 자동으로 부여한다.

• 변수에 값이 지정되지 않은 경우, 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때
• .이나 []로 접근하려고 할 때 해당 데이터가 존재하지 않는 경우
• return 문이 없거나 호출되지 않는 함수의 실행 결과

var a;
console.log(a); // (1) 값을 대입하지 않은 변수에 접근

var obj = { a: 1 };
console.log(obj.a); // 1
console.log(obj.b); // (2) 존재하지 않는 property에 접근
// console.log(b); // 오류 발생

var func = function() { };
var c = func(); // (3) 반환 값이 없는 function
console.log(c); // undefined

주의점

undefined로 나오는 변수가, 필요에 의해 할당한건지 자바스크립트 엔진이 반환한건지 구분할 수 없다.

‘없다’를 명시적으로 표현할 때는 undefined를 사용하면 안된다.

 

 

2. null

'없다'를 명시적으로 표현할 때 사용한다.

var n = null;
console.log(typeof n); // object

//동등연산자(equality operator)
console.log(n == undefined); // true
console.log(n == null); // true

//일치연산자(identity operator)
console.log(n === undefined);
console.log(n === null);

주의점

null의 타입은 object로 확인되지만 이것은 자바스크립트의 버그이다.

 

 

2023.04.05

항해99 D-97