path: root/files/ko/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html

---
title: 할당 연산자
slug: >-
  conflicting/Web/JavaScript/Reference/Operators_8d54701de06af40a7c984517cbe87b3e
tags:
  - JavaScript
  - Operator
  - Reference
translation_of: Web/JavaScript/Reference/Operators#Assignment_operators
translation_of_original: Web/JavaScript/Reference/Operators/Assignment_Operators
original_slug: Web/JavaScript/Reference/Operators/Assignment_Operators
---
<div>{{jsSidebar("Operators")}}</div>

<p><strong>할당 연산자</strong>는 오른쪽 피연산자의 값을 왼쪽 피연산자에 할당합니다.</p>

<div>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</div>



<h2 id="개요">개요</h2>

<p>기본 할당연산자는 등호(<code>=</code>)로, 오른쪽 피연산자의 값을 왼쪽 피연산자에 할당합니다. 즉, <code>x = y</code>는 <code>y</code>의 값을 <code>x</code>에 할당힙니다. 다른 할당 연산자는 보통 표준 연산의 축약형으로, 다음 표에서 종류와 예시를 확인할 수 있습니다.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th>이름</th>
   <th>단축 연산자</th>
   <th>의미</th>
  </tr>
  <tr>
   <td><a href="#Assignment">할당</a></td>
   <td><code>x = y</code></td>
   <td><code>x = y</code></td>
  </tr>
  <tr>
   <td><a href="#Addition_assignment">덧셈 할당</a></td>
   <td><code>x += y</code></td>
   <td><code>x = x + y</code></td>
  </tr>
  <tr>
   <td><a href="#Subtraction_assignment">뺄셈 할당</a></td>
   <td><code>x -= y</code></td>
   <td><code>x = x - y</code></td>
  </tr>
  <tr>
   <td><a href="#Multiplication_assignment">곱셈 할당</a></td>
   <td><code>x *= y</code></td>
   <td><code>x = x * y</code></td>
  </tr>
  <tr>
   <td><a href="#Division_assignment">나눗셈 할당</a></td>
   <td><code>x /= y</code></td>
   <td><code>x = x / y</code></td>
  </tr>
  <tr>
   <td><a href="#Remainder_assignment">나머지 연산 할당</a></td>
   <td><code>x %= y</code></td>
   <td><code>x = x % y</code></td>
  </tr>
  <tr>
   <td><a href="#Exponentiation_assignment">지수 연산 할당</a></td>
   <td><code>x **= y</code></td>
   <td><code>x = x ** y</code></td>
  </tr>
  <tr>
   <td><a href="#Left_shift_assignment">왼쪽 시프트 할당</a></td>
   <td><code>x &lt;&lt;= y</code></td>
   <td><code>x = x &lt;&lt; y</code></td>
  </tr>
  <tr>
   <td><a href="#Right_shift_assignment">오른쪽 시프트 할당</a></td>
   <td><code>x &gt;&gt;= y</code></td>
   <td><code>x = x &gt;&gt; y</code></td>
  </tr>
  <tr>
   <td><a href="#Unsigned_right_shift_assignment">부호없는 오른쪽 시프트 할당</a></td>
   <td><code>x &gt;&gt;&gt;= y</code></td>
   <td><code>x = x &gt;&gt;&gt; y</code></td>
  </tr>
  <tr>
   <td><a href="#Bitwise_AND_assignment">비트 AND 할당</a></td>
   <td><code>x &amp;= y</code></td>
   <td><code>x = x &amp; y</code></td>
  </tr>
  <tr>
   <td><a href="#Bitwise_XOR_assignment">비트 XOR 할당</a></td>
   <td><code>x ^= y</code></td>
   <td><code>x = x ^ y</code></td>
  </tr>
  <tr>
   <td><a href="#Bitwise_OR_assignment">비트 OR 할당</a></td>
   <td><code>x |= y</code></td>
   <td><code>x = x | y</code></td>
  </tr>
 </tbody>
