자바스크립트 생성자 함수로 객체 생성, 출력, 추가, 삭제

자바스크립트 생성자 함수는 객체 상수에 비해서 객체 생성시 작성 코드 길이를 줄여줍니다. 생성자 함수는 첫 글자를 대문자로 작성합니다. 생성자 함수 내부의 변수(속성 및 메서드)는 this 키워드를 붙여서 지역변수로 한정시킵니다.

자바스크립트 객체 상수의 객체 생성 단점

객체 상수로 객체를 생성할 경우 속성과 메서드의 공통되는 부분을 반복적으로 작성해야 합니다.

예를 들어 삼성전자, 애플, 마이크로소프트 주식의 이름과 주가를 객체 상수로 작성할 경우 name, price와 같은 반복되는 명령어를 객체마다 같이 작성해줘야 합니다.

<script>
	//삼성전자 객체 생성
	var stock1 =
	{
		name : "samsung",
		price : 43750,
	}

	//애플 객체 생성
	var stock2 =
	{
		name : "apple",
		price : 213402,
	}

	//마이크로소프트 객체 생성
	var stock3 =
	{
		name : "microsoft",
		price : 49974,
	}
</script>

하지만, 생성자 함수를 사용해서 name, price와 같은 반복되는 속성이나 메서드를 미리 틀을 만들어놓을 수 있습니다. 이러면 나중에 객체를 생성할 때 속성명이나 메서드명을 반복적으로 작성할필요가 없습니다.

<script>
	//생성자 함수 생성
	function Stock(name, price)
	{
		this.company = name;
		this.cost = price;
	}

	//객체 생성
	var samsung = new Stock("삼성전자", 43750);
	var apple = new Stock("애플", 213402);
	var microsoft = new Stock("마이크로소프트", 49974);
</script>

생성자 함수 도식화 및 this 키워드

객체라는 점은 잠시 삭제하고, 개념적으로만 도식화하면, 생성자 함수는 일반 함수의 생성과 호출과 같은 프로세스를 보여주고 있습니다. 일반 사용자 정의 함수가 매개변수와 인수가 있는 것과 처리 결과는 비슷합니다.

Stock() 이라는 이름의 함수를 생성합니다. 매개변수는 a, b 입니다. 함수 내부에는 매개변수로 전달된 a, b를 함수의 지역 변수인 this.A, this.B에 각각 저장합니다. 그리고 함수 호출부에서 Stock(x, y)로 함수명과 인수를 삽입하면, 일반적인 함수랑 작동 구조는 동일합니다.

<script>
	//함수 생성
	function Stock(a, b)
	{
		this.A = a;
		this.B = b;
	}

	//함수 호출
	var invest = Stock(x, y);
</script>

여기서 함수내부를 보면 A = a, B = b가 아니라 앞에 this.가 붙은 이유는 해당 변수를 지역변수로 범위를 제한시키기 위함입니다.

또한 this는 return 제어문의 역할을 대신합니다. 그래서 return 제어문이 없어도 this로 지시된 값은 함수 호출 위치로 반환될 수 있습니다.

따라서 생성자 함수로 객체를 만드는 과정이 잘 이해가 가지 않는 다면, 그 이유는 객체에 대한 이해의 문제가 아니라 함수의 매개변수와 인수를 활용한 작동원리나 return 제어문 등의 원리가 헷갈리기 때문입니다. 그럴 경우 객체가 아닌 함수 파트를 다시 점검해보는 것이 도움이 될 것입니다.

생성자 함수 및 객체 생성

생성자 함수로 Stock() 을 만들었고, 매개변수로 name, price를 각각 지정했습니다.

함수 내부에는 this.company라는 속성(변수)에 name 매개변수를 삽입했고, this.cost라는 속성에 price 매개변수를 대입했습니다.

생성자로 틀을 만들었으면 이제는 객체를 만들 시간입니다. 원하는 객체명을 변수를 지정하듯이 var 키워드로 지정합니다. 이후 대입할 때 new라는 키워드를 앞에 붙이고 함수명(인수1, 인수2) 형식을 사용해서 객체안에 대입합니다.

<script>
	//생성자 함수 생성
	function Stock(name, price)
	{
		this.company = name;
		this.cost = price;
	}

	//객체 생성
	var samsung = new Stock("삼성전자", 43750);
	var apple = new Stock("애플", 213402);
	var microsoft = new Stock("마이크로소프트", 49974);

	//출력 확인
	document.write(samsung.company + "\t" + samsung.cost + "<br>");
	document.write(apple.company + "\t" + apple.cost + "<br>");
	document.write(microsoft.company + "\t" + microsoft.cost + "<br>");
</script>

결과

삼성전자	43750
애플	213402
마이크로소프트	49974

TRY IT ▷

this.속성명 = 매개변수 = 속성값

생성자 함수의 매개변수와 속성명이나 메서드명이 다를 필요는 없습니다. 그래서 이름을 같게 적을 수도 있습니다.

