Объекты и функции

В прошлом уроке мы увидели, что переменная хранит ссылку на объект. Теперь посмотрим, что происходит, когда такую переменную передают функции.

Начнём с обычной задачи. Функции нужны данные о пользователе:

print-user-params.jsjs

1function printUser(name, age, city) {2  console.log(`${name}, ${age}, ${city}`);3}45printUser('Ира', 20, 'Москва');

Консоль

Ира, 20, Москва

Здесь три связанных значения передаются отдельно. Нужно помнить их порядок, а если список данных растёт, растёт и список параметров. Если данные уже собраны в объект, функции можно передать его целиком:

print-user-object.jsjs

1const user = {2  name: 'Ира',3  age: 20,4  city: 'Москва',5};67function printUser(user) {8  console.log(`${user.name}, ${user.age}, ${user.city}`);9}1011printUser(user);

Консоль

Ира, 20, Москва

Теперь связанные данные путешествуют вместе – одним объектом. Функции больше не нужно принимать каждое поле отдельным параметром. Объект можно расширять новыми свойствами, не меняя сам способ передачи данных: вызов по-прежнему остаётся printUser(user).

Что попадает в параметр

Когда выполняется printUser(user), JavaScript берёт значение переменной user и записывает его в параметр функции. Для объекта этим значением является ссылка. Поэтому внутри функции появляется ещё одна переменная, ведущая к тому же объекту. Чтобы это было видно, дадим параметру другое имя:

person.jsjs

1const user = {2  name: 'Ира',3  age: 20,4};56function printUser(person) {7  console.log(person.name);8}910printUser(user);

Консоль

Ира

Параметр person – ещё одно имя для того же объекта.

В JavaScript аргументы передаются по значению. В случае объекта этим значением является ссылка на него. Поэтому person получает копию ссылки, а не копию самого объекта.

Функция меняет объект

level-up.jsjs

1const player = {2  name: 'Ира',3  level: 1,4};56function levelUp(character) {7  character.level += 1;8}910levelUp(player);1112console.log(player.level);

Консоль

Параметр character – отдельная переменная, но он ведёт к тому же объекту, что и внешний player. Поэтому строка character.level += 1 меняет не параметр, а свойство общего объекта. После завершения функции объект остаётся изменённым:

до вызова

// player    → { name: 'Ира', level: 1 }// character → тот же объект

после character.level += 1

// player    → { name: 'Ира', level: 2 }// character → тот же объект

Изменение внутри функции видно снаружи

const player = {

name: 'Ира',

level: 1,

};

Создали объект player. Сейчас его level равен 1.

function levelUp(character) {

character.level += 1;

}

levelUp(player);

console.log(player.level);

Создали объект player. Сейчас его level равен 1.

Вызываем levelUp и передаём player. В параметр character попадает копия ссылки – он ведёт к тому же объекту.

Через character мы обращаемся к тому же объекту, поэтому его level изменится с 1 на 2.

Объект остался тем же – изменилось только его свойство level.

Вызов функции завершён. character больше не существует, а изменение объекта сохранилось.

player по-прежнему ведёт к этому объекту, поэтому player.level теперь равно 2.

В функцию передали не новый объект, а ссылку на существующий. Поэтому изменение его свойства осталось после завершения функции.

Изменить объект и заменить параметр – разные вещи

Есть два очень похожих с виду действия: person.level = 1 и person = { name: 'Ира', level: 1 }. Но делают они совершенно разное. Первый случай – мы идём по ссылке к существующему объекту и меняем его свойство:

reset-level.jsjs

1const player = {2  name: 'Ира',3  level: 5,4};56function resetLevel(person) {7  person.level = 1;8}910resetLevel(player);1112console.log(player.level);

Консоль

Второй случай – параметру присваивают новый объект:

reset.jsjs

1const player = {2  name: 'Ира',3  level: 5,4};56function reset(person) {7  person = {8    name: 'Ира',9    level: 1,10  };11}1213reset(player);1415console.log(player.level);

Консоль

Присваивание person = ... не меняет старый объект. Оно лишь заставляет локальную переменную person указывать на новый. Внешняя переменная player вообще не участвовала в этом присваивании, поэтому продолжает вести к старому объекту:

до присваивания

