{"data":{"site":{"siteMetadata":{"title":"lastrites2018","author":"lastrites2018","siteUrl":"https://lastrites2018.netlify.com","comment":{"disqusShortName":"","utterances":"lastrites2018/gatsby-first-blog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"bd002d2e-e06f-5684-a602-4ce8f51f62b6","excerpt":"객체 리터럴? 객체는 참조(Reference) 방식으로 전달된다. 결코 복사되지 않는다. Pass-by-value 기본자료형의 값은 값value이 복사되어 전달된다. 이를 Pass-by-value(값에 의한 전달)이라 한다. 기본자료형은 값이 한번 정해지면 바꿀 수 없다.(immutable) 또한 이들 값은 런타임(변수 할당 시점)에 메모리의 스택(stack segment)에 고정된 메모리 영역을 점유하고 저장된다. 객체의 분류 Built-in Object…","html":"<h2 id=\"객체-리터럴\"><a href=\"#%EA%B0%9D%EC%B2%B4-%EB%A6%AC%ED%84%B0%EB%9F%B4\" aria-label=\"객체 리터럴 permalink\" class=\"anchor\"><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>객체 리터럴?</h2>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> foo <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  val<span class=\"token punctuation\">:</span> <span class=\"token number\">10</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token comment\">// foo를 위와 같이 생성한 것이 바로 객체 리터럴. 이때 변수 foo는 객체 자체를 저장하고 있는 것이 아니라</span>\n<span class=\"token comment\">// 생성된 객체의 참조값(address)를 저장하고 있다.</span></code></pre></div>\n<p><strong>객체는 참조(Reference) 방식으로 전달된다. 결코 복사되지 않는다.</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> foo <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span> val<span class=\"token punctuation\">:</span> <span class=\"token number\">10</span> <span class=\"token punctuation\">}</span>\n<span class=\"token keyword\">var</span> bar <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span> val<span class=\"token punctuation\">:</span> <span class=\"token number\">10</span> <span class=\"token punctuation\">}</span>\n\nfoo <span class=\"token operator\">===</span> bar <span class=\"token comment\">// false 변수</span>\n<span class=\"token comment\">// foo와 변수 bar는 비록 내용은 같지만 별개의 객체를 생성하여 참조값을 할당하였다.</span>\n<span class=\"token comment\">// 따라서 변수 foo와 변수 bar의 참조값 즉 어드레스는 동일하지 않다.</span>\n\n<span class=\"token keyword\">var</span> a <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  b <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  c <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span> <span class=\"token comment\">// a, b, c는 각각 다른 빈 객체를 참조</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>a <span class=\"token operator\">===</span> b<span class=\"token punctuation\">,</span> a <span class=\"token operator\">===</span> c<span class=\"token punctuation\">,</span> b <span class=\"token operator\">===</span> c<span class=\"token punctuation\">)</span> <span class=\"token comment\">// false false false</span>\n\na <span class=\"token operator\">=</span> b <span class=\"token operator\">=</span> c <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span> <span class=\"token comment\">// a, b, c는 모두 같은 빈 객체를 참조</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>a <span class=\"token operator\">===</span> b<span class=\"token punctuation\">,</span> a <span class=\"token operator\">===</span> c<span class=\"token punctuation\">,</span> b <span class=\"token operator\">===</span> c<span class=\"token punctuation\">)</span> <span class=\"token comment\">// true true true</span></code></pre></div>\n<h2 id=\"pass-by-value\"><a href=\"#pass-by-value\" aria-label=\"pass by value permalink\" class=\"anchor\"><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>Pass-by-value</h2>\n<p>기본자료형의 값은 값value이 복사되어 전달된다. 이를 Pass-by-value(값에 의한 전달)이라 한다. 기본자료형은 값이 한번 정해지면 바꿀 수 없다.(immutable) 또한 이들 값은 런타임(변수 할당 시점)에 메모리의 스택(stack segment)에 고정된 메모리 영역을 점유하고 저장된다.</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">var a = 1;\nvar b = a;\n// 이 떄 변수 a의 값 1이 복사되어 변수 b에 저장된다.</code></pre></div>\n<h2 id=\"객체의-분류\"><a href=\"#%EA%B0%9D%EC%B2%B4%EC%9D%98-%EB%B6%84%EB%A5%98\" aria-label=\"객체의 분류 permalink\" class=\"anchor\"><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>객체의 분류</h2>\n<p><a href=\"https://poiemaweb.com/js-built-in-object\">Built-in Object(내장 객체)</a>는 웹페이지 등을 표현하기 위한 공통의 기능을 제공한다. 웹페이지가 브라우저에 의해 로드되자마자 별다른 행위없이 바로 사용이 가능하다. Built-in Object는 아래와 같이 구분할 수 있다.</p>\n<ul>\n<li><a href=\"https://poiemaweb.com/js-standard-built-in-objects\">Standard Built-in Objects (or Global Objects)</a></li>\n<li><a href=\"http://www.w3schools.com/js/js_window.asp\">BOM (Browser Object Model)</a></li>\n<li><a href=\"https://poiemaweb.com/js-dom\">DOM (Document Object Model)</a></li>\n</ul>\n<p><strong>Standard Built-in Objects</strong>(표준 빌트인 객체)를 제외한 BOM과 DOM을 <strong>Native Object</strong>라고 분류하기도 한다. 또한 사용자가 생성한 객체를 <strong>Host Object</strong>(사용자 정의 객체)라 한다.</p>\n<ul>\n<li>\n<p>Host Object(사용자 정의 객체)</p>\n<p>사용자가 생성한 객체 . constructor 혹은 객체 리터럴을 통해 사용자가 객체를 정의하고 확장시킨 것이기 때문에 Built-in Object 와 Native Object가 구성된 이후에 구성된다.</p>\n</li>\n</ul>\n<h2 id=\"immutability\"><a href=\"#immutability\" aria-label=\"immutability permalink\" class=\"anchor\"><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>Immutability</h2>\n<p>Immutability(변경불가성)는 객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴을 의미한다. Immutability은 함수형 프로그래밍의 핵심 원리이다. 객체는 참조(reference) 형태로 전달하고 전달 받는다. 객체가 참조를 통해 공유되어 있다면 그 상태가 언제든지 변경될 수 있기 때문에 문제가 될 가능성도 커지게 된다. 이는 객체의 참조를 가지고 있는 어떤 장소에서 객체를 변경하면 참조를 공유하는 모든 장소에서 그 영향을 받기 때문.</p>\n<h1 id=\"immutable-value-vs-mutable-value\"><a href=\"#immutable-value-vs-mutable-value\" aria-label=\"immutable value vs mutable value permalink\" class=\"anchor\"><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>immutable value vs. mutable value</h1>\n<p>Javascript의 기본 자료형(primitive data type)은 변경 불가능한 값(immutable value)이다.</p>\n<ul>\n<li>Boolean</li>\n<li>null</li>\n<li>undefined</li>\n<li>Number</li>\n<li>String</li>\n<li>Symbol (New in ECMAScript 6)</li>\n</ul>\n<p>기본 자료형 이외의 모든 값은 객체(Object) 타입이며 객체 타입은 변경 가능한 값(mutable value)이다. <strong>즉, 객체는 새로운 값을 다시 만들 필요없이 직접 변경이 가능하다는 것이다.</strong> <strong>C 언어와는 다르게 Javascript의 문자열은 변경 불가능한 값(immutable value) 이다. 이런 값을 “primitive values” 라 한다.</strong> (변경이 불가능하다는 뜻은 메모리 영역에서의 변경이 불가능하다는 뜻이다. 재할당은 가능하다.)</p>\n<p>결과의 복사본을 리턴하는 문자열의 메소드 slice()와는 달리 배열(객체)의 메소드 push()는 <code class=\"language-text\">직접 대상 배열을 변경</code>한다. 그 이유는 배열은 객체이고 객체는 immutable value가 아닌 변경 가능한 값이기 때문이다.</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> user <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  name<span class=\"token punctuation\">:</span> <span class=\"token string\">'Lee'</span><span class=\"token punctuation\">,</span>\n  address<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n    city<span class=\"token punctuation\">:</span> <span class=\"token string\">'Seoul'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">var</span> myName <span class=\"token operator\">=</span> user<span class=\"token punctuation\">.</span>name <span class=\"token comment\">// 변수 myName은 string 타입이다.</span>\n\nuser<span class=\"token punctuation\">.</span>name <span class=\"token operator\">=</span> <span class=\"token string\">'Kim'</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>myName<span class=\"token punctuation\">)</span> <span class=\"token comment\">// Lee</span>\n\nmyName <span class=\"token operator\">=</span> user<span class=\"token punctuation\">.</span>name <span class=\"token comment\">// 재할당</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>myName<span class=\"token punctuation\">)</span> <span class=\"token comment\">// Kim</span></code></pre></div>\n<p>user.name의 값을 변경했지만 변수 myName의 값은 변경되지 않았다. 이는 변수 myName에 user.name을 할당했을 때 <strong>user.name의 참조를 할당하는 것이 아니라 immutable한 값 ‘Lee’가 메모리에 새로 생성되고 myName은 이것을 참조하기 때문이다.</strong> 따라서 user.name의 값이 변경된다 하더라도 변수 myName이 참조하고 있는 ‘Lee’는 변함이 없다.</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> user1 <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  name<span class=\"token punctuation\">:</span> <span class=\"token string\">'Lee'</span><span class=\"token punctuation\">,</span>\n  address<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n    city<span class=\"token punctuation\">:</span> <span class=\"token string\">'Seoul'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">var</span> user2 <span class=\"token operator\">=</span> user1 <span class=\"token comment\">// 변수 user2는 객체 타입이다.</span>\n\nuser2<span class=\"token punctuation\">.</span>name <span class=\"token operator\">=</span> <span class=\"token string\">'Kim'</span>\n\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>user1<span class=\"token punctuation\">.</span>name<span class=\"token punctuation\">)</span> <span class=\"token comment\">// Kim</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>user2<span class=\"token punctuation\">.</span>name<span class=\"token punctuation\">)</span> <span class=\"token comment\">// Kim</span></code></pre></div>\n<p>위의 경우 객체 user2의 name 프로퍼티에 새로운 값을 할당하면 객체는 변경 불가능한 값이 아니므로 객체 user2는 변경된다. 그런데 <strong>변경하지도 않은 객체 user1도 동시에 변경된다. 이는 user1과 user2가 같은 어드레스를 참조하고 있기 때문이다.</strong></p>\n<p>출처 : poiemaweb.com 정리</p>","frontmatter":{"title":"poiemaweb 객체object와 변경불가성Immutability","date":"September 01, 2018"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/til/20180901 poiemaweb 객체object와 변경불가성Immutability/","previous":{"fields":{"slug":"/til/20180831 Asynchronous call/"},"frontmatter":{"title":"Asynchronous call","category":"TIL"}},"next":{"fields":{"slug":"/til/20180901 Node.js 설치하기/"},"frontmatter":{"title":"Node.js 설치하기","category":"TIL"}}}}