[ JavaScript ] 자바스크립트 기본 문법 | 생성자와 new

이미지 출처 :   https://commons.wikimedia.org/wiki/File:JavaScript-logo.png

 

 

 

 

 

해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.

 

 

 

---

 

 

 

자바스크립트는 어떠한 객체지향언어와도 같지 않습니다.

 

자바스크립트 계열에 속하는 언어들은 보통 Prototype-based programming 이라고 불립니다.

 

 

자바스크립트의 '객체' 개념은 헷갈릴 수 있습니다. 그게 당연한거예요.

 

 

 

기존의 객체지향 패러다임에 익숙하신 분들은 큰 혼란이 올 수 있습니다.

 

 

자바스크립트가 추구하는 객체지향은 다른 언어들에 비해 자유롭고 유연합니다.

 

 

 

 

자바스크립트 기본 문법  ::  객체

 

 

 

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

 

 

객체 내의 변수를 프로퍼티(property)라 부르고, 함수를 메소드(method)라고 부릅니다.

 

 

객체를 만드는 것은 앞서 포스팅에서 자세히 다뤘기 때문에,

 

이번 포스팅에서는 바로 예제를 들어보도록 하겠습니다.

 

 

 

var person = {}
person.name = 'test';
person.introduce = function(){
    return 'My name is '+this.name;
}
console.log(person.introduce());

 

첫번째 행에서는 person 이라는 빈 객체를 만들고,

 

두번째 행에서는 person 객체에 name 이라는 속성에 'test' 라는 값을 담은 것입니다.

 

세번째 행은 person 객체에 introduce 라는 속성을 만들었는데, 이 속성은 함수입니다.

즉, 메소드를 만들었다고 할 수 있습니다.

 

 

 

 

위의 예제는 객체를 만드는 과정이 분산되어 있습니다.

 

객체를 정의할 때 값을 바로 셋팅할 수 있도록 코드를 변경해보도록 하겠습니다.

 

 

 

 

var person = {
    'name' : 'test',
    'introduce' : function(){
        return 'My name is '+this.name;
    }
}
console.log(person.introduce());

 

 

 

만약 다른 사람의 이름을 담을 객체가 필요하다면 객체의 정의를 반복해야 합니다.

객체의 구조를 재활용할 수 있는 방법이 필요해보이죠.

 

이 때 필요한 것이 바로 생성자입니다!

 

 

 

 

 

자바스크립트 기본 문법  ::  생성자(Constructor)

 

 

 

생성자(constructor)는 객체를 만드는 역할을 하는 함수입니다.

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

 

 

 

function Person(){}
var p = new Person();
p.name = 'test';
p.introduce = function(){
    return 'My name is '+this.name; 
}
console.log(p.introduce());

 

 

함수를 호출할 때 new를 붙이면 새로운 객체를 만든 후에 이를 리턴합니다.

위의 예제는 새로운 객체를 변수 p에 담았습니다.

 

그런데 만약 여러사람을 위한 객체를 만든다면 아래와 같이 코드를 작성해야 할 것입니다.

 

 

function Person(){}
var p1 = new Person();
p1.name = 'test';
p1.introduce = function(){
    return 'My name is '+this.name; 
}
console.log(p1.introduce());
 
var p2 = new Person();
p2.name = 'test1';
p2.introduce = function(){
    return 'My name is '+this.name; 
}
console.log(p2.introduce());

 

 

이 경우, new 를 이용해 객체를 만든 것과 포스팅 초반에 { } 를 이용해서 객체를 만든 것에

큰 차이가 없죠.

 

 

 

 

function Person(name){
    this.name = name;
    this.introduce = function(){
        return 'My name is '+this.name; 
    }   
}
var p1 = new Person('test');
console.log(p1.introduce());
 
var p2 = new Person('test1');
console.log(p2.introduce());

 

 

 

생성자 내에서 이 객체의 프로퍼티를 정의하고 있습니다.

이러한 작업을 초기화라고 합니다.

 

이를 통해서 코드의 재사용성이 대폭 높아진 것을 알 수 있습니다.

 

 

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

 

 

 

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

 

 

일반적인 객체지향 언어에서 생성자는 클래스의 소속입니다.

 

저도 자바를 배울 때 그랬고, 그래서 더 헷갈리는 중입니다,,,

 

자바스크립트에서 객체를 만드는 주체는 함수입니다.

 

 

함수에 new를 붙이는 것을 통해서 객체를 만들 수 있다는 점은

자바스크립트에서 함수의 위상을 암시하는 단서이면서도,

 

또 자바스크립트가 추구하는 자유로움을 보여주는 사례라고 할 수 있습니다.