9.1.3 생성자에서의 this - 객체 공장의 현명한 시스템

9. this와 친해지기 (this 바인딩)/9.1 this가 뭘까요?

9.1.3 생성자에서의 this - 객체 공장의 현명한 시스템

thejavascript4kids 2025. 7. 12. 04:30

📘 9.1.3 생성자에서의 this - 객체 공장의 현명한 시스템

어떤 날, 여러분이 레고 블록으로 같은 형태의 집을 여러 개 만들어야 한다고 상상해보세요. 하나하나 손으로 만들 수도 있지만, 더 좋은 방법이 있다면 어떨까요? 바로 같은 설계도를 가지고 여러 개를 만드는 것이죠.

지금까지 우리는 this가 전역에서는 window를, 객체에서는 그 객체 자신을 가리킨다는 것을 배웠어요. 이제 this의 또 다른 능력을 발견할 시간이에요! 바로 생성자 함수라는 특별한 공간에서의 this입니다. 여기서 this는 마치 조립 로봇처럼 새로운 객체를 만들어내는 역할을 합니다.

🧠 먼저 용어를 알아볼까요?

새로운 개념을 배우기 전에, 중요한 용어들의 이름부터 알아보겠어요.

용어	의미
생성자 함수	똑같은 형태의 객체를 여러 개 만들어내는 특별한 함수입니다.
new 키워드	생성자 함수로 새로운 객체를 만들 때 반드시 사용하는 특별한 명령어입니다.
인스턴스	생성자 함수로 만들어진 개별 객체를 말합니다.

생성자 함수는 "건설하는 사람"이라는 뜻의 영어 단어에서 왔어요. 건축가가 같은 설계도로 여러 집을 짓는 것처럼, 생성자 함수도 같은 구조로 여러 객체를 만들어냅니다. 그리고 new라는 특별한 명령어를 사용하면, 새로운 객체가 만들어지는 거예요!

✨ 생성자 함수에서 `this`의 핵심 개념

생성자 함수는 자바스크립트의 정말 유용한 기능 중 하나예요. 이 특별한 함수 안에서 this는 전혀 다른 모습을 보여줘요. 전역에서는 window를 가리키고, 일반 객체에서는 그 객체를 가리켰던 this가, 생성자 함수에서는 새로 만들어지고 있는 객체를 가리킵니다.

이것은 정말 특별한 현상이에요! 아직 완전히 만들어지지도 않은, 만들어지고 있는 중인 객체를 this가 미리 가리키고 있는 거죠. 마치 조각가가 조각상을 만들면서 "이 작품에 이런 특징을 추가해야지"라고 말하는 것처럼, 생성자 함수는 this.속성 = 값 형태로 새로운 객체에 특징들을 하나씩 추가해 나갑니다.

이 방식의 가장 큰 장점은 같은 구조를 가진 객체들을 쉽게 많이 만들 수 있다는 것이에요. 마치 공장에서 같은 틀로 제품을 찍어내듯이, 한 번 생성자 함수를 만들어두면 원하는 만큼 비슷한 객체들을 만들 수 있어요.

비유로 이해하기: 3D 프린터

생성자 함수에서의 this를 더 쉽게 이해하기 위해 '3D 프린터' 이야기를 들려드릴까요?

상상해보세요. 여러분이 '학생 피규어 3D 프린터'라는 장치를 가지고 있다고 해보아요. 이 프린터는 정말 특별해서, 여러분이 "이름: 철수, 학년: 4학년"이라고 입력하면 철수라는 이름표가 달리고 4학년 배지가 붙은 특별한 피규어를 만들어줘요.

프린터가 피규어를 만드는 과정이 바로 생성자 함수가 객체를 만드는 과정과 같아요. 프린터 안에서 새로 만들어지고 있는 피규어가 바로 this입니다. "이 피규어에 이름표를 붙이고, 이 피규어에 학년 배지를 달고"라고 할 때의 "이 피규어"가 this인 거죠.

재미있는 점은 같은 프린터로 철수 피규어, 영희 피규어, 민수 피규어를 만들 수 있지만, 각각의 피규어는 완전히 다른 별개의 피규어라는 것이에요. 철수 피규어의 이름을 바꾼다고 해서 영희 피규어의 이름이 바뀌지는 않거든요.

