{"id":15724339,"url":"https://github.com/cedlemo/es5_to_es6_objects_manipulation_the_class_syntax","last_synced_at":"2025-03-31T01:14:25.489Z","repository":{"id":144939638,"uuid":"145207976","full_name":"cedlemo/ES5_to_ES6_objects_manipulation_the_class_syntax","owner":"cedlemo","description":"Notes about the object creation in javascript ES5 and ES6","archived":false,"fork":false,"pushed_at":"2018-08-18T09:44:16.000Z","size":2,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-06T06:24:33.560Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cedlemo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-18T09:41:01.000Z","updated_at":"2024-08-24T22:52:28.000Z","dependencies_parsed_at":"2023-04-04T21:02:32.020Z","dependency_job_id":null,"html_url":"https://github.com/cedlemo/ES5_to_ES6_objects_manipulation_the_class_syntax","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cedlemo%2FES5_to_ES6_objects_manipulation_the_class_syntax","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cedlemo%2FES5_to_ES6_objects_manipulation_the_class_syntax/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cedlemo%2FES5_to_ES6_objects_manipulation_the_class_syntax/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cedlemo%2FES5_to_ES6_objects_manipulation_the_class_syntax/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cedlemo","download_url":"https://codeload.github.com/cedlemo/ES5_to_ES6_objects_manipulation_the_class_syntax/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246399798,"owners_count":20770908,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-03T22:16:16.431Z","updated_at":"2025-03-31T01:14:25.470Z","avatar_url":"https://github.com/cedlemo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ES5 to ES6 Object manipulation: the Class syntax\n\n* [Object constructor](#object-constructor)\n* [Object methods](#object-methods)\n* [Object getters and setters](#object-getters-and-setters)\n* [Object inheritance](#object-inheritance)\n\n## Object constructor\n\n### ES5\n\n```javascript\nfunction SimpleWindow(title) {\n    this.title = title;\n}\n\nvar mainWindow = new SimpleWindow(\"My main window\");\nconsole.log(mainWindow.title);\n```\n\n### ES6\n\n```javascript\nclass SimpleWindow {\n    constructor(title) {\n        this.title = title;\n    }\n}\n\nvar mainWindow = new SimpleWindow(\"My main window\");\nconsole.log(mainWindow.title);\n```\n\n## Object methods\n\n### ES5\n\n```javascript\nfunction SimpleWindow(title) {\n    this.title = title;\n    this.hide = function() {\n\tconsole.log(\"hide \" + title);\n    }\n}\n\nvar mainWindow = new SimpleWindow(\"My main window\");\nconsole.log(mainWindow.title);\nmainWindow.hide();\n```\n\n### ES6\n\n```javascript\nclass SimpleWindow {\n    constructor(title) {\n        this.title = title;\n    }\n    hide() {\n\tconsole.log(\"hide \" + title);\n    }\n}\n\nvar mainWindow = new SimpleWindow(\"My main window\");\nconsole.log(mainWindow.title);\nmainWindow.hide();\n```\n\n## Object getters and setters\n\n### ES5\n\n```javascript\nfunction SimpleWindow(title) {\n    this.title = title;\n    this._height = 0;\n    this._width = 0;\n\n    Object.defineProperties(this, {\n        \"width\": {\n            \"get\": function() {\n                return this._width;\n             },\n             \"set\": function(w) {\n                if (w \u003e= 0 || w \u003c 1000)\n\t                this._width = w;\n             }\n        },\n       \"height\": {\n            \"get\": function() {\n                return this._height;\n             },\n             \"set\": function(h) {\n                if (h \u003e= 0 || h \u003c 1000)\n\t                this._height = h;\n             }\n        }\n    });\n}\n\nvar mainWindow = new SimpleWindow(\"My main window\");\nconsole.log(mainWindow.title);\nmainWindow.height = 100;\nmainWindow.width = 50;\nconsole.log(\"w: \" + mainWindow.width + \" height: \" + mainWindow.height);\n```\n\n### ES6\n\n```javascript\nclass SimpleWindow {\n    constructor(title){\n        this.title = title;\n        this._width = 0;\n        this._height = 0;\n    }\n\n    get width(){\n        return this._width;\n    }\n    set width(w){\n        if (w \u003e= 0 || w \u003c 1000)\n\t    this._width = w;\n    }\n\n    get height(){\n        return this._height;\n    }\n    set height(h){\n        if (h \u003e= 0 || h \u003c 1000)\n             this._height = h;\n    }\n}\n\nvar mainWindow = new SimpleWindow(\"My main window\");\nconsole.log(mainWindow.title);\nmainWindow.height = 100;\nmainWindow.width = 50;\nconsole.log(\"w: \" + mainWindow.width + \" height: \" + mainWindow.height);\n```\n\n## Object inheritance\n\n### ES5\n\n```javascript\nfunction SimpleWindow(title) {\n    this.title = title;\n    this._height = 0;\n    this._width = 0;\n\n    Object.defineProperties(this, {\n        \"width\": {\n            \"get\": function() {\n                return this._width;\n             },\n             \"set\": function(w) {\n                if (w \u003e= 0 || w \u003c 1000)\n\t                this._width = w;\n             }\n        },\n       \"height\": {\n            \"get\": function() {\n                return this._height;\n             },\n             \"set\": function(h) {\n                if (h \u003e= 0 || h \u003c 1000)\n\t                this._height = h;\n             }\n        }\n    });\n}\n\nfunction PositionnedWindow(title, x, y){\n    this.title = title;\n    this.x = x;\n    this.y = y;\n}\n\nPositionnedWindow.prototype = Object.create(SimpleWindow.prototype);\nPositionnedWindow.prototype.constructor = PositionnedWindow;\nPositionnedWindow.prototype.displayPosition = function() {\n    console.log(\"x : \"+ this.x + \" y : \" + this.y);\n}\n\nvar win = new PositionnedWindow(\"My window\", 10, 10);\nconsole.log(win.title);\nwin.height = 100;\nwin.width = 50;\nconsole.log(\"w: \" + win.width + \" height: \" + win.height);\nwin.displayPosition();\n```\n\n### ES6\n\n```javascript\nclass SimpleWindow {\n    constructor(title){\n        this.title = title;\n        this._width = 0;\n        this._height = 0;\n    }\n\n    get width(){\n        return this._width;\n    }\n    set width(w){\n        if (w \u003e= 0 || w \u003c 1000)\n\t    this._width = w;\n    }\n\n    get height(){\n        return this._height;\n    }\n    set height(h){\n        if (h \u003e= 0 || h \u003c 1000)\n             this._height = h;\n    }\n}\n\nclass PositionnedWindow extends SimpleWindow {\n    constructor(title, x, y) {\n        super(title);\n        this.x = x;\n        this.y = y;\n    }\n    displayPosition() {\n        console.log(\"x : \"+ this.x + \" y : \" + this.y);\n   }\n}\n\nvar win = new PositionnedWindow(\"My window\", 10, 10);\nconsole.log(win.title);\nwin.height = 100;\nwin.width = 50;\nconsole.log(\"w: \" + win.width + \" height: \" + win.height);\nwin.displayPosition();\n```\n\n## Resources:\n\n* https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects\n* https://coryrylan.com/blog/javascript-prototypal-inheritance\n* https://coryrylan.com/blog/javascript-es6-class-syntax\n* https://javascriptplayground.com/es5-getters-setters/\n* https://stackoverflow.com/questions/5222209/getter-setter-in-constructor\n* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects\n* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcedlemo%2Fes5_to_es6_objects_manipulation_the_class_syntax","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcedlemo%2Fes5_to_es6_objects_manipulation_the_class_syntax","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcedlemo%2Fes5_to_es6_objects_manipulation_the_class_syntax/lists"}