[{"data":1,"prerenderedAt":414},["ShallowReactive",2],{"post:getter-and-setter-functions":3},{"id":4,"title":5,"body":6,"date":401,"description":402,"draft":403,"extension":404,"meta":405,"navigation":406,"path":407,"seo":408,"stem":409,"tags":410,"__hash__":413},"posts\u002Fposts\u002Fgetter-and-setter-functions.md","TIL: Write Getter and Setter Functions in Native Javascript",{"type":7,"value":8,"toc":399},"minimark",[9,27,215,218,221,395],[10,11,12,13,20,21,26],"p",{},"Whoa! You can do ",[14,15,19],"a",{"href":16,"rel":17},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FFunctions\u002Fget",[18],"nofollow","getter"," and ",[14,22,25],{"href":23,"rel":24},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FFunctions\u002Fset",[18],"setter"," functions in native Javascript? How cool is that!",[28,29,34],"pre",{"className":30,"code":31,"language":32,"meta":33,"style":33},"language-js shiki shiki-themes github-light github-dark","var Car = {\n    get wheels() {\n        return this.frontwheels + this.rearwheels;\n    },\n    set color( color ) {\n      this.color = color;\n    },\n    frontwheels: 2,\n    rearwheels: 2,\n    color: \"black\"\n};\nconsole.log(Car.wheels); \u002F\u002F returns 4\nCar.color = \"blue\";\nconsole.log(Car.color) \u002F\u002F returns \"blue\"\n","js","",[35,36,37,56,69,90,96,115,129,134,146,156,166,172,188,202],"code",{"__ignoreMap":33},[38,39,42,46,50,53],"span",{"class":40,"line":41},"line",1,[38,43,45],{"class":44},"szBVR","var",[38,47,49],{"class":48},"sVt8B"," Car ",[38,51,52],{"class":44},"=",[38,54,55],{"class":48}," {\n",[38,57,59,62,66],{"class":40,"line":58},2,[38,60,61],{"class":44},"    get",[38,63,65],{"class":64},"sScJk"," wheels",[38,67,68],{"class":48},"() {\n",[38,70,72,75,79,82,85,87],{"class":40,"line":71},3,[38,73,74],{"class":44},"        return",[38,76,78],{"class":77},"sj4cs"," this",[38,80,81],{"class":48},".frontwheels ",[38,83,84],{"class":44},"+",[38,86,78],{"class":77},[38,88,89],{"class":48},".rearwheels;\n",[38,91,93],{"class":40,"line":92},4,[38,94,95],{"class":48},"    },\n",[38,97,99,102,105,108,112],{"class":40,"line":98},5,[38,100,101],{"class":44},"    set",[38,103,104],{"class":64}," color",[38,106,107],{"class":48},"( ",[38,109,111],{"class":110},"s4XuR","color",[38,113,114],{"class":48}," ) {\n",[38,116,118,121,124,126],{"class":40,"line":117},6,[38,119,120],{"class":77},"      this",[38,122,123],{"class":48},".color ",[38,125,52],{"class":44},[38,127,128],{"class":48}," color;\n",[38,130,132],{"class":40,"line":131},7,[38,133,95],{"class":48},[38,135,137,140,143],{"class":40,"line":136},8,[38,138,139],{"class":48},"    frontwheels: ",[38,141,142],{"class":77},"2",[38,144,145],{"class":48},",\n",[38,147,149,152,154],{"class":40,"line":148},9,[38,150,151],{"class":48},"    rearwheels: ",[38,153,142],{"class":77},[38,155,145],{"class":48},[38,157,159,162],{"class":40,"line":158},10,[38,160,161],{"class":48},"    color: ",[38,163,165],{"class":164},"sZZnC","\"black\"\n",[38,167,169],{"class":40,"line":168},11,[38,170,171],{"class":48},"};\n",[38,173,175,178,181,184],{"class":40,"line":174},12,[38,176,177],{"class":48},"console.",[38,179,180],{"class":64},"log",[38,182,183],{"class":48},"(Car.wheels); ",[38,185,187],{"class":186},"sJ8bj","\u002F\u002F returns 4\n",[38,189,191,194,196,199],{"class":40,"line":190},13,[38,192,193],{"class":48},"Car.color ",[38,195,52],{"class":44},[38,197,198],{"class":164}," \"blue\"",[38,200,201],{"class":48},";\n",[38,203,205,207,209,212],{"class":40,"line":204},14,[38,206,177],{"class":48},[38,208,180],{"class":64},[38,210,211],{"class":48},"(Car.color) ",[38,213,214],{"class":186},"\u002F\u002F returns \"blue\"\n",[10,216,217],{},"Sweet! This is not much different than simply creating an object method, but it is displayed a little different in the FF and Chrome console.",[10,219,220],{},"Then the setter method is just as simple:",[28,222,224],{"className":30,"code":223,"language":32,"meta":33,"style":33},"var Car = {\n    set interior( color ) {\n      this.color.interior = color;\n    },\n    set exterior( color ) {\n      this.color.exterior = color;\n    },\n    get interior( ) {\n      return this.color.interior;\n    },\n    get exterior( ) {\n      return this.color.exterior;\n    },\n    color: {\n      exterior: \"black\",\n      interior: \"black\"\n    }\n};\nCar.exterior = \"blue\";\nconsole.log(Car.exterior) \u002F\u002F returns \"blue\"\n",[35,225,226,236,249,260,264,277,288,292,301,311,315,323,332,336,341,352,360,366,371,383],{"__ignoreMap":33},[38,227,228,230,232,234],{"class":40,"line":41},[38,229,45],{"class":44},[38,231,49],{"class":48},[38,233,52],{"class":44},[38,235,55],{"class":48},[38,237,238,240,243,245,247],{"class":40,"line":58},[38,239,101],{"class":44},[38,241,242],{"class":64}," interior",[38,244,107],{"class":48},[38,246,111],{"class":110},[38,248,114],{"class":48},[38,250,251,253,256,258],{"class":40,"line":71},[38,252,120],{"class":77},[38,254,255],{"class":48},".color.interior ",[38,257,52],{"class":44},[38,259,128],{"class":48},[38,261,262],{"class":40,"line":92},[38,263,95],{"class":48},[38,265,266,268,271,273,275],{"class":40,"line":98},[38,267,101],{"class":44},[38,269,270],{"class":64}," exterior",[38,272,107],{"class":48},[38,274,111],{"class":110},[38,276,114],{"class":48},[38,278,279,281,284,286],{"class":40,"line":117},[38,280,120],{"class":77},[38,282,283],{"class":48},".color.exterior ",[38,285,52],{"class":44},[38,287,128],{"class":48},[38,289,290],{"class":40,"line":131},[38,291,95],{"class":48},[38,293,294,296,298],{"class":40,"line":136},[38,295,61],{"class":44},[38,297,242],{"class":64},[38,299,300],{"class":48},"( ) {\n",[38,302,303,306,308],{"class":40,"line":148},[38,304,305],{"class":44},"      return",[38,307,78],{"class":77},[38,309,310],{"class":48},".color.interior;\n",[38,312,313],{"class":40,"line":158},[38,314,95],{"class":48},[38,316,317,319,321],{"class":40,"line":168},[38,318,61],{"class":44},[38,320,270],{"class":64},[38,322,300],{"class":48},[38,324,325,327,329],{"class":40,"line":174},[38,326,305],{"class":44},[38,328,78],{"class":77},[38,330,331],{"class":48},".color.exterior;\n",[38,333,334],{"class":40,"line":190},[38,335,95],{"class":48},[38,337,338],{"class":40,"line":204},[38,339,340],{"class":48},"    color: {\n",[38,342,344,347,350],{"class":40,"line":343},15,[38,345,346],{"class":48},"      exterior: ",[38,348,349],{"class":164},"\"black\"",[38,351,145],{"class":48},[38,353,355,358],{"class":40,"line":354},16,[38,356,357],{"class":48},"      interior: ",[38,359,165],{"class":164},[38,361,363],{"class":40,"line":362},17,[38,364,365],{"class":48},"    }\n",[38,367,369],{"class":40,"line":368},18,[38,370,171],{"class":48},[38,372,374,377,379,381],{"class":40,"line":373},19,[38,375,376],{"class":48},"Car.exterior ",[38,378,52],{"class":44},[38,380,198],{"class":164},[38,382,201],{"class":48},[38,384,386,388,390,393],{"class":40,"line":385},20,[38,387,177],{"class":48},[38,389,180],{"class":64},[38,391,392],{"class":48},"(Car.exterior) ",[38,394,214],{"class":186},[396,397,398],"style",{},"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 .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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 pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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":33,"searchDepth":58,"depth":58,"links":400},[],"2019-06-14T08:18:01-04:00","Whoa! You can do getter and setter functions in native Javascript? How cool is that!",false,"md",{},true,"\u002Fposts\u002Fgetter-and-setter-functions",{"title":5,"description":402},"posts\u002Fgetter-and-setter-functions",[411,412],"javascript","til","aX-S-aiVNzWtgivl0hexhJ5wTViuHSj-4zqL80aSzCc",1790471527810]