Функции Javascript

В рамках моей заключительной оценки в школе Flatiron меня попросили написать сообщение о функциях Javascript. Я собираюсь дать обзор функций в целом, а затем пойти немного дальше в описании стрелочных функций. Я знаю, что это исследование действительно помогло мне лучше их понять, и, надеюсь, оно будет полезно и для вас.

Функции Javascript - это блок кода, который вы используете для выполнения задачи или вычисления значения. Чтобы код считался функцией, он должен принимать входные данные и производить выход, в котором существует очевидная связь. Это отлично подходит, когда нам нужно выполнить одно и то же действие в нескольких местах нашего приложения. Возможность многократного вызова кода без повторения и в качестве структуры более крупных программ может быть незаменимой.

Есть два разных способа создать функцию. Существуют определения функций (которые также можно назвать объявлением или оператором функции) и выражения функций. Определение javascript состоит из трех вещей:

• Имя функции.
• Список параметров, заключенный в круглые скобки и разделенный запятыми.
• Операторы, определяющие функцию, заключены в фигурные скобки, {...}.

function add(number1,number2){
return number1 + number2
}

Затем вы вызываете или вызываете функцию следующим образом:

add(4, 6;)
10

Другой способ создать функцию - использовать выражение функции. Они немного отличаются от определения в том, что они могут быть анонимными, у них не обязательно должно быть имя. У них может быть имя, что может упростить отслеживание в стеке отладчика.

const add = function(number1, number2) {return number1 + number2}
let x = add(4,6) //x gets the value of 10
const add = function addUp(number1, number2) {return number1 + number2}
let x = add(5,6) //x gets the value of 11

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

Теперь я немного расскажу о стрелочной функции. Что было вызвано ES6. На этом сайте есть примеры всех изменений, внесенных ES6, а также сравнивается отличие от ES5. Разработчики javascript хвалят стрелочные функции за их краткий синтаксис, область видимости и эту привязку. Некоторые компании, например конфигурация eslint Airbnb, требуют ее использования для всех анонимных функций. При этом у него есть свои недостатки. Вот список основных:

• Не имеет собственных привязок к this или super и не должен использоваться как methods.
• Не содержит ключевых слов arguments или new.target.
• Не подходит для методов call, apply и bind, которые обычно полагаются на создание scope.
• Не может использоваться как constructors.
• Не может использовать yield внутри своего тела.

Самым большим преимуществом Arrow Funtcions является удаление ключевого слова function, которое я почти всегда ошибаюсь (что вы, вероятно, не заметили в начале этого абзаца). Благодаря функциям стрелок он позволяет достичь того же результата с меньшим количеством нажатий клавиш. Вот некоторые из основных синтаксисов стрелочных функций:

1. С одним параметром и возвращение простого выражения не требуется.

params => expression

2. Требуются круглые скобки с несколькими параграфами, но если по-прежнему возвращать выражение не требуется.

(param1, param2) => expression

3. Многострочные операторы требуют фигурных скобок и возврата.

param => {
  let a = 1;
  return a + param1;
}

4. Для нескольких параметров требуются круглые скобки, для многострочных - фигурные скобки.

(param1, param2) => {
  let a = 1;
  return a + param1;
}

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

Еще одно различие между стрелками и традиционными функциями - это обработка this. В традиционной функции это относится к окну, тогда как в стрелочной функции это относится к области, в которой оно было создано. Вот примеры как традиционных, так и стрелочных функций в отношении этого:

Традиционный:

window.age = 10; // <-- notice me?
function Person() {
  this.age = 42; // <-- notice me?
  setTimeout(function () { // <-- Traditional function is executing on the window scope
    console.log("this.age", this.age); // yields "10" because the function executes on the window scope
  }, 100);
}

var p = new Person();

Стрелка:

window.age = 10; // <-- notice me?
function Person() {
  this.age = 42; // <-- notice me?
  setTimeout(() => { // <-- Arrow function executing in the "p" (an instance of Person) scope
    console.log("this.age", this.age); // yields "42" because the function executes on the Person scope
  }, 100);
}

var p = new Person();

Вы видите, что в традиционной функции журнал равен «10», потому что это относится к window.age, которое устанавливается вне функции. В то время как стрелочная функция, журнал - это «42», который задается внутри функции, и именно здесь стрелочные функции берут this.

Небольшой анекдот о явном и неявном. В детстве моя бабушка всегда расстраивалась, когда люди что-то для нее не делали. Наш ответ всегда был бы таким, что мы не знали, что она хотела, чтобы мы сделали это, потому что она никого не просила. Она всегда отвечала, что мне не нужно спрашивать, что всегда заканчивалось коллективным фейспалмом от всех в этом районе. Как это связано со стрелочными функциями Javascript? Что ж, я рада, что вы спросили. Когда дело доходит до стрелочных функций, есть два разных способа получить возврат, в основном они основаны на том, как вы пишете свою функцию. Основное различие заключается в том, есть ли в вашей функции слово return. Имя для неявного возврата - это тело блока, а имя для явного возврата - это краткое тело.

Неявный возврат работает только тогда, когда у вас одна строка и не используются фигурные скобки.

params => expression
(param1, param2) => expression

Явный возврат работает при использовании фигурных скобок.

param => {
  let a = 1;
  return a + param1;
}
(param1, param2) => {
  let a = 1;
  return a + param1;
}

Надеюсь, это базовое погружение в функции javascript было полезным. Это определенно дало мне лучшее понимание функций и различий между ними. Я поместил ссылки на ресурсы, которые использовал при исследовании этого сообщения. Я рекомендую вам просмотреть документацию. Это намного глубже, чем имеет смысл для этого поста.

ИСТОЧНИКИ: