일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 비동기
- 사용하는 이유
- 리액트
- react-router
- 코딩독학
- SasS
- 코딩초보
- async
- 참조자료형
- scss
- CSS
- 코딩기초
- React Native
- 자바스크립트
- 깃
- redux
- JavaScript
- 리덕스
- TypeScript
- Vue3
- react
- 코딩공부
- 코린이
- html기초
- 프론트엔드
- useEffect
- git
- http
- 타입스크립트
- 리액트 네이티브
- Today
- Total
맨 땅에 프론트엔드 개발자 되기
원시 자료형과 참조 자료형 본문
원시 자료형과 참조 자료형
원시 자료형(Primitive Data Type)
원시 자료형은 객체가 아니면서 동시에 메소드도 가지지 않는 자료형을 말하며, 다음의 자료형을 말한다.
string, number, bigint, boolean, undefined, symbol, null
문자열의 경우, 컴퓨터와 더 가까운 언어(low level language)인 C언어의 경우에는 조합형의 자료형으로 취급하지만, 일반적으로는 원시 자료형이라고 한다.
원시 자료형은 배열, 객체와 달리 하나의 데이터만을 가지고 있다. 그리고 값 자체의 변경은 불가능한 immutable 데이터다.
참조 자료형(Reference Data Type)
원시 자료형이 아닌 모든 자료형이 참조 자료형이다. 대표적으로, 배열, 객체, 함수가 있다.
참조 자료형은 대부분이 자료의 양이 여러 개 일 때 사용되기 때문에 데이터의 저장공간을 효율적으로 관리하기 위해 참조적으로 관리된다.
아래의 예시를 보자.
let a = 1;
let b = a;
console.log(a === b); //true
let a = 1;
let b = 1;
console.log(a === b); //true
변수 a에 원시 자료형인 숫자 1을 할당하고, 변수 b에 변수 a를 할당한 뒤 두 변수의 값이 같은 지를 확인해보면 true 값이 나온다. 변수 a와 b에 숫자 1을 각각 할당하고 변수 값이 같은 지를 확인해봐도 true 값이 나온다.
다음의 예시를 보자.
const a = [1,2,3];
const b = a;
console.log(a === b); //true
const a = [1,2,3];
const b = [1,2,3];
console.log(a === b); //false
이번에는 변수 a에 참조 자료형인 배열을 할당하고, 변수 b에 변수 a를 할당한 뒤 두 변수의 값이 같은 지를 확인해보면 true가 나오지만, 변수 a와 변수 b에 같은 형태의 배열을 할당하고 변수 값이 같은 지를 확인해보면 false 값이 나온다.
왜 그럴까?
이것이 바로 참조형의 의미다. 변수 b에 a의 배열을 할당할 때는 같은 배열을 참조하게 되지만, b에 새로운 배열을 할당하게 되면 형태는 같을지라도 같은 참조는 아니게 되므로 같은 자료가 아니게 된다. 메모리의 같은 배열 공간을 참조할 경우에는 같은 데이터지만, 다른 메모리의 배열 공간을 참조할 경우에는 다른 데이터라는 뜻이다.
그리고 변수명을 변하지 않는 데이터라는 뜻의 const로 선언하더라도 배열 안의 값은 수정할 수가 있다. 변수 a에게 할당된 배열은 하나이고, 그 배열 공간은 변하지 않기 때문이다.
아래 예시를 보자.
const a = [1,2,3];
const b = a;
b.push(4);
console.log(a); //[1,2,3,4]
변수 b에 변수 a를 할당하여 같은 배열 공간을 참조하도록 만들었다. 그런 다음, 변수 b에 push 메소드를 이용해서 데이터 4를 추가했다. 이럴 경우, 변수 a를 콘솔로 확인하면 어떻게 될까?
결과는 [1,2,3,4] 가 나온다. 같은 배열 공간을 참조하고 있기 때문에 데이터를 추가할 경우 같은 참조 공간이 변경된 것이다.
그래서 참조형 데이터를 다룰 때는 원본의 변경을 신경 쓰면서 로직을 작성하는 것이 중요하다.
'코딩 공부 일지 > JavaScript' 카테고리의 다른 글
Object is not iterable / 객체 순회 for in, Object.keys, value, entries - 에러 기록 (0) | 2022.03.03 |
---|---|
반복문 이후 비동기 처리 async & await 활용 - 에러 기록 (0) | 2022.02.28 |
객체와 객체 지향 프로그래밍 (0) | 2022.02.23 |
JavaScript 동기와 비동기, 콜백함수 (0) | 2022.02.13 |
호이스팅 (Hoisting) (0) | 2022.02.09 |