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 = "kr";</script><script>window.rateShopTo = {"KRW":1599.5752030827366,"EUR":1,"USD":1.095967278800924,"AMD":428.4594382510116};</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/variables"><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="/strict-mode"><link rel="next" href="/types"><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/variables"><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/variables"><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/variables"><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/variables"><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/variables"><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/variables"><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/variables"><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/variables"><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/variables"><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/variables"><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/variables"><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/variables"><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/variables"><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%2Fvariables" 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%2Fvariables" 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/variables">عربي</option><option value="https://javascript.info/variables">English</option><option value="https://es.javascript.info/variables">Español</option><option value="https://fa.javascript.info/variables">فارسی</option><option value="https://fr.javascript.info/variables">Français</option><option value="https://id.javascript.info/variables">Indonesia</option><option value="https://it.javascript.info/variables">Italiano</option><option value="https://ja.javascript.info/variables">日本語</option><option value="https://ko.javascript.info/variables" selected>한국어</option><option value="https://learn.javascript.ru/variables">Русский</option><option value="https://tr.javascript.info/variables">Türkçe</option><option value="https://uk.javascript.info/variables">Українська</option><option value="https://zh.javascript.info/variables">简体中文</option></select></div></div></div><progress class="tutorial-progress" data-sticky value="8" max="92" data-tooltip="92개의 주제 중 8번째 주제"></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="/first-steps"><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/first-steps"}]}</script></ol><div class="updated-at" data-tooltip="최종 업데이트 2022년 7월 23일"><div class="updated-at__content">2022년 7월 23일</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>대다수의 자바스크립트 애플리케이션은 사용자나 서버로부터 입력받은 정보를 처리하는 방식으로 동작합니다. 아래와 같이 말이죠.</p> <ol> <li>온라인 쇼핑몰 – 판매 중인 상품이나 장바구니 등의 정보</li> <li>채팅 애플리케이션 – 사용자 정보, 메시지 등의 정보</li> </ol> <p>변수는 이러한 정보를 저장하는 용도로 사용됩니다.</p> <h2><a class="main__anchor" name="ref-526" href="#ref-526">변수</a></h2><p><a href="https://en.wikipedia.org/wiki/Variable_(computer_science)">변수(variable)</a>는 데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소’ 입니다. 온라인 쇼핑몰 애플리케이션을 구축하는 경우 상품이나 방문객 등의 정보를 저장할 때 변수를 사용하죠.</p> <p>자바스크립트에선 <code>let</code> 키워드를 사용해 변수를 생성합니다.</p> <p>아래 문(statement)은 'message’라는 이름을 가진 변수를 생성(<em>선언</em>)합니다.</p> <div id="3gz0ux65xy" 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 message;</code></pre> </div> </div> </div><p>이제 할당 연산자 <code>=</code>를 사용해 변수 안에 데이터를 저장해 봅시다.</p> <div id="4rcjr7atk8" data-trusted="1" class="code-example" data-highlight="[{"start":2,"end":2}]"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let message; message = 'Hello'; // 문자열을 저장합니다.</code></pre> </div> </div> </div><p>문자열이 변수와 연결된 메모리 영역에 저장되었기 때문에, 변수명을 이용해 문자열에 접근할 수 있게 되었습니다.</p> <div id="lg6fubnis9" 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 message; message = 'Hello!'; alert(message); // 변수에 저장된 값을 보여줍니다.</code></pre> </div> </div> </div><p>아래와 같이 변수 선언과 값 할당을 한 줄에 작성할 수도 있습니다.</p> <div id="678q8ih1jx" 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 message = 'Hello!'; // 변수를 정의하고 값을 할당합니다. alert(message); // Hello!</code></pre> </div> </div> </div><p>한 줄에 여러 변수를 선언하는 것도 가능합니다.</p> <div id="02l6xacqtl" 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 = 'John', age = 25, message = 'Hello';</code></pre> </div> </div> </div><p>이렇게 작성하면 코드가 좀 더 짧아 보이긴 하지만 권장하는 방법은 아닙니다. 가독성을 위해 한 줄에는 하나의 변수를 작성해주세요.</p> <p>한 줄에 한 개의 변수를 작성하면 코드가 길어 보이지만 읽기엔 편합니다.</p> <div id="25cj38helb" 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 = 'John'; let age = 25; let message = 'Hello';</code></pre> </div> </div> </div><p>어떤 사람들은 이런 방식으로도 변수를 정의합니다.</p> <div id="hckkg0e40y" 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 = 'John', age = 25, message = 'Hello';</code></pre> </div> </div> </div><p>‘쉼표가 먼저 오는’ 방식으로 작성하는 사람도 있습니다.</p> <div id="q9dbfofmb3" 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 = 'John' , age = 25 , message = 'Hello';</code></pre> </div> </div> </div><p>위에서 소개한 방식들에 기술적인 차이가 있지는 않습니다. 개인의 취향과 미적 감각에 따라 원하는 방식으로 코드를 작성하세요.</p> <div class="important important_smart"> <div class="important__header"><span class="important__type"><code>let</code> 대신 <code>var</code></span></div> <div class="important__content"><p>만들어진 지 오래된 스크립트에서 <code>let</code> 대신 <code>var</code>라는 키워드를 발견하는 경우가 있습니다.</p> <div id="2pq9f2gpsg" data-trusted="1" class="code-example" data-highlight="[{"start":0,"cols":[{"start":0,"end":3}]}]"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>var message = 'Hello';</code></pre> </div> </div> </div><p><code>var</code>는 <code>let</code>과 <em>거의</em> 동일하게 동작합니다. <code>var</code>도 <code>let</code>처럼 변수를 선언하는 데 쓰이죠. 다만 <code>var</code>는 ‘오래된’ 방식입니다.</p> <p><code>let</code>과 <code>var</code>의 미묘한 차이점에 대해선 추후 <a href="/var">오래된 var</a> 에서 자세히 다루도록 하겠습니다. 지금 시점에선 이 차이점이 중요하지 않기 때문에 넘어가도록 합시다.</p> </div></div> <h2><a class="main__anchor" name="ref-527" href="#ref-527">현실 속의 비유</a></h2><p>‘상자’ 안에 데이터를 저장하는데, 이 상자에는 특별한 이름표가 붙어 있다고 상상해 봅시다. 이렇게 하면 '변수’를 좀 더 쉽게 이해할 수 있습니다.</p> <p>예를 들어, 변수 <code>message</code>는 <code>message</code>라는 이름표가 붙어있는 상자에 <code>"Hello!"</code>라는 값을 저장한 것이라고 생각할 수 있습니다.</p> <figure><div class="image" style="width:166px"> <div class="image__ratio" style="padding-top:87.34939759036145%"></div> <object type="image/svg+xml" data="/article/variables/variable.svg" width="166" height="145" class="image__image" data-use-theme> <img src="/article/variables/variable.svg" alt="" width="166" height="145"> </object> </div></figure><p>상자 속엔 어떤 값이든지 넣을 수 있습니다.</p> <p>원하는 만큼 값을 변경할 수도 있습니다.</p> <div id="bigi7wo7lv" 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 message; message = 'Hello!'; message = 'World!'; // 값이 변경되었습니다. alert(message);</code></pre> </div> </div> </div><p>값이 변경되면, 이전 데이터는 변수에서 제거됩니다.</p> <figure><div class="image" style="width:392px"> <div class="image__ratio" style="padding-top:48.97959183673469%"></div> <object type="image/svg+xml" data="/article/variables/variable-change.svg" width="392" height="192" class="image__image" data-use-theme> <img src="/article/variables/variable-change.svg" alt="" width="392" height="192"> </object> </div></figure><p>변수 두 개를 선언하고, 한 변수의 데이터를 다른 변수에 복사할 수도 있습니다.</p> <div id="y8bx2lt8ja" data-trusted="1" class="code-example" data-highlight="[{"start":4,"end":5}]"> <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 Hello = 'Hello world!'; let message; // Hello의 'Hello world' 값을 message에 복사합니다. message = Hello; // 이제 두 변수는 같은 데이터를 가집니다. alert(Hello); // Hello world! alert(message); // Hello world!</code></pre> </div> </div> </div><div class="important important_warn"> <div class="important__header"><span class="important__type">변수를 두 번 선언하면 에러가 발생합니다.</span></div> <div class="important__content"><p>변수는 한 번만 선언해야 합니다.</p> <p>같은 변수를 여러 번 선언하면 에러가 발생합니다.</p> <div id="eq0daed5ov" 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 message = "This"; // 'let'을 반복하면 에러가 발생합니다. let message = "That"; // SyntaxError: 'message' has already been declared</code></pre> </div> </div> </div><p>따라서 변수는 딱 한 번만 선언하고, 선언한 변수를 참조할 때는 <code>let</code> 없이 변수명만 사용해 참조해야 합니다.</p> </div></div> <div class="important important_smart"> <div class="important__header"><span class="important__type">함수형 언어</span></div> <div class="important__content"><p><a href="https://en.wikipedia.org/wiki/Functional_programming">함수형(functional)</a> 프로그래밍 언어는 변숫값 변경을 금지합니다. <a href="http://www.scala-lang.org/">스칼라(Scala)</a>와 <a href="http://www.erlang.org/">얼랭(Erlang)</a>은 대표적인 함수형 언어입니다.</p> <p>이들 언어에서는 ‘상자 속에’ 값이 일단 저장되면, 그 값을 영원히 유지합니다. 다른 값을 저장하고 싶다면 새로운 상자를 만들어야(새 변수를 선언해야)만 합니다. 이전 변수를 재사용할 수 없습니다.</p> <p>처음 봤을 땐 좀 이상해 보일 수 있지만, 함수형 언어는 중대한 개발에 상당히 적합한 언어입니다. 이런 제약이 장점으로 작용하는 병렬 계산(parallel computation)과 같은 영역도 있죠. 당장은 사용할 계획이 없더라도 이런 언어를 공부하는 것은 시야를 넓히는 데 도움이 되므로, 학습을 권유 드립니다.</p> </div></div> <h2><a class="main__anchor" name="ref-528" href="#ref-528">변수 명명 규칙</a></h2><p>자바스크립트에선 변수 명명 시 두 가지 제약 사항이 있습니다.</p> <ol> <li>변수명에는 오직 문자와 숫자, 그리고 기호 <code>$</code>와 <code>_</code>만 들어갈 수 있습니다.</li> <li>첫 글자는 숫자가 될 수 없습니다.</li> </ol> <p>다음은 유효한 변수명의 예시입니다.</p> <div id="ek0pddeuzg" 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 userName; let test123;</code></pre> </div> </div> </div><p>여러 단어를 조합하여 변수명을 만들 땐 <a href="https://en.wikipedia.org/wiki/CamelCase">카멜 표기법(camelCase)</a>이 흔히 사용됩니다. 카멜 표기법은 단어를 차례대로 나열하면서 첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성합니다. <code>myVeryLongName</code>같이 말이죠.</p> <p>달러 기호 <code>'$'</code> 와 밑줄 <code>'_'</code> 를 변수명에 사용할 수 있다는 점이 조금 특이하네요. 이 특수 기호는 일반 글자처럼 특별한 의미를 지니진 않습니다.</p> <p>아래는 유효한 변수명에 관한 예시입니다.</p> <div id="6tbzgjjlxc" data-trusted="0" 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 $ = 1; // '$'라는 이름의 변수를 선언합니다. let _ = 2; // '_'라는 이름의 변수를 선언합니다. alert($ + _); // 3</code></pre> </div> </div> </div><p>아래는 잘못된 변수명의 예시입니다.</p> <div id="fg1e812q41" 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 1a; // 변수명은 숫자로 시작해선 안 됩니다. let my-name; // 하이픈 '-'은 변수명에 올 수 없습니다.</code></pre> </div> </div> </div><div class="important important_smart"> <div class="important__header"><span class="important__type">대·소문자 구별</span></div> <div class="important__content"><p><code>apple</code>와 <code>AppLE</code>은 서로 다른 변수입니다.</p> </div></div> <div class="important important_smart"> <div class="important__header"><span class="important__type">비 라틴계 언어도 변수명에 사용할 수 있지만 권장하진 않습니다.</span></div> <div class="important__content"><p>키릴 문자, 심지어 상형문자도 변수명에 사용할 수 있습니다. 모든 언어를 변수명에 사용할 수 있죠.</p> <div id="mjklanvqz7" 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 имя = '...'; let 我 = '...';</code></pre> </div> </div> </div><p>위 코드에는 기술적인 에러가 없습니다. 변수명도 유효합니다. 하지만 영어를 변수명에 사용하는 것이 국제적인 관습이므로, 변수명은 영어를 사용해서 만들길 권유 드립니다. 다른 나라 사람이 스크립트를 볼 경우 등을 대비해 장기적인 안목을 가지고 코드를 작성합시다.</p> </div></div> <div class="important important_warn"> <div class="important__header"><span class="important__type">예약어</span></div> <div class="important__content"><p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">예약어(reserved name) 목록</a>에 있는 단어는 변수명으로 사용할 수 없습니다. 이 단어들은 자바스크립트 내부에서 이미 사용 중이기 때문입니다.</p> <p>예약어 예시: <code>let</code>, <code>class</code>, <code>return</code>, <code>function</code></p> <p>아래 코드는 문법 에러를 발생시킵니다.</p> <div id="dyubyepob4" 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 let = 5; // 'let'을 변수명으로 사용할 수 없으므로 에러! let return = 5; // 'return'을 변수명으로 사용할 수 없으므로 에러!</code></pre> </div> </div> </div></div></div> <div class="important important_warn"> <div class="important__header"><span class="important__type"><code>use strict</code> 없이 할당하기</span></div> <div class="important__content"><p>변수는 대개 정의되어 있어야 사용할 수 있습니다. 그러나 예전에는 <code>let</code> 없이도 단순하게 값을 할당해 변수를 생성하는 것이 가능했습니다. <code>use strict</code>를 쓰지 않으면 과거 스크립트와의 호환성을 유지할 수 있기 때문에 여전히 이 방식을 사용할 수 있습니다.</p> <div id="tik9ske738" data-trusted="1" class="code-example" data-no-strict="1"> <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>// 참고: 이 예제에는 "use strict"가 없습니다. num = 5; // 변수 'num'이 정의되어있지 않더라도, 단순 할당만으로 변수가 생성됩니다. alert(num); // 5</code></pre> </div> </div> </div><p>이렇게 변수를 생성하는 것은 나쁜 관습입니다. 엄격 모드에서 에러를 발생시키기 때문이죠.</p> <div id="t2cxe10vtu" data-trusted="1" class="code-example" data-highlight="[{"start":2,"end":2}]"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>"use strict"; num = 5; // error: num is not defined</code></pre> </div> </div> </div></div></div> <h2><a class="main__anchor" name="ref-529" href="#ref-529">상수</a></h2><p>변화하지 않는 변수를 선언할 땐, <code>let</code> 대신 <code>const</code>를 사용합니다.</p> <div id="dbgk3aulz6" 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>const myBirthday = '18.04.1982';</code></pre> </div> </div> </div><p>이렇게 <code>const</code>로 선언한 변수를 '상수(constant)'라고 부릅니다. 상수는 재할당할 수 없으므로 상수를 변경하려고 하면 에러가 발생합니다.</p> <div id="ea7v8mokrf" 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>const myBirthday = '18.04.1982'; myBirthday = '01.01.2001'; // error, can't reassign the constant!</code></pre> </div> </div> </div><p>변숫값이 절대 변경되지 않을 것이라 확신하면, 값이 변경되는 것을 방지하면서 다른 개발자들에게 이 변수는 상수라는 것을 알리기 위해 <code>const</code>를 사용해 변수를 선언하도록 합시다.</p> <h3><a class="main__anchor" name="ref-530" href="#ref-530">대문자 상수</a></h3><p>기억하기 힘든 값을 변수에 할당해 별칭으로 사용하는 것은 널리 사용되는 관습입니다.</p> <p>이런 상수는 대문자와 밑줄로 구성된 이름으로 명명합니다.</p> <p>예시로 웹에서 사용하는 색상 표기법인 16진수 컬러 코드에 대한 상수를 한번 만들어보겠습니다.</p> <div id="4bomzxbqu9" 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>const COLOR_RED = "#F00"; const COLOR_GREEN = "#0F0"; const COLOR_BLUE = "#00F"; const COLOR_ORANGE = "#FF7F00"; // 색상을 고르고 싶을 때 별칭을 사용할 수 있게 되었습니다. let color = COLOR_ORANGE; alert(color); // #FF7F00</code></pre> </div> </div> </div><p>대문자로 상수를 만들어 사용하면 다음과 같은 장점이 있습니다.</p> <ul> <li><code>COLOR_ORANGE</code>는 <code>"#FF7F00"</code>보다 기억하기가 훨씬 쉽습니다.</li> <li><code>COLOR_ORANGE</code>를 사용하면 <code>"#FF7F00"</code>를 사용하는 것보다 오타를 낼 확률이 낮습니다.</li> <li><code>COLOR_ORANGE</code>가 <code>#FF7F00</code>보다 훨씬 유의미하므로, 코드 가독성이 증가합니다.</li> </ul> <p>그렇다면 언제 일반적인 방식으로 상수를 명명하고, 언제 대문자를 사용해서 명명해야 하는 걸까요? 명확히 짚고 넘어갑시다.</p> <p>'상수’는 변수의 값이 절대 변하지 않음을 의미합니다. 그중에는 (빨간색을 나타내는 16진수 값처럼) 코드가 실행되기 전에 이미 그 값을 알고 있는 상수도 있고, 런타임 과정에서 <em>계산되지만</em> 최초 할당 이후 값이 변하지 않는 상수도 있습니다.</p> <p>예시:</p> <div id="0afgc83iwf" 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>const pageLoadTime = /* 웹페이지를 로드하는데 걸린 시간 */;</code></pre> </div> </div> </div><p><code>pageLoadTime</code>의 값은 페이지가 로드되기 전에는 정해지지 않기 때문에 일반적인 방식으로 변수명을 지었습니다. 하지만 이 값은 최초 할당 이후에 변경되지 않으므로 여전히 상수입니다.</p> <p>정리하자면, 대문자 상수는 ‘하드 코딩한’ 값의 별칭을 만들 때 사용하면 됩니다.</p> <h2><a class="main__anchor" name="ref-531" href="#ref-531">바람직한 변수명</a></h2><p>변수에 관한 매우 중요한 사실이 한 가지 더 있습니다.</p> <p>변수명은 간결하고, 명확해야 합니다. 변수가 담고있는 것이 무엇인지 잘 설명할 수 있어야 하죠.</p> <p>변수의 이름을 짓는 것은 프로그래밍에서 가장 중요하고 복잡한 기술 중 하나입니다. 변수명만 슬쩍 봐도 초보자가 코드를 작성했는지, 노련한 개발자가 작성했는지 알 수 있습니다.</p> <p>실제 프로젝트에선 맨 처음부터 완전히 독립적인 코드를 작성하기보다 기존 코드의 틀을 변경하고 확장하는데 대부분의 시간을 보냅니다. 작성했던 코드를 얼마 후에 다시 봤을 때, 정보에 알맞은 이름이 적혀있으면 정보를 더 쉽게 찾을 수 있습니다. 다시 말해, 변수가 올바른 이름을 가졌을 때 말이죠.</p> <p>그러므로 변수를 선언하기 전에 내가 지은 변수의 이름이 괜찮은지 숙고해 주시기 바랍니다.</p> <p>아래는 변수 명명 시 참고하기 좋은 규칙입니다.</p> <ul> <li><code>userName</code> 이나 <code>shoppingCart</code>처럼 사람이 읽을 수 있는 이름을 사용하세요.</li> <li>무엇을 하고 있는지 명확히 알고 있지 않을 경우 외에는 줄임말이나 <code>a</code>, <code>b</code>, <code>c</code>와 같은 짧은 이름은 피하세요.</li> <li>최대한 서술적이고 간결하게 명명해 주세요. <code>data</code>와 <code>value</code>는 나쁜 이름의 예시입니다. 이런 이름은 아무것도 설명해주지 않습니다. 코드 문맥상 변수가 가리키는 데이터나 값이 아주 명확할 때에만 이런 이름을 사용합시다.</li> <li>자신만의 규칙이나 소속된 팀의 규칙을 따르세요. 만약 사이트 방문객을 'user’라고 부르기로 했다면, 이와 관련된 변수를 <code>currentVisitor</code>나 <code>newManInTown</code>이 아닌 <code>currentUser</code>나 <code>newUser</code>라는 이름으로 지어야 합니다.</li> </ul> <p>간단해 보이나요? 그렇게 보이긴 합니다. 그러나 실전에서 서술적이고 간결한 변수명을 짓는 것은 간단하지 않습니다. 그럼, 화이팅!</p> <div class="important important_smart"> <div class="important__header"><span class="important__type">재사용 아니면 새로 만들기?</span></div> <div class="important__content"><p>개발자 중에는 새로운 변수를 선언하기보다 기존 변수를 재사용 하는 걸 선호하는 게으른 분들이 있습니다.</p> <p>재사용된 변수는 과거에 붙여진 스티커를 떼지 않은 채 물건만 바뀐 상자와 같습니다. 상자 안에는 무엇이 들어 있을까요? 내용물에 대한 정보를 알고 있는 사람은 누구인가요? 이를 알기 위해선 상자에 가까이 다가가 확인해야만 합니다.</p> <p>변수를 재사용하면 변수 선언에 쏟는 노력을 좀 덜 순 있겠지만, 디버깅에 열 배 더 많은 시간을 쏟아야 합니다.</p> <p>변수를 추가하는 것은 악습이 아닙니다. 좋은 습관입니다.</p> <p>모던 자바스크립트 압축기(minifier)와 브라우저는 코드 최적화를 잘해줍니다. 변수를 추가한다고 해서 성능 이슈가 생기지 않죠. 값이 다른 경우, 변수를 다르게 선언해 주면 코드 최적화에 도움이 될 수도 있습니다.</p> </div></div> <h2><a class="main__anchor" name="ref-532" href="#ref-532">요약</a></h2><p><code>var</code>, <code>let</code>, <code>const</code>를 사용해 변수를 선언할 수 있습니다. 선언된 변수엔 데이터를 저장할 수 있죠.</p> <ul> <li><code>let</code> – 모던한 변수 선언 키워드입니다.</li> <li><code>var</code> – 오래된 변수 선언 키워드입니다. 잘 사용하지 않습니다. <code>let</code>과의 미묘한 차이점은 <a href="/var">오래된 var</a> 챕터에서 다루도록 하겠습니다.</li> <li><code>const</code> – <code>let</code>과 비슷하지만, 변수의 값을 변경할 수 없습니다.</li> </ul> <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-533" name="ref-533">변수 가지고 놀기</a></h3><a class="task__open-link" href="/task/hello-variables" target="_blank"></a></div><div class="task__header-note"><span class="task__importance" title="과제의 중요도에 따라 1부터 5까지의 점수가 매겨졌습니다.">중요도: 2</span></div><div class="task__content"><div class="task__formatted"><ol> <li><code>admin</code>과 <code>name</code>이라는 변수를 선언하세요.</li> <li><code>name</code>에 값으로 <code>"John"</code>을 할당해 보세요.</li> <li><code>name</code>의 값을 <code>admin</code>에 복사해 보세요.</li> <li><code>admin</code>의 값을 <code>alert</code> 창에 띄워보세요. "John"이 출력되어야 합니다.</li> </ol> </div><button class="task__solution" type="button">해답</button><div class="task__answer"><div class="task__answer-content"><div class="formatted"><p>아래 코드의 각 행은 과제의 각 번호에 대한 해답입니다.</p> <div id="pd21rtq1rz" 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 admin, name; // 변수 두 개를 동시에 선언할 수 있습니다. name = "John"; admin = name; alert( admin ); // "John"</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-536" name="ref-536">올바른 이름 선택하기</a></h3><a class="task__open-link" href="/task/declare-variables" 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"><ol> <li>현재 우리가 살고있는 행성(planet)의 이름을 값으로 가진 변수를 만들어보세요. 변수 이름은 어떻게 지어야 할까요?</li> <li>웹사이트를 개발 중이라고 가정하고, 현재 접속 중인 사용자(user)의 이름(name)을 저장하는 변수를 만들어보세요. 변수 이름은 어떻게 지어야 할까요?</li> </ol> </div><button class="task__solution" type="button">해답</button><div class="task__answer"><div class="task__step task__step_open"><button class="task__step-show" type="button" onclick="showStep(this)">행성 변수 이름 짓기</button><div class="task__answer-content"><h4 class="task__step-title">행성 변수 이름 짓기</h4><div class="formatted"><p>첫 번째 문제에 대한 답은 아주 간단합니다.</p> <div id="8r02cqdbjy" 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 ourPlanetName = "Earth";</code></pre> </div> </div> </div><p><code>planet</code>이라는 간단한 이름을 지어줘도 되지만, 이렇게 하면 어떤 행성(planet)을 언급하는 것인지 모호합니다. 변수명이 아주 길어지지 않는 이상, 설명을 좀 더 곁들어주는 것이 좋습니다.</p> </div></div></div><div class="task__step task__step_open"><button class="task__step-show" type="button" onclick="showStep(this)">현재 방문자를 나타내는 변수 이름 짓기</button><div class="task__answer-content"><h4 class="task__step-title">현재 방문자를 나타내는 변수 이름 짓기</h4><div class="formatted"><p>현재 접속 중인 방문자 이름은 아래와 같이 변수를 만들어 저장해 볼 수 있습니다.</p> <div id="eqmx0uoxr3" 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 currentUserName = "John";</code></pre> </div> </div> </div><p>여기서도 마찬가지로 <code>userName</code>같이 이름을 짧게 지어주기보다는, 현재 접속 중인 사용자라는 정보를 담고 있는 이름으로 지어주는 것이 좋습니다.</p> <p>모던 에디터와 자동 완성 기능을 이용하면 상대적으로 쉽게 여러 단어를 조합해서 변수명을 지을 수 있습니다.</p> <p>지금 사용하는 에디터가 이런 기능을 제공하지 않는다면 <a href="/code-editors">코드 에디터</a> 챕터를 참고해 새로운 에디터를 사용해 보시길 권유 드립니다.</p> </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-537" name="ref-537">대문자 상수 올바로 사용하기</a></h3><a class="task__open-link" href="/task/uppercast-constant" target="_blank"></a></div><div class="task__header-note"><span class="task__importance" title="과제의 중요도에 따라 1부터 5까지의 점수가 매겨졌습니다.">중요도: 4</span></div><div class="task__content"><div class="task__formatted"><p>아래 코드를 평가해 보시기 바랍니다.</p> <div id="qseww5pjyf" 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>const birthday = '18.04.1982'; const age = someCode(birthday);</code></pre> </div> </div> </div><p>위 코드의 상수 <code>birthday</code>는 태어난 날짜 정보를 담고 있습니다. <code>age</code>라는 상수는 나이에 관한 값을 담고 있는데 <code>birthday</code>를 조작하여 그 값을 도출합니다(생일을 이용하여 나이를 도출하는 코드는 간결성을 위해 여기선 언급하지 않겠습니다. 이 문제에서 해당 코드가 중요한 역할을 하지 않기도 합니다).</p> <p>이런 상황에서 <code>birthday</code>를 대문자 상수로 바꾸는 것이 적절할까요? <code>age</code> 역시 대문자 상수로 바꾸는 것이 괜찮은 선택일까요?</p> <div id="3q5g1vpjj6" 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>const BIRTHDAY = '18.04.1982'; // 대문자 상수로 바꿔도 괜찮을까요? const AGE = someCode(BIRTHDAY); // 대문자 상수로 바꿔도 괜찮을까요?</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>birthday</code>가 그런 경우입니다. 따라서 <code>birthday</code>는 대문자 상수로 적합합니다.</p> <p>반면, <code>age</code>는 런타임에 평가됩니다. 올해의 나이와 내년의 나이는 다르죠. 상수는 코드가 실행될 때마다 바뀌지 않아야 하는 값이란 걸 아마 느끼셨을 겁니다. 이런 관점에서 보았을 때, <code>age</code>는 <code>birthday</code>보다 덜 상수스럽습니다. 런타임에 계산되죠. 따라서 <code>age</code>는 대문자 상수에 적합하지 않습니다.</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="/strict-mode" 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="/types" 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%2Fvariables" 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%2Fvariables" 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\/variables","identifier":"\/variables"}); };</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="/first-steps">자바스크립트 기본</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-526">변수</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#ref-527">현실 속의 비유</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#ref-528">변수 명명 규칙</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#ref-529">상수</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#ref-531">바람직한 변수명</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#ref-532">요약</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">과제 (3)</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%2Fvariables" 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%2Fvariables" 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/02-first-steps/04-variables" 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>