생성자와 new

하영·2024년 7월 28일

JavaScript

목록 보기

17/29

강의를 들을 때도 그렇고 Promise 비동기작업 부분 공부할 때도 종종 등장한 new!
이게 정확히 뭔지 모르니까 언제 적어줘야하는지를 모르겠고
적혀있어도 왜 적힌거고 똑같은 변수인데 적지 않은 이유는 뭔지 궁금해서 간단하게 정리해보려고 한다.

생성자와 new

객체

우선 우리가 일반적으로 사용하는 객체를 만들어보자

const person = {
  name: '김ㅇㅇ'
  introduce: function(){
    return 'My name is' + this.name;
  }

person 이라는 객체 안에 key, value 값을 넣어주었다. ~~(원장튜터님 : 객체는 무조건 키 밸류 페어~~)~~
이 객체를 이미지로 표현해보면 아래와 같다.

person 을 그릇으로 보면 그 안에 name 이라는 이름을 가진 변수를 '속성' 즉, '프로퍼티'라고 부르고
introduce 라는 이름을 가진 함수가 들어있는데 이런 아이들은 '메소드' 라고 부른다.

아무튼 이렇게 만든 객체를 가지고 여러 명의 객체를 만든다고 하면 중복되는 부분이 발생한다.

const person1 = {
  name: '김ㅇㅇ'
  introduce: function(){
    return 'My name is' + this.name;
  }

const person2 = {
  name: '이ㅇㅇ'
  introduce: function(){
    return 'My name is' + this.name;
  }

introduce 라는 메소드가 중복되기 때문에 꼬린내가 나는 개발자들이 극혐하는 코드가 발생한다. 이를 없애주는 일을 해야하고 이 작업을 해주는게 바로 생성자!이다.

생성자(Constructor)

생성자(Constructor)는 객체를 만드는 역할!을 하는 함수다.

function Person() {
    let p = new Person();
    p.name = '김ㅇㅇ';
    p.introduce = function () {
        return 'My name is' + this.name;
    }
}

함수를 호출할 때 new를 붙이면 새로운 객체를 만든 후에 이를 return한다.
자바스크립트 강의에서 틀을 만든다는 설명을 들었었는데 여기서 말하는 '틀' === '새로운객체' 같다.

new를 붙였을 때와 붙이지 않았을 때의 차이를 콘솔로 확인해보자

✅ 콘솔로 확인하기
1) new 붙이지 않고 함수 생성

함수를 만들고 아무것도 넣지 않았기 때문에 결과값이 undefined 이 뜬다.

하지만 new 만 딱 붙여주고 함수를 호출하고 확인해보면 객체가 만들어진다!! (아웅 신기해)
이럴경우 Person()은 더이상 함수가 아니고 '생성자'라고 부른다.
이 생성자는 new에 의해서 비어있는 객체를 만든다.

생성자로 사알짞 바꾸긴했지만 우리가 해야하는 냄새나는 코드를 제거하는 일은 1나도 하지 않았다.
이 코드를 활용해서 수정작업을 해보자

코드 개선하기

function Person() {
    let p1 = new Person();
    p1.name = '김ㅇㅇ';
    p1.introduce = function () {
        return 'My name is' + this.name;
    }
}

function Person() {
    let p2 = new Person();
    p2.name = '김ㅇㅇ';
    p2.introduce = function () {
        return 'My name is' + this.name;
    }
}

흥 달라진 줄 알앗찌? 걍 똑같은거임..ㅋㅋ 아무튼 이렇게 생성자를 활용한 코드로 살짝 바꿨고
introduce 메소드를 불필요하게 중복시키지 않는 코드로 바꿔보면 아래처럼 작성할 수 있다.

중복된 코드 없애기

function Person(name) {
    this.name = name;
    this.introduce = function () {
        return 'My name is' + this.name;
    }
}

let p1 = new Person('김ㅇㅇ');
let p2 = new Person('이ㅇㅇ');