JavaScript 객체 생성 정리

Jean·2025년 7월 8일
0

풀스택 교육

목록 보기
12/28

✅ 객체 생성 방법

🧩 객체 리터럴 (Object Literal)

  • 단일 객체를 만들 때 사용 (일회성 객체에 적합)
  • 프로토타입 사용 불가
  • 싱글톤 객체처럼 사용할 수 있음
    → 한 번만 정의되고 재사용되지 않는 객체
let obj = {
  name: "kim",
  age: 13,
  food: {},
  study: function () {
    console.log("공부 중");
  }
};
  • 접근 방법:
obj.name 
obj["name"] 

obj.study()   // 함수 호출
obj["study"]() //이것도 가능
  • []을 사용하는 경우:
    • 속성명이 문자열로 저장되어 있음
    • 변수로 접근하거나, 공백/숫자/특수문자가 포함될 경우 필요
let key = "full name";
obj[key] = "Kim Minsoo";
  • 속성 삭제 / 추가:
delete obj.age;
obj.eat = function () { console.log("먹는 중"); };
  • 반복문:
for (let key in obj) {
  console.log(key, obj[key]);
}
  • 단점:
    • 동일한 구조의 객체를 여러 개 만들기 어렵다
    • 메서드가 중복되면 메모리 낭비 (프로토타입을 사용할 수 없음)

🦋 생성자 함수 (Constructor Function)

  • 동일한 구조의 객체 여러 개 생성할 때 사용
  • 공통 메서드는 prototype에 정의하여 메모리 절약!
  • PascalCase 사용
function Person(name, age) {
  this.name = name;
  this.age = age;
}

const p1 = new Person("Kim", 25);
  • new 키워드 역할:
    • 비어 있는 객체 생성
    • this가 새로 만든 객체를 가리킴
    • 생성자 함수 내부 코드 실행 후 this 반환

🍿 프로토타입 메서드 정의

  • 공통 메서드를 prototype에 정의하면 모든 인스턴스가 공유
  • 메모리 절약 효과 (Java의 static은 클래스에 귀속, JS의 prototype은 인스턴스끼리 공유)

스크린샷 2025-07-03 오후 4.45.07.png

Person.prototype.sayHello = function () {
  console.log(`Hi, I'm ${this.name}`);
};

p1.sayHello(); // Hi, I'm Kim

🔍 헷갈려요! 정적 멤버 vs 프로토타입

구분설명
정적 멤버 (static)클래스 자체에 귀속. 인스턴스에서 호출 불가.
프로토타입인스턴스가 공유하는 메서드 정의. 메모리 효율적.

JavaScript에서 static 키워드는 클래스 문법에서 사용 가능:

class Animal {
  static info() {
    console.log("This is a static method.");
  }
}
Animal.info();       // ✅ 가능
new Animal().info(); // ❌ 오류

📎 결론

  • 한 번만 쓰는 객체 → 객체 리터럴
  • 여러 개 필요 → 생성자 함수 + 프로토타입
  • ES6 이상에서는 class를 사용하면 더 명확
profile
햇내기 개발자 지망생

0개의 댓글