연산

1. 산술 연산

• 더하기 연산을 제외한 나머지 산술연산은 숫자형이 아닌 경우 자동으로 타입을 변환하여 연산을 수행

  let x = 10;
  let y = 3;
  console.log(x + y);
  
  console.log(x - y);
  
  console.log(x * y);
  
  console.log(x / y);
  
  console.log(x % y);
  
  console.log(x ** y);
  let a = 30;
  
  let b = '20';
  console.log(a + b); //3020

1.1. 산술 할당 연산

- 산술 연산과 동시에 변수에 값을 할당하는 연산자
x += 10; // 10 (x = x + 10;)
x -= 2; // 8
x *= 3; // 24
x /= 2; // 12
x %= 5; // 2 (나머지)
x **= 2; // 4 (제곱)
```</code></pre>
<h3 id="12-증감-연산자">1.2. 증감 연산자</h3>
<pre><code class="language-null">```jsx
let x = 5;

console.log(x++); //5 (후의증가연산자, 증가하기전의 값 출력)
console.log(x);   // 변수 x의 값은 이제 6
console.log(++x); //7 (전위증가연산자, 증가된 후의 값 출력)

let y = 10;

console.log(y--); // 10
console.log(--y); // 8

```</code></pre>
<h2 id="2-비교-연산">2. 비교 연산</h2>
<ul>
<li>true 또는 false<br>
</li>
</ul>
<h3 id="21-대소관계-연산자">2.1. 대소관계 연산자</h3>
<pre><code class="language-null">```jsx
let x = 20;
let y = 10;

console.log(x &gt; y); // true
console.log(x &lt; y); // false

console.log(x &gt;= y); // true
console.log(x &lt;= y); // false

'apple' &lt; 'banana';
'10' &lt; '2';
//두 피연산자가 모두 문자열인 경우 사전순으로 비교. 
```</code></pre>
<h3 id="22-동등--부등">2.2. 동등(==) / 부등(!=)</h3>
<pre><code class="language-null">- **타입 변환**을 수행한 후 비교

```jsx
let x = 20;
let y = 10;

console.log(x == 20);  // true
console.log(x == '20');  // true

console.log(x != y);  // true
console.log(y != '10');  // false

let obj1 = {a: 1, b: 2}
let obj2 = obj1;
let obj3 = {a: 1, b: 2}
console.log(obj1 == obj2); // true
console.log(obj1 == obj3); // false
console.log([] == []); // false
```</code></pre>
<h3 id="자동-형-변환">자동 형 변환</h3>
<pre><code class="language-null">1. 원시값끼리 비교할 때는, 숫자로 변환한 후 비교

```jsx
console.log(0 == null); // false
console.log(null == null); // true
console.log(undefined == null); // true

NaN의 경우: 자기 자신을 포함한 어떤 값과도 동등하거나 일치하지 않음.
console.log(NaN == NaN); // false

