코린이[코딩 어린이]

자료형 구분

Object객체에 있는 constructor()메서드는 객체의 생성자 함수를 의미하며, 자료형을 검사 할 때 유용하게 사용할 수 있습니다.

typeof 연산자의 문제점 예

var number = 273;
var numberObject = new Number(273);

var output = '';
output += '1. ' + typeof(number) + '\n';
output += '2. ' + typeof(numberObject);

console.log(output);
/*
1. number
2. object
*/

두 변수 모두 숫자지만 생성자 함수로 만든 숫자는 객체이므로 위와 같은 결과가 나옵니다.

이러한 특성 때문에 자료형 검사에 문제가 발생합니다.

typeof 연산자를 사용한 자료형 비교 예

var number = 273;
var numberObject = new Number(273);

if(typeof (number) == 'number') {
    console.log('number는 숫자입니다.') // number는 숫자입니다.
}
if(typeof (numberObject) == 'number') {
    console.log('numberObject는 숫자입니다.');
}

두 변수 모두 숫자지만 생성자 함수로 만든 숫자는 객체이기 때문에 경고창을 출력하지 않습니다.

이러한 두 대상을 같은 자료형으로 취급하고 싶을 때는 constructor()메서드를 사용해야 합니다.

생성자 함수를 사용한 자료형 비교 예

var number = 273;
var numberObject = new Number(273);

if(number.constructor == Number) {
    console.log('number는 숫자입니다.') // number는 숫자입니다.
}
if(numberObject.constructor == Number) {
    console.log('numberObject는 숫자입니다.'); // numberObject는 숫자입니다.
}

객체의 생성자 함수가 Number생성자 함수인지 비교하면 쉽게 숫자인지 구분할 수 있습니다.

모든 객체에 메서드 추가

Object객체는 모든 자바스크립트 객체의 최상위 객체입니다. 따라서 Object객체의 프로토타입에 속성 또는 메서드를 추가하면 모든 객체에서 활용할 수 있습니다.

Object 객체의 prototype 속성에 메서드 추가하기 예

Object.prototype.test = function() {
    console.log(this);
};

 var number = 273;
 number.test(); // 273

실행하면 273을 출력합니다.

Object 객체

Object객체는 자바스크립트의 최상위 객체입니다.

생성

자바스크립트의 가장 기본적인 내장 객체는 Object객체입니다. 정확히는 Object생성자 함수로 만든 인스턴스입니다.

Object객체 생성하기 예

var object = {};

var object = new Object();

Object객체는 위 두 가지 방법으로 생성할 수 있습니다.

Object객체는 아래 처럼 일곱 가지의 메서드가 있습니다.

hasOwnProperty()메서드와 propertyIsEnumerable()메서드

var object = { property: 273 };

var output = '';
output += "HOP('property'): " + object.hasOwnProperty('property') + '\n';
output += "HOP('constructor'): " + object.hasOwnProperty('constructor') + '\n';
output += "PIE('property'): " + object.propertyIsEnumerable('property') + '\n';
output += "PIE('constructor'): " + object.propertyIsEnumerable('constructor') + '\n';

console.log(output);
/*
HOP('property'): true
HOP('constructor'): false
PIE('property'): true
PIE('constructor'): false
*/

for(var key in object) {
    console.log(key) // property
    console.log(object[key]); // 273
}

위 코드를 실행하면 property속성을 검싸한 것은 모두 true를 출력하고 constructor속성을 검사한 것은 모두 false를 출력합니다.

propertyIsEnumerable()메서드를 true로 가지는 속성만 for in반복문으로 출력합니다. 

toString() 메서드

var object = new Object();

alert(object); // [object object]
alert(object.toString()); // [object object]

toString()메서드는 객체를 문자열로 변환하는 메서드입니다.

위 코드를 실행하면 두 출력 결과가 같습니다. toString()메서드는 객체를 문자열로 변환할 때 자동으로 호출되기 때문입니다.

toString() 메서드 재선언

var student = {
    name: 'shiro',
    grade: '대학교 4학년',
    toString: function() {
        return this.name + ' : ' + this.grade;
    }
};

alert(student); // shiro : 대학교 4학년

위 코드는 객체를 만들고 내부에서 toString()메서드를 선언합니다.

