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

Как вывести результат функции javascript

  • автор:

Как вывести результат в JavaScript (2 часть)

Как вывести результат в JavaScript (2 часть)

Для того, чтобы объявить в JavaScript переменную, пишут так:
var name;
где name – осмысленное название переменной, написанное латиницей
var multi_1; — мы объявляем переменную, говорим что у нас есть пустая ячейка

и туда надо что-то положить (присвоить).

Положим туда число, которые вводит пользователь. Переменной multi_1 присвоена запись, теперь в multi_1 лежит число, которое ввел пользователь.

Объявим вторую переменную и положим туда число, введенное пользователем во второй input.

var multi_2;
multi_2 = document.getElementById(‘inp_2’).value;

После введения в документ переменных, больше нет нужды писать длинные выражения, они будут написаны только один раз – первый. Заменим наше громоздкое выражение переменными. Вот так:

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

Также можно одновременно и объявлять переменную и присваивать ей значение. Эта запись

var multi_1 = document.getElementById(‘inp_1’).value;

равносильна этой записи.

var multi_1;
multi_1 = document.getElementById(‘inp_1’).value;

Нежелательно раскидывать объявление переменных по всему коду, можно перечислить все вводимые переменные через запятую в начале скрипта, добавляя их туда по ходу написания кода.

Такой подход, позволяет увидеть все переменные, прост в использовании и в дальнейшем будет использоваться для оптимизации работы скрипта.

Тип переменных

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

var test = ‘Hello baby’;

Операции с переменными

С переменными можно производить различные математические действия: сложение, вычитание, деление и.т.д.

var number1 = 10;
var number2 = 20;
alert(number1+number2);

Ошибки в переменной

Если значение переменной number1 оставить пустым, то в консоли разработчика или в окошке alert, появиться ошибка NaN – не число. Нельзя число 20 сложить неизвестно с чем и ждать результата.

При попытке просто вывода пустой переменной, мы увидим undefined. Это предупреждение, что содержимое ячейки number1 не определено. В консоли разработчика, можно видеть все ошибки по JavaScript, но бывает так, что ошибок нет, а скрипт не работает. В таком случае надо искать причину в HTML/CSS коде, других вариантов нет.

Вывод результата

После тега hr, добавим в HTML разметку span, куда выведется результат умножения двух чисел.

На данный момент результат мы видим только в окошке alert, но хотим увидеть его на странице в теге span.

function multi() var multi_1, multi_2;
multi_1 = document.getElementById(‘inp_1’).value;
multi_2 = document.getElementById(‘inp_2’).value;
alert(multi_1*multi_2);
>

Нам надо убедиться, что мы имеем дело с числами, поэтому сделаем проверку.

multi_1 = parseInt (multi_1);
multi_2 = parseInt (multi_2);

parseInt – это функция, которая проверяет содержимое input и если потребуется преобразование в число, то сделает это. Если пользователь случайно введет, число 10.5 или 10d, то функция сама обрежет до целого числа. Нам нужны числа, а не строки.Необходимо создать ещё одну переменную. назовем её result и присвоим значение умножения. В ячейке result будет храниться результат умножения двух чисел.

var result;
result = multi_1*multi_2;

Вернемся к тегу span, где планируется вывод результата умножения. Мне надо получить элемент span c id result_multi, мы получаем весь элемент span со всеми его свойствами.

Но мне нужно только одно значение, которое отвечает за то, что будет выводиться между парными тегами span, за это отвечает свойство innerHTML.

При выполнении этой команды, браузер найдет элемент с указанным id и внутри тега span, выведет значение переменной result.

Как получить input и вывести результат в JavaScript.

Перед начинающим веб-разработчиком не стоит вопрос – изучать или не изучать JavaScript. Вопрос лишь в том, как максимально эффективно это делать, чтобы после изучения, можно было бы легко применять свои полученные знания на практике? Дело в том, что я разработал уникальный видео-курс по JavaScript, с практической информацией, которую я использую в создании сайтов.