🎯 생성자 함수를 사용하는 이유

생성자 함수를 사용하는 이유는 여러 가지가 있어요.

첫째로, 쉽게 많은 객체를 만들 수 있어요. 학급에 학생이 30명 있다면, 30개의 학생 객체를 일일이 손으로 만드는 것보다 생성자 함수 하나로 찍어내는 것이 훨씬 쉽죠.

둘째로, 같은 구조를 보장할 수 있어요. 모든 학생 객체가 이름, 학년, 자기소개 메서드를 가지도록 보장할 수 있어요. 실수로 어떤 속성을 빼먹을 가능성도 줄어들어요.

셋째로, 각각 독립적이에요. 같은 생성자 함수로 만든 객체들이지만, 각각은 완전히 독립적인 존재예요. 한 객체의 속성을 바꿔도 다른 객체에는 영향을 주지 않아요.

마지막으로, 코드를 다시 사용할 수 있어요. 한 번 만든 생성자 함수는 필요할 때마다 계속 사용할 수 있어서, 같은 코드를 반복해서 쓸 필요가 없어요.

⚙️ 기본 문법 살펴보기

생성자 함수의 기본 문법은 일반 함수와 비슷하지만, 몇 가지 특별한 규칙이 있어요.

// 생성자 함수 정의 (첫 글자는 대문자!)
function 생성자이름(매개변수1, 매개변수2) {
    this.속성1 = 매개변수1;
    this.속성2 = 매개변수2;
    this.메서드 = function() {
        // 메서드 내용
    };
}

// 새 객체 만들기
let 객체이름 = new 생성자이름(값1, 값2);

중요한 규칙들:

생성자 함수 이름은 첫 글자를 대문자로 시작해요. (Student, Car, Person)
반드시 new 키워드와 함께 호출해야 해요.
생성자 함수 안에서 this는 새로 만들어지는 객체를 가리켜요.

🧪 예제로 익혀보기

이제 실제 예제를 통해 생성자 함수에서의 this가 어떻게 동작하는지 자세히 알아보겠어요.

🔹 예제 1: 학생 객체 생성자 만들기

첫 번째 예제에서는 여러 학생 객체를 만드는 생성자 함수를 만들어보겠어요.

// 학생을 만드는 생성자 함수 (첫 글자 대문자!)
function Student(name, grade, subject) {
    // this는 지금 만들어지고 있는 새 학생 객체를 가리켜요
    this.name = name;                        // 새 학생의 이름 속성 설정
    this.grade = grade;                      // 새 학생의 학년 속성 설정
    this.favoriteSubject = subject;         // 새 학생의 좋아하는 과목 속성 설정

    // 새 학생의 자기소개 메서드
    this.introduce = function() {
        console.log("안녕하세요! 저는 " + this.name + "이고 " + this.grade + "학년입니다.");
        console.log("제가 가장 좋아하는 과목은 " + this.favoriteSubject + "입니다.");
    };
}

// new 명령어로 새 학생들 만들기
let student1 = new Student("철수", 4, "수학");    // "철수", 4, "수학" 정보로 첫 번째 학생 만들기
let student2 = new Student("영희", 5, "과학");    // "영희", 5, "과학" 정보로 두 번째 학생 만들기
let student3 = new Student("민수", 3, "미술");    // "민수", 3, "미술" 정보로 세 번째 학생 만들기

// 각 학생이 자기소개 해보기
console.log("=== 새 학생들의 자기소개 ===");
student1.introduce();  // 첫 번째 학생의 자기소개
student2.introduce();  // 두 번째 학생의 자기소개
student3.introduce();  // 세 번째 학생의 자기소개

이 예제를 단계별로 보면, 먼저 Student라는 생성자 함수를 정의해요. 이 함수 안에서 this는 아직 만들어지지 않았지만 만들어질 예정인 새 객체를 가리켜요. new Student()를 호출할 때마다 새로운 객체가 만들어지고, 각각 다른 정보를 가지지만 같은 구조를 유지해요.

