In this post, I'm going to talk to you about a very important topic in the world of JavaScript functions: parameters (or arguments) and their effect on changing key values and references. You may not understand my sentence, no problem!
JavaScript functions can take values called parameters or arguments:
function functionName(parameter1, parameter2, parameter3) {
// The code we want to run
}The difference between the words "parameter" and "argument":
JavaScript functions do not perform any tests on their parameters, so there is no specified data type and you can pass any value to the functions. Due to this issue, if the functions are not given enough number of arguments (for example, we do not give one of the arguments to the function), the function will automatically replace those arguments with undefined value.
Sometimes this is not a problem, but it is better to always use the default values to avoid errors in your programs. Pay attention to the following example:
<!DOCTYPE html>
<html>
<body>
<p>Setting a default value to a function parameter.</p>
<p id="demo"></p>
<script>
function myFunction(x, y) {
if (y === undefined) {
y = 0;
}
return x * y;
}
document.getElementById("demo").innerHTML = myFunction(4);
</script>
</body>
</html>
In the same way and using an additional condition, I can prevent the creation of undefined values. Of course, the interesting point here is that in ECMAScript 2015 it can be done in a much easier way:
function (a=1, b=1) { // function code }What browsers support ECMAScript 2015? It's clear from the name! All modern browsers support it and you won't have any problems running your codes. Internet Explorer 9, Firefox 4, Chrome 5, Safari 5 and their later versions fully support it.
JavaScript functions have a built-in object called arguments object that contains an array of arguments that were used when the function was called. You can then use the function that gives you the largest value between different values:
<!DOCTYPE html>
<html>
<body>
<p>Finding the largest number.</p>
<p id="demo"></p>
<script>
function findMax() {
var i;
var max = -Infinity;
for(i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
document.getElementById("demo").innerHTML = findMax(4, 5, 6);
</script>
</body>
</html>
Note the words arguments and max in this function, these come from the arguments object.
You can also get the sum of different values in the same way:
<!DOCTYPE html>
<html>
<body>
<p>Sum of all arguments:</p>
<p id="demo"></p>
<script>
function sumAll() {
var i;
var sum = 0;
for(i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
document.getElementById("demo").innerHTML = sumAll(1, 123, 500, 115, 44, 88);
</script>
</body>
</html>You can see that I was able to get the sum of the values of our parameters easily and with a perhaps strange method. I must tell you that there are many ways to do this and this method is not the only one.
Arguments are Passed by Value: This means that the function only knows the values, not the location of the arguments. Therefore, if a function changes the value of the argument, the initial value of that parameter does not change. Let me put it more simply; pass by value means passing the value itself. So if we give a variable called X as an argument to a function:
<!DOCTYPE html>
<html>
<body>
<p id="OriginalValueOfX"></p>
<p id="NewValueOfX"></p>
<script>
var x = 10;
function passByValue (ValueOfX) {
ValueOfX++;
document.getElementById("NewValueOfX").innerHTML = ValueOfX;
}
passByValue(x);
document.getElementById("OriginalValueOfX").innerHTML = x;
</script>
</body>
</html>
In the example above, I first defined a variable called x and gave it the value 10. Then, inside a function called passByValue, I changed the value of x and added a number to it to make it equal to 11, but if you see the output, you will notice that the original value of x is not touched and is still the same as 10. Why? Because the arguments in JavaScript are of Pass by Value type; That is, they have nothing to do with the variable X, but take the value of x (i.e. the number 10) and perform the operation on the number 10. In this way, the variable x itself does not change.
Objects are Passed by Reference: Unlike arguments, objects are Passed by Reference, so if a function changes a property of a function, the original value of the property will also change. Pay attention to the following example:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var person = {
firstname:"Albro",
lastname:"Hive Blog",
age:27,
eyecolor:"blue"
};
function changeAge (){
person.age = 28;
}
changeAge();
document.getElementById("demo").innerHTML = person.firstname + " is " + person.age + " years old.";
</script>
</body>
</html>
Go to the output of the above code and remove the changeAge(); line. Look at the output and then add this line again. You can see that by executing the function, the property of the object changes completely. In Pass by reference, instead of taking the number 27 and giving it to the function, the age property itself, which refers to the number 27, is given to the function.