Создано 31.12.2018 10:30:00

  • Михаил Русаков
  • Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

    Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

    Порекомендуйте эту статью друзьям:

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

    1. Кнопка:
      Она выглядит вот так:
    2. Текстовая ссылка:
      Она выглядит вот так: Как создать свой сайт
    3. BB-код ссылки для форумов (например, можете поставить её в подписи):

    Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.

    Замыкания, функции изнутри

    Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

    Более новая информация по этой теме находится на странице https://learn.javascript.ru/closure.

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

    Лексическое окружение

    Все переменные внутри функции – это свойства специального внутреннего объекта LexicalEnvironment , который создаётся при её запуске.

    Мы будем называть этот объект «лексическое окружение» или просто «объект переменных».

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

    В отличие от window , объект LexicalEnvironment является внутренним, он скрыт от прямого доступа.

    Пример

    Посмотрим пример, чтобы лучше понимать, как это работает:

    function sayHi(name) < var phrase = "Привет, " + name; alert( phrase ); >sayHi('Вася');

    При вызове функции:

      До выполнения первой строчки её кода, на стадии инициализации, интерпретатор создаёт пустой объект LexicalEnvironment и заполняет его. В данном случае туда попадает аргумент name и единственная переменная phrase :

    function sayHi(name) < // LexicalEnvironment = < name: 'Вася', phrase: undefined >var phrase = "Привет, " + name; alert( phrase ); > sayHi('Вася');
    function sayHi(name) < // LexicalEnvironment = < name: 'Вася', phrase: undefined >var phrase = "Привет, " + name; // LexicalEnvironment = < name: 'Вася', phrase: 'Привет, Вася'>alert( phrase ); > sayHi('Вася');

    Тонкости спецификации

    Если почитать спецификацию ECMA-262, то мы увидим, что речь идёт о двух объектах: VariableEnvironment и LexicalEnvironment .

    Но там же замечено, что в реализациях эти два объекта могут быть объединены. Так что мы избегаем лишних деталей и используем везде термин LexicalEnvironment , это достаточно точно позволяет описать происходящее.

    Более формальное описание находится в спецификации ECMA-262, секции 10.2-10.5 и 13.

    Доступ ко внешним переменным

    Из функции мы можем обратиться не только к локальной переменной, но и к внешней:

    var userName = "Вася"; function sayHi() < alert( userName ); // "Вася" >

    Интерпретатор, при доступе к переменной, сначала пытается найти переменную в текущем LexicalEnvironment , а затем, если её нет – ищет во внешнем объекте переменных. В данном случае им является window .

    Такой порядок поиска возможен благодаря тому, что ссылка на внешний объект переменных хранится в специальном внутреннем свойстве функции, которое называется [[Scope]] . Это свойство закрыто от прямого доступа, но знание о нём очень важно для понимания того, как работает JavaScript.

    При создании функция получает скрытое свойство [[Scope]] , которое ссылается на лексическое окружение, в котором она была создана.

    В примере выше таким окружением является window , так что создаётся свойство:

    sayHi.[[Scope]] = window

    Это свойство никогда не меняется. Оно всюду следует за функцией, привязывая её, таким образом, к месту своего рождения.

    При запуске функции её объект переменных LexicalEnvironment получает ссылку на «внешнее лексическое окружение» со значением из [[Scope]] .

    Если переменная не найдена в функции – она будет искаться снаружи.

    Именно благодаря этой механике в примере выше alert(userName) выводит внешнюю переменную. На уровне кода это выглядит как поиск во внешней области видимости, вне функции.

    • Каждая функция при создании получает ссылку [[Scope]] на объект с переменными, в контексте которого была создана.
    • При запуске функции создаётся новый объект с переменными LexicalEnvironment . Он получает ссылку на внешний объект переменных из [[Scope]] .
    • При поиске переменных он осуществляется сначала в текущем объекте переменных, а потом – по этой ссылке.

    Выглядит настолько просто, что непонятно – зачем вообще говорить об этом [[Scope]] , об объектах переменных. Сказали бы: «Функция читает переменные снаружи» – и всё. Но знание этих деталей позволит нам легко объяснить и понять более сложные ситуации, с которыми мы столкнёмся далее.

    Всегда текущее значение

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

    Например, в коде ниже функция sayHi берёт phrase из внешней области:

    var phrase = 'Привет'; function sayHi(name) < alert(phrase + ', ' + name); >sayHi('Вася'); // Привет, Вася (*) phrase = 'Пока'; sayHi('Вася'); // Пока, Вася (**)

    На момент первого запуска (*) , переменная phrase имела значение ‘Привет’ , а ко второму (**) изменила его на ‘Пока’ .

    Это естественно, ведь для доступа к внешней переменной функция по ссылке [[Scope]] обращается во внешний объект переменных и берёт то значение, которое там есть на момент обращения.

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

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

    К примеру, вложенная функция может помочь лучше организовать код:

    function sayHiBye(firstName, lastName) < alert( "Привет, " + getFullName() ); alert( "Пока, " + getFullName() ); function getFullName() < return firstName + " " + lastName; >> sayHiBye("Вася", "Пупкин"); // Привет, Вася Пупкин ; Пока, Вася Пупкин

    Здесь, для удобства, создана вспомогательная функция getFullName() .

    Вложенные функции получают [[Scope]] так же, как и глобальные. В нашем случае:

    getFullName.[[Scope]] = объект переменных текущего запуска sayHiBye

    Благодаря этому getFullName() получает снаружи firstName и lastName .

    Заметим, что если переменная не найдена во внешнем объекте переменных, то она ищется в ещё более внешнем (через [[Scope]] внешней функции), то есть, такой пример тоже будет работать:

    var phrase = 'Привет'; function say() < function go() < alert( phrase ); // найдёт переменную снаружи >go(); > say();

    Возврат функции

    Рассмотрим более «продвинутый» вариант, при котором внутри одной функции создаётся другая и возвращается в качестве результата.

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

    Здесь мы будем создавать функцию-счётчик, которая считает свои вызовы и возвращает их текущее число.

    В примере ниже makeCounter создаёт такую функцию:

    function makeCounter() < var currentCount = 1; return function() < // (**) return currentCount++; >; > var counter = makeCounter(); // (*) // каждый вызов увеличивает счётчик и возвращает результат alert( counter() ); // 1 alert( counter() ); // 2 alert( counter() ); // 3 // создать другой счётчик, он будет независим от первого var counter2 = makeCounter(); alert( counter2() ); // 1

    Как видно, мы получили два независимых счётчика counter и counter2 , каждый из которых незаметным снаружи образом сохраняет текущее количество вызовов.

    Где? Конечно, во внешней переменной currentCount , которая у каждого счётчика своя.

    Если подробнее описать происходящее:

      В строке (*) запускается makeCounter() . При этом создаётся LexicalEnvironment для переменных текущего вызова. В функции есть одна переменная var currentCount , которая станет свойством этого объекта. Она изначально инициализуется в undefined , затем, в процессе выполнения, получит значение 1 :

    function makeCounter() < // LexicalEnvironment = < currentCount: undefined >var currentCount = 1; // LexicalEnvironment = < currentCount: 1 >return function() < // [[Scope]] ->LexicalEnvironment (**) return currentCount++; >; > var counter = makeCounter(); // (*)

    На этом создание «счётчика» завершено.

    Итоговым значением, записанным в переменную counter , является функция:

    function() < // [[Scope]] -> return currentCount++; >;

    Возвращённая из makeCounter() функция counter помнит (через [[Scope]] ) о том, в каком окружении была создана.

    Это и используется для хранения текущего значения счётчика.

    Далее, когда-нибудь, функция counter будет вызвана. Мы не знаем, когда это произойдёт. Может быть, прямо сейчас, но, вообще говоря, совсем не факт.

    Эта функция состоит из одной строки: return currentCount++ , ни переменных ни параметров в ней нет, поэтому её собственный объект переменных, для краткости назовём его LE – будет пуст.

    Однако, у неё есть свойство [[Scope]] , которое указывает на внешнее окружение. Чтобы увеличить и вернуть currentCount , интерпретатор ищет в текущем объекте переменных LE , не находит, затем идёт во внешний объект, там находит, изменяет и возвращает новое значение:

    function makeCounter() < var currentCount = 1; return function() < return currentCount++; >; > var counter = makeCounter(); // [[Scope]] -> alert( counter() ); // 1, [[Scope]] -> alert( counter() ); // 2, [[Scope]] -> alert( counter() ); // 3, [[Scope]] ->

    Переменную во внешней области видимости можно не только читать, но и изменять.

    В примере выше было создано несколько счётчиков. Все они взаимно независимы:

    var counter = makeCounter(); var counter2 = makeCounter(); alert( counter() ); // 1 alert( counter() ); // 2 alert( counter() ); // 3 alert( counter2() ); // 1, счётчики независимы

    Они независимы, потому что при каждом запуске makeCounter создаётся свой объект переменных LexicalEnvironment , со своим свойством currentCount , на который новый счётчик получит ссылку [[Scope]] .

    Свойства функции

    Функция в JavaScript является объектом, поэтому можно присваивать свойства прямо к ней, вот так:

    function f() <> f.test = 5; alert( f.test );

    Свойства функции не стоит путать с переменными и параметрами. Они совершенно никак не связаны. Переменные доступны только внутри функции, они создаются в процессе её выполнения. Это – использование функции «как функции».

    А свойство у функции – доступно отовсюду и всегда. Это – использование функции «как объекта».

    Если хочется привязать значение к функции, то можно им воспользоваться вместо внешних переменных.

    В качестве демонстрации, перепишем пример со счётчиком:

    function makeCounter() < function counter() < return counter.currentCount++; >; counter.currentCount = 1; return counter; > var counter = makeCounter(); alert( counter() ); // 1 alert( counter() ); // 2

    При запуске пример работает также.

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

    Например, можно взять и поменять счётчик из внешнего кода:

    var counter = makeCounter(); alert( counter() ); // 1 counter.currentCount = 5; alert( counter() ); // 5

    Статические переменные

    Иногда свойства, привязанные к функции, называют «статическими переменными».

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

    Итого: замыкания

    Замыкание – это функция вместе со всеми внешними переменными, которые ей доступны.

    Таково стандартное определение, которое есть в Wikipedia и большинстве серьёзных источников по программированию. То есть, замыкание – это функция + внешние переменные.

    Тем не менее, в JavaScript есть небольшая терминологическая особенность.

    Обычно, говоря «замыкание функции», подразумевают не саму эту функцию, а именно внешние переменные.

    Иногда говорят «переменная берётся из замыкания». Это означает – из внешнего объекта переменных.

    Что это такое – «понимать замыкания?»

    Иногда говорят «Вася молодец, понимает замыкания!». Что это такое – «понимать замыкания», какой смысл обычно вкладывают в эти слова?

    «Понимать замыкания» в JavaScript означает понимать следующие вещи:

    1. Все переменные и параметры функций являются свойствами объекта переменных LexicalEnvironment . Каждый запуск функции создаёт новый такой объект. На верхнем уровне им является «глобальный объект», в браузере – window .
    2. При создании функция получает системное свойство [[Scope]] , которое ссылается на LexicalEnvironment , в котором она была создана.
    3. При вызове функции, куда бы её ни передали в коде – она будет искать переменные сначала у себя, а затем во внешних LexicalEnvironment с места своего «рождения».

    В следующих главах мы углубим это понимание дополнительными примерами, а также рассмотрим, что происходит с памятью.

    Как вывести результат функции javascript

    Функция может возвращать результат. Для этого используется оператор return , после которого указывается возвращаемое значение:

    function sum (a, b)

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

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

    function sum (a, b) < return a + b; >let num1 = sum(2, 4); console.log(num1); // 6 const num2 = sum(6, 34); console.log(num2); // 40

    Функция может возвратить только одно значение. Если же нам надо возвратить несколько значений, то мы можем возвратить их в виде массива:

    function rectangle(width, height) < const perimeter = width *2 + height * 2; const area = width * height; return [perimeter, area]; >const rectangleData = rectangle(20, 30); console.log(rectangleData[0]); // 100 - периметр прямоугольника console.log(rectangleData[1]); // 600 - площадь прямоугольника

    В данном случае в функцию rectangle передаются ширина и высота прямоугольника, а внутри функции по этим данным вычисяем периметр и площадь прямоугольника и в виде массива возвращаем из функции.

    В качестве альтернативы можно поместить многочисленные возвращаемые данные в один объект:

    function rectangle(width, height)< const rectPerimeter = width *2 + height * 2; const rectArea = width * height; return ; > const rectangleData = rectangle(20, 30); console.log("Perimeter:", rectangleData.perimeter); // 100 - периметр прямоугольника console.log("Area:", rectangleData.area); // 600 - площадь прямоугольника

    Возвращение функции из функции

    Одна функция может возвращать другую функцию:

    function menu(n) < if(n==1) return function(x, y)< return x + y;>else if(n==2) return function(x, y) < return x - y;>else if(n==3) return function(x, y) < return x * y;>return function() < return 0;>> const action = menu(1); // выбираем первый пункт - сложение const result = action(2, 5); // выполняем функцию и получаем результат в константу result console.log(result); // 7

    В данном случае функция menu() в зависимости от переданного в нее значения возвращает одну из трех функций или пустую функцию, которая просто возвращает число 0.

    Далее мы вызываем функцию menu и получаем результат этой функции — другую функцию в константу action.

    const action = menu(1);

    То есть здесь action будет представлять функцию, которая принимает два параметра и возвращает число. Затем через имя константы мы можем вызвать эту функцию и получить ее результат в константу result:

    const result = action(2, 5);

    Подобным образом мы можем получить и другую возвращаемые функции:

    function menu(n) < if(n==1) return function(x, y)< return x + y;>else if(n==2) return function(x, y) < return x - y;>else if(n==3) return function(x, y) < return x * y;>return function()< return 0;>; > let action = menu(1); console.log(action(2, 5)); // 7 action = menu(2); console.log(action(2, 5)); // -3 action = menu(3); console.log(action(2, 5)); // 10 action = menu(190); console.log(action(2, 5)); // 0

    Аналогичным образом можно возвращать функции по имени:

    function sum(x, y) < return x + y;>function subtract(x, y) < return x - y;>function multiply(x, y) < return x * y;>function zero() < return 0;>function menu(n) < switch(n)< case 1: return sum; case 2: return subtract; case 3: return multiply; default: return zero; >> let action = menu(1); console.log(action(5, 4)); // 9 action = menu(2); console.log(action(5, 4)); // 1 action = menu(3); console.log(action(5, 4)); // 20 action = menu(190); console.log(action(5, 4)); // 0

    return

    Оператор return завершает выполнение текущей функции и возвращает её значение.

    Интерактивный пример

    Синтаксис

    return [[выражение]];

    Выражение, значение которого будет возвращено. Если не указано, вместо него возвращается undefined .

    Описание

    При вызове оператора return в функции её выполнение прекращается. Указанное значение возвращается в место вызова функции. Например, приведённая ниже функция возвращает возведённое в квадрат значение своего аргумента, x (где x – это число):

    function square(x)  return x * x; > var demo = square(3); // значение demo будет равняться 9 

    Если возвращаемое значение не указано, вместо него возвращается undefined .

    Следующие выражения всегда прерывают выполнение функции:

    return; return true; return false; return x; return x + y / 3; 

    Автоматическая расстановка точек с запятыми

    На выражение return влияет автоматическая расстановка точек с запятыми (ASI). Разрыв строки не допускается между ключевым словом return и выражением.

    return a + b; 

    трансформируется ASI в:

    return; a + b; 

    В консоли появится предупреждение «unreachable code after return statement».

    Примечание: Начиная с Gecko 40, предупреждение в консоли появляется, если обнаружен недостижимый код после return .

    Для того, чтобы избежать данной проблемы (предотвратить ASI), можно использовать скобки:

    return ( a + b; ); 

    Примеры

    Прерывание функции

    Функция немедленно останавливается в точке, где вызывается return .

    function counter()  for (var count = 1; ; count++)  // бесконечный цикл console.log(count + "A"); // до 5 if (count === 5)  return; > console.log(count + "B"); // до 4 > console.log(count + "C"); // никогда не появляется > counter(); // Выводит: // 1A // 1B // 2A // 2B // 3A // 3B // 4A // 4B // 5A 

    Возвращение функции

    Смотрите также статью о замыканиях.

    function magic(x)  return function calc(x)  return x * 42; >; > var answer = magic(); answer(1337); // 56154 

    Спецификации

    Specification
    ECMAScript Language Specification
    # sec-return-statement

    Совместимость с браузерами

    BCD tables only load in the browser

    Смотрите также

    Found a content problem with this page?

    • Edit the page on GitHub.
    • Report the content issue.
    • View the source on GitHub.

    This page was last modified on 7 авг. 2023 г. by MDN contributors.

    Your blueprint for a better internet.

    MDN

    Support

    • Product help
    • Report an issue

    Our communities

    Developers

    • Web Technologies
    • Learn Web Development
    • MDN Plus
    • Hacks Blog
    • Website Privacy Notice
    • Cookies
    • Legal
    • Community Participation Guidelines

    Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
    Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

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

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