javascript Object 객체 자바스크립트 오브젝트 객체에 대해 알아보자.

 javascript Object 자바스크립트 오브젝트에 대해 알아보자.

 

Object는 자바스크립트의 최상위 객체 입니다.

이 말은 곧 거의 모든 객체가 Object라는 말이 되는데요,

(거의 모든 이라는 말을 쓴 이유는 null 과 undefined 때문..)

그만큼 Object는 자바스크립트에서 아주 중요한 요소 입니다.

 

그럼 Object를 생성하는 방법 부터 보도록 하죠.

 

[Object 생성 방법]

 

var obj = new Object();     // Object 생성자 함수를 사용하는 방법
 
var obj2 = {};     // 리터럴 방식으로 생성하는 방법

 

자바스크립트에서 Object를 생성하는 방법은 위의 두가지 방법이 있습니다.

두가지 모두 생성이 가능하지만 대부분의 서적에서는 리터럴 방식을 추천하더군요.

 

이제 생성된 Object를 크롬에서 확인해 보도록 하죠.

 

<script>
var obj = new Object();
var obj2 = {};
 
console.dir(obj);
console.dir(obj2);
</script>

 

위의 코드를 크롬에서 확인하면 아래와 같습니다.

 

 

 

둘다 Object 인 것을 확인 하실 수 있죠.

그리고 이것의 프로토타입도 Object 인 것을 확인 하실 수 있습니다.

(프로토타입에 대해선 아래의 Link를 확인하세요.)

 

Link : Javascript prototype 프로토타입 이란? prototype을 사용하는 방법을 알아보자.

Javascript prototype 프로토타입 이란? prototype을 사용하는 방법을 알아보자.

 

공통적으로 가지고 있는 Object의 메소드 들도 보이네요.

위에서 보시는것과 같이 Object에는 7가지 메소드가 존재합니다.

많이 사용되지는 않으니 확인만 하고 넘어가도록 하죠.

 

[Object의 메소드]

메서드명	설명
constructor()	객체의 생성자 함수를 나타냄
hasOwnProperty(name)	name 속성이 있는지 확인
isPrototypeof(object)	객체가 object의 프로토타입인지 확인
propertysEnumerable(name)	for문을 사용할 수 있는지 확인
toLocaleString()	객체를 호스트 환경에 맞는 언어의 문자열로 변경
toString()	객체를 문자열로 변경
valueOf()	객체의 값을 나타냄

 

이제 Object에 프로퍼티를 컨트롤 하는 방법을 보도록 하죠.

 

[Ojbect의 Property]

 

<script>
var obj = new Object();
obj.name = '이건';
obj.age = 33;
 
var obj2 = {name:'이건', age:33};
 
console.dir(obj);
console.dir(obj2);
</script>

 

Object 생성자를 사용하는 방식과 리터럴 방식으로 property를 추가했습니다.

생성자함수방식에는 obj.key = value; 방식을 리터럴방식에서는 key : value, ... 방식으로 생성했습니다.

결과는 같겠죠?

 

 

여기서 한가지 주의 하셔야 할 점이 있습니다.

만일 property의 key에 특수문자가 들어간 경우 제대로 불러오지 못하게 됩니다. 

 

<script>
var obj = new Object();
obj.last-name = '이';
 
var obj2 = {'first-name' : '건'};
console.log(obj.last-name);
console.log(obj2.first-name);
</script>

 

위의 결과는 모두 NaN 입니다. property 중간에 있는 '-' 가 빼기 연산자로 잘못 인식 되었기 때문이죠.

이럴때는 대괄호 표기법을 활용합니다.

 

obj['last-name'];    // 이

obj2['first-name'];  // 건

 

이렇게 하면 정상적인 값을 호출 할 수 있습니다.

참고) NaN (Not a Number) : 숫자가 아니다. 연산할 수 없는 것으로, 정상적인 값을 얻지 못할 때 발생.

 

그럼 Object의 property 값을 수정하거나 삭제할 때는 어떻게 할까요?

 

var obj = {firstName : '건', lastName : '이', age : 33};
console.log(obj.age);  // 33
obj.age = 34;
console.log(obj.age);  // 34
delete obj.age;
console.log(obj.age);  //undefined
console.log(obj);

 

위와 같이 obj.property = 값 을 넣으면 그 값으로 수정되고

delete obj.property 를 하면 property 값이 삭제 됩니다.

 

console.log(obj); 를 확인해 보시면 age property가 없어진 것을 확인하실 수 있습니다.

(delete는 property만 삭제할 수 있을 뿐 Object는 삭제할 수 없습니다.)

 

맨 처음에 말했던 '거의 모든 객체가 Object다' 라는 말을 확인해보고 이번 포스팅을 마무리 하도록 하죠.

 

var obj = new Object();
var obj2 = {};
 
console.log('------------object---------------');
console.dir(obj);
console.dir(obj2);
 
function func(){};
var func2 = function(){};
var func3 = new Function();
console.log('------------function---------------');
console.dir(func);
console.dir(func2);
console.dir(func3);
 
 var str = '가나다';
 var str2 = new String('가나다');
console.log('------------string---------------');
console.dir(str);
console.dir(str2);
console.log(str2.constructor);
 
var num = 123;
var num2 = new Number(123);
console.log('------------number---------------');
console.dir(num);
console.dir(num2);
console.log(num2.constructor);
 
var bool = true;
var bool2 = new Boolean();
console.log('------------boolean---------------');
console.dir(bool);
console.dir(bool2);
 
var array = new Array();
var array2 = [];
console.log('------------array---------------');
console.dir(array);
console.dir(array2);

 

위 소스를 크롬 console창에서 확인해보면 결과는 아래와 같습니다.

 

 

함수의 프로토타입도 Object.

 

 

문자열의 프로토타입도 Object.

 

 

숫자의 프로토타입도 Object.

 

 

Boolean 형의 프로토타입도 Object

 

 

배열의 프로토타입도 Object 입니다.

정확히 말하자면,

null, undefined를 제외한 객체들은 프로토타입체이닝에 의해 모두 Object 처럼 사용이 가능하다 입니다.