2024.09.24 (Day 13) - JavaScript OOP / 생성자 함수

생성자란?

 

• 객체지향 프로그래밍에서 중요한 용어이다.

한마디로 정의하면 어떤 객체의 모형이 있고 그 모형으로 객체를 만들어주는 역할자를 생성자라고 한다.

소프트웨어 언어마다 객체의 모형을 정의하고 이 모형을 통해 객체를 만드는 방법에는 차이가 있지만

모든언어에서 이 객체를 만드는 작업을 “객체를 생성한다” 라는 표현을 하고

그 객체 생성 역할을 하는 것을 “생성자”라고 한다.

 

생성자 함수

▼ 객체 모형을 이용한 객체 생성

• 동일한 멤버로 구성되는 객체를 여러 개 만드는 경우에는 객체를 만드는 모형이 하나 선언하고 그 모형을이용해 여러 개의 객체를 쉽게 만드는 방법이 있으면 쉬울 것 이다.

객체를 만드는 모형을 선언하고 그 모형을 이용해 객체를 생성하는 방법은 2가지가 있으며

생성자 함수를 이용해 객체 생성 하거나 클래스를 이용해 객체 생성 한다.

 

▼ 생성자 함수란

• 생성자 함수는 객체를 만드는 역할을 하는 함수라는 의미입니다.

어떤 업무를 위해 필요한 코드를 담고 그 함수가 호출되었을 때

함수내의 코드가 실행되는 일반 함수와 문법적인 차이는 없다.

단지 일반 함수 선언하듯이 선언되었는데 그 함수는 어떤 업무의 로직을 실행시키기 위한 목적이 아니라

객체를 생성하는 목적으로 선언된 함수라는 의미에서 생성자 함수라고 부른다.

 

또한 생성자 함수는 관습상 일반 함수와 구분하기 위해서 첫 글자를 대문자로 선언한다.

 

▼ new 연산자를 이용해 객체 생성

• 생성자 함수도 함수이다. function 예약어로 선언되고 매개변수가 있을 수 있으며 외부에서 함수를 호출해서 사용한다.

그런데 생성자 함수는 객체를 생성하기 위한 함수이며 이 생성자 함수를 호출해서 객체를 생성할 때는

new연산자를 이용해야 하고 new 는 예약어이며 흔히 객체생성 연산자라고 부른다.

 

• new 라는 의미 자체가 객체를 새로 생성하겠다는 것임으로 함수 호출과 동시에 객체가 자동으로 만들어지며 그 객체에 this로 멤버들을 등록하며 아래와 같이 만들어진 객체가 최종 생성한 곳에 자동으로 반환하게 된다.

 

• new를 이용하지 않고 함수를 호출하게 되면 명시적으로 객체를 생성하겠다고 선언한 것이 아님으로 객체가 자동으로 만들어지지 않는다.

 

▼ this 예약어로 객체 멤버 등록

• 함수내에는 변수와 다른 함수가 선언될 수 있다.

그런데 함수가 생성자 함수로 이용된다면 함수내에 선언된 변수와 함수는 객체에 포함되어야 한다.

• 객체에 포함될 변수, 함수는 this 예약어로 선언되어야 하며

this 예약어를 사용하지 않은 변수, 함수는 생성되는 객체와 관련없다.

 

• 생성자 함수에 의해 생성되는 객체에 등록되어야 하는 변수, 함수는 this 예약어로 등록해 주어야 한다.

 

 

▼ 생성자 함수의 리턴 값

• 일반 함수는 함수가 실행되고 결과 값을 함수 호출한 곳에 반환하기 위해서는 return 에약어를 이용한다.

그런데 생성자 함수는 객체 생성이 주 목적임으로 new 연산자로 함수를 호출하게 되면 자동으로 만들어지는 객체가 return 예약어를 사용하지 않아도 자동으로 반환하게 된다.

 

만약 생성자 함수에서 return 구문을 사용하게 되면 어떻게 될까?

return 구문을 생성자 함수에서 사용한다고 문제되지는 않는다.

