자바스크립트 공부하기 - 객체 리터럴

✅ JavaScript 객체란?

 

객체를 쉽게 이해하기

📌 예제: 현실 세계의 객체
👉 사람을 표현하는 객체를 만들면 이렇게 생각할 수 있어!

• "이름" → Jane
• "나이" → 25
• "사는 도시" → Toronto

이걸 JavaScript **객체(Object)**로 표현하면?

const person = {
  name: "Jane",
  age: 25,
  city: "Toronto"
};

 

• 키(Key) → name, age, city (정보의 이름)
• 값(Value) → "Jane", 25, "Toronto" (정보의 내용)

 

---

객체 리터럴이란?

그냥 {} 중괄호로 만든 객체야.

const person = {
  name: "Jane",
  age: 25,
  sayHello: function() {
    console.log("Hello!");
  }
};

여기서 person은 객체 리터럴이야. 그냥 {} 안에 key: value 형태로 데이터를 넣으면 바로 객체가 만들어져.

왜 "리터럴"이라고 불러?

👉 **"그냥 있는 그대로 적었다"**는 뜻이야.
예를 들어, const a = 10; 하면 숫자 10을 그냥 적은 거잖아?
그거랑 비슷하게 객체도 new Object() 같은 걸 안 쓰고 그냥 {} 이렇게 바로 만든 거라서 **"객체 리터럴"**이라고 불러!

정리

• {} 안에 key-value 형태로 데이터를 넣으면 바로 객체가 됨
• new Object() 없이 바로 만드는 방법이라서 "리터럴"이라고 함
• 객체 안에 변수(프로퍼티)랑 함수(메소드)도 넣을 수 있음

왜 객체 리터럴을 써 ?

객체 리터럴({})을 사용하면 간단하게 객체를 만들 수 있어. 하지만 생성자 함수를 사용하면 몇 가지 장점이 있어!

---

✔ 작은 객체 몇 개만 만들 때는 객체 리터럴이 좋고, 여러 개의 비슷한 객체를 만들 때는 생성자 함수가 유리해! 😆

 

🔹 생성자 함수의 장점

1️⃣ 재사용성이 높음 (여러 객체를 쉽게 생성 가능)

객체 리터럴 {}을 사용하면 매번 같은 구조를 반복해서 작성해야 해. 하지만 생성자 함수를 사용하면 같은 구조의 객체를 여러 개 쉽게 만들 수 있어.

 

// 생성자 함수
function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person1 = new Person("Jane", 25);
const person2 = new Person("John", 30);

console.log(person1); // { name: "Jane", age: 25 }
console.log(person2); // { name: "John", age: 30 }

 

💡 객체 리터럴로 하면?

const person1 = { name: "Jane", age: 25 };
const person2 = { name: "John", age: 30 };
// 비슷한 구조를 계속 반복해야 함 😭

✔ 생성자 함수를 쓰면 코드를 더 짧고 유지보수하기 쉽게 만들 수 있어!

 

 

2️⃣ 프로토타입 활용 가능 (메모리 절약 가능)

생성자 함수로 만든 객체는 공통 기능을 프로토타입(prototype)에 추가할 수 있어서 메모리를 절약할 수 있어.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 프로토타입에 메서드 추가 (모든 객체가 공유)
Person.prototype.sayHello = function() {
  console.log(`Hi, I'm ${this.name}!`);
};

const person1 = new Person("Jane", 25);
const person2 = new Person("John", 30);

person1.sayHello(); // "Hi, I'm Jane!"
person2.sayHello(); // "Hi, I'm John!"​

 

 

💡 객체 리터럴로 하면?

const person1 = {
  name: "Jane",
  age: 25,
  sayHello: function() {
    console.log(`Hi, I'm ${this.name}!`);
  }
};

const person2 = {
  name: "John",
  age: 30,
  sayHello: function() {
    console.log(`Hi, I'm ${this.name}!`);
  }
};

✔ 객체 리터럴로 하면 sayHello 함수가 각각의 객체에 따로 저장됨 (메모리 낭비)
✔ 생성자 함수를 쓰면 sayHello가 Person.prototype에 저장돼서 모든 객체가 공유함 (메모리 절약)

 

 

3️⃣ 객체 확장이 쉽고 유지보수가 편리함

생성자 함수를 사용하면 객체의 구조를 변경하거나 새로운 기능을 추가하기가 쉬움.

예를 들어, 모든 Person 객체에 새로운 기능 introduce를 추가하고 싶다면?

Person.prototype.introduce = function() {
  console.log(`My name is ${this.name}, and I'm ${this.age} years old.`);
};

person1.introduce(); // "My name is Jane, and I'm 25 years old."
person2.introduce(); // "My name is John, and I'm 30 years old."​

✔ 객체 리터럴을 사용하면 모든 객체를 직접 수정해야 하지만, 생성자 함수는 한 번만 수정하면 됨.

 

🔥 객체 리터럴 {} vs 생성자 함수 function

 

	객체 리터럴  {}	생성자 함수 function
코드 길이	짧고 간단함	코드가 길어질 수 있음
재사용성	하나의 객체만 생성 가능	여러 개의 객체를 쉽게 생성 가능
프로토타입 사용	불가능	가능 (메모리 절약)
객체 확장	모든 객체를 수정해야 함	한 번만 수정하면 됨
유지보수	구조가 단순할 때 좋음	많은 객체를 다룰 때 편리함

✔ 작은 객체 몇 개만 만들 때는 객체 리터럴이 좋고, 여러 개의 비슷한 객체를 만들 때는 생성자 함수가 유리해! 😆

---

 

그만 나와줘 객체...

그리고 찾아본 왜 이렇게 객체를 많이 쓰는지.

---

📌 왜 객체가 자꾸 나올까?

자바스크립트에서 거의 모든 것이 객체이기 때문이야!
✔ 배열도 객체
✔ 함수도 객체
✔ 심지어 console.log도 객체

자바스크립트는 기본적으로 **"객체 기반 언어"**라서 객체가 필수적으로 등장해.

 

📌 자주 헷갈리는 것 정리해 줄게!

이제 하나씩 정리해 볼까?

개념설명예제

개념	설명	예제
객체(Object)	key: value 형태로 데이터를 저장하는 구조	{ name: "Jane", age: 25 }
객체 리터럴	{}를 사용해 직접 객체를 만드는 방식	const person = { name: "Jane", age: 25 };
JSON	객체처럼 보이지만 문자열인 데이터 형식	'{"name": "Jane", "age": 25}' (JSON.parse 필요)
배열(Array)	순서대로 값을 저장하는 리스트 (배열도 객체!)	[1, 2, 3] 또는 [{ name: "Jane" }, { name: "Tom" }]
함수(Function)	실행 가능한 코드 블록 (함수도 객체!)	function sayHi() { console.log("Hi!"); }
메서드(Method)	객체 안에 있는 함수	{ sayHi: function() { console.log("Hi!"); } }
프로퍼티(Property)	객체 안에 있는 변수 (속성)	{ name: "Jane" }에서 name이 프로퍼티

---

 

조금 이해 된 것 같아서, 실무에서 주로 쓰일 것 위주로퀴즈로 알아보자 .. 

 

---

퀴즈 1: 객체 리터럴에서 메서드 축약 표현

const person = {
  name: "Jane",
  greet() {
    return `Hello, ${this.name}!`;
  }
};

console.log(person.greet());

질문: greet() 메서드를 이렇게 축약형으로 정의하는 이유는 무엇일까요? 그리고 이 방법은 어떤 자바스크립트 버전부터 사용 가능한가요?