Javascript - new 연산자 & 생성자 함수

2023. 7. 24. 10:26·📘 Frontend/Javascript
목차
  1. new 연산자 && 생성자 함수
  2. 생성자 함수
  3. new.target & 생성자 함수
  4. 생성자 & Return
  5. 생성자 내부 함수
  6. 요약
  7. 연습
  8. 계산기 만들기
  9. 누산기 만들기

new 연산자 && 생성자 함수

객체 리터럴 {...} 을 사용하면 객체를 쉽게 만들 수 있습니다.

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

복수의 사용자, 메뉴 내 다양한 아이템을 객체로 표현하려고 하는 경우가 그렇죠.

'new' 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있습니다.


생성자 함수

생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없습니다. 다만 생성자 함수는 아래 두 관례를 따릅니다.

  1. 함수 이름의 첫 글자는 대문자로 시작합니다.
  2. 반드시 'new' 연산자를 붙여 실행합니다.
function User(name) {
    // this = {}; (빈 객체가 암시적으로 만들어짐)
    this.name = name;
    this.isAdmin = false;
    // return this; (this가 암시적으로 반환됨)
}

let user = new User("구름");

alerrt(user.name);
alert(user.isAdmin);

익명 생성자 함수

재사용할 필요가 없는 복잡한 객체를 만들어야 한다고 해봅시다. 많은 양의 코드가 필요할 겁니다.

이럴 땐 아래와 같이 코드를 익명 생성자 함수로 감싸주는 방식을 사용할 수 있습니다.

let user = new function() {
    this.name = "Kim";
    this.isAdmin = false;
}

위 생성자 함수는 익명 함수이기 때문에 어디에도 저장되지 않습니다.

처음 만들 때부터 단 한 번만 호출할 목적으로 만들었기 때문에 재사용이 불가능합니다.

이렇게 익명 생성자 함수를 이용하면 재사용은 막으면서 코드를 캡슐화 할 수 있습니다.


new.target & 생성자 함수

일반적으로 잘 쓰이지 않는 new.target입니다.

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

일반적인 방법으로 함수를 호출했다면 new.target은 undefined를 반환합니다. 반면 new와 함께 호출한 경우엔 new.target은 함수 자체를 반환해줍니다.

function User() {
    alert(new.target);
}

User(); // undefined
new User(); // function User {...}

함수 본문에서 new.target을 사용하면 해당 함수가 new와 함께 호출되었는지(in constructor mode) 아닌지(in regular mode)를 확인할 수 있습니다.

이를 활용해 일반적인 방법으로 함수를 호출해도 new를 붙여 호출한 것과 같이 동작하도록 만들어보겠습니다.

function User(name) {
    // new 없이 호출해도 new를 이용해 생성해준다.
    if (!new.target) {
        return new User(name);
    }
    this.name = name;
}

let cloud = User("구름"); // new를 안써도 new를 쓴것처럼 바꿔줍니다.
alert(cloud.name); // 구름

그런데 이 방법을 믿고 객체를 만드는 경우에도 new를 생략하면 코드가 정확히 무슨 일을 하는지 알기 어렵습니다.

new가 붙어있으면 새로운 객체를 만든다는 걸 누구나 알 수 있기 때문에

new를 생략해서 객체를 만드는것은 정말 필요한 경우에만 사용하시고 남발하지 않으시길 바랍니다.


생성자 & Return

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

반환해야 할 것들은 모두 this에 저장되고, this는 자동으로 반환되기 때문에 반환문을 명시적으로 써 줄 필요가 없습니다.

그런데 만약 return 문이 있다면 어떤 일이 벌어질까요? 아래와 같은 간단한 규칙이 적용됩니다.

  • 객체를 return 한다면 this 대신 객체가 반환됩니다.
  • 원시형을 return 한다면 return문이 무시됩니다.

return 뒤에 객체가 오면 생성자 함수는 해당 객체를 반환해주고, 이 외의 경우는 this가 반환되죠.

아래 예시에선 첫 번째 규칙이 적용돼 return은 this를 무시하고 객체를 반환합니다

function BigUser() {
    this.name = "원숭아";
    return { name: "토끼" }; // this가 아닌 새로운 객체를 반환함
}

alert(new BigUser().name); // 토끼

아무것도 return하지 않는 예시를 살펴봅시다. 원시형을 반환하는 경우와 마찬가지로 두 번째 규칙이 적용됩니다.

function SmallUser() {
    this.name = "원숭이";
    return; // this를 반환함
}

alert(new SmallUser().name); // 원숭이

괄호 생략가능

'좋은 스타일'은 아니지만 파라미터가 없는 생성자 함수는 괄호를 생략해 호출할 수 있습니다.

// 2개 모두 동일하게 동작함
let user = new User;
let user = new User();

생성자 내부 함수

생성자 함수를 사용하면 매개변수를 이용해 객체 내부를 자유롭게 구성할 수 있습니다. 엄청난 유연성이 확보되죠.

지금까진 this에 프로퍼티를 더해주는 예시만 살펴봤는데, 메서드를 더해주는 것도 가능합니다.

아래 예시에서 new User(name)는 프로퍼티 name과 메서드 sayHi를 가진 객체를 만들어줍니다.

function User(name) {
    this.name = name;
    this.sayHi = function() {
        alert("제 이름은 " + this.name + "입니다.");
    };
}

let cloud = new User("구름");

cloud.sayHi();

요약

  • 생성자 함수(짧게 줄여서 생성자)는 일반 함수입니다. 다만, 일반 함수와 구분하기 위해 함수 이름 첫 글자를 대문자로 씁니다.
  • 생성자 함수는 반드시 new 연산자와 함께 호출해야 합니다. new와 함께 호출하면 내부에서 this가 암시적으로 만들어지고, 마지막엔 this가 반환됩니다.

