CINXE.COM

<!DOCTYPE html><html lang="ko" data-theme-enabled="1"><head><script>window.currentUser = null;</script><script>window.shopCurrency = "EUR";</script><script>window.localCurrency = "KRW";</script><script>window.countryCode = "cn";</script><script>window.rateShopTo = {"KRW":1582.1823415740473,"EUR":1,"USD":1.078956993853182,"AMD":421.5874435300883};</script><title itemprop="name">객체</title><link href="/pack/styles.100020a0bc7cf13be729.css" rel="stylesheet"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1.0"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="google" content="notranslate"><script>if (window.devicePixelRatio > 1) document.cookie = 'pixelRatio=' + window.devicePixelRatio + ';path=/;expires=Tue, 19 Jan 2038 03:14:07 GMT';</script><link href="//fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic" rel="stylesheet"><link rel="apple-touch-icon-precomposed" href="/img/favicon/apple-touch-icon-precomposed.png"><link rel="canonical" href="https://ko.javascript.info/object"><meta name="msapplication-TileColor" content="#222A2C"><meta name="msapplication-TileImage" content="/img/favicon/tileicon.png"><link rel="icon" href="/img/favicon/favicon.png"><meta itemprop="image" content="https://ko.javascript.info/img/site_preview_en_512x512.png"><meta property="og:title" content="객체"><meta property="og:image" content="https://ko.javascript.info/img/site_preview_en_1200x630.png"><meta property="og:image:type" content="image/png"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="fb:admins" content="100001562528165"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="객체"><meta name="twitter:site" content="@iliakan"><meta name="twitter:creator" content="@iliakan"><meta name="twitter:image" content="https://ko.javascript.info/img/site_preview_en_512x512.png"><meta name="google-adsense-account" content="ca-pub-6204518652652613"><link rel="prev" href="/object-basics"><link rel="next" href="/object-copy"><script data-collect-dnt="true" async src="https://scripts.simpleanalyticscdn.com/latest.js"></script><script>window.GA_ID = "UA-2056213-15";</script><script>window.YANDEX_METRIKA_ID = 32184394;</script><script>{function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-2LWB61WGYJ")}</script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-2LWB61WGYJ"></script><script>window.metrika={reachGoal:function(){}},window.yandex_metrika_callbacks=[function(){try{window.metrika=new Ya.Metrika({id:YANDEX_METRIKA_ID,webvisor:!0,clickmap:!0,params:{user:window.currentUser&&window.currentUser.id}}),metrika.trackLinks({delay:150}),window.addEventListener("error",function(r){window.metrika.reachGoal("JSERROR",{src:(r.filename||r.errorUrl)+": "+(r.lineno||r.errorLine),stack:r.stack||r.error&&r.error.stack,message:r.message})})}catch(r){}}];</script><script src="//mc.yandex.ru/metrika/watch.js" async></script><script>window.RECAPTCHA_ID = "6LfmLAEVAAAAAJMykMnf7aY8nkyTRmYi2ynx51R1";</script><script src="/pack/init.70609fbf02fb44facf1c.js"></script><script src="/pack/head.bb4da882f2485e945fa9.js" defer></script><meta property="og:title" content="객체"><meta property="og:type" content="article"><script src="/pack/tutorial.374a28a1cb36d9aabd00.js" defer></script><script src="/pack/footer.0f0ee5206f3453451aa8.js" defer></script></head><body class="no-icons"><script>window.fontTest();</script><div class="page-wrapper page-wrapper_sidebar_on"><div class="sitetoolbar sitetoolbar_tutorial"><script>window.langs = [{"code":"ar","name":"Arabic"},{"code":"az","name":"Azerbaijani"},{"code":"bg","name":"Bulgarian"},{"code":"bn","name":"Bengali"},{"code":"bs","name":"Bosnian"},{"code":"ca","name":"Catalan"},{"code":"cs","name":"Czech"},{"code":"da","name":"Danish"},{"code":"de","name":"German"},{"code":"el","name":"Greek"},{"code":"en","name":"English"},{"code":"es","name":"Spanish"},{"code":"fa","name":"Persian (Farsi)"},{"code":"fi","name":"Finnish"},{"code":"fr","name":"French"},{"code":"he","name":"Hebrew"},{"code":"hi","name":"Hindi"},{"code":"hr","name":"Croatian"},{"code":"hu","name":"Hungarian"},{"code":"hy","name":"Armenian"},{"code":"id","name":"Indonesian"},{"code":"it","name":"Italian"},{"code":"ja","name":"Japanese"},{"code":"ka","name":"Georgian"},{"code":"kk","name":"Kazakh"},{"code":"km","name":"Central Khmer"},{"code":"ko","name":"Korean"},{"code":"ku","name":"Kurdish"},{"code":"ky","name":"Kyrgyz"},{"code":"lt","name":"Lithuanian"},{"code":"me","name":"Montenegrin"},{"code":"ml","name":"Malayalam"},{"code":"ms","name":"Malay"},{"code":"my","name":"Burmese"},{"code":"nl","name":"Dutch"},{"code":"no","name":"Norvegian"},{"code":"pa","name":"Punjabi"},{"code":"pl","name":"Polish"},{"code":"pt","name":"Portuguese"},{"code":"ro","name":"Romanian"},{"code":"ru","name":"Russian"},{"code":"si","name":"Sinhala"},{"code":"sk","name":"Slovak"},{"code":"sl","name":"Slovenian"},{"code":"sq","name":"Albanian"},{"code":"sr","name":"Serbian"},{"code":"ta","name":"Tamil"},{"code":"te","name":"Telugu"},{"code":"test","name":"Test"},{"code":"th","name":"Thai"},{"code":"tk","name":"Turkmen"},{"code":"tr","name":"Turkish"},{"code":"ug","name":"Uyghur"},{"code":"uk","name":"Ukrainian"},{"code":"ur","name":"Urdu"},{"code":"uz","name":"Uzbek"},{"code":"v2","name":"v2"},{"code":"vi","name":"Vietnamese"},{"code":"zh-hant","name":"Chinese Traditional"},{"code":"zh","name":"Chinese"}];</script><script>window.lang = "ko";</script><div class="sitetoolbar__content"><div class="sitetoolbar__lang-switcher"><button class="sitetoolbar__dropdown-button" data-dropdown-toggler>KO</button><div class="sitetoolbar__dropdown-wrap"><div class="sitetoolbar__dropdown-body"><div class="sitetoolbar__lang-switcher-body"><div class="supported-langs supported-langs_toolbar"><div class="supported-langs__container"><ul class="supported-langs__list" style="height:200px"><li class="supported-langs__item"><a class="supported-langs__link" href="https://ar.javascript.info/object"><span class="supported-langs__brief">AR</span><span class="supported-langs__title">عربي</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://javascript.info/object"><span class="supported-langs__brief">EN</span><span class="supported-langs__title">English</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://es.javascript.info/object"><span class="supported-langs__brief">ES</span><span class="supported-langs__title">Español</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://fa.javascript.info/object"><span class="supported-langs__brief">FA</span><span class="supported-langs__title">فارسی</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://fr.javascript.info/object"><span class="supported-langs__brief">FR</span><span class="supported-langs__title">Français</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://id.javascript.info/object"><span class="supported-langs__brief">ID</span><span class="supported-langs__title">Indonesia</span></a></li></ul><ul class="supported-langs__list" style="height:200px"><li class="supported-langs__item"><a class="supported-langs__link" href="https://it.javascript.info/object"><span class="supported-langs__brief">IT</span><span class="supported-langs__title">Italiano</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://ja.javascript.info/object"><span class="supported-langs__brief">JA</span><span class="supported-langs__title">日本語</span></a></li><li class="supported-langs__item supported-langs__item_current"><a class="supported-langs__link" href="https://ko.javascript.info/object"><span class="supported-langs__brief">KO</span><span class="supported-langs__title">한국어</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://learn.javascript.ru/object"><span class="supported-langs__brief">RU</span><span class="supported-langs__title">Русский</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://tr.javascript.info/object"><span class="supported-langs__brief">TR</span><span class="supported-langs__title">Türkçe</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://uk.javascript.info/object"><span class="supported-langs__brief">UK</span><span class="supported-langs__title">Українська</span></a></li></ul><ul class="supported-langs__list" style="height:20px"><li class="supported-langs__item"><a class="supported-langs__link" href="https://zh.javascript.info/object"><span class="supported-langs__brief">ZH</span><span class="supported-langs__title">简体中文</span></a></li></ul></div><div class="supported-langs__text">본 튜토리얼은 전 세계 사람들이 이용할 수 있는 오픈 소스 프로젝트입니다. <a href="https://github.com/javascript-tutorial/ko.javascript.info" rel="noopener noreferrer" target="_blank">프로젝트 페이지에 방문</a>하셔서 번역을 도와주세요.</div></div></div></div></div></div><div class="sitetoolbar__logo-wrap"><a class="sitetoolbar__link sitetoolbar__link_logo" href="/"><img class="sitetoolbar__logo sitetoolbar__logo_normal" src="/img/sitetoolbar__logo_en.svg" width="200" alt="" role="presentation"/><img class="sitetoolbar__logo sitetoolbar__logo_normal sitetoolbar__logo_dark" src="/img/sitetoolbar__logo_en-white.svg" width="200" alt="" role="presentation"/><img class="sitetoolbar__logo sitetoolbar__logo_small" src="/img/sitetoolbar__logo_small_en.svg" width="70" alt="" role="presentation"/><img class="sitetoolbar__logo sitetoolbar__logo_small sitetoolbar__logo_dark" src="/img/sitetoolbar__logo_small_en-white.svg" width="70" alt="" role="presentation"/><script>Array.prototype.forEach.call(document.querySelectorAll("img.sitetoolbar__logo"),function(e){let t=document.createElement("object");t.type="image/svg+xml",t.className=e.className,t.style.cssText="left:0;top:0;position:absolute",t.onload=function(){t.onload=null,e.style.visibility="hidden"},t.data=e.src,e.parentNode.insertBefore(t,e)});</script></a></div><div class="sitetoolbar__nav-toggle-wrap"><button class="sitetoolbar__nav-toggle" type="button"></button></div><nav class="sitetoolbar__sections"><ul class="sitetoolbar__sections-list"></ul></nav><div class="sitetoolbar__right-button-wrap"><a class="sitetoolbar-right-button sitetoolbar-right-button_courses" href="/ebook"><span class="sitetoolbar-right-button__extra-text">구매</span>EPUB/PDF</a></div><div class="sitetoolbar__theme-switcher"><div class="theme-changer"><label class="theme-changer__label" for="theme-changer-input" data-tooltip="Change theme"><input class="theme-changer__input" type="checkbox" id="theme-changer-input" data-theme-changer="data-theme-changer"/><span class="theme-changer__icon theme-changer__icon_light-theme"></span><span class="theme-changer__icon theme-changer__icon_dark-theme"></span></label></div></div><div class="sitetoolbar__search-wrap"><div class="sitetoolbar__search-content"><button class="sitetoolbar__search-toggle" type="button"></button><form class="sitetoolbar__search" method="GET" action="/search"><div class="sitetoolbar__search-input"><div class="text-input"><input class="text-input__control" name="query" placeholder="javascript.info에서 검색하기" required="required" type="text"/></div><button class="sitetoolbar__find" type="submit">검색</button></div></form></div></div></div><div class="tablet-menu"><div class="tablet-menu__line"><div class="tablet-menu__content"><form class="tablet-menu-search" action="/search/"><input class="tablet-menu-search__input" type="search" name="query" placeholder="튜토리얼 내에서 검색" required="required"/><button class="tablet-menu-search__button" type="submit" name="type" value="articles">검색</button></form></div></div><div class="tablet-menu__line"><div class="tablet-menu__content"><a class="map" href="/tutorial/map" data-action="tutorial-map"><span class="map__text">튜토리얼 지도</span></a></div></div><div class="tablet-menu__line"><div class="tablet-menu__content"><div class="theme-changer theme-changer_tablet-menu theme-changer_has-label"><label class="theme-changer__label" for="theme-changer-input-tablet" data-tooltip="Change theme"><input class="theme-changer__input" type="checkbox" id="theme-changer-input-tablet" data-theme-changer="data-theme-changer"/><span class="theme-changer__icon theme-changer__icon_light-theme"></span><span class="theme-changer__icon theme-changer__icon_dark-theme"></span><span class="theme-changer__label-text theme-changer__label-text_light-theme">Light theme</span><span class="theme-changer__label-text theme-changer__label-text_dark-theme">Dark theme</span></label></div></div></div><div class="tablet-menu__line"><div class="tablet-menu__content"><div class="share-icons"><span class="share-icons__title">공유</span><a class="share share_tw" href="https://twitter.com/share?url=https%3A%2F%2Fko.javascript.info%2Fobject" rel="nofollow"></a><a class="share share_fb" href="https://www.facebook.com/sharer/sharer.php?s=100&p%5Burl%5D=https%3A%2F%2Fko.javascript.info%2Fobject" rel="nofollow"></a></div></div></div><div class="tablet-menu__line"><div class="tablet-menu__content"><select class="tablet-menu__nav input-select input-select input-select_small" onchange="if(this.value) window.location.href=this.value"><option value="https://ar.javascript.info/object">عربي</option><option value="https://javascript.info/object">English</option><option value="https://es.javascript.info/object">Español</option><option value="https://fa.javascript.info/object">فارسی</option><option value="https://fr.javascript.info/object">Français</option><option value="https://id.javascript.info/object">Indonesia</option><option value="https://it.javascript.info/object">Italiano</option><option value="https://ja.javascript.info/object">日本語</option><option value="https://ko.javascript.info/object" selected>한국어</option><option value="https://learn.javascript.ru/object">Русский</option><option value="https://tr.javascript.info/object">Türkçe</option><option value="https://uk.javascript.info/object">Українська</option><option value="https://zh.javascript.info/object">简体中文</option></select></div></div></div><progress class="tutorial-progress" data-sticky value="29" max="92" data-tooltip="92개의 주제 중 29번째 주제"></progress></div><div class="page page_sidebar_on page_inner_padding"><script>if(localStorage.noSidebar){document.querySelector(".page").classList.remove("page_sidebar_on");let e=document.querySelector(".page-wrapper");e&&e.classList.remove("page-wrapper_sidebar_on")}setTimeout(function(){document.querySelector(".page").classList.add("page_sidebar-animation-on")});</script><div class="page__inner"><main class="main main_width-limit"><header class="main__header"><div class="main__header-inner"><div class="main__header-group"><ol class="breadcrumbs"><li class="breadcrumbs__item breadcrumbs__item_home"><a class="breadcrumbs__link" href="/"><span class="breadcrumbs__hidden-text">튜토리얼</span></a></li><li class="breadcrumbs__item" id="breadcrumb-1"><a class="breadcrumbs__link" href="/js"><span>코어 자바스크립트</span></a></li><li class="breadcrumbs__item" id="breadcrumb-2"><a class="breadcrumbs__link" href="/object-basics"><span>객체: 기본</span></a></li><script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"튜토리얼","item":"https://ko.javascript.info/"},{"@type":"ListItem","position":2,"name":"코어 자바스크립트","item":"https://ko.javascript.info/js"},{"@type":"ListItem","position":3,"name":"객체: 기본","item":"https://ko.javascript.info/object-basics"}]}</script></ol><div class="updated-at" data-tooltip="최종 업데이트 2021년 12월 15일"><div class="updated-at__content">2021년 12월 15일</div></div></div><h1 class="main__header-title">객체</h1></div></header><div class="content"><article class="formatted" itemscope itemtype="http://schema.org/TechArticle"><meta itemprop="name" content="객체"><div itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="email" content="iliakan@gmail.com"><meta itemprop="name" content="Ilya Kantor"></div><div itemprop="articleBody"><p><a href="/types">자료형</a> 챕터에서 배웠듯이 자바스크립트엔 여덟 가지 자료형이 있습니다. 이 중 일곱 개는 오직 하나의 데이터(문자열, 숫자 등)만 담을 수 있어 '원시형(primitive type)'이라 부릅니다.</p> <p>그런데 객체형은 원시형과 달리 다양한 데이터를 담을 수 있습니다. 키로 구분된 데이터 집합이나 복잡한 개체(entity)를 저장할 수 있죠. 객체는 자바스크립트 거의 모든 면에 녹아있는 개념이므로 자바스크립트를 잘 다루려면 객체를 잘 이해하고 있어야 합니다.</p> <p>객체는 중괄호 <code>{…}</code>를 이용해 만들 수 있습니다. 중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 구성된 <em>프로퍼티(property)</em> 를 여러 개 넣을 수 있는데, <code>키</code>엔 문자형, <code>값</code>엔 모든 자료형이 허용됩니다. 프로퍼티 키는 ‘프로퍼티 이름’ 이라고도 부릅니다.</p> <p>서랍장을 상상하면 객체를 이해하기 쉽습니다. 서랍장 안 파일은 프로퍼티, 파일 각각에 붙어있는 이름표는 객체의 키라고 생각하시면 됩니다. 복잡한 서랍장 안에서 이름표를 보고 원하는 파일을 쉽게 찾을 수 있듯이, 객체에선 키를 이용해 프로퍼티를 쉽게 찾을 수 있습니다. 추가나 삭제도 마찬가지입니다.</p> <figure><div class="image" style="width:176px"> <div class="image__ratio" style="padding-top:103.97727272727273%"></div> <object type="image/svg+xml" data="/article/object/object.svg" width="176" height="183" class="image__image" data-use-theme> <img src="/article/object/object.svg" alt="" width="176" height="183"> </object> </div></figure><p>빈 객체(빈 서랍장)를 만드는 방법은 두 가지가 있습니다.</p> <div id="nzjoc70pvi" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = new Object(); // '객체 생성자' 문법 let user = {}; // '객체 리터럴' 문법</code></pre> </div> </div> </div><figure><div class="image" style="width:248px"> <div class="image__ratio" style="padding-top:37.096774193548384%"></div> <object type="image/svg+xml" data="/article/object/object-user-empty.svg" width="248" height="92" class="image__image" data-use-theme> <img src="/article/object/object-user-empty.svg" alt="" width="248" height="92"> </object> </div></figure><p>중괄호 <code>{...}</code>를 이용해 객체를 선언하는 것을 <em>객체 리터럴(object literal)</em> 이라고 부릅니다. 객체를 선언할 땐 주로 이 방법을 사용합니다.</p> <h2><a class="main__anchor" name="ref-1592" href="#ref-1592">리터럴과 프로퍼티</a></h2><p>중괄호 <code>{...}</code> 안에는 ‘키: 값’ 쌍으로 구성된 프로퍼티가 들어갑니다.</p> <div id="uf8iby8e7s" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = { // 객체 name: "John", // 키: "name", 값: "John" age: 30 // 키: "age", 값: 30 };</code></pre> </div> </div> </div><p><code>'콜론(:)'</code>을 기준으로 왼쪽엔 키가, 오른쪽엔 값이 위치합니다. 프로퍼티 키는 프로퍼티 ‘이름’ 혹은 '식별자’라고도 부릅니다.</p> <p>객체 <code>user</code>에는 프로퍼티가 두 개 있습니다.</p> <ol> <li>첫 번째 프로퍼티 – <code>"name"</code>(이름)과 <code>"John"</code>(값)</li> <li>두 번째 프로퍼티 – <code>"age"</code>(이름)과 <code>30</code>(값)</li> </ol> <p>서랍장(객체 <code>user</code>) 안에 파일 두 개(프로퍼티 두 개)가 담겨있는데, 각 파일에 “name”, "age"라는 이름표가 붙어있다고 생각하시면 쉽습니다.</p> <figure><div class="image" style="width:248px"> <div class="image__ratio" style="padding-top:69.75806451612904%"></div> <object type="image/svg+xml" data="/article/object/object-user.svg" width="248" height="173" class="image__image" data-use-theme> <img src="/article/object/object-user.svg" alt="" width="248" height="173"> </object> </div></figure><p>서랍장에 파일을 추가하고 뺄 수 있듯이 개발자는 프로퍼티를 추가, 삭제할 수 있습니다.</p> <p>점 표기법(dot notation)을 이용하면 프로퍼티 값을 읽는 것도 가능합니다.</p> <div id="1r2qar5x20" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>// 프로퍼티 값 얻기 alert( user.name ); // John alert( user.age ); // 30</code></pre> </div> </div> </div><p>프로퍼티 값엔 모든 자료형이 올 수 있습니다. 불린형 프로퍼티를 추가해봅시다.</p> <div id="grbk0oegn1" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>user.isAdmin = true;</code></pre> </div> </div> </div><figure><div class="image" style="width:248px"> <div class="image__ratio" style="padding-top:69.75806451612904%"></div> <object type="image/svg+xml" data="/article/object/object-user-isadmin.svg" width="248" height="173" class="image__image" data-use-theme> <img src="/article/object/object-user-isadmin.svg" alt="" width="248" height="173"> </object> </div></figure><p><code>delete</code> 연산자를 사용하면 프로퍼티를 삭제할 수 있습니다.</p> <div id="qb4he07wst" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>delete user.age;</code></pre> </div> </div> </div><figure><div class="image" style="width:248px"> <div class="image__ratio" style="padding-top:69.75806451612904%"></div> <object type="image/svg+xml" data="/article/object/object-user-delete.svg" width="248" height="173" class="image__image" data-use-theme> <img src="/article/object/object-user-delete.svg" alt="" width="248" height="173"> </object> </div></figure><p>여러 단어를 조합해 프로퍼티 이름을 만든 경우엔 프로퍼티 이름을 따옴표로 묶어줘야 합니다.</p> <div id="dv6g00qde5" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = { name: "John", age: 30, "likes birds": true // 복수의 단어는 따옴표로 묶어야 합니다. };</code></pre> </div> </div> </div><figure><div class="image" style="width:248px"> <div class="image__ratio" style="padding-top:86.69354838709677%"></div> <object type="image/svg+xml" data="/article/object/object-user-props.svg" width="248" height="215" class="image__image" data-use-theme> <img src="/article/object/object-user-props.svg" alt="" width="248" height="215"> </object> </div></figure><p>마지막 프로퍼티 끝은 쉼표로 끝날 수 있습니다.</p> <div id="bjnjhcx71e" data-trusted="1" class="code-example" data-highlight="[{"start":2,"cols":[{"start":9,"end":10}]}]"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = { name: "John", age: 30, }</code></pre> </div> </div> </div><p>이런 쉼표를 ‘trailing(길게 늘어지는)’ 혹은 ‘hanging(매달리는)’ 쉼표라고 부릅니다. 이렇게 끝에 쉼표를 붙이면 모든 프로퍼티가 유사한 형태를 보이기 때문에 프로퍼티를 추가, 삭제, 이동하는 게 쉬워집니다.</p> <div class="important important_smart"> <div class="important__header"><span class="important__type">상수 객체는 수정될 수 있습니다.</span></div> <div class="important__content"><p>주의하세요. <code>const</code>로 선언된 객체는 수정될 수 있습니다.</p> <p>예시:</p> <div id="97j2aml443" data-trusted="1" class="code-example" data-highlight="[{"start":4,"end":4}]"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="실행" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="샌드박스에서 열기" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>const user = { name: "John" }; user.name = "Pete"; // (*) alert(user.name); // Pete</code></pre> </div> </div> </div><p><code>(*)</code>로 표시한 줄에서 오류를 일으키는 것처럼 보일 수 있지만 그렇지 않습니다. <code>const</code>는 <code>user</code>의 값을 고정하지만, 그 내용은 고정하지 않습니다.</p> <p><code>const</code>는 <code>user=...</code>를 전체적으로 설정하려고 할 때만 오류가 발생합니다.</p> <p>상수 객체 프로퍼티를 만드는 또 다른 방법이 있습니다. 이후에 <a href="/property-descriptors">프로퍼티 플래그와 설명자</a> 챕터에서 다루겠습니다.</p> </div></div> <h2><a class="main__anchor" name="ref-1593" href="#ref-1593">대괄호 표기법</a></h2><p>여러 단어를 조합해 프로퍼티 키를 만든 경우엔, 점 표기법을 사용해 프로퍼티 값을 읽을 수 없습니다.</p> <div id="7chqg3h2pi" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="실행" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="샌드박스에서 열기" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>// 문법 에러가 발생합니다. user.likes birds = true</code></pre> </div> </div> </div><p>자바스크립트는 위와 같은 코드를 이해하지 못합니다. <code>user.likes</code>까지는 이해하다가 예상치 못한 <code>birds</code>를 만나면 문법 에러를 뱉어냅니다.</p> <p>'점’은 키가 '유효한 변수 식별자’인 경우에만 사용할 수 있습니다. 유효한 변수 식별자엔 공백이 없어야 합니다. 또한 숫자로 시작하지 않아야 하며 <code>$</code>와 <code>_</code>를 제외한 특수 문자가 없어야 합니다.</p> <p>키가 유효한 변수 식별자가 아닌 경우엔 점 표기법 대신에 '대괄호 표기법(square bracket notation)'이라 불리는 방법을 사용할 수 있습니다. 대괄호 표기법은 키에 어떤 문자열이 있던지 상관없이 동작합니다.</p> <div id="aabqrhihr2" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="실행" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="샌드박스에서 열기" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = {}; // set user["likes birds"] = true; // get alert(user["likes birds"]); // true // delete delete user["likes birds"];</code></pre> </div> </div> </div><p>이제 문법 에러가 발생하지 않네요. 대괄호 표기법 안에서 문자열을 사용할 땐 문자열을 따옴표로 묶어줘야 한다는 점에 주의하시기 바랍니다. 따옴표의 종류는 상관없습니다.</p> <p>대괄호 표기법을 사용하면 아래 예시에서 변수를 키로 사용한 것과 같이 문자열뿐만 아니라 모든 표현식의 평가 결과를 프로퍼티 키로 사용할 수 있습니다.</p> <div id="zxmame9tvb" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let key = "likes birds"; // user["likes birds"] = true; 와 같습니다. user[key] = true;</code></pre> </div> </div> </div><p>변수 <code>key</code>는 런타임에 평가되기 때문에 사용자 입력값 변경 등에 따라 값이 변경될 수 있습니다. 어떤 경우든, 평가가 끝난 이후의 결과가 프로퍼티 키로 사용됩니다. 이를 응용하면 코드를 유연하게 작성할 수 있습니다.</p> <p>예시:</p> <div id="tm14iyajuc" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="실행" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="샌드박스에서 열기" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = { name: "John", age: 30 }; let key = prompt("사용자의 어떤 정보를 얻고 싶으신가요?", "name"); // 변수로 접근 alert( user[key] ); // John (프롬프트 창에 "name"을 입력한 경우)</code></pre> </div> </div> </div><p>그런데 점 표기법은 이런 방식이 불가능합니다.</p> <div id="64oerybmcp" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="실행" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="샌드박스에서 열기" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = { name: "John", age: 30 }; let key = "name"; alert( user.key ) // undefined</code></pre> </div> </div> </div><h3><a class="main__anchor" name="ref-1594" href="#ref-1594">계산된 프로퍼티</a></h3><p>객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우, 이를 <em>계산된 프로퍼티(computed property)</em> 라고 부릅니다.</p> <p>예시:</p> <div id="0z4ucutibs" data-trusted="1" class="code-example" data-highlight="[{"start":3,"end":3}]"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="실행" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="샌드박스에서 열기" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple"); let bag = { [fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아 옵니다. }; alert( bag.apple ); // fruit에 "apple"이 할당되었다면, 5가 출력됩니다.</code></pre> </div> </div> </div><p>위 예시에서 <code>[fruit]</code>는 프로퍼티 이름을 변수 <code>fruit</code>에서 가져오겠다는 것을 의미합니다.</p> <p>사용자가 프롬프트 대화상자에 <code>apple</code>을 입력했다면 <code>bag</code>엔 <code>{apple: 5}</code>가 할당되었을 겁니다.</p> <p>아래 예시는 위 예시와 동일하게 동작합니다.</p> <div id="5h3jww97su" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="실행" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="샌드박스에서 열기" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple"); let bag = {}; // 변수 fruit을 사용해 프로퍼티 이름을 만들었습니다. bag[fruit] = 5;</code></pre> </div> </div> </div><p>두 방식 중 계산된 프로퍼티를 사용한 예시가 더 깔끔해 보이네요.</p> <p>한편, 다음 예시처럼 대괄호 안에는 복잡한 표현식이 올 수도 있습니다.</p> <div id="jhkefley1w" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let fruit = 'apple'; let bag = { [fruit + 'Computers']: 5 // bag.appleComputers = 5 };</code></pre> </div> </div> </div><p>대괄호 표기법은 프로퍼티 이름과 값의 제약을 없애주기 때문에 점 표기법보다 훨씬 강력합니다. 그런데 작성하기 번거롭다는 단점이 있습니다.</p> <p>이런 이유로 프로퍼티 이름이 확정된 상황이고, 단순한 이름이라면 처음엔 점 표기법을 사용하다가 뭔가 복잡한 상황이 발생했을 때 대괄호 표기법으로 바꾸는 경우가 많습니다.</p> <h2><a class="main__anchor" name="ref-1595" href="#ref-1595">단축 프로퍼티</a></h2><p>실무에선 프로퍼티 값을 기존 변수에서 받아와 사용하는 경우가 종종 있습니다.</p> <p>예시:</p> <div id="bfscpwcueo" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="실행" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="샌드박스에서 열기" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>function makeUser(name, age) { return { name: name, age: age, // ...등등 }; } let user = makeUser("John", 30); alert(user.name); // John</code></pre> </div> </div> </div><p>위 예시의 프로퍼티들은 이름과 값이 변수의 이름과 동일하네요. 이렇게 변수를 사용해 프로퍼티를 만드는 경우는 아주 흔한데, <em>프로퍼티 값 단축 구문(property value shorthand)</em> 을 사용하면 코드를 짧게 줄일 수 있습니다.</p> <p><code>name:name</code> 대신 <code>name</code>만 적어주어도 프로퍼티를 설정할 수 있죠.</p> <div id="m4xkr5m1rw" data-trusted="1" class="code-example" data-highlight="[{"start":1,"end":5}]"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>function makeUser(name, age) { return { name, // name: name 과 같음 age, // age: age 와 같음 // ... }; }</code></pre> </div> </div> </div><p>한 객체에서 일반 프로퍼티와 단축 프로퍼티를 함께 사용하는 것도 가능합니다.</p> <div id="gsl1313x5r" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = { name, // name: name 과 같음 age: 30 };</code></pre> </div> </div> </div><h2><a class="main__anchor" name="ref-1596" href="#ref-1596">프로퍼티 이름의 제약사항</a></h2><p>아시다시피 변수 이름(키)엔 ‘for’, ‘let’, ‘return’ 같은 예약어를 사용하면 안됩니다.</p> <p>그런데 객체 프로퍼티엔 이런 제약이 없습니다.</p> <div id="08lf5bgouz" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="실행" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="샌드박스에서 열기" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>// 예약어를 키로 사용해도 괜찮습니다. let obj = { for: 1, let: 2, return: 3 }; alert( obj.for + obj.let + obj.return ); // 6</code></pre> </div> </div> </div><p>이와 같이 프로퍼티 이름엔 특별한 제약이 없습니다. 어떤 문자형, 심볼형 값도 프로퍼티 키가 될 수 있죠(식별자로 쓰이는 심볼형에 대해선 뒤에서 다룰 예정입니다).</p> <p>문자형이나 심볼형에 속하지 않은 값은 문자열로 자동 형 변환됩니다.</p> <p>예시를 살펴봅시다. 키에 숫자 <code>0</code>을 넣으면 문자열 <code>"0"</code>으로 자동변환됩니다.</p> <div id="uz3xbiiad4" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="실행" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="샌드박스에서 열기" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let obj = { 0: "test" // "0": "test"와 동일합니다. }; // 숫자 0은 문자열 "0"으로 변환되기 때문에 두 얼럿 창은 같은 프로퍼티에 접근합니다, alert( obj["0"] ); // test alert( obj[0] ); // test (동일한 프로퍼티)</code></pre> </div> </div> </div><p>이와같이 객체 프로퍼티 키에 쓸 수 있는 문자열엔 제약이 없지만, 역사적인 이유 때문에 특별 대우를 받는 이름이 하나 있습니다. 바로, <code>__proto__</code>입니다.</p> <div id="gjtegbybxx" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="실행" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="샌드박스에서 열기" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let obj = {}; obj.__proto__ = 5; // 숫자를 할당합니다. alert(obj.__proto__); // [object Object] - 숫자를 할당했지만 값은 객체가 되었습니다. 의도한대로 동작하지 않네요.</code></pre> </div> </div> </div><p>원시값 <code>5</code>를 할당했는데 무시된 것을 확인할 수 있습니다.</p> <p><code>__proto__</code>의 본질은 <a href="/prototype-inheritance">프로토타입 상속</a>에서, 이 문제를 어떻게 해결할 수 있을지에 대해선 <a href="/prototype-methods">프로토타입 메서드와 __proto__가 없는 객체</a>에서 자세히 다룰 예정입니다.</p> <h2><a class="main__anchor" name="ref-1597" href="#ref-1597">‘in’ 연산자로 프로퍼티 존재 여부 확인하기</a></h2><p>자바스크립트 객체의 중요한 특징 중 하나는 다른 언어와는 달리, 존재하지 않는 프로퍼티에 접근하려 해도 에러가 발생하지 않고 <code>undefined</code>를 반환한다는 것입니다.</p> <p>이런 특징을 응용하면 프로퍼티 존재 여부를 쉽게 확인할 수 있습니다.</p> <div id="eo0xs5ivcq" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="실행" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="샌드박스에서 열기" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = {}; alert( user.noSuchProperty === undefined ); // true는 '프로퍼티가 존재하지 않음'을 의미합니다.</code></pre> </div> </div> </div><p>이렇게 <code>undefined</code>와 비교하는 것 이외에도 연산자 <code>in</code>을 사용하면 프로퍼티 존재 여부를 확인할 수 있습니다.</p> <p>문법은 다음과 같습니다.</p> <div id="hkymozq1l1" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>"key" in object</code></pre> </div> </div> </div><p>예시:</p> <div id="v13pgiow49" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="실행" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="샌드박스에서 열기" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = { name: "John", age: 30 }; alert( "age" in user ); // user.age가 존재하므로 true가 출력됩니다. alert( "blabla" in user ); // user.blabla는 존재하지 않기 때문에 false가 출력됩니다.</code></pre> </div> </div> </div><p><code>in</code> 왼쪽엔 반드시 <em>프로퍼티 이름</em>이 와야 합니다. 프로퍼티 이름은 보통 따옴표로 감싼 문자열입니다.</p> <p>따옴표를 생략하면 아래 예시와 같이 엉뚱한 변수가 조사 대상이 됩니다.</p> <div id="nttdi15w3u" data-trusted="1" class="code-example" data-highlight="[{"start":3,"cols":[{"start":7,"end":10}]}]"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="실행" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="샌드박스에서 열기" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = { age: 30 }; let key = "age"; alert( key in user ); // true, 변수 key에 저장된 값("age")을 사용해 프로퍼티 존재 여부를 확인합니다.</code></pre> </div> </div> </div><p>그런데 이쯤 되면 "<code>undefined</code>랑 비교해도 충분한데 왜 <code>in</code> 연산자가 있는 거지?"라는 의문이 들 수 있습니다.</p> <p>대부분의 경우, 일치 연산자를 사용해서 프로퍼티 존재 여부를 알아내는 방법(<code>"=== undefined"</code>)은 꽤 잘 동작합니다. 그런데 가끔은 이 방법이 실패할 때도 있습니다. 이럴 때 <code>in</code>을 사용하면 프로퍼티 존재 여부를 제대로 판별할 수 있습니다.</p> <p>프로퍼티는 존재하는데, 값에 <code>undefined</code>를 할당한 예시를 살펴봅시다.</p> <div id="y27lakb8np" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="실행" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="샌드박스에서 열기" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let obj = { test: undefined }; alert( obj.test ); // 값이 `undefined`이므로, 얼럿 창엔 undefined가 출력됩니다. 그런데 프로퍼티 test는 존재합니다. alert( "test" in obj ); // `in`을 사용하면 프로퍼티 유무를 제대로 확인할 수 있습니다(true가 출력됨).</code></pre> </div> </div> </div><p><code>obj.test</code>는 실제 존재하는 프로퍼티입니다. 따라서 <code>in</code> 연산자는 정상적으로 true를 반환합니다.</p> <p><code>undefined</code>는 변수는 정의되어 있으나 값이 할당되지 않은 경우에 쓰기 때문에 프로퍼티 값이 <code>undefined</code>인 경우는 흔치 않습니다. 값을 ‘알 수 없거나(unknown)’ 값이 ‘비어 있다는(empty)’ 것을 나타낼 때는 주로 <code>null</code>을 사용합니다. 위 예시에서 <code>in</code> 연산자는 자리에 어울리지 않는 초대손님처럼 보이네요.</p> <h2><a class="main__anchor" name="ref-1598" href="#ref-1598">‘for…in’ 반복문</a></h2><p><code>for..in</code> 반복문을 사용하면 객체의 모든 키를 순회할 수 있습니다. <code>for..in</code>은 앞서 학습했던 <code>for(;;)</code> 반복문과는 완전히 다릅니다.</p> <p>문법:</p> <div id="bibb8157qi" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>for (key in object) { // 각 프로퍼티 키(key)를 이용하여 본문(body)을 실행합니다. }</code></pre> </div> </div> </div><p>아래 예시를 실행하면 객체 <code>user</code>의 모든 프로퍼티가 출력됩니다.</p> <div id="gzlw6cf36f" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="실행" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="샌드박스에서 열기" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = { name: "John", age: 30, isAdmin: true }; for (let key in user) { // 키 alert( key ); // name, age, isAdmin // 키에 해당하는 값 alert( user[key] ); // John, 30, true }</code></pre> </div> </div> </div><p><code>for..in</code> 반복문에서도 <code>for(;;)</code>문처럼 반복 변수(looping variable)를 선언(<code>let key</code>)했다는 점에 주목해 주시기 바랍니다.</p> <p>반복 변수명은 자유롭게 정할 수 있습니다. <code>'for (let prop in obj)'</code>같이 <code>key</code> 말고 다른 변수명을 사용해도 괜찮습니다.</p> <h3><a class="main__anchor" name="ref-1599" href="#ref-1599">객체 정렬 방식</a></h3><p>객체와 객체 프로퍼티를 다루다 보면 "프로퍼티엔 순서가 있을까?"라는 의문이 생기기 마련입니다. 반복문은 프로퍼티를 추가한 순서대로 실행될지, 그리고 이 순서는 항상 동일할지 궁금해지죠.</p> <p>답은 간단합니다. 객체는 '특별한 방식으로 정렬’됩니다. 정수 프로퍼티(integer property)는 자동으로 정렬되고, 그 외의 프로퍼티는 객체에 추가한 순서 그대로 정렬됩니다. 자세한 내용은 예제를 통해 살펴봅시다.</p> <p>아래 객체엔 국제전화 나라 번호가 담겨있습니다.</p> <div id="nl68ddzuc8" data-trusted="1" class="code-example" data-highlight="[{"start":8,"end":10}]"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="실행" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="샌드박스에서 열기" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let codes = { "49": "독일", "41": "스위스", "44": "영국", // .., "1": "미국" }; for (let code in codes) { alert(code); // 1, 41, 44, 49 }</code></pre> </div> </div> </div><p>현재 개발 중인 애플리케이션의 주 사용자가 독일인이라고 가정해 봅시다. 나라 번호를 선택하는 화면에서 <code>49</code>가 맨 앞에 오도록 하는 게 좋을 겁니다.</p> <p>그런데 코드를 실행해 보면 예상과는 전혀 다른 결과가 출력됩니다.</p> <ul> <li>미국(1)이 첫 번째로 출력됩니다.</li> <li>그 뒤로 스위스(41), 영국(44), 독일(49)이 차례대로 출력됩니다.</li> </ul> <p>이유는 나라 번호(키)가 정수이어서 <code>1, 41, 44, 49</code> 순으로 프로퍼티가 자동 정렬되었기 때문입니다.</p> <div class="important important_smart"> <div class="important__header"><span class="important__type">정수 프로퍼티? 그게 뭔가요?</span></div> <div class="important__content"><p>'정수 프로퍼티’라는 용어는 변형 없이 정수에서 왔다 갔다 할 수 있는 문자열을 의미합니다.</p> <p>문자열 "49"는 정수로 변환하거나 변환한 정수를 다시 문자열로 바꿔도 변형이 없기 때문에 정수 프로퍼티입니다. 하지만 '+49’와 '1.2’는 정수 프로퍼티가 아닙니다.</p> <div id="xcdu9x0dys" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="실행" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="샌드박스에서 열기" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>// 함수 Math.trunc는 소수점 아래를 버리고 숫자의 정수부만 반환합니다. alert( String(Math.trunc(Number("49"))) ); // '49'가 출력됩니다. 기존에 입력한 값과 같으므로 정수 프로퍼티입니다. alert( String(Math.trunc(Number("+49"))) ); // '49'가 출력됩니다. 기존에 입력한 값(+49)과 다르므로 정수 프로퍼티가 아닙니다. alert( String(Math.trunc(Number("1.2"))) ); // '1'이 출력됩니다. 기존에 입력한 값(1.2)과 다르므로 정수 프로퍼티가 아닙니다.</code></pre> </div> </div> </div></div></div> <p>한편, 키가 정수가 아닌 경우엔 작성된 순서대로 프로퍼티가 나열됩니다. 예시를 살펴봅시다.</p> <div id="e5bm4l752a" data-trusted="1" class="code-example" data-highlight="[{"start":6,"end":6}]"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="실행" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="샌드박스에서 열기" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = { name: "John", surname: "Smith" }; user.age = 25; // 프로퍼티를 하나 추가합니다. // 정수 프로퍼티가 아닌 프로퍼티는 추가된 순서대로 나열됩니다. for (let prop in user) { alert( prop ); // name, surname, age }</code></pre> </div> </div> </div><p>위 예시에서 49(독일 나라 번호)를 가장 위에 출력되도록 하려면 나라 번호가 정수로 취급되지 않도록 속임수를 쓰면 됩니다. 각 나라 번호 앞에 <code>"+"</code>를 붙여봅시다.</p> <p>아래 같이 말이죠.</p> <div id="7y2kwb0xrr" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="실행" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="샌드박스에서 열기" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let codes = { "+49": "독일", "+41": "스위스", "+44": "영국", // .., "+1": "미국" }; for (let code in codes) { alert( +code ); // 49, 41, 44, 1 }</code></pre> </div> </div> </div><p>이제 원하는 대로 독일 나라 번호가 가장 먼저 출력되는 것을 확인할 수 있습니다.</p> <h2><a class="main__anchor" name="ref-1600" href="#ref-1600">요약</a></h2><p>객체는 몇 가지 특수한 기능을 가진 연관 배열(associative array)입니다.</p> <p>객체는 프로퍼티(키-값 쌍)를 저장합니다.</p> <ul> <li>프로퍼티 키는 문자열이나 심볼이어야 합니다. 보통은 문자열입니다.</li> <li>값은 어떤 자료형도 가능합니다.</li> </ul> <p>아래와 같은 방법을 사용하면 프로퍼티에 접근할 수 있습니다.</p> <ul> <li>점 표기법: <code>obj.property</code></li> <li>대괄호 표기법 <code>obj["property"]</code>. 대괄호 표기법을 사용하면 <code>obj[varWithKey]</code>같이 변수에서 키를 가져올 수 있습니다.</li> </ul> <p>객체엔 다음과 같은 추가 연산자를 사용할 수 있습니다.</p> <ul> <li>프로퍼티를 삭제하고 싶을 때: <code>delete obj.prop</code></li> <li>해당 key를 가진 프로퍼티가 객체 내에 있는지 확인하고자 할 때: <code>"key" in obj</code></li> <li>프로퍼티를 나열할 때: <code>for (let key in obj)</code></li> </ul> <p>지금까진 '순수 객체(plain object)'라 불리는 일반 <code>객체</code>에 대해 학습했습니다.</p> <p>자바스크립트에는 일반 객체 이외에도 다양한 종류의 객체가 있습니다.</p> <ul> <li><code>Array</code> – 정렬된 데이터 컬렉션을 저장할 때 쓰임</li> <li><code>Date</code> – 날짜와 시간 정보를 저장할 때 쓰임</li> <li><code>Error</code> – 에러 정보를 저장할 때 쓰임</li> <li>기타 등등</li> </ul> <p>객체마다 고유의 기능을 제공하는데, 이에 대해선 추후 학습하겠습니다. 사람들은 종종 'Array 타입’이나 'Date 타입’이라는 용어를 쓰곤 합니다. 사실 Array와 Date는 독립적인 자료형이 아니라 '객체’형에 속합니다. 객체에 다양한 기능을 넣어 확장한 또 다른 객체이죠.</p> <p>객체는 다재다능한 자료구조로 자바스크립트에서 그 영향력이 막강합니다. 지금까진 객체라는 거대한 주제의 극히 일부만 다루었습니다. 튜토리얼 뒤쪽에서 객체에 대한 더 상세한 내용을 다루도록 하겠습니다.</p> </div></article><div class="tasks formatted"><h2 class="tasks__title" id="tasks"><a class="tasks__title-anchor main__anchor main__anchor main__anchor_noicon" href="#tasks">과제</a></h2><div class="task tasks__task"><div class="task__header"><div class="task__title-wrap"><h3 class="task__title"><a class="main__anchor" href="#ref-1601" name="ref-1601">객체야 안녕?</a></h3><a class="task__open-link" href="/task/hello-object" target="_blank"></a></div><div class="task__header-note"><span class="task__importance" title="과제의 중요도에 따라 1부터 5까지의 점수가 매겨졌습니다.">중요도: 5</span></div><div class="task__content"><div class="task__formatted"><p>다음 각 동작을 한 줄씩, 코드로 작성해보세요.</p> <ol> <li>빈 객체 <code>user</code>를 만듭니다.</li> <li><code>user</code>에 키가 <code>name</code>, 값이 <code>John</code>인 프로퍼티를 추가하세요.</li> <li><code>user</code>에 키가 <code>surname</code>, 값이 <code>Smith</code>인 프로퍼티를 추가하세요.</li> <li><code>name</code>의 값을 <code>Pete</code>로 수정해보세요.</li> <li><code>user</code>에서 프로퍼티 <code>name</code>을 삭제하세요.</li> </ol> </div><button class="task__solution" type="button">해답</button><div class="task__answer"><div class="task__answer-content"><div class="formatted"><div id="1stumj27nz" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = {}; user.name = "John"; user.surname = "Smith"; user.name = "Pete"; delete user.name;</code></pre> </div> </div> </div></div></div><button class="close-button task__answer-close" type="button" title="종료"></button></div></div></div></div><div class="task tasks__task"><div class="task__header"><div class="task__title-wrap"><h3 class="task__title"><a class="main__anchor" href="#ref-1602" name="ref-1602">객체가 비어있는지 확인하기</a></h3><a class="task__open-link" href="/task/is-empty" target="_blank"></a></div><div class="task__header-note"><span class="task__importance" title="과제의 중요도에 따라 1부터 5까지의 점수가 매겨졌습니다.">중요도: 5</span></div><div class="task__content"><div class="task__formatted"><p>객체에 프로퍼티가 하나도 없는 경우 <code>true</code>, 그렇지 않은 경우 <code>false</code>를 반환해주는 함수 <code>isEmpty(obj)</code>를 만들어 보세요.</p> <p>아래와 같이 동작해야 합니다.</p> <div id="gc4sc9wd8s" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let schedule = {}; alert( isEmpty(schedule) ); // true schedule["8:30"] = "get up"; alert( isEmpty(schedule) ); // false</code></pre> </div> </div> </div><p><a href="https://plnkr.co/edit/tCaHHiW0nEXueY9W?p=preview" target="_blank" data-plunk-id="tCaHHiW0nEXueY9W">테스트 코드가 담긴 샌드박스를 열어 정답을 작성해보세요.</a></p></div><button class="task__solution" type="button">해답</button><div class="task__answer"><div class="task__answer-content"><div class="formatted"><p>객체 프로퍼티를 대상으로 반복문을 실행하다가 프로퍼티가 하나라도 있으면 그 즉시 <code>false</code>를 반환하게 코드를 작성하면 됩니다.</p> <div id="wzsp5fvi90" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>function isEmpty(obj) { for (let key in obj) { // if the loop has started, there is a property return false; } return true; }</code></pre> </div> </div> </div><p><a href="https://plnkr.co/edit/KDeYshLSFtJ6WJ9K?p=preview" target="_blank" data-plunk-id="KDeYshLSFtJ6WJ9K">테스트 코드가 담긴 샌드박스를 열어 정답을 확인해보세요.</a></p></div></div><button class="close-button task__answer-close" type="button" title="종료"></button></div></div></div></div><div class="task tasks__task"><div class="task__header"><div class="task__title-wrap"><h3 class="task__title"><a class="main__anchor" href="#ref-1603" name="ref-1603">변하지 않는 객체?</a></h3><a class="task__open-link" href="/task/const-object" target="_blank"></a></div><div class="task__header-note"><span class="task__importance" title="과제의 중요도에 따라 1부터 5까지의 점수가 매겨졌습니다.">중요도: 5</span></div><div class="task__content"><div class="task__formatted"><p><code>const</code>와 함께 선언한 객체를 변경하는 게 가능할까요? 생각을 공유해주세요!</p> <div id="g5yqnqr061" data-trusted="1" class="code-example" data-highlight="[{"start":3,"end":4}]"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>const user = { name: "John" }; // 아래 코드는 에러 없이 실행될까요? user.name = "Pete";</code></pre> </div> </div> </div></div><button class="task__solution" type="button">해답</button><div class="task__answer"><div class="task__answer-content"><div class="formatted"><p>당연히 에러 없이 실행됩니다.</p> <p><code>const</code>는 한 번이라도 값을 할당한 변수가 변경되는 걸 막습니다.</p> <p>변수 <code>user</code>는 객체 참조 값을 저장하고 있는데, <code>const</code>는 이 값이 변경되는걸 막는 것이지, 객체의 내용(프로퍼티)을 변경하는 건 막지 않습니다.</p> <div id="e6l8jh9quc" data-trusted="1" class="code-example" data-highlight="[{"start":3,"end":4}]"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="실행" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="샌드박스에서 열기" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>const user = { name: "John" }; // works user.name = "Pete"; // error user = 123;</code></pre> </div> </div> </div></div></div><button class="close-button task__answer-close" type="button" title="종료"></button></div></div></div></div><div class="task tasks__task"><div class="task__header"><div class="task__title-wrap"><h3 class="task__title"><a class="main__anchor" href="#ref-1604" name="ref-1604">프로퍼티 합계 구하기</a></h3><a class="task__open-link" href="/task/sum-object" target="_blank"></a></div><div class="task__header-note"><span class="task__importance" title="과제의 중요도에 따라 1부터 5까지의 점수가 매겨졌습니다.">중요도: 5</span></div><div class="task__content"><div class="task__formatted"><p>모든 팀원의 월급에 대한 정보를 담고 있는 객체가 있다고 해봅시다.</p> <div id="4mzwjpnxmh" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let salaries = { John: 100, Ann: 160, Pete: 130 }</code></pre> </div> </div> </div><p>모든 팀원의 월급을 합한 값을 구하고, 그 값을 변수 <code>sum</code>에 저장해주는 코드를 작성해보세요. <code>sum</code>엔 <code>390</code>이 저장되어야겠죠?</p> <p>주의: <code>salaries</code>가 비어있다면 <code>sum</code>에 <code>0</code>이 저장되어야 합니다.</p> </div><button class="task__solution" type="button">해답</button><div class="task__answer"><div class="task__answer-content"><div class="formatted"><div id="2pftapxz9q" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="실행" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="샌드박스에서 열기" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let salaries = { John: 100, Ann: 160, Pete: 130 }; let sum = 0; for (let key in salaries) { sum += salaries[key]; } alert(sum); // 390</code></pre> </div> </div> </div></div></div><button class="close-button task__answer-close" type="button" title="종료"></button></div></div></div></div><div class="task tasks__task"><div class="task__header"><div class="task__title-wrap"><h3 class="task__title"><a class="main__anchor" href="#ref-1605" name="ref-1605">프로퍼티 값 두 배로 부풀리기</a></h3><a class="task__open-link" href="/task/multiply-numeric" target="_blank"></a></div><div class="task__header-note"><span class="task__importance" title="과제의 중요도에 따라 1부터 5까지의 점수가 매겨졌습니다.">중요도: 3</span></div><div class="task__content"><div class="task__formatted"><p>객체 <code>obj</code>의 프로퍼티 값이 숫자인 경우 그 값을 <code>두 배</code> 해주는 함수 <code>multiplyNumeric(obj)</code>을 만들어보세요.</p> <p>예시:</p> <div id="k1ji8uxgfo" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>// 함수 호출 전 let menu = { width: 200, height: 300, title: "My menu" }; multiplyNumeric(menu); // 함수 호출 후 menu = { width: 400, height: 600, title: "My menu" };</code></pre> </div> </div> </div><p><code>multiplyNumeric</code>은 아무것도 반환하지 않아도 괜찮습니다. 객체 자체를 수정해주기만 하면 됩니다.</p> <p>힌트) <code>typeof</code>를 사용하면 프로퍼티 값이 숫자인지 확인할 수 있습니다.</p> <p><a href="https://plnkr.co/edit/2ZdaFVLmjCh94BKB?p=preview" target="_blank" data-plunk-id="2ZdaFVLmjCh94BKB">테스트 코드가 담긴 샌드박스를 열어 정답을 작성해보세요.</a></p></div><button class="task__solution" type="button">해답</button><div class="task__answer"><div class="task__answer-content"><div class="formatted"><div id="hxyxlyfrah" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>function multiplyNumeric(obj) { for (let key in obj) { if (typeof obj[key] == 'number') { obj[key] *= 2; } } }</code></pre> </div> </div> </div><p><a href="https://plnkr.co/edit/Pp97h5cRfqqdAVb0?p=preview" target="_blank" data-plunk-id="Pp97h5cRfqqdAVb0">테스트 코드가 담긴 샌드박스를 열어 정답을 확인해보세요.</a></p></div></div><button class="close-button task__answer-close" type="button" title="종료"></button></div></div></div></div></div></div><div class="page__nav-wrap"><a class="page__nav page__nav_prev" href="/object-basics" data-tooltip="객체: 기본"><span class="page__nav-text"><span class="page__nav-text-shortcut"></span></span><span class="page__nav-text-alternate">이전 주제</span></a><a class="page__nav page__nav_next" href="/object-copy" data-tooltip="참조에 의한 객체 복사"><span class="page__nav-text"><span class="page__nav-text-shortcut"></span></span><span class="page__nav-text-alternate">다음 주제</span></a></div><div class="article-tablet-foot tablet-only"><div class="article-tablet-foot__layout"><div class="share-icons"><span class="share-icons__title">공유</span><a class="share share_tw" href="https://twitter.com/share?url=https%3A%2F%2Fko.javascript.info%2Fobject" rel="nofollow"></a><a class="share share_fb" href="https://www.facebook.com/sharer/sharer.php?s=100&p%5Burl%5D=https%3A%2F%2Fko.javascript.info%2Fobject" rel="nofollow"></a></div><div class="article-tablet-foot__map"><a class="map" href="/tutorial/map" data-action="tutorial-map"><span class="map__text">튜토리얼 지도</span></a></div></div></div><div class="comments formatted" id="comments"><div class="comments__header"><h2 class="comments__header-title"><a href="#comments" name="comments">댓글</a></h2><div class="comments__read-before"><span class="comments__read-before-link">댓글을 달기 전에 마우스를 올렸을 때 나타나는 글을 먼저 읽어주세요.</span><div class="comments__read-before-popup"><div class="comments__read-before-popup-i"><ul><li>추가 코멘트, 질문 및 답변을 자유롭게 남겨주세요. 개선해야 할 것이 있다면 댓글 대신 <a href='https://github.com/javascript-tutorial/ko.javascript.info/issues/new'>이슈를 만들어주세요</a>.</li><li>잘 이해되지 않는 부분은 구체적으로 언급해주세요.</li><li>댓글에 한 줄짜리 코드를 삽입하고 싶다면 <code><code></code> 태그를, 여러 줄로 구성된 코드를 삽입하고 싶다면 <code><pre></code> 태그를 이용하세요. 10줄 이상의 코드는 <a href='http://plnkr.co/edit/?p=preview'>plnkr</a>, <a href='http://jsbin.com'>JSBin</a>, <a href='http://codepen.io'>codepen</a> 등의 샌드박스를 사용하세요.</li></ul></div></div></div></div><div id="disqus_thread"></div><script>var disqus_config = function() { if (!this.page) this.page = {}; Object.assign(this.page, {"url":"https:\/\/ko.javascript.info\/object","identifier":"\/object"}); };</script><script>var disqus_shortname = "ko-javascript-info";</script><script>var disqus_enabled = true;</script></div></script></main></div><div class="sidebar page__sidebar sidebar sidebar_sticky-footer"><button class="sidebar__toggle" data-sidebar-toggle></button><a class="map" href="/tutorial/map" data-action="tutorial-map" data-tooltip="튜토리얼 지도"></a><div class="sidebar__inner"><div class="sidebar__content"><div class="sidebar__section"><h4 class="sidebar__section-title">챕터</h4><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="/object-basics">객체: 기본</a></li></ul></nav></div><div class="sidebar__section"><h4 class="sidebar__section-title">주제 탐색</h4><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="#ref-1592">리터럴과 프로퍼티</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#ref-1593">대괄호 표기법</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#ref-1595">단축 프로퍼티</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#ref-1596">프로퍼티 이름의 제약사항</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#ref-1597">‘in’ 연산자로 프로퍼티 존재 여부 확인하기</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#ref-1598">‘for…in’ 반복문</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#ref-1600">요약</a></li></ul></nav></div><div class="sidebar__section"><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="#tasks">과제 (5)</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#comments">댓글</a></li></ul></nav></div><div class="sidebar__section"><div class="sidebar__section-title">공유</div><a class="share share_tw sidebar__share" href="https://twitter.com/share?url=https%3A%2F%2Fko.javascript.info%2Fobject" rel="nofollow"></a><a class="share share_fb sidebar__share" href="https://www.facebook.com/sharer/sharer.php?s=100&p[url]=https%3A%2F%2Fko.javascript.info%2Fobject" rel="nofollow"></a></div><div class="sidebar__section"><a class="sidebar__link" href="https://github.com/javascript-tutorial/ko.javascript.info/blob/master/1-js/04-object-basics/01-object" rel="nofollow">GitHub에서 수정하기</a></div></div></div></div></div></div><div class="page-footer"><ul class="page-footer__list"><li class="page-footer__item page-footer__item_copy">© 2007—2025  Ilya Kantor</li><li class="page-footer__item page-footer__item_about"><a class="page-footer__link" href="/about">프로젝트 설명</a></li><li class="page-footer__item page-footer__item_contact"><a class="page-footer__link" href="/about#contact-us">연락처</a></li></ul></div></body></html>