{"componentChunkName":"component---src-templates-blog-post-js","path":"/JavaScript/getter_setter/","result":{"data":{"site":{"siteMetadata":{"title":"Progress Not Perfection","author":"Sunmin","siteUrl":"https://sunmin.netlify.com","comment":{"disqusShortName":"","utterances":"Sunmin0520/blog"}}},"markdownRemark":{"id":"ceeff195-064a-534e-bd68-1b3a67a3d12c","excerpt":"…","html":"<p>\n<ul>\n<li>\n<p>객체 프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 나눌 수 있다.</p>\n<ul>\n<li>데이터 프로퍼티: 값 저장 위한 프로퍼티</li>\n<li>\n<p>접근자 프로퍼티: 값이 없음. <strong>프로퍼티 읽거나 쓸 때 호출하는 함수</strong>를 값 대신에 지정하는 일종의 메서드</p>\n<ul>\n<li>\n<p>객체지향에서의 접근자: 객체가 가진 프로퍼티값을 객체 밖에서 읽거나 쓸 수 있도록 제공하는 메서드</p>\n<ul>\n<li>객체의 프로퍼티를 객체 밖에서 직접 조작 가능 -> 데이터의 유지보수성 해침</li>\n</ul>\n</li>\n<li>접근자 프로퍼티 사용해서 객체에 접근자를 정의 -> 데이터의 부적절한 수정 방지, 특정 데이터를 외부로부터 숨김 => 유지보수성 증가</li>\n<li>접근자 프로퍼티 하나에 대해 getter,setter 2가지 함수로 구성 &#x26; function키워드 대신 get이나 set 키워드 사용한 함수를 작성\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token comment\">//다른 두 함수를 선언</span>\n<span class=\"token keyword\">const</span> <span class=\"token constant\">USER_EMAIL</span> <span class=\"token operator\">=</span> <span class=\"token function\">Symbol</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">class</span> <span class=\"token class-name\">User</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token function\">setEmail</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">value</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">if</span><span class=\"token punctuation\">(</span><span class=\"token operator\">!</span><span class=\"token regex\"><span class=\"token regex-delimiter\">/</span><span class=\"token regex-source language-regex\">@</span><span class=\"token regex-delimiter\">/</span></span><span class=\"token punctuation\">.</span><span class=\"token function\">test</span><span class=\"token punctuation\">(</span>value<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token keyword\">throw</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Error</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">invalid email: </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>value<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token keyword\">this</span><span class=\"token punctuation\">[</span><span class=\"token constant\">USER_EMAIL</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> value<span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token function\">getEmail</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">return</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">[</span><span class=\"token constant\">USER_EMAIL</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token comment\">//get,set 사용해서 함수 두 개 쓰지만 email이라는 하나의 프로퍼티에 묶임 -> 부주의한 접근을 차단</span>\n<span class=\"token keyword\">const</span> <span class=\"token constant\">USER_EMAIL</span> <span class=\"token operator\">=</span> <span class=\"token function\">Symbol</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">class</span> <span class=\"token class-name\">User</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">set</span> <span class=\"token function\">email</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">value</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span><span class=\"token comment\">//프로퍼티 쓰기에는 setter 호출</span>\n        <span class=\"token keyword\">if</span><span class=\"token punctuation\">(</span><span class=\"token operator\">!</span><span class=\"token regex\"><span class=\"token regex-delimiter\">/</span><span class=\"token regex-source language-regex\">@</span><span class=\"token regex-delimiter\">/</span></span><span class=\"token punctuation\">.</span><span class=\"token function\">test</span><span class=\"token punctuation\">(</span>value<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token keyword\">throw</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Error</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">invalid email: </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>value<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token keyword\">this</span><span class=\"token punctuation\">[</span><span class=\"token constant\">USER_EMAIL</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> value<span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token keyword\">get</span> <span class=\"token function\">email</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span><span class=\"token comment\">//프로퍼티 읽기 getter 호출</span>\n        <span class=\"token keyword\">return</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">[</span><span class=\"token constant\">USER_EMAIL</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<br />\n<ul>\n<li>JS는 유연 But 그만큼 의도치 않은 수정과 공격으로부터 객체 보호 필요</li>\n</ul>\n<br />\n<ul>\n<li>데이터의 캡슐화</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token comment\">//접근자 프로퍼티 사용했지만 여전히 데이터 프로퍼티를 밖에서 읽고 쓸 수 있음</span>\n<span class=\"token keyword\">var</span> person <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n    _name<span class=\"token operator\">:</span> <span class=\"token string\">\"Sunmin\"</span><span class=\"token punctuation\">,</span>\n    <span class=\"token keyword\">get</span> <span class=\"token function\">name</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">return</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>_name<span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token keyword\">set</span> <span class=\"token function\">name</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">value</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">var</span> str <span class=\"token operator\">=</span> value<span class=\"token punctuation\">.</span><span class=\"token function\">charAt</span><span class=\"token punctuation\">(</span><span class=\"token number\">0</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">toUpperCase</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token operator\">+</span> value<span class=\"token punctuation\">.</span><span class=\"token function\">substring</span><span class=\"token punctuation\">(</span><span class=\"token number\">1</span><span class=\"token punctuation\">)</span>\n        <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>_name <span class=\"token operator\">=</span> str<span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>person<span class=\"token punctuation\">.</span>name<span class=\"token punctuation\">)</span><span class=\"token comment\">//Sunmin</span>\nperson<span class=\"token punctuation\">.</span>name <span class=\"token operator\">=</span> <span class=\"token string\">\"cho\"</span><span class=\"token comment\">//접근자 프로퍼티에 값 대입</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>person<span class=\"token punctuation\">.</span>name<span class=\"token punctuation\">)</span> <span class=\"token comment\">//Cho</span></code></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token comment\">//즉시 실행함수로 클로저 생성 -> 객체 외부에서 못 읽고 쓰고, 접근자프로퍼티로만 읽고 쓰도록 할 수 있다.</span>\n<span class=\"token keyword\">var</span> person <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">var</span> _name <span class=\"token operator\">=</span> <span class=\"token string\">\"Sunmin\"</span><span class=\"token comment\">//프라이빗 변수(즉시실행함수의 지역변수) -> 함수 바깥에서 읽거나 쓸 수 없다.</span>\n    <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">get</span> <span class=\"token function\">name</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n            <span class=\"token keyword\">return</span> _name<span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> \n        <span class=\"token keyword\">set</span> <span class=\"token function\">name</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">value</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n            <span class=\"token keyword\">var</span> str <span class=\"token operator\">=</span> value<span class=\"token punctuation\">.</span><span class=\"token function\">charAt</span><span class=\"token punctuation\">(</span><span class=\"token number\">0</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">toUpperCase</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token operator\">+</span> value<span class=\"token punctuation\">.</span><span class=\"token function\">substring</span><span class=\"token punctuation\">(</span><span class=\"token number\">1</span><span class=\"token punctuation\">)</span>\n            _name <span class=\"token operator\">=</span> str<span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>person<span class=\"token punctuation\">.</span>name<span class=\"token punctuation\">)</span><span class=\"token comment\">//Sunmin</span>\nperson<span class=\"token punctuation\">.</span>name <span class=\"token operator\">=</span> <span class=\"token string\">\"cho\"</span><span class=\"token comment\">//접근자 프로퍼티에 값 대입</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>person<span class=\"token punctuation\">.</span>name<span class=\"token punctuation\">)</span> <span class=\"token comment\">//Cho</span></code></pre></div>\n<br />\n<br />\n<p><strong>출처</strong> </p>\n<ul>\n<li>이소 히로시, 모던 자바스크립트 입문(길벗, 2018)</li>\n<li>\n<p>이선 브라운, 러닝 자바스크립트(한빛미디어,2017) </p>\n</p>\n</li>\n</ul>","frontmatter":{"title":"[JS] 접근자 프로퍼티와 getter, setter","date":"March 07, 2021"}}},"pageContext":{"slug":"/JavaScript/getter_setter/","previous":{"fields":{"slug":"/nodejs/dirname/"},"frontmatter":{"title":"[Node.js] __dirname, path.join","category":"nodejs","draft":false}},"next":{"fields":{"slug":"/Retrospective/2021/Mar_1st/"},"frontmatter":{"title":"[회고] 3월 첫째 주 회고(3/1 ~ 3/7)","category":"retrospective","draft":false}}}},"staticQueryHashes":["3128451518","521680639"]}