javascript 빌트인 object 이해하기(2-2) - String
javascript 빌트인 object 이해하기(2-1) - String
javascript 빌트인 object 이해하기(1) - Number
javascript 빌트인(Built-in) 이해하기
javascript 연산자(Operator) 이해하기
Prototype과__proto__
이해하기(1)
Prototype과__proto__
이해하기(2)
이번에 알아볼 자바스크립트의 빌트인 오브젝트는 Object이다.
보통 객체를 object라고 많이 표현하기때문에, String object와 같이 Object object로 표기하기도 해서 헷갈린다.
소문자 object는 객체를 의미하므로 프로퍼티를 가질 수 있다는 의미를 내포하고있고
앞에 대문자로 붙는 Object는 객체의 타입을 의미한다고 생각하면 된다.
(ES3기준)
new Number(123)
, new String(123)
의 경우엔, 각각 Number instance 와 String instance를 생성한다.
new Object(123)
의 경우는 어떨까? Object instance를 생성할까? 아니다. 파라미터의 데이터 타입에 따라 생성할 인스턴스가 결정된다.
String
, Number
, Object
등 가능)undefined
, null
이면 빈 Object
인스턴스 반환 {}new Object()
와 같다String
, Number
, Object
등 가능)undefined
, null
이면 빈 Object
인스턴스 반환 {}key:value
형식만 가능 (123, "123" 불가능) ( Object 인스턴스만을 반환 가능)new Object()
와 Object()
와 동일new Object()
와 Object()
와 동일하므로, 간단하여 자주 활용됨let newObj1 = new Object(123); // Number 인스턴스 생성
console.log(newObj1); // Number {123}
let newObj2 = Object("123"); // String 인스턴스 생성
console.log(newObj2); // String {123}
let newObj3 = {123}; // SyntaxError : Unexpected number
let newObj3 = {height:123} // 오브젝트 인스턴스 생성
Object
인스턴스의 프리미티브 값 반환true
, 존재하지 않을시 false
반환 ( 값의 존재여부는 따지지 않음)__proto__
에 존재하는 property)일 경우 false 반환const obj = {value : undefined};
console.log(obj.hasOwnProperty("value")); // 값에 상관없이 value라는 key가 존재하므로 true 반환
console.log(obj.hasOwnProperty("hasOwnProperty")); // Object 의 prototype에 hasOwnProperty가 존재하지만, 자신의 고유 property에는 존재하지 않기때문에 false를 반환
const point = {book:"책"};
console.log(point.toString()); // [object Object]
Object
에 메소드가 추가됨, 대신 이 메소드는 Object
의 protype
에 정의되어있지 않다. 따라서
Object
객체만이 활용함Object.메소드
형식으로 활용❓왜 prototype에 추가하지 않고, 자체 메소드로만 추가했을까?
❗prototype 내에 정의되어있다면, 대부분의 객체는 Object를 조상으로 삼기때문에 대부분의 빌트인 object 에 첨부되고, 이러한 빌트인 object를 통해 인스턴스 생성하면, Object의 prototype과 연결이 많이 발생 (Object 객체만이 활용가능한 메소드로 정의할 경우, 연결 부하를 줄일 수 있음)
Prototype과__proto__
이해하기(1)
Prototype과__proto__
이해하기(2)
false
)let obj = {};
Object.defineProperty(obj, "book",{
value : "JS책", // 프로퍼티 value 설정
enumerable : false // 프로퍼티 상태 결정
});
for (let name in obj){
console.log(name + ":" + obj[name]); // undefined(열거불가능))
}
defineProperty()
와 같음let obj = {};
Object.defineProperties(obj,{
soccer : {
value : "축구", enumerable : true
},
basketball : {
value : "농구", enumerable : true
}
});
for (let name in obj){
console.log(name + ":" + obj[name]); // soccer:축구 basketball:농구(열거가능)
}
setPrototypeOf()
는 ES5는 스펙에 없고, ES6에 존재 )객체.__proto__
보다는 Object.getPrototypeOf(객체)
와 같은 사용을 권장하고 있음enumerable
이 false
여도 반환됨)property descriptor : property의 속성 이름과 속성 값을 정의
위의 예시에선, 프로퍼티의 값(value)
속성에 값을 정의하고,enumerable
속성에 값을 할당하는 것이 보여졌다.
이처럼, ES5엔 value
뿐만 아니라 다양한 property descriptor 가 새로이 정의되었다.
descriptor type 분류
value
, writable
get
, set
enumerable
, configurable
descriptor type 인식 기준
❓ES5에서 상태를 결정할 수 있게 한 이유는?
❗오픈소스로 코드를 공개하게 될때, ES5전까지는 일부는 코드를 보고서 자신의 데이터에 접목?시킬 수도 있었다. 따라서, 이러한 속성을 활용하여 데이터를 보호하는 차원이 주된 이유 중 하나이다.
undefined
) get
/set
속성과 같이 작성 불가value
속성값 변경 가능(true
)/불가능(false
(default))false
일 경우, 변경 시도시 에러가 발생하지 않지만, 값이 변경되지 않음get
/set
속성과 같이 작성 불가for...in
으로 열거 가능(true
)/불가능(false
(default))true
)/불가능(false
(default))true
: value
이외 속성 변경 가능 / 프로퍼티 삭제 가능 false
: 프로퍼티 삭제 불가, value
이외 속성 변경 불가let obj ={};
Object.defineProperty(obj,"book",{
value :"JS책",
writable : false, // value 변경불가
configurable : true // value이외 속성값 변경 가능 / 프로퍼티 삭제 가능
});
obj.book = "goggling책";
console.log(obj.book); // JS책(value 변경안됨)
delete obj.book; // 프로퍼티 삭제 가능
console.log(obj.book); //undefined
undefined
객체.프로퍼티
를 호출할 때, value 속성이 정의되지 않았을 경우, get 함수의 리턴값 반환 value
와 함께 작성시 : 누굴 반환해야하지? 되므로 동시 작성 불가 / writable
과 함께 작성시 : 함수의 value값을 변경 가능/불가능을 설정하는 descriptor인데 value 값이 get과 존재할 수 없으므로 동시 작성 불가)객체.프로퍼티.get()
처럼 함수로 호출하면 에러 발생undefined
객체.프로퍼티 = value
를 작성할 때, value 속성이 정의되지 않았을 경우, set 함수에 해당 value
가 parameter로 들어가고, 리턴값을 프로퍼티에 할당함value
와 함께 작성시 : 누구의 값으로 설정하지? 되므로 동시 작성 불가 / writable
과 함께 작성시 : 함수의 value값을 변경 가능/불가능을 설정하는 descriptor인데 value 값을 변경할지, set의 return 값을 변경할지 알수없으므로 동시 작성 불가)객체.프로퍼티.set()
처럼 함수로 호출하면 에러 발생let obj = {}
Object.defineProperty(obj, "book", {
set : function(param){
obj.title = param.toUpperCase(); // parameter를 받아 대문자로 바꿔줌
},
get : function(){
return obj.title;
}
});
obj.book = "jsbook"
console.log(obj.book); //JSBOOK
Object.getOwnPropertyDescriptor(객체이름, property;
재해석 : 객체 확장 금지! (객체 몸집을 그만불려라..)
Object.preventExtensions(객체이름)
true
, false
]재해석 : 객체 밀봉! (객체의 형태를 건들 수 없습니다. 건드리려면 밀봉을 풀어주세요)
조금 헷갈리니깐...
다시 재해석 : 객체 밀봉! 외부에서 만지작거리는건 안되고(ex. defineProperty
와 같은 형태)
내부에서 속성값 변경은 가능(ex. 객체.프로퍼티 로 접근하여 변경)
true
,false
]❓ 객체의 프로퍼티 값이 객체라면? 객체의 객체(inner 객체)도 과연 동결이 될까요? 아니요.
❓ * inner 객체를 포함한 객체의 객체의 객체의 객체.... 를 모두 동결 시키려면 어떻게 해야할까요?❗이런 것을 수행하기 위한,
deepFreeze()
라는 개념도 존재한다.
Object.seal()
과의 비교 :Object.seal()
을 사용해 봉인된 객체는 존재하는 속성을 변경할 수 있습니다.Object.freeze()
로 동결된 객체에서는 존재하는 속성이 불변입니다.
true
,false
]이걸 다 외우는 건 있을 수 없는 일이고, 개념과 동작원리를 알고 나중에 필요할 때 서치하여 활용할 수 있는정도만 알아두면 충분할 것이다.
내용에 오류가 있으면 알려주시면 감사합니다!