자바스크립트 - 참조타입(객체) 1

자바스크립트에서 기본타입을 제외한 모든 값은 객체이다.

배열, 함수, 정규표현식 등도 모두 객체로 표현된다.

객체는 참조타입이라고 불림 => 객체의 모든 연산이 실제 값이 아닌 참조값으로 처리되기 때문

 

객체 생성

- 자바스크립트는 클래스 개념이 없다.

- 객체 리터럴이나 생성자 함수 등 별도의 생성 방식을 사용함

1. Object() 객체 생성자 함수 이용

//foo 빈 객체 생성
var foo = new Object(); 


//foo 객체 프로퍼티 생성
foo.name = 'foo';
foo.age = 30;
foo.gender = 'male';


console.log(typeof foo);
console.log(foo);

//출력
//object
//{name: 'foo', age: 30, gender: 'male'}

 

2. 객체 리터럴 방식 이용

리터럴 = 표기법

객체리터럴 = 객체 생성하는 표기법

{프로퍼티_이름 : 값}를 이용하여 객체 생성

//객체 리터럴 방식으로 객체 생성
var foo={	
	name : 'foo',	
    	age : '30',	
    	gender : 'male'
    };

 

3. 생성자 함수 

함수를 통하여 객체 생성 가능

 

 

객체 프로퍼티 접근

[] 또는 . 표기법으로 접근

//객체 생성
var foo = {
	name : 'foo',
    	major : 'conputer'
};

//읽기
console.log(foo.name); //  foo
console.log(foo['name']); // foo
console.log(foo.nickname); // undefined


//수정
foo.major = 'electronics';
console.log(foo.major); // electronics
console.log(foo['major']); // electronics


//객체 프로퍼티 동적 생성
foo.age=30;
console.log(foo.age); // 30


//대괄호 표기법만 사용해야하는 경우
foo['full-name'] = 'foo bar'; //동적으로 'full-name' 프로퍼티 생성

console.log(foo['full-name']);// foo bar
console.log(foo.full-name); // NaN

console.log(foo.full); // undefined
console.log(name); // undefined

- [] 사용시 접근하려는 프로퍼티 이름을 문자열 형태로 만들어야함

(자바스크립트에서는 대괄호 표기법에서 접근하려는 프로퍼티 이름을 문자열 형태로 만들지 않으면, 모든 자바스크립트 객체에서 호출가능한 toString() 메소드를 호출하여 문자열로 바꿈)

- 대괄호 표기법만 사용해야하는 경우가 있음 => 접근하려는 프로퍼티가 표현식이거나 예약어일 경우

      full-name의 경우 - 연산자가 있는 표현식임

      console.log(foo.full-name); 와 같이 마침표로 표기할경우 Not a Number이라고 표시된다.

      NaN은 수치연산을 해서 정상적인 값을 얻지 못할때 출력된다. ex) 1 - 'hello' (숫자 - 문자열)

      foo.full-name은 (foo.full) - name으로 취급한다.

 

* for in문

var prop;
for (prop in foo){
	console.log(prop, foo[prop]);
}

 

 

객체 프로퍼티 삭제

var foo = {
	name : 'foo',
    nickname : 'babo'
};


console.log(foo.nickname); // babo

delete foo.nickname; // 삭제

console.log(foo.nickname); // undefined


delete foo; // delete는 프로퍼티만 삭제된다.
console.log(foo.name); // foo

 

 

 

참조 타입 특성

var obj1 = {
	val : 40
};

var obj2 = obj1;


console.log(obj1.val); //40
console.log(obj2.val); //40

obj2.val = 50;

console.log(obj1.val); //50
console.log(obj2.val); //50

obj1은 객체를 저장하는 것이 아니라 객체를 가리키는 참조값을 저장한다.

obj2=obj1을 하면 obj2도 obj1이 가리키는 참조값을 가지게 된다.

따라서 obj1,2가 가리키는 객체는 동일한 객체이다.

 

 

객체비교

var a = 100;
var b = 1--;

var obj1 = {value: 100};
var obj2 = {value: 100);
var obj3 = obj2;

console.log(a == b); // true
console.log(obj1 == obj2); // false 다른 객체를 참조하므로
console.log(obj2 == obj3); // true 같은 객체를 참조하므로

 

 

참조에 의한 함수 호출 (call by reference)

var a =100;
var obj = { value: 100};

function changeArg(num, obj){
	num = 200;
    	obj.value = 200;
        
        console.log(num);
        console.log(obj);
}


changeArg(a, obj);// 200 {value: 200}
=> num에 100 값이 전달되고 200으로 바뀜, ojb.value = 200이 됨

console.log(a); //100
console.log(obj);// {value: 200} 참조에 의한 호출이므로

 

 

프로토타입

- 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있음

- 객체지향의 상속과 같이 부모 객체의 프로퍼티를 자신의 것처럼 사용할 수 있음

- 부모객체를 프로토타입 객체라고 함

var foo = {
	name: 'foo',
    	age : 30
};

//foo 객체의 toString 메소드 호출 => foo객체의 프로토타입에 toString이 정의되어 있음
foo.toString();

console.dir(foo);

 

크롬에서 실행하게되면 __proto__ 프로퍼티가 있는 것을 알 수 있다.

 

모든 객체는 자신의 부모 역할을 하는 프로토타입 객체를 가리키는 숨겨진 프로퍼티가 있음.

크롬에서는 __proto__가 숨겨진 프로퍼티이다.

 

모든 객체의 프로토타입은 자바스크립트의 룰에 따라 객체를 생성할 때 결정된다. 

객체 리터럴 방식으로 생성된 객체는 Object.prototype 객체가 프로토타입 객체가 된다.