// player → объект A { level: 5 }// person → объект A

после person = { … }

// player → объект A { level: 5 }// person → объект B { level: 1 }

Функция может возвращать объект

Объект – такое же значение JavaScript, как число или строка. Поэтому функция может не только получать объект, но и возвращать его:

create-player.jsjs

1function createPlayer(name) {2  return {3    name,4    level: 1,5  };6}78const player = createPlayer('Ира');910console.log(player);

Консоль

{ name: 'Ира', level: 1 }

При выполнении return создаётся объект, а вызов функции становится его значением:

Значение вызова – объект, который вернула функция.

Поэтому результат можно сохранить в переменной точно так же, как число или строку.

Каждый вызов может создавать новый объект

Функция может собирать объект из своих аргументов – по одному образцу для всех вызовов:

create-user.jsjs

1function createUser(name, age) {2  return {3    name,4    age,5    isAdmin: false,6  };7}89const ira = createUser('Ира', 20);10const max = createUser('Макс', 31);1112console.log(ira.name);13console.log(max.name);14console.log(ira === max);

Консоль

Ира

Макс

false

Каждый вызов выполняет литерал { ... } заново, поэтому ira и max – два разных объекта: ira === max даёт false.

Функцию, основная задача которой – создавать и возвращать объекты, часто называют фабричной функцией (factory function).

Объект в функции: три ситуации

Функция читает объект, меняет его или создаёт новый.

Мы встретили три обычных способа работы функций с объектами:

функция получает объект и читает его свойства;
функция получает объект и изменяет его;
функция сама создаёт объект и возвращает его.

Самое важное различие – во втором случае: если функция меняет свойства переданного объекта, эти изменения видны и снаружи.

Но иногда нужно другое: взять существующий объект, изменить часть данных и оставить оригинал нетронутым. Для этого нужен отдельный объект с теми же данными – копия.

// теперь вы знаете

Объект передаётся функции одним аргументом; параметр – новая локальная переменная с копией ссылки на тот же объект
character.level += 1 внутри функции меняет общий объект – изменение видно снаружи и после возврата
person = { … } перенаправляет только параметр: внешняя переменная ведёт к старому объекту
Функция может вернуть объект: вызов createPlayer('Ира') становится этим объектом, и его можно сохранить в переменной
Фабричная функция собирает и возвращает объект; каждый вызов создаёт новый

Проверьте себя

Что появится в консоли?

const cart = { items: 2 };
function addItem(basket) {
  basket.items += 1;
}
addItem(cart);
console.log(cart.items);

3

2

undefined

ошибка: cart объявлен через const

Строка о пользователе

Напишите describe(person): функция получает объект со свойствами name и age и возвращает строку вида «Ира, 20 лет».

function describe(person) {
  // верните строку из свойств объекта
}

Решение

1function describe(person) {2  return `${person.name}, ${person.age} лет`;3}

Функция получила ссылку на объект и собрала строку из двух его свойств. Порядок и число свойств в объекте на вызов не влияют.

Верно ли, что этот код напечатает false?

const user = { name: 'Ира' };
function isSame(person) {
  return person === user;
}
console.log(isSame(user));

Баллы и купоны

Допишите addPoints(customer, amount): функция прибавляет amount к свойству points переданного объекта, а затем, пока points не меньше 100, вычитает из него 100 и увеличивает coupons на 1 – каждые сто баллов обмениваются на купон. Функция ничего не возвращает – изменения должны быть видны снаружи через client. Проверочный код дважды начисляет баллы и печатает число купонов и остаток баллов.

const client = { name: 'Лена', points: 40, coupons: 0 };

function addPoints(customer, amount) {
  // прибавьте баллы; пока points >= 100 – снимайте 100 и добавляйте купон
}

// ── проверочный код: не меняйте ──
addPoints(client, 60);
console.log(`${client.coupons} / ${client.points}`);
addPoints(client, 250);
console.log(`${client.coupons} / ${client.points}`);

Решение

1const client = { name: 'Лена', points: 40, coupons: 0 };23function addPoints(customer, amount) {4  customer.points += amount;5  while (customer.points >= 100) {6    customer.points -= 100;7    customer.coupons += 1;8  }9}1011// ── проверочный код: не меняйте ──12addPoints(client, 60);13console.log(`${client.coupons} / ${client.points}`);14addPoints(client, 250);15console.log(`${client.coupons} / ${client.points}`);

