💡원시 자료형
: primitive date types
📌개념 및 종류
개념
- JavaScript 에서 원시 자료형 혹은 원시 값이라고 한다.
- 객체가 아니면서 메소드도 가지지 않는 데이터
- 모든 원시 값은 불변하여 변형이 불가하다.
- 모두 하나의 정보, 즉 데이터를 담고 있다.
종류
1. String
2. Number
3. BigInt
4. Boolean
5. undefined
6. Symbol
7. null
원시 자료형 명칭의 유래
- 아주 초창기에 코드를 어떻게 작상하였는지를 돌아보면, 그 때는 데이터 저상소(메모리)의 용량이 제한되어 변수 하나에
데이터 용량이 제한된 하나의 자료밖에 담을 수 없었다.
- String 을 포함한 7가지 자료형태들이 변수 하나에 하나의 데이터를 담는 것은 원시적인 시대에 사용되던 형태에 해당하므로
원시 자료형이라는 명칭이 붙음
원시 값과 할당한 변수
- 혼동하면 안된다.
- 원시 자료형의 경우, 변수에 데이터의 크기와 관계 없이 하나의 데이터만 담을 수 있다.
- 원시 값은 값 자체에 대한 변경이 불가능하지만, 변수는 새로운 값을 다시 할당할 수 있다.
변수와 데이터
- 원시 자료형은 변수에 하나의 데이터만 담는다.
- 참조 자료형을 변수에 할당할 때는 변수에 값이 아닌 주소를 저장한다.
💡참조 자료형
: Reference data types
📌개념 및 종류
개념
- 원시 자료형에 해당하지 않는 것은 모두 참조 자료형이다.
- 원시형 데이터의 집합
- 데이터의 크기가 정해져 있지 않다.
- 변수에 할당할 때에는 변수에 값이 아닌 데이터에 대한 참조(주소)를 저장한다.
종류
1. 배열 : [ ]
2. 객체 : { }
3. 함수 : function( ) { }
배열의 시초
- 컴퓨터가 처음 사용되던 시기에는 배열, 즉 리스트라는 개념을 구현하기 어려웠다.
- 띄어쓰기, 탭, 쉼표 등으로 데이터를 구분하여 배열과 비슷한 형태로 자료 구조를 구현하기 시작
ex) csv(comma-seperated values)
💡 Primitive & Reference CheckPoint
☑️문제 1
let x = 2;
let y = x;
y = 3;
풀이
- 원시 자료형을 할당하는 경우, 값 자체를 변수에 할당한다.
- 즉, 값을 복사하여 변수에다가 저장한다고 생각하면된다.
- 변수 x 를 변수 y 에 할당하는 경우, 변수 x 값인 2가 y 에 복사되어 할당되고 이후 3이 할당된 것이다
- 따라서 x = 2, y = 3
☑️문제 2
- 코드가 실행된 후, x.foo의 값은 무엇일까?
let x = { foo: 3 };
let y = x;
y.foo = 2;
풀이
- 원시 자료형이 아닌 것은 모두 참조 자료형이며, 대표적으로 배열, 객체, 함수가 있다.
- 참조 자료형을 할당하는 경우, 변수에 데이터가 저장되는 곳의 주소를 할당한다.
- 변수 x 를 변수 y 에 할당하는 경우, 변수 x 값인 {foo: 3} 의 주소를 y에 할당한다.
- 따라서 변수 x 와 변수 y 는 같은 주소를 참조하므로, y.foo 가 2가 되면 x.foo도 2가된다.
☑️문제 3
- 코드가 실행된 후, 콘솔에 찍히는 값은 각각 무엇일까?
console.log('codestates' === 'codestates');
console.log(3.14 === 3.14);
console.log([1,2,3] === [1,2,3]);
console.log({ foo: 'bar' } === { foo: 'bar' });
풀이
- 값의 크기가 수시로 변하는 것을 처리하기 위해 참조 자료형은 heap 이라는 별도의 메모리 저장 공간을 사용한다.
- 참조 자료형의 경우, 컴퓨터가 코드를 읽으면서 이미 두 개의 heap 저장 공간의 주소를 확보해두므로 엄격한 동등 비교(===)시
같을 수가 없다.
☑️문제 4
let x = { foo: 3 };
let y = x;
y = 2;
풀이
- 변수 y 에 x 의 주소값을 할당하고나서 2를 할당한 경우, 참조 자료형에는 영향이 없으므로 x.foo 를 조회해도 그대로 3이 나온다.
☑️문제 5
let myArray = [2, 3, 4, 5];
let ourArray = myArray;
ourArray[2] = 25;
ourArray = undefined;
풀이
- 변수 ourArray 에 myArray 의 주소값을 할당
- ourArray 의 2번 인덱스의 값을 25로 변경
- ourArray 와 myArray 의 주소값은 같으므로, 동일하게 [2, 3, 25, 5] 로 바뀐다.
- ourArray 에 undefined 를 할당한 경우, 원시 자료형을 할당한 것이므로 기존의 ourArray 는 변경되는 부분이 없으므로 [2, 3, 25, 5]
☑️문제 6
- 코드가 실행된 후, player.score 의 값은?
let player = { score: 3 };
function doStuff(obj) {
obj.score = 2;
}
doStuff(player);
풀이
- 함수 doStuff 에 변수 player 를 인자로 전달하여 호출(실행)
- 함수가 호출(실행)되면 매개변수 obj 에 변수 player 값이 할당
- 즉, { score: 3 } 의 주소값이 할당되는 되는 것이다.
- obj.score 에 2를 할당하면, obj 와 player 는 같은 주소값을 가지고 있으므로 player.score 도 2가 된다.
☑️문제 7
let score = 80;
function doStuff(value) {
value = 90;
}
doStuff(score);
// score = 80
풀이
- 함수 doStuff 에 score 의 값을 인자로 전달하여 호출(실행)
- 매개변수 value 에 score 의 값 80 전달
- value = 90 에서 value 에 90 할당
- score 의 값 80 은 참조 자료형이 아니기 때문에 주소값을 전달하지 않고, 값 자체를 복사하여 전달
- 함수 doStuff 에서 어떤 일이 발생했든 상관 없이 score 는 초기 할당값인 80 유지