Функции JavaScript: параметр против аргумента

Это была тема, которая еще на прошлой неделе была мне совершенно непонятна. Когда параметр и аргумент назывались одним и тем же словом, я бы так запутался! Я рад поделиться с вами тем, что я узнал по этому вопросу.

Параметры

Параметр используется в объявлениях функций. Это заполнитель — переменная. Мы присвоим ему значение при вызове нашей функции.

Например, учитывая функцию ниже:

function multiplyByTwo(whatever) {
   return whatever * 2;
};

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

Аргументы

Аргумент — это значение, которое передается в функцию, когда мы ее вызываем. В приведенном ниже примере 6 является нашим аргументом:

multiplyByTwo(6);

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

Вызывая нашу функцию в нашей консоли, 6 умножается на 2, и мы получаем:

//=> 12

Теперь давайте немного поиграем со словом «что угодно»…

Прежде всего, давайте создадим глобальную переменную с именем whatever и присвоим ей значение 10:

let whatever = 10;

Если мы вызовем переменную whatever, мы получим 10:

whatever;
//=> 10

Давайте снова вызовем нашу функцию и используем whatever (наша глобальная переменная) в качестве аргумента:

multiplyByTwo(whatever);
//=> 20

это потому, что whatever равно 10 и при умножении на 2 функция возвращает 20.

Присвоим нашей переменной новое значение:

whatever = 15;

вот что произойдет, если мы вызовем нашу функцию с whatever в качестве аргумента:

multiplyByTwo(whatever);
//=> 30

это потому, что whatever теперь равно 15 и при умножении на 2 функция возвращает 30.

Если бы мы передали новый аргумент при вызове нашей функции (например, число 8), то в результате мы бы получили вот что:

multiplyByTwo(8);
//=> 16

Введем еще одну функцию…

… он примет два параметра (a, b) и добавит их друг к другу:

function addTwoNumbers(a, b) {
   return a + b;
}

Давайте вызовем нашу новую функцию и используем (1, 2) в качестве аргументов:

addTwoNumbers(1, 2);
//=> 3

Теперь давайте вызовем нашу функцию multiplyByTwo и передадим нашу функцию addTwoNumbers в качестве аргумента. addTwoNumbers становится функцией обратного вызова:

multiplyByTwo(addTwoNumbers(1, 2));
//=> 6

числа 1 и 2 добавляются друг к другу в функции addTwoNumbers, а результат (3) передается в multiplyByTwo в качестве аргумента; затем он умножается на 2 в функции, и функция возвращает 6.

В итоге

Это весь приведенный выше код вместе, чтобы вы могли выполнять все шаги без перерывов:

function multiplyByTwo(whatever) {
   return whatever * 2;
};
multiplyByTwo(6);
//=>12
let whatever = 10;
whatever;
//=> 10
multiplyByTwo(whatever);
//=> 20
whatever = 15;
whatever;
//=> 15
multiplyByTwo(whatever);
//=> 30
multiplyByTwo(8);
//=> 16
function addTwoNumbers(a, b) {
   return a + b;
}
addTwoNumbers(1, 2);
//=> 3
multiplyByTwo(addTwoNumbers(1, 2));
//=> 6

Общепринятой практикой является избегать вызова переменных и параметров с одинаковыми именами. Но если вы столкнетесь с кодом, написанным наподобие приведенного выше, то теперь вы больше не запутаетесь :)

Вот небольшое дополнение к теме…

…когда функции задан параметр по умолчанию:

function readThisPost(answerToTheQuestion = 'yes'){
   console.log(`Do I have to read this post? Answer: ${doIHaveTo}`);
};
readThisPost();
//=> Do I have to read this post? Answer: yes
readThisPost('no');
//=> Do I have to read this post? Answer: no

Параметру answerToTheQuestion по умолчанию присваивается значение 'yes' в объявлении функции. Когда функция вызывается без передачи аргумента, функция по умолчанию принимает значение 'yes' в качестве аргумента. Но если мы передаем параметр 'no' при вызове функции, этот аргумент перезапишет параметр по умолчанию и вместо этого будет использоваться в функции.

Я надеюсь, что это было полезно! Если у вас есть какие-либо вопросы, пожалуйста, свяжитесь со мной :)

-Элизабет