Skip to content

Commit 9812e98

Browse files
feyclaude
andcommitted
feat(40-define-functions): adapt content from Python version
- 100-syntax: rewrite README (function declaration, parameters, arrow intro); printMotto exercise - 150-return: rewrite README (return vs console.log, early return); sayHurray exercise - 340-default-parameters: rewrite README; getHiddenCard exercise with slice(-4) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 9a7fb26 commit 9812e98

9 files changed

Lines changed: 99 additions & 208 deletions

File tree

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
// BEGIN
2-
const printMotto = () => {
2+
function printMotto() {
33
console.log('Winter is coming');
4-
};
4+
}
55
// END
66

7-
// exports are studied on Hexlet
7+
printMotto();
8+
89
export default printMotto;
Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1+
Напишите функцию `printMotto()` без параметров, которая выводит на экран:
12

2-
Реализуйте функцию с именем `printMotto()`, которая выведет на экран фразу *Winter is coming*.
3-
4-
```javascript
5-
printMotto(); // => Winter is coming
3+
```text
4+
Winter is coming
65
```
76

8-
В задачах, в которых нужно реализовать функцию, эту функцию вызывать не нужно. Вызывать функцию будут автоматизированные тесты, которые проверяют её работоспособность. Пример с вызовом выше показан только для того, чтобы вы понимали, как ваша функция будет использоваться.
7+
Затем вызовите эту функцию.
Lines changed: 26 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,52 @@
1+
Функции позволяют избежать повторения кода. Если одни и те же действия нужны в разных местах программы, их выносят в функцию.
12

2-
Определение собственных функций значительно упрощает написание и поддержку программ. Функции позволяют объединять сложные (составные) операции в одну. Например, отправка письма на сайте - это достаточно сложный процесс, включающий в себя взаимодействие с внешними системами (интернет). Благодаря возможности определять функции, вся сложность может быть скрыта за одной простой функцией:
3+
## Объявление функции
34

45
```javascript
5-
// Гипотетический пример
6-
// Место откуда берется функция
7-
import { send } from 'mailer';
8-
9-
const email = 'support@hexlet.io';
10-
const title = 'Помогите';
11-
const body = 'Я написал историю успеха, как я могу получить скидку?';
6+
function sayHello() {
7+
console.log('Hello!');
8+
}
129