원래 모든 객체는 toString()메서드를 갖는데 다시 선언했기 때문에 재선언한 것입니다. 자바스크립트는 객체를 문자열로 변환할 때 자동으로 toString()메서드를 호출한다고 했으므로 shiro : 대학교 4학년을 호출하게 되는 것입니다.

기본 내장 객체

기본 자료형과 객체의 차이점

기본 자료형은 자바스크립트의 여섯가지 자료형 중 숫자, 문자열, 불 세 가지 자료형을 의미합니다. 기본 자료형과 객체의 특성이 다르므로 차이를 둡니다.

기본 자료형과 객체 예

var defaultNumber = 273;
var objectNumber = new Number(273);

var output = '';
output += typeof (defaultNumber) + ' : ' + defaultNumber + '\n';
output += typeof (objectNumber) + ' : ' + objectNumber;

console.log(output);
/*
number : 273
object : 273
*/

위 코드에서 기본 자료형과 객체는 자료형이 분명히 다릅니다. 하지만 두 가지 모두 값을 출력합니다.

기본 자료형의 속성이나 메서드를 사용하면 기본 자료형이 자동으로 객체로 변환되기 때문입니다.

예를 들어 기본 자료형 숫자의 속성이나 메서드를 사용할 때는 자동으로 Number객체로 변환되므로, 기본 자료형이 속성이나 메서드를 사용할 수 있는 것입니다. 따라서 기본 자료형과 객체의 차이점을 찾기가 힘듭니다.

굳이 차이점을 본다면 기본 자료형은 객체가 아니기 때문에 속성과 메서드를 추가할 수 없습니다.

기본 자료형에서 메서드 추가 예

var defaultNumber = 273;

defaultNumber.method = function() {
    return 'Default Method';
};

var output = defaultNumber.method() + '\n';
console.log(output); // TypeError

위 코드를 실행하면 오류가 발생합니다. 기본 자료형이기 때문에 속성과 메서드를 추가해서 사용할 수 없습니다.

기본 자료형을 객체로 변환하는 것은 일회용 옷을 입는다는 개념으로 생각하면 쉽습니다. 기본 자료형의 메서드를 사용한다는 것은 기본 자료형에 객체라는 일회용 옷을 입힌 다음 메서드를 사요하는 것입니다. 한 번 사용하면 곧바로 일회용 옷을 버립니다. 기본 자료형에 메서드를 추가했지만 이는 기본 자료형에 직접 메서드를 추가한 것이 아니라 일회용 옷에 추가한 것이므로 추가하자마자 버령집니다.

생성자 함수에 메서드 추가 예

var defaultNumber = 273;
var objectNumber = new Number(273);

Number.prototype.method = function() {
    return 'Method on Prototype';
};

var output = '';
output += defaultNumber.method() + '\n';
output += objectNumber.method();

console.log(output);
/*
Method on Prototype
Method on Prototype
*/

프로토타입에 메서드를 추가하면 위 코드처럼 기본 자료형에도 새로운 메서드가 생성됩니다.

문제

다음과 같은 객체를 생성할 수 있는 생성자 함수를 예로 들어보세요. ( 생성자 함수 이름은 Product, 키와 자료형은 적절하게 사용합니다. )

힌트

product.calculate(200)이라고 입력하면 100g * 2 = 200g이므로 3380원을 출력하면 됩니다.

function Product(name, weight, price) {
    this.name = name;
    this.weight = weight;
    this.price = price;

    // 메서드
    this.calculate = function(weight) {
        return this.price * (weight / this.weight);
    }
}

var product = new Product("돼지고기", 100, 1690);

console.log(product.calculate(200)); // 3380

클래스

클래스 선언과 속성

클래스는 아래 코드와 같은 형태로 선언됩니다. 속성도 this키워드를 사용해 선언합니다.

클래스 선언 예

// 클래스 선언
class Rectangle {
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }
}

const rectangle = new Rectangle(100, 200);

// 생성자 함수 선언
function Rectangle(width, height) {
    this.width = width;
    this.height = height;
}
var rectangle = new Rectangle(100, 200);

메서드 선언 예

// 클래스 메서드 선언
class Rectangle1 {
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }

    getArea() {
        return this.width * this.height;
    }
}

const rectangle1 = new Rectangle1(100, 200);

console.log(rectangle1.getArea());

// 생성자 함수 메서드 선언
function Rectangle2(width, height) {
    this.width = width;
    this.height = height;
}

