Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Свойства и методы Основы JavaScript

Данные, которыми мы оперируем в своих программах, могут обладать важными свойствами — например, у строк есть длина. Как вы увидите далее, это свойство очень важно для реализации алгоритмов, связанных с преобразованием строки (как пример — переворот строки). Как узнать длину строки? Во многих языках длина строки вычисляется с помощью специальной функции и выглядит это примерно так:

import { length } from './hexlet-basics/string.js';

const name = 'Robb';
console.log(length(name)); // => 4

В JavaScript свойства встроены прямо в язык. Они указываются через точку сразу после переменной (или константы):

const name = 'Robb';
const len = name.length;
console.log(len); // => 4

Свойства связаны с данными, у которых они берутся. Для примитивных типов все свойства описаны в документации, как например, у строк. При этом у чисел вообще нет свойств.

JavaScript позволяет обращаться к свойствам, которые не существуют (например, при опечатках). В таком случае их значением является undefined:

const name = 'Robb';
console.log(name.whatIsThat); // => undefined

Вопрос для самопроверки. Что распечатает код console.log(name[name.length]) для name, определенного выше? Почему ответ такой?

Методы

Кроме свойств, у данных существуют методы — функции, находящиеся внутри свойств. С практической точки зрения это значит, что метод работает и вызывается как функция, но делает это как свойство, через точку.

const name = 'Robb';
const upperName = name.toUpperCase();
console.log(upperName); // => 'ROBB'

Встроенные методы всегда оперируют теми данными, с которыми они связаны. Метод .toUpperCase() возвращает ту же строку, но преобразуя все символы в верхний регистр. Методов у данных обычно значительно больше, чем свойств, например, для строк их несколько десятков. В документации, на первый взгляд, они описаны немного странно: String.prototype.toLowerCase(). Это описание раскрывает некоторые внутренние детали реализации, которые сейчас не важны, да и мы не изучили всей необходимой базы для разговора о прототипах.

Методы есть и у чисел:

const temperature = 22.93;
// Округление до одного знака после запятой
const roundedTemperature = temperature.toFixed(1);
// Метод возвращает строку, которая содержит преобразованное число
console.log(roundedTemperature); // => '22.9'

// Напрямую можно вызывать так
(22.93).toFixed(1); // '22.9'

Хозяйке на заметку. Технически всё несколько сложнее. Методы есть не у самих чисел, а у данных (объектов) типа Number. Числа, записанные в переменные или константы, автоматически преобразуются к данному типу во время обращения к ним, в это время происходит так называемый boxing.

Возникает закономерный вопрос: зачем нужны методы, почему не просто функции? С числами ситуация еще сложнее. Часть операций реализована в виде методов самих чисел, например, .toFixed(), а еще большая часть — в виде методов, доступных через Math.

Есть две причины почему так сделано:

  1. Исторически так сложилось. JavaScript разрабатывался слишком быстро и поэтому не все было продумано хорошо.
  2. Далеко не все функции имеют отношение к конкретному значению. Возьмем для примера Math.min(). Эта функция находит минимальное число среди всех, которые ему были переданы. Эту функцию нелогично делать методом конкретного числа, например, так — (1).min(). Она не имеет никакой связи с конкретным числом.

С другой стороны, функции, работающие с конкретным числом, для единообразия должны быть реализованы как методы. К таким функциям относится получение модуля числа. То есть вместо такого вызова Math.abs(-10), логично иметь такой: (-10).abs().

Что касается методов в целом, то не все так однозначно. Есть языки, в которых методов нет и там всё прекрасно, есть языки, где методы — это основной способ работы с функциями. JavaScript — язык, в котором прижились оба подхода, в нём активно используются как обычные функции, так и методы. О плюсах и минусах подобных подходов подробно рассказывается в курсах посвященных ООП.

Неизменяемость

Что напечатает на экран последний вызов?

const name = 'Tirion';
console.log(name.toUpperCase()); // => TIRION
console.log(name); // => ?

Ответ на этот вопрос зависит от того, как вы поняли урок про неизменяемость примитивных типов данных. Вызов метода .toUpperCase() возвращает новое значение, в котором все буквы преобразованы в верхний регистр, но он не меняет (и не может этого сделать) исходную строку. Поэтому внутри константы (или переменной — это не важно) окажется старое значение: 'Tirion'. Эта логика справедлива для методов всех примитивных типов. Более того, попытка изменить значение свойства этих данных ни к чему не приведет:

const name = 'Tirion';
console.log(name.length); // => 6
name.length = 100;
console.log(name.length); // => 6

Вместо изменения значения можно заменить значение. Для этого понадобятся переменные:

let name = 'Tirion';
name = name.toUpperCase();
console.log(name); // => TIRION

Свойства и методы как выражения

Свойства и методы — такие же выражения, как переменные, константы или вызовы функции, а значит, их можно всячески комбинировать.

Использование в операциях:

const name = 'Shaya';
name.length + 5; // 10
`hi, ${name.toUpperCase()}!`; // hi, SHAYA!

Использование в параметрах функций:

const name1 = 'Robb';
const name2 = 'Shaya';
console.log(name2.length); // => 5
console.log(name2.toLowerCase()); // => shaya
console.log(Math.min(name1.length, name2.length)); // => 4

https://replit.com/@hexlet/js-basics-properties-method


Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов для веб-приложений
6 октября 10 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов для веб-приложений
6 октября 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
6 октября 16 месяцев

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»