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

JavaScript функции

От автора: приветствую вас, друзья. В этой статье мы с вами продолжим изучение такой важной темы, как пользовательские функции в 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. Удачи!

Курс по JavaScript: основы

Изучите JavaScript с нуля до результата!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree