[JavaScript] 객체

 

객체(Object) 란 실생활에서 우리가 인식할 수있는 사물로 이해할 수 있습니다. 자바스크립트의 기본 타입(data type)은 객체(object)입니다. 다시 말해 객체는 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합입니다. 프로퍼티의 값으로 함수가 올 수도 있는데 이러한 프로퍼티를 메소드(method)라고 부를 수 있습니다.

 

자바스크립트에서 숫자, 문자열, 불리언, undefined 타입을 제외한 모든 것이 객체입니다. 하지만 숫자, 문자열, 불리언 같은 원시 타입은 값이 정해진 객체로 취급되어 객체로서의 특정도 함께 가지고 있습니다.

 

다음 예제는 객체의 프로퍼티 참조를 보여주고 있습니다.

객체이름.프로퍼티이름

또는 객체이름['프로퍼티이름']

객체의 메소드도 객체의 프로퍼티와 같은 방법으로 참조할 수 있습니다.

객체이름.메소드이름()

메소드를 참조할 때 메소드 이름 뒤에 괄호를 붙이지 않으면 메소드가 아닌 프로퍼티 그 자체를 참조하게 됩니다. 따라서 괄호를 사용하지 않고 프로퍼티를 그 자체를 참조하게 되면 해당 메소드의 정의 그 자체가 반환됩니다.

다음 예제는 위의 경우를 단편적으로 보여주고 있습니다.

var person = {
	name : 'soominkim',
    birthday : '000000',
    pld : : '111111',
    
   	add : function(){
    	return this.birthday + this.pld;
    }
};

person 객체는 name, birthday, pld 프로퍼티를 가지고 있습니다. 그리고 add 메소드를 가지고 있습니다. 

괄호를 포함한 pesrson.add()를 호출하게되면 birthday와 pld가 합쳐진 00000111111를 반환하지만 괄호를 제외하고 호출하게되면 add 메소드 자체를 반환합니다.

 

자바스크립트에서 객체를 생성하는 방법은 다음과 같습니다.

• 리터럴 표기(literal notation)를 이용한 방법
• 생성자 함수(constructor function)를 이용한 방법
• Object.create() 메소드를 이용한 방법

위와 같은 방법으로 생성되어 메모리에 대입된 객체를 인스턴스(instanace)라고 합니다. 다음 예제는 리터럴 표기를 이용한 객체의 생성을 보여줍니다.

var 객체이름 = {
	프로퍼티 이름 : 프로퍼티 값
};

각각의 프로퍼티의 이름과 값을 콜론으로 연결하고 쉼표를 사용해 다른 프로퍼티와 구분합니다. 프로퍼티의 이름으로는 자바스크립트의 식별자(identifier)나 문자열을 사용할 수 있습니다. 다음 예제는 생성자를 이용한 객체의 생성을 보여줍니다.

var day = new Date();
console.log(day.getFullYear());

자바스크립트의 모든 객체는 프로토타입 객체를 가지고 있습니다. 그리고 이들은 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받습니다. 이처럼 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며 이때 상속되는 정보를 제공하는 객체를 프로토타입(prototype)이라고 합니다.

 

위 예제에서 사용된 Date() 객체 역시 Date.prototype을 가지고 있습니다. 그러나 new Object()의 프로토타입인 Object.prototype 객체는 어떠한 프로토타입도 가지지 않으며 아무런 프로퍼티도 상속받지 않습니다. 이처럼 프로토타입이 상속되는 가상의 연결고리를 프로토타입 체인(prototype chain)이라고 부릅니다.

 

프로토타입을 생성하는 가장 기본적인 방법은 객체 생성자 함수(object constructor function)을 작성하는 것입니다. 생성자 함수를 작성하고 new 연산자를 사용해 객체를 생성하면 같은 프로토타입을 가지는 객체들을 생성할 수 있습니다.

function person(name,gender,age){
	this.name = name;
    this.gender = gender;
    this.age = age;
}

var pesrson1 = new person('soominkim','both',10)

객체 생성자 함수를 작성할 때에는 관례상 이름의 첫 문자만 대문자로 작성하는 경우도 있습니다.

function Person(name,gender,age){
	this.name = name;
    this.gender = gender;
    this.age = age;
}

var pesrson1 = new Person('soominkim','both',10)

다음 예제는 이미 생성된 객체에 새로운 프로퍼티나 메소드를 추가하는 방법을 나타냅니다.

person1.address = '서울'
person1.country = function(){
	return this.address + this.name
}

위의 예제에서 새롭게 추가된 address 프로퍼티와 country() 메소드는 오직 person1 인스턴스에만 추가됩니다. 기존의 Person 프로토타입에는 추가되지 않습니다. 만약 이후 새롭게 만들어지는 pesrson2 객체에도 동일하게 적용하고 싶다면 Person 프로토타입에 직접 작성을 해야합니다.

function Person(name,gender,age){
	this.name = name;
    this.gender = gender;
    this.age = age;
    
    person1.address = '서울'
	person1.country = function(){
	return this.address + this.name
}
}

var pesrson1 = new Person('soominkim','both',10)

프로토타입에 프로퍼티를 추가하는 경우에는 기본 값을 가지게 할 수 있습니다. 하지만 이런 방법이 너무 복잡하다면 다음 예제와 같이 프로토타입 프로퍼티를 이용해 현재 존재하고있는 프로토타입에 새로운 프로퍼티를 추가할 수 있습니다.

function Person(name,gender,age){
	this.name = name;
    this.gender = gender;
    this.age = age;
}


Person.prototype.address = '서울'
Person.prototype.country = function(){
	return this.address + this.name
}

자바스크립트 표준 객체의 프로토타입도 임의로 수정할 수 있으나 심각한 오류를 발생할 가능성이 있기때문에 표준 객체의 프로타입을 수정하는 것은 지양하는 것이 좋습니다. 마지막으로 다음 예제는 Object.create() 메소드를 이용한 객체 생성 방법을 보여줍니다.

Object.create(프로토타입객체[, 프로퍼티1, 프로퍼티2,])

객체를 생성하고 사용하면 this 키워드는 빠질 수 없는 요소입니다. 자바스크립트에서 this 키워드는 해당 키워드가 사용된 자바스크립트 코드 영역을 포함하고 있는 객체를 가리킵니다.  예를 들어 메소드 내부에서 사용된 this 키워드는 해당 메소드를 포함하고 있는 객체를 가리키며 객체 내부에서 사용된 this 키워드는 객체 그 자신을 가리킵니다. 이러한 this는 변수가 아닌 키워드이므로 사용자가 임의로 가리키는 값을 변경할 수 없습니다.

 

 추가한 프로퍼티를 삭제하고 싶다면 다음 예제처럼 할 수 있습니다.

delete 객체이름.프로퍼티이름;

객체의 프로퍼티를 순회하는 방법은 fon / in 문도 있지만 다음과 같은 메소드를 사용할 수 있습니다.

1. Object.keys()
2. Object.getOwnPropertyNames()

Object.keys() 메소드는 해당 객체가 가진 고유 프로퍼티 중에서 열거할 수 있는 프로퍼티의 이름을 배열에 담아 반환하며

Object.getOwnPropertyNames() 메소드는 해당 객체가 가진 모든 고유 프로퍼티의 이름을 배열에 담아 반환합니다.