Javascript function передаваемые параметры

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

Например, определим простейшую функцию, которая принимает один параметр:

function print(message) < console.log(message); >print("Hello JavaScript"); print("Hello METANIT.COM"); print("Function in JavaScript");

Функция print() принимает один параметр — message. Поэтому при вызове функции мы можем передать для него значение, например, некоторую строку:

Передаваемые параметрам значения еще называют аргументами.

При этом в отличие от ряда других языков программирования мы в принципе можем не передавать значения параметрам. Например:

function print(message) < console.log(message); >print();

Если параметру не передается значение, тогда он будет иметь значение undefined .

Если функция принимает несколько параметров, то они перечисляются через запятую:

function sum(a, b) < const result = a + b; console.log(result); >sum(2, 6); // 8 sum(4, 5); // 9 sum(109, 11); // 120

При вызове функции с несколькими параметрами значения передаются параметрам по позиции. То есть первое значение передается первому параметру, второе значение — второму и так далее. Например, в вызове:

Число 2 передается параметру a , а число 6 — параметру b .

Необязательные параметры и значения по умолчанию

Функция может принимать множество параметров, но при этом часть или все параметры могут быть необязательными. Если для параметров не передается значение, то по умолчанию они имеют значение «undefined». Однако иногда бывает необходимо, чтобы параметры обязательно имели какие-то значения, например, значения по умолчанию. До стандарта ES6 необходимо было проверять значения параметров на undefined:

function sum(x, y) < if(y === undefined) y = 5; if(x === undefined) x = 8; const z = x + y; console.log(z); >sum(); // 13 sum(6); // 11 sum(6, 4) // 10

Здесь функция sum() принимает два параметра. При вызове функции мы можем проверить их значения. При этом, вызывая функцию, необязательно передавать для этих параметров значения. Для проверки наличия значения параметров используется сравнение со значением undefined .

Также мы можем напрямую определять для параметров значения по умолчанию:

function sum(x = 8, y = 5) < const z = x + y; console.log(z); >sum(); // 13 sum(6); // 11 sum(6, 4) // 10

Если параметрам x и y не передаются значения, то они получаются в качестве значений числа 5 и 10 соответствено. Такой способ более лаконичен и интуитивен, чем сравнение с undefined.

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

function sum(x = 8, y = 10 + x) < const z = x + y; console.log(z); >sum(); // 26 sum(6); // 22 sum(6, 4) // 10

В данном случае значение параметра y зависит от значения x.

Массив arguments

При необходимости мы можем получить все переданные параметры через глобально доступный массив arguments :

function sum() < let result = 0; for(const n of arguments) result += n; console.log(result); >sum(6); // 6 sum(6, 4) // 10 sum(6, 4, 5) // 15

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

Неопределенное количество параметров

С помощью оператора . (многоточие) мы можем указать, что с помощью параметра можно передать переменное количество значений:

function display(season, . temps) < console.log(season); for(index in temps)< console.log(temps[index]); >> display("Весна", -2, -3, 4, 2, 5); display("Лето", 20, 23, 31);

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

Весна -2 -3 4 2 5 Лето 20 23 31

Функции в качестве параметров

Функции могут выступать в качестве параметров других функций:

function sum(x, y) < return x + y; >function subtract(x, y) < return x - y; >function operation(x, y, func) < const result = func(x, y); console.log(result); >console.log("Sum"); operation(10, 6, sum); // 16 console.log("Subtract"); operation(10, 6, subtract); // 4

Функция operation принимает три параметра: x, y и func. func — представляет функцию, причем на момент определения operation не важно, что это будет за функция. Единственное, что известно, что функция func может принимать два параметра и возвращать значение, которое затем отображается в консоли браузера. Поэтому мы можем определить различные функции (например, функции sum и subtract в данном случае) и передавать их в вызов функции operation.

Источник

Javascript function передаваемые параметры

Передача параметров по значению

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

function change(x) < x = 2 * x; console.log("x in change:", x); >var n = 10; console.log("n before change:", n); // n before change: 10 change(n); // x in change: 20 console.log("n after change:", n); // n after change: 10

Функция change получает некоторое число и увеличивает его в два раза. При вызове функции change ей передается число n. Однако после вызова функции мы видим, что число n не изменилось, хотя в самой функции произошло увеличение значения параметра. Потому что при вызове функция change получает копию значения переменной n. И любые изменения с этой копией никак не затрагивают саму переменную n.

Передача по ссылке

Объекты и массивы передаются по ссылке. То есть функция получает сам объект или массив, а не их копию.

function change(user) < user.name = "Tom"; >var bob =< name: "Bob" >; console.log("before change:", bob.name); // Bob change(bob); console.log("after change:", bob.name); // Tom

В данном случае функция change получает объект и меняет его свойство name. В итоге мы увидим, что после вызова функции изменился оригинальный объект bob, который передавался в функцию.

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

function change(user)< // полная переустановка объекта user= < name:"Tom" >; > var bob =< name: "Bob" >; console.log("before change:", bob.name); // Bob change(bob); console.log("after change:", bob.name); // Bob

То же самое касается массивов:

function change(array) < array[0] = 8; >function changeFull(array) < array = [9, 8, 7]; >var numbers = [1, 2, 3]; console.log("before change:", numbers); // [1, 2, 3] change(numbers); console.log("after change:", numbers); // [8, 2, 3] changeFull(numbers); console.log("after changeFull:", numbers); // [8, 2, 3]

Источник

Функции в JavaScript

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

Функция — это блок кода, который решает определенную задачу или возвращает значение и может выполняться многократно в разных местах и с разными входными данными. В JavaScript уже есть встроенные функции, такие как Math.random() , prompt(message, default) , Date() и многие другие. Здесь мы поговорим о тех, которые можно создавать самостоятельно.

