JS - 자바스크립트의 객체(Object)를 리터럴 형태로 작성하는 방법 (객체리터럴)

JS, Jquery 함수 선언 방식 모음

1. 객체 리터럴(Object Literal)

객체 리터럴은  “단 하나의 제품”을 직접 조립해서 만든 것이다.

이건 무슨 방식? 

var RENDER = {
  init: function(property) {
    // ...
  }
  // 나머지 속성과 함수들도 여기에 계속 들어갈 수 있음
};

객체 리터럴	직접 {}로 객체 정의	var obj = { name: "Tom", age: 30 };
객체 리터럴 방식	객체 + 함수(메서드)를 같이 정의	var RENDER = { init: function() { ... } };

 

예시로 아래와 같이 객체 리터럴 방식으로 작성 된 js는 

 

개발자 도구에서 아래와 같이 호출이 가능하다

 

 

객체 리터럴 방식에서의 this의미는?

자바스크립트에서 객체 리터럴 방식으로 선언된 메서드 (init) 내부에서의 this는 그 메서드를 호출한 객체를 가리킨다

 

즉, this.b = ...는 RENDER.b = ...랑 같은 의미 이다.

 

객체 리터럴 방식은 클래스?

자바스크립트에서 객체 리터럴 방식이 클래스를 만든 것과 같은가? 에 대한 정답은

❌ 완전히 같지는 않지만
✅ 비슷한 목적(기능 묶기)을 할 수 있다고 볼 수 있다.

객체 리터럴 = 클래스처럼 기능을 "묶는" 수단

const Person = {
  name: 'Tom',
  sayHi: function() {
    console.log(`Hi, I'm ${this.name}`);
  }
};

Person.sayHi(); // "Hi, I'm Tom"

이렇게 쓰면 클래스 없이도 속성과 메서드를 하나의 객체에 묶을 수 있어.
하지만, 여기서 중요한 차이점이 있음 ⬇️

객체 리터럴 vs 클래스

인스턴스 생성	❌ 불가 (항상 동일한 객체 1개만 존재)	✅ 가능 (new Class()로 여러 개 생성)
재사용성	❌ 떨어짐	✅ 높음
상속	❌ 거의 불가능 (직접 구현해야 함)	✅ extends로 간편하게
목적	기능을 하나로 묶기, 네임스페이스 역할	객체 설계 청사진 정의 (틀)
예시	const obj = { ... }	class A { constructor() {} }

 

쉽게 말해 비유하면

• 객체 리터럴: “단 하나의 제품”을 직접 조립해서 만든 것
• 클래스: “공장에서 찍어낼 수 있는 설계도”

그래서 정리하면

🔹 객체 리터럴은 클래스를 흉내낼 수 있지만,
🔹 진짜 클래스를 대체할 수는 없어.
🔹 인스턴스를 여러 개 만들거나 상속이 필요하면 클래스나 생성자 함수를 써야 하고,
🔹 단순히 기능을 하나에 묶고 싶은 경우엔 객체 리터럴이 딱이야.

 

2. 오브젝트 리터럴 사용 전 후 비교

 

 

나는 오른쪽 사진에서 어느 부분이 리터럴을 사용했는지 명확하게 감이 오질 않아 GPT에게 물어보았다.

질문

 

 

답변

좋은 질문이에요.
아래 코드에서 말하는 "오브젝트 리터럴 방식"이라는 표현은 정확히 말하면 자바스크립트의 객체(Object)를 리터럴 형태로 작성했다는 걸 의미해요:

$ch.css({"position": "absolute", "left": 100, "top": 100});

여기서 {"position": "absolute", "left": 100, "top": 100} 이 부분만 따로 보면 이게 **"객체 리터럴"**이에요.

객체 리터럴이란?

중괄호 {}를 이용해서 key-value 쌍을 직접 선언하는 방식이에요.

let obj = {
  key1: "value1",
  key2: "value2"
};

jQuery의 .css() 메서드는 내부적으로 객체 형태의 스타일 정의를 받아서 각각의 CSS 속성을 적용할 수 있게 되어 있어요.

 

---

👇 즉, 이건 객체 리터럴을 인자로 넣은 것:

$ch.css({
  "position": "absolute",
  "left": 100,
  "top": 100
});

---

 

🔁 참고로, 이렇게 하나씩 따로 넣는 것도 가능하지만 비효율적이에요:

$ch.css("position", "absolute");
$ch.css("left", 100);
$ch.css("top", 100);

---

요약:

• { "position": "absolute", "left": 100, "top": 100 } ← 이 부분이 객체 리터럴임
• 자바스크립트에서 {}로 직접 키:값을 쓰면 그게 객체 리터럴 방식임
• jQuery .css()는 이 객체를 받아서 내부에서 .style.position = "absolute" 이런 식으로 적용함

 

 

이해완료!