Reference Type
참조 데이터 타입이란, 원시 데이터 타입이 할당될 때 변수에 값(value) 자체가 담기는 것과 달리, 보관하는 곳의 주소(reference)가 담기는 데이터 타입을 의미한다.
원시 데이터 집합으로, 배열(Array)이나 객체(Object)가 대표적.
고정된 크기를 가지지 않고, 주소만을 가지므로 동적으로 크기가 변하는 데이터를 보관할 수 있다.
1. 배열
데이터 타입의 집합으로, 인덱스(index)를 사용해 순차적으로 접근할 수 있는 데이터 타입
const arrN = [1, 2, 3];
const arrS = ['Hello', 'world'];
console.log(arrN);
console.log(arrS);
배열을 만들기 위해서는 위 코드와 같이 [ ] 대괄호 안에 요소들을 쉼표로 구분하여 넣는다. 따라서 예제에서 arrN은 숫자 데이터 타입의 집합으로 구성된 배열, arrS는 문자열 데이터 타입의 집합으로 구성된 배열이 된다.
console.log(arrN[0]); // 1 출력
console.log(arrS[1]); // world 출력
1이 아닌 0부터 시작한다.
2. 객체
여러 종류의 데이터 타입의 집합.
각각의 요소는 키(key)와 값(value)로 구성되며, 이러한 요소(키와 값의 쌍)를 프로퍼티(property)라 부른다.
const user = {
id: 'abc',
pass: 123123
};
console.log(user);
객체를 만들기 위해서는 { } 중괄호 안에 키와 값으로 이루어진 프로퍼티들을 쉼표로 구분하여 작성한다.
이때 객체의 키는 항상 문자 또는 심벌 데이터 타입이어야 한다.
console.log(user.id);
console.log(user['password']);
프로퍼티의 값에 접근하기 위해서는 위와 같이 . 점 표기법(Dot Notation) 또는 [' '] 대괄호 표기법(Square Bracket Notation)을 사용한다.
3. Set, Map
Set과 Map은 실제 데이터를 다룰 때 배열과 객체만으로는 한계가 있던 복잡한 데이터를 다루는 경우에 활용할 수 있도록 ES6 이후 도입된 새로운 데이터 구조이다.
1) Set
Set은 (배열과 같은) 데이터의 집합.
중복에 대한 제한이 없는 배열과 달리 중복을 허용하지 않는다.
다루려는 데이터가 중복을 허용하지 않는 경우, 배열을 사용하면 데이터에 중복이 있는지 일일이 체크하고, 제거하는 처리가 필요하지만 Set을 사용하면 아예 중복된 값은 들어가지 않기 때문에 이와 같은 처기라 필요하지 않다.
(예: 원격 수업 출석 체크, 강의에 여러 번 다시 접속해도 중복 저장X, 한 번만 저장)
const set = new set();
add.set(1);
add.set(2);
add.set(1); //중복 등록 입력하더라도 허용X
console.log(set); //결과 값은 Set{1, 2}가 됨
Set은 new set( )을 사용해 생성할 수 있으며, add( )라는 함수를 사용해 새로운 값을 추가할 수 있다.
2) Map
Map은 객체와 같이 키와 값을 연결하는 방식의 데이터 집합으로, 객체와 동일한 콘셉트로 디자인되었지만, 다음과 같은 차이점을 가진다.
객체
- 키값으로 문자, 심벌 타입만 허용
- 정렬에 관여하지 않음
- 순회를 위해서 키값을 통해 배열을 얻어 배열을 순회
- 크기를 알기 위해서는 키값 사용 등 직접 판별해야 함
Map
- 키값으로 모든 데이터 타입 허용
- 삽입된 순서대로 정렬됨
- map.size로 크기를 바로 알 수 있음
- 맵 자체로 순회할 수 있음
const map = new Map();
map.set('Hello', 'World!');
map.set(123, 456);
console.log(map);
Map은 위 코드 예제와 같이 new Map()을 사용해 생성할 수 있으며, set()이라는 함수를 사용해 새로운 프로퍼티(키와 값의 쌍)를 추가할 수 있다. 이때 키값은 모든 데이터 타입이 허용되므로, 예제와 같이 Hello(문자열)와 123(숫자)를 문자열로 변환하지 않고도 키로 사용할 수 있다.
'코딩 > JavaScript 문법' 카테고리의 다른 글
| [JavaScript] 연산자 (4) | 2025.05.06 |
|---|---|
| [JavaScript] 문법 기초 1 (0) | 2025.05.05 |