🔹 예제 2: 애완동물 객체 만들기

두 번째 예제에서는 서로 다른 애완동물 객체들을 생성자 함수로 만들어보겠어요.

// 애완동물을 만드는 생성자 함수
function Pet(name, type, age) {
    // this는 새로 태어나는 애완동물 객체를 가리켜요
    this.name = name;       // 애완동물 이름 속성 설정
    this.type = type;       // 애완동물 종류 속성 설정
    this.age = age;         // 애완동물 나이 속성 설정

    // 애완동물의 인사 메서드
    this.greet = function() {
        if (this.type === "강아지") {
            console.log("멍멍! 저는 " + this.name + "이에요!");
        } else if (this.type === "고양이") {
            console.log("야옹~ 제 이름은 " + this.name + "입니다~");
        } else {
            console.log("안녕하세요! 저는 " + this.name + "라는 " + this.type + "입니다!");
        }
    };

    // 생일 축하 메서드
    this.birthday = function() {
        this.age = this.age + 1;
        console.log(this.name + "이 " + this.age + "살이 되었어요! 생일 축하해요!");
    };
}

// 다양한 애완동물들 만들기
let dog = new Pet("뽀삐", "강아지", 2);      // "뽀삐"라는 2살 강아지 만들기
let cat = new Pet("나비", "고양이", 1);      // "나비"라는 1살 고양이 만들기
let hamster = new Pet("롤롤", "햄스터", 1);  // "롤롤"이라는 1살 햄스터 만들기

// 각 애완동물의 인사와 생일 축하
console.log("=== 우리 애완동물 친구들 ===");
dog.greet();     // 강아지의 인사
cat.greet();     // 고양이의 인사
hamster.greet(); // 햄스터의 인사

console.log("\n=== 생일 파티 시간! ===");
dog.birthday();  // 강아지의 생일
cat.birthday();  // 고양이의 생일

이 예제에서 중요한 점은 같은 생성자 함수로 만든 객체들이지만, 각각의 this가 서로 다른 객체를 가리킨다는 것이에요. dog 객체의 메서드에서 this는 dog를, cat 객체의 메서드에서 this는 cat을 가리켜요.

🔹 예제 3: 독립성 확인하기

세 번째 예제에서는 생성자 함수로 만든 객체들이 정말로 서로 독립적인지 확인해보겠어요.

// 저금통을 만드는 생성자 함수
function PiggyBank(ownerName, initialMoney) {
    this.owner = ownerName;     // 저금통 주인 속성 설정
    this.money = initialMoney;  // 초기 저금액 속성 설정

    // 돈 넣기 메서드
    this.deposit = function(amount) {
        this.money = this.money + amount;
        console.log(this.owner + "의 저금통에 " + amount + "원 넣었어요! 총 " + this.money + "원");
    };

    // 저금액 확인 메서드
    this.checkMoney = function() {
        console.log(this.owner + "의 저금통에는 총 " + this.money + "원이 있어요.");
    };
}

// 세 명의 친구가 각각 저금통 만들기
let chulsuBank = new PiggyBank("철수", 100);   // 철수가 100원으로 시작하는 저금통 만들기
let youngheeBank = new PiggyBank("영희", 200); // 영희가 200원으로 시작하는 저금통 만들기
let minsuBank = new PiggyBank("민수", 50);     // 민수가 50원으로 시작하는 저금통 만들기

console.log("=== 초기 저금액 확인 ===");
chulsuBank.checkMoney();    // 철수 저금통 확인
youngheeBank.checkMoney();  // 영희 저금통 확인
minsuBank.checkMoney();     // 민수 저금통 확인

console.log("\n=== 각자 용돈 저금하기 ===");
chulsuBank.deposit(500);   // 철수만 500원 저금
youngheeBank.deposit(300); // 영희만 300원 저금

console.log("\n=== 최종 저금액 확인 (독립성 테스트) ===");
chulsuBank.checkMoney();   // 철수: 600원이 됨
youngheeBank.checkMoney(); // 영희: 500원이 됨
minsuBank.checkMoney();    // 민수: 50원 그대로 (변화 없음!)

