{"id":3311,"date":"2018-03-17T17:42:22","date_gmt":"2018-03-17T12:12:22","guid":{"rendered":"https:\/\/code4developers.com\/?p=3311"},"modified":"2020-06-16T18:29:23","modified_gmt":"2020-06-16T12:59:23","slug":"default-parameter-in-a-javascript-function","status":"publish","type":"post","link":"https:\/\/code4developers.com\/default-parameter-in-a-javascript-function\/","title":{"rendered":"Default Parameter in JavaScript function"},"content":{"rendered":"

In any programming language we often require having default parameter or default value for the parameter in a function. JavaScript allow us to initialize parameter a default value. If you are not passing any value to the parameter, then the default value of the parameter will be undefined.<\/b><\/i><\/p>\n

<\/p>\n

Let’s consider below code:<\/p>\n

function addition(num1, num2) {\r\n  return num1 + num2;\r\n}\r\naddition();<\/pre>\n
Here, you are calling function “addition()” in which you are not passing any parameter. So, the default value for the parameters “num1” and “num2” will be set to undefined<\/b>.<\/p>\n
Now in past if you want to set a default value to the “num1” and “num2” you have to do it like:<\/p>\n
function addition(num1, num2) {\r\n     if(num1 === undefined){\r\n          num1 = 10;\r\n     }\r\n     if(num2 === undefined){\r\n          num2 = 20;\r\n     }\r\n     return num1 + num2;\r\n}\r\naddition();<\/pre>\n
In ECMA 2015 features ECMAScript 6 has introduced a default parameter feature, in which it allows us to set default value to the parameter of a function. So for the function “addition()” if you want to assign a parameters with default values, you have to write below code:<\/p>\n
function addition(num1 = 10, num2 = 20) {\r\n     return num1 + num2;\r\n}\r\naddition();<\/pre>\n
In above code while calling function “addition()” we are not passing any parameter. So, as we have assigned default values to the parameters, “num1” will be assigned value 10 and “num2” will be assigned a value 20 so the function will return the answer “30”.<\/p>\n
Experiment 1: Passing an Undefined<\/h4>\n
function addition(num1 = 10, num2 = 20) { \r\n  return num1 + num2; \r\n} \r\naddition(undefined, undefined);<\/pre>\n
In above code we are passing “undefined” for both arguments of the function, so the function again will return the answer “30”.<\/p>\n
Experiment 2: Passing an Parameter in Parameter<\/h4>\n
function addition(num1 = 10, num2 = num1 + 10) { \r\n  return num1 + num2; \r\n} \r\naddition();<\/pre>\n
In above code we are passing “num1” as a value to the “num2”. This will work fine, and the function will return an answer “30”.<\/p>\n
Experiment 3: Passing a function in Parameter<\/h4>\n
function addition(num1 = 10, num2 = getValue()) { \r\n  return num1 + num2; \r\n} \r\n\r\nfunction getValue() {\r\n  return 20;\r\n}\r\naddition();<\/pre>\n
In above code we are calling a function “getValue()” to assign a default value to the parameter “num2”. When we will call function “addition()”, at run time function “getValue()” will be called and value 20 will be assigned to the parameter “num2”. So, the function will return an answer 30.<\/p>\n
Interested in JavaScript? Click here to read more JavaScript articles in Code4Developers<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
In any programming language we often require having default parameter or default value for the parameter in a function. JavaScript allow us to initialize parameter a default value. If you…<\/p>\n","protected":false},"author":4,"featured_media":3127,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2],"tags":[785,783,22,786],"powerkit_post_featured":[],"class_list":{"0":"post-3311","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-default-parameter","9":"tag-function","10":"tag-javascript","11":"tag-parameter"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-Rp","jetpack-related-posts":[{"id":3318,"url":"https:\/\/code4developers.com\/arguments-object-javascript-function\/","url_meta":{"origin":3311,"position":0},"title":"arguments object in JavaScript function","author":"Yatendrasinh Joddha","date":"March 19, 2018","format":false,"excerpt":"The arguments object is an Array-like object matching to the arguments passed to a function. The arguments object is a local variable available within all (non-arrow) functions. You can refer to a function's arguments within the function by using the arguments object.Let's consider below code: function addition(num1, num2) { return\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":3321,"url":"https:\/\/code4developers.com\/spread-syntax-in-javascript\/","url_meta":{"origin":3311,"position":1},"title":"Spread syntax (three dots) in JavaScript","author":"Yatendrasinh Joddha","date":"March 21, 2018","format":false,"excerpt":"Spread syntax which is used by typing three dots (...) in JavaScript. It allows an array expression or string or anything which can be iterating to be expanded in places where zero or more arguments for function calls\u00a0or elements for array are expected. It can also be used for an\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":3106,"url":"https:\/\/code4developers.com\/javascript-template-literals\/","url_meta":{"origin":3311,"position":2},"title":"Javascript: What Are Template Literals?","author":"Arif Khoja","date":"September 30, 2017","format":false,"excerpt":"ES6 introduced two types of literals: Template Literals and Tagged Template Literals to tag Template Literals. In this post, we cover both of them in depth! In ES6, two types of literals were introduced: Template Literals for string concatenation and expression embedding in a string Tagged Template Literals to tag\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/thumb-1-e1498942297714.png?fit=240%2C269&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3779,"url":"https:\/\/code4developers.com\/currencypipe-percentpipe\/","url_meta":{"origin":3311,"position":3},"title":"Pipes in Angular Part \u2013 3 : CurrencyPipe, PercentPipe","author":"Yatendrasinh Joddha","date":"July 3, 2018","format":false,"excerpt":"Here is the third installment of angular pipe series in this part we will discuss about CurrencyPipe, and PercentPipe, If you have not read previous articles here is the link for previous articles. Pipes in Angular Part \u2013 1 : lowercase, uppercase, and titlecase pipes Pipes in Angular Part \u2013\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"digitsInfo","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/07\/digitsInfo.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/07\/digitsInfo.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/07\/digitsInfo.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/07\/digitsInfo.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/07\/digitsInfo.png?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":4103,"url":"https:\/\/code4developers.com\/top-array-hacks\/","url_meta":{"origin":3311,"position":4},"title":"Top Array Hacks","author":"Arif Khoja","date":"March 14, 2019","format":false,"excerpt":"Arrays are everywhere in JavaScript and with the new\u00a0spread operators\u00a0introduced in ECMAScript 6, you can do awesome things with them. In this post I will show you 3 useful tricks you can use when programming. 1. Iterating through an empty\u00a0array JavaScript arrays are sparse in nature in that there are\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":2975,"url":"https:\/\/code4developers.com\/event-capturing-bubbling-javascript\/","url_meta":{"origin":3311,"position":5},"title":"Event Capturing and Bubbling in JavaScript","author":"Yatendrasinh Joddha","date":"July 21, 2017","format":false,"excerpt":"The DOM has two approaches for object to sense events: first is top down approach and second is bottom up approach. Top down approach is called event capturing\u00a0whereas bottom up is known as event bubbling. Let\u2019s start with example where you have one html which contains 
, 
 under 
,\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=3311"}],"version-history":[{"count":9,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3311\/revisions"}],"predecessor-version":[{"id":3399,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3311\/revisions\/3399"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/3127"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=3311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=3311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=3311"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=3311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}