15.1.2 `constructor` - 객체의 첫 번째 설정을 도와주는 똑똑한 도우미

15. 클래스로 틀 만들기 (클래스)/15.1 클래스 선언

15.1.2 `constructor` - 객체의 첫 번째 설정을 도와주는 똑똑한 도우미

thejavascript4kids 2025. 7. 22. 02:52

📘 15.1.2 `constructor` - 객체의 첫 번째 설정을 도와주는 똑똑한 도우미

안녕하세요, 여러분. 이전 시간에 class라는 객체 만들기 틀을 배웠어요. 하지만 지금까지는 빈 틀만 만들었었죠. 이번에는 객체가 만들어질 때 자동으로 첫 번째 설정을 해주는 특별한 도우미를 만나볼 거예요. 바로 constructor입니다.

새 휴대폰을 샀을 때 이름을 입력하고 배경화면을 설정하는 것처럼, constructor는 객체가 태어나는 순간 필요한 모든 준비를 자동으로 해줍니다. 참 고마운 도우미죠.

🧠 새로운 단어들과 친해지기

constructor를 이해하는 데 필요한 중요한 단어들을 차근차근 알아볼게요.

단어	쉬운 설명
constructor	객체가 만들어질 때 자동으로 실행되어 첫 번째 설정을 해주는 특별한 기능이에요.
첫 설정하기	객체가 태어날 때 필요한 기본값들을 설정해주는 과정이에요.
넘겨주는 값	`constructor`에게 전달하는 정보들을 말해요. "이 객체는 이름이 철수야"처럼 알려주는 값이에요.
this	"지금 만들어지고 있는 이 객체"를 가리키는 특별한 키워드예요.

constructor는 영어로 "건설자, 생성자"라는 뜻이에요. 객체를 건설해주는 특별한 기능이라는 의미입니다.

✨ `constructor`가 뭔지 알아보기

constructor는 클래스에서 가장 특별한 기능이에요. 이 기능의 가장 큰 특징은 우리가 직접 호출하지 않아도 new 키워드로 객체를 만들 때 자동으로 실행된다는 거예요.

constructor의 주요 역할은 객체의 첫 번째 상태를 설정하는 것이에요. 예를 들어 학생 객체를 만들 때 이름, 나이, 학년 등의 정보를 처음부터 가지고 태어날 수 있도록 해줍니다.

또한 constructor는 정보를 넘겨받을 수 있어서 같은 클래스로 만든 객체들이라도 각각 다른 특성을 가질 수 있게 해줘요. 마치 같은 틀로 만든 쿠키라도 초콜릿 쿠키, 딸기 쿠키로 다르게 만들 수 있는 것처럼 말이죠.

재미있는 비유: 햄버거 가게의 주문 시스템

constructor를 더 친근하게 이해하기 위해 '햄버거 가게의 주문 시스템'에 비유해볼게요.

햄버거 가게에 손님이 와서 주문을 합니다. "햄버거 하나 주세요. 패티는 소고기로, 치즈 추가해주세요!" 그러면 주방의 요리사(constructor)가 이 주문을 받아서 햄버거를 만들기 시작해요.

요리사는 기본 햄버거 틀(클래스)을 가지고 있지만, 손님이 요청한 구체적인 내용(넘겨주는 값)에 따라 각각 다른 햄버거를 만들어요:

빵 준비 (기본 구조)
소고기 패티 올리기 (손님이 요청한 패티 종류)
치즈 추가 (손님이 요청한 토핑)
완성된 햄버거 내어주기

모든 햄버거는 같은 구조를 가지지만 (빵, 패티, 야채), 각각 다른 재료로 만들어져서 서로 다른 맛을 가지게 되는 거죠.

constructor도 똑같아요. 기본 틀은 같지만 넘겨받은 값에 따라 각 객체마다 다른 특성을 가지도록 자동으로 설정해주는 거예요.

🎯 왜 `constructor`를 배워야 할까요?

우리는 왜 constructor를 배워야 할까요?

첫 번째로, 자동화된 첫 설정이 가능해져요. 객체를 만들 때마다 일일이 속성을 하나씩 설정할 필요 없이, constructor가 알아서 해줍니다.

