자바스크립트 학습 28일차

# 자바스크립트 학습

# Object 오브젝트 (ES5)

## ES5 Object의 특징

• 함수가 추가 (추가된 메소드는 없음)
• 빌트인 Object의 모든 메소드는 대부분 빌트인 오브젝트에 첨부됨
• 빌트인으로 오브젝트를 생성하므로 연결이 많이 발생한다.
• 함수는 첨부되지 않으므로 연결 부하를 줄일 수 있다.

 ## ES5 Object 함수

이름	개요
defineProperty()	프로퍼티 추가, 프로퍼티 속성 변경
defineProperties()	다수의 프로퍼티 추가, 속성 변경
getPrototypeOf()	prototype에 연결된 프로퍼티 반환
getOwnPropertyNames()	프로퍼티 이름을 배열로 반환
keys()	열거 가능 프로퍼티 이름 반환
getOwnPropertyDescriptor()	디스크립터 속성 반환
preventExtensions()	프로퍼티 추가 금지 설정
isExtensible()	프로퍼티 추가 금지 여부 반환
seal()	프로퍼티 추가, 삭제 금지 설정
isSealed()	프로퍼티 추가, 삭제 금지 여부 반환
freeze()	프로퍼티 추가, 삭제/변경 금지 설정
isFrozen()	프로퍼티 추가, 삭제/변경 금지 여부 반환

## 프로퍼티 디스크립터

이름	개요
value	[[Value]], 설정할 값
writable	[[Writable]], 값 변경 가능 여부
get	[[Get]], 값 반환 프로퍼티 함수
set	[[Set]], 값 설정 프로퍼티 함수
enumerable	[[Enumerable]], 프로퍼티 열거 가능 여부
configurable	[[Configurable]], 프로퍼티 삭제 가능 여부

 

# Object 프로퍼티 추가

## defineProperty()

구분	데이터(값)
object	Object 오브젝트
파라미터	대상 오브젝트
	프로퍼티 이름
	속성
반환	대상 오브젝트

• 대상 오브젝트에 프로퍼티 추가 또는 프로퍼티 속성 변경
• 프로퍼티마다 상태를 갖고 있다.

상태란?
변경/삭제/열거 가능 여부
상태가 가능일 때만 처리 할 수 있다.
프로퍼티를 추가할 때 상태를 결정한다.

var obj = {};
Object.defineProperty(obj, "book", {
	value: "JS북",
    enumerable: true
});

log(obj);

=>
{book: JS북}

첫 번째 파라미터에 프로퍼티를 추가할 오브젝트(obj) 작성
두 번째 파라미터에 프로퍼티 이름(book)를 작성
세 번째 파람티ㅓ {value: "JS책"} 에서 value는 프로퍼티 값을 나타내는 속성,
"JS책"은 value의 속성 값으로 [실행 결과]처럼 프로퍼티 값이 된다.

## defineProperties()

구분	데이터(값)
object	Object 오브젝트
파라미터	대상 오브젝트
	프로퍼티 이름과 속성
반환	대상 오브젝트

• 다수의 프로퍼티를 추가하거나 속성을 변경한다.
• 함수 기능은 defineProperty()와 같다.

var obj = {};
Object.defineProperties(obj, {
	soccer: {
    	value: "축구", enumerable: true
    },
    basketball: {
    	value: "농구", enumerable: true
    }
});

for (var name in obj) {
	log(name + ":" + obj[name]);
};

=>
soccer: 축구
basketball: 농구

 

# 프로퍼티 디스크립터

## 프로퍼티 디스크립터

타입	속성 이름	속성 값	디폴트 값	개요
데이터	value	JS 지원 데이터 타입	undefined	프로퍼티 값으로 사용
	writable	true, false	false	false: value 값 변경 불가
악세스	get	Function Object, undefined	undefined	프로퍼티 함수
	set	Function Object, undefined	undefined	프로퍼티 함수
공용	enumerable	true, false	false	false: for-in으로 열거 불가
	configurable	true, false	false	false 프로퍼티 삭제 불가:

• 프로퍼티 디스크립터(Descriptor) : 프로퍼티의 속성 이름과 속성 값을 정의한다.
• 디스크립터 타입 분류

데이터 프로퍼티 디스크립터
악세스(Access) 프로퍼티 디스크립터
공용 프로퍼티 디스크립터
디스크립터 타입에 속한 속성만 같이 사용할 수 있다.

## 디스크립터 타입 인식 기준

타입	속성 이름
데이터	value
	writable
악세스	get
	set
고용	enumerable
	configurable

• 먼저 value 또는 writable 작성 체크
• 작성되어 있으면 데이터 프로퍼티 디스크립터 타입으로 인식
• 작성되어 있지 않으면 악세스 프로퍼티 디스크립터 타입으로 인식
• 데이터와 악세스 프로퍼티 디스크립터를 함께 작성할 수 없으므로 구분 가능

## value 속성

