[JS] new 연산자와 생성자 함수

📌 참고 사이트

new 연산자와 생성자 함수 (javascript.info)

new 연산자와 생성자 함수

 

 

 

📋 생성자 함수

new 연산자와 생성자 함수 (객체를 생성하는 함수)를 사용하면 객체 리터럴({...}) 방식을 사용할 때보다 유사한 객체 여러 개를 쉽게 생성할 수 있다.

즉, 재사용할 수 있는 객체 생성 코드를 구현하는 데 의의가 있다.

 

 

📍 생성자 함수 만들기

생성자 함수와 일반 함수에 기술적인 차이는 없지만 보통 아래의 규칙을 따른다.

➡️ 함수 이름의 첫 글자는 대문자로 시작한다.

➡️ 반드시 new 연산자를 붙여 실행한다.

➡️ new 생성자 함수명 (인자) 의 형식으로 작성하여 객체를 생성한다.

➡️ new 연산자를 붙여 실행하면 어떤 함수라도 생성자 함수가 가능하다.

 

ex)

 

// 생성자 함수 User
function User(name) {
  this.name = name;
  this.isAdmin = false;
}

// new 연산자로 객체 생성
let user = new User("보라");

console.log(user);     // {name: '보라', isAdmin: false}
console.log(user.name);     // 보라
console.log(user.isAdmin);     // false

 

1️⃣ new User를 사용하여 함수를 실행하면 우선 빈 객체를 만들어 this에 할당한다.

2️⃣ this에 새로운 프로퍼티(name, admin)를 추가해 this를 수정한다. 이때 name의 값은 new User()의 인자로 넣어준 '보라'가 된다. 

3️⃣ this가 반환되고, user 변수에 할당되게 된다.

 

위의 경우 new User()의 괄호 안에 인자로 이름만 바꿔서 넣어 주면 name값만 다르고 구성은 같은 객체 여러개를 쉽게 만들 수 있다.

 

💡 재사용하지 않을 복잡한 객체를 만들어야 할 때, 다음과 같이 익명 생성자 함수로 감싸주는 방식을 사용할 수 있다.

 

let user = new function() {
  this.name = "John";
  this.isAdmin = false;
  
  // 사용자 객체를 만들기 위한 여러 코드,
  // 지역 변수, 복잡한 로직, 구문 등의
  // 다양한 코드가 들어간다.
};

 

생성자 함수를 익명 함수로 작성하면 어디에도 저장되지 않으므로 재사용이 불가하면서, 캡슐화된 코드를 만들 수 있다는 장점이 있다.

❓ 캡슐화 : 객체의 속성과 행위를 하나로 묶고, 실제 구현 내용 일부를 외부에 보여주지 않는 것이다.

 

 

 

📋 new.target과 생성자 함수

new.target 프로퍼티를 사용하면 함수가 new와 함께 호출되었는지 아닌지를 알 수 있다.

(자주 쓰이는 문법은 아니다.)

 

function User() {
  console.log(new.target);
}

// new 없이 호출하기
User();     // undefined

// new를 붙여 호출하기
new User();     // ƒ User() {console.log(new.target);}

 

 

 

📋 생성자와 return문

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

반환해야 할 것들은 모두 this에 저장되고, this는 자동적으로 반환되기 때문이다.

 

만약 return문이 있으면 다음과 같이 된다.

➡️ 객체를 return하면 this 대신에 return 다음에 적어준 객체가 반환된다.

 

function BigUser() {
  this.name = "원숭이";
  return { name: "고릴라" };     // this가 아닌 return 오른쪽에 적힌 새로운 객체를 반환한다.
}

console.log(new BigUser().name);     // 고릴라

 

➡️ 원시형을 return하면 return문이 무시된다. (바로 위의 경우를 제외하고는 this가 반환된다.)

 

function SmallUser() {
  this.name = "원숭이";
  return "사자";     
  // 원시형을 return하도록 작성하면 무시되고 this({name: "원숭이"})가 반환된다.
}

