[JavaScript] JavaScript 기본 문법 (7) - 객체 (4) - new 연산자와 생성자

생성자 (Constructor)

이거 뭐임? 이거 왜 씀?

객체를 생성할 때 사용하는 함수.

같은 프로퍼티들을 가진 비슷한 객체들을 여러 개 찍어내기 위해 만듬.

 

이거 어떻게 씀? (Constructor Usage)

• 생성자 명은 대문자로 시작하는 관례가 있음. (Ex. User, Default, Spring...)
• new 키워드를 통해 호출해야 함.
• this.(property) 를 통해 property를 명시.

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

let user1 = new User("Kim", 30);
let user2 = new User("Lee", 20);

console.log(user1);
console.log(user2);

// output :
// User { name: 'Kim', age: 30 }
// User { name: 'Lee', age: 20 }

어떻게 동작하는 건데?

1. 빈 객체를 생성함.
2. 생성한 빈 객체를 this 에 할당
3. 함수를 실행하여 객체의 프로퍼티를 추가!
4. 완성된 객체를 return.

 

생성자와 return문

위에서 본 것과 같이, 생성자에서는 만들어진 객체가 자동으로 return되기 때문에 return문이 필요 없다.

만약 return문을 사용한다면?

• return (객체) => 명시한 객체를 return.
• return (원시형 자료) => return문을 무시함.

과 같이 동작한다.

function Return_Object() {
    this.a = true;

    return { key1: "value1", key2: "value2" };
}
function Return_Primitive() {
    this.a = true;

    return 100;
}

let object = new Return_Object();
let primitive = new Return_Primitive();

console.log(object);
console.log(primitive);

// output :
// { key1: 'value1', key2: 'value2' }
// Return_Primitive { a: true }

Return_Object() 에서는 return문에서 명시한 객체가 return된다.

Return_Primitive() 에서는 return문을 무시하고 원래의 생성자 함수처럼 작동한다.

물론 생성자 함수에 return문을 쓸 일은 없다.

 

생성자와 Method

물론 메소드도 추가해줄 수 있다.

function User(name) {
    this.name = name;

    this.sayName = () => `My name is ${this.name}`;
}

let userKim = new User("Kim");

console.log(userKim.sayName());
// output : My name is Kim