그룹스터디 🦆 팀 러버덕과 함께
<목차>
1.객체 만들기
2.객체 리터럴의 단점
3.생성자 함수란
4.new 연산자
5.인스턴스 생성 과정
6.생성자 함수의 장점
7.constructor와 non-constructor
js에서 객체만들때 3가지 방법이 있다.
1.객체리터럴
2.Object 생성자
3.생성자 함수
{}를 사용하여 객체를 생성한다.
const person = {
name:"sally",
age:16,
sayHello: function(){
console.log(`Hi my name is ${this.name}`)
}
}
js에 내장되어있는 생성자 함수이다.
Object() 생성자 함수는 먼저 빈 객체를 만든 다음에 프로퍼티를 설정한다.
const person = new Object(); //{} ->👈 빈 객체를 먼저 생성 후,
// 👇 프로퍼티 설정한다.
person.name = "sally";
person.age= 16;
person.sayHello = function(){
console.log(`Hi my name is ${this.name}`)
}
}
객체(인스턴스)를 생성하는 함수다. 나중에 더 자세히 알아보겠다.
function Person(name,age){
this.name= name;
this.age= age;
this.sayHello = function(){
console.log(`Hi my name is ${this.name}`)
}
}
const person1 = new Person('sally',16);
객체 리터럴 방식은 Object()와 달리 선언과 동시에 프로퍼티를 설정한다.
그래서 한눈에 알아볼수있으므로 쉽고 빠르게 파악할수있다.
다만, 객체의 프로퍼티,객체의 구조가 동일한 객체를 수십개만들어야할때
상당히 번거롭고 또한 프로퍼티를 추가하거나 수정해야하면 수십개의 객체를 일일이 수정해야한다.
ex) 전학생의 나이와 이름의 정보를 담고있는 객체
const student1 = {
name: "sally",
age: 17
}
const student2 = {
name: "mike",
age: 18
}
.
.
.
+갑자기 성적의 정보를 추가하려한다면 일일이 찾아가서 직접 수정해야한다.
const student1 = {
name: "sally",
age: 17,
score: 80
}
const student2 = {
name: "mike",
age: 18,
score:92
}
.
.
.
위에서 봤듯이, 객체리터럴의 문제점을 생성자 함수로 해결할 수 있다.
생성자 함수는 객체(인스턴스)를 만드는 함수인데 인스턴스란, 객체 모양의 데이터 구조에 할당된 실체이다.
js에서 생성자 함수는 java에서 class의 개념과 다루는 방식이 비슷하다.
class설명할때 흔히 붕어빵틀로 비유하는데
생성자함수도 생성자가 붕어빵틀이라 생각하면 된다. 인스턴스는 붕어빵틀을 이용해 만든 객체이다. 생성자를 이용하면 값이 다른 여러 객체를 많이 생성할 수 있다.
function Person(name,age){ //👈 데이터구조, 틀을 만드는것이다.
this.name=name;
this.age= age;
}
프로퍼티를 수정하고싶으면 일일이 객체 찾아가지않고 생성자에서 수정하면 됨.
function Person(name,age,score){
this.name=name;
this.age= age;
this.score=score;
}
위에 생성자 함수를 사용하려면 new연산자를 사용해야함.
즉, 생성자 호출하려면 new연산자를 사용해서 인스턴스(객체)를 만든다.
function Person(name,age){
this.name=name;
this.age= age;
}
👇 인스턴스생성과 생성자함수 호출
const sally = new Person('sally',17); // Person {name: 'sally', age: 17}
const sally = new Person('mike',18);
.png)
생성자 함수를 호출하려면 꼭 new키워드가 필요한데.
단순히 일반함수로호출하면 Person('sally',17),
함수 안에서 return 값이 없으면 결과가 Undefined이다.
그리고 생성자 함수에서 this와 일반함수에서 this도 다르다.
생성잠 함수에서 this는 생성자가 생성하는 객체를 가리킨다. 위 예시 코드에서 this는 Person객체를 가리킨다.
하지만 일반함수에서 this는 글로벌이다. this를 출력하면 Window가 나온다.
그럼 이제, new연산자를 이용해 인스턴스 만드는 과정을 살펴보면
1️⃣ 인스턴스 생성과 this바인딩
2️⃣ 인스턴스 초기화
3️⃣ 인스턴스 반환
function Person(name,age){
this.name=name;
this.age= age;
(return this-> 생략)
}
const sally = new Person('sally',17);

여기서 this는 Person객체를 가리키고
그리고 마지막 단계에서 this를 반환할때
return 문이 없으면 암묵적으로 실행되는 this객체를 반환하고
return 문이 있으면 해당 객체를 반환한다.
(생성자 함수의 기본 동작을 유지하기 위해서는 생성자 함수 내부에서의 return 문 사용을 지양해야한다.)
이처럼 생성자 함수를 만들어봤는데, 생성자 함수를 사용하면 동일한 구조의 객체를 일일이 작성하지 않고 수십개를 편하게 생성할 수 있고 수정 또한 간단하다.
js엔진이 생성자 함수인지 생성자 함수가 아닌지 구분할 수 있는 방법은
함수 정의 방식에 따라 결정된다.
생성자(constructor)함수인 경우 함수 선언문, 함수 표현식, 클래스를 사용하고
생성자 아닌함수는(non-constructor) 화살표 함수이나 메서드이다.
화살표함수나 메서드는 new 연산자로 호출하면 TypeError가 난다.