[자바스크립트 29] 프로토타입과 상속 2 - 생성자함수

// 생성자 함수에 대해 더 자세히 설명해 주세요!

 

네, 그럼 생성자 함수에 대해 자세히 설명하겠습니다.

 

자바스크립트에서 생성자 함수는 새로운 객체를 만들고 초기화하는 데 사용되는 특별한 함수입니다.
생성자 함수는 대문자로 시작하는 이름을 가진 함수로 정의되는 것이 일반적입니다.
이는 생성자 함수와 일반 함수를 구분하는 좋은 방법입니다.

다음은 생성자 함수의 예입니다:

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

var person1 = new Person('John', 'Doe');
var person2 = new Person('Jane', 'Doe');

console.log(person1.firstName); // 출력: John
console.log(person2.firstName); // 출력: Jane

위 코드에서 Person은 생성자 함수입니다. new 키워드를 사용해 Person의 새로운 인스턴스를 만들 수 있습니다.
생성자 함수가 호출되면, 새로운 빈 객체가 만들어지고, this 키워드는 그 새로운 객체를 가리키게 됩니다.
그래서 this.firstName와 this.lastName는 새로운 객체에 속성을 추가합니다.

 

다음은 생성자 함수에서 일어나는 절차입니다:

1. 먼저 새로운 빈 객체가 만들어집니다.
2. 그 다음, this는 새로 만들어진 객체를 가리킵니다.
3. 생성자 함수의 본문이 실행됩니다. 즉, 해당 객체의 속성이 설정됩니다.
4. 생성자 함수에서 명시적으로 다른 객체를 반환하지 않는다면, this가 자동으로 반환됩니다. 즉, 새로 만들어진 객체가 반환됩니다.

마지막으로, 생성자 함수에는 메소드도 추가할 수 있습니다.
생성자 함수의 prototype 속성에 메소드를 추가하면, 생성자 함수의 모든 인스턴스가 이 메소드를 상속받습니다.
이는 메모리를 효율적으로 사용하는 방법이며, 모든 인스턴스가 같은 메소드에 대해 같은 코드를 공유하기 때문입니다.

 

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

Person.prototype.getFullName = function() {
  return this.firstName + ' ' + this.lastName;
}

var person1 = new Person('John', 'Doe');
console.log(person1.getFullName()); // 출력: John Doe

이것이 자바스크립트의 생성자 함수에 대한 기본적인 설명입니다.
생성자 함수는 자바스크립트에서 매우 중요한 역할을 하는 도구이며, 객체 지향 프로그래밍에서 많이 사용됩니다.

 

// 감사합니다. 그렇다면 다음과 같이 코드를 작성하면 어떤 차이가 있나요?

function Person(firstName, lastName){
  return firstName + '   ' + lastName;
}
var test = new Person('John', 'Doe');
console.log(test);

이 코드에서는 Person 생성자 함수가 객체 대신 문자열을 반환합니다.
new 키워드를 사용하여 Person을 호출하면 일반적으로는 새 Person 객체를 기대하지만, 이 경우 Person은 객체 대신 문자열을 반환합니다.

 

이 경우, 생성자 함수에서 명시적으로 다른 값을 반환하고 있기 때문에,
new 키워드를 사용하여 함수를 호출해도 반환 값은 이 문자열이 됩니다.

 

위 코드를 실행하면, 콘솔에 "John Doe"라는 문자열이 출력됩니다.
new를 사용하여 Person 생성자를 호출했지만, Person 함수에서는 새 객체를 만들지 않고
문자열을 반환하므로 결과값은 이 문자열이 됩니다.

 

자바스크립트에서 생성자 함수를 작성할 때는 일반적으로 this 키워드를 사용하여 객체의 속성을 설정하고,
별도의 반환 값 없이 this (즉, 새로 만들어진 객체 자체)가 반환되게 합니다.
이런 방식이 자바스크립트에서 new 키워드와 생성자 함수를 사용한 객체 생성의 일반적인 패턴입니다.

 

그러나 생성자 함수에서 명시적으로 객체가 아닌 다른 값을 반환하면, new를 사용해도 그 반환값이 결과가 됩니다.
이 경우, 생성자 함수는 일반 함수처럼 작동하게 됩니다.
이런 방식은 일반적이지 않으며, 혼란을 일으킬 수 있으므로 특별한 경우가 아니라면 피하는 것이 좋습니다.

 

// 아하 그렇군요. 그럼 제가 새로운 객체를 반복해서 만들려고 생성자 함수를 사용할 것이 아니라면, 그냥 일반 함수 문법처럼 쓰면 되겠네요. 혹시 그러면 함수명 시작을 대문자로 하는 것은 관계가 있나요?

 

자바스크립트에서 함수 이름의 첫 글자를 대문자로 하는 것은 관습입니다.
이 관습은 생성자 함수를 나타내는 방법으로, 이런 방식으로 생성자 함수와 일반 함수를 쉽게 구분할 수 있습니다.

 

자바스크립트는 대소문자를 구별하는 언어이므로 Person과 person은 서로 다른 변수로 취급됩니다.

대문자로 시작하는 함수 이름은 함수가 생성자 함수로 사용될 것임을 나타내는 일종의 신호입니다.

이는 개발자들 사이의 일종의 약속이라고 볼 수 있습니다.

 

그러나 이것은 강제되는 규칙은 아닙니다. 함수 이름의 첫 글자를 대문자로 하는 것은 완전히 선택 사항이며, 강제되는 규칙은 아닙니다.
단지 코드를 읽는 사람들에게 해당 함수가 생성자 함수임을 알려주는 방법일 뿐입니다.

 

따라서 새로운 객체를 반복해서 만들 필요가 없고, 단순히 어떤 값을 계산하거나 변환하는 함수를 만들고자 한다면,
함수 이름을 소문자로 시작하고, new 키워드 없이 함수를 호출하는 것이 일반적입니다.

 

예를 들어:

function calculateSum(a, b) {
  return a + b;
}

var sum = calculateSum(1, 2);
console.log(sum); // 3

이 코드에서 calculateSum은 일반 함수이며, new 키워드 없이 호출되었습니다. 이 함수는 두 숫자의 합을 계산하여 반환합니다.

 

// 그렇다고 합니다.. 상속이나 메소드 포함 같은건 일단 제외