Перейти к основному содержимому

Функции

В JS функции по сути являются объектами.

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

Ф. не следует сильно перегружать логигой, они должны решаться конкретные повторяющиеся задачи (KISS).

Синтаксис​

function name(parametr1, parament2, ..., paramentN) {
  // function body (тело функции) хранит выполняемый код
  return 'something';
}

// вызов функции
name();

Нейминг​

Если переменная - это существительное, то переменная - это глагол, действие. Общее правило - в НАЗВАНИИ ФУНКЦИИ должен находитьтся глагол, описывающий то, что функция делает:

  • get - возвращают значение
  • calc - что-то вычисляют
  • create - что-то создают
  • show - что-то показывают
  • check - что-то проверяют и возвращают логическое значение

Варианты записи​

Классическая запись (Function declaration)​

  • Нужно именовать функцию.
  • Вызывать такую функцию можно из любого места, даже до объявления (только при такой записи)
function summ(a, b) {
  return a + b;
}

summ; // вернется код функции - ошибки не будет
summ(1, 2); // 3
// Будет ошибка - нужно имя
// SyntaxError: Function statements require a function name
function(a, b) {
  return (a + b);
};

Запись через переменную (Function expression)​

  • При такой форме записи имя на себя берет переменная, а функцию уже именовать не нужно.
  • ; в конце
  • Вызывать можно только после объявления
const summ = function (a, b) {
  return a + b;
};

summ(1, 2); // 3

Стрелочная запись (ES6 - Arrow function)​

  • Упрощенный синтаксис ES6 без ключевого слова function.
  • Если запись идет в одну строчку, то ключевое слово return можно опустить
  • Если параметр только один, то круглые скобки можно не вставлять
  • Вызывать нужно только после объявления
// два параметра - скобки нужны
const summ = (a, b) => a + b;

summ(1, 2); // 3
// один параметр - скобки не нужны
const greeting = name => console.log(`Hello, ${name}!`);

greeting('John'); // 'Hello, John!'

Сохранение результата в переменную​

Также результат выполнения функции можно сохранять в переменные.

const greeting = name => {
  console.log(`Hello, ${name}!`);
};

const a = greeting('John');
const b = greeting;

// вызов переменных
a; // 'Hello, John!'
b('Jack'); // 'Hello, Jack!'

Возвращение объекта​

// function statament
function obj1() {
  return {
    a: 1,
    b: 2,
  };
}
// function expression
const obj2 = function () {
  return {
    a: 1,
    b: 2,
  };
};
// arrow function
const obj6 = () => {
  return { a: 1, b: 2 };
};

Сокращенная запись​

// ТАК НЕЛЬЗЯ - БУДЕТ ОШИБКА (так как {} будут восприниматься как тело функции)
const obj3 = () => { a: 1, b: 2 };
// чтобы ошибки не было нужно обернуть возвращаемое выражение в ()
const obj4 = () => ({ a: 1, b: 2 });

// Можно даже делать такую запись на несколько строк
const obj5 = () => ({
  a: 1,
  b: 2,
});

Возвращение массива​

// function statament
function arr1() {
  return [1, 2];
}
// function expression
const arr2 = function () {
  return [1, 2];
};
// arrow function
const arr3 = () => {
  return [1, 2];
};

// ТАК МОЖНО, так как [] уже воспринимаются как массив
const arr4 = () => [1, 2];

Добавление условий в шорткат запись​

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

Если условие трушное будет возвращаться правая часть, если нетрушное, то false.

const cond1 = () =>
  true && {
    a: 1,
    b: 2,
  };

const cond2 = () => false && [1, 2];

Параметры​

  • Это своего рода объявленные локальные переменные внутри тела функции.
  • Лучше не использовать большое количество параметров - потом будет сложно отслеживать, поддерживать и актуализировать.
  • до 4-х параметра - оптимально, 5 - уже много
  • Параметры можно вообще не передавать, а оставлять круглую скобку пустой.
// Функция c параметроv
function greeting(name) {
  console.log(`Hello, ${name}!`);
}

// вызов функции с параметром
greeting('John'); // 'Helllo, John!'

// можно при вызове не указывать параметр - будет undefined
greeting(); // 'Helllo, undefined!'
// Функция без параметров
function returnConsole() {
  console.log('Something');
}

returnConsole(); // 'Something'

Параметры по умолчанию​

  • Можно использовать для любых вариантов записей функций
  • В стрелочной записи с одним параметром нужны круглые скобки, если есть параметр по умолчанию.
const greeting = (name = 'User') => {
  console.log(`Hello, ${name}!`);
};

greeting(); // 'Hello, User!'

Объект arguments​

  • Можно посмотреть в теле функции все переданные аргументы.
  • arguments не работает со стрелочными функциями.
const greeting = function (name = 'User') {
  console.log('Hello ' + name);
  console.log(arguments);
};

greeting('Jack', 'Jack2', 'Jack3'); // 'Hello, User!'
// Arguments(3) ['Jack', 'Jack2', 'Jack3', callee: (...), Symbol(Symbol.iterator): ƒ]

return​

  • Как только js-интерпретатор доходит до return, выполнение функцим прекращается (код, который ниже не выполняется)
  • return нужно записывать в одну строку
  • return можно записывать без всего (можно использовать когда нужно прекратить работу функции)
function summ(a, b) {
  return console.log(a, b); // 1, 2
  a + b; // это сложение не выполнится
}

Вложенные функции​

Внутри объявленных функций можно создавать фложенные служебные функции для каких-либо операций

const someFunc = someString => {
  const stringToUpperCase = string => string.toUpperCase();

  if (typeof someString === 'string') {
    return console.log(stringToUpperCase(someString));
  } else {
    console.log('Передаётся не строка');
  }
};

someFunc('Hello, world!'); // 'HELLO, WORLD!'
someFunc(123); // 'Передаётся не строка'

Возврат функции из функции​

  • Лучше не создавать больших цепочек, чтобы было понятно не нужно использовать больше 2-х
  • Функции уровнем ниже - это возвращаемые анонимные функции, их именовать не нужно
  • Параметры, передаваемые на верхнем уровне будут доступны на нижних, при условии что внутренние функции не будут иметь такиих же одноименных параметров.
function someFunc(name) {
  return function () {
    return function () {
      console.log(name);
    };
  };
}

someFunc('Jack')()(); // 'Jack'
function someFunc(name) {
  return function (name) {
    return function () {
      console.log(name);
    };
  };
}

// Так как есть одноименный параметр у внутренней функции
someFunc('Jack')()(); // 'undefined'