객체: 기본 - new , constructor

개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 합니다.

 

이럴 때 사용하는 것이 new연산자와 constructor함수 입니다.

 

 

constructor ( 생성자 함수 )

 

생성자 함수와 일반 함수에 기술적인 차이는 없습니다.

대신 생성자 함수에는 2가지 관례가 있습니다.

 

1. 함수 이름의 첫 글자는 대문자로 시작합니다.

2. 반드시 'new' 연산자를 붙여 실행합니다.

function User(name){
  this.name = name;
  this.isGood = false;
}

let user1 = new User("Lee");

console.log(user1.name)		// Lee
console.log(user1.isGood)	// false

 

new 함수명( ... ) 을 사용해서 함수를 실행하면 다음과 같이 동작합니다.

 

1. 빈 객체를 만들어 this에 할당합니다.

2. 함수 본문을 실행해서 this 객체에 프로퍼티로 추가합니다.

3. this 객체를 return 합니다!

 

위와 같은 동작으로 우리는 새로운 객체를 얻을 수 있습니다. ( 만들었습니다! )

 

생성자 함수의 의의는 

재사용할 수 있는 객체를 만들자! 입니다.

 

또한 어떤 함수라도 생성자 함수가 될 수 있습니다.

때문에 어떤 함수라도 new를 붙여서 실행하면 위의 3가지 순서로 동작합니다!

 

 

익명 생성자 함수

재사용할 필요가 없는 복잡한 객체를 만들어야 할 때

코드를 익명 생성자 함수로 감싸주는 방식을 사용할 수 있습니다!

let user1 = new function(){
  this.name = "Lee";
  this.isGood = true;
}

console.log(user1.name)		// Lee
console.log(user1.isGood)	// true

 

위 함수는 익명함수이기 때문에 어디에도 저장되지 않고, 재사용도 불가능합니다.

에초에 단 한 번만 사용할 목적으로 만들었기 때문이죠!

 

위와 같은 코드는 재사용은 막으면서 캡슐화를 할 수 있는 방법입니다.

 

 

생성자와 return문

 

생성자 함수는 보통 return문이 없습니다.

반환해야 할 것들은 this에 있고, this는 자동으로 return되기 때문입니다.  ( new연산자의 알고리즘 )

 

그럼에도 return문을 사용한다면 어떻게 될까요?

 

1. 객체를 return하면 this가 무시되고 객체가 return됩니다.

function User(name){  
    this.name = name
    this.isGood = true
    
    return {
      name
    }  
}

let user1 = new User('태훈')

console.log(user1) // {name: '태훈'}

 

2. 원시형을 return하면 this가 return되고 원시형이 무시됩니다.

function User(name){  
    this.name = name
    this.isGood = true
    
    return "hihihihi"  
}

let user1 = new User('태훈')

console.log(user1)	// User {name: '태훈', isGood: true}

위의 코드처럼 return문이 들어간 생성자 함수는 거의 없습니다.

참고만 하면 될듯 허네유.

 

 

 

파라미터가 없는 생성자 함수의 괄호는 생략할 수 있습니다.

let user1 = new User

let user1 = new User()

하지만 좋은 스타일이 아니라니께..

제가 발견 한다면 살포시~ 괄호를 넣어보도록 하겠습니다.

 

 

 

생성자 속 메서드

생성자 함수로 this에 메서드를 더해주는 것도 가능합니다!

function User(name){  
    this.name = name
    this.isGood = true
    
    this.hi = function(){
        console.log(`${this.name} hihi!`)
    } 
}

let user1 = new User('도현')

user1.hi() // 도현 hihi!

class가 생각 나는군요... 이후 챕터에서 금방 나올것 같네요!

 

 

 

 

 

기본이 중요하다!