[{"data":1,"prerenderedAt":1372},["ShallowReactive",2],{"blog-\u002Fblog\u002Fjavascript-function-types-parameters":3},{"id":4,"title":5,"body":6,"description":1357,"difficulty":1358,"extension":1359,"framework":1360,"frameworkSlug":1361,"meta":1362,"navigation":110,"order":114,"path":1363,"qaPath":1364,"seo":1365,"stem":1366,"subtopic":1367,"topic":1368,"topicSlug":1369,"updated":1370,"__hash__":1371},"blog\u002Fblog\u002Fjavascript-function-types-parameters.md","JavaScript Function Types & Parameters — Declarations, Arrows, Defaults and Rest",{"type":7,"value":8,"toc":1343},"minimark",[9,14,36,40,56,149,156,160,167,265,272,276,301,474,502,506,513,559,573,577,585,687,693,697,709,855,865,869,881,942,960,964,967,1049,1063,1067,1081,1166,1169,1173,1188,1260,1270,1274,1333,1339],[10,11,13],"h2",{"id":12},"so-many-ways-to-write-a-function","So many ways to write a function",[15,16,17,18,22,23,26,27,31,32,35],"p",{},"JavaScript offers several syntaxes for defining functions, each with different hoisting,\n",[19,20,21],"code",{},"this"," behavior, and use cases. It also has a flexible parameter system — defaults, rest\nparameters, destructuring, and the legacy ",[19,24,25],{},"arguments"," object. Knowing the distinctions lets\nyou pick the right tool and avoid surprises around binding and hoisting. This guide maps out\nthe function ",[28,29,30],"em",{},"types"," and the parameter ",[28,33,34],{},"features"," that go with them.",[10,37,39],{"id":38},"declarations-vs-expressions","Declarations vs expressions",[15,41,42,43,47,48,51,52,55],{},"A ",[44,45,46],"strong",{},"function declaration"," is a standalone statement; a ",[44,49,50],{},"function expression"," assigns a\nfunction to a variable. The crucial difference is ",[44,53,54],{},"hoisting",".",[57,58,63],"pre",{"className":59,"code":60,"language":61,"meta":62,"style":62},"language-js shiki shiki-themes github-light github-dark","sayHi()                          \u002F\u002F works — declarations are fully hoisted\nfunction sayHi() { return 'hi' }\n\nsayBye()                         \u002F\u002F TypeError — expression not yet assigned\nconst sayBye = function () { return 'bye' }\n","js","",[19,64,65,82,105,112,124],{"__ignoreMap":62},[66,67,70,74,78],"span",{"class":68,"line":69},"line",1,[66,71,73],{"class":72},"sScJk","sayHi",[66,75,77],{"class":76},"sVt8B","()                          ",[66,79,81],{"class":80},"sJ8bj","\u002F\u002F works — declarations are fully hoisted\n",[66,83,85,89,92,95,98,102],{"class":68,"line":84},2,[66,86,88],{"class":87},"szBVR","function",[66,90,91],{"class":72}," sayHi",[66,93,94],{"class":76},"() { ",[66,96,97],{"class":87},"return",[66,99,101],{"class":100},"sZZnC"," 'hi'",[66,103,104],{"class":76}," }\n",[66,106,108],{"class":68,"line":107},3,[66,109,111],{"emptyLinePlaceholder":110},true,"\n",[66,113,115,118,121],{"class":68,"line":114},4,[66,116,117],{"class":72},"sayBye",[66,119,120],{"class":76},"()                         ",[66,122,123],{"class":80},"\u002F\u002F TypeError — expression not yet assigned\n",[66,125,127,130,133,136,139,142,144,147],{"class":68,"line":126},5,[66,128,129],{"class":87},"const",[66,131,132],{"class":72}," sayBye",[66,134,135],{"class":87}," =",[66,137,138],{"class":87}," function",[66,140,141],{"class":76}," () { ",[66,143,97],{"class":87},[66,145,146],{"class":100}," 'bye'",[66,148,104],{"class":76},[15,150,151,152,155],{},"Declarations are hoisted entirely, so you can call them before their definition in the source.\nExpressions are not — the variable is hoisted but holds ",[19,153,154],{},"undefined"," until the assignment runs.\nUse declarations for top-level named functions; expressions when assigning conditionally or\npassing inline.",[10,157,159],{"id":158},"named-vs-anonymous-expressions","Named vs anonymous expressions",[15,161,162,163,166],{},"A function expression can be anonymous or carry a name. A ",[44,164,165],{},"named function expression"," helps\nin stack traces and allows the function to reference itself for recursion.",[57,168,170],{"className":59,"code":169,"language":61,"meta":62,"style":62},"const factorial = function fact(n) {\n  return n \u003C= 1 ? 1 : n * fact(n - 1)   \u002F\u002F can call itself by its internal name\n}\nfactorial(5)   \u002F\u002F 120\n\u002F\u002F fact is NOT visible outside the function body\n",[19,171,172,196,240,245,260],{"__ignoreMap":62},[66,173,174,176,179,181,183,186,189,193],{"class":68,"line":69},[66,175,129],{"class":87},[66,177,178],{"class":72}," factorial",[66,180,135],{"class":87},[66,182,138],{"class":87},[66,184,185],{"class":72}," fact",[66,187,188],{"class":76},"(",[66,190,192],{"class":191},"s4XuR","n",[66,194,195],{"class":76},") {\n",[66,197,198,201,204,207,211,214,216,219,221,224,226,229,232,234,237],{"class":68,"line":84},[66,199,200],{"class":87},"  return",[66,202,203],{"class":76}," n ",[66,205,206],{"class":87},"\u003C=",[66,208,210],{"class":209},"sj4cs"," 1",[66,212,213],{"class":87}," ?",[66,215,210],{"class":209},[66,217,218],{"class":87}," :",[66,220,203],{"class":76},[66,222,223],{"class":87},"*",[66,225,185],{"class":72},[66,227,228],{"class":76},"(n ",[66,230,231],{"class":87},"-",[66,233,210],{"class":209},[66,235,236],{"class":76},")   ",[66,238,239],{"class":80},"\u002F\u002F can call itself by its internal name\n",[66,241,242],{"class":68,"line":107},[66,243,244],{"class":76},"}\n",[66,246,247,250,252,255,257],{"class":68,"line":114},[66,248,249],{"class":72},"factorial",[66,251,188],{"class":76},[66,253,254],{"class":209},"5",[66,256,236],{"class":76},[66,258,259],{"class":80},"\u002F\u002F 120\n",[66,261,262],{"class":68,"line":126},[66,263,264],{"class":80},"\u002F\u002F fact is NOT visible outside the function body\n",[15,266,267,268,271],{},"The internal name (",[19,269,270],{},"fact",") is scoped to the function itself, keeping the outer namespace\nclean while enabling self-reference.",[10,273,275],{"id":274},"arrow-functions","Arrow functions",[15,277,278,280,281,297,298,300],{},[44,279,275],{}," are concise and, crucially, ",[44,282,283,284,286,287,289,290,293,294],{},"don't have their own ",[19,285,21],{},",\n",[19,288,25],{},", ",[19,291,292],{},"super",", or ",[19,295,296],{},"new.target"," — they inherit ",[19,299,21],{}," lexically from the surrounding\nscope. This makes them perfect for callbacks but unsuitable as methods or constructors.",[57,302,304],{"className":59,"code":303,"language":61,"meta":62,"style":62},"const add = (a, b) => a + b          \u002F\u002F implicit return\nconst square = n => n * n            \u002F\u002F single param, no parens needed\nconst makeObj = () => ({ x: 1 })     \u002F\u002F wrap object literal in parens\n\nclass Timer {\n  seconds = 0\n  start() {\n    setInterval(() => { this.seconds++ }, 1000)   \u002F\u002F `this` is the Timer\n  }\n}\n",[19,305,306,344,369,395,399,410,421,430,463,469],{"__ignoreMap":62},[66,307,308,310,313,315,318,321,323,326,329,332,335,338,341],{"class":68,"line":69},[66,309,129],{"class":87},[66,311,312],{"class":72}," add",[66,314,135],{"class":87},[66,316,317],{"class":76}," (",[66,319,320],{"class":191},"a",[66,322,289],{"class":76},[66,324,325],{"class":191},"b",[66,327,328],{"class":76},") ",[66,330,331],{"class":87},"=>",[66,333,334],{"class":76}," a ",[66,336,337],{"class":87},"+",[66,339,340],{"class":76}," b          ",[66,342,343],{"class":80},"\u002F\u002F implicit return\n",[66,345,346,348,351,353,356,359,361,363,366],{"class":68,"line":84},[66,347,129],{"class":87},[66,349,350],{"class":72}," square",[66,352,135],{"class":87},[66,354,355],{"class":191}," n",[66,357,358],{"class":87}," =>",[66,360,203],{"class":76},[66,362,223],{"class":87},[66,364,365],{"class":76}," n            ",[66,367,368],{"class":80},"\u002F\u002F single param, no parens needed\n",[66,370,371,373,376,378,381,383,386,389,392],{"class":68,"line":107},[66,372,129],{"class":87},[66,374,375],{"class":72}," makeObj",[66,377,135],{"class":87},[66,379,380],{"class":76}," () ",[66,382,331],{"class":87},[66,384,385],{"class":76}," ({ x: ",[66,387,388],{"class":209},"1",[66,390,391],{"class":76}," })     ",[66,393,394],{"class":80},"\u002F\u002F wrap object literal in parens\n",[66,396,397],{"class":68,"line":114},[66,398,111],{"emptyLinePlaceholder":110},[66,400,401,404,407],{"class":68,"line":126},[66,402,403],{"class":87},"class",[66,405,406],{"class":72}," Timer",[66,408,409],{"class":76}," {\n",[66,411,413,416,418],{"class":68,"line":412},6,[66,414,415],{"class":191},"  seconds",[66,417,135],{"class":87},[66,419,420],{"class":209}," 0\n",[66,422,424,427],{"class":68,"line":423},7,[66,425,426],{"class":72},"  start",[66,428,429],{"class":76},"() {\n",[66,431,433,436,439,441,444,446,449,452,455,458,460],{"class":68,"line":432},8,[66,434,435],{"class":72},"    setInterval",[66,437,438],{"class":76},"(() ",[66,440,331],{"class":87},[66,442,443],{"class":76}," { ",[66,445,21],{"class":209},[66,447,448],{"class":76},".seconds",[66,450,451],{"class":87},"++",[66,453,454],{"class":76}," }, ",[66,456,457],{"class":209},"1000",[66,459,236],{"class":76},[66,461,462],{"class":80},"\u002F\u002F `this` is the Timer\n",[66,464,466],{"class":68,"line":465},9,[66,467,468],{"class":76},"  }\n",[66,470,472],{"class":68,"line":471},10,[66,473,244],{"class":76},[15,475,476,477,479,480,483,484,486,487,490,491,494,495,497,498,501],{},"Because arrows capture ",[19,478,21],{}," lexically, the ",[19,481,482],{},"setInterval"," callback keeps the class instance's\n",[19,485,21],{}," — no ",[19,488,489],{},"bind"," needed. The flip side: you ",[44,492,493],{},"can't"," use an arrow as a method that needs its\nown ",[19,496,21],{},", or as a constructor (",[19,499,500],{},"new"," throws).",[10,503,505],{"id":504},"iife-immediately-invoked-function-expressions","IIFE — immediately invoked function expressions",[15,507,508,509,512],{},"An ",[44,510,511],{},"IIFE"," runs immediately and creates a private scope. Before block scoping and modules, it\nwas the main tool for avoiding global pollution.",[57,514,516],{"className":59,"code":515,"language":61,"meta":62,"style":62},"(function () {\n  const secret = 42       \u002F\u002F not visible outside\n  console.log(secret)\n})()\n",[19,517,518,527,543,554],{"__ignoreMap":62},[66,519,520,522,524],{"class":68,"line":69},[66,521,188],{"class":76},[66,523,88],{"class":87},[66,525,526],{"class":76}," () {\n",[66,528,529,532,535,537,540],{"class":68,"line":84},[66,530,531],{"class":87},"  const",[66,533,534],{"class":209}," secret",[66,536,135],{"class":87},[66,538,539],{"class":209}," 42",[66,541,542],{"class":80},"       \u002F\u002F not visible outside\n",[66,544,545,548,551],{"class":68,"line":107},[66,546,547],{"class":76},"  console.",[66,549,550],{"class":72},"log",[66,552,553],{"class":76},"(secret)\n",[66,555,556],{"class":68,"line":114},[66,557,558],{"class":76},"})()\n",[15,560,561,562,565,566,568,569,572],{},"Modern code uses block scope (",[19,563,564],{},"let","\u002F",[19,567,129],{},") and ES modules instead, but you'll still see\nIIFEs in older code and for one-off async setup (",[19,570,571],{},"(async () => { await init() })()",").",[10,574,576],{"id":575},"default-parameters","Default parameters",[15,578,579,581,582,584],{},[44,580,576],{}," supply a value when an argument is ",[19,583,154],{}," (not for other falsy\nvalues). Defaults can reference earlier parameters and are evaluated at call time.",[57,586,588],{"className":59,"code":587,"language":61,"meta":62,"style":62},"function greet(name, greeting = 'Hello') {\n  return `${greeting}, ${name}`\n}\ngreet('Ada')              \u002F\u002F 'Hello, Ada'\ngreet('Ada', undefined)   \u002F\u002F 'Hello, Ada' — undefined triggers the default\ngreet('Ada', null)        \u002F\u002F 'null, Ada' — null does NOT\n",[19,589,590,614,631,635,651,668],{"__ignoreMap":62},[66,591,592,594,597,599,602,604,607,609,612],{"class":68,"line":69},[66,593,88],{"class":87},[66,595,596],{"class":72}," greet",[66,598,188],{"class":76},[66,600,601],{"class":191},"name",[66,603,289],{"class":76},[66,605,606],{"class":191},"greeting",[66,608,135],{"class":87},[66,610,611],{"class":100}," 'Hello'",[66,613,195],{"class":76},[66,615,616,618,621,623,626,628],{"class":68,"line":84},[66,617,200],{"class":87},[66,619,620],{"class":100}," `${",[66,622,606],{"class":76},[66,624,625],{"class":100},"}, ${",[66,627,601],{"class":76},[66,629,630],{"class":100},"}`\n",[66,632,633],{"class":68,"line":107},[66,634,244],{"class":76},[66,636,637,640,642,645,648],{"class":68,"line":114},[66,638,639],{"class":72},"greet",[66,641,188],{"class":76},[66,643,644],{"class":100},"'Ada'",[66,646,647],{"class":76},")              ",[66,649,650],{"class":80},"\u002F\u002F 'Hello, Ada'\n",[66,652,653,655,657,659,661,663,665],{"class":68,"line":126},[66,654,639],{"class":72},[66,656,188],{"class":76},[66,658,644],{"class":100},[66,660,289],{"class":76},[66,662,154],{"class":209},[66,664,236],{"class":76},[66,666,667],{"class":80},"\u002F\u002F 'Hello, Ada' — undefined triggers the default\n",[66,669,670,672,674,676,678,681,684],{"class":68,"line":412},[66,671,639],{"class":72},[66,673,188],{"class":76},[66,675,644],{"class":100},[66,677,289],{"class":76},[66,679,680],{"class":209},"null",[66,682,683],{"class":76},")        ",[66,685,686],{"class":80},"\u002F\u002F 'null, Ada' — null does NOT\n",[15,688,689,690,55],{},"Defaults are evaluated left to right, so a later default can use an earlier parameter:\n",[19,691,692],{},"function range(start, end = start + 10) {...}",[10,694,696],{"id":695},"rest-parameters","Rest parameters",[15,698,42,699,317,702,705,706,708],{},[44,700,701],{},"rest parameter",[19,703,704],{},"...args",") gathers any number of trailing arguments into a real array.\nIt replaces the awkward ",[19,707,25],{}," object for variadic functions.",[57,710,712],{"className":59,"code":711,"language":61,"meta":62,"style":62},"function sum(...nums) {\n  return nums.reduce((a, b) => a + b, 0)   \u002F\u002F nums is a real array\n}\nsum(1, 2, 3, 4)   \u002F\u002F 10\n\nfunction log(level, ...messages) {   \u002F\u002F fixed param + rest\n  console.log(level, messages.join(' '))\n}\n",[19,713,714,731,769,773,802,806,831,851],{"__ignoreMap":62},[66,715,716,718,721,723,726,729],{"class":68,"line":69},[66,717,88],{"class":87},[66,719,720],{"class":72}," sum",[66,722,188],{"class":76},[66,724,725],{"class":87},"...",[66,727,728],{"class":191},"nums",[66,730,195],{"class":76},[66,732,733,735,738,741,744,746,748,750,752,754,756,758,761,764,766],{"class":68,"line":84},[66,734,200],{"class":87},[66,736,737],{"class":76}," nums.",[66,739,740],{"class":72},"reduce",[66,742,743],{"class":76},"((",[66,745,320],{"class":191},[66,747,289],{"class":76},[66,749,325],{"class":191},[66,751,328],{"class":76},[66,753,331],{"class":87},[66,755,334],{"class":76},[66,757,337],{"class":87},[66,759,760],{"class":76}," b, ",[66,762,763],{"class":209},"0",[66,765,236],{"class":76},[66,767,768],{"class":80},"\u002F\u002F nums is a real array\n",[66,770,771],{"class":68,"line":107},[66,772,244],{"class":76},[66,774,775,778,780,782,784,787,789,792,794,797,799],{"class":68,"line":114},[66,776,777],{"class":72},"sum",[66,779,188],{"class":76},[66,781,388],{"class":209},[66,783,289],{"class":76},[66,785,786],{"class":209},"2",[66,788,289],{"class":76},[66,790,791],{"class":209},"3",[66,793,289],{"class":76},[66,795,796],{"class":209},"4",[66,798,236],{"class":76},[66,800,801],{"class":80},"\u002F\u002F 10\n",[66,803,804],{"class":68,"line":126},[66,805,111],{"emptyLinePlaceholder":110},[66,807,808,810,813,815,818,820,822,825,828],{"class":68,"line":412},[66,809,88],{"class":87},[66,811,812],{"class":72}," log",[66,814,188],{"class":76},[66,816,817],{"class":191},"level",[66,819,289],{"class":76},[66,821,725],{"class":87},[66,823,824],{"class":191},"messages",[66,826,827],{"class":76},") {   ",[66,829,830],{"class":80},"\u002F\u002F fixed param + rest\n",[66,832,833,835,837,840,843,845,848],{"class":68,"line":423},[66,834,547],{"class":76},[66,836,550],{"class":72},[66,838,839],{"class":76},"(level, messages.",[66,841,842],{"class":72},"join",[66,844,188],{"class":76},[66,846,847],{"class":100},"' '",[66,849,850],{"class":76},"))\n",[66,852,853],{"class":68,"line":432},[66,854,244],{"class":76},[15,856,857,858,861,862,864],{},"The rest parameter must be ",[44,859,860],{},"last",", and unlike ",[19,863,25],{},", it's a genuine array with all the\narray methods available.",[10,866,868],{"id":867},"the-arguments-object","The arguments object",[15,870,871,872,876,877,880],{},"Inside regular (non-arrow) functions, ",[44,873,874],{},[19,875,25],{}," is an array-",[28,878,879],{},"like"," object holding all\npassed arguments. It predates rest parameters and has quirks.",[57,882,884],{"className":59,"code":883,"language":61,"meta":62,"style":62},"function old() {\n  return Array.from(arguments).reduce((a, b) => a + b, 0)   \u002F\u002F must convert first\n}\n",[19,885,886,895,938],{"__ignoreMap":62},[66,887,888,890,893],{"class":68,"line":69},[66,889,88],{"class":87},[66,891,892],{"class":72}," old",[66,894,429],{"class":76},[66,896,897,899,902,905,907,909,911,913,915,917,919,921,923,925,927,929,931,933,935],{"class":68,"line":84},[66,898,200],{"class":87},[66,900,901],{"class":76}," Array.",[66,903,904],{"class":72},"from",[66,906,188],{"class":76},[66,908,25],{"class":209},[66,910,572],{"class":76},[66,912,740],{"class":72},[66,914,743],{"class":76},[66,916,320],{"class":191},[66,918,289],{"class":76},[66,920,325],{"class":191},[66,922,328],{"class":76},[66,924,331],{"class":87},[66,926,334],{"class":76},[66,928,337],{"class":87},[66,930,760],{"class":76},[66,932,763],{"class":209},[66,934,236],{"class":76},[66,936,937],{"class":80},"\u002F\u002F must convert first\n",[66,939,940],{"class":68,"line":107},[66,941,244],{"class":76},[15,943,944,946,947,565,950,952,953,956,957,959],{},[19,945,25],{}," isn't a real array (no ",[19,948,949],{},"map",[19,951,740],{}," directly), and ",[44,954,955],{},"arrow functions don't have\nit at all",". Modern code should prefer rest parameters, which are cleaner and array-native.\nReach for ",[19,958,25],{}," only in legacy contexts.",[10,961,963],{"id":962},"parameter-destructuring","Parameter destructuring",[15,965,966],{},"You can destructure objects or arrays right in the parameter list, often with defaults — a\nclean way to accept \"options\" objects.",[57,968,970],{"className":59,"code":969,"language":61,"meta":62,"style":62},"function createUser({ name, role = 'user', active = true } = {}) {\n  return { name, role, active }\n}\ncreateUser({ name: 'Ada' })          \u002F\u002F { name: 'Ada', role: 'user', active: true }\ncreateUser()                          \u002F\u002F works — the `= {}` default prevents a crash\n",[19,971,972,1013,1020,1024,1040],{"__ignoreMap":62},[66,973,974,976,979,982,984,986,989,991,994,996,999,1001,1004,1007,1010],{"class":68,"line":69},[66,975,88],{"class":87},[66,977,978],{"class":72}," createUser",[66,980,981],{"class":76},"({ ",[66,983,601],{"class":191},[66,985,289],{"class":76},[66,987,988],{"class":191},"role",[66,990,135],{"class":87},[66,992,993],{"class":100}," 'user'",[66,995,289],{"class":76},[66,997,998],{"class":191},"active",[66,1000,135],{"class":87},[66,1002,1003],{"class":209}," true",[66,1005,1006],{"class":76}," } ",[66,1008,1009],{"class":87},"=",[66,1011,1012],{"class":76}," {}) {\n",[66,1014,1015,1017],{"class":68,"line":84},[66,1016,200],{"class":87},[66,1018,1019],{"class":76}," { name, role, active }\n",[66,1021,1022],{"class":68,"line":107},[66,1023,244],{"class":76},[66,1025,1026,1029,1032,1034,1037],{"class":68,"line":114},[66,1027,1028],{"class":72},"createUser",[66,1030,1031],{"class":76},"({ name: ",[66,1033,644],{"class":100},[66,1035,1036],{"class":76}," })          ",[66,1038,1039],{"class":80},"\u002F\u002F { name: 'Ada', role: 'user', active: true }\n",[66,1041,1042,1044,1046],{"class":68,"line":126},[66,1043,1028],{"class":72},[66,1045,77],{"class":76},[66,1047,1048],{"class":80},"\u002F\u002F works — the `= {}` default prevents a crash\n",[15,1050,1051,1052,1055,1056,1059,1060,1062],{},"The trailing ",[19,1053,1054],{},"= {}"," is important: without it, calling ",[19,1057,1058],{},"createUser()"," with no argument would try\nto destructure ",[19,1061,154],{}," and throw. Always default the destructured parameter itself.",[10,1064,1066],{"id":1065},"function-metadata-length-and-name","Function metadata: length and name",[15,1068,1069,1070,1073,1074,1077,1078,1080],{},"Functions expose a couple of introspective properties. ",[19,1071,1072],{},"length"," is the number of parameters\n",[44,1075,1076],{},"before"," the first default or rest; ",[19,1079,601],{}," is the function's name (inferred for\nexpressions).",[57,1082,1084],{"className":59,"code":1083,"language":61,"meta":62,"style":62},"function f(a, b, c = 1, ...rest) {}\nf.length   \u002F\u002F 2 — counts a, b only (stops at the default)\nf.name     \u002F\u002F 'f'\n\nconst g = () => {}\ng.name     \u002F\u002F 'g' — inferred from the variable\n",[19,1085,1086,1120,1130,1138,1142,1158],{"__ignoreMap":62},[66,1087,1088,1090,1093,1095,1097,1099,1101,1103,1106,1108,1110,1112,1114,1117],{"class":68,"line":69},[66,1089,88],{"class":87},[66,1091,1092],{"class":72}," f",[66,1094,188],{"class":76},[66,1096,320],{"class":191},[66,1098,289],{"class":76},[66,1100,325],{"class":191},[66,1102,289],{"class":76},[66,1104,1105],{"class":191},"c",[66,1107,135],{"class":87},[66,1109,210],{"class":209},[66,1111,289],{"class":76},[66,1113,725],{"class":87},[66,1115,1116],{"class":191},"rest",[66,1118,1119],{"class":76},") {}\n",[66,1121,1122,1125,1127],{"class":68,"line":84},[66,1123,1124],{"class":76},"f.",[66,1126,1072],{"class":209},[66,1128,1129],{"class":80},"   \u002F\u002F 2 — counts a, b only (stops at the default)\n",[66,1131,1132,1135],{"class":68,"line":107},[66,1133,1134],{"class":76},"f.name     ",[66,1136,1137],{"class":80},"\u002F\u002F 'f'\n",[66,1139,1140],{"class":68,"line":114},[66,1141,111],{"emptyLinePlaceholder":110},[66,1143,1144,1146,1149,1151,1153,1155],{"class":68,"line":126},[66,1145,129],{"class":87},[66,1147,1148],{"class":72}," g",[66,1150,135],{"class":87},[66,1152,380],{"class":76},[66,1154,331],{"class":87},[66,1156,1157],{"class":76}," {}\n",[66,1159,1160,1163],{"class":68,"line":412},[66,1161,1162],{"class":76},"g.name     ",[66,1164,1165],{"class":80},"\u002F\u002F 'g' — inferred from the variable\n",[15,1167,1168],{},"These are occasionally used by libraries (e.g. dependency injection inspecting arity), but\nmostly they're good to understand for debugging.",[10,1170,1172],{"id":1171},"methods-vs-standalone-functions","Methods vs standalone functions",[15,1174,1175,1176,1179,1180,1182,1183,1185,1186,55],{},"A function stored as an object property is a ",[44,1177,1178],{},"method",", and its ",[19,1181,21],{}," depends on how it's\ncalled. Detaching a method loses its ",[19,1184,21],{}," — a frequent bug fixed by arrow-function fields or\n",[19,1187,489],{},[57,1189,1191],{"className":59,"code":1190,"language":61,"meta":62,"style":62},"const counter = {\n  count: 0,\n  increment() { this.count++ }   \u002F\u002F method — `this` is `counter` when called as counter.increment()\n}\nconst fn = counter.increment\nfn()   \u002F\u002F `this` is undefined (strict) — detached\n",[19,1192,1193,1204,1213,1233,1237,1249],{"__ignoreMap":62},[66,1194,1195,1197,1200,1202],{"class":68,"line":69},[66,1196,129],{"class":87},[66,1198,1199],{"class":209}," counter",[66,1201,135],{"class":87},[66,1203,409],{"class":76},[66,1205,1206,1209,1211],{"class":68,"line":84},[66,1207,1208],{"class":76},"  count: ",[66,1210,763],{"class":209},[66,1212,286],{"class":76},[66,1214,1215,1218,1220,1222,1225,1227,1230],{"class":68,"line":107},[66,1216,1217],{"class":72},"  increment",[66,1219,94],{"class":76},[66,1221,21],{"class":209},[66,1223,1224],{"class":76},".count",[66,1226,451],{"class":87},[66,1228,1229],{"class":76}," }   ",[66,1231,1232],{"class":80},"\u002F\u002F method — `this` is `counter` when called as counter.increment()\n",[66,1234,1235],{"class":68,"line":114},[66,1236,244],{"class":76},[66,1238,1239,1241,1244,1246],{"class":68,"line":126},[66,1240,129],{"class":87},[66,1242,1243],{"class":209}," fn",[66,1245,135],{"class":87},[66,1247,1248],{"class":76}," counter.increment\n",[66,1250,1251,1254,1257],{"class":68,"line":412},[66,1252,1253],{"class":72},"fn",[66,1255,1256],{"class":76},"()   ",[66,1258,1259],{"class":80},"\u002F\u002F `this` is undefined (strict) — detached\n",[15,1261,1262,1263,1265,1266,1269],{},"Understanding that ",[19,1264,21],{}," is determined by the ",[44,1267,1268],{},"call site",", not where the function is\ndefined, is the key to avoiding these traps.",[10,1271,1273],{"id":1272},"key-takeaways","Key takeaways",[1275,1276,1277,1288,1300,1308,1318,1326],"ul",{},[1278,1279,1280,1283,1284,1287],"li",{},[44,1281,1282],{},"Declarations"," are fully hoisted; ",[44,1285,1286],{},"expressions"," are not — pick based on whether you need\nto call before defining.",[1278,1289,1290,1292,1293,565,1295,565,1297,1299],{},[44,1291,275],{}," have no own ",[19,1294,21],{},[19,1296,25],{},[19,1298,292],{}," and can't be constructors —\nideal for callbacks, wrong for methods.",[1278,1301,1302,1304,1305,1307],{},[44,1303,576],{}," fill in for ",[19,1306,154],{}," only and can reference earlier params.",[1278,1309,1310,317,1312,1314,1315,1317],{},[44,1311,696],{},[19,1313,704],{},") give a real array of extra arguments — prefer them over the\narray-like ",[19,1316,25],{}," object (absent in arrows).",[1278,1319,1320,1322,1323,1325],{},[44,1321,963],{}," with a ",[19,1324,1054],{}," default cleanly handles options objects.",[1278,1327,1328,1330,1331,55],{},[19,1329,21],{}," is set by the call site; detached methods lose it — use arrows or ",[19,1332,489],{},[15,1334,1335,1336,1338],{},"Knowing each function form's hoisting and ",[19,1337,21],{}," behavior — plus the modern parameter features —\nlets you write functions that behave exactly as you intend, with no binding surprises.",[1340,1341,1342],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":62,"searchDepth":84,"depth":84,"links":1344},[1345,1346,1347,1348,1349,1350,1351,1352,1353,1354,1355,1356],{"id":12,"depth":84,"text":13},{"id":38,"depth":84,"text":39},{"id":158,"depth":84,"text":159},{"id":274,"depth":84,"text":275},{"id":504,"depth":84,"text":505},{"id":575,"depth":84,"text":576},{"id":695,"depth":84,"text":696},{"id":867,"depth":84,"text":868},{"id":962,"depth":84,"text":963},{"id":1065,"depth":84,"text":1066},{"id":1171,"depth":84,"text":1172},{"id":1272,"depth":84,"text":1273},"A complete guide to JavaScript function types and parameters — declarations vs expressions vs arrows, default and rest parameters, the arguments object, and parameter destructuring.","medium","md","JavaScript","javascript",{},"\u002Fblog\u002Fjavascript-function-types-parameters","\u002Fjavascript\u002Ffunctions\u002Ffunction-types-parameters",{"title":5,"description":1357},"blog\u002Fjavascript-function-types-parameters","Function Types & Parameters","Functions","functions","2026-06-18","vkYMapxiFPe_7OR9M5Q2vesFZDNK1SMMRCmNAIvP4YQ",1781808673080]