Функция в JavaScript может принимать параметры. Параметры представляют способ передачи в функцию данных. Параметры указываются в скобках после названия функции.
Например, определим простейшую функцию, которая принимает один параметр:
function print(message){
console.log(message);
}
print("Hello JavaScript");
print("Hello METANIT.COM");
print("Function in JavaScript");
Функция print() принимает один параметр - message. Поэтому при вызове функции мы можем передать для него значение, например, некоторую строку:
print("Hello JavaScript");
Передаваемые параметрам значения еще называют аргументами.
При этом в отличие от ряда других языков программирования мы в принципе можем не передавать значения параметрам. Например:
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
При вызове функции с несколькими параметрами значения передаются параметрам по позиции. То есть первое значение передается первому параметру, второе значение - второму и так далее. Например, в вызове:
sum(2, 6);
Число 2 передается параметру a, а число 6 - параметру b.
Какие-то связанные данные удобно держать в виде массива. И, возможно, у нас возникнет необходимость передать весь этот набор данных в функцию. В общем случае мы можем передавать массив в качестве параметра и внутри функции обращаться к его отдельным элементам:
function printPerson(person) {
console.log("Name:", person[0]);
console.log("Age:", person[1]);
console.log("Email:", person[2]);
console.log("=========================");
}
const tom = ["Tom", 39, "tom@example.com"];
const bob = ["Bob", 43, "bob@example.com"];
printPerson(tom);
printPerson(bob);
В данном случае функция printPerson принимает массив, который, как предполагается, имеет три элемента. И внутри функции происходит обращение к этим элементам.
Но рассмотрим другую ситуацию, когда функция принимает данные в виде отдельных параметров. И в этом случае удобнее использовать spread-оператор:
function printPerson(username, age, email) {
console.log("Name:", username);
console.log("Age:", age);
console.log("Email:", email);
console.log("=========================");
}
const tom = ["Tom", 39, "tom@example.com"];
const bob = ["Bob", 43, "bob@example.com"];
printPerson(...tom);
printPerson(...bob);
Чтобы последовательно передать элементы массива параметрам функции перед именем массива указывается spread-оператор:
printPerson(...tom);
Это все равно, что если бы мы написали
printPerson(tom[0], tom[1], tom[2]);
только spread-оператор позволяет сделать передачу значений лаконичней.
Функция может принимать множество параметров, но при этом часть или все параметры могут быть необязательными. Если для параметров не передается значение, то по умолчанию они имеют значение "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.
JavaScript позволяет определять так называемые variadic function или функции с произвольным количеством параметров. Для этого можно использовать ряд инструментов.
При необходимости мы можем получить все переданные параметры через доступный внутри функции объект 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 sum(a, b, c){
console.log("a =", a);
console.log("b =", b);
console.log("c =", c);
let result = 0;
for(const n of arguments)
result += n;
console.log("result =", result);
}
sum(6, 4, 5, 8) // 23
Несмотря на то, что функция формально принимает 3 параметра, мы можем передать ей большее количество аргументов и получить их через массив arguments.
Консольный вывод программы:
a = 6 b = 4 c = 5 result = 23
Хотя мы можем перебрать объект arguments как массив, тем не менее это не массив. Хотя мы можем получить его длину с помощью
свойства length и обращаться к переданным в функцию аргументам, используя индекс:
function sum(nums){
let result = 0; // результат функции
if(arguments.length >=1) // если передан как минимум один параметр
{
result = result + arguments[0]; // обращаемся к первому параметру
}
if(arguments.length >=2) // если передано как минимум два параметра
{
result = result + arguments[1]; // обращаемся ко второму параметру
}
console.log("result =", result);
}
sum(6) // result = 6
sum(6, 5) // result = 11
sum(6, 5, 4) // result = 11 - третий параметр не учитывается
С помощью оператора ... (rest-оператор) также можно передать переменное количество значений:
function sum(...numbers){
let result = 0;
for(const n of numbers)
result += n;
console.log(result);
}
sum(6, 4, 5) // 15
В данном случае параметр ...numbers указывает, что вместо него можно передать разное количество значений. В самой функции numbers
фактически представляет массив переданных значений, которые мы можем получить. При этом несмотря на это, при вызове функции в нее передается не массив, а именно отдельные значения.
Подобные rest-параметры можно комбинировать с обычными параметрами:
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);
Здесь первое значение, передаваемое в функцию, будет интерпретироваться как значение для параметра season, все остальные значения перейдут параметру temps.
Консольный вывод:
Весна -2 -3 4 2 5 Лето 20 23 31
Третий способ передачи неопределенного количества данных представляет передача их через параметр-массив. Хотя формально параметр у нас один (количество параметров определено), тем не менее количество конкретных данных в этом массиве неопределенно (как и в случае с массивом arguments):
function sum(numbers){
let result = 0;
for(const n of numbers)
result += n;
console.log("result =", result);
}
const nums = [6, 4, 5, 8];
sum(nums) // result = 23
Функции могут выступать в качестве параметров других функций:
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.