이 예제는 생성자 함수로 만든 객체들의 독립성을 보여줘요. 철수의 저금통에 돈을 넣는다고 해서 영희나 민수의 저금통에 영향을 주지 않아요. 각각 완전히 별개의 객체이기 때문이에요.

🧚‍♀️ 이야기로 다시 배우기: 학교의 로봇 시스템

지금까지 배운 내용을 재미있는 이야기로 다시 정리해볼까요?

우리 행복초등학교에서는 학생증 제작 로봇을 사용하고 있었어요. 이 로봇은 this라는 특별한 기능이 있었답니다.

선생님이 로봇에게 "학생증 만들기!"라는 명령을 내리면서 제작 과정을 시작해요. 과정이 시작되는 순간, 로봇 앞에 빈 학생증이 나타나요. 이 빈 학생증이 바로 this였어요.

"이 학생증에게 '철수'라는 이름을 주어라!" 하면 this.name = "철수"가 되고, "이 학생증에게 4학년 정보를 주어라!" 하면 this.grade = 4가 돼요. "이 학생증에게 자기소개하는 능력을 주어라!" 하면 this.introduce = function()이 추가되죠.

과정이 끝나면 빈 학생증이 완전한 학생증이 되어 세상에 나와요. 재미있는 것은 같은 과정으로 영희 학생증, 민수 학생증도 만들 수 있지만, 각각은 완전히 다른 독립적인 학생증이 된다는 것이었어요.

로봇이 만든 학생증들은 각자 자신만의 "나"(this)를 가지고 있어서, 철수 학생증이 "나는 철수야"라고 말할 때의 "나"와 영희 학생증이 "나는 영희야"라고 말할 때의 "나"는 완전히 다른 존재를 가리켰답니다.

✏️ 연습문제로 개념 다지기

연습문제를 시작하기 전에 잠시 생각해볼까요. 여러분이 어릴 때 놀았던 클레이나 찰흙을 떠올려보세요. 같은 틀을 사용해서 쿠키나 모양을 만들 때, 틀은 하나이지만 만들어지는 쿠키들은 각각 다른 존재였죠. 생성자 함수도 그런 역할을 해요. 하나의 틀로 여러 개의 독립적인 객체들을 만들어내는 거예요.

Ex1) 자동차를 만드는 생성자 함수를 작성하고, 여러 자동차 객체를 만들어보자

// 자동차 생성자 함수
function Car(brand, color, speed) {
    this.brand = brand;     // 자동차 브랜드 속성 설정
    this.color = color;     // 자동차 색깔 속성 설정
    this.speed = speed;     // 최고 속도 속성 설정

    // 자동차 정보 출력 메서드
    this.showInfo = function() {
        console.log("이 차는 " + this.color + " " + this.brand + "이고, 최고 " + this.speed + "km/h로 달릴 수 있어요!");
    };

    // 자동차 출발 메서드
    this.start = function() {
        console.log(this.brand + " 자동차가 부릉부릉 출발합니다!");
    };
}

// 여러 자동차 만들기
let car1 = new Car("현대", "빨간색", 180);  // "현대", "빨간색", 180 정보로 첫 번째 자동차 만들기
let car2 = new Car("기아", "파란색", 200);  // "기아", "파란색", 200 정보로 두 번째 자동차 만들기

// 자동차들 테스트
car1.showInfo();  // 첫 번째 자동차 정보 확인
car1.start();     // 첫 번째 자동차 출발
car2.showInfo();  // 두 번째 자동차 정보 확인
car2.start();     // 두 번째 자동차 출발

Ex2) 계산기 객체를 만드는 생성자 함수를 작성해보자. 각 계산기는 독립적으로 작동해야 해요

// 계산기 생성자 함수
function Calculator(name) {
    this.name = name;       // 계산기 이름 속성 설정
    this.result = 0;        // 계산 결과 속성을 0으로 초기화

    // 더하기 메서드
    this.add = function(num) {
        this.result = this.result + num;
        console.log(this.name + ": " + num + "을 더해서 결과는 " + this.result);
    };

    // 빼기 메서드
    this.subtract = function(num) {
        this.result = this.result - num;
        console.log(this.name + ": " + num + "을 빼서 결과는 " + this.result);
    };

    // 결과 확인 메서드
    this.showResult = function() {
        console.log(this.name + "의 최종 결과: " + this.result);
    };
}

