{"id":4721,"date":"2018-09-08T00:14:59","date_gmt":"2018-09-08T00:14:59","guid":{"rendered":"https:\/\/tinjurewp.com\/jsblog\/?p=2264"},"modified":"2018-09-08T00:14:59","modified_gmt":"2018-09-08T00:14:59","slug":"javascript-functions-parameters-vs-arguments","status":"publish","type":"post","link":"https:\/\/learncode.tinjurewp.com\/javascript-functions-parameters-vs-arguments\/","title":{"rendered":"JavaScript Functions &#8211; Parameters Vs Arguments"},"content":{"rendered":"<p class=\"note icon-note\"><strong>Note<\/strong>: This post is work-in-progress learning-note and still in active development and updated regularly.<\/p>\n<p>In JavaScript (JS), functions and objects are very important component of JS language, often use of the terms parameters and arguments seems to be used interchangeably. For beginners, this could be confusing. Yes. there is some difference between parameters and arguments.<\/p>\n<p>MDN defines <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Parameter\" target=\"_blank\" rel=\"noopener\">parameter<\/a> as \u201cnamed variable passed into a\u00a0<a class=\"glossaryLink\" title=\"function: A function is a code snippet that can be called by other code or by itself, or a variable that refers to the function. When a function is called, arguments are passed to the function as input, and the function can optionally return an output. A function in JavaScript is also an object.\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/function\">function<\/a>. Parameter variables are used to import\u00a0<a class=\"glossaryLink\" title=\"arguments: An argument is a value (primitive or object) passed as\u00a0input to a function.\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/argument\">arguments<\/a>\u00a0into functions\u201d.<\/p>\n<ul>\n<li><em>Parameters<\/em>: refers to variable name listed in the function definition.<\/li>\n<li><em>Arguments<\/em>: refers to the real values passed to (and received by) the function.<\/li>\n<\/ul>\n<h5>Are Parameters and Arguments Are Same?<\/h5>\n<p>The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Parameter\" target=\"_blank\" rel=\"noopener\">MDN<\/a> documentation lists following differences between parameters and arguments:<\/p>\n<ul>\n<li>Function parameters are the names listed in the function\u2019s definition.<\/li>\n<li>Function\u00a0<a class=\"glossaryLink\" title=\"arguments: An argument is a value (primitive or object) passed as\u00a0input to a function.\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/argument\">arguments<\/a>\u00a0are the real values passed to the function.<\/li>\n<li>Parameters are initialized to the values of the arguments supplied.<\/li>\n<\/ul>\n<p>To illustrate the above differences, lets examine an example using different number of parameters and arguments in a function:<\/p>\n<pre class=\"line-numbers\"><code class=\"language-javascript\">\/\/define myArg function four parameters\nfunction myArg(param1, param2, param3, param4) {\n   return param1 + param2 + param3 + param4;\n};\n\n\/\/invoke with equal arguments\nconsole.log(myArg(2,4,6,8)); \n\/\/OUTPUT\n20\n\/\/invoke with extra arguments\nconsole.log(myArg(2,4,6,8,10));\n\/\/OUTPUT\n20 \/\/extra argument is ignored\n\/\/invoking with missing arguments\nconsole.log(myArg(2,6));\n\/\/OUTPUT\nNaN<\/code><\/pre>\n<p>In the example above, <code>myArg()<\/code> function is defined to take four parameters. When the function is invoked with equal number of argument (line 7) we got expected output (line 9). When the <code>myArg()<\/code> was invoked with extra arguments (line 11) we still got expected output with any error, the extra argument was ignored. By default, extra arguments are not get assigned to any parameters.<\/p>\n<p>But when the <code>myArg()<\/code> was invoked with missing arguments, only two that is less than four defined in the function (line 15), the output was <code>NaN<\/code> (not defined number) but didn\u2019t throw any error. By default, any missing arguments is set to <code>undefined<\/code>, and thus <code>param2<\/code> and <code>param4<\/code> were assigned to <code>undefined<\/code> thus <code>2+undefined+6+undefined = NaN<\/code>. This demonstrates that there is difference between parameters and arguments.<\/p>\n<h4>The Arguments Object<\/h4>\n<p>The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/arguments\" target=\"_blank\" rel=\"noopener\">arguments object<\/a> could be confusing with respect to functions. The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/arguments\" target=\"_blank\" rel=\"noopener\">arguments<\/a> object is local variable in non-arrow functions. The MDN defines <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/arguments\" target=\"_blank\" rel=\"noopener\">arguments objects<\/a> as \u201c<em>an\u00a0<code>Array<\/code>-like object corresponding to the arguments passed to a function<\/em>\u201c.<\/p>\n<p>In the following example (adopted from <a href=\"https:\/\/codeburst.io\/parameters-arguments-in-javascript-eb1d8bd0ef04\" target=\"_blank\" rel=\"noopener\">Yash Agrawal\u2019s post<\/a>) use of <code>arguments<\/code> parameter is demonstrated. The <code>arguments<\/code> parameter is implicitly passed just like this parameter. It performs as a local variable which is accessible within all the functions which contains the entry of each arguments passed to that function.<\/p>\n<p>The <code>arguments<\/code> object is array-like which is used to access arguments passed to the function in cases when parameters defined in a function and do not match with the <code>arguments<\/code> used while invoking that function.<\/p>\n<pre class=\"line-numbers\"><code class=\"language-javascript\">\/\/define function with three parameter\nfunction argObj(param1, param2, param3) {\n  console.log(arguments.length); \/\/logs length of arguments passed\n  console.log(arguments[2]);\/\/ logs 3rd argument\n};\n\/\/invoke with six argument\nargObj(1,2,3,4,5,6);\n\/\/OUTPUT\n6 \/\/number of arguments passed\n3 \/\/ its the 3rd argument passed<\/code><\/pre>\n<p>In the example above, a<code>rguments.length<\/code> indicates that exact number of <em>arguments<\/em> passed (which may not match with number of <em>parameters<\/em> used in function definition (line 9). Individual <em>argument<\/em> can be accessed using array-like indexing notation (line 10).<\/p>\n<p>Because functions can take any number of arguments, before ES6 use of <code>arguments<\/code> object was the only way to dynamically get all the <em>argument(s<\/em>) of a function. <code>Arguments<\/code> object is array-like and iterable but it does not have other array properties like methods (eg.\u00a0 ). Unlike regular functions, <code>arrow functions<\/code> don\u2019t have <code>arguments<\/code> object. Arrow functions don\u2019t have their own <code>this<\/code> either.<\/p>\n<h5>Arrow Functions \u2013 No Arguments Object Binding<\/h5>\n<p>Because arrow functions don\u2019t have their own arguments object, if an arguments object is accessed it reference from outer enclosing scope or \u201cnormal\u201d function as shown below:<\/p>\n<pre class=\"line-numbers\"><code class=\"language-javascript\">\/\/assign arg array\nlet arguments = [2, 4, 6];\n\/\/using arrow function\nlet myArr = () =&gt; arguments[1];\n\/\/invoke function\nmyArr() \/\/ OUTPUT =&gt; 4\n\n\/\/Using Arrow Function\nfunction myFunc(x) {\n  let argObj = () =&gt; arguments[0] + x; \n  return argObj();\n}\n\/\/invoke myFunc\nmyFunc(5); \/\/OUTPUT =&gt; 10<\/code><\/pre>\n<p>In the example above (adopted from the MDN), arguments array with three items is initialized (line 2). Index number of the arguments array can be accessed using arrow function (line 4) which gets it from enclosing scope (line 2).<\/p>\n<p>Likewise, in a nested function example <code>argObj()<\/code> arrow function access argument by index (line 10) from outer (adjacent) <code>myFunc()<\/code> function scope (line 9) and returns correct output (line 14).<\/p>\n<pre class=\"line-numbers\"><code class=\"language-javascript\">\/\/using arguments in arrow function\nlet arrayFunc = () =&gt; {\n  console.log(arguments); \n}\n\/\/OUTPUT\nreference error: &#039;arguments&#039; not defined<\/code><\/pre>\n<p>In the above example, when arguments object is used in <code>arrayFunc()<\/code> arrow function (line 3) without an enclosing function, it throws <code>reference error: &#039;arguments&#039; not defined<\/code> (line 6).<\/p>\n<h5>Rest Parameters<\/h5>\n<p>In ES6, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/rest_parameters\">rest parameters<\/a> were introduced as a good alternative to using an <code>arguments<\/code> object. The rest parameters are the standard way of accessing an indefinite number of arguments in an array and manipulate inside a function scope, the arguments objects are less frequently used.<\/p>\n<p>The use of <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/rest_parameters\" target=\"_blank\" rel=\"noopener\">Rest Parameters<\/a> and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Spread_syntax\" target=\"_blank\" rel=\"noopener\">Spread Operators<\/a> will be discussed separately in another learning-note post.<\/p>\n<h5>Wrapping Up<\/h5>\n<p>In this learning-note post, we discussed the difference between parameters and arguments. We discussed how to access different number of arguments than those defined parameters with some examples. Use of arguments object accessing arguments parameters in functions (expression &amp; arrow) discussed. The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/rest_parameters\">rest parameters<\/a> introduced with ES6 as an alternative to using an <code>arguments<\/code> object will be discussed in more detail in a separate learning-note post.<\/p>\n<p>Related Topic: Understanding Rest Parameters and Spread Operator<\/p>\n<h5>Useful Resources &amp; Links<\/h5>\n<p>While preparing this post, I have referred the following references extensively. Visit original link for additional information.<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/arguments\" target=\"_blank\" rel=\"noopener\">Arguments Object<\/a> | MDN Documentation<\/li>\n<li><a href=\"https:\/\/javascript.info\/rest-parameters-spread-operator\" target=\"_blank\" rel=\"noopener\">Rest Parameters and Spread Operator<\/a> | The Modern JavaScript Tutorial<\/li>\n<li><a href=\"https:\/\/codeburst.io\/parameters-arguments-in-javascript-eb1d8bd0ef04\" target=\"_blank\" rel=\"noopener\">Parameters &amp; Arguments in JavaScript<\/a> | codeburst<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Note: This post is work-in-progress learning-note and still in active development and updated regularly. In JavaScript (JS), functions and objects are very important component of JS language, often use of the terms parameters and arguments seems to be used interchangeably. For beginners, this could be confusing. Yes. there is some difference between parameters and arguments. [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[41],"tags":[],"class_list":["post-4721","post","type-post","status-publish","format-standard","hentry","category-functions"],"_links":{"self":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/posts\/4721","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/comments?post=4721"}],"version-history":[{"count":0,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/posts\/4721\/revisions"}],"wp:attachment":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/media?parent=4721"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/categories?post=4721"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/tags?post=4721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}