생성자 함수는 유사한 객체를 여러 개 만들 때 유용합니다.

자바스크립트는 언어 차원에서 다양한 생성자 함수를 제공합니다.

날짜를 나타내는 데 쓰이는 Date, 집합(set)을 나타내는 데 쓰이는 Set 등의 내장 객체는

이런 생성자 함수를 이용해 만들 수 있습니다.


연습

계산기 만들기

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

  • read() – prompt 함수를 이용해 사용자로부터 값 두 개를 받고, 이를 객체 프로퍼티에 저장합니다.
  • sum() – 프로퍼티에 저장된 값 두 개를 더한 후 반환합니다.
  • mul() – 프로퍼티에 저장된 값 두 개를 곱한 후 반환합니다.
function Calculator() {
    this.sum = function() {
        return this.a + this.b;
    };

    this.mul = function() {
        return this.a * this.b;
    };

    this.read = function() {
        this.a = +prompt("첫번쨰 숫자", 0);
        this.b = +prompt("두번째 숫자", 0);
    };
}

let calculator = new Claculator();
claculator.read();

alert("SUM = " + calculator.sum());
alert("MUL = " + calculator.mul());

누산기 만들기

생성자 함수 Accumulator(startingValue)를 만들어 보세요.

Accumulator(startingValue)를 이용해 만드는 객체는 아래와 같은 요건을 충족해야 합니다.

  • 프로퍼티 value에 현재 값(current value)을 저장합니다. 최초 호출 시엔 생성자 함수의 인수, startingValue에서 시작값(starting value)을 받아옵니다.
  • 메서드 read()에선 prompt 함수를 사용해 사용자로부터 숫자를 받아오고, 받은 숫자를 value에 더해줍니다.

프로퍼티 value엔 startingValue와 사용자가 입력한 모든 값의 총합이 더해져 저장됩니다.

function Accumulator(startingValue) {
    this.value = startingValue;

    this.read = function() {
        this.value += +prompt("숫자", 0);
    };
}

let accumulator = new Accumulator(1);
accumulator.read();
accumulator.read();
alert(accumulator.value);
저작자표시 (새창열림)

'📘 Frontend > Javascript' 카테고리의 다른 글

Javascript - Optional Chaining  (0) 2023.07.24
Javascript - Function & This  (0) 2023.07.24
Javascript - Garbage Collection  (0) 2023.07.24
Javascript - 참조에 의한 객체 복사  (0) 2023.07.24
Javascript - Object  (0) 2023.07.16
  1. new 연산자 && 생성자 함수
  2. 생성자 함수
  3. new.target & 생성자 함수
  4. 생성자 & Return
  5. 생성자 내부 함수
  6. 요약
  7. 연습
  8. 계산기 만들기
  9. 누산기 만들기
'📘 Frontend/Javascript' 카테고리의 다른 글
  • Javascript - Optional Chaining
  • Javascript - Function & This
  • Javascript - Garbage Collection
  • Javascript - 참조에 의한 객체 복사
신건우
신건우
조용한 개발자
  • 신건우
    우주먼지
    신건우
  • 전체
    오늘
    어제
    • 분류 전체보기 (422)
      • 📘 Frontend (71)
        • Markup (1)
        • Style Sheet (2)
        • Dart (8)
        • Javascript (12)
        • TypeScript (1)
        • Vue (36)
        • React (2)
        • Flutter (9)
      • 📘 Backend (143)
        • Java (34)
        • Concurrency (19)
        • Reflection (1)
        • Kotlin (29)
        • Python (1)
        • Spring (42)
        • Spring Cloud (5)
        • Message Broker (5)
        • Streaming (2)
        • 기능 개발 (5)
      • 💻 Server (6)
        • Linux (6)
      • ❌ Error Handling (11)
      • 📦 Database (62)
        • SQL (31)
        • NoSQL (2)
        • JPQL (9)
        • QueryDSL (12)
        • Basic (4)
        • Firebase (4)
      • ⚙️ Ops (57)
        • CS (6)
        • AWS (9)
        • Docker (8)
        • Kubernetes (13)
        • MSA (1)
        • CI & CD (20)
      • 📚 Data Architect (48)
        • Data Structure (10)
        • Algorithm (8)
        • Programmers (17)
        • BaekJoon (5)
        • CodeUp (4)
        • Design Pattern (4)
        • AI (0)
      • ⚒️ Management & Tool (8)
        • Git (7)
        • IntelliJ (1)
      • 📄 Document (10)
        • Project 설계 (6)
        • Server Migration (3)
      • 📄 책읽기 (2)
        • 시작하세요! 도커 & 쿠버네티스 (2)
      • 🎮 Game (4)
        • Stardew Vally (1)
        • Path of Exile (3)
  • 블로그 메뉴

    • 링크

      • Github
    • 공지사항

    • 인기 글

    • 태그

      GStreamer #Pipeline
      React #Markdown
      Lock #Thread #Concurrency
    • 최근 댓글

    • 최근 글

    • hELLO· Designed By정상우.v4.10.0
    신건우
    Javascript - new 연산자 & 생성자 함수
    상단으로

    티스토리툴바

    단축키

    내 블로그

    내 블로그 - 관리자 홈 전환
    Q
    Q
    새 글 쓰기
    W
    W

    블로그 게시글

    글 수정 (권한 있는 경우)
    E
    E
    댓글 영역으로 이동
    C
    C

    모든 영역

    이 페이지의 URL 복사
    S
    S
    맨 위로 이동
    T
    T
    티스토리 홈 이동
    H
    H
    단축키 안내
    Shift + /
    ⇧ + /

    * 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.