<script>
        	//생성자 함수 생성
        	function Stock(name, price)
        	{
        		this.name = name;
        		this.price = price;
        	}
        </script>

이 경우 출력시 객체명.속성값 이름을 samsung.name 및 apple.price 등으로 변경해야 할 것입니다.

<script>
	//생성자 함수 생성
	function Stock(name, price)
	{
		this.name = name;
		this.price = price;
	}

	//객체 생성
	var samsung = new Stock("삼성전자", 43750);
	var apple = new Stock("애플", 213402);
	var microsoft = new Stock("마이크로소프트", 49974);

	//출력 확인
	document.write(samsung.name + "\t" + samsung.price + "<br>");
	document.write(apple.name + "\t" + apple.price + "<br>");
	document.write(microsoft.name + "\t" + microsoft.price + "<br>");
</script>

결과

삼성전자	43750
애플	213402
마이크로소프트	49974

TRY IT ▷

객체 멤버 추가

생성자 함수로 객체를 생성하면, 멤버 추가는 일반적인 객체 생성 과정을 사용하면 쉽게 할 수 있습니다. 객체명을 변수로 지정하고, new 키워드로 생성자 함수와 매개변수를 삽입하면 됩니다.

<script>
	//생성자 함수 생성
	function Stock(name, price)
	{
		this.name = name;
		this.price = price;
	}

	//객체 생성
	var samsung = new Stock("삼성전자", 43750);
	var apple = new Stock("애플", 213402);
	var microsoft = new Stock("마이크로소프트", 49974);

	//새로운 객체 추가
	var mongodb = new Stock("몽고DB", 156607);
	var visa = new Stock("비자", 175879);

	//출력 확인
	document.write(samsung.name + "\t" + samsung.price + "<br>");
	document.write(apple.name + "\t" + apple.price + "<br>");
	document.write(microsoft.name + "\t" + microsoft.price + "<br>");
	document.write(mongodb.name + "\t" + mongodb.price + "<br>");
	document.write(visa.name + "\t" + visa.price + "<br>");
</script>

결과

삼성전자	43750
애플	213402
마이크로소프트	49974
몽고DB	156607
비자	175879

TRY IT ▷

객체 멤버 삭제

객체 멤버의 삭제는 delete 키워드를 사용합니다. 예를 들어 samsung 객체의 name 속성을 삭제하고 싶다면, delete samsung.name이라고 작성하면 속성이 삭제됩니다.

<script>
	//생성자 함수 생성
	function Stock(name, price)
	{
		this.name = name;
		this.price = price;
	}

	//객체 생성
	var samsung = new Stock("삼성전자", 43750);

	//멤버 삭제
	delete samsung.name;

	//삭제 확인
	document.write(samsung.name);
</script>

결과

undefined

TRY IT ▷

반복문으로 객체 멤버 일괄 출력

객체의 속성이나 메서드를 하나씩 출력하지 않고, 전체를 일괄 출력할 때 반복문을 사용할 수 있습니다.

객체의 속성명이나 메서드명을 출력하고 싶다면, 임의의 변수를 하나 지정해서 반복문에 삽입하면 됩니다. 이 때 객체의 범위를 한정시키기 위해서 in 객체명 형태를 반복문의 조건문 파트에 삽입합니다.

num 이라는 변수를 생성했고, in samsung의 의미는 samsung이라는 객체로 범위를 제한시킵니다. num 변수는 자동으로 samsung 객체안에 있는 속성명, 메서드명을 하나씩 의미하게 됩니다.

<script>
	//생성자 함수 생성
	function Stock(name, price, pbr, per, roe)
	{
		this.name = name;
		this.price = price;
		this.pbr = pbr;
		this.per = per;
		this.roe = roe;
	}

	//객체 생성
	var samsung = new Stock("삼성전자", 43750, 1.24, 7.30, 0.11);

	//객체 멤버 일괄 출력
	for (var num in samsung)
	{
		document.write(num + "<br>");
	}
</script>

결과

name
price
pbr
per
roe

TRY IT ▷

속성명 뿐만 아니라 속성값도 출력 하고 싶다면, 객체명[변수] 형태를 사용하면 됩니다.

<script>
	//생성자 함수 생성
	function Stock(name, price, pbr, per, roe)
	{
		this.name = name;
		this.price = price;
		this.pbr = pbr;
		this.per = per;
		this.roe = roe;
	}

	//객체 생성
	var samsung = new Stock("삼성전자", 43750, 1.24, 7.30, 0.11);

	//객체 멤버 일괄 출력
	for (var num in samsung)
	{
		document.write(num + " : " + samsung[num] + "<br>");
	}
</script>

결과

name : 삼성전자
price : 43750
pbr : 1.24
per : 7.3
roe : 0.11

TRY IT ▷

반복문의 변수를 지정하면, 자동으로 객체의 멤버로 지정이 됩니다.