Бесплатный курс по JavaScript. Зарегистрируйтесь для отслеживания прогресса →

JavaScript: Параметры функций

Функции могут не только возвращать значения, но и принимать их в виде параметров (ещё называют аргументами). С параметрами функций мы уже сталкивались много раз:

// Принимает на вход параметр любого типа
console.log('я параметр');
// Принимает на вход два строковых параметра
// первый – что ищем, второй – на что меняем
'google'.replace('go', 'mo'); // moogle
// Принимает на вход два числовых параметра
// первый – начальный индекс (включая), второй – конечный индекс (не включая)
'hexlet'.slice(1, 3); // ex

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

// Передача параметров напрямую без переменных
getLastChar('Hexlet'); // t
// Передача параметров через переменные
const name1 = 'Hexlet';
getLastChar(name1); // t
const name2 = 'Goo';
getLastChar(name2); // o

Из описания и примеров кода мы можем сделать следующие выводы:

Определение функции:

const getLastChar = (text) => {
  // Вычисляем индекс последнего символа как длина строки - 1
  return text[text.length - 1];
};

Разберем его. В скобках указывается имя переменой text, которая служит нам параметром. Имя параметра может быть любым. Главное, чтобы оно отражало смысл того значения, которое содержится внутри. Мы могли бы определить функцию и вот так:

const getLastChar = (str) => {
  return str[str.length - 1];
};

Конкретное значение параметра будет зависеть от вызова этой функции.

// Внутри функции str будет равна 'hexlet'
getLastChar('hexlet'); // t

// Внутри функции str будет равна 'code'
getLastChar('code'); // e

// Внутри функции str будет равна 'Winter is coming'
// Имя переменной снаружи не связанно с именем переменной в определении функции
const text = 'Winter is coming';
getLastChar(text); // g

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

// функция по нахождению среднего числа
const average = (a, b) => {
  return (a + b) / 2;
};

average(1, 5); // 3
average(1, 2); // 1.5

https://replit.com/@hexlet/js-basics-define-functions-parameters

То же самое относится и к методам. Они могут требовать на вход любое количество параметров, которое им нужно для работы:

// первый параметр – что ищем
// второй параметр – на что меняем
'google'.replace('go', 'mo'); // moogle

Для создания таких функций и методов, нужно в определении указать нужное количество параметров через запятую, дав им понятные имена. Ниже пример определения функции replace(), которая заменяет в слове одну часть строки на другую:

const replace = (text, from, to) => {
  // здесь тело функции, но мы его
  // опускаем, чтобы не отвлекаться
};

replace('google', 'go', 'mo'); // moogle

Когда параметров два и более, то практически для всех функций становится важен порядок передачи этих параметров. Если его поменять, то функция отработает по-другому:

// ничего не заменилось,
// так как внутри google нет mo
replace('google', 'mo', 'go'); // google

Задание

Допишите функцию truncate(), которая обрезает переданную строку до указанного количества символов, добавляет в конце многоточие и возвращает получившуюся строку. Подобная логика часто используется на сайтах, чтобы отобразить длинный текст в сокращенном виде.

Функция принимает два параметра:

  1. Строка, которую нужно обрезать
  2. Число символов, которые нужно оставить

Пример того, как должна работать написанная вами функция:

// Передаём текст напрямую
// Обрезаем текст, оставляя 2 символа
truncate('hexlet', 2); // he...

// Через переменную
const text = 'it works!';
// Обрезаем текст, оставляя 4 символа
truncate(text, 4); // it w...

Вам нужно самостоятельно реализовать функцию truncate(), в JavaScript такой функции не существует. Реализовать эту функцию можно различными способами, подскажем лишь один из них. Для решения этим способом вам понадобится взять подстроку из строки, переданной первым параметром в функцию. Используйте для этого метод slice(). Подумайте, исходя из задания, с какого индекса и по какой вам надо извлечь подстроку?

  const word = 'welcome';
  // Передавать параметры в метод можно через переменные
  const index = 3;
  word.slice(0, index); // wel

С точки зрения проверочной системы не имеет значения, каким из способов будет реализована функция truncate() внутри, главное – чтобы она выполняла поставленную задачу

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

  • Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет 🤨

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

Полезное


Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics
Реактор кода доступен в основной версии →