자바스크립트 - 객체 생성자

안녕하세요, 야심 찬 프로그래머 여러분! 오늘 우리는 자바스크립트 객체 생성자의 fascinatig한 세계로 뛰어들어 보겠습니다. 여러분의 친절한 이웃 컴퓨터 과학 교사로서, 이 여정을 안내해 드리게 되어 기쁩니다. 그럼 가상의 헬멧을 쓰고, 객체를 만들어 보도록 시작해 보겠습니다!

JavaScript - Object Constructors

객체 생성자

상상해 보세요, 마법의 동물 가게를 운영하고 있다고요. 여러 가지 다른 동물들이 있으며, 각각 고유한 특징을 가지고 있습니다. 각 동물을 따로 작성하는 대신, 동물들을 위한 블루프린트를 만들 수 있지 않을까요? 바로 자바스크립트에서 객체 생성자가 하는 일입니다!

객체 생성자는 유사한 특성과 메서드를 가진 객체를 생산하는 공장과 같습니다. 우리의 마법 동물을 위한 간단한 생성자를 만들어 보겠습니다:

function MagicalPet(name, species, specialPower) {
this.name = name;
this.species = species;
this.specialPower = specialPower;
this.introduce = function() {
console.log(`Hi, I'm ${this.name}, a ${this.species} with ${this.specialPower} power!`);
};
}

이제 이를 구성해 보겠습니다:

MagicalPet이라는 함수를 이름, 종, 특별한 능력을 매개변수로 정의합니다.
함수 내부에서 this를 사용하여 이 매개변수를 객체의 속성으로 지정합니다.
인사를 출력하는 introduce 메서드를 정의합니다.

새로운 마법 동물을 만들기 위해서는 new 키워드를 사용합니다:

let fluffy = new MagicalPet("Fluffy", "dragon", "fire-breathing");
fluffy.introduce(); // 출력: Hi, I'm Fluffy, a dragon with fire-breathing power!

와우! 우리는 방금 객체 생성자를 사용하여 첫 번째 마법 동물을 만들었습니다. 흥분되지 않나요?

생성자에 속성이나 메서드 추가

occasionally, 생성자를 만든 후에 중요한 속성이나 메서드를 추가해야 할 때가 있습니다. 걱정 마세요! 프로토타입을 사용하여 나중에 추가할 수 있습니다.

우리의 MagicalPet에 age 속성과 birthday 메서드를 추가해 보겠습니다:

MagicalPet.prototype.age = 0;
MagicalPet.prototype.birthday = function() {
this.age++;
console.log(`${this.name} is now ${this.age} years old!`);
};

이제 모든 마법 동물은 나이를 가지게 되고, 생일을 축하할 수 있습니다:

fluffy.birthday(); // 출력: Fluffy is now 1 years old!
fluffy.birthday(); // 출력: Fluffy is now 2 years old!

자바스크립트 객체 프로토타입

"이제 '프로토타입'이 뭐죠?"라는 의문이 드실 수 있습니다. 프로토타입은 동일한 생성자로 만들어진 모든 객체가 공유하는 공통된 배낭 같은东西을 생각하면 됩니다. 이 배낭에 넣은 것은 모든 객체에 접근할 수 있습니다.

프로토타입에 속성이나 메서드를 추가할 때, 우리는 실제로 이 공통된 배낭에 것을 넣고 있습니다. 이는 메모리 효율성이 더 높습니다.

다음은 시각적 표현입니다:

MagicalPet 생성자
|
v
프로토타입 (공통 배낭)
- age
- birthday()
|
v
개별적인 MagicalPet 객체
- name
- species
- specialPower
- introduce()

자바스크립트 내장 객체 생성자

자바스크립트는 여러 가지 내장된 객체 생성자를 제공하며, 프로그래밍 여정에서 자주 사용됩니다. 몇 가지 예를 보겠습니다:

생성자	설명	예제
String()	문자열 객체 생성	`let greeting = new String("Hello");`
Number()	숫자 객체 생성	`let age = new Number(25);`
Boolean()	부울 객체 생성	`let isAwesome = new Boolean(true);`
Array()	배열 객체 생성	`let fruits = new Array("apple", "banana", "cherry");`
Object()	일반 객체 생성	`let emptyObj = new Object();`
Date()	날짜 객체 생성	`let today = new Date();`

이러한 생성자는 사용 가능하지만, 문자열, 숫자, 부울과 같은 원시 타입의 경우 리터럴을 사용하는 것이 더 일반적이고 효율적입니다:

let greeting = "Hello";            // `new String("Hello")` 보다 선호
let age = 25;                      // `new Number(25)` 보다 선호
let isAwesome = true;              // `new Boolean(true)` 보다 선호
let fruits = ["apple", "banana"];  // `new Array("apple", "banana")` 보다 선호

하지만 Date() 생성자는 다음과 같이 자주 사용됩니다:

let birthday = new Date("1990-01-01");
console.log(birthday.getFullYear()); // 출력: 1990

그렇게 되면, 우리는 자바스크립트 객체 생성자의 세계를 여행했고, 마법의 속성과 메서드를 추가하고, 신비한 프로토타입을 탐구하며, 내장된 생성자를 조금 더 배웠습니다.

기억하시길, 연습이 완벽을 만듭니다. 자신만의 생성자를 만들어 보세요, 마법의 주문이나 마법의 생물을 위한 것도 좋습니다. 이 개념들을 더 많이 연습할수록 더 자연스러워질 것입니다.

계속 코딩하고, 계속 배우고, 가장 중요한 것은 즐겁게 하세요! 다음 수업까지, 코드가 버그가 없기를 바라며 빠르게 컴파일되길 바랍니다!

Credits: Image by storyset