자바스크립트 Constructor Function(생성자 함수), 전역객체(Global Object)

안녕하세요 요즘 날씨가 너무 추워지고 있습니다. 다들 몸관리 잘하시고 감기 걸리지 않게 조심하세요~

오늘은 자바스크립트 생성자 함수 (Constructor Function)와 전역객체(Global Object)에 대해 알아보겠습니다.
우선 생성자 함수와 전역객체가 어떤 것인지, 무엇을 의미하는지 알아야겟죠? 저도 배우는 입장이라서 최대한 이해하기 쉽게 설명해드리겠습니다.  설명이 부족하더라도 댓글로 피드백 부분 남겨주시면 참고하겠습니다!! 

 글을 쓰기 앞서 모든  내용과 소스들은 다음과 같은 강의 플랫폼에서 응용하여  작성하였습니다.
출처: https://inf.run/xNcEg 

[지금 무료] [코드팩토리] [입문] 9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스 강의 - 인

 

 

생성자 함수 (Constructor Function)란? 
특정 타입의 객체를 생성하고 초기화하는 데 사용되는 함수입니다. 
- 생성자 함수는 보통 첫 글자를 대문자로 쓰는 것이 관례입니다.


전역객체(Global Object)란?
일반적으로 전역 범위에서 접근할 수 있는 객체를 말합니다.
- 모든 전역 변수, 함수, 객체를 포함하며, 이를 통해 전역 범위에서 사용할 수있습니다.

생성자 함수를 정의합니다. (this 키워드, new 키워드 사용)

function Idol(name, year){
     this.name = name;
     this.year = year;
   
   
}

const winter = new Idol('윈터', 2001); //winter 변수를 만든다고 하면 new 키워드를 사용하여 생성자 함수를 실행
console.log(winter);

 

 

function Idol(name, year){
     this.name = name;
     this.year = year;
   
   
   this.sing = function(){ // sing()함수 정의
        return `${this.name}가 노래를 부릅니다.`; //문자열로 반환하여 값을 출력
   }
}

const winter = new Idol('윈터', 2001); //winter 변수를 만든다고 하면 new 키워드를 사용하여 생성자 함수를 실행
console.log(winter); 
console.log(winter.sing());

sing() 함수를 정의하여 함수를 호출합니다. 

function Idol(name, year){
     this.name = name;
     this.year = year;
   
   
   this.sing = function(){ //문자열로 반환하여 값을 출력
        return `${this.name}가 노래를 부릅니다.`;
   }
}

const winter = new Idol('윈터', 2001); //winter 변수를 만든다고 하면 new 키워드를 사용하여 생성자 함수를 실행
console.log(winter); 
console.log(winter.sing());
const winter2 = Idol('윈터', 2001);  // new 키워드를 사용하지 않으면 undefined가 나옵니다.
console.log(winter2);

 
 함수형으로 실행을 해버리면 함수에서 반환해주는 것이 아무것도 없어서 undefined가 나옵니다. 
생정자 함수면은 new 키워드를 사용하여 생성자 함수를 정의한다고 보시면 됩니다.

function Idol(name, year){
     this.name = name;
     this.year = year;
   
   
   this.sing = function(){ //문자열로 반환하여 값을 출력
        return `${this.name}가 노래를 부릅니다.`;
   }
}

const winter = new Idol('윈터', 2001); //winter 변수를 만든다고 하면 new 키워드를 사용하여 생성자 함수를 실행
console.log(winter); 
console.log(winter.sing());
const winter2 = Idol('윈터', 2001); 
console.log(winter2);
console.log(global.name);   // global -> 글로벌 객체는 파일이 실행이 되었을때 자동으로 생성되는 객체(자바스크립트 엔진을 Node.js에서 실행을 할때 필요한 값을 가지고 있다.)

 
global.name을 출력하면 "윈터"가 출력된다.

function Idol(name, year){
   console.log(this);
     this.name = name;
     this.year = year;
   
   
   this.dance = function(){ //문자열로 반환하여 값을 출력
        return `${this.name}이 춤을 춥니다`;
   }
}