Rectangle2.prototype.getArea = function() {
    return this.width * this.height;
}

var rectangle2 = new Rectangle2(100, 200);

console.log(rectangle2.getArea());

클래스의 메서드는 프로토타입 안에 선언하는 것이 아니라 클래스 안에 선언하게 됩니다. 선언 방법은 똑같습니다.

게터와 세터 예

class Rectangle1 {
    constructor(width, height) {
        this._width = width;
        this._height = height;
    }
    get width() {
        return this._width;
    }
    set width(input) {
        this._height = input;
    }
    get height() {
        return this._height;
    }
    set height(input) {
        this._width = input;
    }
    getArea() {
        return this._width * this._height;
    }
}

const rectangle1 = new Rectangle1(100, 200);
rectangle1.width = 200;

console.log(rectangle1.width); // 100
console.log(rectangle1.getArea()); // 20000

ECMAScript 6의 클래스는 변수를 숨길 수 없습니다. 그래서 일반적으로 개발한 사람 이외에는 만지지 말아 달라는 의미에서 _를 붙입니다. 그래서 외부에서 만지지 말라는 의미로 width와 height에 _를 붙여서 선언했습니다.

게터와 세터는 메서드를 선언할 때 앞에 get or set을 붙여 선언합니다.

get을 붙여 만든 메서드는 rectangle.width처럼 값을 가져오는 행위를 할 때 자동으로 호출되며, set을 붙여 만든 메서드는 rectangle.width = 200처럼 값을 넣는 행위를 할 때 자동으로 호출됩니다.

상속

상속은 extends키워드로 구현합니다.

상속 예

class Rectangle1 {
    constructor(width, height) {
        this._width = width;
        this._height = height;
    }
    get width() {
        return this._width;
    }
    set width(input) {
        this._height = input;
    }
    get height() {
        return this._height;
    }
    set height(input) {
        this._width = input;
    }
    getArea() {
        return this._width * this._height;
    }
}

class Square extends Rectangle1 {
    // 생성자
    constructor(length) {
        // 부모의 생성자 (constructor 메서드)를 호출합니다.
        super(length, length);
        console.log(this) // _width: 100, _height: 100
    }
    // width 또는 height를 변경하면 둘 다 변경되도록 재선언 합니다.
    set width(input) {
        this._width = input;
        this._height = input;
    }
    set height(input) {
        this._width = input;
        this._height = input;
    }
}

const square = new Square(100);
console.log(square.getArea()); // 10000

문제

수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려고 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같이 찍습니다.

1번 수포자 : 1,2,3,4,5,1,2,3,4,5,...

2번 수포자 : 2,1,2,3,2,4,2,5,2,1,2,3,2,4,2,5,...

3번 수포자 : 3,3,1,1,2,2,4,4,5,5,3,3,1,1,2,2,...

1번 문제부터 마지막 문제까지의 정답이 순서대로 들은 배열 answers가 주어졌을 때, 가장 많이 문제를 맞힌 사람이 누구인지 배열에 담아 return하도록 solution함수를 작성해주세요.

힌트

• 시험은 최대 10,000문제로 구성되어있습니다.
• 문제의 정답은 1,2,3,4,5중 하나입니다.
• 가장 높은 점수를 받은 사람이 여럿일 경우, return하는 값을 오른차순으로 정렬해주세요.

방식

// let answers = [1, 2, 3, 4, 5];
let answers = [1, 3, 2, 4, 2];

function Solution(answers) {
    answer = [];

    let a = [1, 2, 3, 4, 5], b = [2, 1, 2, 3, 2, 4, 2, 5], c = [3, 3, 1, 1, 2, 2, 4, 4, 5, 5, 3, 3], points = [0, 0, 0];

    for(let i = 0; i < answers.length; i++) {
        if(a[i] === answers[i]) {
            points[0]++;
        }
        if(b[i] === answers[i]) {
            points[1]++;
        }
        if(c[i] === answers[i]) {
            points[2]++;
        }
    }

    let lv = 0;

    for(let j = 0; j < points.length; j++) {
        if(points[j] > lv) {
            lv = points[j];
        }
    }

    for(let k = 0; k < points.length; k++) {
        if(lv === points[k]) {
            answer.push(k + 1);
        }
    }
    return answer;
}

let solution = new Solution(answers);

