Skip to main content

New Operator

new = create object instance from constructor


What is 'new'?

"Creates instance from constructor"

The new operator creates an instance of a user-defined object type or built-in object.


Basic Usage

new Constructor()

function Person(name) {
this.name = name;
}

const person = new Person("John");
console.log(person.name); // 'John'

"The new operator calls a constructor function, creating a new object instance."


What 'new' Does

4 steps: create → bind → execute → return

  1. Creates empty object
  2. Sets prototype to constructor's prototype
  3. Binds 'this' to new object
  4. Returns object (unless constructor returns object)

"The new operator: creates empty object, sets prototype, binds 'this', and returns the object."


Manual Implementation

How new works internally

function myNew(constructor, ...args) {
// 1. Create empty object
const obj = {};

// 2. Set prototype
Object.setPrototypeOf(obj, constructor.prototype);

// 3. Bind 'this' and execute
const result = constructor.apply(obj, args);

// 4. Return (object if constructor returns one, else obj)
return result instanceof Object ? result : obj;
}

"Manually implementing 'new' shows it creates object, sets prototype, binds 'this', and returns the result."


Constructor Return Value

Object return = used, primitive = ignored

function Person(name) {
this.name = name;
return { custom: "object" }; // Returns this instead
}

const person = new Person("John");
console.log(person); // { custom: 'object' }

If constructor returns object, that's used; otherwise, 'this' is returned.

"If constructor returns an object, 'new' returns that; otherwise returns 'this'."


Without 'new'

'this' = global/window

function Person(name) {
this.name = name;
}

const person = Person("John"); // Without 'new'
console.log(person); // undefined
console.log(window.name); // 'John' (pollutes global)

Without 'new', 'this' refers to global object.

"Calling constructor without 'new' sets 'this' to global object, causing bugs and global pollution."


ES6 Classes

Classes require 'new'

class Person {
constructor(name) {
this.name = name;
}
}

const person = new Person("John"); // Required

Classes must be called with 'new'.

"ES6 classes must be instantiated with 'new' - calling without 'new' throws an error."


Built-in Constructors

new Array · new Object · new Date

const arr = new Array(3); // [empty × 3]
const obj = new Object(); // {}
const date = new Date(); // Current date

"Built-in constructors like Array, Object, and Date are used with 'new' to create instances."


Common Patterns

Factory functions vs constructors

// Constructor (requires 'new')
function Person(name) {
this.name = name;
}
const p1 = new Person("John");

// Factory function (no 'new')
function createPerson(name) {
return { name };
}
const p2 = createPerson("John");

"Constructors require 'new', factory functions don't. Factory functions are sometimes preferred for flexibility."


Best Practices

✅ Use 'new' with constructors ✅ Use classes for modern code ✅ Consider factory functions ✅ Check if called with 'new' if needed ❌ Don't forget 'new' with constructors ❌ Don't use 'new' with factory functions


"The 'new' operator creates object instances from constructors. It: creates empty object, sets prototype to constructor's prototype, binds 'this' to new object, and returns it (or constructor's return value if object). Without 'new', 'this' refers to global. ES6 classes require 'new'. Factory functions are an alternative that don't require 'new'."


🧠 Ultra-Short Cheat Sheet

Creates object instance
Sets prototype
Binds 'this'
Returns object
Required for constructors/classes
Without 'new' = global 'this'
Factory functions alternative