JavaScript функції. Частина 4

41

Від автора: вітаю вас, друзі. У цій статті ми з вами продовжимо вивчення такої важливої теми, як користувальницькі функції JavaScript. Саме завдяки можливості створювати власні функції, ми можемо писати більш гнучкий і красивий код. У статті ми торкнемося теми області видимості змінних і дізнаємося про такі поняття, як глобальні та локальні змінні.

Давайте почнемо з найпростішого коду, в якому опишемо якусь функцію. Ця функція буде присвоювати якесь значення змінної і повертати цю саму змінну. Ну і спробуємо викликати цю функцію, щоб отримати доступ до змінної:

function test(){
var a = ‘Значення змінної’;
return a;
}
test();
alert(a);

Якщо зараз запустити цей код, то ми не побачимо очікуваний результат. Ніякого модального вікна alert немає? Якщо немає модального вікна, тоді логічно припустити, що в коді є помилка. Ну що ж, давайте відкриємо консоль браузера і перевіримо, чи є помилка.

Точно, є помилка. Текст помилки повідомляє нам, що ми звертаємося до невизначеної змінної a… Як же так? — запитаєте ви, — Адже ми оголосили цю змінну функції і викликали функцію.

Ось тут ми і торкнемося питання області видимості. Отже, область видимості всередині функції є локальною, поза функції — глобальної. Відповідно, всі змінні, оголошені всередині функції, будуть локальними, поза функції — глобальними.

Локальна область видимості і локальні змінні, створені в цій області видимості, доступні тільки в цій області видимості. Простіше кажучи, змінні, створені всередині функції, доступні тільки самої функції і поза функції ми не можемо звертатися до них.

У той же час, глобальні змінні доступні як функції поза, так і всередині неї. Давайте спробуємо оголосити змінну поза функції, а потім використовувати її всередині функції.

var a = 10;
function test(){
a += 5; // збільшуємо значення змінної
return a;
}
console.log(‘Значення перменной до виклику функції:’ + a);
test();
console.log(‘Значення перменной після виклику функції:’ + a);

Тут замість команди alert ми використовували команду console.log, яка набагато більш зручна в налагодження коду. Як ви вже, напевно, здогадалися, console.log виводить щось в консоль. В даному випадку ми вивели в консоль значення змінної до виклику функції і після. Заглянемо в консоль:

Як бачимо, функції видно глобальна змінна і функція може без проблем змінити значення такої змінної. не забувайте про це, щоб випадково не змінити значення глобальної змінної. Якщо вам не потрібно працювати всередині функції з глобальної змінної, тоді завжди оголошуйте всередині функції змінну через var, тим самим ми робимо змінну локальною, тобто належить виключно функції. І приклад, що пояснює слова вище:

var a = 10; // глобальна змінна
function test(){
var a = 15; // локальна змінна
console.log(‘Значення локальної перменной функції:’ + a);
}
console.log(‘Значення перменной до виклику функції:’ + a);
test();
console.log(‘Значення перменной після виклику функції:’ + a);

Як бачимо, і поза функції, і всередині функції використовується змінна з однаковим ім’ям. Однак, ці змінні не перетинаються, оскільки всередині функції з допомогою var ми оголосили локальну змінну, яка ніяк не впливає на глобальну. Ну а в глобальній області видимості наша змінна не змінилася ні до, ні після виклику функції.

На цьому ми завершимо цю статтю. Якщо ви хочете більше дізнатися про JavaScript, тоді рекомендую звернути свою увагу на уроки по JavaScript і окремий курс по мові JavaScript. Удачі!