두 번째로, 개인화된 객체 생성이 가능해요. 같은 클래스를 사용하더라도 각 객체마다 다른 이름, 색깔, 크기 등을 가질 수 있어서 훨씬 유연합니다.

세 번째로, 실수를 줄일 수 있어요. 매번 같은 첫 설정 작업을 반복하다 보면 빼먹거나 틀릴 수 있는데, constructor에 한 번만 올바르게 작성해두면 항상 정확하게 설정됩니다.

마지막으로, 코드가 깔끔해져요. 객체 생성과 첫 설정이 한 번에 이루어져서 코드를 읽고 이해하기 쉬워집니다.

⚙️ 기본 사용법 살펴보기

이제 constructor를 실제로 만들고 사용하는 방법을 알아보겠습니다.

class 클래스이름 {
    constructor(넘겨받는값1, 넘겨받는값2) {
        this.속성이름1 = 넘겨받는값1;
        this.속성이름2 = 넘겨받는값2;
        // 필요한 첫 설정 작업들
    }
}

// 사용하기
let 객체 = new 클래스이름(값1, 값2);

간단한 예시:

// 학생 클래스에 constructor 추가
class Student {
    constructor(name, age) {
        this.name = name;    // 이 객체의 이름 속성 설정
        this.age = age;      // 이 객체의 나이 속성 설정

        console.log(name + " 학생이 생성되었습니다!");
    }
}

// 학생 객체 만들기
let student1 = new Student("철수", 10);
let student2 = new Student("영희", 11);

console.log(student1.name); // "철수"
console.log(student2.age);  // 11

여기서 중요한 점은 this 키워드예요. this는 "지금 만들어지고 있는 이 객체"를 가리키는 특별한 키워드입니다.

🧪 직접 해보면서 배우기

이제 실제 상황에서 constructor를 사용하는 예시들을 살펴보겠습니다.

🔹 첫 번째 예시: 반려동물 클래스 만들기

간단한 반려동물 클래스로 constructor의 기본 사용법을 익혀보겠습니다.

// 반려동물 클래스
class Pet {
    constructor(name, type) {
        this.name = name;
        this.type = type;
        this.hungry = true;      // 기본적으로 배고픈 상태
        this.happiness = 50;     // 행복도 50부터 시작

        console.log(type + " " + name + "이(가) 우리 집에 왔어요!");
    }
}

// 다양한 반려동물 만들기
let dog = new Pet("멍멍이", "강아지");
let cat = new Pet("야옹이", "고양이");
let hamster = new Pet("치키", "햄스터");

// 각 반려동물 정보 확인
console.log("강아지 이름:", dog.name, "배고픔:", dog.hungry);
console.log("고양이 종류:", cat.type, "행복도:", cat.happiness);
console.log("햄스터 이름:", hamster.name, "종류:", hamster.type);

이 예시에서는 constructor가 넘겨받은 값을 사용해서 각 반려동물마다 다른 이름과 종류를 설정하는 것을 볼 수 있어요.

🔹 두 번째 예시: 기본값과 함께 사용하기

때로는 값을 주지 않아도 되도록 기본값을 설정할 수 있어요.

// 자동차 클래스 (기본값 포함)
class Car {
    constructor(brand, color = "흰색") {
        this.brand = brand;
        this.color = color;
        this.speed = 0;          // 기본 속도는 0
        this.engine = false;     // 기본적으로 엔진 꺼짐

        console.log(color + " " + brand + " 자동차가 출고되었습니다!");
    }
}

// 자동차 만들기
let car1 = new Car("현대");                // 색깔 기본값 사용
let car2 = new Car("기아", "빨간색");      // 색깔 직접 지정
let car3 = new Car("삼성", "파란색");      // 색깔 직접 지정

// 자동차 정보 확인
console.log("자동차1:", car1.brand, car1.color);  // "현대 흰색"
console.log("자동차2:", car2.brand, car2.color);  // "기아 빨간색"
console.log("자동차3 속도:", car3.speed, "엔진:", car3.engine);

이 예시에서는 색깔에 기본값을 설정해서, 색깔을 지정하지 않으면 자동으로 "흰색"이 되도록 했어요.

