{"id":1270,"date":"2025-10-26T23:14:13","date_gmt":"2025-10-26T20:14:13","guid":{"rendered":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1270"},"modified":"2026-01-28T11:49:42","modified_gmt":"2026-01-28T08:49:42","slug":"boooo","status":"publish","type":"post","link":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1270","title":{"rendered":"Syntax and structure of objects"},"content":{"rendered":"\n<p>How does JavaScript work with this?<\/p>\n\n\n\n<p>JavaScript objects are powerful data structures that allow you to organize related data into a single unit. Objects consist of key-value pairs, where the key is a string and the value can be any JavaScript data type (number, string, array, function, etc.). Objects provide an excellent way to structure and manipulate data. We encounter objects in many ways in our daily lives. Here are some examples of where objects can be found:<\/p>\n\n\n\n<ol id=\"yui_3_17_2_1_1761209708069_199\" class=\"wp-block-list\">\n<li>E-commerce \u2013 Online stores use objects to represent products, which have properties such as name, price, stock status, description, category, etc.<\/li>\n\n\n\n<li>Hotel reservations \u2013 Hotels use objects to represent reservations, where each reservation object may contain data such as customer name, dates, room type, price calculations, etc.<\/li>\n\n\n\n<li>Cars \u2013 Each car can be an object with different attributes such as make, model, color, engine size, registration number, etc.<\/li>\n\n\n\n<li>Students \u2013 Each student could be an object with properties nagu nimi, vanus, klass, hinded, osalemised, tegevused jne.<\/li>\n<\/ol>\n\n\n\n<p>In JavaScript programs, it is possible to create custom objects as needed, as well as use built-in objects provided by JavaScript itself. Some built-in objects are, for example:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The Math object contains mathematical functions and constants. It is often used to perform mathematical calculations such as rounding, square root, trigonometric functions, etc.<\/li>\n\n\n\n<li>The Date object allows you to work with dates and times. It can be used to create new date objects, access date components (such as day, month, year), and perform various operations between dates.<\/li>\n\n\n\n<li>The Array object is a built-in object used to create and manipulate arrays. It contains several methods that allow you to work with arrays, such as adding, removing, sorting, filtering, etc.<\/li>\n\n\n\n<li>The String object contains methods that allow you to work with strings. For example, you can use methods such as length (to get the length), toUpperCase (to use uppercase letters), substring (to get a substring), etc.<\/li>\n\n\n\n<li>The Object object is the base object in JavaScript that is used as the basis for all objects. Its methods can be used to create objects, add and access properties, copy objects, etc.<\/li>\n<\/ol>\n\n\n\n<h1 class=\"wp-block-heading\">Creating an object<\/h1>\n\n\n\n<p>The syntax of an object consists of key-value pairs, where the key is a string and the value can be any JavaScript data type. In this example, an object named &#8220;car&#8221; has been created with the following properties:<\/p>\n\n\n\n<p>The syntax of an object consists of key-value pairs, where the key is a string and the value can be any JavaScript data type. In this example, an object named &#8220;car&#8221; has been created with the following properties:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nlet auto = {\nmark: &quot;Toyota&quot;,\nmudel: &quot;Corolla&quot;,\naasta: 2022,\nvarv: &quot;punane&quot;,\nlisavarustus: &#x5B;&quot;kliimaseade&quot;, &quot;elektriaknad&quot;, &quot;navigatsioonis\u00fcsteem&quot;]\n};\n\/\/ calling\nconsole.log(auto);\n<\/pre><\/div>\n\n\n<p>To print, print the entire object:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/wp-content\/uploads\/2025\/10\/js18-768x201-1.jpg\" alt=\"\" class=\"wp-image-1293\"\/><\/figure>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconsole.log(auto.mark); \/\/ Output: &quot;Toyota&quot;\nconsole.log(auto.mudel); \/\/ Output: &quot;Corolla&quot;\nconsole.log(auto.aasta); \/\/ Output: 2022\nconsole.log(auto.varv); \/\/ Output: &quot;punane&quot;\nconsole.log(auto.omadused); \/\/ Output: &#x5B;&quot;kliimaseade&quot;, &quot;elektriaknad&quot;, &quot;navigatsioonis\u00fcsteem&quot;]\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/wp-content\/uploads\/2025\/10\/26DCCD3D-15AC-409C-A148-DDE9D5C34BDF.png\" alt=\"\" class=\"wp-image-1294\"\/><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"yui_3_17_2_1_1761209708069_216\">Object methods and using this<\/h1>\n\n\n\n<p>Objects in JavaScript can contain not only properties, but also methods. Methods are functions of an object that can manipulate the object&#8217;s properties or perform other operations in the context of the object. The this keyword is used within methods to refer to the object in which the method is called. Let&#8217;s create a method for the previous car object that displays the car&#8217;s full name. In order for the method to use the properties of the same object, we must use the this keyword.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nlet autoOM = {\n    \/\/omadused\n    mark: &quot;Toyota&quot;,\n    mudel: &quot;Corolla L&quot;,\n    aasta: 2022,\n    varv: &quot;punane&quot;,\n    omadused: &#x5B;&quot;kliimaseade&quot;, &quot;elektriaknad&quot;, &quot;navigatsioonis\u00fcsteem&quot;],\n\n    \/\/meetodid\n    taisnimi: function() {\n        return this.mark + &quot; &quot; + this.mudel;\n    }\n};\n\nconsole.log(autoOM.taisnimi());\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/wp-content\/uploads\/2025\/10\/975BDFFE-7D0E-4017-8062-0BA04468A498.png\" alt=\"\" class=\"wp-image-1295\"\/><\/figure>\n\n\n\n<h1 class=\"wp-block-heading has-large-font-size\">Method shortening<\/h1>\n\n\n\n<p>The new JavaScript ES6 now allows methods to be written in a shorter form.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n\/\/meetodid\n  taisnimi() {\n    return this.mark + &quot; &quot; + this.mudel;\n  }\n<\/pre><\/div>\n\n\n<p>If the properties are in an array, use a for or forEach loop.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nlet auto = {\n  \/\/omadused\n  mark: &quot;Toyota&quot;,\n  mudel: &quot;Corolla L&quot;,\n  aasta: 2022,\n  varv: &quot;punane&quot;,\n  omadused: &#x5B;&quot;kliimaseade&quot;, &quot;elektriaknad&quot;, &quot;navigatsioonis\u00fcsteem&quot;],\n\n  \/\/meetodid\n  taisnimi() {\n    return this.mark + &quot; &quot; + this.mudel;\n  },\n\n  kuvaOmadused() {\n    this.omadused.forEach(omadus =&gt; console.log(omadus));  \n  }\n};\n\nauto.kuvaOmadused();\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/wp-content\/uploads\/2025\/10\/4974572B-AE19-418C-87EA-6645DEEDC401.png\" alt=\"\" class=\"wp-image-1296\"\/><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\">Object arrays<\/h1>\n\n\n\n<p>An object array is a data structure in JavaScript that consists of several objects arranged in order based on an index. Each object is a collection of key-value pairs, where the key is unique and the value is the data of the key-value pair. An object array can contain various data types, including text (string), numbers, boolean values, functions, other objects, etc.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Creating and displaying an array of objects<\/h1>\n\n\n\n<p>Creating an array of objects is relatively simple. Let&#8217;s start by storing car data, for example. Each car is represented as an object that contains information about the car&#8217;s make, model, and year of manufacture.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nlet autod = &#x5B;\n  { mark: &#039;Toyota&#039;, mudel: &#039;Corolla&#039;, aasta: 2007 },\n  { mark: &#039;Honda&#039;, mudel: &#039;Civic&#039;, aasta: 2012 },\n  { mark: &#039;Tesla&#039;, mudel: &#039;Model 3&#039;, aasta: 2019 }\n];\n\nconsole.log(autod);\n<\/pre><\/div>\n\n\n<p>If we want to see the data for a specific car, we can refer to the car&#8217;s position in the array (remember that array indexing starts at 0)<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconsole.log(autod&#x5B;0]);\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/wp-content\/uploads\/2025\/10\/2A78214F-D8AE-4DCF-A001-79776039639A.png\" alt=\"\" class=\"wp-image-1298\"\/><\/figure>\n\n\n\n<p>And in this object, I can access the elements using &#8220;dot syntax,&#8221; as above.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconsole.log(autod&#x5B;0].mark);\n<\/pre><\/div>\n\n\n<p>To view all models, we again use the forEach loop<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nlet autod = &#x5B;\n  { mark: &#039;Toyota&#039;, mudel: &#039;Corolla&#039;, aasta: 2007 },\n  { mark: &#039;Honda&#039;, mudel: &#039;Civic&#039;, aasta: 2012 },\n  { mark: &#039;Tesla&#039;, mudel: &#039;Model 3&#039;, aasta: 2019 }\n];\n\n\nautod.forEach((auto) =&gt; {\n  console.log(`\n    Mark: ${auto.mark},\n    Mudel: ${auto.mudel},\n    Aasta: ${auto.aasta}\n    `);\n});\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">Object array methods<\/h2>\n\n\n\n<p>JavaScript array methods can be used with both regular arrays and object arrays. Methods such as push(), pop(), shift(), unshift(), splice(), slice(), forEach(), map(), filter(), reduce(), sort(), etc. can all be used regardless of whether the array contains simple data types (such as strings or numbers) or more complex data (such as objects or even other arrays).<\/p>\n\n\n\n<p>This is because arrays are objects in JavaScript, and both simple data types and objects are stored in arrays in the same way. The type of data contained in an array does not affect array methods. For example, adding new objects to an array of objects using push and unshift.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nlet autod = &#x5B;\n    { mark: &#039;Toyota&#039;, mudel: &#039;Corolla&#039;, aasta: 2007 },\n    { mark: &#039;Honda&#039;, mudel: &#039;Civic&#039;, aasta: 2012 },\n    { mark: &#039;Tesla&#039;, mudel: &#039;Model 3&#039;, aasta: 2019 },\n    { mark: &#039;BMW&#039;, mudel: &#039;320i&#039;, aasta: 2015 },\n    { mark: &#039;Ford&#039;, mudel: &#039;Focus&#039;, aasta: 2020 }\n];\n\n\/\/Lisab uue objekti massiivi l\u00f5ppu\nautod.push({ mark: &#039;BMW&#039;, mudel: &#039;320i&#039;, aasta: 2015 });\nautod.unshift({ mark: &#039;Ford&#039;, mudel: &#039;Focus&#039;, aasta: 2020 });\n<\/pre><\/div>\n\n\n<p>The splice method simultaneously deletes and adds.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nmassiiv.splice(\n  {start indeks},\n  {mitu eemaldada},\n  {mida lisada}\n);\n<\/pre><\/div>\n\n\n<p>For example<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: sql; title: ; notranslate\" title=\"\">\n\/\/Eemaldab esimese objekti\nautod.splice(0,1);\n\/\/Lisab objekti alates teisest indeksist, ei kustutata midagi\nautod.splice(1,0,{ mark: &#039;Audi&#039;, mudel: &#039;A4&#039;, aasta: 2018 });\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">Searching in an array<\/h2>\n\n\n\n<p>To search in an array of objects, we use the find method, which requires a function to be executed. We use the arrow function because it is shorter.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n\/\/Otsimine\nlet otsing = autod.find(auto=&gt;auto.aasta &gt; 2018);\nconsole.log(otsing);\n<\/pre><\/div>\n\n\n<p>This method finds the first match and returns it. If no match is found, undefined is returned. To set multiple conditions, use the &amp;&amp; operator.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n\/\/Otsimine\nlet otsing = autod.find(auto=&gt;auto.aasta &gt; 2018 &amp;&amp; auto.mark === &quot;Tesla&quot;);\nconsole.log(otsing);\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/wp-content\/uploads\/2025\/10\/5187E1CF-CBF1-467D-B639-9E3AF041EFAC.png\" alt=\"\" class=\"wp-image-1301\"\/><\/figure>\n\n\n\n<p>Since find only finds one result, use the filter method to get multiple answers. The filter creates a new array from the array and outputs the elements that match the conditions.<\/p>\n\n\n\n<p>For example, we have numbers and want to get even numbers from them<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nlet arvud = &#x5B;1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n\nconst filtreeritud = arvud.filter(arv =&gt; arv % 2 === 0);\nconsole.log(filtreeritud);\n<\/pre><\/div>\n\n\n<p>In the case of cars, we can turn to auto.aasta, for example, and filter those that are newer than 2018.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\/\/Filtreerimine\nlet filter = autod.filter(auto=&gt;auto.aasta &gt; 2018);\nconsole.log(filter);\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">Sorting an array<\/h2>\n\n\n\n<p>As a final method, let&#8217;s look at sorting. Simple sorting does not work correctly for arrays of objects. Therefore, we need to use a comparison function.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nautod.sort((a, b) =&gt; a.aasta - b.aasta);\nconsole.log(autod);\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/wp-content\/uploads\/2025\/10\/A5A1A706-39B9-4BBC-A9C0-CC2F3E734AFD.png\" alt=\"\" class=\"wp-image-1302\"\/><\/figure>\n\n\n\n<p>Here, (a, b) =&gt; a &#8211; b is a comparison function that tells sort() to sort numbers by their actual numerical values rather than their string values. The function a &#8211; b returns a negative value if a is less than b, a positive value if a is greater than b, and 0 if a and b are equal \u2013 exactly what sort() needs to sort its elements correctly.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Task<\/h2>\n\n\n\n<p><strong>Book object<\/strong><\/p>\n\n\n\n<p>Create a book object with at least three properties: title, author, year.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nlet raamat = { \n  pealkiri: &#039;kuritegu ja karistus&#039;, \n  autor: &#039;Fyodor Dostoevsky&#039;, \n  aasta: 1866\n};\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/wp-content\/uploads\/2025\/10\/image-13.png\" alt=\"\" class=\"wp-image-1371\"\/><\/figure>\n\n\n\n<p>2. Add a method that displays the description of the first book.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconsole.log(raamat.pealkiri);\n<\/pre><\/div>\n\n\n<p>Answer:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/wp-content\/uploads\/2025\/10\/image-14.png\" alt=\"\" class=\"wp-image-1372\"\/><\/figure>\n\n\n\n<p><strong>3. Add a method that changes the year of publication and prints the results to the console.<\/strong><\/p>\n\n\n\n<p>crime and punishment amended in 2020<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nlet raamat = { \n  pealkiri: &#039;Kuritegu ja karistus&#039;, \n  autor: &#039;Fyodor Dostoevsky&#039;, \n  aasta: 1866\n};\n\nraamat.muudaAasta = function() {\n  this.aasta = 2020;\n  console.log(this.aasta);\n};\n\nraamat.muudaAasta();\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/wp-content\/uploads\/2025\/10\/image-15.png\" alt=\"\" class=\"wp-image-1373\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Library<\/h3>\n\n\n\n<p>Create an object library with books as its properties (an array of books).<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nlet raamatukogu = &#x5B;\n  { pealkiri: &#039;l\u00e4\u00e4nerindel on k\u00f5ik vaikne&#039;, autor: &#039;Erih Remark&#039;, aasta: 1928},\n  { pealkiri: &#039;Sipsik&#039;, autor: &#039;Eno Raud&#039;, aasta: 1962},\n  { pealkiri: &#039;Jevgeni Onegin&#039;, autor: &#039;Aleksandr Pushkin&#039;, aasta: 1833}\n];\n<\/pre><\/div>\n\n\n<p>2. Add a method that displays all books nicely in the console.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nraamatukogu.forEach((raamatud) =&gt; {\n  console.log(`\n    Pealkiri: ${raamatud.pealkiri},\n    Autor: ${raamatud.autor},\n    Aasta: ${raamatud.aasta}\n    `);\n});\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/wp-content\/uploads\/2025\/10\/image-16.png\" alt=\"\" class=\"wp-image-1374\" style=\"width:401px;height:auto\"\/><\/figure>\n\n\n\n<p>3. Add a method that adds a new book.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nraamatukogu.push({ pealkiri: &#039;midagi&#039;, autor: &#039;keegi&#039;, aasta: 2025 });\n<\/pre><\/div>\n\n\n<p>4. Add a method that displays the total number of books in the library.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconsole.log(raamatukogu.length)\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/wp-content\/uploads\/2025\/10\/image-17.png\" alt=\"\" class=\"wp-image-1375\"\/><\/figure>\n\n\n\n<p>5. Add a method that calculates how many books have been published since 2000.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nlet filter = raamatukogu.filter(raamatukogu=&gt;raamatukogu.aasta &gt; 2000);\nconsole.log(filter.length);\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/wp-content\/uploads\/2025\/10\/image-18.png\" alt=\"\" class=\"wp-image-1376\"\/><\/figure>\n\n\n\n<p>6. Develop your own method and write down what it means.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nraamatukogu.forEach((raamatud) =&gt; {\n  console.log(`\n    Pealkiri: ${raamatud.pealkiri + &quot; - &quot; + raamatud.autor},\n    Aasta: ${raamatud.aasta}\n    `);\n});\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/wp-content\/uploads\/2025\/10\/image-19.png\" alt=\"\" class=\"wp-image-1377\" style=\"width:486px;height:auto\"\/><\/figure>\n\n\n\n<!DOCTYPE html>\n<html lang=\"et\">\n<head>\n  \n  \n  <title>Raamatute andmed<\/title>\n  <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\n  <h1>Raamatute andmed<\/h1>\n  <div id=\"output\"><\/div>\n\n  <script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n\n\n\n<style>\nbody {\n  font-family: Arial, sans-serif;\n  background-color: #f4f4f9;\n  color: #333;\n  margin: 2rem;\n}\n\nh1, h2 {\n  color: #444;\n}\n\n.raamat {\n  background: white;\n  padding: 1rem;\n  margin-bottom: 1rem;\n  border-radius: 8px;\n  box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n}\n<\/style>\n\n\n\n<script>\nlet raamat = { \n  pealkiri: 'Kuritegu ja karistus', \n  autor: 'Fyodor Dostoevsky', \n  aasta: 1866\n};\n\nraamat.muudaAasta = function() {\n  this.aasta = 2020;\n  return this.aasta;\n};\n\nraamat.muudaAasta();\n\nlet raamatukogu = [\n  { pealkiri: 'L\u00e4\u00e4nerindel on k\u00f5ik vaikne', autor: 'Erih Remark', aasta: 1928 },\n  { pealkiri: 'Sipsik', autor: 'Eno Raud', aasta: 1962 },\n  { pealkiri: 'Jevgeni Onegin', autor: 'Aleksandr Pushkin', aasta: 1833 }\n];\n\nraamatukogu.push({ pealkiri: 'Midagi', autor: 'Keegi', aasta: 2025 });\n\nconst output = document.getElementById('output');\n\n\/\/ \u00dcksik raamat\noutput.innerHTML += `<h2>\u00dcksik raamat<\/h2>\n  <div class=\"raamat\">\n    <strong>${raamat.pealkiri}<\/strong> \u2013 ${raamat.autor} (${raamat.aasta})\n  <\/div>`;\n\n\/\/ Kogu raamatukogu\noutput.innerHTML += `<h2>Raamatukogu (${raamatukogu.length} raamatut)<\/h2>`;\n\nraamatukogu.forEach((r) => {\n  output.innerHTML += `\n    <div class=\"raamat\">\n      <p><strong>Pealkiri:<\/strong> ${r.pealkiri}<\/p>\n      <p><strong>Autor:<\/strong> ${r.autor}<\/p>\n      <p><strong>Aasta:<\/strong> ${r.aasta}<\/p>\n    <\/div>`;\n});\n\n\/\/ Filtreeritud raamatud\nlet filter = raamatukogu.filter(r => r.aasta > 2000);\n\noutput.innerHTML += `<h2>Filtreeritud raamatud (p\u00e4rast 2000) \u2013 ${filter.length} tk<\/h2>`;\nfilter.forEach((r) => {\n  output.innerHTML += `\n    <div class=\"raamat\">\n      <p><strong>${r.pealkiri}<\/strong> \u2013 ${r.autor} (${r.aasta})<\/p>\n    <\/div>`;\n});\n<\/script>\n\n\n\n<p><strong>How it looks in webstorm<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/wp-content\/uploads\/2025\/10\/0C9C0CDA-EEC5-4845-B44F-4D5BDC4B370A-1024x451.png\" alt=\"\" class=\"wp-image-1384\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">And this is the link to the work:<\/h3>\n\n\n\n<p><a href=\"https:\/\/khusseintakhmazov24.thkit.ee\/HTMLtood\/ramatukogu\/ramatukogu.html\">https:\/\/khusseintakhmazov24.thkit.ee\/HTMLtood\/ramatukogu\/ramatukogu.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How does JavaScript work with this? JavaScript objects are powerful data structures that allow you to organize related data into a single unit. Objects consist of key-value pairs, where the key is a string and the value can be any JavaScript data type (number, string, array, function, etc.). Objects provide an excellent way to structure [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[],"class_list":["post-1270","post","type-post","status-publish","format-standard","hentry","category-web-develompent"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Syntax and structure of objects - Hussein Tahmazov portfolio eng<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1270\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Syntax and structure of objects - Hussein Tahmazov portfolio eng\" \/>\n<meta property=\"og:description\" content=\"How does JavaScript work with this? JavaScript objects are powerful data structures that allow you to organize related data into a single unit. Objects consist of key-value pairs, where the key is a string and the value can be any JavaScript data type (number, string, array, function, etc.). Objects provide an excellent way to structure [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1270\" \/>\n<meta property=\"og:site_name\" content=\"Hussein Tahmazov portfolio eng\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-26T20:14:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-28T08:49:42+00:00\" \/>\n<meta name=\"author\" content=\"Hussein\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hussein\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/?p=1270#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/?p=1270\"},\"author\":{\"name\":\"Hussein\",\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/#\\\/schema\\\/person\\\/f75baafdedeb73cd9ef1d8d87311bbb0\"},\"headline\":\"Syntax and structure of objects\",\"datePublished\":\"2025-10-26T20:14:13+00:00\",\"dateModified\":\"2026-01-28T08:49:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/?p=1270\"},\"wordCount\":1197,\"image\":{\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/?p=1270#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/js18-768x201-1.jpg\",\"articleSection\":[\"Web develompent\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/?p=1270\",\"url\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/?p=1270\",\"name\":\"Syntax and structure of objects - Hussein Tahmazov portfolio eng\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/?p=1270#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/?p=1270#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/js18-768x201-1.jpg\",\"datePublished\":\"2025-10-26T20:14:13+00:00\",\"dateModified\":\"2026-01-28T08:49:42+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/#\\\/schema\\\/person\\\/f75baafdedeb73cd9ef1d8d87311bbb0\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/?p=1270#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/?p=1270\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/?p=1270#primaryimage\",\"url\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/js18-768x201-1.jpg\",\"contentUrl\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/js18-768x201-1.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/?p=1270#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Syntax and structure of objects\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/#website\",\"url\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/\",\"name\":\"Hussein Tahmazov portfolio eng\",\"description\":\"Junior Software Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/#\\\/schema\\\/person\\\/f75baafdedeb73cd9ef1d8d87311bbb0\",\"name\":\"Hussein\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e10dcd9bae99726932e7824a93117d2a279e021c0f4ff3cc2972016580127314?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e10dcd9bae99726932e7824a93117d2a279e021c0f4ff3cc2972016580127314?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e10dcd9bae99726932e7824a93117d2a279e021c0f4ff3cc2972016580127314?s=96&d=mm&r=g\",\"caption\":\"Hussein\"},\"sameAs\":[\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\"],\"url\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Syntax and structure of objects - Hussein Tahmazov portfolio eng","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1270","og_locale":"en_GB","og_type":"article","og_title":"Syntax and structure of objects - Hussein Tahmazov portfolio eng","og_description":"How does JavaScript work with this? JavaScript objects are powerful data structures that allow you to organize related data into a single unit. Objects consist of key-value pairs, where the key is a string and the value can be any JavaScript data type (number, string, array, function, etc.). Objects provide an excellent way to structure [&hellip;]","og_url":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1270","og_site_name":"Hussein Tahmazov portfolio eng","article_published_time":"2025-10-26T20:14:13+00:00","article_modified_time":"2026-01-28T08:49:42+00:00","author":"Hussein","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hussein","Estimated reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1270#article","isPartOf":{"@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1270"},"author":{"name":"Hussein","@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/#\/schema\/person\/f75baafdedeb73cd9ef1d8d87311bbb0"},"headline":"Syntax and structure of objects","datePublished":"2025-10-26T20:14:13+00:00","dateModified":"2026-01-28T08:49:42+00:00","mainEntityOfPage":{"@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1270"},"wordCount":1197,"image":{"@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1270#primaryimage"},"thumbnailUrl":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/wp-content\/uploads\/2025\/10\/js18-768x201-1.jpg","articleSection":["Web develompent"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1270","url":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1270","name":"Syntax and structure of objects - Hussein Tahmazov portfolio eng","isPartOf":{"@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/#website"},"primaryImageOfPage":{"@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1270#primaryimage"},"image":{"@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1270#primaryimage"},"thumbnailUrl":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/wp-content\/uploads\/2025\/10\/js18-768x201-1.jpg","datePublished":"2025-10-26T20:14:13+00:00","dateModified":"2026-01-28T08:49:42+00:00","author":{"@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/#\/schema\/person\/f75baafdedeb73cd9ef1d8d87311bbb0"},"breadcrumb":{"@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1270#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1270"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1270#primaryimage","url":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/wp-content\/uploads\/2025\/10\/js18-768x201-1.jpg","contentUrl":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/wp-content\/uploads\/2025\/10\/js18-768x201-1.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1270#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng"},{"@type":"ListItem","position":2,"name":"Syntax and structure of objects"}]},{"@type":"WebSite","@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/#website","url":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/","name":"Hussein Tahmazov portfolio eng","description":"Junior Software Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/#\/schema\/person\/f75baafdedeb73cd9ef1d8d87311bbb0","name":"Hussein","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/e10dcd9bae99726932e7824a93117d2a279e021c0f4ff3cc2972016580127314?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e10dcd9bae99726932e7824a93117d2a279e021c0f4ff3cc2972016580127314?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e10dcd9bae99726932e7824a93117d2a279e021c0f4ff3cc2972016580127314?s=96&d=mm&r=g","caption":"Hussein"},"sameAs":["https:\/\/khusseintakhmazov24.thkit.ee\/wp"],"url":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?author=1"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/index.php?rest_route=\/wp\/v2\/posts\/1270","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1270"}],"version-history":[{"count":5,"href":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/index.php?rest_route=\/wp\/v2\/posts\/1270\/revisions"}],"predecessor-version":[{"id":1295,"href":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/index.php?rest_route=\/wp\/v2\/posts\/1270\/revisions\/1295"}],"wp:attachment":[{"href":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1270"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1270"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}