Languages/Java Script

[Js] 표준 내장 객체의 확장 | Standard Built-in Object

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

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

표준 내장 객체의 확장

표준 내장 객체(Standard Built-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체들을 의미한다.

내장 객체가 중요한 이유는 프로그래밍을 하는데 기본적으로 필요한 도구들이기 때문에다. 결국 프로그래밍이라는 것은 언어와 호스트 환경에 제공하는 기능들을 통해서 새로운 소프트웨어를 만들어내는 것이기 때문에 내장 객체에 대한 이해는 프로그래밍의 기본이라고 할 수 있다.

자바스크립트는 아래와 같은 내장 객체를 가지고 있다.

Object
Function
Array
String
Boolean
Number
Math
Date
RegExp

언어자체가 제공하는 객체는 위와 같다. 하지만 자바스크립트가 동작하는 호스트 환경이 제공하는 API는 이것보다 더 많기 때문에, 이것을 함께 이용하여 우리가 소프트웨어를 만들게 되는 것이다.

이중 우리가 필요한 객체가 없다면 우리가 직접 만들고 사용할 수 있다. 이러한 것을 사용자 정의 객체라고 한다.

우리는 이 두가지(내장객체, 사용자 정의객체)를 살짝 섞어 사용할 수가 있다. 이때 장점을 한번 살펴보도록 하자.

배열을 확장

배열을 확장해보자. 아래 코드는 배열에서 특정한 값을 랜덤하게 추출하는 코드다.

<!DOCTYPE html>
<html>
<head>
	<title>배열의 확장</title>
</head>
<body>
<script type="text/javascript">
	var arr = new Array('seoul','new york','busan','hahaha','my house');
	function getRandom_Array(date){
		var index = Math.floor(date.length*Math.random()); //floor는 소수점을 제거하는 API
		return date[index];
	}
	console.log(getRandom_Array(arr));//함수 호출 시 인자로 arr를 줌.
	
</script>
</body>
</html>

위와 같이 코드를 짤 수도 있지만, 프로토 타입을 이용하면 더 세련된 방법으로 코드를 짤 수가 있다.

이 함수를 배열 객체에 포함시키는 방법을 사용하여 마치 배열에 내장된 메소드 인것 처럼 위의 기능을 사용해보자.

<script>
    Array.prototype.rand = function(){
        var index = Math.floor(this.length*Math.random());
        return this[index];
    }
    var arr = new Array('seoul','new york','ladarkh','pusan', 'Tsukuba');
    console.log(arr.rand());
</script>

메소드 이름도 짧아지게 되고, 코드도 매우 효율적이 된다.(가독성이 높아짐)

랜덤이라는 것을 추가하는 것을 통해 배열객체가 만들어지는 원형(Array), 배열객체의 원형에 랜덤이라는 메소드를 추가하게 되는 것이다.

위 코드에서 this가 가르키는 것은 Array자체이다.

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

[Js] 데이터 타입 \| 레퍼객체 \| 원시 데이터 타입 \| 객체 데이터 타입 (0)	2021.02.04
[Js] Object \| Object의 확장 \| Object API (0)	2021.02.04
[Js] prototype \| 상속 \| javascript 상속 (0)	2021.02.04
[Js] 상속 \| javascript상속 \| prototype (0)	2021.02.04

Contents

새소식

인기 검색어

[Js] 표준 내장 객체의 확장 | Standard Built-in Object

표준 내장 객체의 확장

배열을 확장

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

당신이 좋아할만한 콘텐츠

티스토리툴바