Параметр customer ведёт к тому же объекту, что client, поэтому customer.points += amount и шаги цикла меняют его свойства на месте – после вызова снаружи видны новые coupons и points. Условие цикла именно >= 100, потому что ровно 100 баллов – это уже купон (первый вызов даёт купон и остаток 0), а while, а не if, – потому что за один вызов порог можно пройти несколько раз: второй вызов даёт сразу два купона и остаток 50.

Что появится в консоли?

const cart = { items: 2 };
function clear(basket) {
  basket = { items: 0 };
}
clear(cart);
console.log(cart.items);

2

0

undefined

ошибка: параметр менять нельзя

Почините сброс прогресса

Функция resetProgress(player) должна сбрасывать прогресс игрока: level становится 1, coins – 0, имя остаётся прежним. Сейчас после вызова у hero по-прежнему level: 7 и coins: 350. Почините функцию так, чтобы сброс был виден снаружи.

function resetProgress(player) {
  player = {
    name: player.name,
    level: 1,
    coins: 0,
  };
}

// ── проверочный код: не меняйте ──
const hero = { name: 'Ира', level: 7, coins: 350 };
resetProgress(hero);
console.log(hero.name);
console.log(hero.level);
console.log(hero.coins);

Решение

1function resetProgress(player) {2  player.level = 1;3  player.coins = 0;4}56// ── проверочный код: не меняйте ──7const hero = { name: 'Ира', level: 7, coins: 350 };8resetProgress(hero);9console.log(hero.name);10console.log(hero.level);11console.log(hero.coins);

Параметр player ведёт к тому же объекту, что hero. Присваивание player = { … } направляло на новый объект только параметр, а hero продолжал вести к старому. Запись player.level = 1 меняет свойство самого объекта hero, поэтому сброс виден после вызова.

Что напечатает этот код?

const player = { name: 'Ира', level: 1 };
function levelUp(character) {
  character.level += 1;
  return character;
}
const result = levelUp(player);
result.level += 1;
console.log(player.level);

Значок игрока

Напишите makeBadge(player): функция получает объект со свойствами name и level и возвращает новый объект со свойствами name (то же имя) и pro – true, если level не меньше 10, иначе false.

function makeBadge(player) {
  // верните объект: name и pro
}

Решение

1function makeBadge(player) {2  return { name: player.name, pro: player.level >= 10 };3}

Функция прочитала свойства полученного объекта и вернула новый объект другого вида. Сам player при этом не менялся.

Что появится в консоли?

function createCart(items) {
  return { items };
}
console.log(createCart(3).items);

3

undefined

{ items: 3 }

ошибка: у вызова функции нет свойств

Сборка товара

Напишите createProduct(title, price): функция возвращает объект со свойствами title и price из параметров и свойством inStock со значением true.

function createProduct(title, price) {
  // верните объект: title, price, inStock
}

Решение

1function createProduct(title, price) {2  return { title, price, inStock: true };3}

Литерал в return собирает объект из параметров, а значение по умолчанию inStock задано в одном месте – каждый вызов создаёт новый объект по одному образцу.

Функция возвращает объект литералом return { count: 0 };. Верно ли, что два её вызова вернут один и тот же объект?

Какую строку поставить вместо // ?, чтобы код напечатал Макс?

const user = { name: 'Ира' };
function rename(person) {
  // ?
}
rename(user);
console.log(user.name);

person = { name: 'Макс' };

const user = { name: 'Макс' };

person.name = 'Макс';

return { name: 'Макс' };

Почему

Из четырёх строк объект, к которому ведёт user, меняет только person.name = 'Макс': параметр person ведёт к тому же объекту, и присваивание меняет его свойство. person = { name: 'Макс' } направляет на новый объект только параметр. const user = { … } объявляет внутри функции отдельную локальную переменную – внешний user она не трогает. return { name: 'Макс' } создаёт и возвращает новый объект, но результат вызова rename(user) никуда не сохраняется, а user ведёт к прежнему объекту.

Предыдущий урокСсылки и сравнение объектов Следующий урок Копирование объектов