JavaScript Object Accessors - W3Schools

ECMAScript 5 (ES5 2009) introduced Getter and Setters. Getters and setters allow you to define Object Accessors (Computed Properties). JavaScript Getter (The ... Tutorials References Exercises Videos ProNEW Menu Login PaidCourses WebsiteNEW HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP HOWTO W3.CSS JAVA JQUERY C++ C# R React Kotlin    Darkmode Darkcode × Tutorials HTMLandCSS LearnHTML LearnCSS LearnRWD LearnBootstrap LearnW3.CSS LearnColors LearnIcons LearnGraphics LearnSVG LearnCanvas LearnHowTo LearnSass DataAnalytics LearnAI LearnMachineLearning LearnDataScience LearnNumPy LearnPandas LearnSciPy LearnMatplotlib LearnStatistics LearnExcel XMLTutorials LearnXML LearnXMLAJAX LearnXMLDOM LearnXMLDTD LearnXMLSchema LearnXSLT LearnXPath LearnXQuery JavaScript LearnJavaScript LearnjQuery LearnReact LearnAngularJS LearnJSON LearnAJAX LearnAppML LearnW3.JS Programming LearnPython LearnJava LearnC LearnC++ LearnC# LearnR LearnKotlin LearnGo ServerSide LearnSQL LearnMySQL LearnPHP LearnASP LearnNode.js LearnRaspberryPi LearnGit LearnAWSCloud WebBuilding CreateaWebsiteNEW WhereToStart WebTemplates WebStatistics WebCertificates WebDevelopment CodeEditor TestYourTypingSpeed PlayaCodeGame CyberSecurity Accessibility DataAnalytics LearnAI LearnMachineLearning LearnDataScience LearnNumPy LearnPandas LearnSciPy LearnMatplotlib LearnStatistics LearnExcel LearnGoogleSheets XMLTutorials LearnXML LearnXMLAJAX LearnXMLDOM LearnXMLDTD LearnXMLSchema LearnXSLT LearnXPath LearnXQuery × References HTML HTMLTagReference HTMLBrowserSupport HTMLEventReference HTMLColorReference HTMLAttributeReference HTMLCanvasReference HTMLSVGReference GoogleMapsReference CSS CSSReference CSSBrowserSupport CSSSelectorReference Bootstrap3Reference Bootstrap4Reference W3.CSSReference IconReference SassReference JavaScript JavaScriptReference HTMLDOMReference jQueryReference AngularJSReference AppMLReference W3.JSReference Programming PythonReference JavaReference ServerSide SQLReference MySQLReference PHPReference ASPReference XML XMLDOMReference XMLHttpReference XSLTReference XMLSchemaReference CharacterSets HTMLCharacterSets HTMLASCII HTMLANSI HTMLWindows-1252 HTMLISO-8859-1 HTMLSymbols HTMLUTF-8 × ExercisesandQuizzes Exercises HTMLExercises CSSExercises JavaScriptExercises SQLExercises MySQLExercises PHPExercises PythonExercises NumPyExercises PandasExercises SciPyExercises jQueryExercises JavaExercises C++Exercises C#Exercises RExercises KotlinExercises GoExercises BootstrapExercises Bootstrap4Exercises Bootstrap5Exercises GitExercises Quizzes HTMLQuiz CSSQuiz JavaScriptQuiz SQLQuiz MySQLQuiz PHPQuiz PythonQuiz NumPyQuiz PandasQuiz SciPyQuiz jQueryQuiz JavaQuiz C++Quiz C#Quiz RQuiz XMLQuiz CyberSecurityQuiz BootstrapQuiz Bootstrap4Quiz Bootstrap5Quiz AccessibilityQuiz Courses HTMLCourse CSSCourse JavaScriptCourse FrontEndCourse SQLCourse PHPCourse PythonCourse NumPyCourse PandasCourse DataAnalyticsCourse jQueryCourse JavaCourse C++Course C#Course RCourse XMLCourse CyberSecurityCourse AccessibilityCourse Certificates HTMLCertificate CSSCertificate JavaScriptCertificate FrontEndCertificate SQLCertificate PHPCertificate PythonCertificate DataScienceCertificate Bootstrap3Certificate Bootstrap4Certificate jQueryCertificate JavaCertificate C++Certificate ReactCertificate XMLCertificate × Tutorials References Exercises PaidCourses Spaces Videos Shop Pro JSTutorial JSHOME JSIntroduction JSWhereTo JSOutput JSStatements JSSyntax JSComments JSVariables JSLet JSConst JSOperators JSArithmetic JSAssignment JSDataTypes JSFunctions JSObjects JSEvents JSStrings JSStringMethods JSStringSearch JSStringTemplates JSNumbers JSNumberMethods JSArrays JSArrayMethods JSArraySort JSArrayIteration JSArrayConst JSDates JSDateFormats JSDateGetMethods JSDateSetMethods JSMath JSRandom JSBooleans JSComparisons JSConditions JSSwitch JSLoopFor JSLoopForIn JSLoopForOf JSLoopWhile JSBreak JSIterables JSSets JSMaps JSTypeof JSTypeConversion JSBitwise JSRegExp JSErrors JSScope JSHoisting JSStrictMode JSthisKeyword JSArrowFunction JSClasses JSModules JSJSON JSDebugging JSStyleGuide JSBestPractices JSMistakes JSPerformance JSReservedWords JSVersions JSVersions JS2009(ES5) JS2015(ES6) JS2016 JS2017 JS2018 JSIE/Edge JSHistory JSObjects ObjectDefinitions ObjectProperties ObjectMethods ObjectDisplay ObjectAccessors ObjectConstructors ObjectPrototypes ObjectIterables ObjectSets ObjectMaps ObjectReference JSFunctions FunctionDefinitions FunctionParameters FunctionInvocation FunctionCall FunctionApply FunctionBind FunctionClosures JSClasses ClassIntro ClassInheritance ClassStatic JSAsync JSCallbacks JSAsynchronous JSPromises JSAsync/Await JSHTMLDOM DOMIntro DOMMethods DOMDocument DOMElements DOMHTML DOMForms DOMCSS DOMAnimations DOMEvents DOMEventListener DOMNavigation DOMNodes DOMCollections DOMNodeLists JSBrowserBOM JSWindow JSScreen JSLocation JSHistory JSNavigator JSPopupAlert JSTiming JSCookies JSWebAPIs WebAPIIntro WebFormsAPI WebHistoryAPI WebStorageAPI WebWorkerAPI WebFetchAPI WebGeolocationAPI JSAJAX AJAXIntro AJAXXMLHttp AJAXRequest AJAXResponse AJAXXMLFile AJAXPHP AJAXASP AJAXDatabase AJAXApplications AJAXExamples JSJSON JSONIntro JSONSyntax JSONvsXML JSONDataTypes JSONParse JSONStringify JSONObjects JSONArrays JSONServer JSONPHP JSONHTML JSONJSONP JSvsjQuery jQuerySelectors jQueryHTML jQueryCSS jQueryDOM JSGraphics JSGraphics JSCanvas JSPlotly JSChart.js JSGoogleChart JSD3.js JSExamples JSExamples JSHTMLDOM JSHTMLInput JSHTMLObjects JSHTMLEvents JSBrowser JSEditor JSExercises JSQuiz JSCertificate JSReferences JavaScriptObjects HTMLDOMObjects JavaScriptObjectAccessors ❮Previous Next❯ JavaScriptAccessors(GettersandSetters) ECMAScript5(ES52009)introducedGetterandSetters. GettersandsettersallowyoutodefineObjectAccessors(Computed Properties). JavaScriptGetter(ThegetKeyword) Thisexampleusesalangpropertytoget thevalueofthelanguageproperty. Example //Createanobject: constperson={  firstName:"John",  lastName:"Doe",  language:"en",  getlang(){    returnthis.language;  }}; //Displaydatafromtheobjectusingagetter: document.getElementById("demo").innerHTML=person.lang; TryitYourself» JavaScriptSetter(ThesetKeyword) Thisexampleusesalangpropertytoset thevalueofthelanguageproperty. Example constperson={  firstName:"John",   lastName:"Doe",   language:"",  setlang(lang){     this.language=lang;   }}; //Setanobject propertyusingasetter: person.lang="en"; //Displaydatafromtheobject: document.getElementById("demo").innerHTML=person.language; TryitYourself» JavaScriptFunctionorGetter? Whatisthedifferencesbetweenthesetwoexamples? Example1 constperson={  firstName:"John",  lastName:"Doe",  fullName:function(){    returnthis.firstName+""+ this.lastName;  } };//Displaydatafromtheobjectusingamethod: document.getElementById("demo").innerHTML=person.fullName(); TryitYourself» Example2 constperson={  firstName:"John",  lastName:"Doe",  getfullName(){    returnthis.firstName+""+ this.lastName; } };//Displaydatafromtheobjectusingagetter: document.getElementById("demo").innerHTML=person.fullName; TryitYourself» Example1accessfullNameasafunction:person.fullName(). Example2accessfullNameasaproperty:person.fullName. Thesecondexampleprovidesasimplersyntax. DataQuality JavaScriptcansecurebetterdataqualitywhenusinggettersandsetters. Usingthelangproperty,inthisexample,returnsthevalue ofthelanguagepropertyinuppercase: Example //Createanobject: constperson={   firstName:"John",   lastName:"Doe",  language:"en",  getlang(){    returnthis.language.toUpperCase();   }}; //Displaydatafromtheobjectusingagetter: document.getElementById("demo").innerHTML=person.lang; TryitYourself» Usingthelangproperty,inthisexample,storesanuppercase valueinthelanguageproperty: Example constperson={  firstName:"John",   lastName:"Doe",  language:"",   setlang(lang){    this.language=lang.toUpperCase();  }}; //Setanobject propertyusingasetter: person.lang="en"; //Displaydatafromtheobject: document.getElementById("demo").innerHTML=person.language; TryitYourself» WhyUsingGettersandSetters? Itgivessimplersyntax Itallowsequalsyntaxforpropertiesandmethods Itcansecurebetterdataquality Itisusefulfordoingthingsbehind-the-scenes Object.defineProperty() TheObject.defineProperty()methodcanalsobeusedtoaddGettersand Setters: ACounterExample //Defineobject constobj={counter:0}; //Definesetters Object.defineProperty(obj,"reset",{   get:function(){this.counter=0;}}); Object.defineProperty(obj,"increment",{   get:function(){this.counter++;}}); Object.defineProperty(obj,"decrement",{   get:function(){this.counter--;}}); Object.defineProperty(obj,"add",{   set:function(value){this.counter+=value;}}); Object.defineProperty(obj,"subtract",{   set:function(value){this.counter-=value;}}); //Playwiththecounter: obj.reset; obj.add=5; obj.subtract=1; obj.increment; obj.decrement; TryitYourself» ❮Previous Next❯ NEW WejustlaunchedW3Schoolsvideos Explorenow COLORPICKER Getcertifiedbycompletingacoursetoday! w3schoolsCERTIFIED.2022 Getstarted CODEGAME PlayGame