🔹 세 번째 예시: 계산과 검증이 포함된 constructor

constructor에서 간단한 계산이나 입력값 검증도 할 수 있어요.

// 직사각형 클래스
class Rectangle {
    constructor(width, height) {
        // 입력값이 올바른지 검사
        if (width <= 0 || height <= 0) {
            console.log("가로와 세로는 0보다 커야 해요!");
            this.width = 1;   // 기본값으로 설정
            this.height = 1;
        } else {
            this.width = width;
            this.height = height;
        }

        // 넓이 자동 계산
        this.area = this.width * this.height;

        console.log("직사각형 생성: " + this.width + " x " + this.height + " = " + this.area);
    }
}

// 다양한 직사각형 만들기
let rect1 = new Rectangle(5, 3);        // 정상적인 값
let rect2 = new Rectangle(-2, 10);      // 잘못된 값 - 자동 수정
let rect3 = new Rectangle(4, 6);        // 정상적인 값

// 결과 확인
console.log("사각형1 넓이:", rect1.area);  // 15
console.log("사각형2 넓이:", rect2.area);  // 1 (기본값)
console.log("사각형3 넓이:", rect3.area);  // 24

이 예시에서는 constructor가 잘못된 입력값을 자동으로 수정하고, 넓이를 미리 계산해서 저장하는 것을 보여줍니다.

🔄 constructor 실행 과정 정리하기

지금까지 배운 constructor의 실행 과정을 단계별로 정리해보겠습니다.

첫 번째 단계는 객체 생성 요청입니다. new 키워드로 새로운 객체를 만들어달라고 요청하는 거예요.

두 번째 단계는 constructor 자동 실행입니다. 자바스크립트가 자동으로 constructor 기능을 찾아서 실행합니다.

세 번째 단계는 넘겨받은 값 처리입니다. 전달받은 값들을 constructor 안에서 사용할 수 있게 준비해요.

마지막 단계는 속성 설정 완료입니다. this를 사용해서 객체의 속성들을 모두 설정하고, 완성된 객체를 반환합니다.

🔄 14단원 복습: 배열 메서드 되돌아보기

15단원을 배우기 전에 14단원에서 배운 고급 배열 메서드를 복습해볼까요?

복습 문제 1: reduce로 합계 구하기

// 점수 배열의 총합을 reduce로 구해보세요.
let scores = [85, 92, 78, 96, 88];

let total = scores.reduce(function(sum, score) {
    return sum + score;
}, 0); // 시작값은 0

console.log("점수들:", scores);
console.log("총합:", total);        // 439
console.log("평균:", total / scores.length); // 87.8

// 간단하게 쓰기
let totalShort = scores.reduce((sum, score) => sum + score, 0);
console.log("총합 (간단):", totalShort);

설명: reduce는 배열의 모든 요소를 하나의 값으로 줄여주는 기능이에요. 누적값(sum)과 현재값(score)을 계속 더해가면서 최종 결과를 만듭니다.

복습 문제 2: sort로 점수 순서대로 정렬하기

// 학생들을 점수 순서대로 정렬해보세요.
let students = [
    { name: "철수", score: 85 },
    { name: "영희", score: 92 },
    { name: "민수", score: 78 },
    { name: "지은", score: 96 }
];

// 점수 높은 순서로 정렬
let sortedByScore = [...students].sort(function(a, b) {
    return b.score - a.score; // 큰 것에서 작은 것을 빼면 큰 순서
});

console.log("원본 학생들:", students);
console.log("점수 순서 정렬:");
sortedByScore.forEach(function(student, index) {
    console.log(`${index + 1}등: ${student.name} (${student.score}점)`);
});

설명: sort는 배열을 원하는 순서로 정렬해주는 기능이에요. 비교 함수를 사용해서 어떤 순서로 정렬할지 정할 수 있습니다.

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

constructor를 사용할 때 자주 하는 실수들을 알아보고 피하는 방법을 살펴보겠습니다.

❌ 실수 1: `this` 없이 속성 설정하기

// 잘못된 예시 - this 없이 속성 설정
class WrongCar {
    constructor(color) {
        color = color;  // 이렇게 하면 속성이 저장되지 않아요!
    }
}