13-
// Один маленький вызов — и много логики внутри
14-
send(email, title, body);
10+
// Вызов функции
11+
sayHello(); // => Hello!
12+
sayHello(); // => Hello! (можно вызвать сколько угодно раз)
1513
```
1614

17-
Внутри себя подобный вызов выполняет довольно много логики. Соединяется с почтовым сервером, формирует правильный запрос на основе заголовка и тела сообщения, а затем все это отправляет, не забыв закрыть соединение.
18-
19-
Создадим нашу первую функцию. Ее задача - вывести на экран приветствие:
15+
Ключевое слово `function`, затем имя функции, скобки и тело в фигурных скобках.
2016

21-
```textHello, Hexlet!```
17+
## Функции с параметрами
2218

2319
```javascript
24-
// Определение функции
25-
// Определение не вызывает и не выполняет функцию
26-
// Мы лишь говорим, что теперь такая функция существует
27-
const showGreeting = () => {
28-
// Внутри тела отступ 2 пробела для удобства чтения
29-
const text = 'Hello, Hexlet!';
30-
console.log(text);
20+
function greet(name) {
21+
console.log(`Hello, ${name}!`);
3122
}
3223

33-
// Вызов функции
34-
showGreeting(); // => Hello, Hexlet!
24+
greet('Alice'); // => Hello, Alice!
25+
greet('Bob'); // => Hello, Bob!
3526
```
3627

37-
В отличие от обычных данных, функции выполняют действия, поэтому их имена практически всегда должны быть глаголами: «построить что-то», «нарисовать что-то», «открыть что-то».
28+
Параметр `name` — это переменная, доступная внутри функции. При каждом вызове в неё подставляется переданный аргумент.
3829

39-
Всё, что описывается внутри фигурных скобок `{}`, называется телом функции. Внутри тела можно описывать любой код. Считайте, что это маленькая самостоятельная программа, набор произвольных инструкций. Тело выполняется ровно в тот момент, когда запускается функция. Причём каждый вызов функции запускает тело независимо от других вызовов. Кстати, тело может быть пустым:
30+
## Несколько параметров
4031

4132
```javascript
42-
// Минимальное определение функции
43-
const noop = () => {
44-
// Тут мог бы быть код, но его нет
33+
function add(a, b) {
34+
console.log(a + b);
4535
}
4636

47-
noop();
37+
add(3, 4); // => 7
4838
```
4939

50-
Определение функции подозрительно похоже на создание константы. Действительно, в реальности, определение функции состоит из двух частей: собственно определения и присваивания константе:
51-
52-
1. Определение: `() => { }`
53-
2. Присваивание `const nameOfFunction = ...`
40+
## Стрелочные функции
5441

55-
Технически возможно создать функцию, которая просто определена, но ей невозможно воспользоваться, потому что нет имени:
42+
В JavaScript есть сокращённая запись через стрелку `=>`:
5643

5744
```javascript
58-
() => {
59-
// Работающий, но бесполезный код
45+
const greet = (name) => {
46+
console.log(`Hello, ${name}!`);
6047
};
48+
49+
greet('Alice'); // => Hello, Alice!
6150
```
6251

63-
Понятие «создать функцию» имеет много синонимов: «реализовать», «определить» и даже «заимплементить» (от слова implement). Все они встречаются в повседневной практике на работе.
52+
Обе формы равнозначны, но стрелочная функция записывается в переменную.
Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
// BEGIN
2-
const sayHurrayThreeTimes = () => {
3-
const word = 'hurray!';
4-
return `${word} ${word} ${word}`;
5-
};
2+
function sayHurray() {
3+
return 'hurray! hurray! hurray!';
4+
}
65
// END
76

8-
export default sayHurrayThreeTimes;
7+
console.log(sayHurray());
8+
9+
export default sayHurray;
Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1+
Напишите функцию `sayHurray()`, которая возвращает строку `'hurray! hurray! hurray!'`.
12

2-
Реализуйте функцию `sayHurrayThreeTimes()`, которая возвращает строку 'hurray! hurray! hurray!'.
3-
4-
```javascript
5-
const hurray = sayHurrayThreeTimes();
6-
console.log(hurray); // => hurray! hurray! hurray!
7-
```
3+
Затем выведите результат вызова функции на экран.
Lines changed: 28 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,44 @@
1-
2-
Функции, которые мы определяли в предыдущих уроках, заканчивали свою работу тем, что печатали на экран какие-то данные:
3-
4-
```javascript
5-
const greeting = () => {
6-
console.log('Hello, Hexlet!');
7-
};
8-
```
9-
10-
Пользы от таких функций не очень много, так как результатом их работы невозможно воспользоваться внутри программы. Рассмотрим это на примере.
11-
12-
Возьмем задачу обработки электронной почты. Когда пользователь регистрируется на каком-то сайте, то он может ввести email любым способом:
13-
14-
* Добавив случайно пробелы в начале или в конце `_support@hexlet.io__`
15-
* Использовав буквы в разном регистре `SUPPORT@hexlet.io`
16-
17-
Если мы сохраним его в таком виде в базу данных, то пользователь, скорее всего, не сможет войти на сайт, так как будет вбивать адрес без пробелов и используя другой регистр символов. Чтобы этого не произошло, email нужно подготовить к записи в базу, привести его к нижнему регистру и обрезать пробельные символы по краям строки. Вся задача решается в пару строчек:
18-
19-
```javascript
20-
const saveEmail = () => {
21-
// В реальности email приходит из формы
22-
const email = ' SuppORT@hexlet.IO';
23-
// обрезаем пробельные символы
24-
const trimmedEmail = email.trim();
25-
const preparedEmail = trimmedEmail.toLowerCase();
26-
console.log(preparedEmail);
27-
// здесь будет запись в базу данных
28-
};
29-
```
30-
31-
Этот код стал возможен только благодаря возврату значения. Методы `trim()` и `toLowerCase()` ничего не печатают на экран (в консоль), они **возвращают** результат своей работы и поэтому мы можем записать его в константы. Если бы они вместо этого печатали на экран, мы бы не могли присвоить результат их работы константе. Как мы не можем сделать с определенной выше функцией `greeting()`:
32-
33-
```javascript
34-
const message = greeting();
35-
console.log(message); // => undefined
36-
```
37-
38-
Изменим функцию `greeting()` таким образом, чтобы она начала возвращать данные, вместо их печати. Для этого нам понадобится выполнить возврат вместо печати на экран
1+
Функция может не только выполнять действия, но и **возвращать результат** с помощью оператора `return`.
392

403
```javascript
41-
const greeting = () => {
42-
return 'Hello, Hexlet!';
43-
};
44-
```
45-
46-
`return` – особая инструкция, которая берёт выражение, записанное справа. Затем она отдаёт это выражение наружу, тому коду, который вызвал функцию. Как только JavaScript натыкается на `return`, выполнение функции на этом завершается.
47-
48-
```javascript
49-
// Теперь мы можем использовать результат работы функции
50-
const message = greeting();
51-
console.log(message); // => Hello, Hexlet!
52-
// И даже выполнить какие-то действия над результатом
53-
console.log(message.toUpperCase()); // => HELLO, HEXLET!
54-
```
55-
56-
Любой код после `return` не выполняется:
4+
function add(a, b) {
5+
return a + b;
6+
}
577

58-
```javascript
59-
const greetingWithCodeAfterReturn = () => {
60-
return 'Hello, Hexlet!';
61-
console.log('Я никогда не выполнюсь');
62-
};
8+
const result = add(3, 4);
9+
console.log(result); // => 7
6310
```
6411

65-
Даже если функция возвращает данные, это не ограничивает её в том, что она печатает. Кроме возврата данных мы можем и печатать:
12+
## Разница между return и console.log
6613

6714
```javascript
68-
const greetingWithReturnAndPrinting = () => {
69-
console.log('Я появлюсь в консоли');
70-
return 'Hello, Hexlet!';
71-
};
72-
73-
// И напечатает текст на экран и вернет значение
74-
const message = greetingWithReturnAndPrinting ();
75-
```
15+
// Эта функция выводит, но ничего не возвращает
16+
function printSum(a, b) {
17+
console.log(a + b);
18+
}
7619

77-
Возвращать можно не только конкретное значение. Так как `return` работает с выражениями, то справа от него может появиться почти все что угодно. Здесь нужно руководствоваться принципами читаемости кода:
20+
// Эта функция возвращает результат
21+
function getSum(a, b) {
22+
return a + b;
23+
}
7824

79-
```javascript
80-
const greeting = () => {
81-
const message = 'Hello, Hexlet!';
82-
return message;
83-
};
25+
// Вернувший результат можно использовать дальше
26+
const sum = getSum(3, 4);
27+
console.log(sum * 2); // => 14
8428
```
8529

86-
Здесь мы не возвращаем переменную, возвращается всегда значение, которое находится в этой переменной. Ниже пример с вычислениями:
87-
88-
```javascript
89-
const doubleFive = () => {
90-
// или return 5 + 5
91-
const result = 5 + 5;
92-
return result;
93-
};
94-
```
30+
## return завершает функцию
9531

96-
Вопрос на самопроверку. Что вернет вызов, определенной ниже, функции `run()`?
32+
После `return` функция немедленно завершается. Код после `return` не выполняется.
9733

9834
```javascript
99-
// Определение
100-
const run = () => {
101-
return 5;
102-
return 10;
103-
};
35+
function getSign(n) {
36+
if (n > 0) return 'positive';
37+
if (n < 0) return 'negative';
38+
return 'zero';
39+
}
10440

105-
// Что будет выведено на экран?
106-
console.log(run());
41+
console.log(getSign(5)); // => positive
42+
console.log(getSign(-3)); // => negative
43+
console.log(getSign(0)); // => zero
10744
```
108-
109-
<details>
110-
<summary>Ответ</summary>
111-
112-
На экран будет выведено `5`.
113-
114-
</details>
Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
// BEGIN
2-
const getHiddenCard = (cardNumber, starsCount = 4) => {
3-
const visibleDigitsLine = cardNumber.slice(12);
4-
return `${'*'.repeat(starsCount)}${visibleDigitsLine}`;
5-
};
2+
function getHiddenCard(cardNumber, starsCount = 4) {
3+
return '*'.repeat(starsCount) + cardNumber.slice(-4);
4+
}
65
// END
76

87
export default getHiddenCard;
Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,8 @@
1-
2-
Реализуйте функцию `getHiddenCard()`, которая принимает на вход номер кредитки (состоящий из 16 цифр) в виде строки и возвращает его скрытую версию. Скрытая версия может использоваться на сайте для отображения. Если исходная карта имела номер *2034399002125581*, то скрытая версия выглядит так *\*\*\*\*5581*. Другими словами, функция заменяет первые 12 символов, на звездочки. Количество звездочек регулируется вторым необязательным параметром. Значение по умолчанию — 4.
1+
Напишите функцию `getHiddenCard(cardNumber, starsCount = 4)`, которая принимает номер карты (строку) и возвращает скрытый номер: звёздочки + последние 4 цифры.
32

43
```javascript
5-
// Кредитка передается внутрь как строка
6-
getHiddenCard('1234567812345678', 2); // **5678
7-
getHiddenCard('1234567812345678', 3); // ***5678
8-
getHiddenCard('1234567812345678'); // ****5678
9-
getHiddenCard('2034399002121100', 1); // *1100
4+
getHiddenCard('1234567890123456') // => '****3456'
5+
getHiddenCard('1234567890123456', 2) // => '**3456'
106
```
117

12-
Для выполнения задания вам понадобится метод строки `repeat()`, который повторяет строку указанное количество раз
13-
14-
```javascript
15-
'+'.repeat(5); // +++++
16-
'o'.repeat(3); // ooo
17-
```
8+
Используйте `'*'.repeat(starsCount)` и `.slice(-4)`.

0 commit comments

Comments
 (0)