Първи стъпки в JavaScript — Функции

Една от основните цели в програмирането е елиминирането повторение на код. Това е като критерий за качествен код.

Това можем да постигнем като извлечем кода си във функция. Тази функция можем да извикаме многократно при нужда. Нека разгледаме следния код, а после ще обясним какво прави той:

function showCorrect() {
	alert('Правилно!');
}

function showError() {
	alert('Грешка!');
}

var a = 5;
var b = 10;
var c = 15;

if (a < b) {
	showCorrect();
} else {
	showError();
}

if (b < c) {
	showCorrect();
} else {
	showError();
}

if (a < c) {
	showCorrect();
} else {
	showError();
}

Дефиниране на функции

В началото на скрипта дефинираме две функции. Използваме ключовата дума function последвана от името на функцията. След това пишем кръгли/малки скоби, където изреждаме аргументите на функцията. За тях ще говорим по-късно.

С фигурните/големите скоби след това ограждаме тялото на функцията. Тялото съдържа кода, който искаме да се изпълни при извикване на функцията.

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

В случая функциите showCorrect() и showError(), не вършат много работа. Не само защото не изпълняваме много действия в тялото им, а просто защото винаги извършват едно и също. В някои случаи бихме искали функцията да обработи дадена променлива по един и същи начин. Крайният резултат би бил различен поради факта, че обработваме различни променливи. Тези променливи се наричат аргументи.

Ето един кратък пример за сумиране на елементи от масив с числа:

function sum(sumArray) {
	var sum = 0;
	
	for (var i in sumArray) {
		sum += sumArray[i];
	}
	
	alert(sum);
}

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var b = [2, 4, 6, 8, 10];
var c = [3, 6, 9, 12, 15, 18];

sum(a);
sum(b);
sum(c);

В случая извикваме функцията sum три пъти. Всеки път подаваме три различни масива, като аргумент.

При дефинирането на функцията sum ние задаваме, че тази функция приема аргумент myArray. Стойността му е достъпна под формата на променлива вътре във функцията.

Обхват на променливи (variable scope)

Ключово е “вътре във функцията”. Това намесва обхватът на променливите (variable scope).

В JavaScript, ако една променлива е инициализирана вътре във функция тя може да се използва само в дадената функция. Ако се опитам да използвам променливата myArray извън функцията sum тя няма да съществува. По същия начин само във функцията можем да използваме и променливата със същото име — sum.

В тялото на функцията използваме for in цикъл. С него обхождаме всички елементи в масива. За всеки от тях добавяме стойността му към sum. След прибавяне на последния елемент имаме сумата на всички елементи.

Връщане на стойност с return

Какво обаче, ако искаме да използваме стойността на тази сума по друг начин? Показването с alert() е само една опция. Можем да използваме return:

function sum(sumArray) {
	var sum = 0;
	
	for (var i in sumArray) {
		sum += sumArray[i];
	}
	
	return sum;
}

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var sumA = 0;
sumA = sum(a);
alert(sumA);

Вместо да показваме сумата с alert() ние я връщаме с return. Това означава, че можем да присвоим резултатът от функцията на променлива. Това правим със sumA = sum(a).

Можем например да пресметнем и сумата от сумите на няколко масива:

function sum(sumArray) {
	var sum = 0;
	
	for (var i in sumArray) {
		sum += sumArray[i];
	}
	
	return sum;
}

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var b = [2, 4, 6, 8, 10, 12, 14, 16, 18];
var c = [3, 6, 9, 12, 15, 18, 21, 24, 27];

totalSum = sum(a) + sum(b) + sum(c);

alert(totalSum);