// 올바른 예시 - this와 함께 속성 설정
class CorrectCar {
    constructor(color) {
        this.color = color;  // this를 꼭 써야 해요!
    }
}

let wrongCar = new WrongCar("빨강");
let correctCar = new CorrectCar("파랑");

console.log("잘못된 차 색깔:", wrongCar.color);    // undefined
console.log("올바른 차 색깔:", correctCar.color);   // "파랑"

객체의 속성을 설정하려면 반드시 this.속성이름 형태로 써야 해요.

❌ 실수 2: `constructor`에서 `return` 사용하기

// 잘못된 예시 - return 사용
class WrongStudent {
    constructor(name) {
        this.name = name;
        return this;  // 이렇게 하면 안 돼요!
    }
}

// 올바른 예시 - return 없이
class CorrectStudent {
    constructor(name) {
        this.name = name;
        // return 없이 끝내기
    }
}

let student = new CorrectStudent("철수");
console.log("학생 이름:", student.name);  // 정상 작동

constructor는 자동으로 만들어진 객체를 반환하므로 return을 쓰면 안 돼요.

❌ 실수 3: `constructor`를 직접 호출하려고 하기

// 클래스 정의
class Animal {
    constructor(name) {
        this.name = name;
    }
}

// 잘못된 사용법 - constructor를 직접 호출
try {
    let wrongAnimal = Animal.constructor("멍멍이");  // 에러 발생!
} catch (error) {
    console.log("에러:", error.message);
}

// 올바른 사용법 - new로 객체 생성
let correctAnimal = new Animal("야옹이");
console.log("올바른 동물:", correctAnimal.name);  // "야옹이"

constructor는 직접 호출하는 게 아니라 new로 객체를 만들 때 자동으로 실행돼요.

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

이제 손에 익히는 시간입니다. 새로운 개념을 처음 만질 때의 그 조심스러움, 하지만 곧 친숙해지는 그 따뜻함을 느껴보세요. constructor라는 도구도 곧 여러분의 든든한 동반자가 될 거예요.

Ex1) 장난감을 만들 때 "새로운 ○○색 ○○ 장난감이 만들어졌어요!" 메시지를 띄워보자

// 장난감 클래스
class Toy {
    constructor(name, color) {
        this.name = name;        // 장난감 이름 저장
        this.color = color;      // 장난감 색깔 저장
        this.isBroken = false;   // 기본적으로 멀쩡한 상태
        this.price = 1000;       // 기본 가격 1000원

        console.log("새로운 " + color + " " + name + " 장난감이 만들어졌어요!");
    }
}

// 장난감 만들기
let toy1 = new Toy("로봇", "빨강");   // 빨간 로봇 장난감
let toy2 = new Toy("인형", "분홍");   // 분홍 인형 장난감

// 장난감 정보 확인
console.log("첫 번째 장난감:", toy1.name, toy1.color, "가격:", toy1.price + "원");
console.log("두 번째 장난감:", toy2.name, "상태:", toy2.isBroken ? "고장" : "정상");

Ex2) 음식을 만들 때 기본값을 사용해서 "맛있는 ○○이 준비되었어요!" 메시지를 보여주자

// 음식 클래스
class Food {
    constructor(name, taste = "맛있음") { // 맛 기본값 "맛있음"
        this.name = name;                  // 음식 이름 저장
        this.taste = taste;                // 음식 맛 저장
        this.temperature = "따뜻함";       // 기본 온도 "따뜻함"
        this.calories = 100;               // 기본 칼로리 100

        console.log("맛있는 " + name + "이(가) 준비되었어요! (" + taste + ")");
    }
}

// 음식 만들기
let food1 = new Food("피자");               // 맛 기본값("맛있음") 사용
let food2 = new Food("아이스크림", "달콤함"); // 맛 직접 지정

// 음식 정보 확인
console.log("음식1:", food1.name, "맛:", food1.taste, "온도:", food1.temperature);
console.log("음식2:", food2.name, "맛:", food2.taste, "칼로리:", food2.calories);

Ex3) 학생을 만들 때 학년 검증해서 "○학년 ○○ 학생이 등록되었어요!" 메시지를 띄워보자

