Skip to content

객체 (Object)

자바스크립트에서 객체는 비원시 타입 자료형으로, 여러 개의 데이터를 키:값(Key-Value) 쌍으로 묶어 저장할 수 있는 자료구조이다. 객체는 변수와 배열과 달리 속성(property)메서드(method)를 가질 수 있어, 데이터와 동작을 함께 표현할 수 있다.

자바스크립트는 객체 기반 언어로, 함수도 객체이며 배열, 날짜(Date), 정규표현식(RegExp), 에러(Error) 등 대부분의 복합 데이터는 모두 객체로 표현된다. 실제 웹 개발에서도 사용자 정보, 설정값, 서버 응답 데이터 등 다양한 데이터를 객체 형태로 다루는 경우가 매우 많다.

객체의 값에는 문자열, 숫자, 배열, 함수 등 어떤 데이터 타입도 올 수 있으며, 순서가 중요한 배열과는 달리 객체는 이름(키)을 기준으로 값을 구분한다. 이러한 구조 덕분에 관련 있는 데이터를 하나의 단위로 효율적으로 관리할 수 있다.

less
객체 (Object)
├── 속성 (property)
│   ├── key : value 구조
│   ├── 다양한 값 타입
│   ├── 속성 사용 방법
│   └── 프로퍼티의 추가/수정/삭제
├── 메서드 (Method)
└── 내장 객체
    └── Date 객체


객체 생성 방법

less
객체 생성 방법
├── 생성자 함수 방식 (Constructor Function)
└── 객체 리터럴 방식 (Object Literal)

(1) 생성자 함수 방식 (Constructor Function)

new 키워드를 사용해 생성자 함수를 호출하면, 객체를 생성할 수 있다. 이 생성자 함수는 자바스크립트에서 기본으로 제공되는 Object()와 같은 내장 생성자 함수일 수도 있고, 개발자가 직접 정의한 사용자 생성자 함수일 수도 있다.

내장 생성자 함수, Object()

js
let obj = new Object(); // 빈 객체 생성
console.log(obj); // {}

사용자 정의 생성자 함수 사용

js
function Dog() {
  this.sound = "멍멍";
}

const myDog = new Dog();
console.log(myDog); // { sound: '멍멍' }

(2) 객체 리터럴 방식 (Object Literal)

객체 리터럴 방식은 {} 중괄호를 사용하여 객체를 직접 정의하는 방식으로, 가장 많이 사용되는 객체 생성 방식이다.

js
let obj = {};
console.log(obj); // {}

속성 (property)

less
속성 (property)
├── key : value 구조
├── 다양한 값 타입
├── 속성 사용 방법
│   ├── 점 표기법 (dot notation)
│   ├── 괄호 표기법 (bracket notation)
│   └── 괄호 표기법을 이용한 동적 키 접근
└── 프로퍼티의 추가/수정/삭제

객체의 프로퍼티란, 객체의 내부에 정의된 키:값(Key-Value) 형태의 데이터이다. 이러한 속성을 통해 객체는 다양한 정보를 표현할 수 있다.

  • 객체에서 각각의 key는 고유해야 하며, 이를 통해 해당 value에 접근할 수 있다.
  • value에는 문자열, 숫자, 불리언, 배열, 함수 등 모든 타입의 값을 사용할 수 있다.
  • 객체는 여러 개의 속성을 가질 수 있으며, 각 속성은 쉼표로 구분한다.

(1) key : value 구조

js
let person = {
  name: "바켸빈", // 객체의 프로퍼티
  age: 10, // 객체의 프로퍼티
};

console.log(person); // {name: "바켸빈", age: 10}
  • 위 예시에서 person 객체는 name과 age라는 두 개의 속성을 가진다.
  • 객체의 프로퍼티의 값을 찾을 때는 key를 기준으로 접근할 수 있어 고유해야 한다.

(2) 다양한 값 타입

js
let person = {
  name: "바켸빈",
  age: 10,
  phone: undefined,
  etc: function () {
    console.log("메롱 ");
  },
};
  • 객체는 여러 개의 속성을 가질 수 있으며, 값에는 어떤 자료형도 사용할 수 있다. 단, 값을 찾을 때는 key를 기준으로 하므로, 각 key는 고유해야 한다.

