생활코딩

Coding Everybody

코스 전체목록

닫기

생성자와 new

객체

객체란 서로 연관된 변수와 함수를 그룹핑한 그릇이라고 할 수 있다. 객체 내의 변수를 프로퍼티(property) 함수를 메소드(method)라고 부른다. 객체를 만들어보자.

var person = {}
person.name = 'egoing';
person.introduce = function(){
    return 'My name is '+this.name;
}
document.write(person.introduce());

객체를 만드는 과정에 분산되어 있다. 객체를 정의 할 때 값을 셋팅하도록 코드를 바꿔보자.

var person = {
    'name' : 'egoing',
	'introduce' : function(){
		return 'My name is '+this.name;
	}
}
document.write(person.introduce());

만약 다른 사람의 이름을 담을 객체가 필요하다면 객체의 정의를 반복해야 할 것이다. 객체의 구조를 재활용할 수 있는 방법이 필요하다. 이 때 사용하는 것이 생성자다.

생성자

생성자(constructor)는 객체를 만드는 역할을 하는 함수다. 자바스크립트에서 함수는 재사용 가능한 로직의 묶음이 아니라 객체를 만드는 창조자라고 할 수 있다.

function Person(){}
var p = new Person();
p.name = 'egoing';
p.introduce = function(){
    return 'My name is '+this.name;	
}
document.write(p.introduce());

함수를 호출할 때 new을 붙이면 새로운 객체를 만든 후에 이를 리턴한다. 위의 코드는 새로운 객체를 변수 p에 담았다. 여러사람을 위한 객체를 만든다면 아래와 같이 코드를 작성해야 할 것이다. 

function Person(){}
var p1 = new Person();
p1.name = 'egoing';
p1.introduce = function(){
    return 'My name is '+this.name;	
}
document.write(p1.introduce()+"<br />");

var p2 = new Person();
p2.name = 'leezche';
p2.introduce = function(){
	return 'My name is '+this.name;	
}
document.write(p2.introduce());

별로 개선된 것이 없다. 

function Person(name){
    this.name = name;
	this.introduce = function(){
		return 'My name is '+this.name;	
	}	
}
var p1 = new Person('egoing');
document.write(p1.introduce()+"<br />");

var p2 = new Person('leezche');
document.write(p2.introduce());

생성자 내에서 이 객체의 프로퍼티를 정의하고 있다. 이러한 작업을 초기화라고 한다. 이를 통해서 코드의 재사용성이 대폭 높아졌다.

코드를 통해서 알 수 있듯이 생성자 함수는 일반함수와 구분하기 위해서 첫글자를 대문자로 표시한다.

자바스크립트 생성자의 특징

일반적인 객체지향 언어에서 생성자는 클래스의 소속이다. 하지만 자바스크립트에서 객체를 만드는 주체는 함수다. 함수에 new를 붙이는 것을 통해서 객체를 만들 수 있다는 점은 자바스크립트에서 함수의 위상을 암시하는 단서이면서 또 자바스크립트가 추구하는 자유로움을 보여주는 사례라고 할 수 있다.

 

댓글

