JavaScript Data Type (2)

안녕하세요. 오늘은 자바스크립트 기초 개념 중 자료형(Data Type) 종류 중 

두 번째 참조 자료형(Reference Type)에 대해 알아볼게요.

 

 

 

참조 자료형(Reference Type)

 

참조 자료형은 값이 저장된 메모리 주소(참조)를 저장해요.

 

즉, 변수가 직접 값을 담는 것이 아니라 객체(Object)가 위치한 주소를 가리키는 구조예요.

 

기본 자료형은 하나의 값 자체를 저장하니 잘 비교해 주세요.

 

 

 

참조 자료형의 종류

 

참조 자료형은 객체의 일반 객체, 배열(Array), 함수(Function)가 있고,

 

추가적인 객체 타입으로 날짜(Date), 정규표현식(RegExp), Map, Set 등이 있어요.

 

 

1. 객체 (Object)

 

객체는 여러 데이터를 키(key)와 값(value) 쌍으로 저장하는 구조로 중괄호 {}를 사용해 만들어요.

 

키(key)는 문자열로, 값(value)은 어떤 자료형이든 올 수 있어요.

// 객체 선언
let person = {
  name: '홍길동',
  age: 25,
  hobby: '코딩',
  introduce: function() {
    console.log(`안녕하세요, 저는 ${this.name}입니다.`);
  }
};

// 객체 값 접근
console.log(person.name);   // '홍길동'
console.log(person['age']); // 25

// 메서드 실행
person.introduce(); // "안녕하세요, 저는 홍길동입니다."

// 객체 속성 추가
person.job = '프론트엔드 개발자';
console.log(person.job); // '프론트엔드 개발자'

// 속성 삭제
delete person.hobby;
console.log(person);

 

 

2. 배열 (Array)

 

배열은 여러 데이터를 순서대로 저장하는 리스트 형태의 객체예요.

 

대괄호 []를 사용해서 만들고, 인덱스(index)를 통해 값에 접근해요. 추가적으로 인덱스는 0부터 시작해요.

let fruits = ['사과', '바나나', '포도'];

console.log(fruits[0]); // '사과'
console.log(fruits[2]); // '포도'

// 배열 길이
console.log(fruits.length); // 3

// 배열 요소 추가
fruits.push('오렌지');
console.log(fruits); // ['사과', '바나나', '포도', '오렌지']

// 마지막 요소 제거
fruits.pop();
console.log(fruits); // ['사과', '바나나', '포도']

// for문으로 순회
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

 

 

3. 함수 (Function)

 

함수는 특정 작업을 수행하기 위한 코드의 묶음으로 자바스크립트에서는 함수도 하나의 객체로 적용해요.

 

변수에 저장하거나, 다른 함수의 인자로 전달할 수 있어요.

// 기본 함수 선언식
function add(a, b) {
  return a + b;
}

console.log(add(3, 5)); // 8

// 함수 표현식
let multiply = function(x, y) {
  return x * y;
};
console.log(multiply(2, 4)); // 8

// 화살표 함수 (Arrow Function)
let greet = (name) => `안녕하세요 ${name}님`;
console.log(greet('홍길동')); // "안녕하세요 홍길동님"

 

 

4. 날짜 객체 (Date)

 

날짜객체는 날짜와 시간을 다룰 수 있는 내장 객체예요.

let now = new Date(); // 현재 날짜와 시간
console.log(now);

console.log(now.getFullYear()); // 연도
console.log(now.getMonth() + 1); // 월 (0부터 시작)
console.log(now.getDate()); // 일
console.log(now.getHours()); // 시

 

 

5. 정규 표현식 (RegExp)

 

정규 표현식은 문자열에서 특정 패턴을 찾거나 검사할 때 사용해요.

let pattern = /[0-9]+/; // 숫자가 하나 이상 포함된 패턴
console.log(pattern.test('abc123')); // true
console.log(pattern.test('hello'));  // false

 

 

6. Map & Set

 

Map은 키와 값의 쌍으로 저장하는 객체로 Object와 다르게 모든 자료형을 키로 사용할 수 있어요.

let map = new Map();
map.set('name', '이승아');
map.set('age', 25);

console.log(map.get('name')); // '이승아'
console.log(map.has('age'));  // true

 

Set은 중복을 허용하지 않는 값들의 집합이에요.

let set = new Set([1, 2, 3, 3]);
console.log(set); // Set(3) {1, 2, 3}

set.add(4);
set.delete(2);
console.log(set.has(2)); // false

 

 

 

참조 자료형의 중요한 특징

 

첫 번째로 값이 아닌 주소(참조)를 저장해요.

let a = { name: '김사부' };
let b = a;

b.name = '홍길동';
console.log(a.name); // '홍길동'  ← 같은 객체 참조

위의 예시를 보시면 a와 b는 같은 객체를 가리키므로, 한쪽을 수정하면 다른 쪽도 영향이 받아요.

 

두 번째로 비교 연산 시 주의점이에요.

let obj1 = { value: 10 };
let obj2 = { value: 10 };

console.log(obj1 == obj2);  // false
console.log(obj1 === obj2); // false

두 객체의 내용은 같지만, 참조 주소가 다르기 때문에 서로 다른 객체로 인식이 돼요.

 

 

아래는 참조 자료형을 표로 정리해 봤어요.

 

자료형	예시	설명
Object	{name: '홍길동', age: 25}	키-값 쌍으로 데이터 저장
Array	['사과', '바나나']	순서가 있는 데이터 리스트
Function	function add(x, y){}	특정 동작을 수행하는 코드 블록
Date	new Date()	날짜 및 시간 데이터
RegExp	/[0-9]+/	문자열 패턴 검색용
Map	new Map()	키-값 저장, 키 중복 불가
Set	new Set()	중복 없는 값의 집합

 

 

 

여기까지 참조 자료형을 알아봤는데요.

 

참조 자료형을 사용할 때 값 비교나 복사 시 주소 공유로 인한 부작용을 주의해야 할 것 같아요.