(3) 속성 사용 방법

객체 프로퍼티의 값을 꺼내 사용할 때에는 점 표기법을 많이 사용하지만, 키 값들이 고정되어 있지 않거나 함수의 매개변수에 따라 동적으로 바뀌는 경우에는 괄호 표기법을 활용한다.
즉, 점 표기법(obj.key)은 고정된키 이름에만 사용 가능하며, 괄호 표기법(obj[key])은 문자열, 변수, 표현식 등 동적인 키 값을 사용할 수 있어 유연하다.

점 표기법 (dot notation)

js
let person = {
  name: "바켸빈",
  age: 20,
  pet: "dog",
};

console.log(person.name); // 바켸빈
console.log(person.age); // 20
console.log(person.pet); // dog
  • 점 표기법은 객체 뒤에 .점을 붙이고, 접근하고자 하는 속성의 key를 직접 작성하여 해당 value를 가져오는 방식이다.

괄호 표기법 (bracket notation)

js
let person = {
  name: "바켸빈",
  age: 20,
  pet: "dog",
};

console.log(person["name"]); // 바켸빈
console.log(person["age"]); // 20
console.log(person["pet"]); // dog
  • 괄호 표기법은 객체 이름 뒤에 []대괄호를 붙이고, 그 안에 문자열 형태의 키 값을 넣어 속성에 접근하는 방식이다.
  • 문자열은 큰따옴표나 작은따옴표로 감싸야 하며, 변수나 표현식도 사용할 수 있다는 점이 큰 장점이다.

괄호 표기법을 이용한 동적 키 접근

변수를 이용한 동적 키 접근

js
let key = "name";
let person = {
  name: "바켸빈",
};

console.log(person[key]); // "바켸빈"
  • person[key]는 변수 key에 저장된 "name"을 참조해서 person["name"]과 같은 효과를 낸다.

매개변수를 통한 동적 접근

js
let person = {
  name: "바켸빈",
  age: 20,
  pet: "dog",
};

const getValue = (key) => {
  console.log(person[key]);
};

getValue("name"); // 바켸빈
  • 위 예시는 매개변수 key에 따라 person 객체의 속성 값에 동적으로 접근하는 getValue 함수이다.
  • 이처럼 괄호 표기법은 키가 상황에 따라 달라지는 동적 접근이 필요한 경우에 매우 유용하다.

(4) 객체 프로퍼티 추가/수정/삭제

추가

js
let person = {
  name: "바켸빈",
};

// 점 표기법으로 phone 프로퍼티 추가
person.phone = "010-0000-0000";

// 괄호 표기법으로 height 프로퍼티 추가
person["height"] = 160;

console.log(person);
// {name: "바켸빈", phone: "010-0000-0000", height: 160}
  • 점 표기법(person.key): 고정된 키 이름으로 프로퍼티를 추가할 수 있다.
  • 괄호 표기법(person["key"]): 문자열이나 변수로 키를 정의해 프로퍼티를 추가할 수 있다.

수정

js
let person = {
  name: "바켸빈",
  age: 20,
  pet: "dog",
};

// 점 표기법으로 age 프로퍼티 수정
person.age = 30;

// 괄호 표기법으로 pet 프로퍼티 수정
person["pet"] = "cat";

console.log(person);
// {name: "바켸빈", age: 30, pet: "cat"}
  • 객체의 기존 속성은 같은 키 이름으로 새로운 값을 할당하면 덮어써져 수정된다.
  • 점 표기법과 괄호 표기법 모두 수정 시 동일하게 사용할 수 있다.

상수로 선언된 객체 프로퍼티 수정

js
const person = {
  name: "바켸빈",
  age: 20,
  pet: "dog",
};

person.age = 30;
person["pet"] = "cat";

