Эта статья - отрывок из моей новой книги, опубликованной на LeanPub, под следующим названием: Лучший способ изучить JavaScript.

Книга все еще пишется, поэтому я продаю первые 100 покупателей за 9 долларов.

После продажи первых 100 копий я повышаю цену до 19 долларов.

Когда книга будет завершена в начале марта, она будет продана за 29,99 долларов США.

Не упустите возможность, воспользуйтесь ею сейчас:

Https://leanpub.com/a-better-way-to-learn-javascript

Итак, если вам понравилась статья, покупайте книгу! Спасите себя как минимум 1000 часов страданий с помощью основных понятий.

Функции JavaScript как простые машины

Почему машина, спросите вы?

Потому что машины - концептуально - имеют много общего с функциями JavaScript. Хотя это метафорическое сходство, я думаю, что метафора полезна.

Итак, давайте начнем с определения.

Что такое машина?

Рассмотрим это изображение упрощенной укупорочной машины для бутылок:

Опишем машину:

  1. Машина для укупорки бутылок закрывает бутылки крышками.
  2. Машина для укупорки бутылок имеет два «входа»: бутылки и крышки.
  3. Выходные данные машины представляют собой комбинацию входных данных: Бутылка с крышкой наверху.
  4. Машина имеет какие-то инструкции и выполняет некоторую работу в соответствии с этими инструкциями (возьмите бутылку, поставьте ее на конвейер, возьмите крышку, наденьте крышку на бутылку, переместите бутылку, начните с начала - `` Ура, это петля!')

Теперь мы можем взять приведенное выше описание машины и поместить его на диаграмму:

Как бы мы описали вышеупомянутую машину с помощью этой диаграммы, используя JavaScript?

На самом деле это очень просто: мы просто воспользуемся метками из диаграммы, чтобы преобразовать процесс в код, как показано ниже:

Как мы видим выше, было действительно просто сопоставить метки диаграммы с кодом JavaScript.

А теперь предположим, что вы никогда не видели кода JavaScript, и опишем его слово в слово:

  1. функция: это зарезервированное ключевое слово JavaScript. Зарезервированные ключевые слова - это те слова, которые JavaScript резервирует для собственного использования. Примеры таких слов: var, if, else, function, return, this, true, false, let, const… В JavaScript 63 зарезервированных ключевых слова. Итак, мы переводим слово «машина» из исходной диаграммы в слово «функция» на языке JavaScript.
  2. bottleCapper: это имя нашей «машины», имя нашей функции. Функция названа с использованием camelCase. Имя функции может начинаться с букв, подчеркиваний и знаков доллара. Имя функции может содержать буквы, подчеркивания, знаки доллара и числа.
  3. круглые скобки или «круглые скобки» используются в JavaScript по-разному. В контексте этой статьи мы заботимся о том, чтобы удерживать «сырье», которое наша «машина» принимает. Другими словами, круглые скобки содержат входные данные, которые ожидает наша функция. Функция может принимать ноль или более параметров. Если вы определяете это, решать вам. В JavaScript также есть некоторые предопределенные функции, поэтому иногда вы не можете выбрать количество параметров.
  4. фигурные скобки, также известные как «фигурные скобки», содержат список «инструкций» для наших «машина». По сути, они говорят нашей функции, что выводить. Мы можем выбрать, что будет выводить наша функция, используя ключевое слово return. Фигурные скобки и код внутри называются блоком кода. Блок кода обычно занимает несколько строк. Примечание: функция всегда что-то возвращает (если мы используем ключевое слово return, она вернет то значение, которое мы ей укажем; если мы опустим return, функция вернет значение undefined).

Определение функции по сравнению с вызовом функции

Есть две концепции, относящиеся к функциям в JavaScript, которые нам нужно полностью понять, прежде чем мы начнем писать код. Это объявления функций и выполнение функций.

Объявление функции в JavaScript

Как и на реальной машине, функция JS обычно создается один раз, но запускается много-много раз. Когда мы создаем функцию, мы говорим, что мы закодировали определение функции, или объявление функции, или подпись функции. Люди относятся к этому по-разному, но на практике это одно и то же.

Выполнение функции в JavaScript

Иногда это называют вызовом функции или запуском функции.

Чем отличаются эти два понятия?

Это просто:

  • объявить функцию означает «построить машину»
  • запустить функцию означает «запустить машину»

Объявление функции означает ее настройку, определение входных данных («сырье»), которые она будет использовать, и указание шагов, которые машина должна предпринять для создания выходных данных. Мы также указываем, хотим ли мы явно возвращать настраиваемый вывод или просто значение undefined.

Запуск функции аналогичен тому, как если бы мы нажали кнопку «ВКЛ» на нашей машине, и она заработала.

Вот диаграмма разницы между двумя концепциями:

Теперь мы готовы смоделировать нашу упрощенную машину для укупорки бутылок на JavaScript.

Мы прикажем нашему компьютеру, используя JavaScript, сделать следующее:

  1. Постройте машину и назовите ее «bottleCapper».
  2. Машинка должна принимать 2 входа (бутылка и крышка).
  3. Когда я запускаю его, он должен вернуть бутылку и крышку вместе.

Вот приведенное выше описание, переведенное в код:

function bottleCapper(bottle, cap) {
  return bottle + cap;
}

Оператор плюса + действует двумя разными способами:

  1. Он складывает два числа вместе
  2. Он объединяет (объединяет) две строки вместе

Практика: запуск функции

В приведенном выше коде мы «построили нашу машину» - мы определили нашу функцию. А теперь запустим. Чтобы запустить нашу машину, нам нужно включить ее и дать ей сырье для использования.

  1. Чтобы включить, мы просто начинаем новую строку с имени машины: bottleCapper
  2. Чтобы запустить машину, мы даем ей сырье в скобках: (“green bottle”, “white cap”)

Выполнение функции будет выглядеть так:

bottleCapper("green bottle", "white cap");

Вот и все! Мы успешно смоделировали простую машину на JavaScript.

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

В чем разница между параметрами функций и аргументами функций в JavaScript?

Параметры - это просто «слоты», заполнители для входных данных, которые должна получать функция.

Аргументы - это конкретные значения типов данных JavaScript, которые мы даем этим ячейкам при запуске функции.

Возникает вопрос: какие типы данных есть в JavaScript? Другими словами, каковы допустимые значения аргументов в вызовах функций JavaScript?

Типы данных JavaScript

Функция JavaScript может принимать любой тип данных, который существует в JavaScript. В JavaScript есть две отдельные группы типов данных:

  1. Примитивные типы (примитивы)
  2. Один сложный тип (объекты)

Примитивные типы данных в JavaScript

Вот вам простая мнемоника: примитивы SNUBS JavaScript.

«СНУБС», как в:

  1. струны
  2. числа
  3. нулевой
  4. неопределенный
  5. булевы
  6. символы

Итак, в JavaScript есть шесть примитивных типов данных. Вот почему я говорю, что JS SNUBS PRIMITIVES. Мне больше нравится, когда я опускаю вторую N. Но я знаю, что она там есть.

Еще одна интересная информация о примитивных типах: только строки заключаются в одинарные или двойные кавычки.

В любом случае, помимо примитивных типов данных, в JavaScript есть еще один сложный тип данных: объект.

Объекты в JavaScript

Объекты в JavaScript бывают трех видов:

  1. обычные, простые старые предметы
  2. массивы и
  3. функции

В JavaScript массивы и функции - это просто еще один вид объектов!

Хорошо, это все здорово, но как их использовать в функциях?

Использование типов данных JavaScript в качестве аргументов при вызове функций

Давайте снова определим нашу bottleCapper функцию («машину!»), А затем, когда мы ее вызовем, мы передадим ей значения для каждого из типов данных, существующих в языке:

// function definition (building the "machine")
function bottleCapper(bottle, cap) {
  return bottle + cap;
}
// running the function (running the "machine")
bottleCapper("green bottle", "white cap");
bottleCapper("5", 5);
bottleCapper(null,undefined);
bottleCapper(Symbol());
bottleCapper({});
bottleCapper([]);
bottleCapper(bottleCapper("green bottle", "white cap"));

Обратите внимание, что во второй раз мы вызвали функцию в приведенном выше коде:

bottleCapper(“5” + 5);

Когда JavaScript необходимо преобразовать один тип в другой, это называется принуждением. Например, использование оператора + для строки и числа приведет к преобразованию этого числа в строку, что приведет к тому, что строка «55» будет возвращена вторым вызовом функции.

Следует отметить еще кое-что. Первые четыре раза мы вызывали bottleCapper function, мы передавали примитивные значения в качестве аргументов. В последних трех строках мы пропустили:

  • пустой объект: bottleCapper( {} )
  • пустой массив: bottleCapper( [] )
  • вызов той же функции: bottleCapper(bottleCapper(“bottle”, “cap”))

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

Редакция: определение, присвоение имен и запуск функций

На следующем изображении мы выделили различные разделы нашей функции bottleCapper и вызова функции слева. Справа мы написали «перевод» с JavaScript на «язык диаграмм нашей машины».

Повторюсь, сырье, которое «ожидает» машина, называется ПАРАМЕТРЫ.

Фактическое сырье, которое мы «скармливаем» машине при запуске, называются АРГУМЕНТАМИ.

Параметры указываются в ОПРЕДЕЛЕНИЕ ФУНКЦИИ.

Аргументы передаются функции, когда МЫ ЗАПУСКАЕМ.

Именование функций в JavaScript

Название функции отвечает на вопрос: Что она делает?

Рассмотрим следующие определения функций:

function sparky() {}
function johnDoe() {}
function combineTwoThings {}

Название функции должно быть кратким и описательным:

function joinTwoStrings(first, second)

В случае сомнений отдайте предпочтение ясности, а не краткости.

Выводы

На основании всего вышеизложенного можно сделать некоторые выводы. Стоит перечислить их, хотя некоторые из этих выводов могут быть не совсем понятными на данном этапе (информационная перегрузка!):

  1. JavaScript имеет динамическую типизацию (т.е. «слабо типизирован»), потому что, помимо прочего, функции при вызове действительно запускают код, независимо от того, какой тип данных мы передаем в качестве аргументов. В некоторых других статически типизированных языках дело обстоит иначе. Такие языки выдают ошибку и отказываются запускаться, когда мы пытаемся запустить их функции с аргументами с неожиданными типами данных.
  2. Мы можем передать любое значение в качестве аргумента при запуске функции.
  3. В JavaScript, если значение не является примитивом, это объект.
  4. Параметр функции действует как «слот», который будет получать определенное значение при вызове функции (параметры - это слоты, аргументы - это определенные значения).
  5. То, как мы называем функцию и какие имена мы даем нашим параметрам, важно для людей. Компьютерам все равно (пока мы едины, то есть используем одно и то же имя для определения и вызова одной и той же функции).
  6. Принуждение - это процесс JavaScript, который автоматически изменяет тип данных определенного значения, чтобы он мог выполнять значимую операцию с переменными разных типов.

Понравилась статья? Вам нравится то, что вы узнали? Затем купите книгу и избавьтесь как минимум от 1000 часов страданий с помощью основных концепций.



Лучший способ изучить JavaScript
Избавьтесь от 1000 часов проб и ошибок! Перестань чувствовать себя подавленным! Эта книга перенесет вас с… leanpub.com



Книга все еще пишется, поэтому я провожу распродажу за 9 долларов США для первых 100 покупателей.

После продажи первых 100 копий я поднимаю цену.

Когда книга будет завершена в начале марта, она будет продана за 29,99 долларов США.