Сокращённая запись

Представьте, что вы заполняете анкету по листкам с черновика. На листке с надписью «возраст» записано 30, и в строку анкеты «возраст» вы переносите это число. Подпись листка и подпись строки совпадают, и писать её дважды незачем.

В коде такое случается постоянно. Функция получает параметры name и age и собирает из них объект с ключами name и age. Полная запись повторяет каждое имя два раза, а короткая обходится одним:

function makeUser(name, age) {
    return { name: name, age: age };
}

function makeShortUser(name, age) {
    return { name, age };
}

console.log(makeUser("Ann", 30)); // { name: 'Ann', age: 30 }
console.log(makeShortUser("Ann", 30)); // { name: 'Ann', age: 30 }

Давайте разберём пример:

1. makeUser пишет каждое свойство полностью: слева от двоеточия ключ, справа значение из параметра с тем же именем.
2. makeShortUser пишет только имена: { name, age }.
3. Обе функции возвращают одинаковые объекты, и console.log печатает их одинаково.

Короткая запись меняет только текст программы. Объект получается тот же, что и при полной записи.

Свойство из переменной

Когда ключ совпадает с именем переменной, хватает одного имени: { name, age } значит { name: name, age: age }. Это сокращённая запись свойства.

Как она работает:

• имя становится ключом;
• значение берётся из переменной или параметра с этим именем;
• в одном объекте можно смешивать формы: { name, age, city: "Oslo" }.

С методами и this эта запись не связана. Так пишут любое свойство, значение которого лежит в одноимённой переменной.

Чем больше в объекте свойств, тем заметнее выигрыш. У анкеты из десяти строк короткая запись убирает десять повторов, и объект читается как простой список имён.

Здесь аналогия с листками перестаёт работать. На бумаге подпись листка можно переписать в строку анкеты как угодно. В объекте ключом становится в точности имя переменной, поэтому ключ с пробелом, как "home city", так не записать.

Метод без слова function

У метода тоже есть короткая запись: greet() { … } вместо greet: function () { … }. Внутри такого метода this работает так же: это объект перед точкой в вызове. Короткую форму метода пишут чаще полной: метод в ней выглядит как объявление функции внутри объекта.

Обе короткие формы часто встречаются вместе:

function makeUser(name, age) {
    return {
        name,
        age,
        isAdult() {
            return this.age >= 18;
        }
    };
}

const kid = makeUser("Tom", 12);
console.log(kid.name, kid.isAdult()); // Tom false

Разберём по строкам:

1. Функция makeUser собирает объект из своих параметров и возвращает его.
2. Строки name, и age, — сокращённые свойства: они получают значения одноимённых параметров.
3. isAdult() { … } — метод, записанный коротко.
4. При вызове kid.isAdult() в this оказывается kid, метод читает его возраст 12 и возвращает false.
5. Программа печатает Tom false.

В чужом коде, в том числе в задачах на собеседовании, объекты почти всегда пишут так. Полезно сразу читать { name, age } как «ключ name со значением переменной name».

Частая ошибка

Короткой записью взяли имя, которого нет среди переменных:

function makeUser(name, town) {
    return { name, city }; // ✗
}

console.log(makeUser("Ann", "Oslo"));

ReferenceError: city is not defined

Запись { city } значит { city: city }, и JavaScript ищет переменную city. Параметр называется town, переменной city нет, и программа останавливается.

Если ключ и переменная называются по-разному, пишите свойство полностью: { name, city: town }.

Главное

• { name, age } — короткая запись { name: name, age: age }: ключ берёт имя переменной, а значение — её содержимое.
• greet() { … } — короткая запись greet: function () { … }, и this в ней работает так же.
• Короткая запись даёт тот же объект, что и полная.
• Если переменной с таким именем нет, короткая запись бросает ReferenceError.