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":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/types"><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="/variables"><link rel="next" href="/alert-prompt-confirm"><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/types"><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/types"><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/types"><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/types"><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/types"><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/types"><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/types"><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/types"><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/types"><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/types"><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/types"><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/types"><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/types"><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%2Ftypes" 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%2Ftypes" 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/types">عربي</option><option value="https://javascript.info/types">English</option><option value="https://es.javascript.info/types">Español</option><option value="https://fa.javascript.info/types">فارسی</option><option value="https://fr.javascript.info/types">Français</option><option value="https://id.javascript.info/types">Indonesia</option><option value="https://it.javascript.info/types">Italiano</option><option value="https://ja.javascript.info/types">日本語</option><option value="https://ko.javascript.info/types" selected>한국어</option><option value="https://learn.javascript.ru/types">Русский</option><option value="https://tr.javascript.info/types">Türkçe</option><option value="https://uk.javascript.info/types">Українська</option><option value="https://zh.javascript.info/types">简体中文</option></select></div></div></div><progress class="tutorial-progress" data-sticky value="9" max="92" data-tooltip="92개의 주제 중 9번째 주제"></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년 9월 14일"><div class="updated-at__content">2022년 9월 14일</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> <p>자바스크립트에는 여덟 가지 기본 자료형이 있습니다. 이번 챕터에선 이 자료형 모두를 개괄적으로 다루도록 하겠습니다. 각 자료형에 대한 세부 사항들은 이어지는 챕터에서 다룰 예정입니다.</p> <p>자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있습니다. 따라서 변수는 어떤 순간에 문자열일 수 있고 다른 순간엔 숫자가 될 수도 있습니다.</p> <div id="dxq2jtukzk" 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>// no error let message = "hello"; message = 123456;</code></pre> </div> </div> </div><p>이처럼 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어를 ‘동적 타입(dynamically typed)’ 언어라고 부릅니다.</p> <h2><a class="main__anchor" name="ref-235" href="#ref-235">숫자형</a></h2><div id="icpt7bqrcr" 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 n = 123; n = 12.345;</code></pre> </div> </div> </div><p><em>숫자형(number type)</em> 은 정수 및 부동소수점 숫자(floating point number)를 나타냅니다.</p> <p>숫자형과 관련된 연산은 다양한데, 곱셈 <code>*</code>, 나눗셈 <code>/</code>, 덧셈 <code>+</code>, 뺄셈 <code>-</code> 등이 대표적입니다.</p> <p>숫자형엔 일반적인 숫자 외에 <code>Infinity</code>, <code>-Infinity</code>, <code>NaN</code>같은 '특수 숫자 값(special numeric value)'이 포함됩니다.</p> <ul> <li> <p><code>Infinity</code>는 어떤 숫자보다 더 큰 특수 값, <a href="https://en.wikipedia.org/wiki/Infinity">무한대(∞)</a>를 나타냅니다.</p> <p>어느 숫자든 0으로 나누면 무한대를 얻을 수 있습니다.</p> <div id="06ij3jjl21" 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>alert( 1 / 0 ); // 무한대</code></pre> </div> </div> </div><p><code>Infinity</code>를 직접 참조할 수도 있습니다.</p> <div id="vg5eyvcq8r" 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>alert( Infinity ); // 무한대</code></pre> </div> </div> </div></li> <li> <p><code>NaN</code>은 계산 중에 에러가 발생했다는 것을 나타내주는 값입니다. 부정확하거나 정의되지 않은 수학 연산을 사용하면 계산 중에 에러가 발생하는데, 이때 <code>NaN</code>이 반환됩니다.</p> <div id="4jl0ban3h7" 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>alert( "숫자가 아님" / 2 ); // NaN, 문자열을 숫자로 나누면 오류가 발생합니다.</code></pre> </div> </div> </div><p><code>NaN</code>은 여간해선 바뀌지 않습니다. <code>NaN</code>에 어떤 추가 연산을 해도 결국 <code>NaN</code>이 반환됩니다.</p> <div id="p417ifjrby" 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>alert( "숫자가 아님" / 2 + 5 ); // NaN</code></pre> </div> </div> </div><p>연산 과정 어디에선가 <code>NaN</code>이 반환되었다면, 이는 모든 결과에 영향을 미칩니다.</p> </li> </ul> <div class="important important_smart"> <div class="important__header"><span class="important__type">수학 연산은 안전합니다.</span></div> <div class="important__content"><p>자바스크립트에서 행해지는 수학 연산은 '안전’하다고 볼 수 있습니다. 0으로 나눈다거나 숫자가 아닌 문자열을 숫자로 취급하는 등의 이례적인 연산이 자바스크립트에선 가능합니다.</p> <p>말이 안 되는 수학 연산을 하더라도 스크립트는 치명적인 에러를 내뿜으며 죽지 않습니다. <code>NaN</code>을 반환하며 연산이 종료될 뿐입니다.</p> </div></div> <p>현실에선 특수 숫자 값을 숫자로 취급하진 않습니다. 하지만 자바스크립트에선 특수 숫자 값을 숫자형으로 분류합니다.</p> <p>숫자를 다루는 방법에 대해선 <a href="/number">숫자형</a> 챕터에서 자세히 알아보도록 하겠습니다.</p> <h2><a class="main__anchor" name="ref-236" href="#ref-236">BigInt</a></h2><p>내부 표현 방식 때문에 자바스크립트에선 <code>(2<sup>53</sup>-1)</code>(<code>9007199254740991</code>) 보다 큰 값 혹은 <code>-(2<sup>53</sup>-1)</code> 보다 작은 정수는 '숫자형’을 사용해 나타낼 수 없습니다.</p> <p>사실 대부분의 상황에서 이런 제약사항은 문제가 되지 않습니다. 그렇지만 암호 관련 작업같이 아주 큰 숫자가 필요한 상황이거나 아주 높은 정밀도로 작업을 해야 할 때는 이런 큰 숫자가 필요합니다.</p> <p><code>BigInt</code>형은 표준으로 채택된 지 얼마 안 된 자료형으로, 길이에 상관없이 정수를 나타낼 수 있습니다.</p> <p><code>BigInt</code>형 값은 정수 리터럴 끝에 <code>n</code>을 붙이면 만들 수 있습니다.</p> <div id="fakm6p99s4" 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>// 끝에 'n'이 붙으면 BigInt형 자료입니다. const bigInt = 1234567890123456789012345678901234567890n;</code></pre> </div> </div> </div><p><code>BigInt</code>형 숫자는 자주 쓰이지 않기 때문에 여기서 자세히 다루지 않고 별도의 챕터, <a href="/bigint">BigInt</a>에서 설명드리겠습니다. 아주 큰 숫자를 사용해야 하는 경우라면 해당 챕터를 참고해 주시기 바랍니다.</p> <div class="important important_smart"> <div class="important__header"><span class="important__type">호환성 이슈</span></div> <div class="important__content"><p>이 글이 작성된 시점엔 Firefox, Chrome, Edge, Safari에서만 <code>BigInt</code>를 지원합니다. IE에선 지원하지 않습니다.</p> </div></div> <h2><a class="main__anchor" name="ref-237" href="#ref-237">문자형</a></h2><p>자바스크립트에선 문자열(string)을 따옴표로 묶습니다.</p> <div id="afkcafyfpa" 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 str = "Hello"; let str2 = 'Single quotes are ok too'; let phrase = `can embed another ${str}`;</code></pre> </div> </div> </div><p>따옴표는 세 종류가 있습니다.</p> <ol> <li>큰따옴표: <code>"Hello"</code></li> <li>작은따옴표: <code>'Hello'</code></li> <li>역 따옴표(백틱, backtick): <code>`Hello`</code></li> </ol> <p>큰따옴표와 작은따옴표는 ‘기본적인’ 따옴표로, 자바스크립트에서는 이 둘에 차이를 두지 않습니다.</p> <p>역 따옴표로 변수나 표현식을 감싼 후 <code>${…}</code>안에 넣어주면, 아래와 같이 원하는 변수나 표현식을 문자열 중간에 손쉽게 넣을 수 있습니다.</p> <div id="3paga53zlx" data-trusted="1" class="code-example" data-highlight="[{"start":6,"cols":[{"start":22,"end":30}]},{"start":3,"cols":[{"start":15,"end":22}]}]"> <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 name = "John"; // 변수를 문자열 중간에 삽입 alert( `Hello, ${name}!` ); // Hello, John! // 표현식을 문자열 중간에 삽입 alert( `the result is ${1 + 2}` ); // the result is 3</code></pre> </div> </div> </div><p><code>${…}</code> 안에는 <code>name</code> 같은 변수나 <code>1 + 2</code> 같은 수학 관련 표현식을 넣을 수 있습니다. 물론 더 복잡한 표현식도 넣을 수 있죠. 무엇이든 들어갈 수 있습니다. 이렇게 문자열 중간에 들어간 변수나 표현식은 평가가 끝난 후 문자열의 일부가 됩니다.</p> <p>큰따옴표나 작은따옴표를 사용하면 중간에 표현식을 넣을 수 없다는 점에 주의하시기 바랍니다. 이 방법은 역 따옴표를 써야만 가능합니다.</p> <div id="idsz566l8r" 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>alert( "the result is ${1 + 2}" ); // the result is ${1 + 2} (큰따옴표는 확장 기능을 지원하지 않습니다.)</code></pre> </div> </div> </div><p>문자열은 <a href="/string">문자열</a>챕터에서 더 자세히 다루도록 하겠습니다.</p> <div class="important important_smart"> <div class="important__header"><span class="important__type"><em>글자형</em>은 없습니다.</span></div> <div class="important__content"><p>일부 언어는 글자 하나를 저장할 때 쓰이는 자료형, '글자(character)'형을 따로 지원합니다. C 언어와 Java의 <code>char</code>가 대표적인 예입니다.</p> <p>자바스크립트는 글자형을 지원하지 않습니다. <code>문자형</code>만 있을 뿐입니다. 여기엔 글자가 하나 혹은 여러 개 들어갈 수 있습니다.</p> </div></div> <h2><a class="main__anchor" name="ref-238" href="#ref-238">불린형</a></h2><p>불린형(논리 타입)은 <code>true</code>와 <code>false</code> 두 가지 값밖에 없는 자료형입니다.</p> <p>불린형은 긍정(yes)이나 부정(no)을 나타내는 값을 저장할 때 사용합니다. <code>true</code>는 긍정, <code>false</code>는 부정을 의미합니다.</p> <p>예시:</p> <div id="wtqbux8uuq" 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 nameFieldChecked = true; // 네, name field가 확인되었습니다(checked). let ageFieldChecked = false; // 아니요, age field를 확인하지 않았습니다(not checked)</code></pre> </div> </div> </div><p>불린값은 비교 결과를 저장할 때도 사용됩니다.</p> <div id="vfq9a2pojy" 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 isGreater = 4 > 1; alert( isGreater ); // true (비교 결과: "yes")</code></pre> </div> </div> </div><p>불린형에 대한 자세한 사항들은 <a href="/logical-operators">논리 연산자</a> 챕터에서 다루도록 하겠습니다.</p> <h2><a class="main__anchor" name="ref-239" href="#ref-239">‘null’ 값</a></h2><p><code>null</code> 값은 지금까지 소개한 자료형 중 어느 자료형에도 속하지 않는 값입니다.</p> <p><code>null</code> 값은 오로지 <code>null</code> 값만 포함하는 별도의 자료형을 만듭니다.</p> <div id="1yk6ocrwza" 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 age = null;</code></pre> </div> </div> </div><p>자바스크립트의 <code>null</code>은 자바스크립트 이외 언어의 <code>null</code>과 성격이 다릅니다. 다른 언어에선 <code>null</code>을 '존재하지 않는 객체에 대한 참조’나 '널 포인터(null pointer)'를 나타낼 때 사용합니다.</p> <p>하지만 자바스크립트에선 <code>null</code>을 ‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값을 나타내는 데 사용합니다.</p> <p><code>let age = null;</code>은 <code>나이(age)</code>를 알 수 없거나 그 값이 비어있음을 보여줍니다.</p> <h2><a class="main__anchor" name="ref-240" href="#ref-240">‘undefined’ 값</a></h2><p><code>undefined</code> 값도 <code>null</code> 값처럼 자신만의 자료형을 형성합니다.</p> <p><code>undefined</code>는 '값이 할당되지 않은 상태’를 나타낼 때 사용합니다.</p> <p>변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 <code>undefined</code>가 자동으로 할당됩니다.</p> <div id="ui6p9ajz7y" 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 age; alert(age); // 'undefined'가 출력됩니다.</code></pre> </div> </div> </div><p>개발자가 변수에 <code>undefined</code>를 명시적으로 할당하는 것도 가능하긴 합니다.</p> <div id="t3hacq0ki3" 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 age = 100; // 값을 undefined로 바꿉니다. age = undefined; alert(age); // "undefined"</code></pre> </div> </div> </div><p>하지만 이렇게 <code>undefined</code>를 직접 할당하는 걸 권장하진 않습니다. 변수가 ‘비어있거나’ ‘알 수 없는’ 상태라는 걸 나타내려면 <code>null</code>을 사용하세요. <code>undefined</code>는 값이 할당되지 않은 변수의 초기값을 위해 예약어로 남겨둡시다.</p> <h2><a class="main__anchor" name="ref-241" href="#ref-241">객체와 심볼</a></h2><p><code>객체(object)</code>형은 특수한 자료형입니다.</p> <p>객체형을 제외한 다른 자료형은 문자열이든 숫자든 한 가지만 표현할 수 있기 때문에 원시(primitive) 자료형이라 부릅니다. 반면 객체는 데이터 컬렉션이나 복잡한 개체(entity)를 표현할 수 있습니다.</p> <p>이런 특징 때문에 자바스크립트에서 객체는 좀 더 특별한 취급을 받습니다. 자세한 내용은 원시형을 배우고 난 후 <a href="/object">객체</a>에서 다루도록 하겠습니다.</p> <p><code>심볼(symbol)</code>형은 객체의 고유한 식별자(unique identifier)를 만들 때 사용됩니다. 심볼형에 대해선 객체를 학습하고 난 이후에 자세히 알아보겠습니다.</p> <h2><a class="main__anchor" name="type-typeof" href="#type-typeof">typeof 연산자</a></h2><p><code>typeof</code> 연산자는 인수의 자료형을 반환합니다. 자료형에 따라 처리 방식을 다르게 하고 싶거나 변수의 자료형을 빠르게 알아내고자 할 때 유용합니다.</p> <p><code>typeof</code> 연산자는 두 가지 형태의 문법을 지원합니다.</p> <ol> <li>연산자: <code>typeof x</code></li> <li>함수: <code>typeof(x)</code></li> </ol> <p>괄호가 있든 없든 결과가 동일합니다.</p> <p><code>typeof x</code>를 호출하면 인수의 자료형을 나타내는 문자열을 반환합니다.</p> <div id="tvm9m3tpfv" data-trusted="1" class="code-example" data-highlight="[{"start":16,"end":16},{"start":14,"end":14},{"start":12,"end":12}]"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>typeof undefined // "undefined" typeof 0 // "number" typeof 10n // "bigint" typeof true // "boolean" typeof "foo" // "string" typeof Symbol("id") // "symbol" typeof Math // "object" (1) typeof null // "object" (2) typeof alert // "function" (3)</code></pre> </div> </div> </div><p>마지막 세 줄은 약간의 설명이 필요해 보이네요.</p> <ol> <li><code>Math</code>는 수학 연산을 제공하는 내장 객체이므로 <code>"object"</code>가 출력됩니다. <code>Math</code>에 대해선 <a href="/number">숫자형</a> 챕터에서 학습하도록 하겠습니다. 내장 객체는 객체형이라는 것을 알려주기 위해 이런 예시를 작성해 보았습니다.</li> <li><code>typeof null</code>의 결과는 <code>"object"</code>입니다. <code>null</code>은 별도의 고유한 자료형을 가지는 특수 값으로 객체가 아니지만, 하위 호환성을 유지하기 위해 이런 오류를 수정하지 않고 남겨둔 상황입니다. 언어 자체의 오류이므로 <code>null</code>이 객체가 아님에 유의하시기 바랍니다.</li> <li><code>typeof</code>는 피연산자가 함수면 <code>"function"</code>을 반환합니다. 그러므로 <code>typeof alert</code>는 <code>"function"</code>을 출력해줍니다. 그런데 '함수’형은 따로 없습니다. 함수는 객체형에 속합니다. 이런 동작 방식이 형식적으론 잘못되긴 했지만, 아주 오래전에 만들어진 규칙이었기 때문에 하위 호환성 유지를 위해 남겨진 상태입니다. 한편, 실무에선 이런 특징이 매우 유용하게 사용되기도 합니다.</li> </ol> <h2><a class="main__anchor" name="ref-242" href="#ref-242">요약</a></h2><p>자바스크립트에는 여덟 가지 기본 자료형이 있습니다.</p> <ul> <li><code>숫자형</code> – 정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용합니다. 정수의 한계는 ±2<sup>53</sup> 입니다.</li> <li><code>bigint</code> – 길이 제약 없이 정수를 나타낼 수 있습니다.</li> <li><code>문자형</code> – 빈 문자열이나 글자들로 이뤄진 문자열을 나타낼 때 사용합니다. 단일 문자를 나타내는 별도의 자료형은 없습니다.</li> <li><code>불린형</code> – <code>true</code>, <code>false</code>를 나타낼 때 사용합니다.</li> <li><code>null</code> – <code>null</code> 값만을 위한 독립 자료형입니다. <code>null</code>은 알 수 없는 값을 나타냅니다.</li> <li><code>undefined</code> – <code>undefined</code> 값만을 위한 독립 자료형입니다. <code>undefined</code>는 할당되지 않은 값을 나타냅니다.</li> <li><code>객체형</code> – 복잡한 데이터 구조를 표현할 때 사용합니다.</li> <li><code>심볼형</code> – 객체의 고유 식별자를 만들 때 사용합니다.</li> </ul> <p><code>typeof</code> 연산자는 피연산자의 자료형을 알려줍니다.</p> <ul> <li><code>typeof x</code> 또는 <code>typeof(x)</code> 형태로 사용합니다.</li> <li>피연산자의 자료형을 문자열 형태로 반환합니다.</li> <li><code>null</code>의 typeof 연산은 <code>"object"</code>인데, 이는 언어상 오류입니다. null은 객체가 아닙니다.</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-243" name="ref-243">문자열 따옴표</a></h3><a class="task__open-link" href="/task/string-quotes" 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="qo35in92pu" 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 name = "Ilya"; alert( `hello ${1}` ); // ? alert( `hello ${"name"}` ); // ? alert( `hello ${name}` ); // ?</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><code>${...}</code> 안에 표현식을 넣고 문자열을 포함한 전체를 백틱으로 감싸면, 평가된 표현식이 문자열로 반환됩니다.</p> <div id="o0rgsu0bqj" 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 name = "Ilya"; // 표현식은 숫자 1입니다. alert( `hello ${1}` ); // hello 1 // 표현식은 문자열 "name"입니다. alert( `hello ${"name"}` ); // hello name // 표현식 안에 변수가 들어가 있기 때문에, 이 변수가 평가되어 전체 문자열이 반환됩니다. alert( `hello ${name}` ); // hello Ilya</code></pre> </div> </div> </div></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="/variables" 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="/alert-prompt-confirm" data-tooltip="alert, prompt, confirm을 이용한 상호작용"><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%2Ftypes" 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%2Ftypes" 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\/types","identifier":"\/types"}); };</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-235">숫자형</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#ref-236">BigInt</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#ref-237">문자형</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#ref-238">불린형</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#ref-239">‘null’ 값</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#ref-240">‘undefined’ 값</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#ref-241">객체와 심볼</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#type-typeof">typeof 연산자</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#ref-242">요약</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">과제 (1)</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%2Ftypes" 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%2Ftypes" 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/05-types" 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>