[TIL 11] javascript | 객체 프로퍼티와 메소드

객체(Object)

객체는 데이터를 의미하는 property와 데이터를 참조하고 조작할 수 있는 동작을 의미하는 method로 구성된 집합이다.

프로퍼티

프로퍼티는 프로퍼티 키(이름)와 프로퍼티 값으로 구성된다.
프로퍼티는 프로퍼티 키로 유일하게 식별할 수 있다. 즉, 프로퍼티 키는 프로퍼티를 식별하기 위한 식별자(identifier)다.
이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다. 배열과는 달리 객체는 프로퍼티를 열거할 때 순서를 보장하지 않는다.

프로퍼티 값 갱신

프로퍼티에 새로운 값을 할당하면 프로퍼티 값은 갱신된다.

var favorite = {
  'fruit': 'apple',
  'music': 'hip-hop',
  'food': 'korean food',
};

favorite['fruit'] = 'orange';
console.log(favorite['fruit'] ); // 'orange'

프로퍼티 값 동적 생성

객체가 소유하고 있지 않은 프로퍼티 키에 값을 할당하면 하면 주어진 키와 값으로 프로퍼티를 생성하여 객체에 추가한다.

var favorite = {
  'fruit': 'apple',
  'music': 'hip-hop',
};

favorite['food'] = 'korean food';
console.log(favorite['food'] ); // 'korean food'

프로퍼티 삭제

delete 연산자를 사용하면 객체의 프로퍼티를 삭제할 수 있다.

var favorite = {
  'fruit': 'apple',
  'music': 'hip-hop',
  'food': 'korean food',
};

delete favorite.music;
console.log(favorite.music); // undefined

메소드

프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다. 즉, 메소드는 객체에 제한되어 있는 함수를 의미한다.

객체 리터럴

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

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

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

생성자 함수

new 연산자와 Object 생성자 함수를 호출하여 빈 객체를 생성한 후 프로퍼티 또는 메소드를 추가하여 객체를 완성하는 방법이다.

객체가 소유하고 있지 않은 프로퍼티 키에 값을 할당하면 해당 객체에 프로퍼티를 추가하고 값을 할당한다. 이미 존재하는 프로퍼티 키에 새로운 값을 할당하면 프로퍼티 값은 할당한 값으로 변경된다.

// 빈 객체 생성
var person = new Object();
// 프로퍼티 추가
person.name = 'ns';
person.gender = 'female';
person.sayHello = function () {
  console.log('Hi! My name is ' + this.name);
};

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

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

생성자 함수

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

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

// 인스턴스의 생성
var person = new Person('ns', 'female');

console.log(typeof person); // object
console.log(person); // Person { name: 'ns', gender: 'female', sayHello: [Function] }

console.log(person.gender);  // 'female'
person.sayHello; // Hi! My name is ns