</table>

<h2 id="할당"><a name="Assignment">할당</a></h2>

<p>단순 할당 연산자는 값을 변수에 할당합니다. 할당 연산자는 할당의 결과값으로 평가됩니다. 할당 연산자를 연속해서 사용해, 다수의 변수에 하나의 값을 한꺼번에 할당할 수 있습니다. 예제를 참고하세요.</p>

<h4 id="구문">구문</h4>

<pre class="syntaxbox"><strong>연산자:</strong> x = y
</pre>

<h4 id="예제">예제</h4>

<pre class="brush: js">// 다음과 같은 변수를 가정
//  x = 5
//  y = 10
//  z = 25

x = y     // x는 10
x = y = z // x, y, z 모두 25
</pre>

<h3 id="덧셈_할당"><a name="Addition_assignment">덧셈 할당</a></h3>

<p>덧셈 할당 연산자는 변수에 오른쪽 피연산자의 값을 더하고, 그 결과를 변수에 할당합니다. 두 피연산자의 자료형이 덧셈 할당 연산자의 행동을 결정합니다. 덧셈 연산자처럼 합 또는 연결이 가능합니다. 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "덧셈 연산자", "#Addition", 1)}}를 참고하세요.</p>

<h4 id="구문_2">구문</h4>

<pre class="syntaxbox"><strong>연산자:</strong> x += y
<strong>의미:</strong> x = x + y
</pre>

<h4 id="예제_2">예제</h4>

<pre class="brush: js">// 다음과 같은 변수를 가정
//  foo = "foo"
//  bar = 5
//  baz = true


// Number + Number -&gt; 합
bar += 2 // 7

// Boolean + Number -&gt; 합
baz += 1 // 2

// Boolean + Boolean -&gt; 합
baz += false // 1

// Number + String -&gt; 연결
bar += 'foo' // "5foo"

// String + Boolean -&gt; 연결
foo += false // "foofalse"

// String + String -&gt; 연결
foo += 'bar' // "foobar"
</pre>

<h3 id="뺄셈_할당"><a name="Subtraction_assignment">뺄셈 할당</a></h3>

<p>뺄셈 할당 연산자는 변수에서 오른쪽 피연산자의 값을 빼고, 그 결과를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "뺄셈 연산자", "#Subtraction", 1)}}를 참고하세요.</p>

<h4 id="구문_3">구문</h4>

<pre class="syntaxbox"><strong>연산자:</strong> x -= y
<strong>의미:</strong> x = x - y
</pre>

<h4 id="예제_3">예제</h4>

<pre class="brush: js">// 다음과 같은 변수를 가정
//  bar = 5

bar -= 2     // 3
bar -= "foo" // NaN
</pre>

<h3 id="곱셈_할당"><a name="Multiplication_assignment">곱셈 할당</a></h3>

<p>곱셈 할당 연산자는 변수에 오른쪽 피연산자의 값을 곱하고, 그 결과를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "곱셈 연산자", "#Multiplication", 1)}}를 참고하세요.</p>

<h4 id="구문_4">구문</h4>

<pre class="syntaxbox"><strong>연산자:</strong> x *= y
<strong>의미:</strong> x = x * y
</pre>

<h4 id="예제_4">예제</h4>

<pre class="brush: js">// 다음과 같은 변수를 가정
//  bar = 5

bar *= 2     // 10
bar *= "foo" // NaN
</pre>

<h3 id="나눗셈_할당"><a name="Division_assignment">나눗셈 할당</a></h3>

<p>나눗셈 할당 연산자는 변수를 오른쪽 피연산자로 나누고, 그 결과를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "나눗셈 연산자", "#Division", 1)}}를 참고하세요.</p>

<h4 id="구문_5">구문</h4>

<pre class="syntaxbox"><strong>연산자:</strong> x /= y
<strong>의미:</strong> x = x / y
</pre>