// 두 개의 독립적인 계산기 만들기
let calc1 = new Calculator("계산기A");  // "계산기A"라는 이름의 첫 번째 계산기 만들기
let calc2 = new Calculator("계산기B");  // "계산기B"라는 이름의 두 번째 계산기 만들기

// 각각 다른 계산 수행
calc1.add(10);      // 첫 번째 계산기에 10 더하기
calc1.add(5);       // 첫 번째 계산기에 5 더하기
calc2.add(20);      // 두 번째 계산기에 20 더하기
calc2.subtract(3);  // 두 번째 계산기에서 3 빼기

// 독립성 확인
calc1.showResult();  // 첫 번째 계산기 결과: 15
calc2.showResult();  // 두 번째 계산기 결과: 17

Ex3) 도서관 책 객체를 만드는 생성자 함수와 대출 시스템을 구현해보자

// 책 생성자 함수
function Book(title, author, isbn) {
    this.title = title;         // 책 제목 속성 설정
    this.author = author;       // 저자 속성 설정
    this.isbn = isbn;           // ISBN 번호 속성 설정
    this.isBorrowed = false;    // 대출 상태를 false로 초기화 (처음엔 대출되지 않은 상태)
    this.borrower = "";         // 대출자를 빈 문자열로 초기화

    // 책 정보 출력 메서드
    this.getInfo = function() {
        console.log("제목: " + this.title + ", 저자: " + this.author);
        if (this.isBorrowed) {
            console.log("현재 " + this.borrower + "가 대출 중입니다.");
        } else {
            console.log("대출 가능한 책입니다.");
        }
    };

    // 책 대출 메서드
    this.borrow = function(personName) {
        if (this.isBorrowed) {
            console.log("죄송합니다. 이미 대출 중인 책입니다.");
        } else {
            this.isBorrowed = true;
            this.borrower = personName;
            console.log(personName + "님이 '" + this.title + "'을 대출했습니다.");
        }
    };

    // 책 반납 메서드
    this.return = function() {
        if (this.isBorrowed) {
            console.log(this.borrower + "님이 '" + this.title + "'을 반납했습니다.");
            this.isBorrowed = false;
            this.borrower = "";
        } else {
            console.log("이 책은 대출되지 않은 상태입니다.");
        }
    };
}

// 도서관 책들 만들기
let book1 = new Book("어린왕자", "생텍쥐페리", "978-123");  // 첫 번째 책 객체 만들기
let book2 = new Book("해리포터", "조앤 롤링", "978-456");   // 두 번째 책 객체 만들기

// 대출 시스템 테스트
book1.getInfo();        // 첫 번째 책 정보 확인
book1.borrow("철수");   // 첫 번째 책을 철수가 대출
book1.getInfo();        // 대출 후 첫 번째 책 정보 다시 확인
book2.borrow("영희");   // 두 번째 책을 영희가 대출
book1.return();         // 첫 번째 책 반납
book1.getInfo();        // 반납 후 첫 번째 책 정보 확인

🤔 심화 문제로 실력 확인하기

기본 연습을 마쳤다면, 이제 조금 더 깊이 있는 문제들을 통해 생성자 함수에서의 this에 대한 이해를 확인해보겠어요.

Q1. 다음 코드의 결과를 예상하고, 그 이유를 설명해보세요.

function Robot(name, energy) {
    this.name = name;
    this.energy = energy;
    this.work = function() {
        this.energy = this.energy - 10;
        console.log(this.name + "이 일하고 있어요. 남은 에너지: " + this.energy);
    };
}

let robot1 = new Robot("로봇A", 100);
let robot2 = new Robot("로봇B", 80);

robot1.work();
robot2.work();
robot1.work();

정답:

"로봇A이 일하고 있어요. 남은 에너지: 90"
"로봇B이 일하고 있어요. 남은 에너지: 70"
"로봇A이 일하고 있어요. 남은 에너지: 80"

