{"data":{"site":{"siteMetadata":{"title":"lastrites2018","author":"lastrites2018","siteUrl":"https://lastrites2018.netlify.com","comment":{"disqusShortName":"","utterances":"lastrites2018/gatsby-first-blog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"8c702e7b-55a5-5198-9295-988d81d43f3d","excerpt":"타입 변환 삼항 연산자ternary operator 조건 ? 조건이 true일때 반환할 값 : 조건이 false일때 반환할 값 단축 평가 Short-Circuit Evalution 논리 연산자가 Boolean 값과 함께 사용하지 않을 경우, Boolean 값을 반환하지 않을 수 있다. 이는 논리 연산자가 피연산자 중 하나를 반환하기 때문이다. 논리 연산자는 다음의 규칙을 따라 “단축 평가”로 검사된다. 평가식 평가 결과 true  | |  anything true false…","html":"<h2 id=\"타입-변환\"><a href=\"#%ED%83%80%EC%9E%85-%EB%B3%80%ED%99%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<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 변수 x의 값을 숫자 타입으로 변환</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'Number : '</span> <span class=\"token operator\">+</span> <span class=\"token function\">Number</span><span class=\"token punctuation\">(</span>x<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// 0</span>\n\n<span class=\"token comment\">// 변수 x의 값을 문자열 타입으로 변환</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'String : '</span> <span class=\"token operator\">+</span> <span class=\"token function\">String</span><span class=\"token punctuation\">(</span>x<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// 'false'</span>\n\n<span class=\"token comment\">// 변수 x의 값을 불리언 타입으로 변환</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'Boolean: '</span> <span class=\"token operator\">+</span> <span class=\"token function\">Boolean</span><span class=\"token punctuation\">(</span>x<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// false</span></code></pre></div>\n<h2 id=\"삼항-연산자ternary-operator\"><a href=\"#%EC%82%BC%ED%95%AD-%EC%97%B0%EC%82%B0%EC%9E%90ternary-operator\" aria-label=\"삼항 연산자ternary operator 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>삼항 연산자ternary operator</h2>\n<p>조건 ? 조건이 true일때 반환할 값 : 조건이 false일때 반환할 값</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> condition <span class=\"token operator\">=</span> <span class=\"token boolean\">true</span>\n<span class=\"token keyword\">var</span> result <span class=\"token operator\">=</span> condition <span class=\"token operator\">?</span> <span class=\"token string\">'true'</span> <span class=\"token punctuation\">:</span> <span class=\"token string\">'false'</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>result<span class=\"token punctuation\">)</span> <span class=\"token comment\">// 'true'</span></code></pre></div>\n<h2 id=\"단축-평가-short-circuit-evalution\"><a href=\"#%EB%8B%A8%EC%B6%95-%ED%8F%89%EA%B0%80-short-circuit-evalution\" aria-label=\"단축 평가 short circuit evalution 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>단축 평가 Short-Circuit Evalution</h2>\n<p>논리 연산자가 Boolean 값과 함께 사용하지 않을 경우, Boolean 값을 반환하지 않을 수 있다. 이는 논리 연산자가 피연산자 중 하나를 반환하기 때문이다. 논리 연산자는 다음의 규칙을 따라 “단축 평가”로 검사된다.</p>\n<table>\n<thead>\n<tr>\n<th align=\"center\">평가식</th>\n<th align=\"center\">평가 결과</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td align=\"center\">true || anything</td>\n<td align=\"center\">true</td>\n</tr>\n<tr>\n<td align=\"center\">false || anything</td>\n<td align=\"center\">anything</td>\n</tr>\n<tr>\n<td align=\"center\">true &#x26;&#x26; anything</td>\n<td align=\"center\">anything</td>\n</tr>\n<tr>\n<td align=\"center\">false &#x26;&#x26; anything</td>\n<td align=\"center\">false</td>\n</tr>\n</tbody>\n</table>\n<p>Boolean 값으로 평가하기 위해 참조하여야 할 곳까지 진행한 후, 평가를 중지하게 된 계기가 된 값을 반환한다.</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 string\">'Cat'</span> <span class=\"token operator\">&amp;&amp;</span> <span class=\"token string\">'Dog'</span> <span class=\"token comment\">// true &amp;&amp; true returns 'Dog'</span></code></pre></div>\n<p>‘Cat’은 true로 평가되므로 연산 결과를 알기 위해 ‘Dog’까지 평가해보아야 하고 따라서 평가를 중지하게 된 계기가 된 값(‘Dog’)을 반환한다.</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 boolean\">false</span> <span class=\"token operator\">&amp;&amp;</span> <span class=\"token string\">'Dog'</span> <span class=\"token comment\">// false &amp;&amp; true returns false</span></code></pre></div>\n<p>더 이상 진행하지 않아도 결과를 반환할 수 있기에 평가는 중지되고 평가를 중지하게 된 계기가 된 값인 false가 반환.</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 string\">'Cat'</span> <span class=\"token operator\">||</span> <span class=\"token string\">'Dog'</span> <span class=\"token comment\">// true &amp;&amp; true returns 'Cat'</span></code></pre></div>\n<p>‘Cat’이 true로 평가되었기 때문에 평가는 중지되고 Cat이 반환.</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> o1 <span class=\"token operator\">=</span> <span class=\"token string\">'Cat'</span> <span class=\"token operator\">||</span> <span class=\"token string\">'Dog'</span>  <span class=\"token comment\">// true  || true returns Cat</span>\n<span class=\"token keyword\">var</span> o2 <span class=\"token operator\">=</span> <span class=\"token boolean\">false</span> <span class=\"token operator\">||</span> <span class=\"token string\">'Cat'</span>  <span class=\"token comment\">// false || true returns Cat</span>\n<span class=\"token keyword\">var</span> o3 <span class=\"token operator\">-</span> <span class=\"token string\">'Cat'</span> <span class=\"token operator\">||</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// true  || false returns Cat</span>\n\n<span class=\"token comment\">// &amp;&amp;(논리곱) 연산자</span>\n<span class=\"token keyword\">var</span> a1 <span class=\"token operator\">=</span> <span class=\"token string\">'Cat'</span> <span class=\"token operator\">&amp;&amp;</span> <span class=\"token string\">'Dog'</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// true &amp; true returns Dog</span>\n<span class=\"token keyword\">var</span> a2 <span class=\"token operator\">=</span> <span class=\"token boolean\">false</span> <span class=\"token operator\">&amp;&amp;</span> <span class=\"token string\">'Cat'</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// false &amp;&amp; true returns false</span>\n<span class=\"token keyword\">var</span> a3 <span class=\"token operator\">=</span> <span class=\"token string\">'Cat'</span> <span class=\"token operator\">&amp;&amp;</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// true &amp;&amp; false returns false</span></code></pre></div>\n<h2 id=\"타입-연산자-type-operators\"><a href=\"#%ED%83%80%EC%9E%85-%EC%97%B0%EC%82%B0%EC%9E%90-type-operators\" aria-label=\"타입 연산자 type operators 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>타입 연산자 Type Operators</h2>\n<table>\n<thead>\n<tr>\n<th>Operator</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>typeof</td>\n<td>피연산자의 데이터 타입(자료형)을 문자열로 반환한다. null과 배열의 경우 object, 함수의 경우 function를 반환하는 것에 유의하여야 한다.</td>\n</tr>\n<tr>\n<td>instanceof</td>\n<td>객체가 동일 객체형의 인스턴스이면 <code class=\"language-text\">true</code>를 반환한다.</td>\n</tr>\n</tbody>\n</table>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">typeof</span> undefined <span class=\"token comment\">//undefined</span>\n<span class=\"token keyword\">typeof</span> <span class=\"token keyword\">null</span> <span class=\"token comment\">// object(설계적 결함)</span>\n<span class=\"token keyword\">typeof</span> undeclared <span class=\"token comment\">//undefined(설계적 결함)</span></code></pre></div>\n<h2 id=\"\"><a href=\"#\" 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>!!의 역할은 피연산자를 Boolean 값으로 변환하는 것.</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token operator\">!</span><span class=\"token operator\">!</span><span class=\"token number\">1</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// true</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token operator\">!</span><span class=\"token operator\">!</span><span class=\"token number\">0</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><span class=\"token operator\">!</span><span class=\"token operator\">!</span><span class=\"token string\">'string'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// true</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token operator\">!</span><span class=\"token operator\">!</span><span class=\"token string\">''</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><span class=\"token operator\">!</span><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><span class=\"token operator\">!</span><span class=\"token operator\">!</span>undefined<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// false</span>\n\n<span class=\"token function\">객체</span><span class=\"token punctuation\">(</span>배열 포함<span class=\"token punctuation\">)</span>의 경우 빈 객체라도 존재하기만 하면 <span class=\"token boolean\">true</span>로 변환된다<span class=\"token punctuation\">.</span>\n즉<span class=\"token punctuation\">,</span> 객체나 배열이 undefined<span class=\"token punctuation\">,</span> <span class=\"token keyword\">null</span>이 아니면 truthy value로 취급된다<span class=\"token punctuation\">.</span>\n객체의 존재 확인 후 그 결과를 반환해야 하는 경우<span class=\"token punctuation\">,</span> <span class=\"token operator\">!</span><span class=\"token operator\">!</span>를 사용하면 강제로 피연산자를 Boolean으로 형 변환할 수 있다<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 operator\">!</span><span class=\"token operator\">!</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// true</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token operator\">!</span><span class=\"token operator\">!</span><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// true</span></code></pre></div>","frontmatter":{"title":"poiemaweb.com 연산자","date":"August 28, 2018"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/til/20180828 poiemaweb.com 연산자/","previous":{"fields":{"slug":"/til/20180827-0901 pre immersive 사전학습/"},"frontmatter":{"title":"pre immersive 사전학습","category":"TIL"}},"next":{"fields":{"slug":"/til/20180831 Asynchronous call/"},"frontmatter":{"title":"Asynchronous call","category":"TIL"}}}}