// 학생 클래스
class Student {
    constructor(name, grade) {
        this.name = name;  // 학생 이름 저장

        // 학년 검증 (1~6학년만 가능)
        if (grade < 1 || grade > 6) {      // 학년이 잘못되면
            console.log("학년은 1~6학년만 가능해요!");
            this.grade = 1;                 // 기본값 1학년으로 설정
        } else {
            this.grade = grade;            // 올바른 학년이면 저장
        }

        this.score = 0;      // 기본 점수 0
        this.present = true; // 기본적으로 출석 상태

        console.log(this.grade + "학년 " + name + " 학생이 등록되었어요!");
    }
}

// 학생 만들기
let student1 = new Student("철수", 3);    // 정상적인 학년 (3학년)
let student2 = new Student("영희", 10);   // 잘못된 학년 (10학년) - 자동으로 1학년으로 수정

// 학생 정보 확인
console.log("학생1:", student1.name, student1.grade + "학년", "출석:", student1.present);
console.log("학생2:", student2.name, student2.grade + "학년");  // 1학년으로 수정됨

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

더 깊이 있는 문제들을 통해 constructor에 대한 이해를 확인해보겠습니다.

Q1. `constructor`를 친구에게 설명한다면 어떻게 설명하겠나요?

정답: "constructor는 새로운 물건을 만들 때 자동으로 도와주는 도우미예요. 예를 들어 새 휴대폰을 샀을 때 이름을 적고 배경화면을 고르는 것처럼, 새 객체가 만들어질 때 '이름은 뭐고, 색깔은 뭐고'하고 처음 설정을 자동으로 해주는 특별한 기능이에요. 그래서 매번 하나씩 설정할 필요 없이 한 번에 완벽한 상태로 객체가 태어날 수 있어요."

Q2. 다음 코드에서 문제점을 찾아보세요.

class Car {
    constructor(color) {
        color = color;
        return this;
    }
}

정답: 두 가지 문제가 있어요.

1) this 없이 속성을 설정했어요 (color = color → this.color = color)
2) constructor에서 return을 사용했어요 (return this 제거)

올바른 코드:

class Car {
    constructor(color) {
        this.color = color;
    }
}

🧚‍♀️ 이야기로 다시 배우기: 스마트폰 공장의 설정 시스템 대모험

마지막으로 constructor를 하나의 이야기로 정리해볼게요.

우리나라의 "스마트폰 공장"에는 설정 시스템(Constructor)이라는 특별한 자동화 장치가 있었어요. 이 시스템은 정말 독특한 특징이 있었는데, 새로운 스마트폰이 만들어질 때마다 자동으로 작동해서 그 스마트폰을 완벽하게 준비해주는 거였어요.

어느 날, 공장에 "새 스마트폰" 주문이 들어왔어요. 고객이 말했어요. "파란색 스마트폰으로 만들어주세요!" 그러자 공장에서는 스마트폰 틀(클래스)을 준비하고 "new SmartPhone("파란색")"라는 명령을 내렸어요.

그 순간, 설정 시스템이 자동으로 작동했어요! 시스템은 고객이 요청한 정보를 받아서 바로 일을 시작했답니다:

"이 스마트폰의 색깔은 파란색이야!" (this.color = "파란색")
"기본 배터리는 100%로 설정!" (this.battery = 100)
"새로 만들어진 폰이니까 사용 시간은 0부터!" (this.usedTime = 0)
"파란색 스마트폰이 완성되었습니다!" (완성 메시지)

신기한 건 설정 시스템은 절대 실수하지 않는다는 거였어요. 매번 정확히 같은 순서로 설정을 해주고, 빼먹는 일도 없었답니다. 그리고 각 스마트폰마다 다른 특성을 줄 수 있어서, 빨간 폰을 주문하면 빨간색으로, 초록 폰을 주문하면 초록색으로 만들어줬어요.

다른 직원들이 "어떻게 그렇게 정확하게 할 수 있어요?"라고 물어보니, 공장장이 대답했어요. "이 설정 시스템은 새로운 스마트폰이 태어나는 순간에만 작동해서, 그 스마트폰이 가져야 할 모든 것을 완벽하게 준비해주는 것이 역할이에요. 한 번 설정해두면 계속 같은 방식으로 완벽하게 만들어집니다!"

