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

Скачать исходники для статьи можно ниже

1. Через function объявление.

Первый и самый очевидный способ объявить функцию в JavaScript – это использовать function объявление. Именованная функция multiply(), которая принимает два параметра x и y, умножая их, возвращает значение, может быть реализована со следующим синтаксисом:

function multiply(x,y) {
  return x * y;
}

console.log( multiply(2, 2) );
// output: 4

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

2. Через выражения.

Та же функция может быть записана как выражение, которое явно задает переменную:

const multiply = function(x,y) {
  return x * y;
}

console.log( multiply(2, 2) );
// output: 4

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

3. Объектный метод.

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

const mathLib = {

  // property
  PI: 3.14,

  // multiply(x,y) method
  multiply: function(x, y) {
    return x * y;
  },

  // divide(x,y) method
  divide: function(x, y) {
    return x / y;
  }

}

console.log( mathLib.multiply(2, 2) );
// output: 4

Опять же, этот объектный метод может быть вызван только после того, как он был определен.

4. Через функции со стрелками.

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

const multiply = (x, y) => { return x * y; };

console.log( multiply(2, 2) );
// output: 4

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

const multiply = (x, y) => x * y;

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

const square = x => x ** 2;

Хотя скобки все еще требуются для одного параметра:

const estimatePI = () => 22 / 7;

Функции стрелок автоматически присваивают this значение в непосредственной внешней области видимости, поэтому нет необходимости использовать .bind(this) его .

5. Через функцию jQuery

jQuery – это библиотека JavaScript, поэтому создание функций-это почти то же самое. Однако функциональность jQuery может быть расширена путем добавления собственных пользовательских методов. jQuery.fn.extend() метод расширяет объект jQuery prototype ($.fn), так что новая функциональность может быть привязана к основной jQuery() функции.

Например, следующий код определяет методы new check и uncheckjQuery для изменения полей ввода checkbox:

jQuery.fn.extend({

  // check checkboxes
  check: function() {
    return this.each(function() {
      this.checked = true;
    });
  },

  // uncheck checkboxes
  uncheck: function() {
    return this.each(function() {
      this.checked = false;
    });
  }

});

// check all checkboxes on the page
$( "input[type='checkbox']" ).check();

PS: Красивых и прибыльных Вам сайтов!