Как сделать необязательный параметр в функции в js
Обновлено: 05.07.2024
Функции в JavaScript являются очень важной составляющей языка. Фактически большая часть программирования на JS - это код, обернутый в функцию.
Функции создаются для того, чтобы уменьшить количество кода. Любой код, который выполняется у вас на странице хотя бы дважды, уже достоин того, чтобы стать функцией. Поэтому можно написать такое определение функции в JavaScript:
Замечательно то, что функция НЕ выполнится, если не будет вызвана.
Записываются функции в общем виде следующем виде:
К именам функций существуют те же требования, что и к именам переменных. Важно помнить, что функция - это особый вид переменных в JavaScript, поэтому задавать одинаковые имена для функции и для переменной НЕЛЬЗЯ.
Например, нам нужна функция, которая печатает в тело документа сегодняшнее число.
В JavaScript принято сначала объявлять функцию, а потом уже ее вызывать.
Обязательны и круглые скобки после имени функции. Они могут оставаться пустыми, а могут содержать аргументы функции. Например, функция выводит нам приветствие в диалоговом окне alert():
Вызов функции без аргументов
Но, предположим мы хотим, чтобы приветствие было целевым. Например, пользователь вводит свое имя, а функция его получает.
Что можно записывать в функциях JavaScript
Функции в своем коде могут иметь различные конструкции, характерные для языка JavaScript:
- объявление переменных ( var, let, const );
- арифметические операции (сложение, вычитание и т.д.);
- условные конструкции - if. else , switch. case , тернарный оператор;
- любые виды циклов - for() , while() , do. while() , for. in ;
- вызов других функций.
Например, функция должна нам построить таблицу в зависимости от переданных аргументов - количества строк и столбцов. Мы будем использовать в коде функции объявление переменной table и вложенные циклы:
А следующая функция будет проверять четность/нечетность числа, введенного пользователем:
Проверить четность числа
В функции использована условная конструкция if. else и тернарный оператор.
Оператор return
Оператор return позволяет вернуть значение из функции, т.е. получить результат для дальнейшего использования в коде. Этот результат можно записать (присвоить) в какую-либо переменную, использовать в дальнейшем коде для вычислений, например, или вывести на html-страницу.
С помощью return можно возвращать логические значения ( true или false ), результат вычислений (число), строку или даже объект. Следует понимать 2 особенности, связанные с этим оператором:
- вернуть можно только одно значение (если нужно несколько, выходом может быть объект в качестве возвращаемого значения);
- после выполнения этого оператора прекращается выполнение кода функции. Дальше будет выполняться код, который следует за вызовом функции.
Рассмотрим простой пример. У нас есть функция, которая считает сумму 2-х чисел. Можно использовать ее для того, чтобы сложить несколько чисел и суммы этих чисел. Вот код:
Посчитать сумму чисел
Рассмотрим пример посложнее. Нам необходимо создать объект на html-странице, причем не один, а несколько (в примере будет 2 - div и абзац). Выполняться это будет в функции. Затем в основном коде для каждого из элементов задается класс, описанный в стилях.
В этом примере возвращается из функции объект - ссылка на создаваемый html-элемент. И поскольку это особый объект, который встраивается в страницу, мы можем назначить для него форматирование с помощью классов или id, записав в переменную ссылку на этот объект. Для других объектов это будет другой код.
Примечание: данный скрипт должен быть размещен в body, и перед тегом Посчитать сумму строк
Имеет смысл изменить код этой функции так, чтобы подсчет велся только в случае чисел. Для этого введем условие и дважды используем оператор return:
Посчитать сумму чисел с проверкой
Кстати, функция, которая не имеет оператора return, на самом деле возвращает значение undefined.
Аргументы функций в Javascript. Свойство функции arguments
В JavaScript существует псевдомассив аргументов функции, который так и называется - arguments. И, если точное количество аргументов неизвестно, то можно воспользоваться этим массивом. Он имеет свойство length, как и обычные массивы, но методы массивов push() , pop() и т.д. вы к нему применить не сможете.
Рассмотрим использование этого массива на примере функции суммы:
Сумма чисел " + summa ( 2 , 3 , 56 , 17 , 34 , 67 ) + "
Параметры по умолчанию в функции
Еще одна особенность связана с параметрами по умолчанию. Вернемся к примеру с созданием таблицы. Предположим, пользователь захотел вызвать функцию без аргументов:
Но в этом случае ничего не получится, т.к. ни количества строк, ни количества столбцов у нас нет. Для того чтобы это изменить, мы можем воспользоваться таким подходом:
В первой строчке сценария функции мы проверяем, а существует ли значение для переменной row, и если она равна undefined, т.е. значения нет, то присваиваем ей значение 2. Во второй строке можно присвоить переменной cols одно из значений - либо переданное в функцию, либо, если параметр не был передан, т.е. он равен undefined, мы назначаем опять-таки значение 2.
То же самое можно написать другим способом - если эти параметры по умолчанию подставить в скобках при вызове функции в операции присваивания. Важно помнить, что этот способ будет работать только в современных браузерах. В более старых придется воспользоваться методом, приведенным выше.
Типы функций в Javascript
Все функции, которые мы рассматривали до сих пор, относятся к категории Function Declaration, т.е. функции объявленной. Кроме того, существует тип функций Function Expression, т.е. функции-выражения, или функциональные выражения. Посмотрите на разницу между их объявлением:
Function Expression представляет собой переменную, в которую записывается код функции. Чаще всего такой вариант применяют для использования функции в качестве метода объекта.
Если вы вызываете любую из этих функций после ее объявления, то разницы вы не заметите. Но дело заключается в том, что иногда нужно вставить код вызова функции в другую функцию, причем описана она будет раньше, чем та, которую вызывают. Понятней будет на примере:
Declaration vs Expression
Для того чтобы увидеть ошибку, нужно открыть консоль браузера (F12 и Esc).
Так вот в этом простом примере мы не увидели второго окна alert() , т.к. функция func_expression() была вызвана ДО ее объявления. И это вызвало ошибку интерпретатора, т.к. Function expression НЕ вычисляется до выполнения javascript, из-за того, что является операцией присваивания переменной. Поэтому вызов function expression нельзя осуществлять до объявления самой функции, так как переменная на тот момент содержит undefined . Именно поэтому хорошим стилем кода на JavaScript является объявление всех функций в верхней части скрипта.
Что же касается Function declaration, то Javascript выявляет все определения таких функций и переносит их в начало сценария (этот процесс называется hoisting, или поднятие функций). Т.е. если в коде присутствуют такие функции, то JavaScript знает о них еще до выполнения сценария. Именно поэтому не важно, в каком месте кода вызывается Function declaration. Но все-таки, если есть возможность, объявляйте функции в начале сценария.
Области видимости переменных
Когда вы создаете переменные в своем основном коде, они видны везде - и в циклах, и в условных конструкциях, и в функциях. Но переменные, созданные внутри функции с помощью ключевого слова var НЕ видны, т.е. неизвестны за пределами этой функции. Т.е. при попытке обратиться к ним будет выдана ошибка, т.к. переменная не существует.
В примере ниже глобальная переменная a перезаписывается внутри функции func() , а затем и во внутренней функции innerFunc() . А это далеко не всегда приводит к нужным результатам в процессе выполнения кода.
Примеры встроенных функций: • prompt(message, default); • alert(message); • confirm(question).
Однако в JavaScript можно создавать и свои функции.
Объявление функций в JS
В вышеприведённом примере ключевое слово — function, которое идёт в самом начале. Потом прописывается имя функции, затем параметры (в скобках), далее — тело функции (код, выполняемый при вызове).
Объявленная таким образом функция будет доступна по имени:
Локальные переменные функции
В функцию могут входить и локальные переменные (объявляются через var). Они видны только внутри функции:
Помните, что блоки while, switch, for, if/else, do..while никак не влияют на зону видимости переменных, то есть при объявлении переменных в данных блоках они будут видны во всей функции. Пример:
При этом неважно, где конкретно в function вы объявляете переменную. Вне зависимости от метода ваших действий объявление сработает одни раз и распространится на всю функцию:
Внешние переменные функции
Функция позволяет вызвать и внешнюю переменную, например:
Доступ возможен на чтение и запись. Но раз переменная внешняя, изменения видны и снаружи функции:
Однако если бы мы внутри функции в строке (1) объявили свою локальную переменную var userName , все обращения задействовали бы её, то есть внешняя переменная не изменилась бы.
Параметры, которые можно вызвать функцией
Выбор имени function
При выборе имён в function применяют те же правила, что и когда выбирают имена переменной. Однако следует помнить, что именем должен быть глагол, ведь функция — это действие. Как правило, в качестве имени используют глагольные префиксы, плюс уточнения.
Функцию, которая что-то показывает, называют show (это лучший вариант для имени):
Запуск function, которая что-то получает, называют get, вычисляет — calc и т. д.
Примеры, каким именем можно назвать функцию:
Использование данного метода названия — удобная штука, ведь, взглянув на функцию, мы примерно поймём, что она делает, какое значение возвращает. И даже если эту функцию написал кто-то другой, вы будете иметь представление о ней.
Остаётся запомнить, что вне зависимости от метода названия, одна функция — это одно действие. Если функция подразумевает поддействия, желательно выделить их в отдельные функции.
Функция jQuery() в JavaScript
Говоря о применении функций в JS, нельзя не упомянуть jQuery — известнейшую библиотеку языка программирования JavaScript, благодаря которой осуществляется взаимодействие HTML и JavaScript. Работа с ней начинается с вызова основной функции jQuery() либо $() . Данная функция (function) может выполнять разные действия, что зависит от того, какое значение передать в качестве параметров аргумента.
Какие задачи решаются с помощью этой функции?
Если параметры не указывать, то function возвращает пустой jQuery-объект.
Для примера рассмотрим функцию jQuery(html,attributes) и функцию jQuery(html[,ownerDocument]) .
Функция jQuery(html,attributes)
Function служит для создания DOM-элемента с параметрами. Необходимый элемент указывается в первом аргументе с помощью HTML-строки. Атрибуты к нему указываются во втором аргументе с помощью объекта JavaScript (PlainObject).
Данный способ вызова функции имеет два параметра: • html — обязательный параметр типа htmlString, содержит DOM-элемент; • attributes — необязательный параметр типа PlainObject. Это объект, содержащий атрибуты, методы и события, которые нужно передать создаваемому элементу.
Примечание: необходимо, чтобы HTML-строка начиналась с $.parseHTML() ; - после обработки запускается процесс создания DOM-узлов (применяется браузерный механизм .innerHTML ); - в конечном итоге функция возвращает объект jQuery, включающий созданные DOM-узлы.
Если пользоваться только одним параметром, элементы создаются для текущего документа. Если хотите создать элементы для другого документа, нужно передавать и 1-й, и 2-й параметры.
Ссылки в JS
В заключении поговорим о ссылке в JavaScript. Под ссылкой будем понимать видимую часть текста или кода, нажатие на которую приведёт к переходу по ней. Рассмотрим три основных метода, в результате применения которых образуется кликабельная ссылка.
- Самый простой метод, позволяющий осуществлять вызов — вывод alert в ссылке. Пример такой ссылки (ссылку можно запустить без проблем из любого браузера):
- Второй метод вызова ссылки имеет более сложную конструкцию. В этом случае ссылку можно сделать с помощью функции document.write(). А оформить такую ссылку можно следующим образом:
- В качестве третьего метода продемонстрируем ещё более усложнённый вариант. Ссылка и её вызов осуществляются с помощью переменных, т. к. сама ссылка и её текст выведены в отдельные переменные:
Кроме того, можно вызывать ссылку через таблицу, div, ячейку таблицы и путём использования другого метода. Собственно говоря, использование этих методов для передачи ссылок — довольно странное занятие, если вспомнить, что у нас есть простые, эффективные и всем понятные решения с html и php.
На уроке будут рассмотрены Javascript функции, как пользовательские, так и встроенные; способы создания и вызов функций; локальные и глобальные переменные в функции, а также рекурсивный вызов функции в javascript
Встроенные Javascript функции
В javascript достаточно много функций, встроенных в синтаксис языка. Рассмотрим одну из них.
eval(строка)
Функция eval(строка) вычисляет выражение в указанной строке (в качестве параметра); выражение должно быть составлено по правилам языка JavaScript и не содержать тегов HTML:
Рассмотрим пример использования функции eval:
let y = 5; // значение у равно 5 let x = "if (y==5) y*2-3"; // значение х равно строке символов let rezult = eval(x); // rezult равно 7
Задание js4_1. В скрипте запрашивать у пользователя ввести в диалоговое окно ввода математическое выражение, затем вычислить значение данного выражения и результат вывести в диалоговом окне.
Пользовательские Javascript функции
Пользовательские функции прежде всего необходимы в ситуации, когда в разных частях программы необходимо выполнять одни и те же действия несколько раз. В таком случае повторяемые операторы оформляются в виде функции, к которой можно обращаться и вызывать ее выполнение из разных частей программы.
- Функция в роли процедуры. Если функция выполняет какие-либо действия и не возвращает значение:
Синтаксис объявления (создания) функции:
Другой вариант создания функции — Function Expression (Функциональное Выражение):
Вызов функции:
В javascript вызов функции в роли процедуры происходит следующим образом:
имя_функции (аргументы); // с аргументами имя_функции (); // без аргументов
Вызов функции:
В javaScript вызов функции, возвращающей значение, происходит, например, следующим образом:
let a = имя_функции (аргументы); alert(a); // 1-й способ let b = a + a; // 2-й способ
То есть значение нужно либо вывести на экран, либо можно использовать в дальнейших выражениях.
Как видно из примера, после return функция действительно завершает свою работу. Поэтому оператор alert("2") выполняться уже не будет.
let a=sayHello(); alert(a);
Вызов функции происходит через присваивание. Вызов в данном примере можно также организовать так: alert(sayHello()); , но это не рекомендуемый вариант.
Важно: Таким образом, директива return указывает на возвращаемое значение функции, которое будет передано переменной при следующей форме вызова:
Примерный фрагмент кода для одного из способов:
- Для чего используются функции?
- Объясните в чем разница использования функции в роли процедуры и функции с классическим оформлением?
- Опишите синтаксис вызова функции в роли процедуры.
- Опишите синтаксис вызова функции с классическим оформлением.
- Для чего служит директива return ?
Javascript функции с параметрами (аргументами) и возврат значений
Рассмотрим подробнее использование инструкции return в функции javascript на двух примерах. Кроме того, рассмотрим использование в Javascript функции с параметрами (аргументами).
- Объявите функцию sayHello. В скобках аргументов функции укажите аргумент с именем userName:
-
Объявите функцию sayHello. В скобках аргументов функции укажите аргумент с именем userName:
. let a = sayHello("Вася"); alert(a);
Важно: Обратите внимание на разницу между вызовом функции без директивы return и с директивой: в первом случае функция вызывается как оператор, возвращая значение undefined ; во втором случаем функция вызывается через присваивание, либо участвуя в выражениях (см. ниже)
У функций могут быть необязательные аргументы:
function f(x, y = 3) < return x + y; >f(2); // 5
Все способы создания пользовательских функций
//обязательным является только последний аргумент – тело функции let a1 = new Function('x', 'y', 'return x + y');
let a1 = new Function('return "hello"');
Вызов функций во всех случаях будет:
let a = a1(3, 4); alert(a); // вывод значения на экран
Использование выражений с функциями
Обычное использование javascript функции:
Функция как составная часть выражения:
Во второй функции ( add() ) используется выражение, ссылающееся на первую функцию ( sum() , в 11-й строке).
Задание js4_6. Создать функцию, возвращающую наибольшее из трех чисел. Аргументами функции являются сами числа.
function findMax(a,b,c) < . return . >let max = . .
(только для функций, которые возвращают результат):
Рассмотрим примеры для функции:
function plRectangle(width, height)
Варианты выражений:
⇒ Вызов функции как часть выражения:
S3 = 0.5 * plRectangle(a, b);
⇒ Вызов функции в логических выражениях:
if (plRectangle(a, b) > plRectangle(c, d)) alert("Первый прямоугольник больше второго");
⇒ Вызов javascript функции в качестве параметра другой функции:
let х = "25рх"; let у = 12; let S = plRectangle(parselnt(x), у);
Задание js4_7. Используйте функцию для модернизации примера с окончанием слова про количество ворон. Откройте файл с выполненным заданием про ворон. Необходимо вызывать функцию с параметром – количество ворон.
- Что такое аргументы функции и где они указываются?
- Может ли на месте аргумента функции находиться вызов другой функции?
Область видимости переменных. Javascript глобальные и локальные переменные в функции
Область видимости переменной — область кода, в котором переменная доступна для использования.
-
Глобальные переменные — создаются на уровне сценария и сохраняются до конца сценария; — объявляются до описания javascript функции:
let a = 1; function . .
for (let i=1;i — явно объявляются в теле javascript функции;
Задание js4_9. Дополните код согласно заданию:
Создать 2 переменные глобальной и локальной области видимости (то есть внутри функции func ) с именами: global , local .
Переменной global присвоить текст “Привет, ”, а local — “Мир”. Используя переменные, выведите их значения дважды: в основной программе и в теле функции.
function func() < >func();
Область видимости переменных
Рассмотрим конкретные примеры области видимости переменных в javascript при использовании глобальных и локальных переменных.
let S = 2; // Глобальная переменная S function plRectangle(width, height) < let S = width * height; return S // Локальная переменная S >z = plRectangle(2, 3); alert(z); alert(S);
Пример: Значение z равно 6, а значение S осталось равным 2, то есть значению глобальной переменной, определенной во внешней программе
function plRectangle(width, height) < let s = width * height; // аргументы всегда локальны width = width + 10; return s >width = 2; height = 3; z = plRectangle(width, height); alert(z); alert(width);
function Plrectangle(width, height) < S = width * height; //глобальная переменная return S >z = Plrectangle(2, 3); S=2; // изменяем глобальную переменную alert(z); alert (S);
Пример: Значение z равно 6, а значение S равно 2, то есть значению измененной глобальной переменной, определенной во внешней программе
function plRectangle(width, height) < let S = width * height; let x = 17; return S >z = plRectangle(2,3); alert(z); alert(x); // не определена во внешней программе alert (S); // не определена во внешней программе
Пример: Значение z равно 6; переменная S во внешней программе не определена; переменная х во внешней программе не определена
- Какова разница между локальными и глобальными переменными?
- Зачем в программировании существует необходимость деления переменных на локальные и глобальные?
Рекурсивная функция javascript
Важно: В информатике и программировании, а, соответственно, и в javascript, рекурсия — это вызов функции из самой же функции, т.е. функция в функции
Бывают также косвенная или сложная рекурсия, когда функция вызывается не непосредственно из самой себя, а из вложенной в нее функции: например, функция A вызывает функцию B , а функция B — функцию A . Количество вложенных вызовов функции или процедуры называется глубиной рекурсии.
- начальное условие (известное значение для переменной, отправной момент рекурсии);
- рекурсивное правило;
- условие окончания рекурсии.
Рекурсия javascript рассмотрена ниже на примере возведения числа в степень.
Для начала рассмотрим итерационный вариант возведения в степень, т.е. с использованием цикла:
Пример: Используя функцию, необходимо вычислять возведение числа в степень. Выполнить задание, используя цикл for
let chislo,stepen; function degree(chislo,stepen) < for(let result = 1; stepen >0; stepen--) < result *= chislo; >return result; > document.write(degree(2,4)); // выводит 16
Пример: Выполнить возведение числа в степень через рекурсию. Оба значения запрашивать у пользователя. Выдавать результат в виде:
- Объявите глобальные переменные для числа и степени и запросите их:
let chislo,stepen; chislo = parseInt(prompt('число: ')); stepen = parseInt(prompt('степень: '));
function degree(chislo,stepen) < if(stepen) < … >return 1; // если степень равна нулю то возвращаем 1 >
document.write(chislo,' в степени ', stepen, ' = ', degree(chislo,stepen));
function f(counter) < counter--; document.write(counter + "
"); if (counter != 0) f(counter); document.write(counter + "
"); > f(2);
Задание js4_12. Вычислить факториал числа с использованием рекурсии, беря за образец пример вычисления факториала итерационным методом
let m = 2; x = factorial(m); document.write(x); function factorial(n)< if(n
- Что такое рекурсия?
- Назовите основные условия организации рекурсии, как вы их понимаете?
Стрелочные функции или лямбда выражения в javascript
Пример стрелочной функции с одним аргументом:
let f = x => x + 1; alert(f(5))
Расшифровываем так:
функция f равна значению x, такое, что x = x + 1.
То есть в результате в окно выведется 6.
Пример стрелочной функции с двумя аргументами:
let g = (x, y) => x + y; alert(g(5,3))
Пример: Написать стрелочную функцию для вычисления факториала числа. Функция должна быть рекурсивной.
- Назовем функцию factorial.
- Определим рекурсивные правила:
- Теперь данные правила опишем в самой рекурсивной функции в скрипте. Для написания функции будем использовать тернарный оператор:
let factorial = n => (n > 0) ? n * factorial(n-1) : 1;
Пример: Написать стрелочную функцию для вычисления первых n чисел ряда Фибоначчи. Функция должна быть рекурсивной.
- Назовем функцию fib.
- Определим рекурсивные правила:
- Теперь данные правила опишем в самой рекурсивной функции в скрипте. Для написания функции будем использовать тернарный оператор:
let fib = n => (n > 2) ? fib(n-1) + fib(n-2) : 1;
Задание js4_14:
Используя стрелочную функцию, создайте последовательность 1 3 9 27 81 243 729 2187 6561 19683
- Какие функции называются стрелочными функциями?
- Есть ли разница между стрелочными функциями и лямбда выражениями в javascript?
- Каков синтаксис стрелочных функций?
Рубрики:
В вашем задание ответ неправильный. Ответ будет 6 и 6. Попробуйте сами запустить этот код function Plrectangle(width, height) S = width * height;
return S
>
S=2;
z = Plrectangle(2, 3);
alert(z);
alert (S);
Пример: Значение z равно 6, а значение S осталось равным 2, то есть значению глобальной переменной, определенной во внешней программе
admin
Да нет, всё верно
Dmitriy
Всё же не верно. S — глобальная переменная, и в теле функции S изменяется. Результат 6 и 6. Чтобы было верно, надо в в функции поставить var S=…
Осваивайте профессию, начните зарабатывать, а платите через год!
Курсы Python Акция! Бесплатно!
Станьте хакером на Python за 3 дня
Веб-вёрстка. CSS, HTML и JavaScript
Курс Bootstrap 4
Станьте веб-разработчиком с нуля
Функции помогают снизить повторяемость кода за счет превращения часто встречающихся участков кода в независимые блоки, которые определяются один раз и могут вызываться многократно. В этой главе описаны основы их применения и соответствующие механизмы.
JavaScript Функции
Функции в языке JavaScript являются объектами, и следовательно ими можно манипулировать как объектами. Например, функции могут присваиваться переменным, элементам массива, свойствам объектов, передавать в качестве аргумента функциям и возвращать в качестве значения из функций.
В JavaScript есть встроенные функции, которые можно использовать в программах, но код которых нельзя редактировать или посмотреть. Примеры встроенных функций вы уже видели – это alert() , prompt() , confirm() и document.write() . Кроме использования встроенных функций, вы можете создать свои собственные, так называемые пользовательские функции.
Объявление и вызов функции
Функция (как и всякий объект) должна быть объявлена (определена) перед её использованием.
- Идентификатор, определяющий имя функции. Чаще всего в качестве имен функций выбираются глаголы или фразы, начинающиеся с глаголов. По общепринятому соглашению имена функций начинаются со строчной буквы.
- Пара круглых скобок () , которые могут включать имена параметров, разделенных запятыми ( параметр1, параметр2, . ). Эти имена параметров в теле функции могут использоваться как локальные переменные.
- Пара фигурных скобок <> с инструкциями JavaScript внутри. Эти инструкции составляют тело функции: они выполняются при каждом вызове функции.
Синтаксис функции JavaScript:
Программный код, расположенный в теле функции, выполняется не в момент объявления функции, а в момент её вызова. Будучи один раз определенной, функция может сколько угодно раз вызываться с помощью оператора () (вызов функции):
Читайте также: