Створення об'єкта

JavaScriptMiddle~2 хв читання

Об'єктний літерал (Object literal) - найпростіший і найпоширеніший спосіб

javascript

const user = {
  name: 'Oleh',
  age: 25,
  isAdmin: false
};

Це найзручніший для читання і найуживаніший спосіб створення об'єктів.

Можна додавати і видаляти властивості динамічно:

javascript

user.city = 'Kyiv';
delete user.isAdmin;

2. Через конструктор `new Object()`

javascript

const user = new Object();
user.name = 'Oleh';
user.age = 25;

Робить те саме, що {}, але довше і виглядає "по-старому". Зараз майже не використовується.

3. Функція-конструктор (Constructor Function)

До появи class саме так створювали об'єкти "за шаблоном".

javascript

function User(name, age) {
  this.name = name;
  this.age = age;
}

const oleh = new User('Oleh', 25);
const alex = new User('Alex', 30);

console.log(oleh.name); // "Oleh"

Коли ти викликаєш функцію з new, JS робить під капотом:

створює порожній об'єкт {},

присвоює його this,

повертає цей об'єкт.

4. ES6 class (синтаксичний цукор над функцією-конструктором)

javascript

class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHi() {
    console.log(`Привіт, я ${this.name}`);
  }
}

const oleh = new User('Oleh', 25);
oleh.sayHi(); // "Привіт, я Oleh"

Під капотом class - це та сама функція, але більш зручний і зрозумілий синтаксис.

5. Фабрична функція (Factory Function)

Замість class або new, можна просто повернути об'єкт:

javascript

function createUser(name, age) {
  return {
    name,
    age,
    sayHi() {
      console.log(`Привіт, ${this.name}`);
    }
  };
}

const oleh = createUser('Oleh', 25);
oleh.sayHi(); // "Привіт, Oleh"

Дуже зручний спосіб, особливо коли не потрібен prototype і спадкування.

6. `Object.create()`

Створює новий об'єкт із зазначеним прототипом.

javascript

const person = {
  greet() {
    console.log(`Привіт, я ${this.name}`);
  }
};

const user = Object.create(person);
user.name = 'Oleh';

user.greet(); // "Привіт, я Oleh"

Використовується, коли потрібно явно задати ланцюжок прототипів (prototype chain).

7. Через JSON

Можна створити об'єкт із JSON-рядка:

javascript

const json = '{"name": "Oleh", "age": 25}';
const user = JSON.parse(json);

console.log(user.name); // "Oleh"

Зручно при отриманні даних із сервера. Але працює лише з простими типами даних (без методів).

8. Через `Object.assign()`

Створює об'єкт на основі інших (копіює властивості):

javascript

const base = { a: 1 };
const extra = { b: 2 };

const result = Object.assign({}, base, extra);
console.log(result); // { a: 1, b: 2 }

Можна використовувати для клонування або об'єднання об'єктів.

9. Через spread-оператор `{ ...obj }` (ES6)

javascript

const user = { name: 'Oleh', age: 25 };
const copy = { ...user, city: 'Kyiv' };

console.log(copy); // { name: 'Oleh', age: 25, city: 'Kyiv' }

Найсучасніший спосіб копіювання та об'єднання об'єктів.

Додатково: `Object.fromEntries()`

Створює об'єкт із масиву пар [ключ, значення].

javascript

const entries = [['name', 'Oleh'], ['age', 25]];
const user = Object.fromEntries(entries);

console.log(user); // { name: 'Oleh', age: 25 }

Підсумок

Спосіб	Приклад	Особливості
Об'єктний літерал	`{ name: 'Oleh' }`	найчастіший спосіб
new Object()	`new Object()`	рідко використовується
Функція-конструктор	`function User() { this.name = ... }`	стара альтернатива `class`
class	`class User { ... }`	сучасний ООП-підхід
Фабрична функція	`function createUser() { return {...} }`	без `this`, просто повертає об'єкт
Object.create(proto)	`Object.create(person)`	створює об'єкт із заданим прототипом
JSON.parse()	`JSON.parse('{"a":1}')`	створює об'єкт із рядка
Object.assign()	`Object.assign({}, obj1, obj2)`	копіює/зливає об'єкти
Spread-оператор	`{ ...obj1, ...obj2 }`	короткий синтаксис копіювання
Object.fromEntries()	`Object.fromEntries([['a',1]])`	з масиву пар в об'єкт

Коротко

Найпопулярніший спосіб → {} Для спадкування → Object.create() Для шаблонів → class або функція-конструктор Для копіювання → { ...obj } або Object.assign()

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.