{"componentChunkName":"component---src-templates-tag-js","path":"/tag/book/","result":{"data":{"contentfulTag":{"title":"book","id":"20f7775d-e1bb-5ea2-897b-9e6b6f42304f","slug":"book","post":[{"id":"89e6cf85-7fac-5234-91c3-2b6e4269547d","title":"인사이드 자바스크립트 책 읽으며","slug":"inside-javascript","publishDate":"March 13, 2019","publishDateISO":"2019-03-13","heroImage":{"title":"Inside JavaScript","fluid":{"aspectRatio":1.5059171597633136,"src":"//images.ctfassets.net/e1rkozd9gki4/2mtaZ1t56mLxR6UjGZZsea/4392de668e4f07b576e13317718197ef/Screen_Shot_2019-03-15_at_12.22.37_AM.png?w=1800&q=50","srcSet":"//images.ctfassets.net/e1rkozd9gki4/2mtaZ1t56mLxR6UjGZZsea/4392de668e4f07b576e13317718197ef/Screen_Shot_2019-03-15_at_12.22.37_AM.png?w=450&h=299&q=50 450w,\n//images.ctfassets.net/e1rkozd9gki4/2mtaZ1t56mLxR6UjGZZsea/4392de668e4f07b576e13317718197ef/Screen_Shot_2019-03-15_at_12.22.37_AM.png?w=900&h=598&q=50 900w,\n//images.ctfassets.net/e1rkozd9gki4/2mtaZ1t56mLxR6UjGZZsea/4392de668e4f07b576e13317718197ef/Screen_Shot_2019-03-15_at_12.22.37_AM.png?w=1018&h=676&q=50 1018w","srcWebp":"//images.ctfassets.net/e1rkozd9gki4/2mtaZ1t56mLxR6UjGZZsea/4392de668e4f07b576e13317718197ef/Screen_Shot_2019-03-15_at_12.22.37_AM.png?w=1800&q=50&fm=webp","srcSetWebp":"//images.ctfassets.net/e1rkozd9gki4/2mtaZ1t56mLxR6UjGZZsea/4392de668e4f07b576e13317718197ef/Screen_Shot_2019-03-15_at_12.22.37_AM.png?w=450&h=299&q=50&fm=webp 450w,\n//images.ctfassets.net/e1rkozd9gki4/2mtaZ1t56mLxR6UjGZZsea/4392de668e4f07b576e13317718197ef/Screen_Shot_2019-03-15_at_12.22.37_AM.png?w=900&h=598&q=50&fm=webp 900w,\n//images.ctfassets.net/e1rkozd9gki4/2mtaZ1t56mLxR6UjGZZsea/4392de668e4f07b576e13317718197ef/Screen_Shot_2019-03-15_at_12.22.37_AM.png?w=1018&h=676&q=50&fm=webp 1018w","sizes":"(max-width: 1800px) 100vw, 1800px"}},"body":{"childMarkdownRemark":{"timeToRead":2,"html":"<h1 id=\"자바스크립의-핵심-개념\" style=\"position:relative;\"><a href=\"#%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%EC%9D%98-%ED%95%B5%EC%8B%AC-%EA%B0%9C%EB%85%90\" aria-label=\"자바스크립의 핵심 개념 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>자바스크립의 핵심 개념</h1>\n<h2 id=\"1-객체\" style=\"position:relative;\"><a href=\"#1-%EA%B0%9D%EC%B2%B4\" aria-label=\"1 객체 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>1. 객체</h2>\n<ul>\n<li>자바스크립의 기본 데이터 타입\" boolean, number, string.</li>\n<li>특별한 값: null, undefinded</li>\n<li>위 데이터 타입, 값을 제외한 나머지는 모두 객체이며, 자바스크립트는 null, undefined을 제외한 모든 것을 객체로 다를 수 있다.</li>\n</ul>\n<h3 id=\"1-1-숫자\" style=\"position:relative;\"><a href=\"#1-1-%EC%88%AB%EC%9E%90\" aria-label=\"1 1 숫자 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>1-1) 숫자</h3>\n<ul>\n<li>자바스크립트는 하나의 숫자형만 존재한다.자바스크립트에서는 모든 숫자를 64비트 부동 소수점 형태로 저장하기 때문이다.</li>\n<li>자바스크립트에서는 정수형이 따로 없고, 모든 숫자를 실수로 처리하므로 나눗셈 연산을 할 때는 주의해야 한다.</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> num <span class=\"token operator\">=</span> <span class=\"token number\">5</span> <span class=\"token operator\">/</span><span class=\"token number\">2</span><span class=\"token punctuation\">;</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>num<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// (출력값) 2.5</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>Math<span class=\"token punctuation\">.</span><span class=\"token function\">floor</span><span class=\"token punctuation\">(</span>num<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// (출력값) 2</span></code></pre></div>\n<h3 id=\"1-2-문자열\" style=\"position:relative;\"><a href=\"#1-2-%EB%AC%B8%EC%9E%90%EC%97%B4\" aria-label=\"1 2 문자열 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>1-2) 문자열</h3>\n<ul>\n<li>문자열은 작은 따옴표(')나 큰 따옴표(\")로 생성한다.</li>\n<li>자바스크립트에서는 한 번 생성된 문자열은 읽기만 가능하지 수정은 불가능하다.</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// str 문자열 생성</span>\n<span class=\"token keyword\">var</span> str <span class=\"token operator\">=</span> <span class=\"token string\">'test'</span><span class=\"token punctuation\">;</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>str<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> str<span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> str<span class=\"token punctuation\">[</span><span class=\"token number\">2</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> str<span class=\"token punctuation\">[</span><span class=\"token number\">3</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// (출력값) test</span>\nstr<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token string\">'T'</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 문자열의 첫 글자를 대문자로 변경?</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>str<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// (출력값) test</span></code></pre></div>\n<h3 id=\"1-3-불린값\" style=\"position:relative;\"><a href=\"#1-3-%EB%B6%88%EB%A6%B0%EA%B0%92\" aria-label=\"1 3 불린값 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>1-3) 불린값</h3>\n<ul>\n<li>자바스크립트는 true와 false 값을 나타내는 불린 타입을 가진다.</li>\n</ul>\n<h3 id=\"1-4-null과-undefined\" style=\"position:relative;\"><a href=\"#1-4-null%EA%B3%BC-undefined\" aria-label=\"1 4 null과 undefined permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>1-4) null과 undefined</h3>\n<ul>\n<li>이 두 타입은 모두 자바스크립트에서 '값이 비어있음'을 나타낸다.</li>\n<li>자바스크립트 환경 내에서 기본적으로 값이 할당되지 않은 변수는 undefined 타입이며, undefined 타입의 변수는 변수 자체의 값 또한 undefined이다.</li>\n<li>null 타입의 경우는 개발자가 명시적으로 값이 비어있음을 나타내는 데 사용한다.</li>\n<li>null 타입 변수의 typeof 결과가 null이 아니라 object이다.</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// null 타입 변수 생성</span>\n<span class=\"token keyword\">var</span> nullVar <span class=\"token operator\">=</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">;</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">typeof</span> nullVar <span class=\"token operator\">===</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// (출력값) false</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>nullVar <span class=\"token operator\">===</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// (출력값) true</span></code></pre></div>\n<h2 id=\"2-함수\" style=\"position:relative;\"><a href=\"#2-%ED%95%A8%EC%88%98\" aria-label=\"2 함수 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>2. 함수</h2>\n<ul>\n<li>자바스크립트에서는 함수도 객체로 취급한다.</li>\n</ul>\n<h2 id=\"3-프로토타입\" style=\"position:relative;\"><a href=\"#3-%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85\" aria-label=\"3 프로토타입 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>3. 프로토타입</h2>\n<ul>\n<li>모든 객체는 숨겨진 링크(Link)인 프로토타입(Prototype)을 가진다. 이 링크는 해당 객체를 생성한 생성자의 프로토타입 객체를 가리킨다.</li>\n</ul>\n<h2 id=\"4-실행-컨텍스트와-클로저\" style=\"position:relative;\"><a href=\"#4-%EC%8B%A4%ED%96%89-%EC%BB%A8%ED%85%8D%EC%8A%A4%ED%8A%B8%EC%99%80-%ED%81%B4%EB%A1%9C%EC%A0%80\" aria-label=\"4 실행 컨텍스트와 클로저 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>4. 실행 컨텍스트와 클로저</h2>\n<ul>\n<li>자바스크립트는 자신만의 독특한 과정으로 실행 컨텍스트를 만들고 그 안에서 실행이 이루어진다. 이 실행 컨텍스트는 자신만의 유효 범위(Scope)을 갖는데, 이 과정에서 클로저를 구현할 수 있다.</li>\n</ul>","excerpt":"자바스크립의 핵심 개념 1. 객체 자바스크립의 기본 데이터 타입\" boolean, number, string. 특별한 값: null…"}}}]}},"pageContext":{"slug":"book","limit":6,"skip":0,"numPages":1,"currentPage":1}}}