console.log(person);
// {name: "바켸빈", age: 30, pet: "cat"}
  • const로 선언된 객체라도 프로퍼티의 값을 수정하는 것은 가능하다.
  • 일반적으로 const는 상수이므로 값을 변경할 수 없다고 배우지만, 이는 변수에 저장된 참조값(메모리 주소) 자체를 변경할 수 없다는 뜻이다.
  • 객체는 생성될 때 고유한 참조 ID를 가지며, const는 이 참조 자체를 고정할 뿐, 객체 내부의 속성(property)은 자유롭게 수정할 수 있다.
  • 즉, 속성 값을 수정하는 것은 객체의 참조를 변경하는 것이 아니므로, const로 선언된 객체에서도 속성 수정이 가능하다.

객체의 고유한 참조 ID까지 변경하려 하면 오류 발생

js
const person = {
  name: "바켸빈",
  age: 20,
  pet: "dog",
};

person = {
  pet: "cat",
};

// TypeError: Assignment to constant variable.
  • 위와 같이 person 객체 자체를 새로운 객체로 덮어쓰려고 하면, 객체의 고유한 참조(메모리 주소)를 변경하는 행위가 되므로 오류가 발생한다.
  • const로 선언된 변수는 참조값 자체가 고정되기 때문에, 새로운 객체를 할당하려 하면 TypeError가 발생한다.
  • 반면, 객체의 프로퍼티 값을 수정하는 것은 참조를 바꾸는 것이 아니라 참조된 객체 내부의 값을 바꾸는 것이므로 정상적으로 작동한다.

참조(Reference)란 무엇일까?

참조란, "값이 저장된 메모리의 주소(위치)"를 의미한다.

자바스크립트에서 객체와 배열은 참조 타입(Reference Type)으로 분류되며, 이는 변수에 데이터 자체가 아닌, "데이터가 저장된 메모리 주소(참조값)"를 저장한다는 뜻이다.

즉, 객체나 배열을 변수에 할당하면, 변수는 해당 데이터가 "위치한 메모리 주소(참조값)"을 기억하게 된다. 하나의 객체를 여러 변수가 참조하면, 한쪽에서 변경한 내용이 다른 쪽에도 영향을 준다.


💡 정리하면,
  • 참조란? 데이터가 저장된 위치(주소)를 가리키는 것
  • 참조 타입이란? 변수에 데이터가 아닌 주소(참조값)를 저장하는 타입
  • 그래서 객체/배열은 변수끼리 공유가 일어나며, 값이 함께 바뀜

삭제

js
const person = {
  name: "바켸빈",
  age: 20,
  pet: "dog",
};

// 점 표기법으로 삭제
delete person.pet;

// 괄호 표기법으로 삭제
delete person["age"];

console.log(person); // {name: "바켸빈"}
  • delete 키워드를 사용하면 객체의 특정 프로퍼티를 삭제할 수 있다.
  • 점 표기법과 괄호 표기법 모두 삭제 시에 동일하게 사용할 수 있다.

메서드 (Method)

메서드는 객체의 프로퍼티 값이 함수인 경우를 말하며, 객체 내부에 정의된 기능이나 동작을 수행하는 함수이다. 메서드는 객체가 가지고 있는 데이터를 활용하거나 조작할 수 있도록 도와주며, this 키워드를 사용해 객체 내부의 다른 프로퍼티에 접근할 수 있다.

js
const person = {
  name: "바켸빈",
  age: 20,
  pet: "dog",
  print: function () {
    console.log("hello world");
  },
};

// 점 표기법을 사용해 메서드 호출
person.print(); // hello world

// 괄호 표기법을 사용해 메서드 호출
person["print"]; // hello world
  • person 객체는 세 개의 속성name, age, pet과 하나의 메서드print를 가진 객체이다.
  • 점 표기법과 괄호 표기법 모두 메서드 호출이 가능하며, 결과는 동일하다.

this

객체의 메서드에서 this 키워드를 사용하면, 해당 메서드를 호출한 객체 자신을 참조할 수 있다.
즉, this는 메서드가 속한 객체를 가리키며, 메서드가 호출될 때 자동으로 그 호출 주체인 객체를 참조하게 된다.

js
const person = {
  name: "바켸빈",
  age: 20,
  pet: "dog",
  print: function () {
    console.log(`제 이름은 ${this.name}입니다.`);
  },
};