console.log(new SmallUser().name);     // 원숭이

 

 

 

📋 생성자 내 메서드

생성자 함수를 사용하면 매개변수를 이용해 객체 내부를 자유롭게 구성 가능하므로 유연성이 확보된다.

생성자 함수에는 프로퍼티 뿐만 아니라 메서드도 작성해 주는 것이 가능하다.

 

function User(name) {
  this.name = name;
  
  // 생성자 함수에 메서드 추가하기
  this.sayHi = function() {
    console.log('제 이름은 ' + this.name + ' 입니다.');
  };
}

let bora = new User('이보라');
bora.sayHi();     // 제 이름은 이보라 입니다.

 

 

 

✏️ 과제

📍 함수 두개로 동일한 객체 만들기

new A() === new B()가 성립 가능한 함수 A와 B를 만드는 게 가능할까?

 

function A() { ... }
function B() { ... }

let a = new A;
let b = new B;

console.log(a == b);     // true

 

만약 가능하다면, 실행 가능한 예시를 작성해 보자.

 

🅰️

 

두 함수 모두 this 대신 (같은)객체를 반환하게 하면 가능하다.

(같은 위치의 객체인 obj가 아닌 다른 위치의 객체, 예를 들면 let obj1 = {}, let obj2 = {}라 하였을 때 A와 B는 각각 obj1, obj2를 반환하게 하면 false가 나온다.)

 

let obj = {};

function A() { return obj; }
function B() { return obj; }

console.log(new A() == new B());     // true (===에서도 true)

 

 

📍 계산기 만들기

아래와 같은 세 개의 메서드를 가진 생성자 함수, Calculator를 만들어 보자.

➡️ read() : prompt 함수를 이용해 사용자로부터 값 2개를 받고, 이를 객체 프로퍼티에 저장한다.

➡️ sum() : 프로퍼티에 저장된 값 2개를 더한 후 반환한다.

➡️ mul() : 프로퍼티에 저장된 값 2개를 곱한 후 반환한다.

 

🅰️

 

function Calculator() {
  this.read = function () {
    this.num1 = +prompt('첫 번째 숫자를 입력하세요.', 1);
    this.num2 = +prompt('두 번째 숫자를 입력하세요.', 1);
  }
  
  this.sum = function () {
    return this.num1 + this.num2;
  }
  
  this.mul = function () {
    return this.num1 * this.num2;
  }
}

 

위 생성자 함수를 이용해 실행시켜 보면 다음과 같은 결과를 볼 수 있다.

 

let calculator = new Calculator();

calculator.read();

// 위에서 1과 1을 입력했을 때
console.log(calculator.sum());     // 2
console.log(calculator.mul());     // 1

 

 

📍 누산기 만들기

생성자 함수 Accumulator(startingValue)를 만들어 보자. 다음과 같은 조건을 충족해야 한다.

➡️ 프로퍼티 value에 현재 값을 저장한다. 최초 호출 시에는 생성자 함수의 인수, startingValue에서 시작값을 받아온다. 프로퍼티 value에는 startingValue와 사용자가 입력한 모든 값의 총합이 더해져 저장된다.

➡️ 메서드 read()에서는 prompt 함수를 사용해 사용자로부터 숫자를 받아오고, 받은 숫자를 value에 더해준다.

 

🅰️

 

function Accmulator(startingValue) {
  this.value = startingValue;
  this.read = function () {
    const num = +prompt('숫자를 입력해 주세요', 1);
    this.value += num;
  }
}

 

위 생성자 함수는 다음과 같이 사용해 볼 수 있다.

 

// 초기값 1로 설정
let accmulator = new Accmulator(1);
// 값을 입력받아 value 값에 더하기 (2를 입력받았다고 가정)
accmulator.read();
// 값을 입력받아 value 값에 더하기 (3을 입력받았다고 가정)
accmulator.read();
console.log(accmulator.value);     // 6