Как достать переменную из функции javascript
Перейти к содержимому

Как достать переменную из функции javascript

  • автор:

как вернуть значение из функции js

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

Пример ниже показывает функцию, которая возвращает значения типа boolean . Такие функции называются предикатами.

function isHero(person)  return person.name === 'Harry Potter'; > const person = 'Huge Plotter'; isHero(person); // false 

Замыкание JavaScript

Переменные JavaScript могут относиться к локальной или к глобальной области видимости.

Глобальные переменные можно при помощи замыкания сделать локальными.

Замыкание — это функция, у которой есть доступ к родительской области видимости, даже тогда, когда родительская функция была закрыта.

Глобальные переменные

У функции есть доступ ко всем переменным, определенным внутри данной функции. Как здесь:

 function myFunction()

Но у функции также есть доступ и к переменным, определенным за ее пределами. Как здесь:

 var a = 4; function myFunction()

В последнем примере a — это глобальная переменная.

В веб-странице глобальные переменные принадлежат глобальному объекту window.

Глобальные переменные могут использоваться (и изменяться) всеми скриптами на странице (и в окне браузера).

В первом примере a — это локальная переменная.

Локальные переменные могут использоваться только внутри функции, где они определяются. Они скрыты от других функций и других скриптов.

Глобальные и локальные переменные с одинаковыми именами — это разные переменные. Изменение значения одной не меняет значение другой.

Внимание! Переменные, определенные без ключевого слова var, всегда будут глобальными. Даже если они определены внутри функции.

Время жизни переменной

Глобальные переменные существуют пока существует ваше приложение (окно браузера/веб-страница).

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

«Дилемма счетчика»

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

Для этого вы могли бы использовать глобальную переменную и функцию, которая будет увеличивать счетчик:

 var counter = 0; function add() < counter += 1; >add(); add(); add(); // теперь счетчик counter равен 3 

Счетчик counter должен изменяться только функцией add().

Проблема состоит в том, что любой скрипт на странице может изменять переменную counter, не вызывая функцию add().

Если же декларировать переменную counter внутри функции, то никто не сможет изменить ее не вызвав функцию add():

 function add() < var counter = 0; counter += 1; >add(); add(); add(); // теперь counter должен быть равен 3, но это не работает ! 

Но это не будет работать! Всякий раз, когда вызывается функция add(), переменная counter будет устанавливаться в 1.

Решить это может внутренняя функция JavaScript.

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

У всех функций есть доступ к глобальной области видимости.

На деле это означает, что у всех функций JavaScript есть доступ к области видимости «над» ними.

JavaScript поддерживает вложенные функции. У вложенных функций тоже есть доступ к области видимости «над» ними.

В следующем примере внутренняя функция plus() имеет доступ к переменной counter, расположенной в родительской функции:

 function add() < var counter = 0; function plus() < counter += 1; >plus(); return counter; > 

Это могло бы решить «дилемму счетчика», если бы у нас был бы доступ к функции plus() из вне.

К тому же нам нужно найти способ выполнить counter = 0 один раз.

Нам нужно замыкание.

Замыкание JavaScript

Помните самовызываемые функции? Что делает такая функция?

 var add = (function () < var counter = 0; return function () < return counter += 1; >>)(); add(); add(); add(); // теперь переменная counter равна 3 

Объяснение примера

Переменной add присваивается значение returnсамовызываемой функции.

Самовызываемая функция выполняется только один раз. Она устанавливает переменную counter в ноль (0) и возвращает результат вычислений вложенной функции.

При таком способе переменная add становится функцией. Здесь замечательно то, что она может получить доступ к переменной counter в родительской области видимости.

Это называется замыкание JavaScript. Это позволяет функции иметь «частные» переменные.

Переменная counter защищена областью видимости анонимной функции и может быть изменена только при помощи функции add.

