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

Синтаксис

Способов объявления функций в JavaScript предостаточно, начнем с самого “старого”.

function myAwesomeFunction(foo) {
	return foo;
} 

myAwesomeFunction - имя нашей функции. foo - имя входной переменной. Ключевое слово return используется для прерывания выполнения функции и возвращения значения из функции. В текущем случаем возвращается значение переменной foo.

Анонимные функции

В данном примере объявляется анонимная функция без указания имени и присваевается переменной.

const f1 = function() {
	// …
};

Анонимные функции хорошо использовать тогда когда их имя не нужно, а такие ситуации бывают например когда в другую функцию надо передать свою функцию. Например.

function f(g) {
  return g();
} 

let g = function() { console.log(5) };   
f(g);

Стрелочные функции

Можно объявлять функции еще короче и в этом нам помогут стрелочные функции.

let sum = (a,b) => a + b;  

Стрелочные функции так же могут быть многострочными

let sum = (a, b) => {
	console.log(‘sum of a, b');
	return a + b;
} 

Параметры

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

let sayHi = (message = “World") => {
	console.log(`Hello ${message}`);
};

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

sayHi(“Anna”); // -> Hello Anna
sayHi(); // -> Hello World

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

let sum = (a,b,c) => a + b + c;
let values = [1,2,3];
sum(…values);	// -> 6 

Кроме этого можно еще воспользоваться деструктаритзацией при определение параметров функции.

const f = ({name = ‘Artem', city = ‘Moscow’}) = {
	return `Hello ${name}` from ${city}`;
};

f({name: “Jimmy”, city: “London"});

Возвращаемое значение

Как мы уже разобрались, ключевое слово return прерывает выполнение функции и возвращает единственное значение. Если оно не будет вызвано то после выполнения блок действий, функция вернет undefined. Иногда нужно вернуть больше чем одно значение. Для таких случаев отлично помогает деструктаризация. Функция может вернуть массив или объект, а вызывающая сторона сможет легко их разобрать. Рассмотрим примеры.

let f1 = () => [’Artem’, 20, ‘Moscow’];
const [name, age, city] = f1();  

let f1 = () => {name: ’Artem’, age: 20, city: ‘Moscow’};
const [name, ge, city} = f1();  

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

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

const f1 = () => {
	const nestedF = () => {};
	nestedF();
};

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

Ключевое слово this

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

const test = {
  prop: 42,
  func: function() {
    return this.prop;
  },
};

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

В следующей статье…

В следующей статье мы окунемся в объектно-ориентированное программирование и рассмотрим прототипы.