This post will not be a regular step by step post as I usually do it; this will rather be a collection of some notes from a recent lecture I did. However, I hope you still find it useful.<\/p>\n
state<\/code> (represented by properties<\/code>) and a behavior<\/code> (represented by methods<\/code>)<\/li>\nfunctions<\/code> on an object are called methods<\/code><\/li>\n- a developer doesn’t need to know how an object\u2019s methods work under the hood to be able to use them (encapsulation)<\/li>\n
- a lot of times it makes sense to model real-life objects as objects in the code<\/li>\n<\/ul>\n
\n \u26a0\ufe0f interesting thing in JavaScript is that arrays<\/code> are actually objects<\/p>\n You can test it like this: console.log(typeof []);<\/code><\/p>\n It’s an object because it has a property like length<\/code>, and methods like pop<\/code> and push<\/code>\n<\/p><\/blockquote>\nobject literal<\/h2>\nconst person = {\n name: 'Nikola',\n age: 33,\n walk: function() {\n console.log(\"I'm walking\");\n }\n}\n\nconsole.log(person.name);\n<\/code><\/pre>\nThere’s also this thing called ‘bracket notation’:<\/p>\n
person['name']\n\nperson['walk']();\n<\/code><\/pre>\nHere’s how you would output all of the object’s properties with jQuery:<\/p>\n
$.each(person, function(i,o){\n console.log(i, o);\n});\n<\/code><\/pre>\nthis<\/code> in JavaScript<\/h2>\n\n- normal function calls<\/li>\n<\/ul>\n
function f(){\n console.log(this); \/\/ Window object\n}\n\nf();\n<\/code><\/pre>\n\n- object methods<\/li>\n<\/ul>\n
var obj = {\n a: \"test\",\n b: \"test 2\",\n log: function() {\n console.log(this.a);\n }\n}\n\nobj.log();\n<\/code><\/pre>\n\n- constructed object methods<\/li>\n<\/ul>\n
var Person = function(name, surname) {\n this.name = name || 'Marko';\n this.surname = surname || 'Maric';\n\n this.log = function() {\n console.log(this.name + \" \" + this.surname);\n }\n}\n\nvar pero = new Person('Pero', 'Peric'); \/\/ constructor function\npero.log();\n<\/code><\/pre>\nJavaScript Class Syntax<\/h2>\n
Object literals fall short when you have to create multiple of them. Having to type each of them out and then in case of a change, change it in all the places would be unmanageable.<\/p>\n