[{"data":1,"prerenderedAt":364},["ShallowReactive",2],{"term-a\u002Farrow-function":3,"related-a\u002Farrow-function":349},{"id":4,"title":5,"acronym":6,"body":7,"category":331,"description":332,"difficulty":333,"extension":334,"letter":335,"meta":336,"navigation":102,"path":337,"related":338,"seo":343,"sitemap":344,"stem":347,"subcategory":6,"__hash__":348},"terms\u002Fterms\u002Fa\u002Farrow-function.md","Arrow Function",null,{"type":8,"value":9,"toc":325},"minimark",[10,15,19,23,26,30,314,318,321],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Arrow functions are a shorter way to write functions in JavaScript. Instead of writing 'function(x) { return x * 2 }' you write '(x) => x * 2'. But there's a twist: arrow functions don't have their own 'this', which is actually super useful inside class methods and React components where 'this' confusion was a constant headache.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Arrow functions are an ES6 syntax for defining functions with a shorter notation. Unlike regular functions, they do not have their own this, arguments, super, or new.target bindings — they inherit these from the enclosing lexical scope. They cannot be used as constructors and have no prototype property.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F Regular function\nconst double = function(n) { return n * 2 }\n\n\u002F\u002F Arrow function (equivalent)\nconst double = (n) => n * 2\n\n\u002F\u002F Multi-line arrow function\nconst processUser = (user) => {\n  const name = user.name.trim()\n  return { ...user, name }\n}\n\n\u002F\u002F 'this' in arrow vs regular\nclass Timer {\n  start() {\n    setInterval(() => {\n      this.tick() \u002F\u002F 'this' is the Timer instance\n    }, 1000)\n  }\n}\n","javascript","",[38,39,40,49,97,104,110,138,143,149,171,202,222,228,233,239,251,262,276,291,303,309],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F Regular function\n",[41,50,52,56,60,64,67,70,74,77,80,84,87,90,94],{"class":43,"line":51},2,[41,53,55],{"class":54},"spNyl","const",[41,57,59],{"class":58},"sTEyZ"," double ",[41,61,63],{"class":62},"sMK4o","=",[41,65,66],{"class":54}," function",[41,68,69],{"class":62},"(",[41,71,73],{"class":72},"sHdIc","n",[41,75,76],{"class":62},")",[41,78,79],{"class":62}," {",[41,81,83],{"class":82},"s7zQu"," return",[41,85,86],{"class":58}," n",[41,88,89],{"class":62}," *",[41,91,93],{"class":92},"sbssI"," 2",[41,95,96],{"class":62}," }\n",[41,98,100],{"class":43,"line":99},3,[41,101,103],{"emptyLinePlaceholder":102},true,"\n",[41,105,107],{"class":43,"line":106},4,[41,108,109],{"class":47},"\u002F\u002F Arrow function (equivalent)\n",[41,111,113,115,117,119,122,124,126,129,132,135],{"class":43,"line":112},5,[41,114,55],{"class":54},[41,116,59],{"class":58},[41,118,63],{"class":62},[41,120,121],{"class":62}," (",[41,123,73],{"class":72},[41,125,76],{"class":62},[41,127,128],{"class":54}," =>",[41,130,131],{"class":58}," n ",[41,133,134],{"class":62},"*",[41,136,137],{"class":92}," 2\n",[41,139,141],{"class":43,"line":140},6,[41,142,103],{"emptyLinePlaceholder":102},[41,144,146],{"class":43,"line":145},7,[41,147,148],{"class":47},"\u002F\u002F Multi-line arrow function\n",[41,150,152,154,157,159,161,164,166,168],{"class":43,"line":151},8,[41,153,55],{"class":54},[41,155,156],{"class":58}," processUser ",[41,158,63],{"class":62},[41,160,121],{"class":62},[41,162,163],{"class":72},"user",[41,165,76],{"class":62},[41,167,128],{"class":54},[41,169,170],{"class":62}," {\n",[41,172,174,177,180,183,186,189,192,194,198],{"class":43,"line":173},9,[41,175,176],{"class":54},"  const",[41,178,179],{"class":58}," name",[41,181,182],{"class":62}," =",[41,184,185],{"class":58}," user",[41,187,188],{"class":62},".",[41,190,191],{"class":58},"name",[41,193,188],{"class":62},[41,195,197],{"class":196},"s2Zo4","trim",[41,199,201],{"class":200},"swJcz","()\n",[41,203,205,208,210,213,215,218,220],{"class":43,"line":204},10,[41,206,207],{"class":82},"  return",[41,209,79],{"class":62},[41,211,212],{"class":62}," ...",[41,214,163],{"class":58},[41,216,217],{"class":62},",",[41,219,179],{"class":58},[41,221,96],{"class":62},[41,223,225],{"class":43,"line":224},11,[41,226,227],{"class":62},"}\n",[41,229,231],{"class":43,"line":230},12,[41,232,103],{"emptyLinePlaceholder":102},[41,234,236],{"class":43,"line":235},13,[41,237,238],{"class":47},"\u002F\u002F 'this' in arrow vs regular\n",[41,240,242,245,249],{"class":43,"line":241},14,[41,243,244],{"class":54},"class",[41,246,248],{"class":247},"sBMFI"," Timer",[41,250,170],{"class":62},[41,252,254,257,260],{"class":43,"line":253},15,[41,255,256],{"class":200},"  start",[41,258,259],{"class":62},"()",[41,261,170],{"class":62},[41,263,265,268,270,272,274],{"class":43,"line":264},16,[41,266,267],{"class":196},"    setInterval",[41,269,69],{"class":200},[41,271,259],{"class":62},[41,273,128],{"class":54},[41,275,170],{"class":62},[41,277,279,282,285,288],{"class":43,"line":278},17,[41,280,281],{"class":62},"      this.",[41,283,284],{"class":196},"tick",[41,286,287],{"class":200},"() ",[41,289,290],{"class":47},"\u002F\u002F 'this' is the Timer instance\n",[41,292,294,297,300],{"class":43,"line":293},18,[41,295,296],{"class":62},"    },",[41,298,299],{"class":92}," 1000",[41,301,302],{"class":200},")\n",[41,304,306],{"class":43,"line":305},19,[41,307,308],{"class":62},"  }\n",[41,310,312],{"class":43,"line":311},20,[41,313,227],{"class":62},[11,315,317],{"id":316},"when-youll-hear-this","When You'll Hear This",[16,319,320],{},"Arrow functions are perfect for array callbacks: arr.map(x => x * 2).,Don't use arrow functions as object methods — 'this' won't be what you expect.,Arrow functions are ideal inside class methods to avoid 'this' binding issues.",[322,323,324],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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":36,"searchDepth":51,"depth":51,"links":326},[327,328,329,330],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":316,"depth":51,"text":317},"frontend","Arrow functions are a shorter way to write functions in JavaScript. Instead of writing 'function(x) { return x * 2 }' you write '(x) => x * 2'.","beginner","md","a",{},"\u002Fterms\u002Fa\u002Farrow-function",[339,340,341,342],"Closure","Scope","Prototype","Destructuring",{"title":5,"description":332},{"changefreq":345,"priority":346},"weekly",0.7,"terms\u002Fa\u002Farrow-function","IjilTzRkj1tVljE4UBit-9m-VoaW2B9OB-RPQ-Gl1I0",[350,354,357,360],{"title":339,"path":351,"acronym":6,"category":331,"difficulty":352,"description":353},"\u002Fterms\u002Fc\u002Fclosure","advanced","A closure is when a function remembers the variables from the scope it was created in, even after that scope is gone.",{"title":342,"path":355,"acronym":6,"category":331,"difficulty":333,"description":356},"\u002Fterms\u002Fd\u002Fdestructuring","Destructuring lets you unpack values from arrays or objects into variables in one clean line. Instead of writing 'const name = user.name; const age = user.",{"title":341,"path":358,"acronym":6,"category":331,"difficulty":352,"description":359},"\u002Fterms\u002Fp\u002Fprototype","Every object in JavaScript secretly has a parent object called its prototype.",{"title":340,"path":361,"acronym":6,"category":331,"difficulty":362,"description":363},"\u002Fterms\u002Fs\u002Fscope","intermediate","Scope is about where your variables are visible. Variables defined inside a function can't be seen outside it (that's function scope).",1776518256073]