• 프로퍼티 값을 {value: "JS북"} 형태로 작성, for~in에서 "JS북"이 프로퍼티 값이 된다.

var obj = {};
Object.defineProperty(obj, "book", {
	value: "JS북",
    enumerable: true
});

for (var name in obj) {
	log(name);
    log(obj[name]);
};

=>
book
JS북

• value 속성을 get/set 속성과 같이 작성 불가능하다.

var obj = {};
Object.defineProperty(obj, "book", {
	value: "JS북",
    // get: function() {}
});

## writable

• 프로퍼티 값 변경 가능, 불가
• writable : true 의 경우 프로퍼티 변경 가능

var obj = {};
Object.defineProperty(obj, "book", {
	value: "JS책",
    // 변경 가능
    writable: true
});
obj.book = "변경 가능";
log(obj.book);

=>
변경 가능

• writable : false 의 경우 프로퍼티 변경 불가, 에러가 발생하지 않지만 값이 변경되지 않는다.

var obj = {};
Object.defineProperty(obj, "book", {
	value: "JS책",
    // 변경 불가
    writable: false
});
obj.book = "변경 불가";
log(obj.book);

=>
JS책

## enumerable 속성

• for~in으로 열거 가능 여부를 설정
• enumerable: true의 경우 프로퍼티 열거 가능

var obj = {};
Object.defineProperty(obj, "book", {
	value: "JS북",
    // 열거 가능
    enumerable: true
});