해설: 각 로봇 객체는 독립적인 this를 가지고 있어서, robot1의 에너지가 변해도 robot2의 에너지에는 영향을 주지 않아요. 생성자 함수로 만든 각 객체는 완전히 별개의 존재이기 때문이에요.

Q2. 다음 중 올바르지 않은 코드는 무엇이고, 그 이유는 무엇일까요?

// A번
function Student(name) {
    this.name = name;
}
let student = new Student("철수");

// B번
function student(name) {
    this.name = name;
}
let myStudent = new student("영희");

정답: B번이 올바르지 않습니다.

해설: 생성자 함수는 첫 글자를 대문자로 시작해야 한다는 자바스크립트 관례를 따르지 않았어요. 또한 함수명이 소문자로 시작하면 일반 함수로 오해할 수 있어 코드 가독성이 떨어져요.

🧠 자주 하는 실수와 주의할 점

생성자 함수를 사용할 때 자주 하는 실수들을 미리 알아두면 더 안전하게 코딩할 수 있어요.

❌ 실수 1: `new` 키워드 빼먹기

function Student(name, grade) {
    this.name = name;
    this.grade = grade;
}

let student = Student("철수", 4); // new가 빠졌어요!
console.log(student.name); // 에러! student가 undefined

이런 실수가 발생하는 이유는 new 키워드가 없으면 일반 함수로 호출되기 때문이에요. 새 객체가 만들어지지 않고, this는 전역 객체(window)를 가리키게 되어 의도와 완전히 다른 동작을 하게 돼요.

❌ 실수 2: 생성자 함수 이름을 소문자로 시작하기

function student(name, grade) {  // 소문자로 시작
    this.name = name;
    this.grade = grade;
}

이 문제가 생기는 이유는 자바스크립트에서는 생성자 함수와 일반 함수를 구분하는 명확한 문법이 없기 때문이에요. 그래서 개발자들이 약속으로 생성자 함수는 첫 글자를 대문자로 시작하기로 했어요. 이렇게 하면 코드를 읽을 때 "아, 이 함수는 new와 함께 사용해야 하는구나"라고 쉽게 알 수 있어요.

❌ 실수 3: 생성자 함수에서 `return` 사용하기

function Person(name) {
    this.name = name;
    return this; // 굳이 쓸 필요 없어요!
}

이 실수가 발생하는 이유는 생성자 함수가 자동으로 새로 만든 객체를 반환해주기 때문에 return이 불필요하기 때문이에요. 오히려 다른 값을 return하면 예상과 다른 결과가 나올 수 있어요.

📝 8단원 복습 문제 - 객체를 잊지 말아요!

9단원을 배우는 여러분이 8단원 내용을 잊지 않도록 복습 문제를 준비했어요!

복습 문제 1: 객체에서 for...in 문으로 모든 속성 순회하기

// 학생 정보 객체
let student = {
    name: "철수",
    age: 12,
    grade: 5,
    hobby: "축구",
    favoriteSubject: "수학"
};

console.log("학생의 모든 정보:");

// for...in 문으로 객체의 모든 속성 순회하기
for (let key in student) {
    console.log(key + ": " + student[key]);
}

console.log("\n=== 특정 조건의 속성만 출력하기 ===");
for (let property in student) {
    if (typeof student[property] === "string") {
        console.log(property + " (문자열): " + student[property]);
    }
}

해설: for...in 문은 객체의 모든 속성을 순회할 때 사용해요. typeof 연산자와 함께 사용하면 특정 데이터 타입의 속성만 골라낼 수도 있어요!

복습 문제 2: 객체 안에 함수(메서드) 정의하고 this 사용하기

// 계산기 객체 (메서드가 포함된 객체)
let calculator = {
    result: 0,

    add: function(num) {
        this.result = this.result + num;
        return this;
    },

    multiply: function(num) {
        this.result = this.result * num;
        return this;
    },

    getResult: function() {
        console.log("계산 결과: " + this.result);
        return this.result;
    },

    reset: function() {
        this.result = 0;
        console.log("계산기가 초기화되었습니다.");
        return this;
    }
};