const winter = new Idol('윈터', 2001); //winter 변수를 만든다고 하면 new 키워드를 사용하여 생성자 함수를 실행
//여기서 this는 new 키워를 썼기 때문에 this 가 자동으로  Idol 으로 매핑되는걸 볼 수 있다.
const winter2 = Idol('윈터', 2001); 
//new 키워드를 사용하지 않으면 undefined 값이 나옵니다.

 

첫 번째 출력된 this 는 new 키워드를 사용했기 때문에 this 가 자동으로 Idol {} Object로 매핑이 되는 것 을 볼 수 있다.
두 번째 출력된 this 는 new 키워드를 사용하지 않았기 때문에 this가 자동으로  global 객체로 되는 것 을 볼 수 있습니다.

// Tip : new 키워드를 쓰게 되면은 함수에서는 this를 어디에다 매핑하는지 결정하게 된다.

 

function Idol(name, year){
   console.log(new.target);
     this.name = name;
     this.year = year;
   
   
   this.dance = function(){ //문자열로 반환하여 값을 출력
        return `${this.name}이 춤을 춥니다`;
   }
}

const winter = new Idol('윈터', 2001); //winter 변수를 만든다고 하면 new 키워드를 사용하여 생성자 함수를 실행
//여기서 this는 new 키워를 썼기 때문에 this 가 자동으로  Idol 으로 매핑되는걸 볼 수 있다.
const winter2 = Idol('윈터', 2001);

 

  함수: Idol 이라는 함수가 출력이되고 ,  new 키워드를  쓰지 않았을 때는 undefined이 출력이된다.
 여기서 알 수 있는 것은 new 키워드를 쓰게 되면은 new가 실행이 된 대상에(함수)가 반환이 되고 , new 키워드를 쓰지 않았다면 new.target 이 undefined 인거를 알 수 있습니다. 

function Idol(name, year){
   if(!new.target){ //만약 new.target이 undefind면은 -> true 값
      return new Idol(name,year); // Idol 함수안에서 Idol을 생성해서 반환 

   }

   this.name = name; //this 키워드를 통해서 Property를 setting한다.
   this.year = year; 
   
   this.dance = function(){ //문자열로 반환하여 값을 출력
        return `${this.name}이 춤을 춥니다`;
   }
}

const winter = new Idol('윈터', 2001); //winter 변수를 만든다고 하면 new 키워드를 사용하여 생성자 함수를 실행
//여기서 this는 new 키워를 썼기 때문에 this 가 자동으로  Idol 으로 매핑되는걸 볼 수 있다. 
console.log(winter); 
// console.log(winter.dance());  
const winter2 = Idol('윈터', 2001); //new 키워드를 사용하지 않으면 undefined 값이 나옵니다.
// 여기서 this는 new 키워드를 쓰지 않았기 때문에 자동으로 this가 global이 되는것을 볼 수 있습니다.
console.log(winter2);

 

두 개의 출력결과 모두 new 키워드를 사용하거나, 사용하지 않거나  Idol Type에 Object를 반환해줄 수 있다.

 

const IdolArrow = (name, year)=> {
   this.name = name;
   this.year = year;
};

const winter3 = new IdolArrow('윈터', 2001); // IdolArrow함수는 생성자 함수가 아니라는 오류가 뜬다.

 

오류 내용

 

 

 

 

다음은 소스에서 사용되는 키워드들을 정리하였습니다.

// global -> 글로벌 객체는 파일이 실행이 되었을때 자동으로 생성되는 객체(자바스크립트 엔진을 Node.js에서 실행을 할때 필요한 값을 가지고 있다.) 
// Tip : new 키워드를 쓰게 되면은 함수에서는 this를 어디에다 매핑하는지 결정하게 된다.

// new 키워드가 실행이 되었는지 안되었는지 확인할 수 있는 방법 -> new.target 을 사용
// new 키워드를 사용할 수 있는 함수는 일반 함수에서만 사용할 수 있다.