for (var name in obj) {
	log(name, ":" + obj[name];
};

=>
book:JS북

• enumerable: false의 경우 프로퍼티 열거 불가, 디폴트 값: false

var obj = {};
Object.defineProperty(obj, "book", {
	value: "JS북",
    // 열거 불가
    enumerable: false
});

for (var name in obj) {
	log(name, ":" + obj[name];
};

=>

## configurable

• 프로퍼티 삭제 가능, 불가능 여부
• configurable: true인 경우 프로퍼티 삭제 가능, value 이외 속성 변경 가능

var obj = {};
Object.defineProperty(obj, "book", {
	value: "JS북",
    //삭제 가능
	configurable: true
});

delete obj.book;
log(obj.book);

=>
undefined

• configurable: false인 경우 프로퍼티 삭제 불가, value 이외 속성 변경 불가, 디폴트 값: false

var obj = {};
Object.defineProperty(obj, "book", {
	value: "JS북",
    //삭제 불가
	configurable: true
});

delete obj.book;
log(obj.book);

=>
JS북

 

# getter, setter

## get 속성

• getter는 OOP의 용어로 객체지향 프로그래밍을 지원하는 언어에서 사용 가능하다.
• 프로퍼티로 값을 구할 때 value 속성이 없으면 get 속성을 호출

var obj = {};
Object.defineProperty(obj, "book", {
	get: function() {
    	return "JS책";
    }
});

var result = obj.book;
log(result);

=>
JS책

var result = obj.book; 코드를 만나면
obj.book의 get 함수가 호출되며 get 함수에서 "JS책"을 반환
반환된 "JS책"을 result 변수에 할당

• obj.book.get() 처럼 함수로 호출하면 에러 발생

## set 속성

• setter는 OOP의 용어로 객체지향 프로그래밍을 지원하는 언어에서 사용 가능하다.

var obj = {};
Object.defineProperty(obj, "book", {
	set: function(param) {
    	data.title = param;
    },
    get: function() {
    	return data.title;
    }
});

obj.book = "JS책";
log(obj.book);

=>
JS책

obj.book = "JS책"; 코드를 만나면
obj.book의 set 함수를 호출하면서 "JS책"을 파라미터 값으로 넘겨 준다.
data의 title 프로퍼티에 "JS책"을 설정

obj.book; 코드를 만나면
obj.book의 get 함수가 호출되며 get 함수에서 data.title 값을 반환
setter에서 설정한 "JS책"이 반환된다.

 

# 프로퍼티 추출

## getPrototypeOf()

구분	데이터(값)
object	Object 오브젝트
파라미터	대상 인스턴스
반환	프로퍼티

• 파라미터의 prototype에 연결된 프로퍼티를 반환

function Book(point) {
	this.point = point;
};

Book.prototype.getPoint = function() {};
Book.prototype.setPoint = function() {};
var obj = new Book(100);

var result = Object.getPrototypeOf(obj);
for (var key in result) {
	log(key + ":" + result[key]);
};

=>
getPoint: function() {}
getPoint: function() {}

파라미터에 인스턴스를 작성
인스턴스를 생성한 function 오브젝트의 prototype에 연결된 프로퍼티를 반환
생성자 함수인 Book을 작성하거나 Book.prototype을 작성하면 반환하지 않는다.
this.point는 prototype에 연결되어 있지 않으므로 반환되지 않는다.

• setPrototypeOf()가 ES5 스펙에는 없고 ES6에 있다.

## getOwnPropertyNames()

구분	데이터(값)
object	Object 오브젝트
파라미터	대상 오브젝트
반환	[프로퍼티 이름]

• 오브젝트의 프로퍼티 이름을 배열로 반환
• 열거 가능 여부를 체크하지 않는다.
• 자신이 만든 프로퍼티가 대상, 다른 오브젝트에서 받은 프로퍼티는 제외한다.

var obj = {};
Object.defineProperties(obj, {
	book: {value: "책"},
    point: {value: 123}
});

var name = Object.getOwnPropertyNames(obj);

for (var k = 0; k < name.length; k++) {

	log(names[k]);
};

=>
book
point

## keys()

구분	데이터(값)
object	Object 오브젝트
파라미터	대상 오브젝트
반환	프로퍼티 이름

• 열거 가능 프로퍼티 이름을 반환 (enumerable: true)

var obj = {};
Object.defineProperties(obj, {
	book: {
    	value: "책", enumerable: true
    },
    point: {value: 123}
}):

var names = Object.keys(obj);

for (var k = 0; k < names.length; k++) {
	log(names[k]);
};

=>
book

 

#  프로퍼티 디스크립터 함수

## getOwnPropertyDescriptor()

구분	데이터(값)
object	Object 오브젝트
파라미터	대상 오브젝트
	프로퍼티 이름
반환	디스크립터

• 프로퍼티 디스크립터의 속성 이름, 값을 반환한다.
• 다른 오브젝트에서 받은 프로퍼티는 제외 

var obj = {};
Object.defineProperty(obj, "book", {
	value: "책",
    writable: true, enumerable: true
});

var desc = 
Object.getOwnPropertyDescriptor(obj, "book");

for (var key in desc) {
	log(key + ":" + desc[key]);
};

=>
value: 책
writable: true
enumerable: true
configurable: false

## preventExtensions()

구분	데이터(값)
object	Object 오브젝트
파라미터	대상 오브젝트
반환	대상 오브젝트

• 오브젝트에 프로퍼티 추가 금지 설정
• 프로퍼티 삭제, 변경은 가능
• 추가 금지를 설정한 후에는 추가 가능으로 변경 불가

var obj = {};
Object.preventExtensions(obj);
try {
	Object.defineProperty(obj, "book", {
    	value: "책"
    });
} catch (e) {
	log("추가 불가");
};

=>
추가 불가

추가 금지 상태에서 프로퍼티를 추가하면 에러 발생

## isExtensible()

구분	데이터(값)
object	Object 오브젝트
파라미터	대상 오브젝트
반환	true / false

• 오브젝트에 프로퍼티 추가 금지 여부 반환
• true일 경우 추가 가능, false일 경우 추가 불가

var obj = {};
Object.defineProperty(obj, "book", {
	value: "책",
});

log(Object.isExtensible(obj));

Object.preventExtension(obj);

log(Object.isExtensible(obj));

=>
true
false

## seal()

구분	데이터(값)
object	Object 오브젝트
파라미터	대상 오브젝트
반환	대상 오브젝트

• 오브젝트에 프로퍼티 추가, 삭제 금지 설정
• 추가 금지는 오브젝트 단위로 설정하고, 삭제 금지는 프로퍼티 단위로 설정한다.
• 추가 금지를 하더라도 변경은 가능하다.

var obj = {};
Object.defineProperty(objm "book", {
	value: "책", writable: true
});

Object.seal(obj);
try {
	Object.defineProperty(obj, "sports", {
    	value: "스포츠"
    });
} catch (e) {
	log("추가 불가");
};

=>
추가 불가

## isSealed()

구분	데이터(값)
object	Object 오브젝트
파라미터	대상 오브젝트
반환	true / false

• 오브젝트에 파라미터 추가, 삭제 금지 여부 반환
• trus일 경우 불가, false일 경우 가능

var obj = {};
Object.defineProperty(obj, "book", {
	value: "책", writable: true
});

log(Object.isSealed(obj));

Object.seal(obj);
log(Object.isSealed(obj));

=>
false
true

## freeze()

구분	데이터(값)
object	Object 오브젝트
파라미터	대상 오브젝트
반환	대상 오브젝트

• 오브젝트에 프로퍼티 추가, 삭제, 변경 금지 설정

var obj = {};
Object.defineProperty(obj, "book", {
	value: "JS책", writable: true
});

Object.freeze(obj);
try {
	Object.defineProperty(obj, "book", {
    	value: "포인트"
    });
} catch (e) {
	log("변경 불가");
};

log(obj.book);

=>
변경 불가
JS책

## isFrozen()

구분	데이터(값)
object	Object 오브젝트
파라미터	대상 오브젝트
반환	true / false

• 오브젝트에 프로퍼티 추가, 삭제, 변경 금지 여부 반환
• true일 경우 불가, false일 경우 가능

var obj = {};
Object.defineProperty(obj, "book", {
	value = "책",
    writable: true
});

log(Object.isFrozen(obj));

Object.freeze(obj);
log(Object.isFrozen(obj));

=>
false
true