// 메서드 체이닝으로 연속 계산하기
calculator
    .add(10)           // 0 + 10 = 10
    .multiply(3)       // 10 * 3 = 30
    .add(5)            // 30 + 5 = 35
    .getResult();      // 결과 확인: 35

calculator.reset().add(100).getResult();  // 초기화 후 100 더하고 결과 확인

해설: 객체의 메서드에서 this를 사용하면 자신이 속한 객체를 가리켜요. 메서드에서 return this를 하면 메서드 체이닝이 가능해져서 연속으로 메서드를 호출할 수 있어요!

지금까지 생성자 함수에서의 this에 대해 자세히 알아보았어요. this가 상황에 따라 어떻게 다른 객체를 가리키는지 이해하셨나요? 생성자 함수는 같은 구조의 객체를 여러 개 만들 때 정말 유용한 도구예요. 앞으로 더 복잡한 프로그램을 만들 때 꼭 필요한 개념이니까 잘 기억해두세요!

✅ 학습 완료 체크리스트

이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!

학습 내용	이해했나요?
생성자 함수의 기본 개념	✅
new 키워드 사용법	✅
생성자에서 this의 역할	✅
객체 독립성 이해	✅
자주 하는 실수들	✅
실전 예제 이해	✅
8단원 객체 복습	✅

🔄 생성자 함수에서 `this` 사용 과정 정리

지금까지 배운 생성자 함수에서의 this 사용 과정을 차근차근 정리해보겠어요.

첫 번째 단계는 생성자 함수 정의예요. 첫 글자를 대문자로 하는 생성자 함수를 만들고, 매개변수를 받아서 this.속성 = 값 형태로 새 객체의 속성을 정의해요.

두 번째는 new 키워드로 호출 단계예요. new 생성자이름()으로 호출하면, 자바스크립트가 비어있는 새 객체를 만들어 준비해둬요.

세 번째는 this 연결 단계예요. 생성자 함수가 실행되면서 this가 새로 만들어진 객체를 가리키게 돼요. 이때부터 this.속성으로 새 객체에 속성을 추가할 수 있어요.

마지막으로 객체 완성 단계예요. 생성자 함수의 실행이 끝나면 완성된 객체가 자동으로 반환되어, 변수에 저장돼요.

📂 마무리 정보

오늘 배운 9.1.3 내용이 여러분의 자바스크립트 지식 상자에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!

기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.

🚀 더 체계적인 JavaScript 학습을 원하신다면?

이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.

📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼

📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

💻 무료로 학습하러 가기

'9. this와 친해지기 (this 바인딩) > 9.1 this가 뭘까요?' 카테고리의 다른 글

9.1.2 객체에서의 this - 진짜 주인을 찾아라! (0)	2025.07.11
9.1.1 전역에서의 this - 코딩 세계의 '나'를 찾아서 (0)	2025.07.11

현재글9.1.3 생성자에서의 this - 객체 공장의 현명한 시스템

초중고등학생 자바스크립트 교재

이 교재는 초등학생부터 성인까지, 누구나 자바스크립트를 쉽게 배우고 스스로 코딩을 즐겁게 경험할 수 있도록 AI와 함께 정성껏 설계하였습니다. 프로그래밍이 처음이신가요? 걱정하지 않으셔도 됩니다.

async_await, 모듈, 자바스크립트교재, Promise, Export, 코딩교재, 비동기, Import, setTimeout, 연산자, 초등코딩, JavaScript, 비교연산자, 산술연산자, 자바스크립트, ES6모듈, 싱글턴패턴, 논리연산자, 중등코딩교육, 모듈패턴,

Today :
Yesterday :

초중고등학생 자바스크립트 교재

9.1.3 생성자에서의 this - 객체 공장의 현명한 시스템

📘 9.1.3 생성자에서의 this - 객체 공장의 현명한 시스템

🧠 먼저 용어를 알아볼까요?

✨ 생성자 함수에서 `this`의 핵심 개념

비유로 이해하기: 3D 프린터

🎯 생성자 함수를 사용하는 이유

⚙️ 기본 문법 살펴보기

🧪 예제로 익혀보기

🔹 예제 1: 학생 객체 생성자 만들기

🔹 예제 2: 애완동물 객체 만들기

