new 연산자와 생성자 함수

객체 리터럴을 사용하면 객체를 만들 수 있다.

/* 객체 리터럴 */
const user = {
	name : "janggu",
	age : 25,
};

하지만 비슷한 객체를 여러 개 만들어야 할 경우가 있을 때, 객체 리터럴을 사용하기엔 너무 많은 중복이 일어난다.
그럴 때, new연산자와 생성자 함수를 사용하여 객체의 중복을 줄여보자.

---

생성자 함수

constructor function

생성자 함수는 함수의 첫 글자를 대문자로 시작해야 하고, 함수 앞에 new 연산자를 붙여 실행하는 컨벤션이 있다.

function User(name, age) {
	this.name = name;
	this.age = age;
}

const user = new User("짱구", 7);
 
console.log(user.name);  // "짱구"
console.log(user.age);   // 7

위의 생성자 함수는 const user와 동일하게 동작한다.

 

만약 “짱구” 객체만 필요한 게 아니고 훈이, 유리, 맹구 등등 같은 양식의 캐릭터 객체가 필요하다면

기존의 객체 리터럴이 아닌 생성자 함수를 사용하면 중복된 코드를 줄일 수 있을 것이다.

/* 객체 리터럴 */
const jjanggu = {
	name : "janggu",
	age : 7,	
};

const hunE = {
	name : "hunE",
	age : 7,	
};

/* new 연산자, 생성자 함수 */
function User(name, age) {
	this.name = name;
	this.age = age;
}

const  jjanggu = new User("jjanggu", 7);
const  hunE = new User("hunE", 7);

위처럼 유저 객체를 재사용하여 쉽게 객체를 생성할 수 있다.

---

생성자 함수로 객체 속성 삭제하기

미리 만들어 놓은 User함수 앞에 new 연산자와 함수 파라미터에 정보를 입력하면, 새로운 객체가 생성되는 것을 확인할 수 있었다.

그러면 생성한 객체의 속성를 삭제하고 싶다면 어떻게 해야 할까?

 

(객체 자체를 삭제할 수는 없다… 자바스크립트에서는 객체를 더 이상 참조하지 않으면 객체가 제거되어 삭제하려고 하지 않아도 된다.)

delete 를 사용해보자

const hunE = new User("훈이", 8)
//훈이의 이름과 나이가 담긴 객체를 생성했다.
delete hunE.age  // 훈이의 나이속성을 삭제했다.

console.log(hun.age);  // undefined
console.log(hun);      
/* User {
  name: '훈이',
  __proto__: { constructor: ƒ User() }
} */ 

훈이의 나이 속성은 삭제되어 undefined 가 출력되고, 객체 안에서도 삭제된 모습을 볼 수 있다.