<h4 id="예제_5">예제</h4>

<pre class="brush: js">// 다음과 같은 변수를 가정
//  bar = 5

bar /= 2     // 2.5
bar /= "foo" // NaN
bar /= 0     // Infinity
</pre>

<h3 id="나머지_연산_할당"><a name="Remainder_assignment">나머지 연산 할당</a></h3>

<p>나머지 연산 할당은 변수를 오른쪽 피연산자로 나눈 나머지를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "나머지 연산자", "#Remainder", 1)}}를 참고하세요.</p>

<h4 id="구문_6">구문</h4>

<pre class="syntaxbox"><strong>연산자:</strong> x %= y
<strong>의미:</strong> x = x % y
</pre>

<h4 id="예제_6">예제</h4>

<pre class="brush: js">// 다음과 같은 변수를 가정
//  bar = 5

bar %= 2     // 1
bar %= "foo" // NaN
bar %= 0     // NaN
</pre>

<h3 id="거듭제곱_할당"><a id="Exponentiation_assignment" name="Exponentiation_assignment">거듭제곱 할당</a></h3>

<p>거듭제곱 할당 연산자는 변수를 오른쪽 피연산자만큼 거듭제곱한 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "거듭제곱 연산자", "#Exponentiation", 1)}}를 참고하세요.</p>

<h4 id="구문_7">구문</h4>

<pre class="syntaxbox"><strong>연산자:</strong> x **= y
<strong>의미:</strong> x = x ** y
</pre>

<h4 id="예제_7">예제</h4>

<pre class="brush: js">// 다음과 같은 변수를 가정
//  bar = 5

bar **= 2     // 25
bar **= "foo" // NaN</pre>

<h3 id="왼쪽_시프트_할당"><a name="Left_shift_assignment">왼쪽 시프트 할당</a></h3>

<p>왼쪽 시프트 할당 연산자는 변수의 비트를 오른쪽 피연산자의 값만큼 왼쪽으로 이동하고, 그 결과를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", "left shift operator", "#Left_shift", 1)}}를 참고하세요.</p>

<h4 id="구문_8">구문</h4>

<pre class="syntaxbox"><strong>연산자:</strong> x &lt;&lt;= y
<strong>의미:</strong> x = x &lt;&lt; y
</pre>

<h4 id="예제_8">예제</h4>

<pre class="brush: js">var bar = 5; //  (00000000000000000000000000000101)
bar &lt;&lt;= 2; // 20 (00000000000000000000000000010100)
</pre>

<h3 id="오른쪽_시프트_할당"><a name="Right_shift_assignment">오른쪽 시프트 할당</a></h3>

<p>오른쪽 시프트 할당 연산자는 변수의 비트를 오른쪽 피연산자의 값만큼 우측으로 이동하고, 그 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", "right shift operator", "#Right_shift", 1)}}를 참고하세요.</p>

<h4 id="구문_9">구문</h4>

<pre class="syntaxbox"><strong>연산자:</strong> x &gt;&gt;= y
<strong>의미:</strong> x = x &gt;&gt; y
</pre>

<h4 id="예제_9">예제</h4>

<pre class="brush: js">var bar = 5; //   (00000000000000000000000000000101)
bar &gt;&gt;= 2;   // 1 (00000000000000000000000000000001)

var bar -5; //    (-00000000000000000000000000000101)
bar &gt;&gt;= 2;  // -2 (-00000000000000000000000000000010)
</pre>

<h3 id="부호_없는_오른쪽_시프트_할당"><a name="Unsigned_right_shift_assignment">부호 없는 오른쪽 시프트 할당</a></h3>

<p>부호 없는 오른쪽 시프트 할당 연산자는 변수의 비트를 오른쪽 피연산자의 값만큼 우측으로 이동하고, 그 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", " unsigned right shift operator", "#Unsigned_right_shift", 1)}}을 참고하세요.</p>

<h4 id="구문_10">구문</h4>