이처럼 constructor는 객체가 태어나는 순간 자동으로 작동해서 필요한 모든 첫 설정을 완벽하게 해주는 똑똑한 시스템이에요. 여러분도 이제 이 기능을 배웠으니, 객체들이 태어나자마자 완벽한 상태를 가질 수 있게 도와줄 수 있답니다!

✅ 학습 완료 체크리스트

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

학습 내용	이해했나요?
15.1.2의 기본 개념	✅
기본 사용법과 문법	✅
주요 특징과 차이점	✅
자주 하는 실수들	✅
실전 예제 이해	✅
14단원 복습 완료	✅

🎯 추가 연습 문제들

조금 더 연습하고 싶은 친구들을 위한 추가 문제들이에요!

추가 문제 1. Book 클래스를 만들고 constructor로 제목과 저자를 설정해보세요.

// 답:
class Book {
    constructor(title, author) {
        this.title = title;
        this.author = author;
        this.pages = 0;        // 기본 페이지 수
        this.isRead = false;   // 기본적으로 읽지 않음

        console.log(`"${title}" 책이 서재에 추가되었습니다!`);
    }
}

// 책 만들기
let book1 = new Book("해리포터", "J.K.롤링");
let book2 = new Book("어린왕자", "생텍쥐페리");

// 책 정보 확인
console.log("첫 번째 책:", book1.title, "저자:", book1.author);
console.log("두 번째 책:", book2.title, "저자:", book2.author);
console.log("읽었나요?", book1.isRead);

추가 문제 2. 기본값을 가진 Person 클래스를 만들어보세요.

// 답:
class Person {
    constructor(name, age = 10) {
        this.name = name;
        this.age = age;
        this.hobby = "독서";     // 기본 취미
        this.isHappy = true;     // 기본적으로 행복함

        console.log(`${name}님이 ${age}세로 등록되었습니다!`);
    }
}

// 사람 만들기
let person1 = new Person("철수");           // 나이 기본값 사용
let person2 = new Person("영희", 12);       // 나이 직접 지정

// 정보 확인
console.log("첫 번째 사람:", person1.name, person1.age + "세", "취미:", person1.hobby);
console.log("두 번째 사람:", person2.name, person2.age + "세", "행복함:", person2.isHappy);

📂 마무리 정보

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

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

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

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

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

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

💻 무료로 학습하러 가기

'15. 클래스로 틀 만들기 (클래스) > 15.1 클래스 선언' 카테고리의 다른 글

15.1.3 인스턴스 메서드 - 객체가 할 수 있는 멋진 기능들 (0)	2025.07.22
15.1.1 클래스라는 놀라운 도구 - 똑같은 모양의 물건을 쉽게 만드는 비밀 도구 (0)	2025.07.21

현재글15.1.2 `constructor` - 객체의 첫 번째 설정을 도와주는 똑똑한 도우미

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

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

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

Today :
Yesterday :

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

15.1.2 `constructor` - 객체의 첫 번째 설정을 도와주는 똑똑한 도우미

📘 15.1.2 `constructor` - 객체의 첫 번째 설정을 도와주는 똑똑한 도우미

🧠 새로운 단어들과 친해지기

✨ `constructor`가 뭔지 알아보기

재미있는 비유: 햄버거 가게의 주문 시스템

🎯 왜 `constructor`를 배워야 할까요?

⚙️ 기본 사용법 살펴보기

🧪 직접 해보면서 배우기

🔹 첫 번째 예시: 반려동물 클래스 만들기

🔹 두 번째 예시: 기본값과 함께 사용하기

🔹 세 번째 예시: 계산과 검증이 포함된 constructor

🔄 constructor 실행 과정 정리하기

🔄 14단원 복습: 배열 메서드 되돌아보기

복습 문제 1: reduce로 합계 구하기

복습 문제 2: sort로 점수 순서대로 정렬하기

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

❌ 실수 1: `this` 없이 속성 설정하기

❌ 실수 2: `constructor`에서 `return` 사용하기