// 값이 NaN인지 판별하는 법
console.log(isNaN('hello')); // true
console.log(Number.isNaN('hello'); // false


null과 undefined 끼리 비교할 경우에만 true를 반환.

console.log(0 == null); // false
console.log(null == null); // true
console.log(undefined == null); // true

객체와 원시타입을 비교할 때는, 객체를 원시타입에 맞춰 변환.

console.log([1, 2] == '1,2'); // true
console.log([] == 0); // true
console.log([] == true); // false
```</code></pre>
<h3 id="23-일치---불일치">2.3. 일치 (===) / 불일치(!==)</h3>
<ul>
<li>타입 변환을 수행하지 않는 엄격한 비교</li>
</ul>
<pre><code class="language-jsx"><span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token number">20</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> y <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x <span class="token operator">===</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x <span class="token operator">===</span> <span class="token string">'20'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// **false**</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x <span class="token operator">!==</span> y<span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>y <span class="token operator">!==</span> <span class="token string">'10'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// true</span></code></pre>
<h2 id="3-논리연산">3. 논리연산</h2>
<h3 id="31-논리곱-and">3.1. 논리곱 AND(&amp;&amp;)</h3>
<p> 모든 값이 Truthy 하다면 가장 마지막 값을 반환하고, Falsy한 값이 있다면 가장 처음 만나는 falsy한 값을 반환 (단축평가)</p>
<pre><code class="language-jsx"><span class="token keyword">let</span> age <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>age <span class="token operator">&gt;</span> <span class="token number">5</span> <span class="token operator">&amp;&amp;</span> age <span class="token operator">&lt;</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"licat"</span> <span class="token operator">&amp;&amp;</span> <span class="token string">"wade"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// wade</span>
<span class="token comment">// "licat"은 문자열이며, 모든 비어 있지 않은 문자열은 truthy한 값으로 간주</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"licat"</span> <span class="token operator">&amp;&amp;</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span> <span class="token string">"wade"</span> <span class="token operator">&amp;&amp;</span> <span class="token number">NaN</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 0</span></code></pre>
<h3 id="32-논리합-or-">3.2. 논리합 OR (||)</h3>
<p>적어도 한 개 이상이 true이면 true를 반환</p>
<pre><code class="language-jsx">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"licat"</span> <span class="token operator">||</span> <span class="token string">"wade"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// licat</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">0</span> <span class="token operator">||</span> <span class="token number">NaN</span> <span class="token operator">||</span> <span class="token string">"licat"</span> <span class="token operator">||</span> <span class="token string">"wade"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// licat</span>

<span class="token keyword">let</span> name <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">prompt</span><span class="token punctuation">(</span><span class="token string">'이름을 입력하세요'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
name <span class="token operator">=</span> name <span class="token operator">||</span> <span class="token string">'사용자'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">님 환영합니다!</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//어떤 값이든 falsy한 값을 기본값으로 설정</span></code></pre>
<h3 id="33-논리-부정-not-">3.3. 논리 부정 NOT (!)</h3>
<p>true를 false로, false를 true를 변환</p>
<pre><code class="language-jsx">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 boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
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 boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

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 string">'hello'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
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 string">'hello'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 형 변환</span></code></pre>
<h3 id="4-nullish-연산자">4. nullish 연산자(??)</h3>
<ul>
<li>undefined이나 null이 아닌 값을 반환</li>
<li>첫 번째 truthy를 반환하는 OR 연산자와 달리 nullish 연산자는 첫 번째로 ‘값이 할당된’ 피연산자를 반환</li>
</ul>
<pre><code class="language-jsx"><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token number">23</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a <span class="token operator">?</span><span class="token operator">?</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//23</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b <span class="token operator">?</span><span class="token operator">?</span> a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//23</span></code></pre>
<pre><code class="language-jsx"><span class="token keyword">let</span> name <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">prompt</span><span class="token punctuation">(</span><span class="token string">'이름을 입력하세요'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
name <span class="token operator">=</span> name <span class="token operator">?</span><span class="token operator">?</span> <span class="token string">'사용자'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">님! 안녕하세요.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span> 
<span class="token comment">//null 또는 undefined일 때만 기본값을 설정</span></code></pre>
<h3 id="5-옵셔널-체이닝">5. 옵셔널 체이닝(?.)</h3>
<ul>
<li><code>null</code>이거나 <code>undefined</code>인 경우에 발생하는 <code>TypeError</code> 방지</li>
</ul>
<pre><code class="language-jsx">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>user1<span class="token operator">?</span><span class="token punctuation">.</span>address<span class="token operator">?</span><span class="token punctuation">.</span>city <span class="token operator">?</span><span class="token operator">?</span> <span class="token string">"Jeju"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//user1 객체가 존재하고 그 안에 address 속성이 있으며, 그 안에 city 속성이 있으면 해당 city 값을 출력하고, 그렇지 않으면 "Jeju"를 출력</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>user1<span class="token punctuation">.</span>greeting<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 punctuation">;</span>
<span class="token comment">//user1 객체가 존재하고, 그 안에 greeting 메서드가 존재하면 해당 메서드를 호출. 그렇지 않으면 undefined를 반환</span></code></pre></div>