생활코딩 자바스크립트 기본 - 객체지향 | 생성자와 new

본 게시글은 인프런 강의 "생활코딩 - 자바스크립트(JavaScript) 기본"를 보고 공부한 내용을 정리하고 있습니다.

https://www.inflearn.com/course/%EC%A7%80%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%96%B8%EC%96%B4-%EA%B8%B0%EB%B3%B8/dashboard

[무료] 생활코딩 - 자바스크립트(JavaScript) 기본 - 인프런 | 강의

---

 

객체

객체란 서로 연관된 변수와 함수를 그룹핑한 그릇이라고 할 수 있다.

person이라는 변수에 이름값과 이름값 통해 인사말을 하는 함수를 넣어 객체를 만들어보자

    let person = {}    <!-- 비어있는 변수 생성-->
    person.name = '이왕';
    person.introduce = function () {
        return `안녕하세요! ${this.name}입니다.`;
    }
    document.write(person.introduce());

    let person = {
        'name' : '이왕',
        'introduce' : function () {
            return `안녕하세요! ${this.name}입니다.`;
        }
    }
    document.write(person.introduce());

다음과 같이 가능합니다.

생성자

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

위 코드를 사용해서 '이왕'이라는 사람과 '김쏘'라는 사람이 있을때, 객체를 만들어 보자

    let p1 = {
        'name' : '이왕',
        'introduce' : function () {
            return `안녕하세요! ${this.name}입니다.`;
        }
    }
    document.write(p1.introduce());
    let p2 = {
        'name' : '김쏘',
        'introduce' : function () {
            return `안녕하세요! ${this.name}입니다.`;
        }
    }
    document.write(p2.introduce());

생성자를 이용해서 만들어보자
함수를 호출할 때 new를 붙이면 새로운 객체를 만든후 이를 리턴한다.

    function Person(){};
    let p1 = new Person() ;
         p1.name= '이왕';
        p1.introduce =function() {
            return `안녕하세요! ${this.name}입니다.`;

    }
    document.write(p1.introduce());

    let p2 = new Person() ;
    p2.name= ' 김쏘';
    p2.introduce =function() {
        return `안녕하세요! ${this.name}입니다.`;

    }
    document.write(p2.introduce());

이름을 입력하는것 빼고는 전부 중복이다.

function Person에 name value가 들어가면 return을 인사말로 하는 코드를 작성하면 더 간결하고 깔끔해질것 같다.

    function Person(name){
        this.name = name;
        this.introduce = function (){
            return `안녕하세요! ${this.name}입니다.`;
        }
    };
    let p1 = new Person('이왕') ;
    document.write(p1.introduce());

    let p2 = new Person('김쏘') ;
    document.write(p2.introduce());

일반함수와 차이를 주기 위해 생성자 함수의 첫글자는 대문자로 한다.