[javascript] 객체 1 / 객체 기본, 특징, 객체 선언, 메서드 정의

객체

• 객체는 키(key)와 값(value)의 쌍으로 구성된 속성을 가진 데이터 타입
• 키(key): 보통 문자열(String) 또는 심볼(Symbol)
• 값(value): 숫자, 문자열, 불리언, 함수, 배열, 다른 객체 등 모든 자료형이 가능
• 속성(property) : 키(key) + 값(value)의 쌍을 의미
• 데이터를 {}로 감싸 객체를 정의
• 데이터 타입의 제한이 없음
• 키를 사용하여 데이터를 불러오거나 값을 변경할 수 있음
• const로 선언할 경우 객체 자체를 변경할 수는 없으나, 객체 안의 프로퍼티나 메서드는 변경이 가능
• 객체의 키와 속성 값이 같을 경우 하나로 입력가능

특징

특징	설명
동적(Dynamic)	객체는 생성 후에도 속성을 자유롭게 추가, 수정, 삭제할 수 있음
참조 타입(Reference Type)	객체는 메모리에 저장된 참조(주소)를 통해 접근됨 따라서 변수 간 대입 시 값 복사가 아니라 참조 공유가 일어남 const a = { x: 1 }; const b = a; b.x = 99; console.log(a.x); // 99 (같은 객체 참조)
키-값 구조	키는 고유하며, 값은 어떤 자료형이든 올 수 있음
메서드 포함 가능	함수도 값으로 취급되어 객체에 포함되면 ‘메서드’라 부름
프로토타입 기반 상속	다른 객체를 상속받아 속성과 메서드를 공유할 수 있음
속성 접근 방법	obj.key 또는 obj["key"]로 접근 가능
내장 객체 제공	JS는 Object, Array, Date, Math 등 다양한 내장 객체를 기본 제공

---

객체 선언

• {} 중괄호 안에 키: 값 쌍을 쉼표로 구분해 작성
• key는 식별자 또는 문자열 가능 → 식별자로 불가능한 경우 "문자열"로 작성
• 객체 생성 시 new Object(), new 생성자함수() 방식 사용 가능
• 변수 값을 key로 쓰려면 [] 사용 (계산된 프로퍼티)
• ES6부터는 프로퍼티 축약 문법으로 변수명만 써도 됨

---

객체 선언 방법

1. 객체 리터럴 (Literal)

• 가장 기본적이고 많이 쓰는 방식, 권장
• {} 중괄호 안에 키: 값 쌍을 쉼표로 구분해 작성

// [문법]
const 객체이름 = { 키: 값, 키: 값, ... };

// 빈 객체
const obj = {};

// 속성이 있는 객체
const person = {
  name: "홍길동",   // key: value
  age: 25,
  sayHello: function() { // sayHello() { ...} 가능
    console.log("안녕!");
  }
};

2. new Object() 생성자

• Object 생성자 함수로 선언
• 잘 쓰이지 않고 {} 리터럴 방식이 권장됨

// [문법]
const 객체이름 = new Object();

const user = new Object();
user.name = "철수";
user.age = 20;

3. 생성자 함수 (Constructor Function)

• new 키워드를 사용해 객체를 만듦
• 비슷한 구조의 객체 여러 개를 만들 때 사용

// [문법]
function 생성자함수(매개변수, ...) { this.속성 = 값; ... }
const 객체이름 = new 생성자함수(값, ...);

function Person(name, age) {
  this.name = name;
  this.age = age;
}
const p1 = new Person("영희", 22);

 

4. 클래스 (Class, ES6+)

• 생성자 함수보다 문법이 명확
• constructor 안에서 초기화, 메서드는 자동으로 prototype에 등록

class 클래스이름 {
  constructor(매개변수, ...) { this.속성 = 값; ... }
  메서드이름() { ... }
}
const 객체이름 = new 클래스이름(값, ...);

class Animal {
  constructor(type) {
    this.type = type;
  }
  sound() {
    console.log("소리를 낸다");
  }
}
const cat = new Animal("고양이");

5. Object.create()

• 원하는 객체를 프로토타입으로 하는 새 객체 생성
• 프로토타입 체인 조작 시 유용

// [문법]
const 객체이름 = Object.create(프로토타입객체[, 속성객체]);

const ojb = Object.create({
  name: 'na',
});

console.log(ojb.name); // na

6. 프로퍼티 축약 표현 (Shorthand)

• 키와 변수 이름이 같으면 name: name → name으로 축약 가능

// [문법]
const 객체이름 = { 변수, ... }; // 변수 이름과 key가 같을 때

const name = "민수";
const age = 30;

const user = { name, age }; // { name: "민수", age: 30 }

7. 계산된 프로퍼티명 (Computed Property Name)

• 대괄호 [] 안에 표현식을 넣어 키를 동적으로 생성 가능

// [문법]
const 객체이름 = { [변수]: 값, ... };

const key = "score";
const obj = {
  [key]: 100
};
console.log(obj.score); // 100

8. Getter / Setter 포함 선언

• getter/setter의 경우 함수처럼 호출하지 않고 속성처럼 값을 대입하므로 ,()가 붙지 않음

// [문법]
const 객체이름 = {
  get 속성() { ... },
  set 속성(값) { ... }
};

const user = {
  first: '홍',
  last: '길동',
  get fullName() {
    return this.first + this.last;
  },
  set fullName(value) {
    [this.first, this.last] = value.split(' ');
  },
};

console.log(user.fullName); //⇒ 홍길동
user.first = '김';
user.last = '민수';
console.log(user.fullName); // ⇒ 김민수

 

---

객체 메서드  정의

• 메서드(Method): 객체의 프로퍼티 값으로 할당된 함수 (※ 함수: 독립적으로 호출 가능한 코드 블록)
• 객체 안에 정의된 것은 “메서드(Method)” 라고 부르지만, 자바스크립트 내부적으로는 함수(Function) 객체임.

1. 기본 메서드 정의

• 기본 방식

// [문법]
const 객체명 = {
	메서드명 : function(){
	}
}

const obj = {
  sayHello: function() {
    console.log("안녕하세요");
  }
};

2. 화살표 함수

// [문법]
const 객체명 = {
	메서드명: ()=> {
    }
}

const obj = {
  sayHello: () => {
    console.log('hi');
  },
};

2. ES6 이후 축약 문법

• ES6부터는 key() 형태로 함수 선언을 축약할 수 있음
• function 키워드와 콜론(:) 생략
• 객체 리터럴과 클래스 안에서는 가능하지만 생성자 함수 내부나 일반 변수 할당에서는 축약 문법 불가

// [문법]
const 객체명 = {
	메서드명() {
    }
}

const obj = {
  sayHello() {
    console.log("안녕하세요");
  }
};