❌ 실수 3: `constructor`를 직접 호출하려고 하기

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

Ex1) 장난감을 만들 때 "새로운 ○○색 ○○ 장난감이 만들어졌어요!" 메시지를 띄워보자

Ex2) 음식을 만들 때 기본값을 사용해서 "맛있는 ○○이 준비되었어요!" 메시지를 보여주자

Ex3) 학생을 만들 때 학년 검증해서 "○학년 ○○ 학생이 등록되었어요!" 메시지를 띄워보자

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

Q1. `constructor`를 친구에게 설명한다면 어떻게 설명하겠나요?

Q2. 다음 코드에서 문제점을 찾아보세요.

🧚‍♀️ 이야기로 다시 배우기: 스마트폰 공장의 설정 시스템 대모험

✅ 학습 완료 체크리스트

🎯 추가 연습 문제들

추가 문제 1. Book 클래스를 만들고 constructor로 제목과 저자를 설정해보세요.

추가 문제 2. 기본값을 가진 Person 클래스를 만들어보세요.

📂 마무리 정보

'15. 클래스로 틀 만들기 (클래스) > 15.1 클래스 선언' 카테고리의 다른 글

'15. 클래스로 틀 만들기 (클래스)/15.1 클래스 선언'의 다른글

티스토리툴바

« 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

15.1.2 `constructor` - 객체의 첫 번째 설정을 도와주는 똑똑한 도우미

📘 15.1.2 constructor - 객체의 첫 번째 설정을 도와주는 똑똑한 도우미

🧠 새로운 단어들과 친해지기

✨ constructor가 뭔지 알아보기

재미있는 비유: 햄버거 가게의 주문 시스템

🎯 왜 constructor를 배워야 할까요?

⚙️ 기본 사용법 살펴보기

🧪 직접 해보면서 배우기

🔹 첫 번째 예시: 반려동물 클래스 만들기

🔹 두 번째 예시: 기본값과 함께 사용하기

🔹 세 번째 예시: 계산과 검증이 포함된 constructor

🔄 constructor 실행 과정 정리하기

🔄 14단원 복습: 배열 메서드 되돌아보기

복습 문제 1: reduce로 합계 구하기

복습 문제 2: sort로 점수 순서대로 정렬하기

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

❌ 실수 1: this 없이 속성 설정하기

❌ 실수 2: constructor에서 return 사용하기

❌ 실수 3: constructor를 직접 호출하려고 하기

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

Ex1) 장난감을 만들 때 "새로운 ○○색 ○○ 장난감이 만들어졌어요!" 메시지를 띄워보자

Ex2) 음식을 만들 때 기본값을 사용해서 "맛있는 ○○이 준비되었어요!" 메시지를 보여주자

Ex3) 학생을 만들 때 학년 검증해서 "○학년 ○○ 학생이 등록되었어요!" 메시지를 띄워보자

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

Q1. constructor를 친구에게 설명한다면 어떻게 설명하겠나요?

Q2. 다음 코드에서 문제점을 찾아보세요.

🧚‍♀️ 이야기로 다시 배우기: 스마트폰 공장의 설정 시스템 대모험

✅ 학습 완료 체크리스트

🎯 추가 연습 문제들

추가 문제 1. Book 클래스를 만들고 constructor로 제목과 저자를 설정해보세요.

추가 문제 2. 기본값을 가진 Person 클래스를 만들어보세요.

📂 마무리 정보

'15. 클래스로 틀 만들기 (클래스) > 15.1 클래스 선언' 카테고리의 다른 글

'15. 클래스로 틀 만들기 (클래스)/15.1 클래스 선언'의 다른글

관련글

티스토리툴바

📘 15.1.2 `constructor` - 객체의 첫 번째 설정을 도와주는 똑똑한 도우미

✨ `constructor`가 뭔지 알아보기

🎯 왜 `constructor`를 배워야 할까요?

❌ 실수 1: `this` 없이 속성 설정하기

❌ 실수 2: `constructor`에서 `return` 사용하기

❌ 실수 3: `constructor`를 직접 호출하려고 하기

Q1. `constructor`를 친구에게 설명한다면 어떻게 설명하겠나요?