console.log(solution); // 1, 2, 3

수포자를 a, b, c배열로 선언하고 문제를 맞추는 각 수포자들에게 points에 점수를 추가해줍니다.

lv변수를 추가하고 for반복문을 통해 가장 많이 맞춘 갯수를 저장하고, 한번더 for반복문을 통해서 가장 많이 맞춘 갯수와 같은지 비교를 하고, 같다면 answer배열에 푸시를 해주고 answer배열을 리턴시켜줍니다.

문제

많은 마라톤 선수들이 마라톤에 참여했습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다.

마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return하도록 solution함수를 작성해주세요.

힌트

• 마라톤 경기에 참여한 선수는 1명 이상 100,000명 이하입니다.
• completion의 길이는 participant의 길이보다 1 작습니다.
• 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다.
• 참가자 중에는 동명이인이 있을 수 있습니다.

방식 [ 단순 for 반복문 ]

var participant = ["leo", "kiki", "eden"];
var completion = ["eden", "kiki"];

function Solution(participant, completion) {
    participant.sort();
    completion.sort();

    output = '';
    for(let i = 0; i < participant.length; i++) {
        if(participant[i] !== completion[i]) {
            output += participant[i];
        }
    }
    return output;
}

var solution = new Solution(participant, completion);

console.log(output); // leo

방식 2 [ for in 반복문 ]

var participant = ["leo", "kiki", "eden"];
var completion = ["eden", "kiki"];

function Solution(participant, completion) {
    participant.sort();
    completion.sort();

    output = '';
    for(let i in participant) {
        if(participant[i] !== completion[i]) {
            output += participant[i];
            return output;
        }
    }
}

var solution = new Solution(participant, completion);

console.log(output); // leo

두명 이상의 선수가 완주하지 못했을 때 [ 중첩 for문 ] [ 중복검사 안되는 형태 ]

var participant = ["marina", "josipa", "nikola", "vinko", "filipa", "helll"];
var completion = ["josipa", "nikola", "marina", "filipa"];

function Solution(participant, completion) {

    output = '';

    for(let i = 0; i < participant.length; i++) {
        let count = 0;

        for(let j = 0; j < completion.length; j++) {
            if(participant[i] === completion[j]) {
                console.log(participant[i]);
            } else {
                count ++;

                if(completion.length === count) {
                    output += participant[i] + ' ';
                }
            }
        }
    }
    return output;
}

var solution = new Solution(participant, completion);

console.log(output); // vinko helll

상속

상속은 기존의 생성자 함수나 객체를 기반으로 새로운 생성자 함수나 객체를 쉽게 만드는 것을 뜻합니다.

기존의 객체를 기반으로 생성하기 때문에 상속으로 새로 만들어지는 객체에는 기존 객체의 특성이 모두 있습니다. 이를 기존의 객체에서 유산(속성과 메서드)을 물려받는 것과 비슷하다고 하여 상속이라는 이름을 사용합니다.

생성자 함수 Square 선언 예

function Square(length) {
    this.width = length;
    this.height = length;
}

Square.prototype.getArea = function() {
    return this.getWidth() * this.getHeight();
};

위 코드를 캡슐화하고 싶지만 비슷한 코드를 만들때마다 캡슐화를 진행한다면 코드가 너무 복잡해집니다.

이럴때 바로 상속을 이용합니다.

상속 예

function Rectangle(w, h) {
    var width = w;
    var height = h;

    // 메서드
    this.getWidth = function() { return width; };
    this.getHeight = function() { return height; };
    this.setWidth = function(w) {
        if(w < 0) {
            throw '음수'
        } else {
            width = w;
        }
    };
    this.setHeight = function(h) {
        if(h < 0) {
            throw '음수'
        } else {
            height = h;
        }
    };
}

Rectangle.prototype.getArea = function() {
    return this.getWidth() * this.getHeight();
};

var rectangle = new Rectangle(5, 7);

rectangle.setWidth(Number(prompt('가로길이 입력')));
rectangle.setHeight(Number(prompt('세로길이 입력')));

console.log("Area: " + rectangle.getArea());

// 상속
function Square(length) {
    this.base = Rectangle;
    this.base(length, length);
}
Square.prototype = Rectangle.prototype;
Square.prototype.constructor = Square;

// var square = new Square(5);

