Object는 참조형 타입을 생성할 때 객체 간의 상속에서 가장 최상위에 위치하는 객체이다. 참조형 타입의 경우 Object을 상속받아 Object의 다양한 속성들을 사용할 수 있다.
| 속성 | 설명 |
| 객체.hasOwnProperty(속성) | 객체의 속성이 상속받지 않은 속성인지 알려준다, 자신의 속성이면 true반환 |
| 객체.isPrototypeOf(대상) | 객체가 대상의 조상인지 알려준다, 조상이면 true반환 |
| Object.getPrototypeOf(객체) | 객체의 prototype을 조회할 수 있다. |
| Object.setPrototypeOf(객체, 상위 객체) | 객체의 prototype을 설정할 수 있다. |
| 객체 instanceof 생성자 | 객체가 특정 생성자의 자식인지 조회할 수 있다. |
| 객체.propertyIsEnumerable(속성) | 객체의 해당 속성이 열거가능한 속성인지 알려준다. |
| 객체.toString | 객체의 종류(Object, Math ...)를 알려준다. 사용자가 임의로 바꿀 수 있다. |
| 객체.valueOf | 객체의 기본값을 출력한다. |
| 객체.create(prototype, 속성) | 객체를 생성한다. |
| 객체.defineProperty(객체, 속성, 설명) | 객체의 속성을 정의한다. |
| 객체.getOwnPropertyDescriptor(객체, 속성) | 객체의 속성의 설명 값을 불러온다. |
| 객체.freeze | 객체 전체를 바꾸지 못하게 고정한다. 확인방법 : 객체.isFrozen |
| 객체.seal | 객체 속성의 추가 및 제거를 막는다. 확인방법: 객체.isSealed |
| 객체.preventExtensions | 객체 속성의 추가를 막는다. 확인방법: 객체.isExtensible |
| 객체.keys | 객체의 속성명을 모두 가져와 배열로 만든다. |
| Object.is(파라미터1, 파라미터2) | 두 개의 파라미터의 값과 타입을 비교하여 같으면 true, 아니면 false 반환한다. |
| Object.assign() | 첫번째 인자를 타겟으로 하여 두번째 인자부터 마지막 인자까지 병합되어 타겟 객체를 반환한다. 인자는 객체이다. |
| typeof | 타입을 알려준다. |
<<hasOwnProperty예제>>
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
Object.prototype.obj_all = "상위의 속성";
let obj1 = {
obj1_a: "자신의 속성"
}
// obj1.obj_all의 경우 부모의 속성이기 때문에 false 반환
console.log(obj1.obj_all); //상위의 속성
console.log(obj1.hasOwnProperty("obj_all")); //false
// obj1.obj1_a의 경우 자신의 속성이기 때문에 true 반환
console.log(obj1.obj1_a); // 자신의 속성
console.log(obj1.hasOwnProperty("obj1_a")); //true
</script>
</body>
</html>
<<isPrototypeOf | instanceof 예제>>
isPrototypeOf의 경우 대상의 조상인지 아닌지를 알려주는 속성이라면, instanceof는 대상의 자식인지를 알려준다.
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
class GrandParent{};
class Parent extends GrandParent{};
class Child extends Parent{};
let lastchild = new Child();
// lastchild의 프로토체인은 Child클래스, Parent클래스, GrandParent클래스 이후 Object까지 이어져있다.
console.log(Parent.prototype.isPrototypeOf(lastchild)); //true
console.log(GrandParent.prototype.isPrototypeOf(lastchild)); //true
console.log(Object.prototype.isPrototypeOf(lastchild)); //true
// lastChild가 특정 생성자의 자식인지 조회할 수 있다.
console.log(lastchild instanceof Child); //true
console.log(lastchild instanceof Parent); //true
console.log(lastchild instanceof GrandParent); //true
console.log(lastchild instanceof Object);//true
</script>
</body>
</html>
<getPrototypeOf | setPrototypeOf 예제>>
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
class GrandParent{};
class Parent extends GrandParent{};
class Child extends Parent{};
class Other{};
let lastchild = new Child();
// lastchild의 prototype을 조회한다. Child 객체이기 때문에 상속받은 Parent{}의 prototype을 가지고 있다.
console.log(Object.getPrototypeOf(lastchild)); // Parent{}
// lastchild의 prototype을 Other class로 변경해서, prototype을 다시 조회하면 Other{}로 나온다.
Object.setPrototypeOf(lastchild, Other);
console.log(Object.getPrototypeOf(lastchild)); // Other{}
</script>
</body>
</html>
<<propertyIsEnumerable | toString | valueOf 예제>>
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// propertyIsEnumerable
let arr1 = [1,2, false, 'b'];
console.log(arr1.propertyIsEnumerable(2)); //true 열거 가능한 속성
console.log(arr1.propertyIsEnumerable("length")); //false 배열이 length를 가지고 있지만 열거는 불가능하다.
// toString
function Func1(name){
this.name=name;
}
// toString을 임의로 변경했다.
const func1_1 = new Func1("코딩쥐");
Func1.prototype.toString = function func1ToString(){
return `제 이름은 ${this.name} 입니다.`
}
console.log(func1_1.toString()); // 제 이름은 코딩쥐 입니다.
//valueOf
let obj1 = { a: "코딩쥐", b: "티스토리"};
console.log(obj1.valueOf()); //{a: '코딩쥐', b: '티스토리'}
</script>
</body>
</html>
<<create | defineProperty | getOwnPropertyDescriptor 예제>>
| Property descriptor | 설명 |
| value | JavaScript의 데이터 타입 |
| writable | 기본값(false) | 속성값 변경 가능 여부 |
| configurable | 기본값(false) | 프로퍼티 삭제 가능 여부 |
| enumerable | 기본값(false) | 열거 가능 여부 |
| get | 기본값(undefined) | 속성 값을 가져올 때 쓰는 함수 |
| set | 기본값(undefined) | 속성 값을 설정할 때 쓰는 함수 |
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// Object.create
// Object의 prototype을 가지고 객체를 생성하겠다, let obj1 ={};와 동일
let obj1 = Object.create(Object.prototype);
// obj2의 프로토타입이어야 할 객체는 null로 설정
let obj2 = Object.create(null, {
a : {
writable : true,
enumerable : true,
configurable : false,
value : 3,
}
});
// Object.defineProperty
Object.defineProperty(obj2, "b", {
value : 1,
writable : true,
enumerable: true,
configurable : true
});
console.log(obj2); // {a: 3, b: 1}
for (const key in obj2) {
console.log(key); // a b
}
delete obj2.b; //b 삭제
console.log(obj2); // {a: 3}
//getOwnPropertyDescription
console.log(Object.getOwnPropertyDescriptor(obj2, 'a'));
//{value: 3, writable: true, enumerable: true, configurable: false}
</script>
</body>
</html>
<<freeze | seal | preventExtensions | keys 예제>>
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let obj1 = Object.create(Object.prototype);
let obj2 = Object.create(null, {
a: {
value: 3,
}
});
let obj3 = {b: 3, c: "안녕", d:false};
// Object.freeze
Object.freeze(obj1);
console.log(delete obj1); //false, 객체 전체를 바꿀 수 없다. 속성 추가 및 제거 설명 변경 불가능
console.log(Object.isFrozen(obj1)); //true
// Object.seal
Object.seal(obj2);
obj2.a = 5;
console.log(obj2.a); // 3, writable : true면 값 수정가능
console.log(delete obj2); //false, 속성 추가 및 제거 막고 configurable false로 바꿈
console.log(Object.isSealed(obj2)); //true
// Object.preventExtensions
Object.preventExtensions(obj3);
obj3.a = "안녕하세요";
console.log(obj3.a); //undefined , 속성의 추가를 막을 수 있다.
console.log(Object.isExtensible(obj3)); //false : 속성의 추가가 불가능 하기 때문에 false
// keys : 객체의 key를 가져와 배열로 만든다.
console.log(Object.keys(obj3)); // ['b', 'c', 'd']
</script>
</body>
</html>'Frontend > JavaScript' 카테고리의 다른 글
| JavaScript : 비동기를 처리하는 방법 (Async / Await) (0) | 2024.08.13 |
|---|---|
| JavaScript : DOM의 키보드 이벤트에 대해서 (0) | 2024.08.12 |
| JavaScript : 비동기를 처리하는 방법 (Promise) (0) | 2024.08.11 |
| JavaScript : Geolocation API를 사용하여 현재 위치를 가져와보자 (0) | 2024.08.11 |
| JavaScript : Symbol에 대해서 알아보자 (0) | 2024.08.06 |
| JavaScript : 사용자 지정 데이터 특성(dataset)을 이용해보자 (0) | 2024.08.05 |
| JavaScript : 구조분해할당(Distructuring)에 대해 알아보자 (1) | 2024.08.05 |
| JavaScript : Array관련 내장함수 (0) | 2024.08.04 |