자바스크립트 객체

1. 객체만들기

자바스크립의 모든것은 객체이거나 객체처럼 동작하기 떄문에 우선적으로 이해해보도록 해보자.

객체는 이름이 있는 값들 ('속성')의 집합이다. 

 

사람
속성	속성값
살아있음(living)	참(true)
나이(age)	34
성별(gender)	남성(male)

//객체만들기

var cody = new Object();

 

// cody 객체를 속성으로 채우기 (점표기법)
cody.living = true;
cody.age = 33;
cody.gender = 'male';

console.log(cody);

 

콘솔로그 결과

객체는 속성들의 그릇일뿐이며, 속성은 이름과 값을 가진다는 사실을 기억하자!

자바스크립트에서 여러 값을 표현하기 위해 묶음을 만들 때 "이름 있는 값을 가진 속성들의 그릇이라는 개념(=객체)" 사용 

 

2. 메소드 속성

메소드 속성은 어떤 동작을 수행하는 속성이다.  

자바스크립트에서는 Function() 객체를 포함한 속성이며, 이 객체는 자신을 포함한 객체에 어떤 동작을 수행하도록 만들어진다.

 

var cody = new Object();

cody.living = true;
cody.age = 33;
cody.gender = 'male';
cody.getGender = function(){

    return cody.gender;
};

console.log(cody.getGender());

 

//'male'이 결과로 출력된다.

 

* 여기서 중요한점은 메소드가 없었다면 객체에서 할 수 있는 일은 정적인 속성을 저장하는 것이 전부일 것이다.

 

Object() 생성자 함수는 생성자 함수를 호출하여 빈 객체를 만들어준다. 이를 이용해 cody 객체를 생성한것이다. 

생성자 함수는 미리 정해진 객체를 만들어내는 템플릿 또는 쿠키 모양틀 정도로 이해하면 좋을 것이다. 

 

이때 짚고 넘어가야하는 점은!

자바스크립트에서 대부분의 값은 객체로 표현된다는 사실이다.("foo", 5, true 등의 원시값은 예외이나 이 값들 역시 상응하는 래퍼(wrapper)객체가 있다.)

 

Object() 생성자 함수를 통해 만들어진 cody 객체와 String() 생성자 함수를 통해 만들어진 문자열 객체와 다르지 않다.

* 참고예제

var myObject = new Object();  //Object() 객체만들기
myObject['0'] = 'f';
myObject['1'] = 'o';
myObject['2'] = 'o';

console.log(myObject);

var myString = new String('foo'); // String()객체만들기

console.log(myString);

 

* 결과

 

위와 같이 myObject 와 myString은 둘다 객체다.

자바스크립트는 개체를 사용해 값을 표현한다는 사실을 인지하고 넘어가자!

 

//Person() 객체를 만들기 위해 Person 생성자 함수를 정의한다. 

var Person = function(living, age, gender) {
   this.living = living;
   this.age = age;
   this.gender = gender;
   this.getGender = function() {return this.gender}
};

//Person 객체의 인스턴스를 만들고 cody 라는 변수에 저장한다. 
var cody = new Person(true, 33, 'male');

console.log(cody);
/* 자바스크립트가 동일한 패턴을 사용해 미리 정의해둔 String() 생성자 함수다. 문자열 생성자는 자바스크립트 네이티브 객체이기 때문에 바로 인스턴스를 만들어 문자열을 사용할 수 있다. 

var myString = new String('foo');

console.log(myString);

 

Object() 생성자 함수와 새로 만들어진 Person() 생성자를 사용한 결과가 같다는것은 중요하다.

(두 생성자 모두 같은 속성과 속성 메소드를 가진 동일한 객체를 만들어 냈다.)

 

//Object() 생성자를 사용해 codyA 객체를 생성한다. 

var codyA = Object();

codyA.living = true;
codyA.age = 33;
codyA.gender = 'male';
codyA.getGender = function(){return codyA.gendder};

console.log(codyA);

 

// 동일한 cody객체가 만들어지지만, 네이티브 Object() 생성자가 아닌 우리가 정의한 Person() 생성자와 new 연산자를 사용해 인스턴스를 만든것이다. 
var Person = function(living, age, gender){
    this.living = living;
    this.age = age;
    this.gender = gender;
    this.getGender = function(){return this.gender};
};

var codyB = new Person(true, 33, 'male');

console.log(codyB);

 

객체 자체로만 보면 큰 차이가 없지만, 객체를 만든 생성자 함수가 서로 다른걸 볼 수 있다.

자바스크립트에 포함된 네이티브 객체 생성자는 굉장히 작으며, 이러한 객체 생성자는 세분화된 자료(숫자,문자열,함수,객체 등) 값을 표현하는 복합 개체를 만들 때 사용된다. (객체를 어떻게 만드는건 상관없이 복합 객체가 만들어진다.)