var square = new Square(Number(prompt('값 입력')));
console.log(square.getArea());

// 상속 확인하기
console.log(square instanceof Rectangle); // true

생성자 함수 Square내부에서 작성한 것은 base 속성에 생성자 함수 Rectangle을 넣고 실행한 것과 생성자 함수 Square의 프로토타입에 Rectangle의 프로토타입을 넣은 것 두가지 입니다. 전자를 사용해서 Rectangle객체의 속성을 Square객체에 추가했으며, 후자를 사용해 Rectangle객체의 프로토타입이 가진 속성 또는 메서드를 Square객체의 프로토타입에 복사했습니다. 

참고로 생성자 함수 Square의 프로토타입 constructor()메서드에 Square를 다시 넣는 부분이 없어도 정상작동을 합니다.

하지만 직접 square객체의 constructor()메서드를 출력해보면, 생성자 함수 Square가 아니라 생성자 함수 Rectangle을 가리킵니다. 따라서 프로토타입의 생성자 함수를 재정의한 것입니다.

여러 곳에서 활용되므로, 자식이 부모의 속성과 메서드를 물려받는 것이라고 알고 넘어가줍니다.

캡슐화

캡슐화는 잘못 사용될 수 있는 객체의 특정 부분을 사용자가 사용할 수 없게 막는 기술입니다.

예를 들어 사각형을 의미하는 Rectangle객체를 만든다고 가정해봅니다. 아래 코드처럼 생성자 함수 Rectangle을 만들 수 있습니다. 그리고 사각형의 수많은 속성 중 넓이를 구하는데 필요한 width속성과 height속성을 지정했습니다.

생성자 함수 Rectangle 선언 예

function Rectangle(width, height) {
    this.width = width;
    this.height = height;
}

Rectangle.prototype.getArea = function() {
    return this.width * this.height;
}

var rectangle = new Rectangle(5, 7);

console.log("Area : " + rectangle.getArea()); // Area : 35

getArea()메서드를 통해 35를 출력합니다. 그런데 width속성이나 height속성에 음수값을 넣으면 코드 적으로는 문제가 없지만 길이를 구하는데, 음수가 나오는 것은 불가능 합니다.

잘못된 속성의 사용 예

function Rectangle(width, height) {
    this.width = width;
    this.height = height;
}

Rectangle.prototype.getArea = function() {
    return this.width * this.height;
}

var rectangle = new Rectangle(5, 7);
rectangle.width = -2;

console.log("Area : " + rectangle.getArea()); // Area : -14

위 코드처럼 코드에는 문제가 없지만 길이를 구하는데 마이너스라는 불가능한 숫자가 등장합니다.

물론 음수를 넣지 않으면 문제가 되지 않겠지만, 코드를 직접 생성한 사람 이외에 사람이 사용한다면 아무것도 모르고 그냥 사용할 수 있습니다. 자신이 만들고도 시간이 조금 지나면 까먹는게 현실입니다.

세상에는 여러 사람들이 있기 때문에 문제가 일어날 수 있다는 것을 알고 있어야 합니다.

다시한번 말하자면, 캡슐화란 이렇게 잘못 사용될 수 있는 객체의 특정 부분을 사용자가 사용할 수 없게 만드는 기술입니다.

캡슐화 예

function Rectangle(w, h) {
    var width = w;
    var height = h;

    // 메서드
    this.getWidth = function() { return width; };
    this.getHeight = function() { return height; };
    this.setWidth = function(w) { width = w; };
    this.setHeight = function(h) { height = h; };
}

var rectangle = new Rectangle(5, 7);

생성자 함수 내에서 변수 width와 height를 정의했습니다. 이제 외부에서는 지역 변수 width와 height를 사용할 수 없고 오직 get과 set형태의 메서드를 사용해야합니다.

게터(getter)와 세터(setter) 예

function Rectangle(w, h) {
    var width = w;
    var height = h;

    // 메서드
    this.getWidth = function() { return width; };
    this.getHeight = function() { return height; };
    this.setWidth = function(w) {
        if(w < 0) {
            throw '음수'
        } else {
            width = w;
        }
    };
    this.setHeight = function(h) {
        if(h < 0) {
            throw '음수'
        } else {
            height = h;
        }
    };
}

Rectangle.prototype.getArea = function() {
    return this.getWidth() * this.getHeight();
};

