[Do it!] 05. 함수 [4.객체 생성자 함수의 활용, 5.내장함수]

객체 생성자 함수

내장 객체를 생성할 때는 이미 자바스크립트 엔진에 내장되어 있는 객체 생성자 함수(Object Constructor Function)를 사용해 객체를 생성

new 키워드를 사용해 객체를 생성하고 객체 생성자 함수에서 this 키워드를 사용해 생성한 객체에 속성과 함수를 등록

객체 생성자 함수의 함수명은 가능하면 대문자로 시작하도록 만드는 것이 좋음(개발자 간 약속)

 

기본형

function 함수명(매개변수1, 매개변수2, ... 매개변수n){		//객체 생성자 함수
	this.속성명 = 새 값;
    this.함수명 = function(){
    	자바스크립트 코드;
    }
}

var 참조 변수(인스턴스네임) = new 함수명();			//객체 생성

var 참조 변수 = {속성 : 새 값, 함수명:function(){...} }

 

메모리 절약을 위한 프로토타입 사용하기

객체 생성자 함수를 사용하면 객체를 생성한 만큼 함수가 등록됨 => 한 객체당 하나의 함수가 등록됨!

함수를 여러 개 등록하면 메모리 공간을 많이 차지하여 메모리를 낭비하게 됨

이럴땐, 객체 생성자 함수에 프로토타입(Prototype)을 사용하여 함수를 등록하면 메모리 낭비를 줄일 수 있음

프로토타입(Prototype)의 사전적 의미 : "원형"

자바스크립트에서 "원형"은 객체 생성자 함수를 의미함

프로토타입을 사용해 등록한 함수는 원형(객체 생성자 함수)에서 생성된 객체를 공유할 수 있음. 즉, 여러개의 함수를 등록할 필요가 없음

 

프로토타입으로 객체를 생성할 때 함수를 등록하는 기본형

function 함수명(매개변수1, 매개변수2, ... 매개변수n){
	this.속성명 = 새 값;
}

함수명.prototype.함수명 = function(){
	자바스크립트 코드;
}

var 참조 변수(인스턴스 네임) = new 함수명();

 

예시

function CheckWeight(name, height, weight){
    this.userName = name;
    this.userHeight = height;
    this.userWeight = weight;
    this.minWeight;
    this.maxWeight;
}

CheckWeight.prototype.getInfo = function(){
    var str = "";
    str += "이름 : " + this.userName + ", ";
    str += "키 : " + this.userHeight + ", ";
    str += "몸무게 : " + this.userWeight + "<br>";
    return str;
}

CheckWeight.prototype.getResult = function(){
    this.minWeight = (this.userHeight - 100) * 0.9 - 5;
    this.maxWeight = (this.userHeight - 100) * 0.9 + 5;

    if(this.userWeight >= this.minWeight && this.userWeight <= this.maxWeight){
        return "정상 몸무게입니다";
    } else if(this.userWeight < this.minWeight){
        return "정상 몸무게보다 미달입니다";
    } else{
        return "정상 몸무게보다 초과입니다";
    }
}


var jang = new CheckWeight("장보리", 168, 62);
var park = new CheckWeight("박달재", 180, 88);
console.log(jang);
console.log(park);

document.write(jang.getInfo());
document.write(jang.getResult(), "<br>");

document.write(jang.getResult === park.getResult);  //true : 두 객체가 같은 함수를 사용하고 있다는 의미

 

 

 

---

자바스크립트 내장 함수

자바스크립트 엔진에 내장된 함수

개발자가 함수를 직접 선언하지 않고, 바로 호출할 수 있음

종류	설명	사용 예
encodeURI()	문자를 유니 코드값으로 인코딩 (영문, 숫자, 일부 기호(; , / ? : @ & = + $) 제외)	encodeURI("?query=값"); → "?query=%EA%BO%91"
encodeURIComponent()	문자를 유니 코드값으로 인코딩 (영문, 숫자 제외)	encodeURIComponent("?query=값") → "%3Fquery%3D%EA%BO%91"
decodeURI()	유니코드 값을 디코딩해 다시 문자화	decodeURI(?query=%EA%BO%91) →"?query=값"
decodeURIComponent()	유니코드 값을 디코딩해 다시 문자화	decodeURIComponent("%3Fquery%3D%EA%BO%91") → "?query=값"
parseInt()	문자열 데이터를 정수형 데이터로 반환	parseInt("5.12") → 5 parseInt("15px") → 15
parseFloat()	문자열 데이터를 실수형 데이터로 반환	parseFloat("5.12") → 5.12 parseFloat("65.5%") → 65.5
String()	문자형 데이터로 반환	String(5) → "5"
Number()	숫자형 데이터로 반환	Number("5") → 5
Boolean()	논리형 데이터로 반환	Boolean(5) → true Boolean(null) → false
isNan()	is Not a Number의 약자 숫자가 아닌 문자가 포함되어 있으면 true 반환	isNan("5-3") → true isNan("53") → false
eval()	문자형 데이터를 따옴표가 없는 코드로 처리함	eval("15" + "5")  → 20