[자바스크립트] 생성자 함수, 객체 생성

생성자 함수

 

생성자 함수는 일반 함수의 사용법과 큰 차이는 없다. 다음 두 가지의 규칙만 지키면 된다.

1. 함수의 첫 글자는 대문자로 작성한다.

2. 'new' 연산자를 붙여 사용한다.

 

생성자 함수를 사용하기 전에 객체를 다루는 것을 먼저 보자.

 

 

다음과 같이 person이라는 빈 객체가 있다.

let person = {}

 

객체에 데이터를 담는 방법은, 객체를 담고 있는 변수.원하는 변수 = "값"을 입력해 작성해 주는 것이다.

person.name = "MJ";

 

객체에 name이라는 변수를 담고, name이라는 변수에 "MJ"라는 문자열 값을 담은 것이다.

여기서 객체에 담긴 변수는 프로퍼티(property), 속성이라고 한다.

 

person.show = function () {
	console.log("my name is" + this.name);
};

 

이번엔 show라는 프로퍼티에 function을 담았다. 프로퍼티에 담긴 함수를 메소드라고 한다.

this.name에서 this는 show 함수가 담겨져 있는 객체 person을 가리킨다. 그리고 name은 그 객체의 name이라는 변수를 가리킨다. 따라서 this.name은 "MJ"가 된다. 전체 코드를 합쳐 보면 다음과 같다.

 

let person = {};
person.name = "MJ";
person.show = function (){
  console.log("my name is " + this.name);
}

 

객체를 정의하는 것과 프로퍼티가 분리되어 있다. 중간에 다른 코드가 끼어들 수 있어 좋지 못하다. 따라서 다음과 같이 객체를 시작하고 닫는 { } 사이에 프로퍼티와 메소드를 직접 정의하는 게 좋다.

 

그러나 여기에도 문제가 있다. person이라는 객체를 여러 번 사용하게 된다면? 코드는 다음과 같아진다.

 

let person1 = {
	'name' : 'MJ',
	'show' : function () {
		console.log('my name is ' + this.name);
	}
};
let person2 = {
	'name' : 'Mieumje',
	'show' : function () {
		console.log('my name is ' + this.name);
	}
};

 

person1과 person2라는 객체를 생성했는데 공통된 부분이 반복되어 작성되고 있다. 객체를 생성할 때마다 name과 show를 정의해야 하는 번거로움이 생긴 것이다.

 

이러한 이슈를 해결하기 위해 생성자 함수를 사용한다.

 

생성자 함수 사용법

생성자는 한마디로 객체(Object)를 만드는 역할을 하는 함수이다. 

 

function Person(){}
let a = Person();
console.log(a); //undefined


let b = new Person();
console.log(b); // Person {}

 

a라는 변수에서 Person()이라는 함수를 호출해 출력해보면 undefined가 출력되고 b라는 변수에서 new를 앞에 작성하고 Person()이라는 함수를 호출해 출력하면 Person { }이라는 빈 객체가 출력된다.

 

'new'라는 것을 앞에 쓰고 함수를 호출하면, 함수는 객체의 생성자가 된다.

즉 'new'를 작성하고 함수를 호출하면 return 값은 객체가 된다.

 

다시 돌아와서 자바스크립트에서 생성자를 사용하는 규칙은 다음과 같다.

1. 함수의 첫 글자는 대문자로 작성한다.

2. 'new' 연산자를 붙여 사용한다.

위에서 작성했던 예시를 생성자 함수를 통해 작성하면 다음과 같다.

 

생성자 함수 및 객체 생성하기

 

// 생성자 함수
function person(name) {
	this.name = name;
  this.show = function(){
    console.log('my name is ' + this.name);
  };
};


// 객체 생성
let person1 = new person('MJ');
let person2 = new person('Mieumje');

person1.show(); // my name is MJ
person2.show(); // my name is Mieumje

 

이렇게 작성하면 객체를 생성할 때 속성 명이나 메소드를 반복적으로 작성하지 않아도 된다.

 

객체 멤버 삭제하기

 

function person(name) {
	this.name = name;
  this.show = function(){
    console.log('my name is ' + this.name);
  };
};


let person1 = new person('MJ');
let person2 = new person('Mieumje');

person1.show();
person2.show();

// 멤버 삭제
delete person2.name;
person2.show(); // my name is undefined

 

person2 객체의 name을 삭제했기 때문에 person2.show()를 호출하면 name이 undefined가 되어있다.

 

반복문으로 객체 멤버를 호출하기

 

function person(name) {
	this.name = name;
  this.show = function(){
    console.log('my name is ' + this.name);
  };
};


let person1 = new person('MJ');
let person2 = new person('Mieumje');

person1.show();
person2.show();

for(let x in person1){
  console.log(x);
}
// name, show 출력

 

x라는 변수에 person1 객체의 속성명, 메서드명을 하나씩 담아 출력한다.

이에 해당하는 값을 출력하고 싶은 경우에는 다음과 같이 작성한다.

 

function person(name) {
	this.name = name;
  this.show = function(){
    console.log('my name is ' + this.name);
  };
};


let person1 = new person('MJ');
let person2 = new person('Mieumje');

person1.show();
person2.show();

for(let x in person1){
  console.log(person1[x]);
}

 

 

---

우아한 테크코스 프리코스 1주 차를 진행하고, 2주차를 진행하기 앞서 생성자를 익혀야할 필요성을 느끼게 되어 찾아보고 공부했다. 1주차 미션을 진행하면서 생성자를 사용하지 못해 마지막 즈음에 리팩토링 하는 과정에서 어려움을 많이 겪었고, 제대로 완성하지 못했다. 생성자를 잘 사용할 수 있도록 반복 사용하면서 익히고 미완성 된 1주차 과제를 보완해야겠다.