type of data / primitive & reference

p r o g r a m m i n g

type of data / primitive & reference

hee.hee 2022. 5. 12. 11:41

데이터 타입의 종류, 원시자료형과 참조형

고정된 저장 공간을 차지하는 데이터를 모두 원시 자료형(primitive data type)이라 한다.

반면에 대량의 데이터를 다루기에 적합한 배열과 객체는 참조 자료형(reference data type)이라고 분류한다.

분류는 데이터를 저장하는 방식에 따른 분류함. 각각 특성을 알아둬야한다.

원시자료형 데이터 primitive type data

JavaScript에서 원시 타입의 데이터는 객체가 아니면서 method를 가지지 않는 6 가지의 타입 number, boolean, undefined, string, symbol, null을 말한다.

저장 공간에 이름과 데이터가 들어간다.

원시자료형이 할당될 때에는 변수에 값 자체가 담긴다.

변수 자체를 변경할 수 없고, 재할당이 가능하다.

값 복사가 가능하기 때문에 수정해도 기존 데이터에 영향이 없다.

참조형 데이터reference type data

array, object, function는 참조형 데이터이다.

참조형 데이터는 선언할 때 저장 공간에 이름과 주소지를 저장해두고 heap(동적으로 크기가 변하는 특별한 보관함)이라는 공간의 해당 주소지에 테이터를 저장함.

'변수에는 하나의 데이터만 담긴다' 참조 자료형(array, object 등)은 여러 데이터라 생각할 수 있지만, 변수에는 한가지 데이터, '주소'만 담긴다. 참조 자료형을 변수에 할당할 때는 변수에 값이 아닌 주소를 저장한다. 이 주소가 변경이 안되고 하나만 들어간다는 의미이다. 하지만 주소를 따라가 내용이 저장된 공간에서는 하나 뿐 아니라 여러개의 데이터를 저장할 수 있다.

참조 타입 데이터를 다른 변수에 할당해주면, 값의 복사가 아닌 주소지의 복사. 결국 한 곳에서 데이터를 수정하면 원본이 수정됨.

원시자료형과 참조형 비교

원시 자료형이 할당될 때에는 변수에 값(value) 자체가 담기고, 참조 자료형이 할당될 때는 보관함의 주소(reference)가 담김
원시타입데이터는 복사, 수정할 경우 내용 자체를 복사하고 복사한 것을 수정하기 때문에 기존 데이터에 영향이 없지만,
참조 타입 데이터는 주소를 복사하고 수정한다면, 기존데이터도 함께 수정됨
변수에는 데이터의 크기와는 관계없이 하나의 데이터만 담을 수 있습니다. 원시 자료형은 값 자체에 대한 변경이 불가능(immutable)하지만, 변수에 다른 데이터를 할당할 수는 있습니다. let으로 변수에 할당한 데이터는 '재할당'으로 변경 가능. const는 재할당 불가능.

예제

자료 형태에 따른 '복사'

1. 아래 코드에 대한 설명으로 옳지 않은 것을 고르세요.

let first = [10, 20, 30, 40];
let second = first;
second[0] = 5;

(답) A. first === second 의 결과는 false이다.

B. first의 0번째 인덱스에 있는 요소는 5이다

C. first와 second는 같은 주소를 공유하고 있다.

D. first와 second는 참조 자료형이다.

second는 first가 가지고 있는 주소를 그대로 가지고 있습니다. 값만 복사했다면 second의 0번째 인덱스에 있는 요소를 변경하면 first는 변경되지 않겠지만, 주소를 공유하고 있기 때문에 first도 똑같이 변경됩니다. 이런 특징을 가지고 있는 자료형을 참조 자료형이라고 합니다.

2. 다음 코드가 실행된 후, 콘솔에 찍히는 값은 각각 무엇인지 고르세요.

console.log('codestates' === 'codestates');
console.log(3.14 === 3.14);
console.log([1,2,3] === [1,2,3]);
console.log({ foo: 'bar' } === { foo: 'bar' });

//(답) true true false false

값의 크기가 수시로 변하는 것을 처리하기 위해서 참조 자료형은 heap이라는 별도의 메모리 저장 공간을 사용합니다.
참조 자료형의 ===(strict equality)는 주소값이 같은지를 확인합니다. 그렇기 때문에 두 참조 자료형의 주소값은 다르다고 판단을 내릴 수 있습니다.

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

컴퓨터가 위 코드를 읽으면서, 이미 두 개의 heap 저장 공간의 주소를 확보했습니다. 다만 우리는 눈으로 확인하지 못할 뿐입니다. 배열([])과 객체({}) 등 참조 자료형을 읽을 때, 미리 주소값과 메모리 값을 잡아둔다고 생각하면 편합니다. 그러므로 [] === [] 도 true가 나오지 않는 것이죠.

3. 다음 코드가 실행된 후, x.foo의 값은 무엇인지 고르세요.

let x = { foo: 3 };
let y = x;
y.foo = 2;

//답: 2

4. 다음 코드가 실행된 후, x.foo의 값은 무엇인지 고르세요.

let x = { foo: 3 };
let y = x;
y = 2;

//답:3

let y = x;

여기서 변수 y는 x의 주소값을 할당받았습니다.

y = 2;

하지만 다시 2를 할당받았습니다.

이 과정 중에서 참조 자료형 { foo : 3 } 에는 아무런 영향을 미치지 않았기 때문에, x.foo를 조회해도 그대로 3이 나오게 됩니다.

let x = { foo: 3 };
let y = x;
y.foo = 2;
y = 5;

//y = 5
//x.foo = 2

foo에 접근해서 값을 변경하고 y에 5를 재할당한다. x.foo는 변경된 값 2. y는 재할당된 값 5가 나온다.

5. 다음 코드가 실행된 후, myArray의 값은 무엇인지 고르세요.

let myArray = [2, 3, 4, 5];
let ourArray = myArray;
ourArray[2] = 25;
ourArray = undefined;

// [2, 3, 25, 5]

이제 변수 ourArray에 원시 자료형 undefined가 할당되었기 때문에, myArray에 접근할 수 없습니다. 하지만 myArray는 그대로 [2, 3, 25, 5]이기 때문에 답은 E 입니다.