Object is a data type that stores information in the form of key-value pairs. Each element is mapped to its own key and the order of the elements is completely unimportant.
var cat = {
name: 'Muffin',
age: 5
};
console.log(cat.name); // Logs 'Muffin' in the console
console.log(cat.age); // Logs 5 in the console
console.log(cat.color); // Logs undefined, there is no such key in the object
cat.age++; // Increases cat’s age by 1
console.log(cat.age) // Logs 6 in the console
cat.name = 'Rocky'; // Replaced name property value on the outside
console.log(cat.name); // Logs 'Rocky' in the console
Transfer by reference
There is always one object here, no new place is created in memory for a copy of the object. Each variable contains a reference to a single object, not a new separate entity. Therefore, when we change something in an object through one of the variables that contains a reference to it, the changes are visible in all other variables, be it twenty or forty of them. This is an important feature of objects to remember. It’s called transferring objects by reference.
var firstCat = {
name: 'Muffin',
age: 5
};
var secondCat = firstCat;
console.log(secondCat);
// Logs {"name":"Muffin","age":5}
firstCat.name = 'Snowball';
console.log(secondCat);
// Logs {"name":"Snowball","age":5}
Continue
<!DOCTYPE html><html lang="en" class="no-js"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><script>var b=document.documentElement.classList;b.remove('no-js');if(!window.Promise||!window.sessionStorage||!!sessionStorage.getItem('muller.v2')){b.add('muller')}</script><link rel="dns-prefetch" href="https://assets.htmlacademy.org"><script async src="https://www.googletagmanager.com/gtag/js?id=G-MXPCRXM48C"></script><script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-MXPCRXM48C');
</script><script type="text/javascript">
(function(e,t){var n=e.amplitude||{_q:[],_iq:{}};var r=t.createElement("script")
;r.type="text/javascript"
;r.integrity="sha384-d/yhnowERvm+7eCU79T/bYjOiMmq4F11ElWYLmt0ktvYEVgqLDazh4+gW9CKMpYW"
;r.crossOrigin="anonymous";r.async=true
;r.src="https://cdn.amplitude.com/libs/amplitude-5.2.2-min.gz.js"
;r.onload=function(){if(!e.amplitude.runQueuedFunctions){
console.log("[Amplitude] Error: could not load SDK")}}
;var i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i)
;function s(e,t){e.prototype[t]=function(){
this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));return this}}
var o=function(){this._q=[];return this}
;var a=["add","append","clearAll","prepend","set","setOnce","unset"]
;for(var u=0;u<a.length;u++){s(o,a[u])}n.Identify=o;var c=function(){this._q=[]
;return this}
;var l=["setProductId","setQuantity","setPrice","setRevenueType","setEventProperties"]
;for(var p=0;p<l.length;p++){s(c,l[p])}n.Revenue=c
;var d=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","setGlobalUserProperties","identify","clearUserProperties","setGroup","logRevenueV2","regenerateDeviceId","groupIdentify","onInit","logEventWithTimestamp","logEventWithGroups","setSessionId","resetSessionId"]
;function v(e){function t(t){e[t]=function(){
e._q.push([t].concat(Array.prototype.slice.call(arguments,0)))}}
for(var n=0;n<d.length;n++){t(d[n])}}v(n);n.getInstance=function(e){
e=(!e||e.length===0?"$default_instance":e).toLowerCase()
;if(!n._iq.hasOwnProperty(e)){n._iq[e]={_q:[]};v(n._iq[e])}return n._iq[e]}
;e.amplitude=n})(window,document);
amplitude.getInstance().init("df11525b6880a3c5e2af14f9b6238408", null,{
includeUtm: true,
includeGclid: true,
includeReferrer: true,
deviceIdFromUrlParam: true
}, function (instance) {
window.amplitudeLoaded = true;
});
</script><link rel="stylesheet" href="https://assets.htmlacademy.org/css/core.v284.css"><link rel="stylesheet" href="https://assets.htmlacademy.org/css/profile.v236.css"><link rel="stylesheet" href="https://assets.htmlacademy.org/css/course.v246.css"><link rel="stylesheet" href="https://assets.htmlacademy.org/css/course-interface-light.v20.css"><link rel="stylesheet" href="https://assets.htmlacademy.org/css/course-interface-en.v2.css"><script src="https://assets.htmlacademy.org/js/sentry.js" data-sentry="3774884cc81746ed84c0ba7c5cd4ac7b" data-project="26" data-version="2"></script><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/cookies.css"><link rel="preload" as="script" href="https://assets.htmlacademy.org/js/general.v274.js"><title>Summary of “Objects”. Part 1 — Objects — HTML Academy</title><meta name="csrf-token" content="16664caf322823086fca37a7326b9bd2a54"><meta property="og:type" content="website"><meta property="og:site_name" content="HTML Academy"><meta name="twitter:url" property="og:url" content="https://htmlacademy.org"><meta name="twitter:title" property="og:title" content="Interactive online courses HTML Academy"><meta name="twitter:description" property="og:description" content="Together we’ll learn how to work with real code, solve true-to-life problems, use cutting edge technologies. Minimum of boring theory and lots of practical tasks."><meta name="twitter:image" property="og:image" content="https://htmlacademy.org/og/htmlacademy.png"><meta name="twitter:card" content="summary_large_image"><link rel="canonical" href="https://htmlacademy.org/courses/javascript-programming/objects/summary-1"><meta name="theme-color" content="#2f358f"></head><body class="course-interface course-interface--light course-interface--full" data-base="/assets/courses/7/"><header class="page-header page-header--course"><div class="page-header__inner"><div class="page-header__top"><a class="page-header__logo" href="/" aria-label="HTML Academy Home"><img src="https://assets.htmlacademy.org/img/logo--small.svg?cs=1218aec0be4a5f23db79ad29a14e30f7f9fb9a25" width="24" height="36" alt="HTML Academy"></a><nav class="main-nav main-nav--mini" role="navigation"><div class="main-nav__course-nav"><a class="main-nav__course-item main-nav__course-button main-nav__course-button--prev" href="/courses/javascript-programming/objects/edit-message">Let’s make adjustments</a><div class="main-nav__course-item main-nav__course-list main-nav__course-list--collapsed"><b class="main-nav__course-title">Objects</b><span class="main-nav__course-stat">20/30</span><div class="main-nav__course-contents"><a class="main-nav__course-contents-link" href="/courses/javascript-programming/objects">Back to the list of tasks</a><ul class="main-nav__course-contents-list"><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/game-start">1. Shall we play?</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/add-players">2. Players, let’s start!</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/first-throw">3. My attempt number one</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/hello-object">4. Hello, object!</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/read-object">5. Reading from the object</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/add-array">6. Count off!</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/overwrite-property">7. Overriding object properties</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/pass-by-reference">8. Passing object by a link</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/game-rules-object">9. My game</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/add-attempts">10. Giving out the attempts</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/search-winner-start">11. Who is the winner?</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/loop-in-loop">12. Announce the entire list, please</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/add-if">13. Looking for a cat with great results</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/array-push-winners">14. No one will hide</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/else-if">15. New conditions</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/same-result">16. Hard to come across</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/print-winners">17. Let’s bring it all to light</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/add-new-player">18. Roll the dice, gentlemen cats!</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/edit-message">19. Let’s make adjustments</a></li><li class="main-nav__course-contents-item main-nav__course-contents-item--current"><a href="/courses/javascript-programming/objects/summary-1">20. Summary of “Objects”. Part 1</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/challenge-1">21. Tenth program: “Golden ball”</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/comp-config">22. Build it yourself!</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/first-method">23. My first method</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/methods-implementation">24. Implementing methods</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/map">25. Object as a dictionary</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/use-map">26. Bracket notation</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/this">27. Let’s not forget about the context</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/add-another-computer">28. Store check</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/summary-2">29. Summary of “Objects”. Part 2</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/challenge-2">30. Eleventh program: “The house that Muffin built”</a></li></ul></div></div><a class="main-nav__course-item main-nav__course-button main-nav__course-button--next" href="/courses/javascript-programming/objects/challenge-1">Tenth program: “Golden ball”</a></div><ul class="main-nav__list main-nav__list--user main-nav__list--user-guest"><li class="main-nav__item" itemprop="name"><a class="main-nav__link" href="/signup?redirect_url=%2Fcourses%2Fjavascript-programming%2Fobjects%2Fsummary-1" title="Sign up" data-modal="open" data-value="register" itemprop="url"><span class="main-nav__icon" aria-hidden="true"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#user"></use></svg></span>Sign up</a></li><li class="main-nav__item main-nav__item--login" itemprop="name"><a class="main-nav__link" href="/login?redirect_url=%2Fcourses%2Fjavascript-programming%2Fobjects%2Fsummary-1" title="Log in" data-modal="open" data-value="login" itemprop="url"><span class="main-nav__icon" aria-hidden="true"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#login"></use></svg></span>Log in</a></li></ul></nav></div></div></header><main class="course-container"><div class="course-theory"><div class="course-theory__inner"><section class="course-theory__content"><h1 class="course-theory__content-heading course-theory__content-heading--synopsis">Summary of “Objects”. Part 1</h1><div class="course-theory__content-text"><p>Object is a data type that stores information in the form of key-value pairs. Each element is mapped to its own key and the order of the elements is completely unimportant.</p><pre><code>var cat = {
name: 'Muffin',
age: 5
};
console.log(cat.name); // Logs 'Muffin' in the console
console.log(cat.age); // Logs 5 in the console
console.log(cat.color); // Logs undefined, there is no such key in the object
cat.age++; // Increases cat’s age by 1
console.log(cat.age) // Logs 6 in the console
cat.name = 'Rocky'; // Replaced name property value on the outside
console.log(cat.name); // Logs 'Rocky' in the console</code></pre><h3>Transfer by reference</h3><p>There is always one object here, no new place is created in memory for a copy of the object. Each variable contains a reference to a single object, not a new separate entity. Therefore, when we change something in an object through one of the variables that contains a reference to it, the changes are visible in all other variables, be it twenty or forty of them. This is an important feature of objects to remember. It’s called <em>transferring objects by reference</em>.</p><pre><code>var firstCat = {
name: 'Muffin',
age: 5
};
var secondCat = firstCat;
console.log(secondCat);
// Logs {"name":"Muffin","age":5}
firstCat.name = 'Snowball';
console.log(secondCat);
// Logs {"name":"Snowball","age":5}</code></pre><br><a class="button button--green button--large button--wide button--icon" href="/courses/javascript-programming/objects/challenge-1"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#icon-check-bold"></use></svg>
Continue
</a></div></section></div></div><script
src="https://assets.htmlacademy.org/scripts/courses-spa/htmlacademy-task.v43.js"
data-assets-path="https://assets.htmlacademy.org/scripts/courses-spa/"
data-task-type="theory"
data-lang="en"
></script><script>HtmlacademyTask.setup(function(){});</script></main><footer class="page-footer page-footer--tiny"><div class="page-footer__inner"><p><a href="/docs/cookies">Cookies</a> ∙
<a href="/docs/privacy">Privacy</a> ∙
<a href="/docs/agreement">License Agreement</a> ∙
<a href="/docs/about">About</a> ∙
<a href="/contacts">Contacts</a> ∙
© HTML Academy OÜ, 2019−2026
</p><div class="page-footer__financial"><img src="https://assets.htmlacademy.org/img/visa-white.svg?cs=96e54ec8c587db9d4b1d8d328ffd87c2ebfd9555" alt="VISA" title="VISA" width="35" height="35"><img src="https://assets.htmlacademy.org/img/mastercard-horizontal.v2.svg" alt="Mastercard" title="Mastercard" width="35" height="35"></div></div></footer><div class="modal"><div class="modal__inner"><div class="modal__wrapper js-login hidden"><button class="modal__close icon-close" type="button" title="Close" data-modal="close"></button><h4 class="modal__header">Log in</h4><ul class="modal__social"><li class="modal__social-link modal__social-link--fb"><a href="/login/fb?redirect_url=%2Fcourses%2Fjavascript-programming%2Fobjects%2Fsummary-1" rel="nofollow" title="Log in via Facebook"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#facebook"></use></svg></a></li><li class="modal__social-link modal__social-link--google"><a href="/login/google?redirect_url=%2Fcourses%2Fjavascript-programming%2Fobjects%2Fsummary-1" rel="nofollow" title="Log in via Google"><svg height="30" width="30" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M457.732 216.625c2.628 14.041 4.063 28.743 4.063 44.098C461.796 380.688 381.481 466 260.204 466c-116.023 0-210-93.977-210-210s93.977-210 210-210c56.704 0 104.077 20.867 140.44 54.73l-59.204 59.197v-.135c-22.046-21.002-50-31.762-81.236-31.762-69.297 0-125.604 58.537-125.604 127.841 0 69.29 56.306 127.968 125.604 127.968 62.87 0 105.653-35.965 114.46-85.312h-114.46v-81.902h197.528z"/></svg></a></li></ul><div class="modal__or"><span>or</span></div><form class="modal__form form" action="/login?redirect_url=%2Fcourses%2Fjavascript-programming%2Fobjects%2Fsummary-1" autocomplete="off" method="post" data-submit="o"><input type="hidden" name="csrf_name" value="csrf69aea6da62899"><input type="hidden" name="csrf_value" value="563e09071aa98c875da3dcf10108270b"><div class="form__group"><label class="sr-only" for="login-email">Email</label><input class="field field--text field--full-width" type="email" name="email" placeholder="Email" value="" id="login-email"></div><div class="form__group"><label class="sr-only" for="login-password">Password</label><input class="field field--text field--full-width ym-disable-keys" type="password" name="password" placeholder="Password" id="login-password"></div><input class="button button--full-width" type="submit" data-submit-text="Logging in…" value="Log in"></form><p class="modal__forgot-password"><a href="/recover" data-modal="open" data-value="recover">Forgot your password?</a></p><a class="modal__bottom-link" href="/signup" data-modal="open" data-value="register">Sign up</a></div><div class="modal__wrapper js-register hidden"><button class="modal__close icon-close" type="button" title="Close" data-modal="close"></button><h4 class="modal__header">Sign up</h4><ul class="modal__social"><li class="modal__social-link modal__social-link--fb"><a href="/login/fb?redirect_url=%2Fcourses%2Fjavascript-programming%2Fobjects%2Fsummary-1" rel="nofollow" title="Log in via Facebook"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#facebook"></use></svg></a></li><li class="modal__social-link modal__social-link--google"><a href="/login/google?redirect_url=%2Fcourses%2Fjavascript-programming%2Fobjects%2Fsummary-1" rel="nofollow" title="Log in via Google"><svg height="30" width="30" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M457.732 216.625c2.628 14.041 4.063 28.743 4.063 44.098C461.796 380.688 381.481 466 260.204 466c-116.023 0-210-93.977-210-210s93.977-210 210-210c56.704 0 104.077 20.867 140.44 54.73l-59.204 59.197v-.135c-22.046-21.002-50-31.762-81.236-31.762-69.297 0-125.604 58.537-125.604 127.841 0 69.29 56.306 127.968 125.604 127.968 62.87 0 105.653-35.965 114.46-85.312h-114.46v-81.902h197.528z"/></svg></a></li></ul><div class="modal__or"><span>or</span></div><form class="modal__form form" action="/signup?redirect_url=%2Fcourses%2Fjavascript-programming%2Fobjects%2Fsummary-1" autocomplete="off" method="post"><input type="hidden" name="csrf_name" value="csrf69aea6da62899"><input type="hidden" name="csrf_value" value="563e09071aa98c875da3dcf10108270b"><div class="form__group"><label class="sr-only" for="email">
Email
<span class="required"><span class="sr-only">Required field</span><span class="required__star">*</span></span></label><div class="form__group-fields"><input class="field field--text field--full-width" type="email" name="email" value="" id="email" required placeholder="Email"></div></div><div class="form__group"><label class="sr-only" for="password">
Password
<span class="required"><span class="sr-only">Required field</span><span class="required__star">*</span></span></label><div class="form__group-fields"><input class="field field--text field--full-width" type="password" name="password" value="" id="password" required placeholder="Password"></div></div><div class="form__group"><label class="checkbox"><input class="checkbox__input" type="checkbox" name="agreement" value="1" required><span class="checkbox__text"><span>By signing up, you agree to our <a href="/docs/agreement" target="_blank">License Agreement</a> and <a href="/docs/privacy" target="_blank">Privacy Policy</a>.</span></span></label></div><input class="button button--full-width" type="submit" data-submit-text="Signing up…" value="Sign up"></form><a class="modal__bottom-link" href="/login?redirect_url=%2Fcourses%2Fjavascript-programming%2Fobjects%2Fsummary-1" data-modal="open" data-value="login">Log in</a></div><div class="modal__wrapper modal__wrapper--no-btn-bottom js-recover hidden"><button class="modal__close icon-close" type="button" title="Close" data-modal="close"></button><h4 class="modal__header">Restore access</h4><p class="modal__text-accent">Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.</p><form class="modal__form form" action="/recover" autocomplete="off" method="post" data-submit="o"><input type="hidden" name="csrf_name" value="csrf69aea6da62899"><input type="hidden" name="csrf_value" value="563e09071aa98c875da3dcf10108270b"><div class="form__group"><label class="sr-only" for="recovery-email">Email</label><input class="field field--text field--full-width" type="email" name="email" placeholder="Email" value="" id="recovery-email"></div><script src='https://www.google.com/recaptcha/api.js'></script><div class="form__group"><div class="g-recaptcha" data-sitekey="6LetCTEqAAAAANROWtPzfC7Rfg9iIRiRt2k2FPn7"></div></div><input class="button button--full-width" type="submit" data-submit-text="Sending…" value="Send"></form><p class="modal__text">Forgot to connect your email to the profile? Email us and we’ll help.</p></div></div></div><script async src="https://assets.htmlacademy.org/js/general.v274.js" data-assets="https://assets.htmlacademy.org" data-require="toggle,navigation-courses,modal,form,nav"></script></body></html>