🔹 예제 3: 독립성 확인하기

🧚‍♀️ 이야기로 다시 배우기: 학교의 로봇 시스템

✏️ 연습문제로 개념 다지기

Ex1) 자동차를 만드는 생성자 함수를 작성하고, 여러 자동차 객체를 만들어보자

Ex2) 계산기 객체를 만드는 생성자 함수를 작성해보자. 각 계산기는 독립적으로 작동해야 해요

Ex3) 도서관 책 객체를 만드는 생성자 함수와 대출 시스템을 구현해보자

🤔 심화 문제로 실력 확인하기

Q1. 다음 코드의 결과를 예상하고, 그 이유를 설명해보세요.

Q2. 다음 중 올바르지 않은 코드는 무엇이고, 그 이유는 무엇일까요?

🧠 자주 하는 실수와 주의할 점

❌ 실수 1: `new` 키워드 빼먹기

❌ 실수 2: 생성자 함수 이름을 소문자로 시작하기

❌ 실수 3: 생성자 함수에서 `return` 사용하기

📝 8단원 복습 문제 - 객체를 잊지 말아요!

복습 문제 1: 객체에서 for...in 문으로 모든 속성 순회하기

복습 문제 2: 객체 안에 함수(메서드) 정의하고 this 사용하기

✅ 학습 완료 체크리스트

🔄 생성자 함수에서 `this` 사용 과정 정리

📂 마무리 정보

'9. this와 친해지기 (this 바인딩) > 9.1 this가 뭘까요?' 카테고리의 다른 글

'9. this와 친해지기 (this 바인딩)/9.1 this가 뭘까요?'의 다른글

티스토리툴바

« 2025/08 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

9.1.3 생성자에서의 this - 객체 공장의 현명한 시스템

📘 9.1.3 생성자에서의 this - 객체 공장의 현명한 시스템

🧠 먼저 용어를 알아볼까요?

✨ 생성자 함수에서 this의 핵심 개념

비유로 이해하기: 3D 프린터

🎯 생성자 함수를 사용하는 이유

⚙️ 기본 문법 살펴보기

🧪 예제로 익혀보기

🔹 예제 1: 학생 객체 생성자 만들기

🔹 예제 2: 애완동물 객체 만들기

🔹 예제 3: 독립성 확인하기

🧚‍♀️ 이야기로 다시 배우기: 학교의 로봇 시스템

✏️ 연습문제로 개념 다지기

Ex1) 자동차를 만드는 생성자 함수를 작성하고, 여러 자동차 객체를 만들어보자

Ex2) 계산기 객체를 만드는 생성자 함수를 작성해보자. 각 계산기는 독립적으로 작동해야 해요

Ex3) 도서관 책 객체를 만드는 생성자 함수와 대출 시스템을 구현해보자

🤔 심화 문제로 실력 확인하기

Q1. 다음 코드의 결과를 예상하고, 그 이유를 설명해보세요.

Q2. 다음 중 올바르지 않은 코드는 무엇이고, 그 이유는 무엇일까요?

🧠 자주 하는 실수와 주의할 점

❌ 실수 1: new 키워드 빼먹기

❌ 실수 2: 생성자 함수 이름을 소문자로 시작하기

❌ 실수 3: 생성자 함수에서 return 사용하기

📝 8단원 복습 문제 - 객체를 잊지 말아요!

복습 문제 1: 객체에서 for...in 문으로 모든 속성 순회하기

복습 문제 2: 객체 안에 함수(메서드) 정의하고 this 사용하기

✅ 학습 완료 체크리스트

🔄 생성자 함수에서 this 사용 과정 정리

📂 마무리 정보

'9. this와 친해지기 (this 바인딩) > 9.1 this가 뭘까요?' 카테고리의 다른 글

'9. this와 친해지기 (this 바인딩)/9.1 this가 뭘까요?'의 다른글

관련글

티스토리툴바

✨ 생성자 함수에서 `this`의 핵심 개념

❌ 실수 1: `new` 키워드 빼먹기

❌ 실수 3: 생성자 함수에서 `return` 사용하기

🔄 생성자 함수에서 `this` 사용 과정 정리