댓글 본문
작성자
비밀번호
  1. 박창신
    완료
  2. 자바스크립트 강의를 보면서 document.write()의 기능을 사용할 때 줄바꿈을 위해서 <br>을 추가하시던데 document.wrireln()을 사용하시면 자동으로 줄바꿈을 해주는데 왜 <br> 태그를 추가하시는건가요? 그냥 습관인 건가요? writeln쓰면 편해요 ㅎㅎ
  3. sayyoursong
    newmite0님,
    저도 js를 공부하는 입장이지만 공부차 아는만큼만 적어봅니다.

    우선 질문자님의 코드를 에러가 나지 않는 "전자"의 코드와
    에러가 나는 "후자"의 코드로 이름 부를게요.

    1.
    "사실 변수의 경우는 this로 하건
    var로 선언하건 정상작동이 되더군요.
    그런데 함수의 경우는 에러가 나요...."

    이 부분 답변 드리자면 p1에 도트연산자(.)를 사용해
    변수 age와 함수 calAge()를 호출하고 싶으셨던 것 같은데요, 후자의 방법으론 둘다 불가능합니다.

    작성하신 코드에서 변수 부분은 에러나지 않았다 하셨는데요,
    p1.age = 22;
    이 코드는 (person이 들어있는) p1에 age라는 프로퍼티를 "동적으로 생성"한 후, 22라는 값을 대입한 것입니다.
    그러니까 p1에 age라는 프로퍼티가 없더라도 생성해서 값을 넣은 거에요.

    그리고 메서드 호출이 안 되신 것은 p1에 해당 메서드가 존재하지 않기 때문입니다.
    new person("newmite0");
    -> 이렇게 객체 생성을 했다고 해서 p1에 name, age, calAge란 프로퍼티가 존재하지 않습니다. (★을 참조)

    ★ 왜 함수 내의 변수를 p1.age 처럼 도트연산자(.)를 이용해 부를 수 없냐고 물으신다면
    자바스크립트에서는 그렇게 약속되어있다고 알고 있습니다.
    자바스크립트에서 도트연산자로 뭔갈 가져오고 싶으시다면 Json 형식으로 작성하셔야 합니다.

    var 렉시컬 = {
    프로퍼티명1 : 값,
    프로퍼티명2 : function() {
    return document.write('문자열');
    }
    }
    document.write(렉시컬.프로퍼티명1);
    렉시컬.프로퍼티명2();

    이렇게 작성하신다면 정상작동할거에요.


    2. 전자와 후자의 차이
    전자가 실행되는 이유를 아시려면 this를 살펴보셔야 되는데요,
    person 함수 내에 console.log(this); 를 추가하고 크롬 - 개발자도구 - 콘솔에서 확인하시면
    this에 person이 들어있는 것을 보실 수 있을거에요.
    그러므로 전자의 코드는 아래처럼 이해할 수 있겠지요.

    1: function person(in_name) {
    2: person.name = in_name;
    3: person.age;
    4: person.calAge = function() {
    5: return document.write('my name is '+person.name+'<br>');
    6: };
    7: }
    8:
    9: p1 = new person('newmite0');
    a: p1.calAge();
    b: p1.age = 22;
    c: document.write('my age is '+p1.age+'<br>');

    9행이 실행되면서 함수 person안을 타고들어갈 텐데요,
    2행: 지금 실행되는 person 객체에 name이란 프로퍼티를 동적으로 추가한 후 in_name을 대입해주었습니다.
    3행: 지금 실행되는 person 객체에 age란 프로퍼티를 호출합니다만, age가 없으므로 만약 document.write를 사용했다면 undefined가 떴겠군요.
    4~6행: 지금 실행되는 person 객체에 calAge란 메서드를 동적으로 추가한 후, 익명함수를 대입해주었습니다. 익명함수의 return 값에 person.name이 사용되네요.
    ->결과적으로 p1안에는 person이 들어있는데, 그 person 안에는 프로퍼티로 name, calAge 가 존재하는 것이지요. age는 없습니다.

    그리고
    a행: p1의 프로퍼티 calAge()를 실행
    b행: p1에 프로퍼티 age를 동적으로 생성한 후 22를 대입
    c행: p1의 프로퍼티 age에 담긴 22를 사용해 document.write()실행.


    도움이 되셨으면 좋겠습니다.
  4. newmite0
    질문 하나 드립니다.
    function person(in_name)
    {
    this.name = in_name;
    this.age;
    this.calAge = function() {
    return document.write('my name is '+this.name+'<br>');
    }
    }

    p1 = new person('newmite0');
    p1.calAge();
    p1.age = 22;
    document.write('my age is '+p1.age+'<br>');

    상기 소스의 경우는 정상 작동이 되며 문제가 없습니다.



    그런데

    function person(in_name)
    {
    var name = in_name;
    var age;
    var calAge = function() {
    return document.write('my name is '+name+'<br>');
    }
    }

    p1 = new person('newmite0');
    p1.calAge();
    p1.age = 22;
    document.write('my age is '+p1.age+'<br>');

    위와 같이 하면 p1.calAge()에서 에러가 나요. calAge가 notfound라는 에러가 나옵니다.
    이유를 모르겠습니다. 객체안의 함수를 호출한것 뿐인데...사실 변수의 경우는 this로 하건
    var로 선언하건 정상작동이 되더군요.
    그런데 함수의 경우는 에러가 나요....

    알고 계신분의 답글을 부탁드릴께요...
    감사합니다..
  5. nathanEast
    정말 저에겐 사막의 오아시스같은 강의 입니다
    정말정말 감사합니다 이고잉님 ㅠㅠ!!
  6. ㅇㅇ
    new가 리턴값으로 돌려줘서 객체를 형성한다는 말을 걍 쉽게 풀어서 생각하면
    함수를 복붙해서 새 폴더로 만들어준다고 생각하면 쉬울듯?
  7. Wonni132
    저도 NOV 님과 같은 의문을 갖고 있었는데요, 이 다음다음 강의 (this 강의) 내용중에 다음과 같은 설명이 나옵니다

    "생성자가 실행되기 전까지는 객체는 변수에도 할당될 수 없기 때문에 this가 아니면 객체에 대한 어떠한 작업을 할 수 없기 때문이다."

    혹시 여기에 답이 있는것은 아닐까요? 혹시해서 실험해보니, NOV 님 코드 실행후에

    console.log(window.name)

    하면 'egoing' 이 출력됩니다. 저도 잘 이해한건지는 모르겠네요 ㅜㅜ
    대화보기
    • egoing
      new를 안쓰면 그냥 함수를 호출한 것이고,
      new를 쓰면 그 함수를 객체의 생성자로서 호출한 것입니다.
      그 결과 값은 객체가 됩니다.
      이것은 단지 약속일 뿐이랍니다.
      대화보기
      • 마지막 수업에서
        Person을 생성자를 안쓰고 아래와 같이 person으로 하고 실행하면 왜 안되는 건가요?

        function person(name){
        this.name = name;
        this.introduce = function(){
        return 'My name is ' + this.name;
        }
        }
        var p1 = person('egoing');
        document.write(p1.introduce()+"<br/>");
      • 스네이프
        마법같은 강의
      • 호두
        나중에 다시 볼 것
      • 감사합니다.
      • 미완성
        20190109
      • pakimchi
        function person() 이 생성자.
        이를 new 와 같이 호출하면 person 객체가 위 생성자의 내용으로 만들어 지는 것.
        대화보기
        • 김주현
          생성자라는 말이 잘 와닿지 않습니다. Construct-객체를 생성하는 함수

          함수 앞에 new를 붙이면 객체가 생성되는데 new Person자체가 생성자인가요? Person이 생성자인가요?
        • 스탐
          감사합니다.
        • 땔감
          갓-고잉
        • 쏘르
          아주 중요한 개념을 새삼 상기하였습니다. 고맙습니다.
        • def dict
          감사합니다!
        • moon
          감사합니다!
        • 안장호
          감사합니다~! ^^
        • 김진홍
          감사합니다~!
        • 박인호
          12-18
          수강완료.
          생성자란 객체를 만드는, 정의하는 함수로 생성자 안에 생성될 객체의 속성 및 메소드(함수)를 정의 할 수 있다.(초기화)
          이 방법을 통해 같은 맥락을 가진 객체를 여러개 생성 할 때 코드의 재활용성을 높여준다.
          *this는 해당 메소드를 포함하고 있는 변수를 가리킨다.
        • Jupi
          생성자는 객체를 만드는 함수.
          함수에 new를 붙이면 새로운 객체를 만들어 리턴.
          생성자에 객체에서 쓸 프로퍼티, 메소드등을 정의하면 new 생성자이름(인자) 한번 실행 하는 것으로,
          인자와 관련된 객체를 쓱싹하고 만들 수 있다.

          이러한, 생성자를 하나 만들어 놓으면 붕어빵 기계에서 붕어빵(객체)을 편하게 찍어낼 수 있다.
          여기서 붕어빵기계(생성자)에 안에 팥이 들어가냐, 크림이 들어가냐 , 얼마만큼 구울거냐 하는
          속성들을 정의하는 과정을 초기화(init) 라고 할 수 있다.
        • 고스트프리
          이고잉님!~ 다른게 아니라 새로운페이지로 링크를 거실때 새창으로 띄워주세요... shift누르고 하면되긴하지만.... 약간 불편한게 있는거같습니다.

          감사합니다.
          대화보기
          • 고스트프리
            완료했습니다.
          • 개발자가 되고싶은 고등학생
            python init 이랑 굉장히 비슷하다!!
          • 수복
            감사합니다.
          • GoldPenguin
            완료했습니다.
          • 빛장이
            생성자는 객체를 만드는 역할을 하는 함수이다.
            함수에 new를 붙이면 그 리턴값은 객체가 된다.
            생성자의 기능은 객체의 초기화(변수 및 메소드 정의)이다.
          • geuni
            function Person(arg1 , result) {
            this.arg1 = arg1;
            this.result = result;
            this.introduce = function() {
            for(var i = 1; i <= 9 ; i++ ) {
            document.write(this.arg1 + '*' + i + '=' + this.arg1*i + '</br>');
            }
            return this.arg1 + "단" + this.result;
            }
            }

            var num = new Person(4 , "끝!");
            document.write(num.introduce() + '<br>');

            var num = new Person(6);
            document.write(num.introduce());
            마지막 예제를 보고 구구단을 만들어 봤어요!
          • Seo Yun Seok Tudoistube
            자바스크립트에서 함수에 new를 붙여서 객체를 생성한다는 걸 잊지 말아야 하는데 자주 까먹습니다.
            감사합니다^_____^!!!
          • crable
            감사합니다
          • 이승우
            20170601 완료
          • 최규선
            감사합니다.
          • 신입1
            좋은 조언이네요
            대화보기
            • 신입1
              감사합니다.
            • 전성욱
              존재하는 함수나 객체를 기반으로 새로운 객체를 만들 때 자바스크립트에선 new 키워드를 사용한다.
              객체 내의 다른 프로퍼티나 메서드를 참조하기위해 this.프로퍼티와 같이 사용한다.
              이러한 객체 초기화 시 동작이 같은 메서드들은 서로 공유되지않고 독립적인 메서드를 생성한다.
              이를 막고 동일한 메서드를 공유시키기 위해 객체.prototype.메서드명 = function(){}와 같이 사용하도록 한다
            • 임지호
              자바스크립트에서는 객체를 만들 때 함수를 이용한다.
              함수()에 new라는 단어를 붙이면 객체가 리턴되고 객체를 생성한 함수를 생성자라 한다.
              생성자에다가 객체에서 쓸 프로퍼티, 메소드등을 정의하면 코드의 재사용성을 높일 수 있는데 이러한 작업을
              초기화라 한다.
            • 소눗
              자바랑 비슷한 점이 꽤 많아서 이해하기 쉽네요..
              자바에서 객체를 만들어서 저장하려고 하면 클레스를 생성하고 인스턴스나 상속을받아서 사용했어야했는데
              자바스크립트에서는 함수 자체를 객체로 만들 수 있네요.
              편리한 언어같습니다.
            • sSll바버미니llSs
              감사합니다. 오래전에 봤는데 이제 이해 했네요!
            • 완료!
              완료! 감사합니다~
            • hyuna
              객체보다 함수지향인듯한 느낌이 드네요. 각각의 메소드를 함수로 떼어놓고 객체를 생성할때마다 필요한 메소드를 가져다
              쓸수 있다는 말인지..제대로 이해한건지 모르겠어요.
            • Daehyeop Ko
              3번 돌려서 봤습니다! 확실한 이해가 필요할 것 같아요! 감사합니다
            • 심세용
              배우면 배울수록 참 신기한 언어임에 매력을 느낍니다!
            • 김은희
              저도 동감 자바스크립트란 녀석 4차원 같아요~^^
              알고싶어집니다~
            • yihsang
              함수의 의미가 심오합니다.
              감사합니다.
            • 이주환
              2016. 04. 25

              중복제거는 좋은 코드를 만드는 방법중 하나일정도로 중요하죠.
            • happydeveloper
              음미한다는 말이 왔닿네요~ 공부는 원래 재미있어야 하는데... 당장 써먹기 바뻐서 그 재미를 잃어버리기 쉬운 것 같아요~
            • JustStudy
              고맙습니다.
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기