<pre class="syntaxbox"><strong>연산자:</strong> x &gt;&gt;&gt;= y
<strong>의미:</strong> x = x &gt;&gt;&gt; y
</pre>

<h4 id="예제_10">예제</h4>

<pre class="brush: js">var bar = 5; //   (00000000000000000000000000000101)
bar &gt;&gt;&gt;= 2;  // 1 (00000000000000000000000000000001)

var bar = -5; // (-00000000000000000000000000000101)
bar &gt;&gt;&gt;= 2; // 1073741822 (00111111111111111111111111111110)</pre>

<h3 id="비트_AND_할당"><a name="Bitwise_AND_assignment">비트 AND 할당</a></h3>

<p>비트 AND 할당 연산자는 양쪽 피연산자의 이진 표현을 AND 연산한 후, 그 결과를 변수에 할당합니다. 자세한 내용은{{jsxref("Operators/Bitwise_Operators", "bitwise AND operator", "#Bitwise_AND", 1)}}을 참고하세요.</p>

<h4 id="구문_11">구문</h4>

<pre class="syntaxbox"><strong>연산자:</strong> x &amp;= y
<strong>의미:</strong> x = x &amp; y
</pre>

<h4 id="예제_11">예제</h4>

<pre class="brush: js">var bar = 5;
// 5:     00000000000000000000000000000101
// 2:     00000000000000000000000000000010
bar &amp;= 2; // 0
</pre>

<h3 id="비트_XOR_할당"><a name="Bitwise_XOR_assignment">비트 XOR 할당</a></h3>

<p>비트 XOR 할당 연산자는 양쪽 피연산자의 이진 표현을 XOR 연산한 후, 그 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", "bitwise XOR operator", "#Bitwise_XOR", 1)}}를 참고하세요.</p>

<h4 id="구문_12">구문</h4>

<pre class="syntaxbox"><strong>연산자:</strong> x ^= y
<strong>의미:</strong> x = x ^ y
</pre>

<h4 id="예제_12">예제</h4>

<pre class="brush: js">var bar = 5;
bar ^= 2; // 7
// 5: 00000000000000000000000000000101
// 2: 00000000000000000000000000000010
// -----------------------------------
// 7: 00000000000000000000000000000111
</pre>

<h3 id="비트_OR_할당"><a name="Bitwise_OR_assignment">비트 OR 할당</a></h3>

<p>비트 OR 할당 연산자는 양쪽 피연산자의 이진 표현을 OR 연산한 후, 그 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", "bitwise OR operator", "#Bitwise_OR", 1)}}를 참고하세요.</p>

<h4 id="문법">문법</h4>

<pre class="syntaxbox"><strong>연산자:</strong> x |= y
<strong>의미:</strong> x = x | y
</pre>

<h4 id="예제_13">예제</h4>

<pre class="brush: js">var bar = 5;
bar |= 2; // 7
// 5: 00000000000000000000000000000101
// 2: 00000000000000000000000000000010
// -----------------------------------
// 7: 00000000000000000000000000000111
</pre>

<h2 id="예제_14">예제</h2>

<h3 id="다른_할당_연산자를_갖는_왼쪽_피연산자">다른 할당 연산자를 갖는 왼쪽 피연산자</h3>

<p>드물게, 할당 연산자(예: <code>x += y</code>)와 그 의미를 나타낸 표현(<code>x = x + y</code>)이 동일하지 않은 경우가 있습니다. 할당 연산자의 왼쪽 피연산자가 다른 할당 연산자를 포함할 때, 왼쪽 피연산자는 한 번만 평가됩니다. 예를 들면 다음과 같습니다.</p>

<pre class="brush: js">a[i++] += 5         // i는 한 번만 평가됨
a[i++] = a[i++] + 5 // i는 두 번 평가됨
</pre>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>



<p>{{Compat("javascript.operators.assignment")}}</p>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">산술 연산자</a></li>
</ul>