Синтаксис

Работу с функциями можно разделить на два этапа: создание (объявление) и выполнение (вызов).

Объявление функции

function — ключевое слово, обозначающее функцию.

showIntention() — имя функции, а в круглых скобках её параметры.

< >— в фигурных скобках — тело функции.

Вызов

Для того, чтобы функция отработала мы должны ее вызвать.

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

 function showIntention() < alert( 'Я хочу стать программистом!' ); >showIntention(); showIntention();

Из названия функции должно быть предельно понятно, что там происходит.
Для нейминга функций обозначающих действие чаще всего используют глагольные префиксы + уточнение. К первым относят: show, get, calc, create, check.
Название может быть написано, как в стиле lowerCamelCase, так и в стиле snake_case. Первый вариант более предпочтителен и рекомендуется к применению в JavaScript. Какой вариант вы бы не выбрали, важно помнить, что название функции чувствительно к регистру.
Не используйте для нейминга кириллицу или транслит. Несмотря на то, что в первом случае все будет работать, а во втором вроде все понятно, подобная практика считается дурным тоном.
Используйте для названия функций английские слова.
Имя функции не должно начинаться с цифры.

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

Параметры и аргументы

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

 function showStudentIntention(studentName, profession) < alert(studentName + " хочет освоить профессию " + profession); >showStudentIntention("Лера", "React-разработчик"); showStudentIntention("Константин", "Web-разработчик");

При вызове showStudentIntention в локальные переменные name и profession копируются значения имени и профессии в первом случае это «Лера» и «React-разработчик». Далее они используются в теле функции — в итоге мы получаем “Лера хочет освоить профессию React-разработчик”.

Функция не меняет внешние переменные, а получает копии, с которыми и работает.

 let studentName = "Лера"; let profession = "React-разработчик" function showStudentIntention(studentName, profession) < studentName = "Константин"; profession = "Web-разработчик"; alert(studentName + " хочет освоить профессию " + profession); >showStudentIntention(studentName, profession); alert(studentName + " хочет освоить профессию " + profession);

В этой программе первое модальное окно, которое вызывается showStudentIntention будет содержать информацию о Константине — внутри функции мы объявили переменные studentName и profession — внешние проигнорированы. Второй alert будет про Леру, так как здесь значения берутся уже из внешних переменных, которые еще называются глобальными. Такие переменные располагаются снаружи всех функций — в рабочих проектах их использование стараются сводить к минимуму.

Локальные переменные

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

 function showStudentIntention() < let studentName = "Константин"; let profession = "Web-разработчик"; alert(studentName + " хочет освоить профессию " + profession); >showStudentIntention() alert(studentName + " считает профессию " + profession + " бесперспективной");

В данном примере отработает только вызов функции, второй alert не сработает, а в консоли можно будет увидеть ошибку — Uncaught ReferenceError: studentName is not defined.

Параметры по умолчанию

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

 function showStudentIntention(studentName, profession = "программист") < alert(studentName + " хочет освоить профессию " + profession); >showStudentIntention("Лера"); //Лера хочет освоить профессию программист

Здесь это — profession = «программист»

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

 function calcScores(studentName, scoresFirstExam, scoresSecondExam, examResults = scoresFirstExam + scoresSecondExam) < alert(studentName + " набрала за экзамены " + examResults + " баллов"); >calcScores("Лера", 50, 80);

Если говорить о максимальном количестве аргументов, которые может принять функция — это 255.

Возврат значения — return

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

 function calcScores(scoresFirstExam, scoresSecondExam, scoresThirdExam) < let examResults = "Результат за три экзамена " + (scoresFirstExam + scoresSecondExam + scoresThirdExam); return examResults; >alert(calcScores(50, 50, 80));

По умолчанию функция возвращает undefined , в том числе и при пустом return . Сама директива может встречаться в теле функции несколько раз. Как выполнение кода доходит до первого return программа останавливается и возвращается соответствующее значение.

 function calcScores(scoresFirstExam, scoresSecondExam, scoresThirdExam) < let examResults = scoresFirstExam + scoresSecondExam + scoresThirdExam; if (examResults >= 185) < return "Вы поступили!"; >else < return "Вы не поступили!"; >> alert(calcScores(50, 50, 100)); // Вы поступили! alert(calcScores(50, 50, 50)); // Вы не поступили!

Пустой return используется и для того, чтобы просто прекратить выполнение функции.

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

 return a + b + c; // верно return ( a + b + c // верно ) return // интерпретатор автоматически поставит ; после return a + b + c // функция не вернет значение

Итого

Функции являются одними из важнейших строительных блоков программы на JavaScript. Они бывают встроенными, когда функционал уже заложен в языке и самописными. Самописные функции в свою очередь могут быть записаны с помощью разного синтаксиса: Function Declaration, Function Expression и «стрелочные функции». В данном уроке мы рассмотрели только первый способ.

Основные моменты работы с функциями записанными в стиле Function Declaration:

для создания функции её необходимо объявить с помощью специальной команды function ;
функция может иметь в своем арсенале до 255 параметров, которые записываются в круглых скобках — function name(param1, param2, param3) ;
для вызова функции нужно прописать её название, круглые скобки и там же параметры, если они есть — functionName(param1, param2) ;
функция имеет доступ к внешним переменным, но внешнее окружение не имеет доступа к переменным объявленным внутри функции;
с помощью директивы return функция может возвращать необходимое значение, по умолчанию это undefined .

Skypro — научим с нуля

Источник

Читайте также: Registration Form