person.print(); // 제 이름은 바켸빈입니다.
  • this는 person 객체를 가리키므로, this.name은 key값이 name인 프로퍼티의 값이 할당되어 print라는 메서드를 호출한 결과 "제 이름은 바켸빈입니다."라는 문장이 출력된다.

객체 메서드에서 function을 사용하는 이유

자바스크립트에서 this는 어떻게 선언되었는가에 따라 다르게 동작한다.

화살표 함수는 자신만의 this를 가지지 않고, 함수가 정의된 위치의 상위 스코프에서 this를 가져온다. 그 결과, 객체의 메서드를 화살표 함수로 정의하면 this는 메서드를 호출한 객체를 가리키지 못하고, 대부분의 경우 전역 객체(window) 또는 undefined를 가리키게 된다. 이로 인해 객체 내부의 다른 프로퍼티에 접근할 수 없게 되는 문제가 발생한다.

💡 this 자세히 알아보기


내장 객체

(1) Date

Date는 날짜와 시간을 다루기 위한 자바스크립트의 내장 객체이다. 현재의 날짜와 시간, 혹은 특정 날짜와 시간을 생성하고 조작할 수 있다.

js
// YYYY-MM-DD

let birth = new Date("1996-04-07");

console.log(birth);
// Sun Apr 07 1996 09:00:00 GMT+0900 (한국 표준시)
  • Date 객체에 특정 날짜를 전달하면, 해당 날짜의 연도, 월 일, 요일을 알 수 있다.
  • 날짜만 넣으면 시간은 00:00:00(자정)으로 자동 설정된다.
  • 다만, 09:00:00으로 출력된 이유는 타임존(Timezone) 때문이다. 자바스크립트가 입력된 날짜를 UTC(협정 세계시) 기준 자정(00:00:00)으로 해석하고, 이후 브라우저가 실행되는 컴퓨터 시간대(GMT+9, 한국 표준시)를 적용해서 출력하기 때문이다. (한국 표준시는 UTC보다 9시간 빠르다)
js
let nowDate = new Date();
console.log(nowDate);
// Sat Jun 21 2025 00:13:27 GMT+0900 (한국 표준시)
  • Date 객체에 아무런 값도 전달하지 않으면 오늘의 연도, 월 일, 요일, 시간이 출력된다.

Date의 메서드

날짜

js
let nowDate = new Date();
let month = nowDate.getMonth();
let date = nowDate.getDate();
let day = nowDate.getDay();

console.log(`${month}월 ${date}일 ${day}요일`);
// 5월 21일 6요일
js
const week = ["일", "월", "화", "수", "목", "금", "토"];
let nowDate = new Date();
let month = nowDate.getMonth() + 1;
let date = nowDate.getDate();
let day = nowDate.getDay();

console.log(`${month}월 ${date}일 ${week[day]}요일`);
// 6 월 21일 토요일

getMonth

  • Date 객체에서 월(0~11)을 반환하는 메서드
  • Date 객체에서는 반환값은 0부터 시작하므로, 1월을 0, 12월을 11로 표기한다.
  • 따라서 getMonth()의 결과를 사람이 이해하는 월로 표현하려면, 결과값에 1을 더해야 한다.

getDate

  • 해당 날짜의 일(1~31) 을 반환하는 메서드
  • getMonth()와는 달리, getDate()는 우리가 흔히 사용하는 날짜(1일부터 시작)를 그대로 반환한다.

getDay

  • 특정 날짜의 요일 정보를 숫자로 반환하는 메서드
  • 일요일부터 토요일까지 순서대로 0 부터 6까지의 숫자로 요일을 반환하기 때문에 우리가 익숙한 요일 이름으로 나타내고 싶다면, 요일 이름이 담긴 배열과 함께 사용해야 한다.

시간

js
let nowDate = new Date();
let hours = nowDate.getHours();
let minutes = nowDate.getMinutes();

console.log(`${hours}:${minutes}`);

// 현재 시간 출력

getHours

  • Date 객체에서 시간(0~23) 을 반환한다.

getMinutes

  • Date 객체에서 분(0~59) 을 반환한다.

getSeconds

-Date 객체에서 초(0~59) 를 반환한다.