[{"data":1,"prerenderedAt":817},["ShallowReactive",2],{"cache-\u002Fcache\u002Fpass-by-reference-or-value":3},{"id":4,"title":5,"added":6,"body":7,"category":803,"cover":803,"coverSmall":803,"description":804,"expires":803,"extension":805,"external_url":803,"hash":806,"language":803,"meta":807,"navigation":96,"path":808,"pinned":809,"related":803,"seo":810,"series":803,"slug":811,"status":812,"stem":813,"subcategory":803,"tags":814,"updated":803,"version":803,"__hash__":816},"cache\u002Fcache\u002F2025\u002F03\u002Fpass-by-reference-or-value.md","Pass by Reference, Pass by Value","2025-03-20",{"type":8,"value":9,"toc":793},"minimark",[10,14,20,27,35,44,60,64,69,72,296,300,307,407,410,414,417,420,567,570,779,782,786,789],[11,12,13],"p",{},"I've never been a great test taker and that extends to a situation I recently found myself in... interviewing for a job. As part of the interview I had to answer some relatively easy technical questions. A few on JavaScript proficiency and a few general \"no right or wrong, how would I do this\" kind of questions. However, one of these questions in particular caught me off guard.",[15,16,17],"blockquote",{},[11,18,19],{},"Could I explain Pass by Value vs. Pass by Reference in JavaScript?",[11,21,22,26],{},[23,24,25],"strong",{},"Dang it",". I may have well been trying to explain my browser history to my grandma. I was floundering. It's not that I just completely didn't understand this, I've been working with this stuff for years, but as things go this was a test and as we already know... I'm not a great test taker.",[11,28,29,30,34],{},"After the interview I immediately started a ",[31,32,33],"del",{},"quick"," rather long deep dive down the interwebs to figure out the error of my ways so that next time maybe I'll flounder a little less, and if you're reading this maybe you will too.",[36,37,39,40,43],"h2",{"id":38},"some-things-ive-grokked-through-science-research","Some things I've grokked through ",[31,41,42],{},"science"," research",[45,46,47,51,54,57],"ul",{},[48,49,50],"li",{},"I've found that although this is a mostly foundational concept, it does still confuse a lot of people.",[48,52,53],{},"Pass by value and pass by reference in JavaScript is different than in other languages... for better or worse. My cousin told me worse but I think the jury is still out.",[48,55,56],{},"When you assign a variable it takes up a specific location in memory and that's an important concept to remember.",[48,58,59],{},"Anything that is not a JavaScript primitive type is passed by reference. That means objects, arrays, functions.",[36,61,63],{"id":62},"the-nitty-gritty","The Nitty-Gritty",[65,66,68],"h3",{"id":67},"pass-by-value","Pass by Value",[11,70,71],{},"JavaScript's primitive types (strings, numbers, booleans, etc.) are passed by value. This means that when passing them to a function or assigning them to a new variable, you're actually creating a copy of the original value.",[73,74,79],"pre",{"className":75,"code":76,"language":77,"meta":78,"style":78},"language-js shiki shiki-themes github-light github-dark","\u002F\u002F Let's see pass by value in action\n\nlet myAge = 35; \u002F\u002F Let's just pretend this is my age\nlet yourAge = myAge; \u002F\u002F yourAge gets a COPY of myAge's value\n\nyourAge = 25; \u002F\u002F Changing yourAge doesn't affect myAge\nconsole.log(myAge); \u002F\u002F Still 35\nconsole.log(yourAge); \u002F\u002F 25\n\n\u002F\u002F Function parameters work the same way\nfunction addFiveYears(age) {\n    age = age + 5; \u002F\u002F This only affects the local copy\n    console.log('Inside function:', age);\n}\n\naddFiveYears(myAge); \u002F\u002F Logs \"Inside function: 40\"\nconsole.log('Original age:', myAge); \u002F\u002F Still 35\n","js","",[80,81,82,91,98,122,138,143,159,175,188,193,199,218,240,257,263,268,279],"code",{"__ignoreMap":78},[83,84,87],"span",{"class":85,"line":86},"line",1,[83,88,90],{"class":89},"sJ8bj","\u002F\u002F Let's see pass by value in action\n",[83,92,94],{"class":85,"line":93},2,[83,95,97],{"emptyLinePlaceholder":96},true,"\n",[83,99,101,105,109,112,116,119],{"class":85,"line":100},3,[83,102,104],{"class":103},"szBVR","let",[83,106,108],{"class":107},"sVt8B"," myAge ",[83,110,111],{"class":103},"=",[83,113,115],{"class":114},"sj4cs"," 35",[83,117,118],{"class":107},"; ",[83,120,121],{"class":89},"\u002F\u002F Let's just pretend this is my age\n",[83,123,125,127,130,132,135],{"class":85,"line":124},4,[83,126,104],{"class":103},[83,128,129],{"class":107}," yourAge ",[83,131,111],{"class":103},[83,133,134],{"class":107}," myAge; ",[83,136,137],{"class":89},"\u002F\u002F yourAge gets a COPY of myAge's value\n",[83,139,141],{"class":85,"line":140},5,[83,142,97],{"emptyLinePlaceholder":96},[83,144,146,149,151,154,156],{"class":85,"line":145},6,[83,147,148],{"class":107},"yourAge ",[83,150,111],{"class":103},[83,152,153],{"class":114}," 25",[83,155,118],{"class":107},[83,157,158],{"class":89},"\u002F\u002F Changing yourAge doesn't affect myAge\n",[83,160,162,165,169,172],{"class":85,"line":161},7,[83,163,164],{"class":107},"console.",[83,166,168],{"class":167},"sScJk","log",[83,170,171],{"class":107},"(myAge); ",[83,173,174],{"class":89},"\u002F\u002F Still 35\n",[83,176,178,180,182,185],{"class":85,"line":177},8,[83,179,164],{"class":107},[83,181,168],{"class":167},[83,183,184],{"class":107},"(yourAge); ",[83,186,187],{"class":89},"\u002F\u002F 25\n",[83,189,191],{"class":85,"line":190},9,[83,192,97],{"emptyLinePlaceholder":96},[83,194,196],{"class":85,"line":195},10,[83,197,198],{"class":89},"\u002F\u002F Function parameters work the same way\n",[83,200,202,205,208,211,215],{"class":85,"line":201},11,[83,203,204],{"class":103},"function",[83,206,207],{"class":167}," addFiveYears",[83,209,210],{"class":107},"(",[83,212,214],{"class":213},"s4XuR","age",[83,216,217],{"class":107},") {\n",[83,219,221,224,226,229,232,235,237],{"class":85,"line":220},12,[83,222,223],{"class":107},"    age ",[83,225,111],{"class":103},[83,227,228],{"class":107}," age ",[83,230,231],{"class":103},"+",[83,233,234],{"class":114}," 5",[83,236,118],{"class":107},[83,238,239],{"class":89},"\u002F\u002F This only affects the local copy\n",[83,241,243,246,248,250,254],{"class":85,"line":242},13,[83,244,245],{"class":107},"    console.",[83,247,168],{"class":167},[83,249,210],{"class":107},[83,251,253],{"class":252},"sZZnC","'Inside function:'",[83,255,256],{"class":107},", age);\n",[83,258,260],{"class":85,"line":259},14,[83,261,262],{"class":107},"}\n",[83,264,266],{"class":85,"line":265},15,[83,267,97],{"emptyLinePlaceholder":96},[83,269,271,274,276],{"class":85,"line":270},16,[83,272,273],{"class":167},"addFiveYears",[83,275,171],{"class":107},[83,277,278],{"class":89},"\u002F\u002F Logs \"Inside function: 40\"\n",[83,280,282,284,286,288,291,294],{"class":85,"line":281},17,[83,283,164],{"class":107},[83,285,168],{"class":167},[83,287,210],{"class":107},[83,289,290],{"class":252},"'Original age:'",[83,292,293],{"class":107},", myAge); ",[83,295,174],{"class":89},[65,297,299],{"id":298},"pass-by-reference","Pass by Reference",[11,301,302,303,306],{},"Objects in JavaScript (including arrays and functions) are passed by reference. What this means is that unlike when passing by value, these variables do not create a new spot in memory, they just ",[23,304,305],{},"reference"," the original. A reference is just a pointer to where the actual data lives.",[73,308,310],{"className":75,"code":309,"language":77,"meta":78,"style":78},"\u002F\u002F Pass by reference example\n\nlet bestHomie = { name: 'Matt', age: 35 };\n\nfunction addOneYear(homie) {\n    homie.age += 1; \u002F\u002F This changes the original object!\n}\n\naddOneYear(bestHomie);\nconsole.log(bestHomie); \u002F\u002F {\"name\": \"Matt\", \"age\": 36} - The original was modified\n",[80,311,312,317,321,345,349,363,379,383,387,395],{"__ignoreMap":78},[83,313,314],{"class":85,"line":86},[83,315,316],{"class":89},"\u002F\u002F Pass by reference example\n",[83,318,319],{"class":85,"line":93},[83,320,97],{"emptyLinePlaceholder":96},[83,322,323,325,328,330,333,336,339,342],{"class":85,"line":100},[83,324,104],{"class":103},[83,326,327],{"class":107}," bestHomie ",[83,329,111],{"class":103},[83,331,332],{"class":107}," { name: ",[83,334,335],{"class":252},"'Matt'",[83,337,338],{"class":107},", age: ",[83,340,341],{"class":114},"35",[83,343,344],{"class":107}," };\n",[83,346,347],{"class":85,"line":124},[83,348,97],{"emptyLinePlaceholder":96},[83,350,351,353,356,358,361],{"class":85,"line":140},[83,352,204],{"class":103},[83,354,355],{"class":167}," addOneYear",[83,357,210],{"class":107},[83,359,360],{"class":213},"homie",[83,362,217],{"class":107},[83,364,365,368,371,374,376],{"class":85,"line":145},[83,366,367],{"class":107},"    homie.age ",[83,369,370],{"class":103},"+=",[83,372,373],{"class":114}," 1",[83,375,118],{"class":107},[83,377,378],{"class":89},"\u002F\u002F This changes the original object!\n",[83,380,381],{"class":85,"line":161},[83,382,262],{"class":107},[83,384,385],{"class":85,"line":177},[83,386,97],{"emptyLinePlaceholder":96},[83,388,389,392],{"class":85,"line":190},[83,390,391],{"class":167},"addOneYear",[83,393,394],{"class":107},"(bestHomie);\n",[83,396,397,399,401,404],{"class":85,"line":195},[83,398,164],{"class":107},[83,400,168],{"class":167},[83,402,403],{"class":107},"(bestHomie); ",[83,405,406],{"class":89},"\u002F\u002F {\"name\": \"Matt\", \"age\": 36} - The original was modified\n",[11,408,409],{},"Because of this, when making changes, the referenced variable is changed. Not some copy of the variable in some other deep dark shadowy spot in memory.",[65,411,413],{"id":412},"in-the-immortal-words-of-run-dmc-its-tricky","In the immortal words of Run DMC, \"It's tricky\"",[11,415,416],{},"There are a couple of nuances with references that can trip up even the best of us:",[11,418,419],{},"First, JavaScript compares object references, not their content:",[73,421,423],{"className":75,"code":422,"language":77,"meta":78,"style":78},"\u002F\u002F References vs content comparison\n\nlet arr1 = [1, 2];\nlet arr2 = [1, 2];\nconsole.log(arr1 === arr2); \u002F\u002F false - Despite the identical content in each array, their different spots in memory are what is being compared\n\nlet arr3 = arr1; \u002F\u002F arr3 references the same array as arr1\nconsole.log(arr1 === arr3); \u002F\u002F true - arr3 is referencing the same spot in memory as arr1\n\n\u002F\u002F This explains why this works:\narr3.push(3);\nconsole.log(arr1); \u002F\u002F [1, 2, 3] - the original array is modified\n",[80,424,425,430,434,458,477,495,499,514,530,534,539,555],{"__ignoreMap":78},[83,426,427],{"class":85,"line":86},[83,428,429],{"class":89},"\u002F\u002F References vs content comparison\n",[83,431,432],{"class":85,"line":93},[83,433,97],{"emptyLinePlaceholder":96},[83,435,436,438,441,443,446,449,452,455],{"class":85,"line":100},[83,437,104],{"class":103},[83,439,440],{"class":107}," arr1 ",[83,442,111],{"class":103},[83,444,445],{"class":107}," [",[83,447,448],{"class":114},"1",[83,450,451],{"class":107},", ",[83,453,454],{"class":114},"2",[83,456,457],{"class":107},"];\n",[83,459,460,462,465,467,469,471,473,475],{"class":85,"line":124},[83,461,104],{"class":103},[83,463,464],{"class":107}," arr2 ",[83,466,111],{"class":103},[83,468,445],{"class":107},[83,470,448],{"class":114},[83,472,451],{"class":107},[83,474,454],{"class":114},[83,476,457],{"class":107},[83,478,479,481,483,486,489,492],{"class":85,"line":140},[83,480,164],{"class":107},[83,482,168],{"class":167},[83,484,485],{"class":107},"(arr1 ",[83,487,488],{"class":103},"===",[83,490,491],{"class":107}," arr2); ",[83,493,494],{"class":89},"\u002F\u002F false - Despite the identical content in each array, their different spots in memory are what is being compared\n",[83,496,497],{"class":85,"line":145},[83,498,97],{"emptyLinePlaceholder":96},[83,500,501,503,506,508,511],{"class":85,"line":161},[83,502,104],{"class":103},[83,504,505],{"class":107}," arr3 ",[83,507,111],{"class":103},[83,509,510],{"class":107}," arr1; ",[83,512,513],{"class":89},"\u002F\u002F arr3 references the same array as arr1\n",[83,515,516,518,520,522,524,527],{"class":85,"line":177},[83,517,164],{"class":107},[83,519,168],{"class":167},[83,521,485],{"class":107},[83,523,488],{"class":103},[83,525,526],{"class":107}," arr3); ",[83,528,529],{"class":89},"\u002F\u002F true - arr3 is referencing the same spot in memory as arr1\n",[83,531,532],{"class":85,"line":190},[83,533,97],{"emptyLinePlaceholder":96},[83,535,536],{"class":85,"line":195},[83,537,538],{"class":89},"\u002F\u002F This explains why this works:\n",[83,540,541,544,547,549,552],{"class":85,"line":201},[83,542,543],{"class":107},"arr3.",[83,545,546],{"class":167},"push",[83,548,210],{"class":107},[83,550,551],{"class":114},"3",[83,553,554],{"class":107},");\n",[83,556,557,559,561,564],{"class":85,"line":220},[83,558,164],{"class":107},[83,560,168],{"class":167},[83,562,563],{"class":107},"(arr1); ",[83,565,566],{"class":89},"\u002F\u002F [1, 2, 3] - the original array is modified\n",[11,568,569],{},"Second, even though objects are passed by reference, if you reassign the parameter inside a function, it won't affect the original:",[73,571,573],{"className":75,"code":572,"language":77,"meta":78,"style":78},"\u002F\u002F Reassigning vs modifying\n\nlet matt = { height: '6ft', eyes: 'brown', career: 'web dev' };\n\nfunction upgrade(person) {\n    \u002F\u002F Creates a new object and assigns it to the parameter\n    person = { height: '6.5ft', eyes: 'blue', career: 'finance' };\n    console.log('Inside function:', person);\n}\n\nupgrade(matt); \u002F\u002F Logs the new object from the function\nconsole.log('Original:', matt); \u002F\u002F Still { height: \"6ft\", eyes: \"brown\", career: \"web dev\" }\n\n\u002F\u002F But if we modify properties instead of reassigning them:\nfunction upgradeCareer(person) {\n    person.career = 'astronaut';\n}\n\nupgradeCareer(matt);\nconsole.log('After upgrade:', matt); \u002F\u002F { height: \"6ft\", eyes: \"brown\", career: \"astronaut\" }\n",[80,574,575,580,584,613,617,631,636,660,673,677,681,692,709,713,718,731,744,748,753,762],{"__ignoreMap":78},[83,576,577],{"class":85,"line":86},[83,578,579],{"class":89},"\u002F\u002F Reassigning vs modifying\n",[83,581,582],{"class":85,"line":93},[83,583,97],{"emptyLinePlaceholder":96},[83,585,586,588,591,593,596,599,602,605,608,611],{"class":85,"line":100},[83,587,104],{"class":103},[83,589,590],{"class":107}," matt ",[83,592,111],{"class":103},[83,594,595],{"class":107}," { height: ",[83,597,598],{"class":252},"'6ft'",[83,600,601],{"class":107},", eyes: ",[83,603,604],{"class":252},"'brown'",[83,606,607],{"class":107},", career: ",[83,609,610],{"class":252},"'web dev'",[83,612,344],{"class":107},[83,614,615],{"class":85,"line":124},[83,616,97],{"emptyLinePlaceholder":96},[83,618,619,621,624,626,629],{"class":85,"line":140},[83,620,204],{"class":103},[83,622,623],{"class":167}," upgrade",[83,625,210],{"class":107},[83,627,628],{"class":213},"person",[83,630,217],{"class":107},[83,632,633],{"class":85,"line":145},[83,634,635],{"class":89},"    \u002F\u002F Creates a new object and assigns it to the parameter\n",[83,637,638,641,643,645,648,650,653,655,658],{"class":85,"line":161},[83,639,640],{"class":107},"    person ",[83,642,111],{"class":103},[83,644,595],{"class":107},[83,646,647],{"class":252},"'6.5ft'",[83,649,601],{"class":107},[83,651,652],{"class":252},"'blue'",[83,654,607],{"class":107},[83,656,657],{"class":252},"'finance'",[83,659,344],{"class":107},[83,661,662,664,666,668,670],{"class":85,"line":177},[83,663,245],{"class":107},[83,665,168],{"class":167},[83,667,210],{"class":107},[83,669,253],{"class":252},[83,671,672],{"class":107},", person);\n",[83,674,675],{"class":85,"line":190},[83,676,262],{"class":107},[83,678,679],{"class":85,"line":195},[83,680,97],{"emptyLinePlaceholder":96},[83,682,683,686,689],{"class":85,"line":201},[83,684,685],{"class":167},"upgrade",[83,687,688],{"class":107},"(matt); ",[83,690,691],{"class":89},"\u002F\u002F Logs the new object from the function\n",[83,693,694,696,698,700,703,706],{"class":85,"line":220},[83,695,164],{"class":107},[83,697,168],{"class":167},[83,699,210],{"class":107},[83,701,702],{"class":252},"'Original:'",[83,704,705],{"class":107},", matt); ",[83,707,708],{"class":89},"\u002F\u002F Still { height: \"6ft\", eyes: \"brown\", career: \"web dev\" }\n",[83,710,711],{"class":85,"line":242},[83,712,97],{"emptyLinePlaceholder":96},[83,714,715],{"class":85,"line":259},[83,716,717],{"class":89},"\u002F\u002F But if we modify properties instead of reassigning them:\n",[83,719,720,722,725,727,729],{"class":85,"line":265},[83,721,204],{"class":103},[83,723,724],{"class":167}," upgradeCareer",[83,726,210],{"class":107},[83,728,628],{"class":213},[83,730,217],{"class":107},[83,732,733,736,738,741],{"class":85,"line":270},[83,734,735],{"class":107},"    person.career ",[83,737,111],{"class":103},[83,739,740],{"class":252}," 'astronaut'",[83,742,743],{"class":107},";\n",[83,745,746],{"class":85,"line":281},[83,747,262],{"class":107},[83,749,751],{"class":85,"line":750},18,[83,752,97],{"emptyLinePlaceholder":96},[83,754,756,759],{"class":85,"line":755},19,[83,757,758],{"class":167},"upgradeCareer",[83,760,761],{"class":107},"(matt);\n",[83,763,765,767,769,771,774,776],{"class":85,"line":764},20,[83,766,164],{"class":107},[83,768,168],{"class":167},[83,770,210],{"class":107},[83,772,773],{"class":252},"'After upgrade:'",[83,775,705],{"class":107},[83,777,778],{"class":89},"\u002F\u002F { height: \"6ft\", eyes: \"brown\", career: \"astronaut\" }\n",[11,780,781],{},"It's like my Facebook profile. If someone hacks in and changes all my information, my actual profile gets updated for everyone to see. But if they just copy everything into a new fake profile posing as me, my original profile doesn't get touched—complete with that regrettable bathroom selfie from 2018.",[36,783,785],{"id":784},"in-the-end","In the end",[11,787,788],{},"This wasn't necessarily foreign to me but it is a confusing concept I obviously wasn't prepared to explain. But next time interviewer–you best believe, I got you.",[790,791,792],"style",{},"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 .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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);}",{"title":78,"searchDepth":93,"depth":93,"links":794},[795,797,802],{"id":38,"depth":93,"text":796},"Some things I've grokked through science research",{"id":62,"depth":93,"text":63,"children":798},[799,800,801],{"id":67,"depth":100,"text":68},{"id":298,"depth":100,"text":299},{"id":412,"depth":100,"text":413},{"id":784,"depth":93,"text":785},null,"Can you explain Pass by Value vs Pass by Reference in JavaScript?","md","fresh",{},"\u002Fcache\u002F2025\u002F03\u002Fpass-by-reference-or-value",false,{"title":5,"description":804},"pass-by-reference-or-value","active","cache\u002F2025\u002F03\u002Fpass-by-reference-or-value",[815],"javascript","Wje6q5JN1u9KDaFl3wiE7ZVsgVWyr1ttqQezx5Aht_M",1782502285691]