자바스크립트에서 객체(Object)는 여러 개의 데이터를 하나의 그룹으로 묶어서 관리할 수 있는 중요한 데이터 구조다.
기존에 배운 변수는 한 번에 하나의 값만 저장할 수 있었다.
그러나 객체를 사용하면 관련된 여러 데이터를 하나의 그룹으로 모아서 저장하고, 객체 내부에 이름을 붙여 관리할 수 있다.
자바스크립트에서는 모든 것이 객체라고 할 만큼 객체는 자바스크립트 전반에 걸쳐 있는 개념이기 때문에, 이를 잘 이해하는 것이 중요하다.
객체의 기본 구조 와 프로퍼티(Property)
객체는 중괄호 {}를 사용해 만들 수 있다. 객체 내부에는 키(Key)와 값(Value)를 쌍(Pair)으로 묶어서 저장하는데, 이렇게 묶은 Key-Value 쌍 하나하나를 객체의 속성, 영어로는 프로퍼티(Property)라고 부른다. 예를 들어 아래는 person이라는 객체를 만드는 코드이다.
// 객체(Object) 기본 예제
const person = {
name: "Alice", // 키(Key): name, 값(Value): "Alice"
age: 25, // 키(Key): age, 값(Value): 25
isStudent: true // 키(Key): isStudent, 값(Value): true
};위 코드에서 name, age, isStudent가 각각 키(Key)이고, "Alice", 25, true는 값(Value)이다.
이렇게 묶인 Key-Value 한 쌍이 객체의 하나의 속성이 되며, 이를 프로퍼티(Property)라고 부르는 것이다. 객체는 이러한 키(Key)와 값(Value)의 쌍으로 여러 가지 데이터를 하나의 구조로 묶어서 관리할 수 있게 한다.
Key와 Value의 역할
- Key (키): 프로퍼티의 이름표 역할을 한다. 예를 들어
name,age,isStudent는 각각의 프로퍼티가 어떤 값과 연결되어 있는지를 나타내는 이름표와 같다. - Value (값): 키에 연결된 실제 데이터로, 해당 키가 의미하는 값을 제공한다.
"Alice",25,true가 각 키에 해당하는 값이다.
이처럼 객체 내부에 여러 개의 Key-Value 쌍을 넣어, 다양한 정보를 하나의 구조로 관리할 수 있다.
프로퍼티 네임과 프로퍼티 값
객체의 프로퍼티 네임(Property Name, Key)과 프로퍼티 값(Property Value)에는 각각 규칙과 특징이 있다.
- 프로퍼티 네임(Property Name): 자바스크립트에서는 기본적으로 문자열 타입으로 해석된다. 보통은
name,age,isStudent처럼 문자열로 작성하며, 보통 따옴표는 생략한다.- 첫 글자 규칙: 첫 글자는 반드시 문자, 밑줄(_), 달러 기호($) 중 하나여야 한다.
- 띄어쓰기: 띄어쓰기를 포함할 수 없다.
- 하이픈(-): 하이픈을 사용할 수 없다.
만약 특수문자가 필요하다면, 예를 들어 띄어쓰기 혹은 하이폰(-)를 포함해야 한다면 프로퍼티 네임을 따옴표로 감싸 사용할 수 있다.
// 특수문자를 포함한 객체 프로퍼티 예제
const course = {
"course name": "JavaScript", // Key에 띄어쓰기를 포함
"course-level": "beginner", // Key에 하이픈 포함
"1st chapter": "Introduction", // Key첫 글자에 숫자 포함
};- 프로퍼티 값(Property Value): 자바스크립트의 모든 자료형이 들어갈 수 있다. 문자열, 숫자, 불리언, null, 배열, 객체 등 다양한 값들을 프로퍼티 값으로 지정할 수 있다.
객체 안에 또 다른 객체를 담을 수 있다
객체의 프로퍼티 값에는 또 다른 객체를 넣을 수도 있다. 이렇게 하면 객체 내부에 더 복잡한 구조로 데이터를 저장할 수 있다.
// 중첩된 객체 예제
const student = {
name: "Alice",
age: 25,
course: {
title: "JavaScript", // 중첩 객체의 Key-Value
level: "beginner",
},
};이 예시에서 student 객체 안에 또 다른 객체 course가 포함되었다. 객체 내부에 다른 객체를 포함하면 더 복잡한 데이터 구조를 만들 수 있다.
객체의 자료형 확인하기
객체는 자바스크립트에서 typeof 연산자를 사용해 자료형을 확인할 수 있다. typeof 연산자는 변수의 자료형을 문자열로 반환한다.
// 객체의 자료형 확인
console.log(typeof student); // "object" 출력위 코드에서 typeof student는 "object"를 반환하며, 이 값이 객체임을 알 수 있다.
요약
객체는 여러 데이터를 Key-Value 쌍으로 묶어 저장하는 특별한 구조다.Key-Value 쌍은 데이터에 이름표(키)를 붙여주는 방식이며, 이를 프로퍼티(Property)라고 부른다.프로퍼티 네임(Key)은 보통 문자열이며, 자료형에 상관없이 모든 자료형을 값으로 가질 수 있다.객체는 중첩이 가능해 다양하고 복잡한 데이터 구조를 표현할 수 있다.