단지 return 에 의해 반환되는 값이 기초 데이터인지 객체인지에 따라 차이가 있다.

 

• new 로 호출되는 생성자 함수에서 이처럼 기초 데이터를 return 시키면

이 return 은 무시되며 자동으로 만들어진 객체가 반환하게 된다.

 

• 생성자 함수에서 명시적으로 return 을 이용해 특정 객체를 반환한다면 자동으로 생성된 this 객체는 무시된다.

 

▼ 외부에서 멤버 추가

• 생성자 함수로 객체를 생성한 후에 원한다면 그 객체에 변수, 함수등의 멤버를 추가할 수 있다..

또한 생성자함수로 생성한 객체에 원한다면 멤버를 추가할 수 있고,

멤버를 추가하게 되면 동일한 생성자 함수로 선언된 객체끼리 상이한 멤버를 가지게 할 수 있게 된다.

 

"use strict";

//일반 함수 선언. this 로 멤버 준비되지 않은 경우.
function User1(arg1, arg2){
  //함수 내에 변수및 함수가 선언
  //함수 scope 내에 선언된 함수의 로컬 멤버
  let name = arg1
  let age = arg2
  let sayHello = function(){
    console.log(`User1, ${name}, ${age}`)
  }
  sayHello()
}
//일반 함수로 호출 ==>정상, 함수가 일반 함수로 준비되어 있기 때문에 문제X
User1('홍길동', 20)//User1, 홍길동, 20

//객체 생성으로 호출.
//new 를 이용했기 때문에 this 는 준비된다.(메모리는 준비된다.)
//하지만 함수내에서 this.xxx 으로 this 에 아무것도 추가되지 않은 상태다 즉 빈상태의 객체
//그 객체내에는 name, age 없다. sayHello() 함수 없다
let obj1 = new User1('홍길동', 30)
console.log(`${obj1.name}, ${obj1.age}`)//undefined, undefined
// obj1.sayHello()//error


//생성자 함수로 준비
function User2(name, age){
  this.name = name
  this.age = age
  this.sayHello = function(){
    console.log(`${this.name}, ${this.age}`)
  }
}
//일반 함수로 이용..
//new 를 이용하지 않았음으로 this 가 준비되지 않는다. 그 상태에서 함수내에서 this 이용시 에러
// User2('홍길동', 20)//error

//객체 생성으로 이용..
//모형(생성자함수)을 선언하고, 모형을 통해 동일 구조의 객체를 반복 생성
let user1 = new User2('홍길동', 25)
let user2 = new User2('김길동', 30)
user1.sayHello()//홍길동, 25
user2.sayHello()//김길동, 30


//생성자 함수와 리턴
//생성자 함수가 new 로 호출이 되면 함수 내에서 명시적으로 return 시키지 않아도 생성된 객체가 리턴

//명시적으로 기초 데이터를 리턴 시킨 경우
function User3(name, age){
  this.name = name
  this.age = age
  return 10
}
let user3 = new User3('홍길동', 30)
console.log(user3)//User3 {name: '홍길동', age: 30}
//==>기초 데이터 리턴시키면 무시되고 생성된 객체가 반환된다.

//명시적으로 코드에서 준비한 다른 객체를 리턴시킨다면
function User4(name, age){
  this.name = name
  this.age = age
  return {
    prodNo: 1,
    prodName: '에어조던'
  }
}
let user4 = new User4('홍길동', 30)
console.log(user4)//{prodNo: 1, prodName: '에어조던'}
//객체를 리턴시키면 생성된 객체는 무시, 코드에서 리턴시킨 객체가 반환


//외부에서 객체 멤버 추가
console.dir(user1)
console.dir(user2)
//외부에서 추가 가능
user1.address = 'seoul'
user1.helloFun = function(){
  console.log('hello')
}
//추가한 객체에만 멤버가 존재.
//동일한 생성자 함수로 생성된 객체라고 하더라도 외부에서 멤버 추가하기 시작하면
//객체별 멤버가 다르게 된다.
console.dir(user1)
console.dir(user2)