자바스크립트 new 연산자 (Javascript new operator)

자바스크립트(Javascript)를 활용하여 작업을 하다보면 만날 수 있는 기호가 있습니다.

바로 new 라는 기호입니다!

new라는 기호는 자바스크립트의 고유의 예약어이며 고유의 연산자(operator) 입니다.

아래는 자바스크립트의 new라는 연산자(operator)에 대한 정의 입니다.

연산자는 사용자 정의 객체 타입 또는 내장 객체 타입의 인스턴스를 생성한다

 

new 라는 의미는 영역(block)을 지정하여 함수 내부의 정의된 내용을 실행하여 주는 의미라 볼 수 있습니다.

역시 말이 어려우니 코드를 보는게 낫겠습니다.

function structure(first, last) {
    this.first = first;
    this.last = last;
    this.printer = function () {
        return this.first + ' ' + this.last;
    };
}

 

위 함수는 first와 last라는 변수를 받아서 동작하는 함수 입니다.

해당 함수를 생성하여 봅니다.

function structure(first, last) {
    this.first = first;
    this.last = last;
    this.printer = function () {
        return this.first + ' ' + this.last;
    };
}

var building = new structure('삼성','빌딩')
console.log(building.printer())

 

사실 어려울게 없는 내용 입니다.

this 키워드를 통해서 first와 last 값을 채워 주었습니다.

그리고 printer 라는 함수에서는 단순하게 출력하는 기능으로 구성되어 있습니다.

위 내용을 실행하여 보았습니다.

"삼성 빌딩" 이라는 문구가 나옵니다

 

여기까지는 예상한 내용입니다.

자 그럼, 이제 new 연산자를 빼고 실행하여 보겠습니다.

function structure(first, last) {
    this.first = first;
    this.last = last;
    this.printer = function () {
        return this.first + ' ' + this.last;
    };
}

//var building = new structure('삼성','빌딩')
var building = structure('삼성','빌딩')  //new 연산자를 제거하였습니다.
console.log(building.printer())

 

뭐...결과가 당연히 같을 것이라 예상해 봅니다만..결과는?

그런 함수가 없다고 합니다.

 

오류가 발생 하였습니다.

building이라는 내용이 정의되어 있지 않다고 합니다.

new 연산자 없이 실행된 함수는 본인의 영역(block)을 받지 못하였기 때문에 building 변수에는 아무런 내용이 없어서 생긴 문제 입니다.

 

위 내용을 토대로 new 연산자를 사용하지 않으면 building이라는 변수에 인스턴스를 생성하지 않는다는 것을 알 수 있습니다.

조금 더 쉽게 접근하면,

"new 연산자를 사용해야만 함수 내부의 내용을 변수에 대입 할 수 있다."

정도가 될 것 같습니다.

 

여기서 재미있는 점은 해당 2개의 변수와 함수는 이미 전역 객체, 전역 함수로 생성 되었다는 점 입니다.

전역 영역(window)인 곳에 first와 last, printer함수가 생성되어 있습니다.

 

함수 내부에서 사용된 this 키워드는 new 연산자를 통해서 실행되지 않았으므로 sturcture 함수에서 사용된 first와 last 변수, printer 함수는 전역(global) 지역에 생성이 되었습니다.

만약에 new 연산자를 사용했다면 해당 내용은 고유의 영역(block)을 가진 채로 building 변수에 대입 되었을 것 입니다.

습관적으로 new 연산자를 공식처럼 사용 하곤 했었는데, 이러한 부분을 놓치고 있었던 것 같습니다.

 

이상으로 Javascript에서 new 연산자에 대해서 간단하게 살펴보았습니다.

궁금한 점이나 틀린점은 언제든 연락주세요!