9. 객체

객체(Object)

• 객체는 연관된 데이터를 담는 그릇입니다.
• 객체 안의 내용물은 바뀔 수 있지만 본질은 항상 객체입니다.
• 객체는 키(key)와 값(value)으로 구성되어 있습니다.
• 객체가 가지고 있는 값을 프로퍼티(property)라고 하며 함수인 경우 메서드라고 합니다.
• 프로퍼티로는 숫자, 문자, 불리언 등과 같은 타입이 될 수도 있고, 메서드를 가질 수도 있고, 배열, 객체 같은 또 다른 객체를 가질 수 있습니다.

// name이 키(key)이며, 
// '홍길동'가 값(value)이다.
const obj = {
  name: '홍길동',    // name 프로퍼티
  age: 99,         // age 프로퍼티
  hello: function() {   // hello 메서드
    console.log('Hello!');
  },
  hi() {  // 이렇게도 선언할 수 있습니다.
    console.log('Hi!');
  },

  parent: parent,
  hobby: ['운동', '게임', '독서'],
  score: {
    '수학': 100,
    '영어': 90
  }
};

const parent = {
  name: '김길동',
  age: 50
};

 

 

객체 생성

• 객체 리터럴 방식

//중괄호 {} 안에 key: value를 쉼표(,)로 구분하여 객체를 생성합니다.
const obj = {
  name: '홍길동', 
  age: 99
};
// 또는
const obj = {};
obj.name = '홍길동';
obj.age = '99';

 

• 객체 생성자 방식

//new 연산자와 Object 생성자를 사용하여 객체를 생성합니다.
const obj = new Object();
obj.name = '홍길동';
obj.age = 99;

 

 

객체 프로퍼티 접근

const person = {
  name: '홍길동', 
  age: 99,
  gender: 'male',
  hobby: ['운동', '게임', '독서'],
  hello: function() {
    alert('Hello!');
  },
  children: {
    name: '김길동',
    alert: function() {
      alert('안녕하세요.');
    }
  }
};

 

• 점표기법

// 예) 객체.key
person.name
person.age
person.gender
person.hobby[0]
person.hello()
person.children.name
person.children.alert()

 

• 괄호 표기법

// 예) 객체['key']
person['name']
person['age']
person['gender']
person['hobby'][0]
person['hello']()
person['children']['name']
person['children']['alert']()

 

 

객체 프로퍼티 생성 및 제거

• 프로퍼티 생성

const person3 = {};
person3.name = '박길동';
person3.age = 30;

person3['hobby'] = '자바스크립트';
person3['hello'] = function() {
  alert('Hello!');
}

 

• 프로퍼티 제거

delete person3.name;

 

 

팩토리 함수

• 객체를 반환하는 함수를 말합니다.
• 같은 유형의 객체를 여러번 생성해야 하는 경우에 사용합니다.
• 반복적으로 객체를 생성하면 코드의 가독성이 떨어지는데 이를 해결할 수 있습니다.

//객체 반복 생성
const person1 = {
  name: '홍길동',
  age: 10,
  hobby: '운동'
};
const person2 = {
  name: '고길동',
  age: 20,
  hobby: '게임'
};
const person3 = {
  name: '전길동',
  age: 30,
  hobby: '독서'
};
...
const person6 = {
...
};


//팩토리 함수 생성
function createPerson(name, age, hobby) {
	return {
		name: name,
		age: age,
		hobby: hobby
	};
};

const person1 = createPerson('홍길동', 10, '운동');
const person2 = createPerson('고길동', 20, '게임');
const person3 = createPerson('전길동', 30, '독서');
const person4 = createPerson('김길동', 40, '노래');
const person5 = createPerson('한길동', 50, '댄스');
const person6 = createPerson('최길동', 60, '먹기');