[TIL] 객체(Object)

객체(Object)

자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합
프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다.
따라서 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다.

프로퍼티(Property)

프로퍼티는 프로퍼티 키(이름)와 프로퍼티 값으로 구성된다. 프로퍼티는 프로퍼티 키로 유일하게 식별할 수 있다.

프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 symbol 값
프로퍼티 값 : 모든 값

특징

• 프로퍼티 키에 문자열이나 symbol 값 이외의 값을 지정하면 암묵적으로 타입이 변환되어 문자열이 된다.
• 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다.
• 배열과는 달리 객체는 프로퍼티를 열거할 때 순서를 보장하지 않는다.

객체 생성방법

객체 리터럴

• 중괄호({})를 사용하여 객체를 생성하는데 {} 내에 1개 이상의 프로퍼티를 기술하면 해당 프로퍼티가 추가된 객체를 생성할 수 있다.
• {} 내에 아무것도 기술하지 않으면 빈 객체가 생성된다.

let emptyObject = {};
console.log(typeof emptyObject); // object (빈 객체)

let person = {
  name: 'Jeong',
  gender: 'female',
  sayHello: function () {
    console.log('Hi! My name is ' + this.name);
  }
};

console.log(typeof person); // object
console.log(person); // {name: "Jeong", gender: "female", sayHello: ƒ}

person.sayHello(); // Hi! My name is Jeong

Object 생성자 함수

특징

• new 연산자와 Object 생성자 함수를 호출하여 빈 객체를 생성할 수 있다.
• 빈 객체 생성 이후 프로퍼티 또는 메소드를 추가하여 객체를 완성하는 방법이다.
• 생성자(constructor) 함수란 new 키워드와 함께 객체를 생성하고 초기화하는 함수를 말한다.
• 생성자 함수를 통해 생성된 객체를 인스턴스(instance)라 한다.
• 자바스크립트는 Object 생성자 함수 이외에도 String, Number, Boolean, Array, Date, RegExp 등의 빌트인 생성자 함수를 제공한다.
• 일반 함수와 생성자 함수를 구분하기 위해 생성자 함수의 이름은 파스칼 케이스(PascalCase)를 사용하는 것이 일반적이다.

 // 빈 객체의 생성 == Object 생성자 함수
let person = new Object();

// 프로퍼티 추가
person.name = 'Jeong';
person.gender = 'female';

// 메소드 추가
person.sayHello = function () {
  console.log('Hi! My name is ' + this.name);
};

console.log(typeof person); // object
console.log(person); // {name: "Jeong", gender: "female", sayHello: ƒ}

person.sayHello(); // Hi! My name is Jeong

생성자 함수

생성자 함수를 사용하면 마치 객체를 생성하기 위한 템플릿(클래스)처럼 사용하여 프로퍼티가 동일한 객체 여러 개를 간편하게 생성할 수 있다.

// 생성자 함수
function Person(name, gender) {
  this.name = name;
  this.gender = gender;
  this.sayHello = function(){
    console.log('Hi! My name is ' + this.name);
  };
}

// 인스턴스의 생성
var person1 = new Person('Lee', 'male');
var person2 = new Person('Kim', 'female');

console.log('person1: ', typeof person1);
console.log('person2: ', typeof person2);
console.log('person1: ', person1);
console.log('person2: ', person2);

person1.sayHello(); // Hi! My name is Lee
person2.sayHello(); // Hi!, My name is Kim

출처 : https://poiemaweb.com/js-object