Функция как тип данных

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

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

  1. Кратко
  2. Как понять
    1. Хранение функции в переменной
    2. Передача функции в вызов другой функции
    3. Возвращение функции как результат вызова
    1. Николай Лопин советует

    Обновлено 20 декабря 2021

    Кратко

    Скопировать ссылку «Кратко» Скопировано

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

    Технически, функция — это объект JavaScript, у которого есть внутренний метод Call ( ) , который добавляет возможность вызова функции.

    Если вы хотите узнать о синтаксисе функций, читайте статью function .

    Как понять

    Скопировать ссылку «Как понять» Скопировано

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

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

    О функции удобно думать как об объекте, который поддерживает операцию вызова.

    Хранение функции в переменной

    Скопировать ссылку «Хранение функции в переменной» Скопировано

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

     const answer = function()  console.log('42!')> answer()// 42! const answer = function()  console.log('42!') > answer() // 42!      

    Можно сохранять в переменную и функцию, объявленную другим способом. При этом оба имени функции будут работать:

     function answerNumber()  console.log('42!')> const answer = answerNumber answerNumber()// 42!answer()// 42! function answerNumber()  console.log('42!') > const answer = answerNumber answerNumber() // 42! answer() // 42!      

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

     const answer = function()  console.log('42!')> const answerNumber = answerconst fn = answer const answer = function()  console.log('42!') > const answerNumber = answer const fn = answer     

    Передача функции в вызов другой функции

    Скопировать ссылку «Передача функции в вызов другой функции» Скопировано

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

    Например, функция, которая может выполнить произвольную операцию между двумя числами. Два числа хранятся внутри функции, а операция, которую нужно выполнить, передаётся при вызове:

     function performOperation(operation)  const a = 10 const b = 99 return operation(a, b)> const sum = performOperation(function(one, two) < return one + two >)console.log(sum)// 109 const result = performOperation(function(num1, num2) < return num1 ** (num1 / num2)>)console.log(result)// 1.2618568830660204 function performOperation(operation)  const a = 10 const b = 99 return operation(a, b) > const sum = performOperation(function(one, two)  return one + two >) console.log(sum) // 109 const result = performOperation(function(num1, num2)  return num1 ** (num1 / num2)>) console.log(result) // 1.2618568830660204      

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

    Функции, которые ожидают получить другую функцию в качестве параметра — стандартное явление в JavaScript. Даже встроенные методы, такие как for Each ( ) и filter ( ) используют этот подход.

    Функции, которые принимают другие функции или возвращают их как аргумент, называются функциями высшего порядка. Такие функции позволяют писать на JS в функциональном стиле.

    Другой случай использования — колбэки в асинхронном коде. Иногда необходимо выполнить операцию после того, как закончится какое-то действие. Например, когда пользователь кликнет на кнопку. В этом случае используется метод add Event Listener ( ) , который принимает имя события и колбэк, который нужно вызвать при его наступлении:

     document.getElementsByTagName('button')[0].addEventListener('click', function()  console.log('пользователь кликнул!')>) document.getElementsByTagName('button')[0].addEventListener('click', function()  console.log('пользователь кликнул!') >)      

    Возвращение функции как результат вызова

    Скопировать ссылку «Возвращение функции как результат вызова» Скопировано

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

     function lazySum(a, b)  return function()  return a + b >> function lazySum(a, b)  return function()  return a + b > >      

    Здесь очень легко запутаться во вложенности. При вызове lazy Sum ( ) мы передаём два аргумента. Эти аргументы не используются тут же — мы создаём новую функцию, которая складывает два числа и возвращаем её. После вызова lazy Sum ( ) мы можем сохранить эту функцию в переменную и использовать её, когда нужно:

     const performSum = lazySum(99, 1)console.log(performSum)// function lazySum() console.log(performSum())// 100 const performSum = lazySum(99, 1) console.log(performSum) // function lazySum() console.log(performSum()) // 100      

    Обратите внимание, что значения параметров a и b остаются доступны внутри вложенной функции. Эта особенность связана с контекстом выполнения и лексическим окружением функции. Такой подход также активно используется при разработке на JavaScript.

    На практике

    Скопировать ссылку «На практике» Скопировано

    Николай Лопин советует

    Скопировать ссылку «Николай Лопин советует» Скопировано

    �� Чтобы понять, что в переменной хранится функция, достаточно воспользоваться оператором typeof — для функций он возвращает строку ‘function’ :

     const answer = function()  console.log('42!')> console.log(typeof answer)// 'function' const answer = function()  console.log('42!') > console.log(typeof answer) // 'function'      

    �� Так как функция технически является объектом, то у функции есть свойства и методы. Например, свойство length вернёт количество параметров функции:

     const answer = function()  console.log('42!')> console.log(answer.length)// 0 const sum = function(a, b)  return a + b> console.log(sum.length)// 2 const answer = function()  console.log('42!') > console.log(answer.length) // 0 const sum = function(a, b)  return a + b > console.log(sum.length) // 2      

    �� Функциям можно добавлять свойства как обычным объектам. Такой код встречается редко, но не удивляйтесь, если увидите:

     const calc = function() <> calc.type = 'numbers' console.log(calc.type)// numbers const calc = function() > calc.type = 'numbers' console.log(calc.type) // numbers      

    Вытащить переменную из функции Javascript

    Не получается вытащить значение переменной из функции, всё время выводится ошибка Uncaught ReferenceError: devuuid_raw is not defined Задача такая: нужно вывести значение переменной за пределы функции, т.к далее значение переменной будет посылаться через другую функцию на сервер. Код:

     document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() < console.log("Device is ready"); var element = document.getElementById('devProps'); devuuid_raw = device.uuid; return devuuid_raw; element.innerHTML = 'Идентификатор устройства: ' + device.uuid + '
    '; > var devuuid = devuuid_raw;

    Отслеживать
    задан 13 апр 2014 в 14:00
    red_sensor red_sensor
    25 2 2 серебряных знака 7 7 бронзовых знаков

    1 ответ 1

    Сортировка: Сброс на вариант по умолчанию

    Вы абсолютно не понимаете, как работает JavaScript. Рекомендую почитать «Книгу с носорогом». Три грубейшие ошибки:

    1. Код после инструкции return (он не выполнится)
    2. Объявление переменной без ключевого слова var
    3. Непонимание того, что на момент выполнения этой строки: var devuuid = devuuid_raw;

    onDeviceReady еще не сработал.

    Отслеживать
    ответ дан 13 апр 2014 в 14:24
    2,391 2 2 золотых знака 18 18 серебряных знаков 23 23 бронзовых знака

    Спасибо за ответ, return я изначально не ставил, так посоветовали сделать на другом форме, что для меня тоже показалось странным, переменную без var я объявил глобально, в надежде что она будет видна за пределами функции, но увы она не видна. Насчет «onDeviceReady еще не сработал.» не понимаю, а когда он сработает? Нужно ли объявить переменную по-другому?

    13 апр 2014 в 14:35

    он сработает в функции onDeviceReady() , вы можете вызвать из нее другую. это называется асинхронное выполнение. для понимания медитируйте на вот такой код: var a=0; setTimeout(setA,1000); //одноразовое событие таймера, через 1с function setA() < a=1; >console.log(a); //0

    13 апр 2014 в 14:43

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

    13 апр 2014 в 15:59

    так var a=0; setTimeout(setA,1000); //одноразовое событие таймера, через 1с function setA() < a=1; showA(); >function showA() < console.log(a); //1 >

    13 апр 2014 в 16:22

    подобный вариант пробовал, в том то и дело нужно обойтись без второй функции, а сделать как у вас здесь: var a=0; setTimeout(setA,1000); //одноразовое событие таймера, через 1с function setA() < a=1; >console.log(a); //0 только чтобы в итоге вывелось 1 т.е чтобы в итоге переменная а была по за функцией и была равна 1 (какое значение ей было задано в функции, такое же должно быть в этой переменной и вне функции)

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

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