생성자 함수?

• 생성자 함수는 JavaScript에서 객체를 생성하기 위해 사용되는 특수한 함수입니다.
  new 키워드를 붙이지 않으면 일반 함수와 동일합니다.

• 함수 에서 this를 사용합니다.
  (반환되는 객체의 초기 상태와 행위를 정의)

---

• 생성자 함수명은 대문자로 시작합니다.
• 함수를 호출할 때 앞에 new 키워드를 붙여 호출합니다.
  (new 키워드를 사용하지 않으면 객체를 반환하지 않음)

<script>
function User(name) { // 대문자로 시작
  this.name = name;
  this.isAdmin = false;
}

let user = new User("조두찌"); // new 키워드 붙임

alert(user.name); // 조두찌
alert(user.isAdmin); // false
</script>

---

생성자 함수의 new 호출을 통한 객체 생성 과정

1. 빈 객체를 암시적으로 만들어 this에 할당합니다.
2. this에 새로운 프로퍼티를 추가합니다.
3. new 키워드를 붙여 함수 본문을 실행합니다.
4. this를 수정합니다.
5. this를 암시적으로 반환합니다.

<script>
function User(name) { // name은 함수의 매개변수 입니다. "두찌" 인수가 여기로 전달됩니다.
  // (1. 빈 객체를 만든 후 this에 할당. 암시적으로 만들어집니다.)
  // this = {}; 

  // (2. this에 새로운 프로퍼티를 추가)
//user.name과 같은 말
  this.name = name; // this는 생성자 함수를 호출한 객체이기 때문에 변수 user가 됩니다.
  // this.name == key, name == value 밸류 값이 두찌로 변경됩니다.
  this.isAdmin = false;
}

  // (3. new 키워드를 붙여 함수 본문을 실행합니다.) 
  // (4. this를 수정합니다. User의 매개변수 name으로 전달되니 this.name만 수정되겠죠? isAdmin은 수정되지 않습니다.)
  let user = new User("두찌"); // "두찌" 인수를 함수의 매개변수로 전달합니다.
  // ⬆️ 이 코드는 입력하면 ⬇️ 아래와 같이 동작합니다.
  /** 
  let user = { // user라는 변수에 객체를 저장한 것
  name: "두찌",
  isAdmin: false,
  };
  **/
  
  let user = new User(); // 변수 user의 객체가 생성자 함수로 전달됨.
  user.name = "두찌"  /** 생성자 함수로 이미 전달되었기 때문에 
  변수이름.key = "value" 가 됩니다. **/
  // 생성자 함수의 this는 생성자 함수를 호출한 객체이기 때문에 변수 user가 됩니다. 그래서 user.name을 변경하면 생성자 함수로 전달되는 것입니다.
  // ⬆️ 이렇게 입력해도 됩니다.

  // (5. this를 암시적으로 반환)
  // return this;
}
</script>

---

생성자 함수의 this

• this는 쉽게 말하자면 자기 자신으로,
  생성자 함수를 호출한 객체를 의미합니다.
  아래 예시에선 변수 user의 객체를 말합니다.
  (주석 처리된 문을 보면 이해가 됩니다.)

<script>
function User(name) { 

  this.name = name;
  this.isAdmin = false;
}

  let user = new User("두찌");
  /**
  let user = {
  name: "두찌",
  isAdmin: false
  };
  **/
  User.name = "두찌"
}
</script>

---

생성자 함수는 왜 필요한가?

• "생성자를 굳이 만들어야 하나?"라는 생각을 가질 수 있습니다. 다음 예제처럼 객체 리터럴을 활용하여 객체를 생성할 수 있기 때문이죠.

<script>
let userInfo = {
  name: '홍길동',
  age: 20,
  addresss: '서울'
}
</script>

• 동일한 프로퍼티(name, age, address)를 가지는 3개의 객체가 필요한 경우 객체 리터럴로 작성하면 아래처럼 됩니다.
  소스 코드가 중복되어 가독성이 떨어집니다

<script>
let userInfo1 = {
  name: '홍길동',
  age: 20,
  addresss: '서울'
}

let userInfo2 = {
  name: '홍길동',
  age: 20,
  addresss: '서울'
}

let userInfo3 = {
  name: '홍길동',
  age: 20,
  addresss: '서울'
}
</script>

• 생성자 함수를 이용하면 아래처럼 작성할 수 있습니다.

<script>
function UserInfo() { // 생성자 함수
  this.name = '홍길동';
  this.age = 20;
  this.addresss = '서울';
}

let userInfo1 = new UserInfo(); // 빈 객체들을 생성
let userInfo2 = new UserInfo();
let userInfo3 = new UserInfo();

userInfo3.name = '마이콜' // userinfo3의 name을 마이콜로 변경

console.log(userInfo1.name); // 홍길동
console.log(userInfo2.name); // 홍길동
console.log(userInfo3.name); // 마이콜
</script>

생성자 함수는 동일한 프로퍼티를 가지는 객체를 심플하게 생성할 수 있으며, 각 객체의 독립성을 보장합니다.

구세주같은 참고 글
벨로그 참고
티스토리 참고

코드 안에 주석이 너무 많네요.. 어떻게든 이해 해보려고 하니 이지경이..