Languages/Java Script

[Js] Object | Object의 확장 | Object API

해당 포스팅은 "생활코딩"의 이고잉 님의 강의를 기반으로 올린 게시글 입니다.

상업적인 용도가 아닌, 개인 공부 정리 목적으로 올리는 글임을 미리 알립니다.

Object

Object 객체는 객체의 가장 기본적인 형태를 가지고 있는 객체이다.

다시 말해서 아무것도 상속받지 않는 순수한 객체다. 자바스크립트에서는 값을 저장하는 기본적인 단위로 Object를 사용한다.

<script>
    var grades = {'haeun': 10, 'admin': 6, 'root': 80};
</script>

동시에 자바스크립트의 모든 객체는 Object 객체를 상속 받는데, 그런 이유로 모든 객체는 Object 객체의 프로퍼티를 가지고 있다.

예로 들자면, 이전시간에서 prototype을 통해 상속을 해보았는데, 그 중 최종 객체도 사실 상속을 받고 있다는 것이다.

즉, 최상위 상속자가 Object라고 생각하면 된다.(부모의 부모! 즉 모든 객체의 부모임)

이러한 특징을 활용한다면 Object의 prototype을 이용하여 모든 객체가 사용할 수 있는 메소드를 만들 수도 있다는 말과 같다.

아래는 Object 의 Object를 확인해 볼 수 있는 페이지이고, 그 아래 설명을 보며 한번 사용해보도록 하자!

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object

Object - JavaScript | MDN

Object 생성자는 객체 래퍼(wrapper)를 생성합니다.// 객체 초기자 또는 리터럴 { [ nameValuePair1[, nameValuePair2[, ...nameValuePairN] ] ] } // 생성자 new Object([value]) nameValuePair1, nameValuePair2, ... nameValuePairN 콜론으

developer.mozilla.org

www.youtube.com/watch?v=5OFbsj-UuIc&feature=emb_logo

아래는 Object API사용법 중, keys()와 toString()에 대한 설명을 담고 있다.

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/toString

Object.prototype.toString() - JavaScript | MDN

The toString() 은 문자열을 반환하는 object의 대표적인 방법이다 The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn

developer.mozilla.org

위 두가지를 보면 같은 Object의 API이지만, 하나는 가운데에 prototype이 붙고 다른 하나는 붙지 않았다.

이 두가지의 차이는 무엇일까?

Object.keys(arr) 는 결국 Object.keys = function()라는 뜻으로 여기에서 Object는 생성자 함수일 것이다.

하지만 Object.prototype.toString()은 Object라는 생성자 함수 . prototype. toString() = function()이라는 뜻이다.

프로토타입이라고 하는 특수한 프로포티에 저장되어 있는 객체를 원형으로 하는 객체가 생성되는 것이다.

즉 새로 만들어주는 객체의 프로토 타입으로 사용할 수 있는 것이다.

즉 쉽게 말하자면 Object는 모든 객체의 부모이고, 중간에 prototype이 들어간 API는 모든 객체에서 상속하여 사용할 수 있다는 것이며 이 말은 곧 우리가 만드는 애플리케이션에서 모든 객체가 공통적으로 가져야 하는 기능이 있다면 위의 기능을 통해 수정하고 만들 수 있다는 뜻이다.

그렇다면 실제로 우리가 필요한 Object 객체를 확장한 기능을 직접 구현해보자.

아래 코드는 배열의 값중 내가 입력한 값이 있다면 true 없다면 false를 리턴해주는 예제이다.

<!DOCTYPE html>
<html>
<head>
	<title> Object 확장</title>
</head>
<body>
<script type="text/javascript">
	Object.prototype.contain = function(fine) {//체크하려는 값이름 
	    for(var name in this){//하나하나 값을 찾기 위해 for in 사용 
	        if(this[name] === fine){
	            return true;
	        }
	    }
	    return false;
	}
	var o = {'name':'haeun', 'city':'seoul'}
	console.log(o.contain('haeun'));//this가 o가 됨.
	var a = ['haeun','admin','root'];
	console.log(a.contain('hacker'));//this가 a가 됨.
</script>
</body>
</html>

이렇게 object API의 상속을 이용하여 모든 객체가 사용하는 메소드를 만들 수 있지만 이것에 큰 문제가 하나 있다.

그렇다면 Object 확장의 위험은 무엇일까?

Object 객체는 확장하지 않는 것이 바람직하다. 왜냐하면 모든 객체에 영향을 주기 때문이다.

확장한 코드를 만든 후, 아래의 코드를 실행해보자.

<script>
    for(var name in o){
        console.log(name);  
    }
</script>

결과는 아래와 같다.

name
contain

위에서 확장한 코드를 예로 들어본다면, var o라는 변수에 내가 넣은 키 값은 name, city 두가지 뿐인데 이를

출력해보면 contain 즉, 프로토타입에 추가한 메소드가 함께 출력된다는 것이다.

위와 같은 문제는 개발자들에게 매우 혼란을 주기 때문에 이를 회피하기 위해 다음과 같은 방안이 있다.

<script>
    for(var name in o){
        if(o.hasOwnProperty(name))
            console.log(name);  
    }
</script>

프로퍼티의 해당 객체의 소속인지를 체크해볼 수 있는 hasOwnProperty를 사용하면 된다는 것이다.

hasOwnProperty는 인자로 전달된 속성의 이름이 객체의 속성인지 여부를 판단한다.

만약 prototype으로 상속 받은 객체라면 false가 된다.

hasOwnProperty는 Object가 가지고 있는 메소드 이고 프로퍼티에 해당하므로 모든 객체가 이 기능을 사용할 수 있다.

'Languages > Java Script' 카테고리의 다른 글

[Js] 참조 \| 복제 \| 함수와 참조 (0)	2021.02.04
[Js] 데이터 타입 \| 레퍼객체 \| 원시 데이터 타입 \| 객체 데이터 타입 (0)	2021.02.04
[Js] 표준 내장 객체의 확장 \| Standard Built-in Object (0)	2021.02.04
[Js] prototype \| 상속 \| javascript 상속 (0)	2021.02.04

Contents

새소식

인기 검색어

[Js] Object | Object의 확장 | Object API

Object

'Languages > Java Script' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바