[자바스크립트를 깨우치다] Chapter01_자바스크립트 객체

Chapter 01. 자바스크립트 객체

---

객체만들기

var cody = new Object();

cody.living = true;
cody.age = 33;
cody.gender = 'male';

console.log(cody); // 객체를 로그에 출력 {living = true, age = 33, gender = 'male'}

여기서 cody는 객체가 되고 각각의 정보가 들어갔다.
living, age, gender는 각각의 정보가 된다.
여기서 gender를 반환하는 함수를 추가하게 된다면

cody.getGender = function() { return cody.gender; }

이런 함수를 만들 수 있다.

여기서 객체(object)와 원시(primitive)값을 구분할 수 있어야한다.
이름이 있는 값을 객체라 하고, 단순한 값들을 원시값이라고 한다.
이 코드에서 객체는 cody가 되고 원시값은 living, age, gender가 된다.
JS에서는 원시값위에 한번 쌓여져 있는(wrapping) 객체가 각각 존재한다.

예를 들면

var myObject = new Object(); // 일반 객체 만들기
myObject['0'] = f;
myObject['1'] = o;
myObject['2'] = o;
console.log(myObject); // Object{ 0="f", 1="o", 2="o" } 가 기록

var myStirng = new String('foo'); // String 객체!! 만들기
console.log(myObject); // Object{ 0="f", 1="o", 2="o" } 가 기록

두 객체다 같은 객체로 취급됩니다. 이와 같이 자바스크립트는 객체를 통하여 값을 표현한다.
( 저 String은 원시값도 객체가 될 수 있다는 것을 알려주기 위해 의도적으로 적은 것 )
( 부연 설명을 하자면 원시값으로 선언해도 중간에 메소드를 호출하면 객체로 변환된다. )

제일 위에서 만든 cody와 아래 cody는 큰 차이는 없지만
위에 코드에선 Object() 생성자의 인스턴스를 사용해 만들어졌고,
아래 코드에선 Person() 생성자를 사용해 만들어졌다.
여기서 Person()생성자는 다른 Person()객체를 만들때도 사용할수 있는 Factory로써 사용되었다. ( 생성자 패턴 )

var Person = function(living, age, gender){
    /* this는 새롭게 작성된 객체(this = new Object();)를 뜻함 */

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

    /* new 키워드를 사용하면 undefined대신 this가 반환된다 */
}

var cody = new Person(true, 33, 'male');
// 다른 Person도 만들 수 있다.
var lisa = new Person(true, 34, 'female'); 

console.log(typeof cody);   // object가 기록
console.log(cody); // cody가 포함된 속성과 값이 기록
console.log(cody.constructor); // Person() 함수가 기록

자바스크립트에서 원시값을 제외한 대부분의 값은 생성자 함수를 사용해 반드시 객체를 만든다.
이때 생성자 함수에서 반환된 객체를 인스턴스라고 한다.

---

자바스크립트 네이티브 / 내장 객체 생성자

• Number(), String(), Boolean(), Object(), Array(), Function(), Date(), RegExp(), Error()

  자바스크립트는 9 가지의 네이티브 객체 생성자가 포함되어 있다.

---

원시값과 객체의 값 비교

• 원시값 : 값 자체를 비교한다.
• 객체 : 참조를 비교한다.

var applePrice = 800;
var bananaPrice = 800;
var eggPrice = new Number(800);
var melonPrice = eggPrice;

// 원시값 vs 원시값 -> 값비교
console.log(applePrice == bananaPrice); // true

// 원시값 vs 복합객체 -> 참조비교
console.log(applePrice === eggPrice);   // false

// 복합객체 vs 복합객체 -> 참조비교
console.log(melonPrice === eggPrice);   // true

---

원시객체도 복합객체처럼 사용가능

원시객체도 일반 객체를 다루듯이 사용하게 된다면, 자바스크립트는 원시객체를 잠시 객체로 바꾸고, 명령이 끝나면 다시 원시값으로 바꿔준다.

var primitiveString = "aaa";

console.log(primitiveString.toString()); // 객체처럼 사용가능

// 다시 원시값으로 돌아왔다!
console.log(typeof primitiveStirng); // string

---

복합객체의 저장 및 복사

복합객체는 참조에 의해 저장되고 조작된다.
하지만 String, Number, Boolean 값은 new로 만들건 복합객체로 만들건 상관없이 참조가 복사되지 않는다.

var myObject = {};
var copyOfMyObject = myObject; // 여기서 참조복사

myObject.foo = 'bar';

console.log(myObject, copyOfMyObject);  // 'Object { foo = "bar" }
                                        //  'Object { foo = "bar" }

---

복합객체의 동적속성

복합 객체는 동적(Dynamic)속성으로 이루어져 있다. 중간에 객체를 수정할 수 있다는 것이다.

var objA = {property : 'value'};
var pointer1 = objA;
var pointer2 = pointer1;

objA.property = null;
objA.say = 'yeah';

console.log(objA.property, pointer1.property, pointer2.property);
// null, null, null
console.log(objA.say, pointer1.say, pointer2.say);
// yeah, yeah, yeah

---

객체가 특정 생성자 함수의 인스턴스인지 확인하기

instanceof 연산자를 사용하면 객체가 특정 생성자 함수의 인스턴스인지 확인가능하다.

var CustomConstructor = function() { this.foo = 'bar'; };

var instanceOfCustomObject = new CustomConstructor();

consolelog(instanceOfCustomObject instanceof CustomConstructor(); // true

// 네이티브도 똑같이 적용
console.log(new Array('foo') instanceof Array); // true

---