var rectangle = new Rectangle(5, 7);
rectangle.setWidth(-2);

console.log("Area: " + rectangle.getArea()); // Uncaught 음수

위 코드를 실행하면 U ncaught 음수라는 오류가 발생합니다. setWidth()메서드로 음수를 넣었기 때문에 발생하는 오류입니다.

set형태의 메서드로만 width속성과 height속성에 값을 입력할 수 있기 때문에, width속성과 height속성에 음수가 들어가는 일은 없게 되었습니다.

:: throw 키워드 : 강제로 오류를 발생시키는 키워드

캡슐화의 개념

• get형태의 메서드와 같이 값을 가져오는 메서드를 게터(getter)라고 합니다.
• set형태의 메서드와 같이 값을 입력하는 메서드를 세터(setter)라고 합니다.
• 게터와 세터 자체가 캡슐화가 아닌 만일의 상황을 대비해서 특정 속성이나 메서드를 사용자가 사용할 수 없게 숨겨두는 것이 캡슐화입니다.

프로토타입

프로토타입은 생성자 함수로 생성된 객체가 공통으로 가지는 공간입니다. 

생성자 함수 구성 예

function Student(name, korean, math, english, science) {
    this.name = name;
    this.korean = korean;
    this.math = math;
    this.english = english;
    this.science = science;
}

프로토타입으로 메서드 생성하기 예

function Student(name, korean, math, english, science) {
    this.name = name;
    this.korean = korean;
    this.math = math;
    this.english = english;
    this.science = science;
}

Student.prototype.getSum = function() {
    return this.korean + this.math + this.english + this.science;
};
Student.prototype.getAverage = function() {
    return this.getSum() / 4;
};
Student.prototype.toString = function() {
    return this.name + '\t' + this.getSum() + '\t' + this.getAverage();
};

var student = new Student('shiro', 98, 34, 65, 77);

console.log(student.getSum()); // 274
console.log(student.getAverage()); // 68.5
console.log(student.toString()); // shiro 274 68.5

메서드는 모두 프로토타입 안에 넣어줍니다. 프로토타입은 우리가 만드는 것이 아니라, 함수 안에 자동으로 만들어지는 arguments와 마찬가지로 자바스크립트의 모든 함수는 변수 prototype을 갖습니다. ( prototype은 객체입니다. )

생성자 함수를 사용한 객체 배열 생성하기 예

function Student(name, korean, math, english, science) {
    this.name = name;
    this.korean = korean;
    this.math = math;
    this.english = english;
    this.science = science;
}

Student.prototype.getSum = function() {
    return this.korean + this.math + this.english + this.science;
};
Student.prototype.getAverage = function() {
    return this.getSum() / 4;
};
Student.prototype.toString = function() {
    return this.name + '\t' + this.getSum() + '\t' + this.getAverage();
};

var output = '이름 \t 점수 \t 평균 \n';
var students = [];
students.push(new Student('shiro', 98, 34, 65, 77));
students.push(new Student('AAA', 32, 43, 55, 66));
students.push(new Student('BBB', 44, 32, 12, 12));

for(var i in students) {
    output += students[i].toString() + '\n';
}

console.log(output);
/*
이름    점수    평균 
shiro  274    68.5
AAA    196    49
BBB    100    25
*/

프로토타입을 사용하면 기존 객체에 추가로 메서드를 제공할 수 있습니다.

new 키워드

new키워드로 함수를 호출하면 객체를 위한 공간을 만들고 this키워드는 해당 공간을 의미하게 됩니다.

new 키워드 예

function Constructor(value) {
    this.value = value;
}

var constructor = new Constructor('New');

console.log(constructor.value); // New

코드를 실행하면 New를 출력합니다. 

new 키워드를 사용하지 않을 경우

function Constructor(value) {
    this.value = value;
}

var constructor = Constructor('New');

console.log(value); // New

위 코드처럼 new키워드를 사용하지 않고, 일반 console.log()에 value변수를 사용하면 정상적으로 실행됩니다.

위에서 언급했듯이 일반적으로 this키워드를 사용하면 window객체를 나타냅니다. 따라서 일반적으로 함수를 호출하듯이 new키워드를 사용하지 않으면, 함수를 실행하는 동안 window객체에 속성을 추가한 것이 되어버립니다. 따라서 위코드처럼 실행이 이루어집니다.