[JavaScript(9)] 객체, 프로퍼티와 메서드

 

 

안녕하세요~  경제적 자유입니다.

오늘은 JavaScript의 객체를 리뷰해보려고 합니다.

 

OverView

---

 

객체는 쉽게 말하면 여러 정보를 하나의 상자에 담아두는 자료구조라고 볼 수 있습니다.

예를 들어 사람 한 명을 표현할 때 이름, 나이, 직업, 취미를 각각 따로 변수로 만들 수도 있지만, 객체를 사용하면 하나로 묶어서 관리할 수 있습니다.

 

let person = {
  name: "상구",
  age: 20,
  job: "student",
  hobby: "coding",
};

이렇게 하면 person이라는 하나의 객체 안에 상구라는 사람의 정보가 정리됩니다.

 

그리고 오늘 같이 볼 중요한 개념이 하나 더 있습니다.

바로 객체 복사입니다.

 

객체는 원시값처럼 단순히 값 자체가 복사되는 것이 아니라, 기본적으로 참조를 통해 다뤄집니다.

그래서 객체를 복사할 때는 “진짜 새 객체가 만들어진 건지”, 아니면 “같은 객체를 같이 바라보고 있는 건지”를 구분해야 합니다.

 

추가로 더 자세히 공부하고 싶다면 아래 MDN 문서를 참고해보세요.

• 참고 링크: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

 

개념 설명

---

 

 

1. 객체란?

 

객체는 key와 value를 한 쌍으로 묶어서 저장하는 자료형입니다.

function introduce(사람) { 
	return `${사람.name}는 ${사람.age}살이고, 현재 ${사람.job}입니다.`; 
}

let user = {
  name: "상구",
  age: 20,
};

 

여기서 name과 age는 프로퍼티 이름, 즉 key입니다.

"상구"와 20은 각각의 key에 연결된 값, 즉 value입니다.

 

여기서 introduce(사람)의 사람은 parameter, 매개변수입니다.

그리고 introduce(user)에서 전달한 user은 argument, 인수입니다.

---

 

2. new Object()와 객체 리터럴

 

 

객체를 만드는 방법은 크게 두 가지가 있습니다.

 

let user1 = new Object();
let user2 = {};

 

둘 다 객체를 만들 수 있습니다.

 

하지만 일반적으로는 객체 리터럴인 {}를 더 많이 사용합니다.

 

---

 

3. 프로퍼티란?

 

프로퍼티는 객체 안에 들어 있는 key-value 한쌍입니다.

 

프로퍼티 값에는 다양한 자료형이 들어갈 수 있습니다.

let user = {
  name: "상구",
  age: 28,
  isStudent: true,
  skills: ["HTML", "CSS", "JavaScript"],
  address: {
    city: "Seoul",
    country: "Korea",
  },
};

 

객체 안에는 문자열, 숫자, 불린값, 배열, 또 다른 객체까지 들어갈 수 있습니다.

 

• 프로퍼티 추가 , 수정, 삭제하기

let user = { 
	name: "상구", 
}; 

user.age = 28; // 프로퍼티 추가
user.name "철수" // 프로퍼티 수정
delete user.name; //프로퍼티 삭제

 

 

• 단축 프로퍼티

단축 프로퍼티(property shorthand)는 객체의 key 이름과 변수 이름이 같을 때 코드를 짧게 쓰는 문법입니다.

 

변수의 이름과 프로퍼티 이름이 동일한 경우 사용할 수 있습니다.

function createPost(title, writer, content) { 
	return { 
    	title, // title: title 대신 사용가능
        writer, 
        content, 
        createdAt: "2026-05-31", 
    }; 
 } 
 
 let post = createPost("객체 정리", "상구", "오늘은 객체를 공부했다."); 
 
 console.log(post);

 

 

 

 

---

4. 표기법란?

 

• 점 표기법

점 표기법(dot notation)은 객체의 프로퍼티에 접근하는 가장 기본적인 방법입니다.

 

let product = { 
    name: "노트북",
    price: 1500000, 
}; 

console.log(product.name); // 노트북
console.log(product.price); // 1500000

 

• 대괄호 표기법

대괄호 표기법(bracket notation)은 객체["프로퍼티이름"] 형태로 프로퍼티에 접근하는 방법입니다.

let user = {
  name: "상구",
  age: 28,
};

console.log(user["name"]); // 상구
console.log(user["age"]); // 28

 

---

5. in 연산자란?

 

in 연산자는 객체 안에 특정 프로퍼티가 존재하는지 확인할 때 사용합니다.

//문법
"key" in object

 

let user = {
  name: "상구",
  age: 28,
};

console.log("name" in user); // true
console.log("job" in user); // false

 

 

• for...in 반복문이란?

for...in은 객체의 key를 순회할 때 주로 사용합니다.

let user = {
  name: "상구",
  age: 28,
  job: "개발 공부 중",
};

for (let key in user) {
  console.log(key);
} 

// name
// age
// job

 

 

• for...of문이란?

for...of는 배열 같은 iterable 객체의 값을 순회할 때 주로 사용합니다.

let fruits = ["apple", "banana", "orange"]; 

for (let fruit of fruits) {
	console.log(fruit);
}

 

객체를 순회할 때는 보통 for...in 또는 Object.keys(), Object.values(), Object.entries() 같은 메서드를 함께 공부하면 좋습니다.

 

 

---

6. 객체 안의 함수, 메서드란?

객체 안에 들어 있는 함수를 보통 메서드(method) 라고 부릅니다.

let user = {
	name: "상구", 
    sayHello() { 
    	console.log("안녕하세요!"); 
    }, 
}; 

user.sayHello(); // 안녕하세요!

 

• 객체의 데이터를 메서드에서 사용하기(this)

let user = {
  name: "상구",
  sayHello() {
    console.log(`안녕하세요, 저는 ${this.name}입니다.`);
  },
};

user.sayHello(); // 안녕하세요, 저는 상구입니다.

 

마무리

---

 

오늘은 JavaScript의 객체(Object)에 대해 정리해봤습니다.

 

객체는 관련 있는 데이터를 하나로 묶어서 관리하는 자료구조입니다. 객체와 프로퍼티 그리고 메서드 까지 각각 많은 단어들을 공부했고 알아보았습니다.

 

객체는 특히 배열, 함수, DOM, API등 앞으로 공부할 때 굉장히 많이 나오는 개념이기 때문에 다시 한번 더 개념을 상기시키는 것이 의미가 있었던 것 같습니다.

 

공부 화이팅!!