aboutsummaryrefslogtreecommitdiff
path: root/files/ko/web/javascript/reference/operators
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:17 -0500
commitda78a9e329e272dedb2400b79a3bdeebff387d47 (patch)
treee6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/ko/web/javascript/reference/operators
parent1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff)
downloadtranslated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz
translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2
translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip
initial commit
Diffstat (limited to 'files/ko/web/javascript/reference/operators')
-rw-r--r--files/ko/web/javascript/reference/operators/addition/index.html77
-rw-r--r--files/ko/web/javascript/reference/operators/arithmetic_operators/index.html290
-rw-r--r--files/ko/web/javascript/reference/operators/assignment_operators/index.html394
-rw-r--r--files/ko/web/javascript/reference/operators/async_function/index.html96
-rw-r--r--files/ko/web/javascript/reference/operators/await/index.html137
-rw-r--r--files/ko/web/javascript/reference/operators/bitwise_operators/index.html540
-rw-r--r--files/ko/web/javascript/reference/operators/class/index.html100
-rw-r--r--files/ko/web/javascript/reference/operators/comma_operator/index.html91
-rw-r--r--files/ko/web/javascript/reference/operators/comparison_operators/index.html215
-rw-r--r--files/ko/web/javascript/reference/operators/conditional_operator/index.html193
-rw-r--r--files/ko/web/javascript/reference/operators/delete/index.html282
-rw-r--r--files/ko/web/javascript/reference/operators/destructuring_assignment/index.html409
-rw-r--r--files/ko/web/javascript/reference/operators/equality/index.html123
-rw-r--r--files/ko/web/javascript/reference/operators/expression_closures/index.html79
-rw-r--r--files/ko/web/javascript/reference/operators/function/index.html154
-rw-r--r--files/ko/web/javascript/reference/operators/function_star_/index.html85
-rw-r--r--files/ko/web/javascript/reference/operators/generator_comprehensions/index.html174
-rw-r--r--files/ko/web/javascript/reference/operators/grouping/index.html92
-rw-r--r--files/ko/web/javascript/reference/operators/in/index.html188
-rw-r--r--files/ko/web/javascript/reference/operators/index.html304
-rw-r--r--files/ko/web/javascript/reference/operators/instanceof/index.html161
-rw-r--r--files/ko/web/javascript/reference/operators/new.target/index.html93
-rw-r--r--files/ko/web/javascript/reference/operators/new/index.html187
-rw-r--r--files/ko/web/javascript/reference/operators/nullish_coalescing_operator/index.html161
-rw-r--r--files/ko/web/javascript/reference/operators/object_initializer/index.html302
-rw-r--r--files/ko/web/javascript/reference/operators/optional_chaining/index.html187
-rw-r--r--files/ko/web/javascript/reference/operators/pipeline_operator/index.html76
-rw-r--r--files/ko/web/javascript/reference/operators/property_accessors/index.html153
-rw-r--r--files/ko/web/javascript/reference/operators/remainder/index.html73
-rw-r--r--files/ko/web/javascript/reference/operators/spread_syntax/index.html255
-rw-r--r--files/ko/web/javascript/reference/operators/super/index.html176
-rw-r--r--files/ko/web/javascript/reference/operators/this/index.html398
-rw-r--r--files/ko/web/javascript/reference/operators/typeof/index.html227
-rw-r--r--files/ko/web/javascript/reference/operators/void/index.html122
-rw-r--r--files/ko/web/javascript/reference/operators/yield/index.html182
-rw-r--r--files/ko/web/javascript/reference/operators/yield_star_/index.html164
-rw-r--r--files/ko/web/javascript/reference/operators/논리_연산자(logical_operators)/index.html249
-rw-r--r--files/ko/web/javascript/reference/operators/배열/index.html200
-rw-r--r--files/ko/web/javascript/reference/operators/연산자_우선순위/index.html462
39 files changed, 7851 insertions, 0 deletions
diff --git a/files/ko/web/javascript/reference/operators/addition/index.html b/files/ko/web/javascript/reference/operators/addition/index.html
new file mode 100644
index 0000000000..0a624fdd16
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/addition/index.html
@@ -0,0 +1,77 @@
+---
+title: Addition (+)
+slug: Web/JavaScript/Reference/Operators/Addition
+translation_of: Web/JavaScript/Reference/Operators/Addition
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>증가 연산자<sup>addition operator</sup> (<code>+</code>)는 숫자 또는 여러 문자열의 더합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-addition.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var> + <var>y</var>
+</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Numeric_addition">Numeric addition</h3>
+
+<pre class="brush: js notranslate">// Number + Number -&gt; addition
+1 + 2 // 3
+
+// Boolean + Number -&gt; addition
+true + 1 // 2
+
+// Boolean + Boolean -&gt; addition
+false + false // 0
+</pre>
+
+<h3 id="String_concatenation">String concatenation</h3>
+
+<pre class="brush: js notranslate">// String + String -&gt; concatenation
+'foo' + 'bar' // "foobar"
+
+// Number + String -&gt; concatenation
+5 + 'foo' // "5foo"
+
+// String + Boolean -&gt; concatenation
+'foo' + false // "foofalse"</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specification</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-addition-operator-plus', 'Addition operator')}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.operators.addition")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division">Division operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder">Remainder operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Decrement">Decrement operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/arithmetic_operators/index.html b/files/ko/web/javascript/reference/operators/arithmetic_operators/index.html
new file mode 100644
index 0000000000..8b2b274aa6
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/arithmetic_operators/index.html
@@ -0,0 +1,290 @@
+---
+title: 산술 연산자
+slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators
+tags:
+ - JavaScript
+ - Operator
+ - Reference
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><span class="seoSummary"><strong>산술 연산자는</strong> 숫자 값(리터럴 또는 변수)을 피연산자로 받아 하나의 숫자 값을 반환합니다.</span> 표준 산술 연산자는 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/)입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}</div>
+
+
+
+<h2 id="덧셈"><a id="Addition" name="Addition">덧셈 (+)</a></h2>
+
+<p>덧셈 연산자는 숫자 피연산자를 더한 값, 또는 문자열을 연결한 값을 생성합니다.</p>
+
+<h3 id="구문">구문</h3>
+
+<pre class="syntaxbox"><strong>연산자:</strong> x + y
+</pre>
+
+<h3 id="예제">예제</h3>
+
+<pre class="brush: js">// Number + Number -&gt; 합
+1 + 2 // 3
+
+// Boolean + Number -&gt; 합
+true + 1 // 2
+
+// Boolean + Boolean -&gt; 합
+false + false // 0
+
+// Number + String -&gt; 연결
+5 + "foo" // "5foo"
+
+// String + Boolean -&gt; 연결
+"foo" + false // "foofalse"
+
+// String + String -&gt; 연결
+"foo" + "bar" // "foobar"
+</pre>
+
+<h2 id="뺄셈_-"><a id="Subtraction" name="Subtraction">뺄셈 (-)</a></h2>
+
+<p>뺄셈 연산자는 두 개의 피연산자를 뺀 값을 생성합니다.</p>
+
+<h3 id="구문_2">구문</h3>
+
+<pre class="syntaxbox"><strong>연산자:</strong> x - y
+</pre>
+
+<h3 id="예제_2">예제</h3>
+
+<pre class="brush: js">5 - 3 // 2
+3 - 5 // -2
+"foo" - 3 // NaN</pre>
+
+<h2 id="나눗셈"><a id="Division" name="Division">나눗셈 (/)</a></h2>
+
+<p>나눗셈 연산자는 왼쪽 피연산자를 피제수로, 오른쪽 피연산자를 제수로 한 몫을 생성합니다.</p>
+
+<h3 id="구문_3">구문</h3>
+
+<pre class="syntaxbox"><strong>연산자:</strong> x / y
+</pre>
+
+<h3 id="예제_3">예제</h3>
+
+<pre class="brush: js">1 / 2 // JavaScript에선 0.5
+1 / 2 // Java에선 0
+// (양쪽 피연산자 모두 명시적인 부동소수점 숫자가 아님)
+
+1.0 / 2.0 // JavaScript와 Java 둘 다 0.5
+
+2.0 / 0 // JavaScript에서 Infinity
+2.0 / 0.0 // 동일하게 Infinity
+2.0 / -0.0 // JavaScript에서 -Infinity</pre>
+
+<h2 id="곱셈_*"><a id="Multiplication" name="Multiplication">곱셈 (*)</a></h2>
+
+<p>곱셈 연산자는 두 연산자의 곱을 생성합니다.</p>
+
+<h3 id="구문_4">구문</h3>
+
+<pre class="syntaxbox"><strong>연산자:</strong> x * y
+</pre>
+
+<h3 id="예제_4">예제</h3>
+
+<pre class="brush: js">2 * 2 // 4
+-2 * 2 // -4
+Infinity * 0 // NaN
+Infinity * Infinity // Infinity
+"foo" * 2 // NaN
+</pre>
+
+<h2 id="나머지"><a id="Remainder" name="Remainder">나머지 (%)</a></h2>
+
+<p>나머지 연산자는 왼쪽 피연산자를 오른쪽 피연산자로 나눴을 때의 나머지를 반환합니다. 결과는 항상 피제수의 부호를 따라갑니다.</p>
+
+<h3 id="구문_5">구문</h3>
+
+<pre class="syntaxbox"><strong>연산자:</strong> var1 % var2
+</pre>
+
+<h3 id="예제_5">예제</h3>
+
+<pre class="brush: js">12 % 5 // 2
+-1 % 2 // -1
+NaN % 2 // NaN
+1 % 2 // 1
+2 % 3 // 2
+-4 % 2 // -0
+5.5 % 2 // 1.5
+</pre>
+
+<h2 id="거듭제곱_**"><a name="Exponentiation">거듭제곱 (**)</a></h2>
+
+<p>거듭제곱 연산자는 첫 번째 피연산자를 밑으로, 두 번째 피연산자를 지수로 한 값을 생성합니다. 즉, <code>var1</code>과 <code>var2</code>가 변수일 때, <code>var1<sup>var2</sup></code>의 값을 생성합니다. 거듭제곱 연산자는 우결합성을 가집니다. 따라서 <code>a ** b ** c</code>는 <code>a ** (b ** c)</code>와 같습니다.</p>
+
+<h3 id="구문_6">구문</h3>
+
+<pre class="syntaxbox"><strong>연산자:</strong> var1 ** var2
+</pre>
+
+<h3 id="참고">참고</h3>
+
+<p>PHP와 Python 등 거듭제곱 연산자를 가진 대부분의 언어는 거듭제곱 연산자의 우선순위가 +와 - 등 단항 연산자보다 높습니다. 그러나 Bash는 단항 연산자가 거듭제곱 연산자보다 우선순위가 높은 등 일부 예외도 있습니다. JavaScript는 단항 연산자(<code>+/-/~/!/delete/void/typeof</code>)를 왼쪽 피연산자 앞에 배치할 수 없으므로, 모호한 표현도 작성할 수 없습니다.</p>
+
+<pre class="brush: js">-2 ** 2;
+// Bash에서 4, 다른 언어에서는 -4.
+// 모호한 표현이므로 JavaScript에서는 유효하지 않음
+
+
+-(2 ** 2);
+// JavaScript에서 -4, 작성자의 의도가 명확함
+</pre>
+
+<h3 id="예제_6">예제</h3>
+
+<pre class="brush: js">2 ** 3 // 8
+3 ** 2 // 9
+3 ** 2.5 // 15.588457268119896
+10 ** -1 // 0.1
+NaN ** 2 // NaN
+
+2 ** 3 ** 2 // 512
+2 ** (3 ** 2) // 512
+(2 ** 3) ** 2 // 64
+</pre>
+
+<p>결과의 부호를 뒤집으려면 다음과 같이 작성합니다.</p>
+
+<pre class="brush: js">-(2 ** 2) // -4
+</pre>
+
+<p>거듭제곱의 밑을 음수로 강제하려면 다음과 같이 작성합니다.</p>
+
+<pre class="brush: js">(-2) ** 2 // 4
+</pre>
+
+<div class="note">
+<p><strong>참고:</strong> JavaScript는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">비트 연산자 ^ (논리 XOR)</a>도 가지고 있습니다. <code>**</code>와 <code>^</code>는 다릅니다. (예 : <code>2 ** 3 === 8</code>이지만 <code>2 ^ 3 === 1</code>)</p>
+</div>
+
+<h2 id="증가"><a id="Increment" name="Increment">증가 (++)</a></h2>
+
+<p>증가 연산자는 피연산자를 증가(1을 덧셈)시키고, 그 값을 반환합니다.</p>
+
+<ul>
+ <li>피연산자 뒤에 붙여(예: <code>x++</code>) 접미사로 사용한 경우 증가하기 전의 값을 반환합니다.</li>
+ <li>피연산자 앞에 붙여(예: <code>++x</code>) 접두사로 사용한 경우 증가한 후의 값을 반환합니다.</li>
+</ul>
+
+<h3 id="구문_7">구문</h3>
+
+<pre class="syntaxbox"><strong>연산자:</strong> x++ or ++x
+</pre>
+
+<h3 id="예제_7">예제</h3>
+
+<pre class="brush: js">// 접미사
+var x = 3;
+y = x++; // y = 3, x = 4
+
+// 접두사
+var a = 2;
+b = ++a; // a = 3, b = 3
+</pre>
+
+<h2 id="감소_--"><a id="Decrement" name="Decrement">감소 (--)</a></h2>
+
+<p>감소 연산자는 피연산자를 감소(1을 뺄셈)시키고, 그 값을 반환합니다.</p>
+
+<ul>
+ <li>피연산자 뒤에 붙여(예: <code>x--</code>) 접미사로 사용한 경우 감소하기 전의 값을 반환합니다.</li>
+ <li>피연산자 앞에 붙여(예: <code>--x</code>) 접두사로 사용한 경우 감소한 후의 값을 반환합니다.</li>
+</ul>
+
+<h3 id="구문_8">구문</h3>
+
+<pre class="syntaxbox"><strong>연산자:</strong> x-- or --x
+</pre>
+
+<h3 id="예제_8">예제</h3>
+
+<pre class="brush: js">// 접미사
+var x = 3;
+y = x--; // y = 3, x = 2
+
+// 접두사
+var a = 2;
+b = --a; // a = 1, b = 1
+</pre>
+
+<h2 id="단항_부정_-"><a name="Unary_negation">단항 부정 (-)</a></h2>
+
+<p>단항 부정 연산자는 피연산자의 앞에 위치하며 부호를 뒤집습니다.</p>
+
+<h3 id="구문_9">구문</h3>
+
+<pre class="syntaxbox"><strong>연산자:</strong> -x
+</pre>
+
+<h3 id="예제_9">예제</h3>
+
+<pre class="brush: js">var x = 3;
+y = -x; // y = -3, x = 3
+
+// 단항 부정 연산자는 숫자가 아닌 값을 숫자로 변환함
+var x = "4";
+y = -x; // y = -4</pre>
+
+<h2 id="단항_양부호"><a name="Unary_plus">단항 양부호 (+)</a></h2>
+
+<p>단항 양부호 연산자는 피연산자의 앞에 위치하며 피연산자의 값 그대로 평가되지만, 값이 숫자가 아닐 경우 숫자로 변환을 시도합니다. 단항 부정(-) 연산자도 숫자가 아닌 값을 변환할 수 있지만, 단항 양부호가 속도도 제일 빠르고 다른 연산도 수행하지 않으므로 선호해야 할 방법입니다. 문자열로 표현한 정수 및 부동소수점 실수, 문자열이 아닌 <code>true</code>, <code>false</code>, <code>null</code>도 변환할 수 있습니다. 10진수와 (앞에 "0x"가 붙은) 16진수 정수 모두 지원합니다. 음수도 지원하지만 16진수 음수에는 사용할 수 없습니다. 어떤 값을 분석할 수 없으면 {{jsxref("NaN")}}으로 평가됩니다.</p>
+
+<h3 id="구문_10">구문</h3>
+
+<pre class="syntaxbox"><strong>연산자:</strong> +x
+</pre>
+
+<h3 id="예제_10">예제</h3>
+
+<pre class="brush: js">+3 // 3
++"3" // 3
++true // 1
++false // 0
++null // 0
++function(val) { return val } // NaN
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specification</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-additive-operators', 'Additive operators')}}</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-postfix-expressions', 'Postfix expressions')}}</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-11.5', 'Multiplicative operators')}}</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-11.4', 'Unary operator')}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.operators.arithmetic")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">할당 연산자</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/assignment_operators/index.html b/files/ko/web/javascript/reference/operators/assignment_operators/index.html
new file mode 100644
index 0000000000..d7f195c803
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/assignment_operators/index.html
@@ -0,0 +1,394 @@
+---
+title: 할당 연산자
+slug: Web/JavaScript/Reference/Operators/Assignment_Operators
+tags:
+ - JavaScript
+ - Operator
+ - Reference
+translation_of: 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>
diff --git a/files/ko/web/javascript/reference/operators/async_function/index.html b/files/ko/web/javascript/reference/operators/async_function/index.html
new file mode 100644
index 0000000000..d1ec146ca4
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/async_function/index.html
@@ -0,0 +1,96 @@
+---
+title: async function 표현식
+slug: Web/JavaScript/Reference/Operators/async_function
+translation_of: Web/JavaScript/Reference/Operators/async_function
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong><code>async function</code></strong> 키워드는 표현식 내에서 <code>async</code> 함수를 정의하기 위해 사용됩니다.</p>
+
+<p>또한 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function" title="The async function keyword can be used to define async functions inside expressions.">async function statement</a>을 사용하여 async 함수를 정의할 수 있습니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">async function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { <em>statements </em>}</pre>
+
+<p>ES2015에서와 같이 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>를 사용해도 됩니다.</p>
+
+<h3 id="인수">인수</h3>
+
+<dl>
+ <dt><code><var>name</var></code></dt>
+ <dd>함수 이름. 생략가능하며 이경우함수는 <em>anonymous</em> 형식임  이름은 함수 몸체에 대해 지역적으로 사용.</dd>
+ <dt><code><var>paramN</var></code></dt>
+ <dd>함수에 전달될 인수의 이름.</dd>
+ <dt><code><var>statements</var></code></dt>
+ <dd>함수 몸체를 구성하는 명령문들.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>async function</code> 표현식은 {{jsxref('Statements/async_function', '<code>async function</code> 선언')}} 문법과 유사하며, 거의 동일합니다. <code>async function</code> 표현식과 <code>async function</code> 선언문의 주요 차이점은 익명함수로써의 사용 여부로, <code>async function</code> 표현식은 함수 이름을 생략하면 익명함수를 만듭니다. <code>async function</code> 표현식은 {{Glossary("IIFE")}}(즉시실행함수)로 사용할 수 있습니다. <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions">functions</a></code>문서를 참고하세요.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Simple_example">Simple example</h3>
+
+<pre><code>function resolveAfter2Seconds(x) {
+ return new Promise(resolve =&gt; {
+ setTimeout(() =&gt; {
+ resolve(x);
+ }, 2000);
+ });
+};
+
+
+var add = async function(x) { // async function 표현식을 변수에 할당
+ var a = await resolveAfter2Seconds(20);
+ var b = await resolveAfter2Seconds(30);
+ return x + a + b;
+};
+
+add(10).then(v =&gt; {
+ console.log(v); // 4초 뒤에 60 출력
+});
+
+
+(async function(x) { // async function 표현식을 IIFE로 사용
+ var p_a = resolveAfter2Seconds(20);
+ var p_b = resolveAfter2Seconds(30);
+ return x + await p_a + await p_b;
+})(10).then(v =&gt; {
+ console.log(v); // 2초 뒤에 60 출력
+});</code></pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td>Initial definition in ES2017.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{Compat("javascript.operators.async_function_expression")}} </div>
+
+<div id="compat-mobile"></div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Statements/async_function", "async function")}}</li>
+ <li>{{jsxref("AsyncFunction")}} object</li>
+ <li>{{jsxref("Operators/await", "await")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/await/index.html b/files/ko/web/javascript/reference/operators/await/index.html
new file mode 100644
index 0000000000..00b5fd3eff
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/await/index.html
@@ -0,0 +1,137 @@
+---
+title: await
+slug: Web/JavaScript/Reference/Operators/await
+translation_of: Web/JavaScript/Reference/Operators/await
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<div><code>await</code>연산자는 {{jsxref("Promise")}}를 기다리기 위해 사용됩니다. 연산자는 {{jsxref("Statements/async_function", "async function")}} 내부에서만 사용할 수 있습니다.</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">[<em>rv</em>] = await <em>expression</em>;</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>{{jsxref("Promise")}} 혹은 기다릴 어떤 값입니다.</dd>
+ <dt><code>rv</code></dt>
+ <dd>
+ <p>{{jsxref("Promise")}}에 의해 만족되는 값이 반환됩니다. {{jsxref("Promise")}}가 아닌 경우에는 그 값 자체가 반환됩니다.</p>
+ </dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>await</code> 문은 <code>Promise</code>가 fulfill되거나 <code>reject</code> 될 때까지 <code>async</code> 함수의 실행을 일시 정지하고, <code>Promise</code>가 fulfill되면 <code>async</code> 함수를 일시 정지한 부분부터 실행합니다. 이때  <code>await</code> 문의 반환값은 <code>Promise</code> 에서 fulfill된 값이 됩니다.</p>
+
+<p>만약 <code>Promise</code>가 <code>reject</code>되면, <code>await</code> 문은 <code>reject</code>된 값을 <code>throw</code>합니다.</p>
+
+<p><code>await</code> 연산자 다음에 나오는 문의 값이 <code>Promise</code>가 아니면 해당 값을 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve">resolved Promise</a>로 변환시킵니다.</p>
+
+<p>An <code>await</code> can split execution flow, allowing the caller of the <code>await</code>'s function to resume execution before the deferred continuation of the <code>await</code>'s function. After the <code>await</code> defers the continuation of its function, if this is the first <code>await</code> executed by the function, immediate execution also continues by returning to the function's caller a pending <code>Promise</code> for the completion of the <code>await</code>'s function and resuming execution of that caller.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>만약 <code>Promise</code>가 <code>await</code>에 넘겨지면, <code>await</code>은 <code>Promise</code>가 fulfill되기를 기다렸다가, 해당 값을 리턴합니다.</p>
+
+<pre class="brush: js notranslate">function resolveAfter2Seconds(x) {
+ return new Promise(resolve =&gt; {
+ setTimeout(() =&gt; {
+ resolve(x);
+ }, 2000);
+ });
+}
+
+async function f1() {
+ var x = await resolveAfter2Seconds(10);
+ console.log(x); // 10
+}
+
+f1();
+</pre>
+
+<p>{{jsxref("Global_Objects/Promise/then", "Thenable objects")}} will be fulfilled just the same.</p>
+
+<pre class="notranslate"><code>async function f2() {
+ const thenable = {
+ then: function(resolve, _reject) {
+ resolve('resolved!')
+ }
+ };
+ console.log(await thenable); // resolved!
+}
+
+f2();</code></pre>
+
+<p>만약 값이 <code>Promise</code>가 아니라면, 해당 값은 <code>resolve</code>된 <code>Promise</code>로 변환되며 이를 기다립니다.</p>
+
+<pre class="brush: js notranslate">async function f2() {
+ var y = await 20;
+ console.log(y); // 20
+}
+f2();
+</pre>
+
+<p>만약 <code>Promise</code>가 <code>reject</code>되면, <code>reject</code>된 값이 <code>throw</code>됩니다.</p>
+
+<pre class="brush: js notranslate">async function f3() {
+ try {
+ var z = await Promise.reject(30);
+ } catch(e) {
+ console.log(e); // 30
+ }
+}
+f3();
+</pre>
+
+<p>try블럭 없이 rejected <code>Promise</code>다루기</p>
+
+<pre class="notranslate"><code>var response = await promisedFunction().catch((err) =&gt; { console.error(err); });
+// response will be undefined if the promise is rejected</code></pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table>
+ <thead>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName("ESDraft", "#sec-async-function-definitions", "async functions")}}</td>
+ <td>{{Spec2("ESDraft")}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName("ES2018", "#sec-async-function-definitions", "async functions")}}</td>
+ <td>{{Spec2("ES2018")}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName("ES2017", "#sec-async-function-definitions", "async functions")}}</td>
+ <td>{{Spec2("ES2017")}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("javascript.operators.await")}}</p>
+</div>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Statements/async_function", "async function")}}</li>
+ <li>{{jsxref("Operators/async_function", "async function expression")}}</li>
+ <li>{{jsxref("AsyncFunction")}} object</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/bitwise_operators/index.html b/files/ko/web/javascript/reference/operators/bitwise_operators/index.html
new file mode 100644
index 0000000000..e94e176e08
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/bitwise_operators/index.html
@@ -0,0 +1,540 @@
+---
+title: 비트 연산자
+slug: Web/JavaScript/Reference/Operators/Bitwise_Operators
+tags:
+ - JavaScript
+ - Operator
+ - Reference
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>비트 연산자</strong>는 피연산자를 10진수, 16진수, 8진수가 아니라, 32개의 비트(0과 1) 집합으로 취급합니다. 예를 들어, 10진수 9의 2진수 표기법은 1001입니다. 이렇게, 비트 연산자는 값의 2진수 표현을 사용해 연산하지만, 결과는 표준 JavaScript 숫자 값으로 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}</div>
+
+
+
+<p>다음은 JavaScript의 비트 연산자를 요약한 표입니다.</p>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th>연산자</th>
+ <th>사용방법</th>
+ <th>설명</th>
+ </tr>
+ <tr>
+ <td><a href="#Bitwise_AND">비트 AND</a></td>
+ <td><code>a &amp; b</code></td>
+ <td>피연산자를 비트로 바꿨을 때 각각 대응하는 비트가 모두 1이면 그 비트값에 1을 반환.</td>
+ </tr>
+ <tr>
+ <td><a href="#Bitwise_OR">비트 OR</a></td>
+ <td><code>a | b</code></td>
+ <td>피연산자를 비트로 바꿨을 때 각각 대응하는 비트가 모두 1이거나 한 쪽이 1이면 1을 반환.</td>
+ </tr>
+ <tr>
+ <td><a href="#Bitwise_XOR">비트 XOR</a></td>
+ <td><code>a ^ b</code></td>
+ <td>피연산자를 비트로 바꿨을 때 대응하는 비트가 서로 다르면 1을 반환.</td>
+ </tr>
+ <tr>
+ <td><a href="#Bitwise_NOT">비트 NOT</a></td>
+ <td><code>~ a</code></td>
+ <td>피연산자의 반전된 값을 반환.</td>
+ </tr>
+ <tr>
+ <td><a href="#Left_shift">왼쪽 시프트</a></td>
+ <td><code>a &lt;&lt; b</code></td>
+ <td>Shifts <code>a</code> in binary representation <code>b</code> (&lt; 32) bits to the left, shifting in zeros from the right.</td>
+ </tr>
+ <tr>
+ <td><a href="#Right_shift">부호 유지 오른쪽 시프트</a></td>
+ <td><code>a &gt;&gt; b</code></td>
+ <td>Shifts <code>a</code> in binary representation <code>b</code> (&lt; 32) bits to the right, discarding bits shifted off.</td>
+ </tr>
+ <tr>
+ <td><a href="#Unsigned_right_shift">부호 버림 오른쪽 시프트</a></td>
+ <td><code>a &gt;&gt;&gt; b</code></td>
+ <td>Shifts <code>a</code> in binary representation <code>b</code> (&lt; 32) bits to the right, discarding bits shifted off, and shifting in zeros from the left.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="부호_있는_32비트_정수">부호 있는 32비트 정수</h2>
+
+<p>The operands of all bitwise operators are converted to signed 32-bit integers in two's <a href="https://en.wikipedia.org/wiki/Method_of_complements">complement format</a>, except for zero-fill right shift which results in an unsigned 32-bit integer.</p>
+
+<p><em>Two's complement format</em> means that a number's negative counterpart (e.g. <code>5</code> vs. <code>-5</code>) is all the number's bits inverted (bitwise NOT of the number, or <em>ones' complement</em> of the number) plus one.</p>
+
+<p>For example, the following encodes the integer <code>314</code>:</p>
+
+<pre>00000000000000000000000100111010
+</pre>
+
+<p>The following encodes <code>~314</code>, i.e. the one's complement of <code>314</code>:</p>
+
+<pre>11111111111111111111111011000101
+</pre>
+
+<p>Finally, the following encodes <code>-314,</code> i.e. the two's complement of <code>314</code>:</p>
+
+<pre>11111111111111111111111011000110
+</pre>
+
+<p>The two's complement guarantees that the left-most bit is 0 when the number is positive and 1 when the number is negative. Thus, it is called the <em>sign bit</em>.</p>
+
+<p>The number <code>0</code> is the integer that is composed completely of 0 bits.</p>
+
+<pre>0 (base 10) = 00000000000000000000000000000000 (base 2)
+</pre>
+
+<p>The number <code>-1</code> is the integer that is composed completely of 1 bits.</p>
+
+<pre>-1 (base 10) = 11111111111111111111111111111111 (base 2)
+</pre>
+
+<p>The number <code>-2147483648</code> (hexadecimal representation: <code>-0x80000000</code>) is the integer that is composed completely of 0 bits except the first (left-most) one.</p>
+
+<pre>-2147483648 (base 10) = 10000000000000000000000000000000 (base 2)
+</pre>
+
+<p>The number <code>2147483647</code> (hexadecimal representation: <code>0x7fffffff</code>) is the integer that is composed completely of 1 bits except the first (left-most) one.</p>
+
+<pre>2147483647 (base 10) = 01111111111111111111111111111111 (base 2)
+</pre>
+
+<p>The numbers <code>-2147483648</code> and <code>2147483647</code> are the minimum and the maximum integers representable throught a 32bit signed number.</p>
+
+<h2 id="비트_논리_연산자">비트 논리 연산자</h2>
+
+<p>비트 논리 연산자는 다음과 같이 사용됩니다.</p>
+
+<ul>
+ <li>피연산자는 32비트 정수로 변환되고, 이진법으로 표현됩니다 (0과 1).</li>
+ <li>이진법으로 표현된 첫 번째 피연산자는 두 번째 피연산자와 쌍을 이룹니다: 첫 번째는 첫 번째 비트끼리, 두 번째는 두 번째 비트끼리...</li>
+ <li>연산자는 각각의 비트쌍에 적용되고, 결과 또한 이진법으로 구성됩니다.</li>
+</ul>
+
+<h3 id="비트_AND"><a id="Bitwise_AND" name="Bitwise_AND">&amp; (비트 AND)</a></h3>
+
+<p>비트 연산자 AND를 비트 쌍으로 실행합니다.</p>
+
+<p>Performs the AND operation on each pair of bits. <code>a</code> AND <code>b</code> yields 1 only if both <code>a</code> and <code>b</code> are 1. The truth table for the AND operation is:</p>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <td class="header">a</td>
+ <td class="header">b</td>
+ <td class="header">a AND b</td>
+ </tr>
+ <tr>
+ <td>0</td>
+ <td>0</td>
+ <td>0</td>
+ </tr>
+ <tr>
+ <td>0</td>
+ <td>1</td>
+ <td>0</td>
+ </tr>
+ <tr>
+ <td>1</td>
+ <td>0</td>
+ <td>0</td>
+ </tr>
+ <tr>
+ <td>1</td>
+ <td>1</td>
+ <td>1</td>
+ </tr>
+ </tbody>
+</table>
+
+<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2)
+ 14 (base 10) = 00000000000000000000000000001110 (base 2)
+ --------------------------------
+14 &amp; 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10)
+</pre>
+
+<p>Bitwise ANDing any number <code>x</code> with <code>0</code> yields <code>0</code>. <span style="letter-spacing: -0.00278rem;">Bitwise ANDing any number <code>x</code> with <code>-1</code> yields <code>x</code>.</span></p>
+
+<h3 id="비트_OR"><a id="Bitwise_OR" name="Bitwise_OR">| (비트 OR)</a></h3>
+
+<p>Performs the OR operation on each pair of bits. <code>a</code> OR <code>b</code> yields 1 if either <code>a</code> or <code>b</code> is 1. The truth table for the OR operation is:</p>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <td class="header">a</td>
+ <td class="header">b</td>
+ <td class="header">a OR b</td>
+ </tr>
+ <tr>
+ <td>0</td>
+ <td>0</td>
+ <td>0</td>
+ </tr>
+ <tr>
+ <td>0</td>
+ <td>1</td>
+ <td>1</td>
+ </tr>
+ <tr>
+ <td>1</td>
+ <td>0</td>
+ <td>1</td>
+ </tr>
+ <tr>
+ <td>1</td>
+ <td>1</td>
+ <td>1</td>
+ </tr>
+ </tbody>
+</table>
+
+<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2)
+ 14 (base 10) = 00000000000000000000000000001110 (base 2)
+ --------------------------------
+14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10)
+</pre>
+
+<p>Bitwise ORing any number x with 0 yields x.</p>
+
+<p>Bitwise ORing any number x with -1 yields -1.</p>
+
+<h3 id="비트_XOR"><a id="Bitwise_XOR" name="Bitwise_XOR">^ (비트 XOR)</a></h3>
+
+<p>Performs the XOR operation on each pair of bits. <code>a</code> XOR <code>b</code> yields 1 if <code>a</code> and <code>b</code> are different. The truth table for the XOR operation is:</p>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <td class="header">a</td>
+ <td class="header">b</td>
+ <td class="header">a XOR b</td>
+ </tr>
+ <tr>
+ <td>0</td>
+ <td>0</td>
+ <td>0</td>
+ </tr>
+ <tr>
+ <td>0</td>
+ <td>1</td>
+ <td>1</td>
+ </tr>
+ <tr>
+ <td>1</td>
+ <td>0</td>
+ <td>1</td>
+ </tr>
+ <tr>
+ <td>1</td>
+ <td>1</td>
+ <td>0</td>
+ </tr>
+ </tbody>
+</table>
+
+<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2)
+ 14 (base 10) = 00000000000000000000000000001110 (base 2)
+ --------------------------------
+14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10)
+</pre>
+
+<p>Bitwise XORing any number x with 0 yields x.</p>
+
+<p>Bitwise XORing any number x with -1 yields ~x.</p>
+
+<h3 id="비트_NOT"><a id="Bitwise_NOT" name="Bitwise_NOT">~ (비트 NOT)</a></h3>
+
+<p>Performs the NOT operator on each bit. NOT <code>a</code> yields the inverted value (a.k.a. one's complement) of <code>a</code>. The truth table for the NOT operation is:</p>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <td class="header">a</td>
+ <td class="header">NOT a</td>
+ </tr>
+ <tr>
+ <td>0</td>
+ <td>1</td>
+ </tr>
+ <tr>
+ <td>1</td>
+ <td>0</td>
+ </tr>
+ </tbody>
+</table>
+
+<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2)
+ --------------------------------
+~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10)
+</pre>
+
+<p>Bitwise NOTing any number x yields -(x + 1). For example, ~5 yields -6.</p>
+
+<h2 id="비트_시프트_연산자">비트 시프트 연산자</h2>
+
+<p>The bitwise shift operators take two operands: the first is a quantity to be shifted, and the second specifies the number of bit positions by which the first operand is to be shifted. The direction of the shift operation is controlled by the operator used.</p>
+
+<p>Shift operators convert their operands to 32-bit integers in big-endian order and return a result of the same type as the left operand. The right operand should be less than 32, but if not only the low five bits will be used.</p>
+
+<h3 id="&lt;&lt;_Left_shift"><a id="Left_shift" name="Left_shift">&lt;&lt; (Left shift)</a></h3>
+
+<p>This operator shifts the first operand the specified number of bits to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right.</p>
+
+<p>For example, <code>9 &lt;&lt; 2</code> yields 36:</p>
+
+<pre> 9 (base 10): 00000000000000000000000000001001 (base 2)
+ --------------------------------
+9 &lt;&lt; 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10)
+</pre>
+
+<p>Bitwise shifting any number <strong>x</strong> to the left by <strong>y</strong> bits yields <strong>x * 2^y</strong>.</p>
+
+<h3 id=">>_Sign-propagating_right_shift"><a id="Right_shift" name="Right_shift">&gt;&gt; (Sign-propagating right shift)</a></h3>
+
+<p>This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Copies of the leftmost bit are shifted in from the left. Since the new leftmost bit has the same value as the previous leftmost bit, the sign bit (the leftmost bit) does not change. Hence the name "sign-propagating".</p>
+
+<p>For example, <code>9 &gt;&gt; 2</code> yields 2:</p>
+
+<pre> 9 (base 10): 00000000000000000000000000001001 (base 2)
+ --------------------------------
+9 &gt;&gt; 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
+</pre>
+
+<p>Likewise, <code>-9 &gt;&gt; 2</code> yields -3, because the sign is preserved:</p>
+
+<pre> -9 (base 10): 11111111111111111111111111110111 (base 2)
+ --------------------------------
+-9 &gt;&gt; 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10)
+</pre>
+
+<h3 id=">>>_Zero-fill_right_shift"><a id="Unsigned_right_shift" name="Unsigned_right_shift">&gt;&gt;&gt; (Zero-fill right shift)</a></h3>
+
+<p>This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Zero bits are shifted in from the left. The sign bit becomes 0, so the result is always non-negative.</p>
+
+<p>For non-negative numbers, zero-fill right shift and sign-propagating right shift yield the same result. For example, <code>9 &gt;&gt;&gt; 2</code> yields 2, the same as <code>9 &gt;&gt; 2</code>:</p>
+
+<pre> 9 (base 10): 00000000000000000000000000001001 (base 2)
+ --------------------------------
+9 &gt;&gt;&gt; 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
+</pre>
+
+<p>However, this is not the case for negative numbers. For example, <code>-9 &gt;&gt;&gt; 2</code> yields 1073741821, which is different than <code>-9 &gt;&gt; 2</code> (which yields -3):</p>
+
+<pre> -9 (base 10): 11111111111111111111111111110111 (base 2)
+ --------------------------------
+-9 &gt;&gt;&gt; 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10)
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Flags_and_bitmasks">Flags and bitmasks</h3>
+
+<p>The bitwise logical operators are often used to create, manipulate, and read sequences of <em>flags</em>, which are like binary variables. Variables could be used instead of these sequences, but binary flags take much less memory (by a factor of 32).</p>
+
+<p>Suppose there are 4 flags:</p>
+
+<ul>
+ <li>flag A: we have an ant problem</li>
+ <li>flag B: we own a bat</li>
+ <li>flag C: we own a cat</li>
+ <li>flag D: we own a duck</li>
+</ul>
+
+<p>These flags are represented by a sequence of bits: DCBA. When a flag is <em>set</em>, it has a value of 1. When a flag is <em>cleared</em>, it has a value of 0. Suppose a variable <code>flags</code> has the binary value 0101:</p>
+
+<pre class="brush: js">var flags = 5; // binary 0101
+</pre>
+
+<p>This value indicates:</p>
+
+<ul>
+ <li>flag A is true (we have an ant problem);</li>
+ <li>flag B is false (we don't own a bat);</li>
+ <li>flag C is true (we own a cat);</li>
+ <li>flag D is false (we don't own a duck);</li>
+</ul>
+
+<p>Since bitwise operators are 32-bit, 0101 is actually 00000000000000000000000000000101, but the preceding zeroes can be neglected since they contain no meaningful information.</p>
+
+<p>A <em>bitmask</em> is a sequence of bits that can manipulate and/or read flags. Typically, a "primitive" bitmask for each flag is defined:</p>
+
+<pre class="brush: js">var FLAG_A = 1; // 0001
+var FLAG_B = 2; // 0010
+var FLAG_C = 4; // 0100
+var FLAG_D = 8; // 1000
+</pre>
+
+<p>New bitmasks can be created by using the bitwise logical operators on these primitive bitmasks. For example, the bitmask 1011 can be created by ORing FLAG_A, FLAG_B, and FLAG_D:</p>
+
+<pre class="brush: js">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 =&gt; 1011
+</pre>
+
+<p>Individual flag values can be extracted by ANDing them with a bitmask, where each bit with the value of one will "extract" the corresponding flag. The bitmask <em>masks</em> out the non-relevant flags by ANDing with zeros (hence the term "bitmask"). For example, the bitmask 0100 can be used to see if flag C is set:</p>
+
+<pre class="brush: js">// if we own a cat
+if (flags &amp; FLAG_C) { // 0101 &amp; 0100 =&gt; 0100 =&gt; true
+ // do stuff
+}
+</pre>
+
+<p>A bitmask with multiple set flags acts like an "either/or". For example, the following two are equivalent:</p>
+
+<pre class="brush: js">// if we own a bat or we own a cat
+if ((flags &amp; FLAG_B) || (flags &amp; FLAG_C)) { // (0101 &amp; 0010) || (0101 &amp; 0100) =&gt; 0000 || 0100 =&gt; true
+ // do stuff
+}
+</pre>
+
+<pre class="brush: js">// if we own a bat or cat
+var mask = FLAG_B | FLAG_C; // 0010 | 0100 =&gt; 0110
+if (flags &amp; mask) { // 0101 &amp; 0110 =&gt; 0100 =&gt; true
+ // do stuff
+}
+</pre>
+
+<p>Flags can be set by ORing them with a bitmask, where each bit with the value one will set the corresponding flag, if that flag isn't already set. For example, the bitmask 1100 can be used to set flags C and D:</p>
+
+<pre class="brush: js">// yes, we own a cat and a duck
+var mask = FLAG_C | FLAG_D; // 0100 | 1000 =&gt; 1100
+flags |= mask; // 0101 | 1100 =&gt; 1101
+</pre>
+
+<p>Flags can be cleared by ANDing them with a bitmask, where each bit with the value zero will clear the corresponding flag, if it isn't already cleared. This bitmask can be created by NOTing primitive bitmasks. For example, the bitmask 1010 can be used to clear flags A and C:</p>
+
+<pre class="brush: js">// no, we don't have an ant problem or own a cat
+var mask = ~(FLAG_A | FLAG_C); // ~0101 =&gt; 1010
+flags &amp;= mask; // 1101 &amp; 1010 =&gt; 1000
+</pre>
+
+<p>The mask could also have been created with <code>~FLAG_A &amp; ~FLAG_C</code> (De Morgan's law):</p>
+
+<pre class="brush: js">// no, we don't have an ant problem, and we don't own a cat
+var mask = ~FLAG_A &amp; ~FLAG_C;
+flags &amp;= mask; // 1101 &amp; 1010 =&gt; 1000
+</pre>
+
+<p>Flags can be toggled by XORing them with a bitmask, where each bit with the value one will toggle the corresponding flag. For example, the bitmask 0110 can be used to toggle flags B and C:</p>
+
+<pre class="brush: js">// if we didn't have a bat, we have one now, and if we did have one, bye-bye bat
+// same thing for cats
+var mask = FLAG_B | FLAG_C;
+flags = flags ^ mask; // 1100 ^ 0110 =&gt; 1010
+</pre>
+
+<p>Finally, the flags can all be flipped with the NOT operator:</p>
+
+<pre class="brush: js">// entering parallel universe...
+flags = ~flags; // ~1010 =&gt; 0101
+</pre>
+
+<h3 id="Conversion_snippets">Conversion snippets</h3>
+
+<p>Convert a binary <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">string</a></code> to a decimal <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">number</a></code>:</p>
+
+<pre class="brush: js">var sBinString = "1011";
+var nMyNumber = parseInt(sBinString, 2);
+alert(nMyNumber); // prints 11, i.e. 1011
+</pre>
+
+<p>Convert a decimal <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">number</a></code> to a binary <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">string</a></code>:</p>
+
+<pre class="brush: js">var nMyNumber = 11;
+var sBinString = nMyNumber.toString(2);
+alert(sBinString); // prints 1011, i.e. 11
+</pre>
+
+<h3 id="Automate_Mask_Creation">Automate Mask Creation</h3>
+
+<p>If you have to create many masks from some <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code> values, you can automatize the process:</p>
+
+<pre class="brush: js">function createMask () {
+ var nMask = 0, nFlag = 0, nLen = arguments.length &gt; 32 ? 32 : arguments.length;
+ for (nFlag; nFlag &lt; nLen; nMask |= arguments[nFlag] &lt;&lt; nFlag++);
+ return nMask;
+}
+var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011
+var mask2 = createMask(false, false, true); // 4, i.e.: 0100
+var mask3 = createMask(true); // 1, i.e.: 0001
+// etc.
+
+alert(mask1); // prints 11, i.e.: 1011
+</pre>
+
+<h3 id="Reverse_algorithm_an_array_of_booleans_from_a_mask">Reverse algorithm: an array of booleans from a mask</h3>
+
+<p>If you want to create an <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">array</a></code> of <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">booleans</a></code> from a mask you can use this code:</p>
+
+<pre class="brush: js">function arrayFromMask (nMask) {
+ // nMask must be between -2147483648 and 2147483647
+ if (nMask &gt; 0x7fffffff || nMask &lt; -0x80000000) { throw new TypeError("arrayFromMask - out of range"); }
+ for (var nShifted = nMask, aFromMask = []; nShifted; aFromMask.push(Boolean(nShifted &amp; 1)), nShifted &gt;&gt;&gt;= 1);
+ return aFromMask;
+}
+
+var array1 = arrayFromMask(11);
+var array2 = arrayFromMask(4);
+var array3 = arrayFromMask(1);
+
+alert("[" + array1.join(", ") + "]");
+// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011
+</pre>
+
+<p>You can test both algorithms at the same time…</p>
+
+<pre class="brush: js">var nTest = 19; // our custom mask
+var nResult = createMask.apply(this, arrayFromMask(nTest));
+
+alert(nResult); // 19
+</pre>
+
+<p>For didactic purpose only (since there is the <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Number/toString" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number/toString">Number.toString(2)</a></code> method), we show how it is possible to modify the <code>arrayFromMask</code> algorithm in order to create a <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">string</a></code> containing the binary representation of a <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">number</a></code>, rather than an <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">array</a></code> of <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">booleans</a></code>:</p>
+
+<pre class="brush: js">function createBinaryString (nMask) {
+ // nMask must be between -2147483648 and 2147483647
+ for (var nFlag = 0, nShifted = nMask, sMask = ""; nFlag &lt; 32; nFlag++, sMask += String(nShifted &gt;&gt;&gt; 31), nShifted &lt;&lt;= 1);
+ return sMask;
+}
+
+var string1 = createBinaryString(11);
+var string2 = createBinaryString(4);
+var string3 = createBinaryString(1);
+
+alert(string1);
+// prints 00000000000000000000000000001011, i.e. 11
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specification</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-bitwise-not-operator', 'Bitwise NOT Operator')}}</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-binary-bitwise-operators', 'Binary Bitwise Operators')}}</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators', 'Bitwise Shift Operators')}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.operators.bitwise")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/%EB%85%BC%EB%A6%AC_%EC%97%B0%EC%82%B0%EC%9E%90(Logical_Operators)">논리 연산자</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/class/index.html b/files/ko/web/javascript/reference/operators/class/index.html
new file mode 100644
index 0000000000..d15b532fbc
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/class/index.html
@@ -0,0 +1,100 @@
+---
+title: class 식
+slug: Web/JavaScript/Reference/Operators/class
+tags:
+ - ECMAScript 2015
+ - Expression
+ - JavaScript
+ - Operator
+ - Reference
+translation_of: Web/JavaScript/Reference/Operators/class
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>class 표현식</strong>은 ECMAScript 2015 (ES6)에서 클래스를 정의하는 한 방법입니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/function">function 식</a>과 비슷하게, class 식은 기명(named) 또는 익명(unnamed)일 수 있습니다. 기명인 경우, 클래스명은 클래스 본체(body)에서만 지역(local)입니다. JavaScript 클래스는 프로토타입(원형) 기반 상속을 사용합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-classexpression.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">var MyClass = class <em>[className]</em> [extends] {
+  // class body
+};</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>class 식은 <a href="/ko/docs/Web/JavaScript/Reference/Statements/class">class 문</a>과 구문이 비슷합니다. 그러나, class 식의 경우 클래스명("binding identifier")을 생략할 수 있는데 class 문으로는 할 수 없습니다.</p>
+
+<p>class 문과 같이, class 식의 본체는 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode" title="strict mode">엄격 모드</a>에서 실행됩니다.</p>
+
+
+
+<h2 id="예제">예제</h2>
+
+<h3 id="간단한_class_식">간단한 class 식</h3>
+
+<p>이게 바로 변수 "Foo"를 사용하여 참조할 수 있는 간단한 익명 class 식입니다.</p>
+
+<pre class="brush: js notranslate">var Foo = class {
+ constructor() {}
+ bar() {
+ return "Hello World!";
+ }
+};
+
+var instance = new Foo();
+instance.bar(); // "Hello World!"
+Foo.name; // ""
+</pre>
+
+<h3 id="Named_class_식">Named  class 식</h3>
+
+<p>당신이 클래스 몸통 내에서 현재 클래스를 참조하고 싶다면, 유명 class 식을 만들 수 있습니다. 이 이름은 오직 class 식 자체 범위에서만 볼 수 있습니다.</p>
+
+<pre class="brush: js notranslate">var Foo = class NamedFoo {
+ constructor() {}
+ whoIsThere() {
+ return NamedFoo.name;
+ }
+}
+var bar = new Foo();
+bar.whoIsThere(); // "NamedFoo"
+NamedFoo.name; // ReferenceError: NamedFoo가 정의되지 않음
+Foo.name; // "NamedFoo"
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">명세</th>
+ <th scope="col">상태</th>
+ <th scope="col">설명</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td>
+ <td>{{Spec2('ES6')}}</td>
+ <td>초기 정의.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.operators.class")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/function"><code>function</code> 식</a></li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> 문</a></li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/comma_operator/index.html b/files/ko/web/javascript/reference/operators/comma_operator/index.html
new file mode 100644
index 0000000000..d2c4caae0e
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/comma_operator/index.html
@@ -0,0 +1,91 @@
+---
+title: 쉼표 연산자
+slug: Web/JavaScript/Reference/Operators/Comma_Operator
+tags:
+ - JavaScript
+ - Operator
+ - Reference
+translation_of: Web/JavaScript/Reference/Operators/Comma_Operator
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>쉼표 연산자</strong>는 각각의 피연산자를 왼쪽에서 오른쪽 순서로 평가하고, 마지막 연산자의 값을 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-commaoperators.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>expr1</em>, <em>expr2, expr3...</em></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>expr1</code>, <code>expr2, expr3...</code></dt>
+ <dd>아무 표현식.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>단일 표현식을 요구하는 곳에 복수의 표현식을 사용하고 싶을 때 쉼표 연산자를 사용할 수 있습니다. 가장 흔히 사용되는 곳은 <code>for</code> 반복문에 다수의 매개변수를 제공할 때입니다.</p>
+
+<p>쉼표 연산자는 배열, 객체, 함수의 매개변수와 호출 인수에서 사용하는 쉼표와는 전혀 다릅니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p><code>a</code>를 한 행에 10개의 요소를 가진 2차원 배열이라고 가정할 때, 아래 예제는 쉼표 연산자를 사용해 한 번에 <code>i</code>는 증가시키고 <code>j</code>는 감소시킵니다.</p>
+
+<p>다음 코드는 2차원 배열의 대각선에 위치하는 요소의 값을 출력합니다.</p>
+
+<pre class="brush:js;highlight:[1]">for (var i = 0, j = 9; i &lt;= 9; i++, j--)
+ console.log("a[" + i + "][" + j + "] = " + a[i][j]);
+</pre>
+
+<p>쉼표 연산자를 할당에 사용하면, 할당 연산이 표현식에 포함되지 않아 예상한 결과와는 다소 다를 수 있습니다. 다음 예제에서, <code>a</code>는 <code>b = 3</code>의 값(3)을 할당받지만, <code>c = 4</code> 표현식 역시 평가되어 콘솔에 기록됩니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">연산자 우선순위와 결합성</a> 때문입니다.</p>
+
+<pre class="brush: js">var a, b, c;
+
+a = b = 3, c = 4; // 콘솔에는 4를 반환
+console.log(a); // 3 (제일 왼쪽)
+
+var x, y, z;
+
+x = (y = 5, z = 6); // 콘솔에는 6을 반환
+console.log(x); // 6 (제일 오른쪽)
+</pre>
+
+<h3 id="연산_후_반환">연산 후 반환</h3>
+
+<p>쉼표 연산자를 사용하는 다른 방법은 값을 반환하기 전에 연산을 수행하는 것입니다. 쉼표 연산자는 마지막 표현식의 평가 결과만 반환하지만, 이전 피연산자에 대해서도 평가는 수행하므로 다음과 같은 코드를 작성할 수 있습니다.</p>
+
+<pre class="brush: js">function myFunc () {
+ var x = 0;
+
+ return (x += 1, x); // ++x 와 같은 효과
+}</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specification</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.operators.comma")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/for"><code>for</code> 반복문</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/comparison_operators/index.html b/files/ko/web/javascript/reference/operators/comparison_operators/index.html
new file mode 100644
index 0000000000..ecfd46d6e5
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/comparison_operators/index.html
@@ -0,0 +1,215 @@
+---
+title: 비교 연산자
+slug: Web/JavaScript/Reference/Operators/Comparison_Operators
+tags:
+ - JavaScript
+ - Operator
+ - Reference
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>JavaScript는 엄격한 비교와 형변환 비교 두 가지의 비교 방법을 모두 가지고 있습니다. 엄격(일치) 비교(<code>===</code>)는 두 피연산자가 같은 자료형에, 그 내용도 일치해야만 참입니다. 추상(동등) 비교(<code>==</code>)는 비교 전에 두 피연산자를 동일한 자료형으로 변환합니다. 관계 추상 비교(<code>&lt;=</code>)의 경우 {{glossary("primitive", "원시값")}}으로 바꾸고, 같은 자료형으로 다시 바꾼후 비교를 수행합니다.</p>
+
+<p>문자열의 경우 {{glossary("unicode", "유니코드")}} 값을 사용한 사전순으로 비교합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-comparisonoperators.html")}}</div>
+
+
+
+<p>비교 연산의 특징은 다음과 같습니다.</p>
+
+<ul>
+ <li>두 문자열이 같은 문자 시퀀스로 구성되고, 같은 길이를 가지며, 같은 위치에 같은 문자가 존재하면 일치합니다.</li>
+ <li>두 숫자는 숫자로서 같은 값(같은 숫자 값)이면 일치합니다. {{jsxref("NaN")}}은 자기 자신을 포함한 그 무엇과도 동등하지 않습니다. <code>+0</code>과 <code>-0</code>은 서로 일치합니다.</li>
+ <li>두 불리언은 둘 다 <code>true</code>거나 <code>false</code>이면 일치합니다.</li>
+ <li>서로 다른 두 객체는 절대 일치하지도, 동등하지도 않습니다.</li>
+ <li>객체를 비교하는 표현식은 두 피연산자가 동일한 객체를 참조하는 경우에만 참입니다.</li>
+ <li>{{jsxref("null")}}과 {{jsxref("undefined")}}는 자기 자신과 일치하며, 서로 동등합니다.</li>
+</ul>
+
+<h2 id="동치_연산자">동치 연산자</h2>
+
+<h3 id="동등_연산자"><a name="Equality">동등 연산자 (==)</a></h3>
+
+<p>동등 연산자는 두 피연산자의 자료형이 같지 않은 경우 같아지도록 변환한 후, 엄격 비교를 수행합니다. 피연산자가 모두 객체라면, JavaScript는 내부 참조를 보고, 둘 다 메모리의 같은 객체를 바라보고 있는지 판별합니다.</p>
+
+<h4 id="구문">구문</h4>
+
+<pre class="syntaxbox">x == y
+</pre>
+
+<h4 id="예제">예제</h4>
+
+<pre class="brush: js"> 1 == 1 // true
+ "1" == 1 // true
+ 1 == '1' // true
+ 0 == false // true
+ 0 == null // false
+
+ 0 == undefined // false
+null == undefined // true
+</pre>
+
+<h3 id="부등_연산자_!"><a name="Inequality">부등 연산자 (!=)</a></h3>
+
+<p>부등 연산자는 두 피연산자가 같지 않은 경우 참을 반환합니다. 피연산자의 자료형이 일치하지 않는 경우 적절한 자료형으로의 변환을 시도합니다. 피연산자가 모두 객체라면, JavaScript는 내부 참조를 보고, 서로 메모리의 다른 객체를 바라보고 있는지 판별합니다.</p>
+
+<h4 id="구문_2">구문</h4>
+
+<pre class="syntaxbox">x != y</pre>
+
+<h4 id="예제_2">예제</h4>
+
+<pre class="brush: js">1 != 2 // true
+1 != "1" // false
+1 != '1' // false
+1 != true // false
+0 != false // false
+</pre>
+
+<h3 id="일치_연산자"><a name="Identity">일치 연산자 (===)</a></h3>
+
+<p>일치 연산자는 자료형 변환 없이 두 연산자가 엄격히 같은지 판별합니다.</p>
+
+<h4 id="구문_3">구문</h4>
+
+<pre class="syntaxbox">x === y</pre>
+
+<h4 id="예제_3">예제</h4>
+
+<pre class="brush: js ">3 === 3 // true
+3 === '3' // false</pre>
+
+<h3 id="불일치_연산자_!"><a name="Nonidentity">불일치 연산자 (!==)</a></h3>
+
+<p>일치 연산자는 두 연산자가 같지 않거나, 같은 자료형이 아닐 때 참을 반환합니다.</p>
+
+<h4 id="구문_4">구문</h4>
+
+<pre class="syntaxbox">x !== y</pre>
+
+<h4 id="예제_4">예제</h4>
+
+<pre class="brush: js">3 !== '3' // true
+4 !== 3 // true
+</pre>
+
+<h2 id="관계_연산자">관계 연산자</h2>
+
+<p>이 항목의 모든 연산자는 비교 전에 피연산자를 {{glossary("primitive", "원시값")}}으로 <a href="/ko/docs/Glossary/Type_coercion">변환</a>합니다. 둘 다 문자열이 되는 경우 사전순으로 비교하고, 그렇지 않으면 숫자로 변환합니다. {{jsxref("NaN")}}과의 비교는 항상 <code>false</code>를 반환합니다.</p>
+
+<h3 id="초과_연산자_>"><a name="Greater_than_operator">초과 연산자 (&gt;)</a></h3>
+
+<p>초과 연산자는 왼쪽 피연산자가 오른쪽 피연산자보다 큰 경우 참을 반환합니다.</p>
+
+<h4 id="구문_5">구문</h4>
+
+<pre class="syntaxbox">x &gt; y</pre>
+
+<h4 id="예제_5">예제</h4>
+
+<pre class="brush: js">4 &gt; 3 // true
+</pre>
+
+<h3 id="이상_연산자_>"><a name="Greater_than_or_equal_operator">이상 연산자 (&gt;=)</a></h3>
+
+<p>이상 연산자는 왼쪽 피연산자가 오른쪽 피연산자보다 크거나 같으면 참을 반환합니다.</p>
+
+<h4 id="구문_6">구문</h4>
+
+<pre class="syntaxbox"> x &gt;= y</pre>
+
+<h4 id="예제_6">예제</h4>
+
+<pre class="brush: js">4 &gt;= 3 // true
+3 &gt;= 3 // true
+</pre>
+
+<h3 id="미만_연산자_&lt;"><a name="Less_than_operator">미만 연산자 (&lt;)</a></h3>
+
+<p>미만 연산자는 왼쪽 피연산자가 오른쪽 피연산자보다 작은 경우 참을 반환합니다.</p>
+
+<h4 id="구문_7">구문</h4>
+
+<pre class="syntaxbox">x &lt; y</pre>
+
+<h4 id="예제_7">예제</h4>
+
+<pre class="brush: js">3 &lt; 4 // true</pre>
+
+<h3 id="이하_연산자_&lt;"><a id="Less_than_or_equal_operator" name="Less_than_or_equal_operator">이하 연산자 (&lt;=)</a></h3>
+
+<p>이하 연산자는 왼쪽 피연산자가 오른쪽 피연산자보다 작거나 같으면 참을 반환합니다.</p>
+
+<h4 id="구문_8">구문</h4>
+
+<pre class="syntaxbox"> x &lt;= y</pre>
+
+<h4 id="예제_8">예제</h4>
+
+<pre class="brush: js">3 &lt;= 4 // true
+</pre>
+
+<h2 id="동치_연산자_사용하기">동치 연산자 사용하기</h2>
+
+<p>표준 동치, 동등 연산자(<code>==</code>, <code>!=</code>)는 두 피연산자를 비교하기 위해 <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">추상 동치 비교 알고리즘</a>(Abstract Equlity Comparison Algorithm)을 사용합니다. 피연산자 간 자료형이 일치하지 않으면 우선 변환을 시도합니다. 예를 들어 표현식 <code>5 == '5'</code>에서는 비교 전 오른쪽 문자열을 {{jsxref("Number")}}로 변환합니다.</p>
+
+<p>엄격 동치, 일치 연산자(<code>===</code>, <code>!==</code>)는 <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">엄격 동치 비교 알고리즘</a>(Strict Equality Comparison Algorithm)을 사용하며, 같은 자료형을 가진 피연산자를 비교하기 위해 사용합니다. 피연산자 간 자료형이 일치하지 않으면 항상 <code>false</code>이므로, <code>5 !== '5'</code>입니다.</p>
+
+<p>피연산자의 값은 물론 특정 자료형이어야 하는 경우 일치 연산자를 사용하세요. 그렇지 않은 경우 형변환을 자동으로 해주는 동등 연산자를 사용할 수도 있습니다.</p>
+
+<p>비교 과정에 자료형 변환이 필요한 경우 JavaScript는 {{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}}, {{jsxref("Object")}} 자료형을 다음과 같이 변환합니다.</p>
+
+<ul>
+ <li>숫자와 문자열을 비교할 땐 문자열을 숫자로 변환합니다. 우선, 문자열에서 수학적 값을 도출합니다. 그 후 가장 가까운 <code>Number</code> 자료형 값으로 반올림합니다.</li>
+ <li>하나의 연산자가 <code>Boolean</code>인 경우, <code>true</code>는 <code>1</code>, <code>false</code>는 <code>0</code>으로 변환합니다.</li>
+ <li>객체를 문자열이나 숫자와 비교하는 경우, JavaScript는 객체의 기본값을 사용합니다. 연산자는 우선 객체의 <code>valueOf()</code> 또는 <code>toString()</code> 메서드를 사용해 문자열 혹은 숫자 값을 받으려 시도합니다. 실패할 경우 런타임 오류가 발생합니다.</li>
+ <li>객체를 원시값과 비교하는 경우에만 객체의 변환이 발생합니다. 두 연산자가 모두 객체인 경우 변환하지 않으며, 둘 다 같은 객체를 참조하는 경우 참을 반환합니다.</li>
+</ul>
+
+<div class="note"><strong>참고:</strong> <code>String</code> 객체는 자료형 객체지, 문자열이 아닙니다! <code>String</code> 객체는 거의 쓰이지 않으며, 이런 성질로 인해 아래의 결과는 예상치 못한 값일 수 있습니다.</div>
+
+<pre class="brush:js">// true as both operands are type String (i.e. string primitives):
+'foo' === 'foo'
+
+var a = new String('foo');
+var b = new String('foo');
+
+// false as a and b are type Object and reference different objects
+a == b
+
+// false as a and b are type Object and reference different objects
+a === b
+
+// true as a and 'foo' are of different type and, the Object (a)
+// is converted to String 'foo' before comparison
+a == 'foo'</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Status</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality Operators')}}</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.operators.comparison")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Object.is()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li><a href="/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness">동치 비교와 동일성</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/conditional_operator/index.html b/files/ko/web/javascript/reference/operators/conditional_operator/index.html
new file mode 100644
index 0000000000..90f59ea4cd
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/conditional_operator/index.html
@@ -0,0 +1,193 @@
+---
+title: 삼항 조건 연산자
+slug: Web/JavaScript/Reference/Operators/Conditional_Operator
+tags:
+ - JavaScript
+ - Operator
+ - Reference
+translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>조건부 삼항 연산자</strong>는 JavaScript에서 세 개의 피연산자를 취할 수 있는 유일한 연산자입니다. 보통 <a href="/ko/docs/Web/JavaScript/Reference/Statements/if...else"><code>if</code></a> 명령문의 단축 형태로 쓰입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-conditionaloperators.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate"><em>condition</em> ? <em>exprIfTrue</em> : <em>exprIfFalse</em> </pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>condition</code></dt>
+ <dd>An expression whose value is used as a condition.</dd>
+ <dt><code>exprIfTrue</code></dt>
+ <dd>An expression which is evaluated if the <code>condition</code> evaluates to a {{Glossary("truthy")}} value (one which equals or can be converted to <code>true</code>).</dd>
+ <dt><code>exprIfFalse</code></dt>
+ <dd>An expression which is executed if the <code>condition</code> is {{Glossary("falsy")}} (that is, has a value which can be converted to <code>false</code>).</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><font face="Open Sans, Arial, sans-serif"><code>condition</code>이 </font><code>true</code>이면, 연산자는 <code>expr1</code>의 값을 반환하며, 반대의 경우 <code>expr2</code>를 반환한다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>여러분이 술을 마실수 있는지 확인할 수 있는 간단한 예제가 여기 있습니다.</p>
+
+<pre class="notranslate"><code>var age = 29;
+var canDrinkAlcohol = (age &gt; 19) ? "True, over 19" : "False, under 19";
+console.log(canDrinkAlcohol); // "True, over 19"</code>
+</pre>
+
+<p>isMember 변수의 값을 기준으로 다른 메시지를 보여주고자 한다면, 다음과 같이 표현할 수 있다.</p>
+
+<pre class="brush: js notranslate">"The fee is " + (isMember ? "$2.00" : "$10.00")
+</pre>
+
+<p>또한 다음과 같이 삼항(ternary)의 결과에 따라 변수를 할당할 수도 있다.</p>
+
+<pre class="brush: js notranslate">var elvisLives = Math.PI &gt; 4 ? "Yep" : "Nope";</pre>
+
+<p>다음의 예제처럼, 다중 삼항(ternary) 평가도 가능하다(주의: 조건 연산은 우측부터 그룹핑 됩니다.)</p>
+
+<pre class="brush: js notranslate">var firstCheck = false,
+ secondCheck = false,
+ access = firstCheck ? "Access denied" : secondCheck ? "Access denied" : "Access granted";
+
+console.log( access ); // logs "Access granted"</pre>
+
+<p>또한 다중 조건 IF 문과 같은 방식으로 여러개의 조건을 사용할 수도 있습니다.</p>
+
+<pre class="notranslate"><code>var condition1 = true,
+ condition2 = false,
+ access = condition1 ? (condition2 ? "true true": "true false") : (condition2 ? "false true" : "false false");
+
+console.log(access); // logs "true false"</code></pre>
+
+<p>참고 : 괄호는 필수는 아니며 기능에 영향을주지 않습니다. 결과가 어떻게 처리되는지 시각화하는 데 도움이됩니다.</p>
+
+<p>삼항(ternary) 평가는 다른 연산을 하기 위해 쓸 수도 있습니다.</p>
+
+<pre class="brush: js notranslate">var stop = false, age = 16;
+
+age &gt; 18 ? location.assign("continue.html") : stop = true;
+</pre>
+
+<p>하나의 케이스 당 둘 이상의 단일 작업을 수행하려면 쉼표로 구분하고 괄호로 묶으세요.</p>
+
+<pre class="brush: js notranslate">var stop = false, age = 23;
+
+age &gt; 18 ? (
+ alert("OK, you can go."),
+ location.assign("continue.html")
+) : (
+ stop = true,
+ alert("Sorry, you are much too young!")
+);
+</pre>
+
+<p>또한, 값을 할당하는 동안 하나 이상의 연산도 가능합니다. 이 경우에, 괄호 안의 값중 마지막 쉼표 (,) 다음의 값이 최종 할당 값이 됩니다.</p>
+
+<pre class="brush: js notranslate">var age = 16;
+
+var url = age &gt; 18 ? (
+ alert("OK, you can go."),
+ // alert returns "undefined", but it will be ignored because
+ // isn't the last comma-separated value of the parenthesis
+ "continue.html" // the value to be assigned if age &gt; 18
+) : (
+ alert("You are much too young!"),
+ alert("Sorry :-("),
+ // etc. etc.
+ "stop.html" // the value to be assigned if !(age &gt; 18)
+);
+
+location.assign(url); // "stop.html"</pre>
+
+
+
+<h3 id="삼항_연산자로_반환하기">삼항 연산자로 반환하기</h3>
+
+<p>삼항 연산자는 <code>if / else</code> 문을 사용하는 함수를 반환하는 데 적합합니다.</p>
+
+<pre class="notranslate"><code>var func1 = function( .. ) {
+ if (condition1) { return value1 }
+ else { return value2 }
+}
+
+var func2 = function( .. ) {
+ return condition1 ? value1 : value2
+}</code></pre>
+
+<p>다음과 같이 법적으로 술을 마실수 있는지 여부를 반환하는 함수를 만들수 있습니다.</p>
+
+<pre class="notranslate"><code>function canDrinkAlcohol(age) {
+ return (age &gt; 21) ? "True, over 21" : "False, under 21";
+}
+var output = canDrinkAlcohol(26);
+console.log(output); // "True, over 21"</code></pre>
+
+<p><code>if / else</code> 문을 대체하는 삼항연산자가 <code>return</code>을 여러 번 사용하고 if 블록 내부에서 한줄만 나올때 <code>return</code>을 대체 할 수 있는 좋은 방법이됩니다.</p>
+
+<p>삼항연산자를 여러 행으로 나누고 그 앞에 공백을 사용하면 긴 <code>if / else</code> 문을 매우 깔끔하게 만들 수 있습니다. 이것은 동일한 로직을 표현하지만 코드를 읽기 쉽게 만들어 줍니다.</p>
+
+<pre class="notranslate"><code>var func1 = function( .. ) {
+ if (condition1) { return value1 }
+ else if (condition2) { return value2 }
+ else if (condition3) { return value3 }
+ else { return value4 }
+}
+
+var func2 = function( .. ) {
+ return condition1 ? value1
+ : condition2 ? value2
+ : condition3 ? value3
+ : value4
+}</code>
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}</td>
+ <td>{{Spec2('ES6')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}</td>
+ <td>{{Spec2('ES5.1')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES1', '#sec-11.12', 'The conditional operator')}}</td>
+ <td>{{Spec2('ES1')}}</td>
+ <td>Initial definition. Implemented in JavaScript 1.0.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.operators.conditional")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/if...else">if statement</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/delete/index.html b/files/ko/web/javascript/reference/operators/delete/index.html
new file mode 100644
index 0000000000..037c3bcd98
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/delete/index.html
@@ -0,0 +1,282 @@
+---
+title: delete 연산자
+slug: Web/JavaScript/Reference/Operators/delete
+tags:
+ - JavaScript
+ - Operator
+ - Property
+ - Reference
+translation_of: Web/JavaScript/Reference/Operators/delete
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong><code>delete</code></strong> <strong>연산자</strong>는 객체의 속성을 제거합니다. 제거한 객체의 참조를 어디에서도 사용하지 않는다면 나중에 자원을 회수합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-deleteoperator.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">delete <em>expression</em> </pre>
+
+<p><code>expression</code>은 속성 참조여야 합니다. 예컨대,</p>
+
+<pre class="syntaxbox">delete <em>object.property</em>
+delete <em>object</em>['<em>property</em>']
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>객체의 이름, 또는 평가했을 때 객체를 반환하는 표현식.</dd>
+ <dt><code>property</code></dt>
+ <dd>제거하려는 속성.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p><code>true</code>. 단, 비엄격 모드에서 속성이 {{jsxref("Object.prototype.hasOwnProperty", "자신의 속성", "", 0)}}이며 <a href="/ko/docs/Web/JavaScript/Reference/Errors/Cant_delete">설정 불가능</a>한 경우 <code>false</code>.</p>
+
+<h3 id="예외">예외</h3>
+
+<p>엄격 모드에서, 속성이 자신의 속성이며 설정 불가능한 경우 {{jsxref("TypeError")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>일반적으로 생각하고 있는것과는 다르게 <code>delete</code> 는 메모리 해제에 관하여 직접적으로 어떠한 작업도 하지 않습니다. 메모리 관리는 breaking references를 통하여 간접적으로 일어납니다. 자세한 걸 알고 싶다면 <a href="/en-US/docs/Web/JavaScript/Memory_Management">memory management</a> 를 보세요.</p>
+
+<p><code><strong>delete</strong></code>연산자는 오브젝트로 부터 해당 프로퍼티를 삭제합니다. 삭제를 하면 true를 반환, 아니면 false를 반환합니다. 그렇지만 아래 경우를 고려해야만 합니다. </p>
+
+<ul>
+ <li>만약 존재하지 않는 속성을 삭제하려고 하면 delete는 어떠한 작업도 없이 true를 반환합니다.</li>
+ <li>오브젝트의 프로토타입 체인에 같은 이름의 속성이 있다면, 삭제 후에,  오브젝트의 프로토타입체인을 통해 프로퍼티를 사용 할 수 있습니다. (즉, <code>delete</code>는 오직 자신의 프로퍼티만 삭제 합니다.</li>
+ <li>{{jsxref("Statements/var","var")}}로 선언된 어떠한 프로퍼티라도 글로벌 스코프나 펑션 스코프로부터 삭제될 수 없습니다.
+ <ul>
+ <li>결국, <code>delete</code>는 글로벌 스코프의 어떤 함수도 삭제 할 수 없습니다. (함수 정의식이건 함수 표현식이건 삭제 불가)</li>
+ <li>오브젝트의 속성으로 있는 함수인 경우(글로벌 스코프를 제외하고)는 <code>delete</code>로 삭제할 수 있습니다.</li>
+ </ul>
+ </li>
+ <li>{{jsxref("Statements/let","let")}}과 {{jsxref("Statements/const","const")}}로 선언한 속성은 어느 스코프에 정의되어 있건 삭제 할 수 없습니다.</li>
+ <li>Non-configurable 속성은 삭제 할 수 없습니다. 이것은  {{jsxref("Math")}}, {{jsxref("Array")}}, {{jsxref("Object")}}와 같은 built-in objects의 속성들이나 {{jsxref("Object.defineProperty()")}} 같은 메소드로 만든 non-configurable속성들을 포함합니다.</li>
+</ul>
+
+<p>간단한 예제입니다.</p>
+
+<pre class="brush: js">var Employee = {
+  age: 28,
+ name: 'abc',
+ designation: 'developer'
+}
+
+console.log(delete Employee.name); // returns true
+console.log(delete Employee.age); // returns true
+
+// 존재하지 않는 속성을 삭제하려하면
+// true를 리턴합니다.
+console.log(delete Employee.salary); // returns true
+</pre>
+
+<h3 id="설정_불가능한_속성">설정 불가능한 속성</h3>
+
+<p>non-configurable 속성은 <code>delete</code>로 삭제할 수 없으며, <code>false</code>를 반환할 것입니다(*strict mode에서는 <code>SyntaxError</code>를 발생시킴).</p>
+
+<pre class="brush: js">var Employee = {};
+Object.defineProperty(Employee, 'name', {configurable: false});
+
+console.log(delete Employee.name); // returns false
+</pre>
+
+<p>{{jsxref("Statements/var","var")}}, {{jsxref("Statements/let","let")}}, {{jsxref("Statements/const","const")}}로 선언된 변수는 non-configurable 속성으로 구분되며, <code>delete</code>로 삭제될 수 없습니다.</p>
+
+<pre class="brush: js">var nameOther = 'XYZ';
+
+// 우리는 이를 사용해 글로벌 속성에 접근 할 수 있습니다:
+Object.getOwnPropertyDescriptor(window, 'nameOther');
+
+// output: Object { value: "XYZ",
+// writable: true,
+// enumerable: true,
+// <strong>configurable: false </strong>}
+
+// "nameOther"은 var로 선언되었기 때문에
+// 이는 "non-configurable" 속성으로 구분됩니다.
+
+delete nameOther; // return false</pre>
+
+<p>strict mode, this would have raised an exception.</p>
+
+<h3 id="엄격_vs._비엄격_모드">엄격 vs. 비엄격 모드</h3>
+
+<p>엄격 모드에서 <code>delete</code>로 변수나 함수를 삭제하려고 하면 {{jsxref("SyntaxError")}}가 발생합니다. </p>
+
+<p><code>var</code>로 정의된 변수는 non-configurable로 구분됩니다. 다음 예제에서, <code>salary</code>는 non-configurable이며 삭제될 수 없습니다. non-strict mode에서 non-configurable에 <code>delete</code>를 쓰면 <code>false</code>를 반환합니다.</p>
+
+<pre class="brush: js">function Employee() {
+ delete salary;
+ var salary;
+}
+
+Employee();
+</pre>
+
+<p>그러나 strict mode에서는 <code>false</code>를 반환하는 대신, <code>SyntaxError</code>를 발생시킵니다.</p>
+
+<pre class="brush: js">"use strict";
+
+function Employee() {
+  delete salary; // SyntaxError
+  var salary;
+}
+
+// 이와 마찬가지로, delete로 함수를 삭제하는 것도
+// SyntaxError를 발생시킵니다.
+
+function DemoFunction() {
+ //some code
+}
+
+delete DemoFunction; // SyntaxError
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">// 전역스코프에 adminName라는 프로퍼티를 만듭니다.
+adminName = 'xyz';
+
+// 전역스코프에 empCount라는 프로퍼티를 만듭니다.
+// var를 사용해서 선언했으므로, 이는 non-configurable로 구분됩니다.
+// let 이나 const를 사용하더라도 마찬가지로 non-configurable 입니다.
+var empCount = 43;
+
+EmployeeDetails = {
+ name: 'xyz',
+ age: 5,
+ designation: 'Developer'
+};
+
+// adminName은 전역변수입니다.
+// 이는 var를 사용하여 선언되지 않았기에 configurable하며 delete로 삭제될 수 있습니다.
+delete adminName; // returns true
+
+// 이와 반대로, empCount는 var를 사용하였기에 non-configurable이며
+// 그러므로 delete로 삭제할 수 없습니다.
+delete empCount; // returns false
+
+// delete는 객체의 프로퍼티를 지울 때 사용됩니다.
+delete EmployeeDetails.name; // returns true
+
+// 해당 프로퍼티가 존재하지 않는 상황에서도 "true"를 리턴합니다.
+delete EmployeeDetails.salary; // returns true
+
+// 내장되어있는 정적 프로퍼티에는 delete가 영향을 미치지 않습니다.
+delete Math.PI; // returns false
+
+// EmployeeDetails 은 전역스코프의 프로퍼티 입니다.
+// "var"를 사용하지 않고 선언되었기 때문에 이는 configurable입니다.
+delete EmployeeDetails; // returns true
+
+function f() {
+ var z = 44;
+
+ // 지역변수에는 delete가 영향을 미치지 않습니다.
+ delete z; // returns false
+}</pre>
+
+<h3 id="delete와_프로토타입_체인"><code>delete</code>와 프로토타입 체인</h3>
+
+<p>In the following example, we delete an own property of an object while a property with the same name is available on the prototype chain:</p>
+
+<pre class="brush: js">function Foo() {
+ this.bar = 10;
+}
+
+Foo.prototype.bar = 42;
+
+var foo = new Foo();
+
+// Returns true, since the own property
+// has been deleted on the foo object
+delete foo.bar;
+
+// foo.bar is still available, since it
+// is available in the prototype chain.
+console.log(foo.bar);
+
+// We delete the property on the prototype
+delete Foo.prototype.bar;
+
+// logs "undefined" since the property
+// is no longer inherited
+console.log(foo.bar); </pre>
+
+<h3 id="객체_요소_제거하기">객체 요소 제거하기</h3>
+
+<p>When you delete an array element, the array length is not affected. This holds even if you delete the last element of the array.</p>
+
+<p>When the <code>delete</code> operator removes an array element, that element is no longer in the array. In the following example, <code>trees[3]</code> is removed with <code>delete</code>.</p>
+
+<pre class="brush: js">var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
+delete trees[3];
+if (3 in trees) {
+ // this does not get executed
+}</pre>
+
+<p>If you want an array element to exist but have an undefined value, use the <code>undefined</code> value instead of the <code>delete</code> operator. In the following example, <code>trees[3]</code> is assigned the value undefined, but the array element still exists:</p>
+
+<pre class="brush: js">var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
+trees[3] = undefined;
+if (3 in trees) {
+ // this gets executed
+}</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-delete-operator', 'The delete Operator')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES6', '#sec-delete-operator', 'The delete Operator')}}</td>
+ <td>{{Spec2('ES6')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES5.1', '#sec-11.4.1', 'The delete Operator')}}</td>
+ <td>{{Spec2('ES5.1')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES1', '#sec-11.4.1', 'The delete Operator')}}</td>
+ <td>{{Spec2('ES1')}}</td>
+ <td>Initial definition. Implemented in JavaScript 1.2.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div id="compat-mobile">{{Compat("javascript.operators.delete")}}</div>
+
+<h2 id="크로스_브라우저_참고사항">크로스 브라우저 참고사항</h2>
+
+<p>Although ECMAScript makes iteration order of objects implementation-dependent, it may appear that all major browsers support an iteration order based on the earliest added property coming first (at least for properties not on the prototype). However, in the case of Internet Explorer, when one uses <code>delete</code> on a property, some confusing behavior results, preventing other browsers from using simple objects like object literals as ordered associative arrays. In Explorer, while the property <em>value</em> is indeed set to undefined, if one later adds back a property with the same name, the property will be iterated in its <em>old</em> position--not at the end of the iteration sequence as one might expect after having deleted the property and then added it back.</p>
+
+<p>If you want to use an ordered associative array in a cross-browser environment, use a {{jsxref("Map")}} object if available, or simulate this structure with two separate arrays (one for the keys and the other for the values), or build an array of single-property objects, etc.</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="http://perfectionkills.com/understanding-delete/">In depth analysis on delete</a></li>
+ <li>{{jsxref("Reflect.deleteProperty()")}}</li>
+ <li>{{jsxref("Map.prototype.delete()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/destructuring_assignment/index.html b/files/ko/web/javascript/reference/operators/destructuring_assignment/index.html
new file mode 100644
index 0000000000..d078e94c38
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/destructuring_assignment/index.html
@@ -0,0 +1,409 @@
+---
+title: 구조 분해 할당
+slug: Web/JavaScript/Reference/Operators/Destructuring_assignment
+tags:
+ - Destructuring
+ - ECMAScript 2015
+ - JavaScript
+ - Operator
+ - Reference
+ - 구조 분해
+translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>구조 분해 할당</strong> 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-destructuringassignment.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: js">var a, b, rest;
+[a, b] = [10, 20];
+console.log(a); // 10
+console.log(b); // 20
+
+[a, b, ...rest] = [10, 20, 30, 40, 50];
+console.log(a); // 10
+console.log(b); // 20
+console.log(rest); // [30, 40, 50]
+
+({ a, b } = { a: 10, b: 20 });
+console.log(a); // 10
+console.log(b); // 20
+
+
+// Stage 4(finished) proposal
+({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
+console.log(a); // 10
+console.log(b); // 20
+console.log(rest); // {c: 30, d: 40}
+</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>객체 및 배열 리터럴 표현식을 사용하면 즉석에서 쉽게 데이터 뭉치를 만들 수 있습니다.</p>
+
+<pre class="brush: js">var x = [1, 2, 3, 4, 5];</pre>
+
+<p>구조 분해 할당의 구문은 위와 비슷하지만, 대신 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지 정의합니다.</p>
+
+<pre class="brush: js">var x = [1, 2, 3, 4, 5];
+var [y, z] = x;
+console.log(y); // 1
+console.log(z); // 2
+</pre>
+
+<p>구조 분해 할당은 Perl이나 Python 등 다른 언어가 가지고 있는 기능입니다.</p>
+
+<h2 id="배열_구조_분해">배열 구조 분해</h2>
+
+<h3 id="기본_변수_할당">기본 변수 할당</h3>
+
+<pre class="brush: js">var foo = ["one", "two", "three"];
+
+var [one, two, three] = foo;
+console.log(one); // "one"
+console.log(two); // "two"
+console.log(three); // "three"
+</pre>
+
+<h3 id="선언에서_분리한_할당">선언에서 분리한 할당</h3>
+
+<p>변수의 선언이 분리되어도 구조 분해를 통해 값을 할당할 수 있습니다.</p>
+
+<pre class="brush:js">var a, b;
+
+[a, b] = [1, 2];
+console.log(a); // 1
+console.log(b); // 2
+</pre>
+
+<h3 id="기본값">기본값</h3>
+
+<p>변수에 기본값을 할당하면, 분해한 값이 {{jsxref("undefined")}}일 때 그 값을 대신 사용합니다.</p>
+
+<pre class="brush: js">var a, b;
+
+[a=5, b=7] = [1];
+console.log(a); // 1
+console.log(b); // 7
+</pre>
+
+<h3 id="변수_값_교환하기">변수 값 교환하기</h3>
+
+<p>하나의 구조 분해 표현식만으로 두 변수의 값을 교환할 수 있습니다.</p>
+
+<p>구조 분해 할당 없이 두 값을 교환하려면 임시 변수가 필요합니다. (일부 로우 레벨 언어에서는 <a class="external" href="http://en.wikipedia.org/wiki/XOR_swap">XOR 교체 트릭</a>을 사용할 수 있습니다)</p>
+
+<pre class="brush:js">var a = 1;
+var b = 3;
+
+[a, b] = [b, a];
+console.log(a); // 3
+console.log(b); // 1
+</pre>
+
+<h3 id="함수가_반환한_배열_분석">함수가 반환한 배열 분석</h3>
+
+<p>함수는 이전부터 배열을 반환할 수 있었습니다. 구조 분해를 사용하면 반환된 배열에 대한 작업을 더 간결하게 수행할 수 있습니다.</p>
+
+<p>아래 예제에서 <code>f()</code>는 출력으로 배열 <code>[1, 2]</code>을 반환하는데, 하나의 구조 분해만으로 값을 분석할 수 있습니다.</p>
+
+<pre class="brush:js">function f() {
+ return [1, 2];
+}
+
+var a, b;
+[a, b] = f();
+console.log(a); // 1
+console.log(b); // 2
+</pre>
+
+<h3 id="일부_반환_값_무시하기">일부 반환 값 무시하기</h3>
+
+<p>다음과 같이 필요하지 않은 반환 값을 무시할 수 있습니다.</p>
+
+<pre class="brush:js">function f() {
+ return [1, 2, 3];
+}
+
+var [a, , b] = f();
+console.log(a); // 1
+console.log(b); // 3
+</pre>
+
+<p>반환 값을 모두 무시할 수도 있습니다.</p>
+
+<pre class="brush:js">[,,] = f();
+</pre>
+
+<h3 id="변수에_배열의_나머지를_할당하기">변수에 배열의 나머지를 할당하기</h3>
+
+<p>배열을 구조 분해할 경우, 나머지 구문을 이용해 분해하고 남은 부분을 하나의 변수에 할당할 수 있습니다.</p>
+
+<pre class="brush: js">var [a, ...b] = [1, 2, 3];
+console.log(a); // 1
+console.log(b); // [2, 3]
+</pre>
+
+<p>나머지 요소의 오른쪽 뒤에 쉼표가 있으면 {{jsxref("SyntaxError")}}가 발생합니다.</p>
+
+<pre class="brush: js example-bad">var [a, ...b,] = [1, 2, 3];
+// SyntaxError: rest element may not have a trailing comma
+</pre>
+
+<h3 id="정규_표현식과_일치하는_값_해체하기">정규 표현식과 일치하는 값 해체하기</h3>
+
+<p>정규 표현식의 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec"> exec()</a></code> 메서드는 일치하는 부분를 찾으면 그 문자열에서 정규식과 일치하는 부분 전체를 배열의 맨 앞에, 그리고 그 뒤에 정규식에서 괄호로 묶인 각 그룹과 일치하는 부분을 포함하는 배열을 반환합니다. 구조 분해 할당은 필요하지 않은 경우 일치하는 전체 부분은 무시하고 필요한 부분만 쉽게 빼올 수 있습니다.</p>
+
+<pre class="brush: js">function parseProtocol(url) {
+ var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
+ if (!parsedURL) {
+ return false;
+ }
+ console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]
+
+ var [, protocol, fullhost, fullpath] = parsedURL;
+ return protocol;
+}
+
+console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https"</pre>
+
+<h2 id="객체_구조_분해">객체 구조 분해</h2>
+
+<h3 id="기본_할당">기본 할당</h3>
+
+<pre class="brush: js">var o = {p: 42, q: true};
+var {p, q} = o;
+
+console.log(p); // 42
+console.log(q); // true
+</pre>
+
+<h3 id="선언_없는_할당">선언 없는 할당</h3>
+
+<p>구조 분해를 통해 변수의 선언과 분리하여 변수에 값을 할당할 수 있습니다.</p>
+
+<pre class="brush:js">var a, b;
+
+({a, b} = {a: 1, b: 2});</pre>
+
+<div class="note">
+<p><strong>참고</strong>: 할당 문을 둘러싼 <code>( .. )</code>는 선언 없이 객체 리터럴(object literal) 비구조화 할당을 사용할 때 필요한 구문입니다.</p>
+
+<p><code>{a, b} = {a:1, b:2}</code>는 유효한 독립 구문이 아닙니다. 좌변의 <code>{a, b}</code>이 객체 리터럴이 아닌 블록으로 간주되기 때문입니다.</p>
+
+<p>하지만, <code>({a, b} = {a:1, b:2})</code>는 유효한데, <code>var {a, b} = {a:1, b:2}</code>와 같습니다.</p>
+
+<p><code>( .. )</code> 표현식 앞에는 세미콜론이 있어야 합니다. 그렇지 않을 경우 이전 줄과 연결되어 함수를 실행하는데 이용될 수 있습니다.</p>
+</div>
+
+<h3 id="새로운_변수_이름으로_할당하기">새로운 변수 이름으로 할당하기</h3>
+
+<p>객체로부터 속성을 해체하여 객체의 원래 속성명과는 다른 이름의 변수에 할당할 수 있습니다.</p>
+
+<pre class="brush: js">var o = {p: 42, q: true};
+var {p: foo, q: bar} = o;
+
+console.log(foo); // 42
+console.log(bar); // true</pre>
+
+<h3 id="기본값_2">기본값</h3>
+
+<p>객체로부터 해체된 값이 <code>undefined</code>인 경우, 변수에 기본값을 할당할 수 있습니다.</p>
+
+<pre class="brush: js">var {a = 10, b = 5} = {a: 3};
+
+console.log(a); // 3
+console.log(b); // 5</pre>
+
+<h3 id="기본값_갖는_새로운_이름의_변수에_할당하기">기본값 갖는 새로운 이름의 변수에 할당하기</h3>
+
+<p>새로운 변수명 할당과 기본값 할당을 한번에 할 수 있습니다.</p>
+
+<pre class="brush: js">var {a: aa = 10, b: bb = 5} = {a: 3};
+
+console.log(aa); // 3
+console.log(bb); // 5
+</pre>
+
+<h3 id="함수_매개변수의_기본값_설정하기">함수 매개변수의 기본값 설정하기</h3>
+
+<h4 id="ES5_버전">ES5 버전</h4>
+
+<pre class="brush: js">function drawES5Chart(options) {
+ options = options === undefined ? {} : options;
+ var size = options.size === undefined ? 'big' : options.size;
+ var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;
+ var radius = options.radius === undefined ? 25 : options.radius;
+ console.log(size, cords, radius);
+ // 이제 드디어 차트 그리기 수행
+}
+
+drawES5Chart({
+ cords: { x: 18, y: 30 },
+ radius: 30
+});</pre>
+
+<h4 id="ES2015_버전">ES2015 버전</h4>
+
+<pre class="brush: js">function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) {
+ console.log(size, cords, radius);
+ // 차트 그리기 수행
+}
+
+drawES2015Chart({
+ cords: { x: 18, y: 30 },
+ radius: 30
+});</pre>
+
+<div class="note">
+<p>위의 <strong><code>drawES2015Chart</code></strong> 함수의 원형에서 구조 분해된 좌변에 빈 오브젝트 리터럴을 할당하는 것을 볼 수 있습니다 <code>{size = 'big', cords = {x: 0, y: 0}, radius = 25} = {}</code>. 빈 오브젝트를 우변에 할당하지 않고도 함수를 작성할 수 있습니다. 하지만, 지금의 형태에서는 단순히 <code><strong>drawES2015Chart()</strong></code>와 같이 어떤 매개변수 없이도 호출할 수 있지만, 우변의 빈 오브젝트 할당을 없앤다면 함수 호출시 적어도 하나의 인자가 제공되어야만 합니다. 이 함수가 어떠한 매개변수 없이도 호출할 수 있길 원한다면 지금 형태가 유용하고, 무조건 객체를 넘기길 원하는 경우에는 빈 객체 할당을 하지 않는 것이 유용할 수 있습니다.</p>
+</div>
+
+<h3 id="중첩된_객체_및_배열의_구조_분해">중첩된 객체 및 배열의 구조 분해</h3>
+
+<pre class="brush:js">var metadata = {
+ title: "Scratchpad",
+ translations: [
+ {
+ locale: "de",
+ localization_tags: [ ],
+ last_edit: "2014-04-14T08:43:37",
+ url: "/de/docs/Tools/Scratchpad",
+ title: "JavaScript-Umgebung"
+ }
+ ],
+ url: "/en-US/docs/Tools/Scratchpad"
+};
+
+var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
+
+console.log(englishTitle); // "Scratchpad"
+console.log(localeTitle); // "JavaScript-Umgebung"</pre>
+
+<h3 id="for_of_반복문과_구조_분해">for of 반복문과 구조 분해</h3>
+
+<pre class="brush: js">var people = [
+ {
+ name: "Mike Smith",
+ family: {
+ mother: "Jane Smith",
+ father: "Harry Smith",
+ sister: "Samantha Smith"
+ },
+ age: 35
+ },
+ {
+ name: "Tom Jones",
+ family: {
+ mother: "Norah Jones",
+ father: "Richard Jones",
+ brother: "Howard Jones"
+ },
+ age: 25
+ }
+];
+
+for (var {name: n, family: { father: f } } of people) {
+ console.log("Name: " + n + ", Father: " + f);
+}
+
+// "Name: Mike Smith, Father: Harry Smith"
+// "Name: Tom Jones, Father: Richard Jones"</pre>
+
+<h3 id="함수_매개변수로_전달된_객체에서_필드_해체하기">함수 매개변수로 전달된 객체에서 필드 해체하기</h3>
+
+<pre class="brush:js">function userId({id}) {
+ return id;
+}
+
+function whois({displayName: displayName, fullName: {firstName: name}}){
+ console.log(displayName + " is " + name);
+}
+
+var user = {
+ id: 42,
+ displayName: "jdoe",
+ fullName: {
+ firstName: "John",
+ lastName: "Doe"
+ }
+};
+
+console.log("userId: " + userId(user)); // "userId: 42"
+whois(user); // "jdoe is John"</pre>
+
+<p>이 예제는 user 객체로부터 <code>id</code>, <code>displayName</code> 및 <code>firstName</code> 을 해체해 출력합니다.</p>
+
+<h3 id="계산된_속성_이름과_구조_분해">계산된 속성 이름과 구조 분해</h3>
+
+<p>계산된 속성 이름(computed property name)은, <a href="/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names" title="object literals">객체 리터럴</a>과 비슷하게 구조 분해에도 사용될 수 있습니다.</p>
+
+<pre class="brush: js">let key = "z";
+let { [key]: foo } = { z: "bar" };
+
+console.log(foo); // "bar"
+</pre>
+
+<h3 id="객체_구조_분해에서_Rest">객체 구조 분해에서 Rest</h3>
+
+<p><a class="external external-icon" href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a> 제안(stage 3)에서는 구조 분해에 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a> 구문을 추가하고 있습니다. rest 속성은 구조 분해 패턴으로 걸러지지 않은 열거형 속성의 키를 가진 나머지 항목들을 모읍니다.</p>
+
+<pre class="brush: js">let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
+a; // 10
+b; // 20
+rest; // { c: 30, d: 40 }
+</pre>
+
+<h3 id="속성_이름이_유효한_JavaScript_식별자명이_아닌_경우">속성 이름이 유효한 JavaScript 식별자명이 아닌 경우</h3>
+
+<p>구조 분해는 JavaScript {{glossary("Identifier", "식별자")}} 이름으로 적합하지 않은 속성명이 제공된 경우에도 이용할 수 있습니다. 이 때는 대체할 유효한 식별자명을 제공해야 합니다.</p>
+
+<pre class="brush: js">const foo = { 'fizz-buzz': true };
+const { 'fizz-buzz': fizzBuzz } = foo;
+
+console.log(fizzBuzz); // "true"
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td>
+ <td>{{Spec2('ES2015')}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("javascript.operators.destructuring")}}</p>
+</div>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators" title="Assignment operators">할당 연산자</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/">"ES6 in Depth: Destructuring" on hacks.mozilla.org</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/equality/index.html b/files/ko/web/javascript/reference/operators/equality/index.html
new file mode 100644
index 0000000000..5ebe238590
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/equality/index.html
@@ -0,0 +1,123 @@
+---
+title: 동등 연산자(==)
+slug: Web/JavaScript/Reference/Operators/Equality
+translation_of: Web/JavaScript/Reference/Operators/Equality
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>동등 연산자(==)는 두 개의 피연산자가 동일한지 확인하며, Boolean값을 반환합니다. <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality">일치 연산자</a>(===)와는 다르게 다른 타입의 피연산자들끼리의 비교를 시도합니다. </p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-equality.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox notranslate">x == y
+</pre>
+
+<h2 id="상세_설명">상세 설명</h2>
+
+<p>동등 연산자 (<code>==</code> 와 <code>!=</code>)는 두 피연산자를 비교하기 위해 <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">Abstract Equality Comparison Algorithm</a>를 사용합니다. 다음과 같이 간략히 설명할 수 있습니다:</p>
+
+<ul>
+ <li>두 피연산자가 모두 객체일때, 두 피연산자가 동일한 객체를 참조할때에만 true를 반환합니다.</li>
+ <li>하나의 피연산자가 <code>null</code>이고 다른 하나가 <code>undefined</code>일때, <code>true</code>를 반환합니다.</li>
+ <li>두 피연산자의 타입이 다를 경우, 비교하기 전에 동일한 타입으로 변환하도록 합니다:
+ <ul>
+ <li>숫자와 문자열을 비교할 경우, 문자열을 숫자로 변환하도록 합니다.</li>
+ <li>하나의 피연산자가 <code>Boolean</code>일 경우, Boolean 피연산자가 true일 경우 1로 변환하고, false일 경우, +0으로 변환합니다.</li>
+ <li>하나의 피연산자가 객체이고 다른하나가 숫자나 문자열이면, 객체를  <code>valueOf()</code>나<code>toString()</code>를 사용해 기본 데이터 타입으로 변환하도록 합니다.</li>
+ </ul>
+ </li>
+ <li>두개의 피연산자가 동일한 타입일 경우, 다음과 같이 비교됩니다:
+ <ul>
+ <li><code>String</code>: 두 피연산자가 동일한 문자순서가 동일한 문자열일 경우, <code>true</code>를 반환합니다.</li>
+ <li><code>Number</code>: 두 피연산자가 동일한 값을 가질 경우, <code>true</code>을 반환합니다. +0 과 -0 은 동일한 값으로 취급합니다. 어느 한쪽이 <code>NaN</code>일 경우, <code>false</code>를 반환합니다.</li>
+ <li><code>Boolean</code>: 두 피연산자가 모두 <code>true</code>이거나, 모두 <code>false</code>일 경우, <code>true</code>를 반환합니다. </li>
+ </ul>
+ </li>
+</ul>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality">일치연산자</a> (<code>===</code>)와의 가장 두드러지는 차이점은 일치 연산자는 타입변환을 시도하지 않는다는 것입니다. 일치 연산자는 다른 타입을 가진 피연산자는 다르다고 판단합니다.</p>
+
+<h2 id="예시">예시</h2>
+
+<h3 id="타입변환_없이_비교">타입변환 없이 비교</h3>
+
+<pre class="brush: js notranslate">1 == 1; // true
+"hello" == "hello"; // true</pre>
+
+<h3 id="타입변환을_이용한_비교">타입변환을 이용한 비교</h3>
+
+<pre class="brush: js notranslate">"1" == 1; // true
+1 == "1"; // true
+0 == false; // true
+0 == null; // false
+0 == undefined; // false
+0 == !!null; // true, look at Logical NOT operator
+0 == !!undefined; // true, look at Logical NOT operator
+null == undefined; // true
+
+const number1 = new Number(3);
+const number2 = new Number(3);
+number1 == 3; // true
+number1 == number2; // false</pre>
+
+<h3 id="객체들_간의_비교">객체들 간의 비교</h3>
+
+<pre class="brush: js notranslate">const object1 = {"key": "value"}
+const object2 = {"key": "value"};
+
+object1 == object2 // false
+object2 == object2 // true</pre>
+
+<h3 id="String과_String_objects의_비교">String과 String objects의 비교</h3>
+
+<p><code>new String()</code> 을 통해 생성된 문자열들은 객체입니다. 이 객체중 하나를 문자열과 비교한다면, <code>String</code> 객체가 문자열로 변환된 후 비교될 것입니다. 그러나 두개의 피연산자 모두 <code>String</code> 객체라면, 객체로써 비교가 이루어지기 때문에 같은 값으로 취급될려면 같은 객체를 참조하고 있어야 합니다:</p>
+
+<pre class="brush: js notranslate">const string1 = "hello";
+const string2 = String("hello");
+const string3 = new String("hello");
+const string4 = new String("hello");
+
+console.log(string1 == string2); // true
+console.log(string1 == string3); // true
+console.log(string2 == string3); // true
+console.log(string3 == string4); // false
+console.log(string4 == string4); // true</pre>
+
+<h3 id="Comparing_Dates_and_strings">Comparing Dates and strings</h3>
+
+<pre class="brush: js notranslate">const d = new Date('December 17, 1995 03:24:00');
+const s = d.toString(); // for example: "Sun Dec 17 1995 03:24:00 GMT-0800 (Pacific Standard Time)"
+console.log(d == s); //true</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Specification</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.operators.equality")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Inequality">Inequality operator</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality">Strict equality operator</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Strict_inequality">Strict inequality operator</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/expression_closures/index.html b/files/ko/web/javascript/reference/operators/expression_closures/index.html
new file mode 100644
index 0000000000..bf44be6cd7
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/expression_closures/index.html
@@ -0,0 +1,79 @@
+---
+title: 표현식 클로저
+slug: Web/JavaScript/Reference/Operators/Expression_closures
+tags:
+ - Function
+ - JavaScript
+ - Non-standard
+ - Obsolete
+ - Operator
+ - Reference
+translation_of: Archive/Web/JavaScript/Expression_closures
+---
+<div>{{JSSidebar("Operators")}}{{Non-standard_Header}}{{Obsolete_Header("gecko60")}}
+<div class="warning"><strong>Non-standard. Do not use!</strong><br>
+The expression closure syntax is a deprecated Firefox-specific feature and has been removed starting with Firefox 60. For future-facing usages, consider using <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>.</div>
+</div>
+
+<p>클로져는 간단한 함수를 작성하기 위한 짧은 함수구문 입니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]])
+ <em>expression</em>
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>함수의 이름입니다. 익명함수의 경우에는 생략할 수 있습니다. 이름은 함수본문에만 국한됩니다.</dd>
+ <dt><code>paramN</code></dt>
+ <dd>함수에 전달할 인수의 이름입니다. 함수는 최대 255개의 인수를 가질 수 있습니다.</dd>
+ <dt><code>expression</code></dt>
+ <dd>함수의 본문을 구성하는 표현식입니다.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>이 추가적인 기능은 <a class="external" href="http://en.wikipedia.org/wiki/Lambda_calculus#Lambda_calculus_and_programming_languages">람다 표기법</a>과 비슷한 언어를 제공하기위해 간단한 기능을 작성하는데 필요한 단축형일 뿐입니다.</p>
+
+<p>JavaScript 1.7 and older:</p>
+
+<pre class="brush: js">function(x) { return x * x; }</pre>
+
+<p>JavaScript 1.8:</p>
+
+<pre class="brush: js">function(x) x * x</pre>
+
+<p>이 구문을 사용하면 중괄호나 'return'문을 생략하여 암시적으로 만들 수 있습니다. 코드를 더 짧게 만들 수 있는 것 이외의 이방법으로 얻을 수 있는 추가 이점은 없습니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>바인딩 이벤트 리스너의 간단한 예제:</p>
+
+<pre class="brush: js"> document.addEventListener('click', function() false, true);
+</pre>
+
+<p>JavaScript 1.6의 일부 배열 함수에 이 표기법을 사용합니다:</p>
+
+<pre class="brush: js">elems.some(function(elem) elem.type == 'text');
+</pre>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.operators.expression_closures")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function", "function statement")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Statements/function*", "function* statement")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/function/index.html b/files/ko/web/javascript/reference/operators/function/index.html
new file mode 100644
index 0000000000..5f4977bfc7
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/function/index.html
@@ -0,0 +1,154 @@
+---
+title: 함수 표현식
+slug: Web/JavaScript/Reference/Operators/function
+tags:
+ - Function
+ - JavaScript
+ - Operator
+ - Primary Expressions
+translation_of: Web/JavaScript/Reference/Operators/function
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong><code>function</code></strong> 키워드는 어떤 표현식(expression) 내에서 함수를 정의하는 데 사용될 수 있습니다.</p>
+
+<p>또한 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a> 생성자와 <a href="/ko/docs/Web/JavaScript/Reference/Statements/function">함수 선언(function declaration)</a>을 이용해 함수를 정의할 수도 있습니다.  </p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-functionexpression.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">var myFunction = function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { <em>statements </em>};</pre>
+
+<p><a href="/ko/docs/">ES2015</a>에서 <a href="/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98">화살표 함수(arrow functions)</a>를 사용할 수도 있습니다.</p>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>함수 이름. 함수가 이름 없는(anonymous) 함수인 경우, 생략될 수 있음. 이 함수 이름은 함수의 몸통 내에서만 사용할 수 있습니다.</dd>
+ <dt><code>paramN</code></dt>
+ <dd>함수로 전달되는 인수(argument) 의 이름.</dd>
+ <dt><code>statements</code></dt>
+ <dd>함수 몸통을 구성하는 문(statement).</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>함수 표현식(function expression)은 function 문과 매우 비슷하고 구문(syntax)이 거의 같습니다 (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Statements/function" title="function statement">function 문</a> 참조). 함수 표현식과 function 문 사이의 주요 차이점은 함수 이름으로, 함수 표현식으로 <em>익명</em> 함수를 만들 경우 이 이름을 생략할 수 있습니다. 함수 표현식은 정의하자마자 실행되는  <a href="https://developer.mozilla.org/en-US/docs/Glossary/IIFE">IIFE (즉시 호출되는 함수 표현식)</a>로 사용될 수 있습니다. 더 자세한 정보는 <a href="/ko/docs/Web/JavaScript/Reference/Functions" title="functions">함수</a> 장 참조.</p>
+
+<h3 id="Function_expression_끌어올리기">Function expression 끌어올리기</h3>
+
+<p>자바스크립트에서 함수 표현식은 {{jsxref("Statements/function", "함수 선언", "#Function_declaration_hoisting")}}과는 달리 끌어올려지지 않습니다. 함수 표현식을 정의하기 전에는 사용할 수 없습니다.</p>
+
+<pre><code>console.log(notHoisted) // undefined
+//even the variable name is hoisted, the definition wasn't. so it's undefined.
+notHoisted(); // TypeError: notHoisted is not a function
+
+var notHoisted = function() {
+ console.log('bar');
+};</code></pre>
+
+<h3 id="유명(named)_함수_표현식">유명(named) 함수 표현식</h3>
+
+<p>함수 몸통 안 쪽에서 현재 함수를 참고하고 싶다면, 유명 함수를 생성해야 합니다. <u><strong>이 함수 이름은 함수의 몸통(범위) 안에서만 사용할 수 있습니다</strong></u>. 이로써 비표준 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code> 속성을 사용하는 것을 피할 수도 있습니다.</p>
+
+<pre><code>var math = {
+ 'factit': function factorial(n) {
+ console.log(n)
+ if (n &lt;= 1)
+ return 1;
+ return n * factorial(n - 1);
+ }
+};
+
+math.factit(3) //3;2;1;</code>
+</pre>
+
+<p>함수가 할당된 변수는 <code>name</code> 속성을 가지게됩니다. 다른 변수에 할당되더라도 그 name 속성의 값은 변하지 않습니다. 함수의 이름이 생략되었다면, name 속성의 값은 그 변수의 이름(암묵적 이름)이 될 것입니다. 함수의 이름이 있다면 name 속성의 값은 그 함수의 이름(명시적 이름)이 될 것입니다. 이는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">화살표 함수(arrow functions)</a>에도 적용됩니다 (화살표 함수는 이름을 가지지 않으므로 해당 변수에 암묵적인 이름만 줄 수 있습니다).</p>
+
+<pre><code>var foo = function() {}
+foo.name // "foo"
+
+var foo2 = foo
+foo2.name // "foo"
+
+var bar = function baz() {}
+bar.name // "baz"
+
+console.log(foo === foo2); // true
+console.log(typeof baz); // undefined
+console.log(bar === baz); // false (errors because baz == undefined)</code>
+</pre>
+
+<p> </p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>다음 예제는 이름 없는 함수를 정의하고 그 함수를 <code>x</code>에 할당합니다. 함수는 인수의 제곱을 반환합니다:</p>
+
+<pre><code>var x = function(y) {
+ return y * y;
+};</code></pre>
+
+<p><a href="https://developer.mozilla.org/ko/docs/Glossary/Callback_function">callback</a>으로 더 자주 사용됩니다:</p>
+
+<pre><code>button.addEventListener('click', function(event) {
+ console.log('button is clicked!')
+})</code></pre>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="스펙">스펙</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">스펙</th>
+ <th scope="col">상태</th>
+ <th scope="col">설명</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td>
+ <td>{{Spec2('ES6')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td>
+ <td>{{Spec2('ES5.1')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td>
+ <td>{{Spec2('ES3')}}</td>
+ <td>초기 정의. JavaScript 1.5에서 구현됨.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.operators.function")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Arrow_functions", "Arrow functions")}}</li>
+ <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function", "function statement")}}</li>
+ <li>{{jsxref("Statements/function*", "function* statement")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li>{{jsxref("Statements/async_function", "async function")}}</li>
+ <li>{{jsxref("Operators/async_function", "async function expression")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/function_star_/index.html b/files/ko/web/javascript/reference/operators/function_star_/index.html
new file mode 100644
index 0000000000..7187f985bc
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/function_star_/index.html
@@ -0,0 +1,85 @@
+---
+title: function* expression
+slug: Web/JavaScript/Reference/Operators/function*
+tags:
+ - ECMAScript6
+ - Function
+ - Generator
+ - JavaScript
+translation_of: Web/JavaScript/Reference/Operators/function*
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong><code>function*</code></strong> keyword 는 표현식 내에서 generator function 을 정의합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-functionasteriskexpression.html")}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">function* [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) {
+ <em>statements</em>
+}</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>함수명. 생략하면, 익명 함수가 됩니다.  함수명은 함수내에만 한정됩니다.</dd>
+ <dt><code>paramN</code></dt>
+ <dd>함수에 전달되는 인수의 이름. 함수는 최대 255 개의 인수를 가질 수 있습니다.</dd>
+ <dt><code>statements</code></dt>
+ <dd>함수의 본체를 구성하는 구문들.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p><code>function*</code> expression 은 {{jsxref('Statements/function*', 'function* statement')}} 과 매우 유사하고 형식도 같습니다. <code>function*</code> expression 과 <code>function*</code> statement 의 주요한 차이점은 함수명으로,<em> </em><code>function*</code> expressions 에서는 익명 함수로 만들기 위해 함수명이 생략될 수 있습니다.보다 자세한 내용은 <a href="/ko/docs/Web/JavaScript/Reference/Functions">functions</a> 을 참조하십시오.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>아래의 예제는 이름이 없는 generator function 을 정의하고 이를 x 에 할당합니다. function 은 인자로 들어온 값의 제곱을 생산(yield)합니다.</p>
+
+<pre class="brush: js">var x = function*(y) {
+ yield y * y;
+};
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES2015', '#', 'function*')}}</td>
+ <td>{{Spec2('ES2015')}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#', 'function*')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("javascript.operators.function_star")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Statements/function*", "function* statement")}}</li>
+ <li>{{jsxref("GeneratorFunction")}} object</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li>
+ <li>{{jsxref("Operators/yield", "yield")}}</li>
+ <li>{{jsxref("Operators/yield*", "yield*")}}</li>
+ <li>{{jsxref("Function")}} object</li>
+ <li>{{jsxref("Statements/function", "function statement")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/generator_comprehensions/index.html b/files/ko/web/javascript/reference/operators/generator_comprehensions/index.html
new file mode 100644
index 0000000000..927b613dc6
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/generator_comprehensions/index.html
@@ -0,0 +1,174 @@
+---
+title: 생성기 내포
+slug: Web/JavaScript/Reference/Operators/Generator_comprehensions
+tags:
+ - JavaScript
+ - Non-standard
+ - Obsolete
+ - Reference
+translation_of: Archive/Web/JavaScript/Generator_comprehensions
+---
+<div>{{JSSidebar("Operators")}}{{Non-standard_Header}}{{Obsolete_Header("gecko58")}}
+<div class="blockIndicator warning">
+<p><strong>Non-standard. Do not use!</strong><br>
+ The generator comprehensions syntax is non-standard and removed starting with Firefox 58. For future-facing usages, consider using {{JSxRef("Statements/function*", "generator", "", 1)}}.</p>
+</div>
+</div>
+
+<p>The <strong>generator comprehension</strong> syntax was a JavaScript expression which allowed you to quickly assemble a new generator function based on an existing iterable object. However, it has been removed from the standard and the Firefox implementation. Do not use it!</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">(for (x of iterable) x)
+(for (x of iterable) if (condition) x)
+(for (x of iterable) for (y of iterable) x + y)
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Inside generator comprehensions, these two kinds of components are allowed:</p>
+
+<ul>
+ <li>{{JSxRef("Statements/for...of", "for...of")}} and</li>
+ <li>{{JSxRef("Statements/if...else", "if")}}</li>
+</ul>
+
+<p>The <code>for-of</code> iteration is always the first component. Multiple <code>for-of</code> iterations or if statements are allowed.</p>
+
+<p>A significant drawback of {{JSxRef("Operators/Array_comprehensions","array comprehensions","","true")}} is that they cause an entire new array to be constructed in memory. When the input to the comprehension is itself a small array the overhead involved is insignificant — but when the input is a large array or an expensive (or indeed infinite) generator the creation of a new array can be problematic.</p>
+
+<p>Generators enable lazy computation of sequences, with items calculated on-demand as they are needed. Generator comprehensions are syntactically almost identical to array comprehensions — they use parentheses instead of braces— but instead of building an array they create a generator that can execute lazily. You can think of them as short hand syntax for creating generators.</p>
+
+<p>Suppose we have an iterator <code>it</code> which iterates over a large sequence of integers. We want to create a new iterator that will iterate over their doubles. An array comprehension would create a full array in memory containing the doubled values:</p>
+
+<pre class="brush: js">var doubles = [for (i in it) i * 2];
+</pre>
+
+<p>A generator comprehension on the other hand would create a new iterator which would create doubled values on demand as they were needed:</p>
+
+<pre class="brush: js">var it2 = (for (i in it) i * 2);
+console.log(it2.next()); // The first value from it, doubled
+console.log(it2.next()); // The second value from it, doubled
+</pre>
+
+<p>When a generator comprehension is used as the argument to a function, the parentheses used for the function call means that the outer parentheses can be omitted:</p>
+
+<pre class="brush: js">var result = doSomething(for (i in it) i * 2);
+</pre>
+
+<p>The significant difference between the two examples being that by using the generator comprehension, you would only have to loop over the 'obj' structure once, total, as opposed to once when comprehending the array, and again when iterating through it.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Simple_generator_comprehensions">Simple generator comprehensions</h3>
+
+<pre class="brush:js">(for (i of [1, 2, 3]) i * i );
+// generator function which yields 1, 4, and 9
+
+[...(for (i of [1, 2, 3]) i * i )];
+// [1, 4, 9]
+
+var abc = ['A', 'B', 'C'];
+(for (letters of abc) letters.toLowerCase());
+// generator function which yields "a", "b", and "c"
+</pre>
+
+<h3 id="Generator_comprehensions_with_if_statement">Generator comprehensions with if statement</h3>
+
+<pre class="brush: js">var years = [1954, 1974, 1990, 2006, 2010, 2014];
+
+(for (year of years) if (year &gt; 2000) year);
+// generator function which yields 2006, 2010, and 2014
+
+(for (year of years) if (year &gt; 2000) if (year &lt; 2010) year);
+// generator function which yields 2006, the same as below:
+
+(for (year of years) if (year &gt; 2000 &amp;&amp; year &lt; 2010) year);
+// generator function which yields 2006
+</pre>
+
+<h3 id="Generator_comprehensions_compared_to_generator_function">Generator comprehensions compared to generator function</h3>
+
+<p>An easy way to understand generator comprehension syntax, is to compare it with the generator function.</p>
+
+<p>Example 1: Simple generator.</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3];
+
+// Generator function
+(function*() {
+ for (let i of numbers) {
+ yield i * i;
+ }
+})();
+
+// Generator comprehension
+(for (i of numbers) i * i );
+
+// Result: both return a generator which yields [1, 4, 9]
+</pre>
+
+<p>Example 2: Using <code>if</code> in generator.</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3];
+
+// Generator function
+(function*() {
+ for (let i of numbers) {
+ if (i &lt; 3) {
+ yield i * 1;
+ }
+ }
+})();
+
+// Generator comprehension
+(for (i of numbers) if (i &lt; 3) i);
+
+// Result: both return a generator which yields [1, 2]</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p>Generator comprehensions were initially in the ECMAScript 2015 draft, but got removed in revision 27 (August 2014). Please see older revisions of ES2015 for specification semantics.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.operators.generator_comprehensions")}}</p>
+
+<h2 id="Differences_to_the_older_JS1.7JS1.8_comprehensions">Differences to the older JS1.7/JS1.8 comprehensions</h2>
+
+<div class="blockIndicator warning">JS1.7/JS1.8 comprehensions are removed from Gecko 46 ({{bug(1220564)}}).</div>
+
+<p><strong>Old comprehensions syntax (do not use anymore!):</strong></p>
+
+<pre class="brush: js example-bad">(X for (Y in Z))
+(X for each (Y in Z))
+(X for (Y of Z))
+</pre>
+
+<p>Differences:</p>
+
+<ul>
+ <li>ES7 comprehensions create one scope per "for" node instead of the comprehension as a whole.
+ <ul>
+ <li>Old: <code>[...(()=&gt;x for (x of [0, 1, 2]))][1]() // 2</code></li>
+ <li>New: <code>[...(for (x of [0, 1, 2]) ()=&gt;x)][1]() // 1, each iteration creates a fresh binding for x. </code></li>
+ </ul>
+ </li>
+ <li>ES7 comprehensions start with "for" instead of the assignment expression.
+ <ul>
+ <li>Old: <code>(i * 2 for (i of numbers))</code></li>
+ <li>New: <code>(for (i of numbers) i * 2)</code></li>
+ </ul>
+ </li>
+ <li>ES7 comprehensions can have multiple <code>if</code> and <code>for</code> components.</li>
+ <li>ES7 comprehensions only work with <code>{{JSxRef("Statements/for...of", "for...of")}}</code> and not with <code>{{JSxRef("Statements/for...in", "for...in")}}</code> iterations.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{JSxRef("Statements/for...of", "for...of")}}</li>
+ <li>{{JSxRef("Operators/Array_comprehensions", "Array comprehensions")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/grouping/index.html b/files/ko/web/javascript/reference/operators/grouping/index.html
new file mode 100644
index 0000000000..a8823ff961
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/grouping/index.html
@@ -0,0 +1,92 @@
+---
+title: 그룹 연산자
+slug: Web/JavaScript/Reference/Operators/Grouping
+tags:
+ - JavaScript
+ - Operator
+ - Primary Expressions
+ - Reference
+translation_of: Web/JavaScript/Reference/Operators/Grouping
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>그룹 연산자 <code>()</code></strong>는 표현식 내에서 평가의 우선순위를 제어합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-groupingoperator.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"> ( )</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>그룹 연산자는 표현식이나 중첩 표현식 주위를 감싸는 한 쌍의 괄호로 이루어진 연산자로, 감싸인 식이 더 높은 우선순위를 갖도록 일반적인 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">연산자 우선순위</a>를 재정의합니다. 이름 그대로, 그룹 연산자는 괄호 안의 내용을 묶습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제에서는 곱셈과 나눗셈 이후 덧셈과 뺄셈을 사용하는 일반적인 연산 순서를 그룹 연산자를 사용해 바꿉니다.</p>
+
+<pre class="brush:js">var a = 1;
+var b = 2;
+var c = 3;
+
+// 기본 우선순위
+a + b * c // 7
+// 이것과 같음
+a + (b * c) // 7
+
+// 더하기를 곱하기보다 먼저 하도록
+// 우선순위 변경
+(a + b) * c // 9
+
+// 이것과 같음
+a * c + b * c // 9
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-grouping-operator', 'The Grouping Operator')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES6', '#sec-grouping-operator', 'The Grouping Operator')}}</td>
+ <td>{{Spec2('ES6')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES5.1', '#sec-11.1.6', 'The Grouping Operator')}}</td>
+ <td>{{Spec2('ES5.1')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES1', '#sec-11.1.4', 'The Grouping Operator')}}</td>
+ <td>{{Spec2('ES1')}}</td>
+ <td>Initial definition. Implemented in JavaScript 1.0.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.operators.grouping")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">연산자 우선순위</a></li>
+ <li>{{jsxref("Operators/delete", "delete")}}</li>
+ <li>{{jsxref("Operators/typeof", "typeof")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/in/index.html b/files/ko/web/javascript/reference/operators/in/index.html
new file mode 100644
index 0000000000..dea26b496d
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/in/index.html
@@ -0,0 +1,188 @@
+---
+title: in 연산자
+slug: Web/JavaScript/Reference/Operators/in
+tags:
+ - JavaScript
+ - Operator
+ - Relational Operators
+ - 관계형 연산자
+ - 연산자
+ - 자바스크립트
+translation_of: Web/JavaScript/Reference/Operators/in
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p> <strong><code>in</code> 연산자</strong>는 명시된 속성이 명시된 객체에 존재하면 <code>true</code>를 반환합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>속성</em> in <em>객체명</em></pre>
+
+<h3 id="인자">인자</h3>
+
+<dl>
+ <dt><code>속성</code></dt>
+ <dd>속성의 이름이나 배열의 인덱스를 뜻하는 문자열 또는 수 값입니다.</dd>
+</dl>
+
+<dl>
+ <dt><code>객체명</code></dt>
+ <dd>객체의 이름입니다.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p> 다음 예제들은 <code>in</code> 연산자의 용도를 보여 줍니다.</p>
+
+<pre class="brush:js">// 배열
+var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
+0 in trees // true를 반환합니다.
+3 in trees // true를 반환합니다.
+(1 + 2) in trees // true를 반환합니다. 연산자 우선 순위에 의하여 이 구문의 괄호는 없어도 됩니다.
+6 in trees // false를 반환합니다.
+"bay" in trees // false를 반환합니다. 당신은 배열의 내용이 아닌, 인덱스 값을 명시하여야 합니다.
+"length" in trees // true를 반환합니다. length는 Array(배열) 객체의 속성입니다.
+
+// 미리 정의된 객체
+"PI" in Math // true를 반환합니다.
+"P" + "I" in Math // true를 반환합니다.
+
+// 사용자가 정의한 객체
+var myCar = {company: "Lamborghini", model: "Lamborghini Veneno Roadster", year: 2014};
+"company" in myCar // true를 반환합니다.
+"model" in myCar // true를 반환합니다.
+</pre>
+
+<p> 당신은 반드시 <code>in</code> 연산자의 오른쪽에 객체를 명시하여야 합니다. 예컨대 당신은 <code>String</code> 생성자로 만들어진 문자열을 명시할 수 있지만 문자열 리터럴은 명시할 수 없습니다.</p>
+
+<pre class="brush:js">var color1 = new String("green");
+"length" in color1 // true를 반환합니다.
+
+var color2 = "coral";
+"length" in color2 // color2는 String 객체가 아니기에 오류를 냅니다.
+</pre>
+
+<h3 id="제거되었거나_정의되지_않은_속성에_대하여_in_연산자_사용하기">제거되었거나 정의되지 않은 속성에 대하여 <code>in</code> 연산자 사용하기</h3>
+
+<p> <code>in</code> 연산자는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete">delete</a></code> 연산자로 제거된 속성에 대하여 <code>false</code>를 반환합니다.</p>
+
+<pre class="brush:js">var myCar = {company: "Lamborghini", model: "Lamborghini Veneno Roadster", year: 2014};
+delete myCar.company;
+"company" in myCar; // false를 반환합니다.
+
+var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
+delete trees[3];
+3 in trees; // false를 반환합니다.
+</pre>
+
+<p> 만약 당신이 속성을 {{jsxref("Global_Objects/undefined", "undefined")}}로 설정하였는데 그것을 제거하지 않으면, <code>in</code> 연산자는 그 속성에 대하여 <code>true</code>를 반환합니다.</p>
+
+<pre class="brush:js">var myCar = {company: "Lamborghini", model: "Lamborghini Veneno Roadster", year: 2014};
+myCar.company = undefined;
+"company" in myCar; // true를 반환합니다.
+</pre>
+
+<pre class="brush:js">var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
+trees[3] = undefined;
+3 in trees; // true를 반환합니다.
+</pre>
+
+<h3 id="상속된_속성">상속된 속성</h3>
+
+<p> <code>in</code> 연산자는 프로토타입 체인에 의하여 접근할 수 있는 속성에 대하여 <code>true</code>를 반환합니다.</p>
+
+<pre class="brush:js">"toString" in {}; // true를 반환합니다.
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">명세</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES6', '#sec-relational-operators', 'Relational Operators')}}</td>
+ <td>{{Spec2('ES6')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES5.1', '#sec-11.8.7', 'The in Operator')}}</td>
+ <td>{{Spec2('ES5.1')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES3', '#sec-11.8.7', 'The in Operator')}}</td>
+ <td>{{Spec2('ES3')}}</td>
+ <td>초기의 정의가 담겨 있습니다. JavaScript 1.4에 추가되었습니다.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>기능</th>
+ <th>Chrome</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari</th>
+ </tr>
+ <tr>
+ <td>지원</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>기능</th>
+ <th>Android</th>
+ <th>Chrome for Android</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>IE Mobile</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>지원</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="관련_문서">관련 문서</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete">delete</a></code></li>
+ <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li>
+ <li>{{jsxref("Reflect.has()")}}</li>
+ <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties" title="/en-US/docs/Enumerability_and_ownership_of_properties">속성의, 소유와 셀 수 있는 성질</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/index.html b/files/ko/web/javascript/reference/operators/index.html
new file mode 100644
index 0000000000..9605b84278
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/index.html
@@ -0,0 +1,304 @@
+---
+title: 식 및 연산자
+slug: Web/JavaScript/Reference/Operators
+tags:
+ - JavaScript
+ - Operators
+ - Overview
+ - Reference
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>이 장은 JavaScript의 모든 연산자<sup>operator</sup>, 식<sup>expression</sup> 및 키워드를 나열합니다.</p>
+
+<h2 id="항목별_식_및_연산자">항목별 식 및 연산자</h2>
+
+<p>알파벳순 목록은 왼쪽 사이드바를 보세요.</p>
+
+<h3 id="기본_식">기본 식</h3>
+
+<p>기본 키워드 및 JavaScript의 일반 식.</p>
+
+<dl>
+ <dt>{{JSxRef("Operators/this", "this")}}</dt>
+ <dd><code>this</code> 키워드는 실행 문맥의 특별한 속성을 가리킵니다.</dd>
+ <dt>{{JSxRef("Operators/function", "function")}}</dt>
+ <dd><code>function</code> 키워드는 함수를 정의합니다.</dd>
+ <dt>{{JSxRef("Operators/class", "class")}}</dt>
+ <dd><code>class</code> 키워드는 클래스를 정의합니다.</dd>
+ <dt>{{JSxRef("Operators/function*", "function*")}}</dt>
+ <dd><code>function*</code> 키워드는 생성기<sup>generator</sup> 함수 식을 정의합니다.</dd>
+ <dt>{{JSxRef("Operators/yield", "yield")}}</dt>
+ <dd>생성기 함수를 일시정지 및 재개합니다.</dd>
+ <dt>{{JSxRef("Operators/yield*", "yield*")}}</dt>
+ <dd>다른 생성기 함수 또는 순회가능 객체로 위임합니다.</dd>
+ <dt>{{JSxRef("Operators/async_function", "async function")}}</dt>
+ <dd><code>async function</code>은 비동기 함수 표현식을 정의합니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{JSxRef("Operators/await", "await")}}</dt>
+ <dd>비동기 함수를 일시 중지했다가 다시 시작하고 promise의 resolution/rejection을 ​​기다립니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{JSxRef("Global_Objects/Array", "[]")}}</dt>
+ <dd>배열 초기자 및 리터럴 구문.</dd>
+ <dt>{{JSxRef("Operators/Object_initializer", "{}")}}</dt>
+ <dd>객체 초기자 및 리터럴 구문.</dd>
+ <dt>{{JSxRef("Global_Objects/RegExp", "/ab+c/i")}}</dt>
+ <dd>정규식 리터럴 구문.</dd>
+ <dt>{{JSxRef("Operators/Grouping", "( )")}}</dt>
+ <dd>그룹 연산자.</dd>
+</dl>
+
+<h3 id="좌변_식">좌변 식</h3>
+
+<p>좌변값은 할당 대상입니다.</p>
+
+<dl>
+ <dt>{{JSxRef("Operators/Property_accessors", "Property accessors", "", 1)}}</dt>
+ <dd>속성 접근자는 객체의 속성 또는 메서드에 대한 접근 방법을 제공합니다.<br>
+ (<code>object.property</code>, <code>object["property"]</code>)</dd>
+ <dt>{{JSxRef("Operators/new", "new")}}</dt>
+ <dd><code>new</code> 연산자는 생성자의 인스턴스를 만듭니다.</dd>
+ <dt>{{JSxRef("Operators/new%2Etarget", "new.target")}}</dt>
+ <dd>생성자 문맥에서, <code>new.target</code>은 {{jsxref("Operators/new", "new")}}에 의해 호출된 생성자를 말합니다.</dd>
+ <dt>{{JSxRef("Operators/super", "super")}}</dt>
+ <dd><code>super</code> 키워드는 부모 생성자를 호출합니다.</dd>
+ <dt>{{JSxRef("Operators/Spread_syntax", "...obj")}}</dt>
+ <dd>전개 연산자는 (함수 호출 시) 매개변수 여럿이나, (배열 리터럴에서) 다수의 요소를 필요로 하는 곳에서 표현식을 확장합니다.</dd>
+</dl>
+
+<h3 id="증가_및_감소">증가 및 감소</h3>
+
+<p>접두/접미 증감 연산자입니다.</p>
+
+<dl>
+ <dt>{{JSxRef("Operators/Increment", "A++")}}</dt>
+ <dd>접미 증가 연산자.</dd>
+ <dt>{{JSxRef("Operators/Decrement", "A--")}}</dt>
+ <dd>접미 감소 연산자.</dd>
+ <dt>{{JSxRef("Operators/Increment", "++A")}}</dt>
+ <dd>접두 증가 연산자.</dd>
+ <dt>{{JSxRef("Operators/Decrement", "--A")}}</dt>
+ <dd>접두 감소 연산자.</dd>
+</dl>
+
+<h3 id="단항_연산자">단항 연산자</h3>
+
+<p>단항 연산은 피연산자가 하나뿐인 연산입니다.</p>
+
+<dl>
+ <dt>{{JSxRef("Operators/delete", "delete")}}</dt>
+ <dd><code>delete</code> 연산자는 객체에서 속성을 지웁니다.</dd>
+ <dt>{{JSxRef("Operators/void", "void")}}</dt>
+ <dd><code>void</code> 연산자는 식의 반환값을 버립니다.</dd>
+ <dt>{{JSxRef("Operators/typeof", "typeof")}}</dt>
+ <dd><code>typeof</code> 연산자는 주어진 객체의 형을 판별합니다.</dd>
+ <dt>{{JSxRef("Operators/Unary_plus", "+")}}</dt>
+ <dd>단항 더하기 연산자는 피연산자를 숫자로 변환합니다.</dd>
+ <dt>{{JSxRef("Operators/Unary_negation", "-")}}</dt>
+ <dd>단항 부정 연산자는 피연산자를 숫자로 변환한 뒤 부호를 바꿉니다.</dd>
+ <dt>{{JSxRef("Operators/Bitwise_NOT", "~")}}</dt>
+ <dd>비트 NOT 연산자.</dd>
+ <dt>{{JSxRef("Operators/Logical_NOT", "!")}}</dt>
+ <dd>논리 NOT 연산자.</dd>
+</dl>
+
+<h3 id="산술_연산자">산술 연산자</h3>
+
+<p>산술 연산자는 피연산자로 숫자 값(리터럴이나 변수)을 취하고 숫자 값 하나를 반환합니다.</p>
+
+<dl>
+ <dt>{{JSxRef("Operators/Addition", "+")}}</dt>
+ <dd>덧셈 연산자.</dd>
+ <dt>{{JSxRef("Operators/Subtraction", "-")}}</dt>
+ <dd>뺄셈 연산자.</dd>
+ <dt>{{JSxRef("Operators/Division", "/")}}</dt>
+ <dd>나눗셈 연산자.</dd>
+ <dt>{{JSxRef("Operators/Multiplication", "*")}}</dt>
+ <dd>곱셈 연산자.</dd>
+ <dt>{{JSxRef("Operators/Remainder", "%")}}</dt>
+ <dd>나머지 연산자.</dd>
+</dl>
+
+<dl>
+ <dt>{{JSxRef("Operators/Exponentiation", "**")}}</dt>
+ <dd>지수 연산자.</dd>
+</dl>
+
+<h3 id="관계_연산자">관계 연산자</h3>
+
+<p>비교 연산자는 피연산자를 비교하고, 비교가 참인지 여부를 나타내는 {{jsxref("Boolean")}} 값을 반환합니다.</p>
+
+<dl>
+ <dt>{{JSxRef("Operators/in", "in")}}</dt>
+ <dd><code>in</code> 연산자는 객체에 주어진 속성이 있는지를 결정합니다.</dd>
+ <dt>{{JSxRef("Operators/instanceof", "instanceof")}}</dt>
+ <dd><code>instanceof</code> 연산자는 객체가 다른 객체의 인스턴스인지 판별합니다.</dd>
+ <dt>{{JSxRef("Operators/Less_than", "&lt;")}}</dt>
+ <dd>작음 연산자.</dd>
+ <dt>{{JSxRef("Operators/Greater_than", "&gt;")}}</dt>
+ <dd>큼 연산자.</dd>
+ <dt>{{JSxRef("Operators/Less_than_or_equal", "&lt;=")}}</dt>
+ <dd>작거나 같음 연산자.</dd>
+ <dt>{{JSxRef("Operators/Greater_than_or_equal", "&gt;=")}}</dt>
+ <dd>크거나 같음 연산자.</dd>
+</dl>
+
+<div class="note">
+<p><strong>참고: =&gt;</strong> 는 연산자가 아니고, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions">화살표 함수</a>의 표기법입니다.</p>
+</div>
+
+<h3 id="같음_연산자">같음 연산자</h3>
+
+<p>같음 연산자의 평가 결과는 항상 {{jsxref("Boolean")}} 형으로 비교가 참인지 나타냅니다.</p>
+
+<dl>
+ <dt>{{JSxRef("Operators/Equality", "==")}}</dt>
+ <dd>동등 연산자.</dd>
+ <dt>{{JSxRef("Operators/Inequality", "!=")}}</dt>
+ <dd>부등 연산자.</dd>
+ <dt>{{JSxRef("Operators/Strict_equality", "===")}}</dt>
+ <dd>일치<sup>identity</sup> 연산자.</dd>
+ <dt>{{JSxRef("Operators/Strict_inequality", "!==")}}</dt>
+ <dd>불일치 연산자.</dd>
+</dl>
+
+<h3 id="비트_시프트_연산자">비트 시프트 연산자</h3>
+
+<p>피연산자의 모든 비트를 이동<sup>shift</sup>하는 연산.</p>
+
+<dl>
+ <dt>{{JSxRef("Operators/Left_shift", "&lt;&lt;")}}</dt>
+ <dd>비트 좌로 시프트 연산자.</dd>
+ <dt>{{JSxRef("Operators/Right_shift", "&gt;&gt;")}}</dt>
+ <dd>비트 우로 시프트 연산자.</dd>
+ <dt>{{JSxRef("Operators/Unsigned_right_shift", "&gt;&gt;&gt;")}}</dt>
+ <dd>비트 부호 없는 우로 시프트 연산자.</dd>
+</dl>
+
+<h3 id="이진_비트_연산자">이진 비트 연산자</h3>
+
+<p>비트 연산자는 피연산자를 32비트 집합(0과 1)으로 다루고 표준 JavaScript 숫자 값을 반환합니다.</p>
+
+<dl>
+ <dt>{{JSxRef("Operators/Bitwise_AND", "&amp;")}}</dt>
+ <dd>비트 AND.</dd>
+ <dt>{{JSxRef("Operators/Bitwise_OR", "|")}}</dt>
+ <dd>비트 OR.</dd>
+ <dt>{{JSxRef("Operators/Bitwise_XOR", "^")}}</dt>
+ <dd>비트 XOR.</dd>
+</dl>
+
+<h3 id="이진_논리_연산자">이진 논리 연산자</h3>
+
+<p>논리 연산자는 보통 사용될 때 불리언(논리) 값으로 사용되고, 불리언 값을 반환합니다.</p>
+
+<dl>
+ <dt>{{JSxRef("Operators/Logical_AND", "&amp;&amp;")}}</dt>
+ <dd>논리 AND.</dd>
+ <dt>{{JSxRef("Operators/Logical_OR", "||")}}</dt>
+ <dd>논리 OR.</dd>
+ <dt>{{JSxRef("Operators/Nullish_coalescing_operator", "??")}}</dt>
+ <dd>Nullish 통합 연산자.</dd>
+</dl>
+
+<h3 id="조건부삼항_연산자">조건부(삼항) 연산자</h3>
+
+<dl>
+ <dt>{{JSxRef("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt>
+</dl>
+
+<p>조건부 연산자는 조건의 논리값에 따라 두 값 중 하나를 반환합니다.</p>
+
+<h3 id="선택적_연결_연산자">선택적 연결 연산자</h3>
+
+<dl>
+ <dt>{{JSxRef("Operators/Optional_chaining", "?.")}}</dt>
+ <dd>
+ <p>선택적 연결 연산자는 참조가 <a href="https://developer.mozilla.org/en-US/docs/Glossary/nullish">nullish</a> (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a> 또는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>) 인 경우 오류를 발생시키는 대신 <code>undefined</code>를 반환합니다.</p>
+ </dd>
+</dl>
+
+<h3 id="할당_연산자">할당 연산자</h3>
+
+<p>할당 연산자는 값을 그 우변 피연산자의 값에 따라 좌변 피연산자에 할당합니다.</p>
+
+<dl>
+ <dt>{{JSxRef("Operators/Assignment", "=")}}</dt>
+ <dd>할당 연산자.</dd>
+ <dt>{{JSxRef("Operators/Multiplication_assignment", "*=")}}</dt>
+ <dd>곱셈 할당.</dd>
+ <dt>{{JSxRef("Operators/Exponentiation_assignment", "**=")}}</dt>
+ <dd>Exponentiation assignment.</dd>
+ <dt>{{JSxRef("Operators/Division_assignment", "/=")}}</dt>
+ <dd>나눗셈 할당.</dd>
+ <dt>{{JSxRef("Operators/Remainder_assignment", "%=")}}</dt>
+ <dd>나머지 할당.</dd>
+ <dt>{{JSxRef("Operators/Addition_assignment", "+=")}}</dt>
+ <dd>덧셈 할당.</dd>
+ <dt>{{JSxRef("Operators/Subtraction_assignment", "-=")}}</dt>
+ <dd>뺄셈 할당</dd>
+ <dt>{{JSxRef("Operators/Left_shift_assignment", "&lt;&lt;=")}}</dt>
+ <dd>좌로 이동 할당.</dd>
+ <dt>{{JSxRef("Operators/Right_shift_assignment", "&gt;&gt;=")}}</dt>
+ <dd>우로 이동 할당.</dd>
+ <dt>{{JSxRef("Operators/Unsigned_right_shift_assignment", "&gt;&gt;&gt;=")}}</dt>
+ <dd>부호 없는 우로 이동 할당.</dd>
+ <dt>{{JSxRef("Operators/Bitwise_AND_assignment", "&amp;=")}}</dt>
+ <dd>비트 AND 할당.</dd>
+ <dt>{{JSxRef("Operators/Bitwise_XOR_assignment", "^=")}}</dt>
+ <dd>비트 XOR 할당.</dd>
+ <dt>{{JSxRef("Operators/Bitwise_OR_assignment", "|=")}}</dt>
+ <dd>비트 OR 할당.</dd>
+</dl>
+
+<dl>
+ <dt>{{JSxRef("Operators/Logical_AND_assignment", "&amp;&amp;=")}}</dt>
+ <dd>논리적 AND 할당.</dd>
+ <dt>{{JSxRef("Operators/Logical_OR_assignment", "||=")}}</dt>
+ <dd>논리적 OR 할당.</dd>
+ <dt>{{JSxRef("Operators/Logical_nullish_assignment", "??=")}}</dt>
+ <dd>논리적 nullish 할당.</dd>
+</dl>
+
+<dl>
+ <dt>{{JSxRef("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br>
+ {{JSxRef("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt>
+ <dd>
+ <p>구조 분해 할당은 배열 또는 객체의 속성을 배열 또는 객체 리터럴과 비슷해 보이는 구문을 사용하여 변수에 할당할 수 있게 합니다.</p>
+ </dd>
+</dl>
+
+<h3 id="쉼표_연산자">쉼표 연산자</h3>
+
+<dl>
+ <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt>
+ <dd>쉼표 연산자는 여러 식을 단문으로 평가되게 하고 마지막 식의 결과를 반환합니다.</dd>
+</dl>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">명세</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.operators")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/연산자_우선순위">연산자 우선순위</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/instanceof/index.html b/files/ko/web/javascript/reference/operators/instanceof/index.html
new file mode 100644
index 0000000000..0ac15b7ffe
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/instanceof/index.html
@@ -0,0 +1,161 @@
+---
+title: instanceof
+slug: Web/JavaScript/Reference/Operators/instanceof
+tags:
+ - JavaScript
+ - Operator
+ - Reference
+ - Relational Operators
+translation_of: Web/JavaScript/Reference/Operators/instanceof
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong><code>instanceof</code> 연산자</strong>는 생성자의 <code>prototype</code> 속성이 객체의 프로토타입 체인 어딘가 존재하는지 판별합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-instanceof.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>object</em> instanceof <em>constructor</em></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>판별할 객체.</dd>
+ <dt><code>constructor</code></dt>
+ <dd>판별 목표 함수.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>instanceof</code> 연산자는 <code>object</code>의 프로토타입 체인에 <code>constructor.prototype</code>이 존재하는지 판별합니다.</p>
+
+<pre class="brush: js">// 생성자 정의
+function C(){}
+function D(){}
+
+var o = new C();
+
+// true, 왜냐하면 Object.getPrototypeOf(o) === C.prototype
+o instanceof C;
+
+// false, 왜냐하면 D.prototype이 o 객체의 프로토타입 체인에 없음
+o instanceof D;
+
+o instanceof Object; // true, 왜냐하면
+C.prototype instanceof Object // true
+
+C.prototype = {};
+var o2 = new C();
+
+o2 instanceof C; // true
+
+// false, 왜냐하면 C.prototype이
+// 더 이상 o의 프로토타입 체인에 없음
+o instanceof C;
+
+D.prototype = new C(); // C를 D의 [[Prototype]] 링크로 추가
+var o3 = new D();
+o3 instanceof D; // true
+o3 instanceof C; // true, 왜냐하면 이제 C.prototype이 o3의 프로토타입 체인에 존재
+</pre>
+
+<p><code>instanceof</code> 의 값은 생성자 <code>prototype</code> 프로퍼티의 변화에 따라 바뀔수 있으며, <code>Object.setPrototypeOf</code>의 사용함에 따라서도 바뀔 수 있음에 주의하세요. 또한 non-standard의 <code>__proto__ </code>슈도-프로퍼티도 사용할 수 있도록 만들어 줍니다.</p>
+
+<h3 id="instanceof_와_multiple_context_(예._프레임_또는_창)"><code>instanceof</code> 와 multiple context (예. 프레임 또는 창)</h3>
+
+<p>다른 스코프는 다른 실행 환경을 가집니다. 이것은 다른 스코프는 다른 고정된 요소들(다른 전역 오브젝트, 다른 생성자들 등)을 가지고 있음을 의미합니다. 이 사실은 예상치 못한 결과를 가져올 수도 있습니다. 예를 들면, []  <code>instanceof window.frames[0].Array</code>는 <code>false</code>를 리턴할 것입니다. 왜냐하면, <code>Array.prototype !== </code><code>window.frames[0].Array</code> 이며, arrays 는 상위로부터 상속받기 때문입니다. 이것은 처음에는 말이 되지 않을 수도 있습니다. 하지만, 스크립트에서 여러 프레임이나 창을 다루며, 객체를 함수를 통하여 하나의 컨텍스트에서 다른 컨텍스트로 오브젝트를 넘기게 된다면,  이건 충분히 일어날 수 있는 일이며, 아주 큰 이슈가 될 것입니다. 예를 들어, 주어진 오브젝트가 실제로 <code>Array.isArray(myObj)</code>를 사용한 Array인지 안전하게 확인 할 수 있습니다. </p>
+
+<div class="note"><strong>Mozilla 개발자들을 위한 메모:</strong><br>
+XPCOM <code>instanceof</code> 을 사용하는 코드에서는 특별한 효과를 가집니다. :  <code>obj instanceof </code><em><code>xpcomInterface </code></em>(예. <code>Components.interfaces.nsIFile</code>)가 <code>obj.QueryInterface(<em>xpcomInterface</em>)</code>를<code> </code>호출하고, 만약 QueryInterface 가 성공하면 <code>true</code> 를 리턴합니다. 이 호출의 부가 효과로는 <code>obj</code> 에서 성공적인 <code>instanceof</code> 테스트 후에 <em><code>xpcomInterface</code></em>'s의 프로퍼티를 사용할 수 있습니다. 스탠다드 JavaScript 전역속성들과는 달리, 테스트 <code>obj instanceof xpcomInterface</code>는 <code>obj</code>가 다른 스코프에 있더라도 작동합니다.</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="String과_Date는_타입_Object이며_예외적인_경우임을_입증하기"><code>String</code>과 <code>Date</code>는 타입 <code>Object</code>이며, 예외적인 경우임을 입증하기</h3>
+
+<p>아래의 코드는 <code>instanceof</code> 를 <code>String</code> 과 <code>Date</code> 오브젝트도 타입 <code>Object</code>임을 확인하기 위해 사용합니다.(이 오브젝트들은 <code>Object </code>로부터 파생되었습니다.)</p>
+
+<p>그러나, 여기서 오브젝트 리터럴 노테이션으로 생성된 오브젝트는 예외적입니다. : 비록 프로토 타입이 정의되지 않았지만, <code>instanceof Object</code>는<code> true</code>를 리턴합니다.</p>
+
+<pre class="brush: js">var simpleStr = "This is a simple string";
+var myString = new String();
+var newStr = new String("String created with constructor");
+var myDate = new Date();
+var myObj = {};
+
+simpleStr instanceof String; // returns false, prototype chain을 확인하고, undefined를 찾는다.
+myString instanceof String; // returns true
+newStr instanceof String; // returns true
+myString instanceof Object; // returns true
+
+myObj instanceof Object; // returns true, undefined prototype 임에도 불구하고 true.
+({}) instanceof Object; // returns true, 위의 경우와 동일.
+
+myString instanceof Date; // returns false
+
+myDate instanceof Date; // returns true
+myDate instanceof Object; // returns true
+myDate instanceof String; // returns false
+</pre>
+
+<h3 id="mycar는_타입_Car와_타입_Object임을_입증하기"><code>mycar</code>는 타입 <code>Car</code>와 타입 <code>Object</code>임을 입증하기</h3>
+
+<p>다음의 코드는 <code>Car</code> 오브젝트 타입과 그 오브젝트 타입의 인스턴스 <code>mycar</code>를 생성합니다. <code>instanceof</code> 연산자는 <code>mycar</code> 오브젝트는 타입 <code>Car</code> 와 타입 <code>Object </code>라는 것은 보여줍니다.</p>
+
+<pre class="brush: js">function Car(make, model, year) {
+ this.make = make;
+ this.model = model;
+ this.year = year;
+}
+var mycar = new Car("Honda", "Accord", 1998);
+var a = mycar instanceof Car; // returns true
+var b = mycar instanceof Object; // returns true
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES6', '#sec-relational-operators', 'Relational Operators')}}</td>
+ <td>{{Spec2('ES6')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES5.1', '#sec-11.8.6', 'The instanceof operator')}}</td>
+ <td>{{Spec2('ES5.1')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES3', '#sec-11.8.6', 'The instanceof operator')}}</td>
+ <td>{{Spec2('ES3')}}</td>
+ <td>
+ <p>초기 정의. JavaScript 1.4에서 구현됨.</p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.operators.instanceof")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Operators/typeof", "typeof")}}</li>
+ <li>{{jsxref("Symbol.hasInstance")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/new.target/index.html b/files/ko/web/javascript/reference/operators/new.target/index.html
new file mode 100644
index 0000000000..9c480c1513
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/new.target/index.html
@@ -0,0 +1,93 @@
+---
+title: new.target
+slug: Web/JavaScript/Reference/Operators/new.target
+tags:
+ - Classes
+ - ECMAScript 2015
+ - JavaScript
+ - Reference
+translation_of: Web/JavaScript/Reference/Operators/new.target
+---
+<div>{{JSSidebar("Operators")}}</div>
+
+<p><strong><code>new.target</code></strong> 속성(property)은 함수 또는 생성자가 <a href="/ko/docs/Web/JavaScript/Reference/Operators/new">new</a> 연산자를 사용하여 호출됐는지를 감지할 수 있습니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/new">new</a> 연산자로 인스턴스화된 생성자 및 함수에서, <code>new.target</code>은 생성자 또는 함수 참조를 반환합니다. 일반 함수 호출에서는, <code>new.target</code>은 {{jsxref("undefined")}}입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-newtarget.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">new.target</pre>
+
+<h2 id="설명">설명</h2>
+
+<p><code>new.target</code> 구문은 키워드 "<code>new</code>", 점 및 속성명 "<code>target</code>"으로 구성됩니다. 보통 "<code>new.</code>"은 속성 접근을 위한 문맥(context)으로 제공하지만 여기서 "<code>new.</code>"은 정말 객체가 아닙니다. 그러나, 생성자 호출에서 <code>new.target</code>은 <code>new</code>에 의해 호출된 생성자를 가리키고 그래서 "<code>new.</code>"은 가상 문맥이 됩니다.</p>
+
+<p><code>new.target</code> 속성은 모든 함수가 이용할 수 있는 메타 속성입니다. <a href="/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션">화살표 함수</a>에서, <code>new.target</code>은 둘러싸는 함수의 <code>new.target</code>을 말합니다.</p>
+
+<h2 id="예">예</h2>
+
+<h3 id="함수_호출에서_new.target">함수 호출에서 new.target</h3>
+
+<p>일반 함수 호출(생성자 함수 호출과는 반대로)에서, <code>new.target</code>은 {{jsxref("undefined")}}입니다. 이는 함수가 생성자로서 <a href="/ko/docs/Web/JavaScript/Reference/Operators/new">new</a>로 호출된 경우를 감지할 수 있습니다.</p>
+
+<pre class="brush: js">function Foo() {
+ if (!new.target) throw "Foo() must be called with new";
+ console.log("Foo instantiated with new");
+}
+
+Foo(); // throws "Foo() must be called with new"
+new Foo(); // logs "Foo instantiated with new"
+</pre>
+
+<h3 id="생성자에서_new.target">생성자에서 new.target</h3>
+
+<p>클래스 생성자에서, <code>new.target</code>은 <code>new</code>에 의해 직접 호출된 생성자를 가리킵니다. 이는 그 생성자가 부모 클래스에 있고 자식 생성자로부터 위임받은 경우도 그 경우입니다.</p>
+
+<pre class="brush: js">class A {
+ constructor() {
+ console.log(new.target.name);
+ }
+}
+
+class B extends A { constructor() { super(); } }
+
+var a = new A(); // logs "A"
+var b = new B(); // logs "B"
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">명세</th>
+ <th scope="col">상태</th>
+ <th scope="col">설명</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES6', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td>
+ <td>{{Spec2('ES6')}}</td>
+ <td>초기 정의.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.operators.new_target")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Functions">함수</a></li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Classes">클래스</a></li>
+ <li><code><a href="/ko/docs/Web/JavaScript/Reference/Operators/new">new</a></code></li>
+ <li><code><a href="/ko/docs/Web/JavaScript/Reference/Operators/this">this</a></code></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/new/index.html b/files/ko/web/javascript/reference/operators/new/index.html
new file mode 100644
index 0000000000..a28d21de18
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/new/index.html
@@ -0,0 +1,187 @@
+---
+title: new operator
+slug: Web/JavaScript/Reference/Operators/new
+tags:
+ - JavaScript
+ - Operator
+ - Reference
+translation_of: Web/JavaScript/Reference/Operators/new
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong><code>new</code> 연산자</strong>는 사용자 정의 객체 타입 또는 내장 객체 타입의 인스턴스를 생성한다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}}</p>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">new <em>constructor</em>[([<em>arguments</em>])]</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>constructor</code></dt>
+ <dd>객체 인스턴스의 타입을 기술(명세)하는 함수</dd>
+</dl>
+
+<dl>
+ <dt><code>arguments</code></dt>
+ <dd><code>constructor</code>와 함께 호출될 값 목록</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>사용자 정의 객체를 생성에는 두 단계가 필요하다:</p>
+
+<ol>
+ <li>함수를 작성하여 객체 타입을 정의한다.</li>
+ <li><code>new</code> 연산자로 객체의 인스턴스를 생성한다.</li>
+</ol>
+
+<p>객체의 타입을 정의하기 위해, 객체의 이름과 속성을 명세하는 함수를 만든다. 객체는 그 자체가 또 다른 객체인 속성을 가질 수 있다. 아래의 예를 본다.</p>
+
+<p>코드 <code>new Foo(...)</code>가 실행될 때 다음과 같은 일이 발생한다:</p>
+
+<ol>
+ <li><code>Foo.prototype</code>을 상속하는 새로운 객체가 하나 생성된다.</li>
+ <li>명시된 인자 그리고 새롭게 생성된 객체에 바인드된 this와 함께 생성자 함수 <code>Foo</code>가 호출된다.<code>new Foo</code>는 <code>new Foo()</code>와 동일하다. 즉 인자가 명시되지 않은 경우, 인자 없이 <code>Foo</code>가 호출된다.</li>
+ <li>생성자 함수에 의해 리턴된 객체는 전체 <code>new</code> 호출 결과가 된다. 만약 생성자 함수가 명시적으로 객체를 리턴하지 않는 경우, 첫 번째 단계에서 생성된 객체가 대신 사용된다.(일반적으로 생성자는 값을 리턴하지 않는다. 그러나 일반적인 객체 생성을 재정의(override)하기 원한다면 그렇게 하도록 선택할 수 있다.)</li>
+</ol>
+
+<p>언제든 이전에 정의된 객체에 속성을 추가할 수 있다. 예를 들면, <code>car1.color = "black"</code> 구문은 <code>color</code> 속성을 <code>car1</code>에 추가하고 해당 속성에 "<code>black</code>"이란 값을 할당한다. 그러나, 이것이 다른 객체들에게는 영향을 주지 않는다. 동일한 타입의 모든 객체들에게 새로운 속성을 추가하려면, <code>Car</code> 객체 타입의 정의에 이 속성을 추가해야한다.</p>
+
+<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">Function.prototype</a></code> 속성을 사용하여 이전에 정의된 객체 타입에 공유 속성을 추가할 수 있다. 이것은 객체 타입의 인스턴스 하나에만 적용되는 것이 아니라 이 함수로 생성하는 모든 객체와 공유하는 속성을 정의한다.</p>
+
+<p>다음의 코드는 <code>car</code> 타입의 모든 객체에 "<code>original color</code>" 값을 갖는 color 속성을 추가한다. 그리고 <code>car1</code> 객체 인스턴스에서만 이 값을 문자열 "<code>black</code>"으로 덮어쓴다. 더 많은 정보는 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">prototype</a>을 참조한다.</p>
+
+<pre class="brush: js">function Car() {}
+car1 = new Car();
+car2 = new Car();
+
+console.log(car1.color); // undefined
+
+Car.prototype.color = "original color";
+console.log(car1.color); // original color
+
+car1.color = 'black';
+console.log(car1.color); // black
+
+console.log(car1.__proto__.color) //original color
+console.log(car2.__proto__.color) //original color
+console.log(car1.color) // black
+console.log(car2.color) // original color
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="객체_타입과_객체_인스턴스">객체 타입과 객체 인스턴스</h3>
+
+<p>cars를 위한 객체 타입을 생성하기 원한다고 가정해 보자. 이 객체 타입이 <code>car</code>로 불리기 원하고, make, model, 그리고 year 속성을 갖게 하고 싶다. 이렇게 하기 위해서 다음과 같은 함수를 작성할 것이다:</p>
+
+<pre class="brush: js">function Car(make, model, year) {
+ this.make = make;
+ this.model = model;
+ this.year = year;
+}
+</pre>
+
+<p>이제 다음과 같이, <code>mycar</code>로 불리는 객체를 생성할 수 있다:</p>
+
+<pre class="brush: js">var mycar = new Car("Eagle", "Talon TSi", 1993);
+</pre>
+
+<p>이 구문은 <code>mycar</code> 를 생성하고 명시한 값을 속성값으로 설정한다. 그래서 <code>mycar.make</code>의 값은 문자열 "Eagle"이고, <code>mycar.year</code>는 정수 1993이며 나머지도 마찬가지이다.</p>
+
+<p><code>new</code>를 호출해서 얼마든지 <code>car</code> 객체를 생성할 수 있다. 예를 들면:</p>
+
+<pre class="brush: js">var kenscar = new Car("Nissan", "300ZX", 1992);
+</pre>
+
+<h3 id="속성_그_자신이_다른_객체인_객체의_속성">속성 그 자신이 다른 객체인 객체의 속성</h3>
+
+<p><code>person</code>이라고 불리는 객체를 다음과 같이 정의한다고 가정해보자:</p>
+
+<pre class="brush: js">function Person(name, age, sex) {
+ this.name = name;
+ this.age = age;
+ this.sex = sex;
+}
+</pre>
+
+<p>그리고 다음과 같이 두 개의 <code>person</code> 객체 인스턴스를 새롭게 생성한다:</p>
+
+<pre class="brush: js">var rand = new Person("Rand McNally", 33, "M");
+var ken = new Person("Ken Jones", 39, "M");
+</pre>
+
+<p>그런 다음 <code>owner</code> 속성을 포함하는 <code>car</code>의 정의를 다시 쓸 수 있다. 이 owner 속성은 다음과 같은 person 객체를 취한다:</p>
+
+<pre class="brush: js">function Car(make, model, year, owner) {
+ this.make = make;
+ this.model = model;
+ this.year = year;
+ this.owner = owner;
+}
+</pre>
+
+<p>새로운 객체의 인스턴스를 생성하기 위해 다음과 같이 사용한다:</p>
+
+<pre class="brush: js">var car1 = new Car("Eagle", "Talon TSi", 1993, rand);
+var car2 = new Car("Nissan", "300ZX", 1992, ken);
+</pre>
+
+<p>새로운 객체를 생성할 때 문자열이나 숫자 값을 넘겨주는 대신에, 위의 구문은 owner를 위한 매개변수로 <code>rand</code>와 <code>ken</code> 객체를 넘겨준다. <code>car2</code>의 owner name을 확인해보기 위해서, 다음의 속성에 접근할 수 있다:</p>
+
+<pre class="brush: js">car2.owner.name
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-new-operator', 'The new Operator')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES6', '#sec-new-operator', 'The new Operator')}}</td>
+ <td>{{Spec2('ES6')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES5.1', '#sec-11.2.2', 'The new Operator')}}</td>
+ <td>{{Spec2('ES5.1')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES3', '#sec-11.2.2', 'The new Operator')}}</td>
+ <td>{{Spec2('ES3')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES1', '#sec-11.2.2', 'The new Operator')}}</td>
+ <td>{{Spec2('ES1')}}</td>
+ <td>Initial definition. Implemented in JavaScript 1.0.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.operators.new")}}</p>
+
+<h2 id="관련_문서">관련 문서</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Reflect.construct()")}}</li>
+ <li>{{jsxref("Object.prototype")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/nullish_coalescing_operator/index.html b/files/ko/web/javascript/reference/operators/nullish_coalescing_operator/index.html
new file mode 100644
index 0000000000..cae74ea29d
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/nullish_coalescing_operator/index.html
@@ -0,0 +1,161 @@
+---
+title: Nullish coalescing operator
+slug: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
+translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
+---
+<p>{{JSSidebar("Operators")}}</p>
+
+<p><strong>널 병합 연산자 (<code>??</code>)</strong> 는 왼쪽 피연산자가 {{jsxref("null")}} 또는 {{jsxref("undefined")}}일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다.</p>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR_2">논리 연산자 OR (<code>||</code>)</a>와 달리, 왼쪽 피연산자가 <code>null</code> 또는 <code>undefined</code>가 아닌 <em><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Description">falsy</a> </em>값이면 반환된다. 즉, 만약 다른 변수 foo에게 기본 값을 제공하기 위해 <code>||</code>을 사용 경우, <em><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Description">falsy</a> </em>값( <code>''</code> 또는 <code>0</code>)을 사용하는 것을 고려했다면 예기치 않는 동작이 발생할 수 있다. 더 많은 예제는 아래를 보자.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-nullishcoalescingoperator.html")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.<br>
+ 이 예제의 추가는 <a href="https://github.com/mdn/interactive-examples/pull/1482#issuecomment-553841750">PR #1482</a>를 참조해라.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox notranslate"><var>leftExpr</var> ?? <var>rightExpr</var>
+</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>널 병합 연산자는 만약 왼쪽 표현식이 {{jsxref("null")}} 또는 {{jsxref("undefined")}}인 경우, 오른쪽 표현식의 결과를 반환한다.</p>
+
+<h3 id="변수에_기본값_할당">변수에 기본값 할당</h3>
+
+<p>이전에는 변수에 기본값을 할당하고 싶을 때, 논리 연산자 OR (<code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR_2">||</a></code>)을 사용하는 것이 일반적인 패턴이다:</p>
+
+<pre class="brush: js notranslate">let foo;
+...
+// foo is never assigned any value so it is still undefined
+let someDummyText = foo || 'Hello!';</pre>
+
+<p>그러나 <code>||</code> boolean 논리 연산자 때문에, 왼쪽 피연산자는 boolean으로 강제로 변환되었고 <em>falsy</em> 한 값(<code>0</code>, <code>''</code>, <code>NaN</code>, <code>null</code>, <code>undefined</code>)은 반환되지 않았다. 이 동작은 만약 <code>0</code>, <code>''</code> or <code>NaN</code>을 유효한 값으로 생각한 경우 예기치 않는 결과를 초래할 수 있다.</p>
+
+<pre class="brush: js notranslate">let count;
+let text;
+...
+count = 0;
+text = "";
+...
+let qty = count || 42;
+let message = text || "hi!";
+console.log(qty); // 42 and not 0
+console.log(message); // "hi!" and not ""
+</pre>
+
+<p>널 병합 연산자는 첫 번째 연산자가 <code>null</code> 또는 <code>undefined</code>로 평가될 때만, 두 번째 피연산자를 반환함으로써 이러한 위험을 피한다:</p>
+
+<pre class="brush: js notranslate">let myText = ''; // An empty string (which is also a falsy value)
+
+let notFalsyText = myText || 'Hello world';
+console.log(notFalsyText); // Hello world
+
+let preservingFalsy = myText ?? 'Hi neighborhood';
+console.log(preservingFalsy); // '' (as myText is neither undefined nor null)
+</pre>
+
+<h3 id="단락">단락</h3>
+
+<p>OR과 AND 같은 논리 연산자들과 마찬가지로, 만약 왼쪽이 <code>null</code> 또는 <code>undefined</code>가 아님이 판명되면 오른쪽 표현식은 평가되지 않는다.</p>
+
+<pre class="brush: js notranslate">function A() { console.log('A was called'); return undefined;}
+function B() { console.log('B was called'); return false;}
+function C() { console.log('C was called'); return "foo";}
+
+console.log( A() ?? C() );
+// logs "A was called" then "C was called" and then "foo"
+// as A() returned undefined so both expressions are evaluated
+
+console.log( B() ?? C() );
+// logs "B was called" then "false"
+// as B() returned false (and not null or undefined), the right
+// hand side expression was not evaluated
+</pre>
+
+<h3 id="No_chaining_with_AND_or_OR_operators">No chaining with AND or OR operators</h3>
+
+<p>AND (<code>&amp;&amp;</code>) 와 OR 연산자 (<code>||</code>)를 <code>??</code>와 직접적으로 결합하여 사용하는 것은 불가능하다. 이 경우 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code>가 발생된다.</p>
+
+<pre class="brush: js notranslate">null || undefined ?? "foo"; // raises a SyntaxError
+true || undefined ?? "foo"; // raises a SyntaxError</pre>
+
+<p>그러나 우선 순위를 명시적으로 나타내기 위해 괄호를 사용하면 가능하다:</p>
+
+<pre class="brush: js notranslate">(null || undefined ) ?? "foo"; // returns "foo"
+</pre>
+
+<h3 id="Optional_chaining_연산자.와의_관계">Optional chaining 연산자(<code>?.</code>)와의 관계</h3>
+
+<p>널 병합 연산자는 명확한 값으로 <code>undefined</code>과 <code>null</code>을 처리하고, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining">optional chaining 연산자 (<code>?.</code>)</a>는 <code>null</code> or <code>undefined</code>일 수 있는 객체의 속성에 접근할 때 유용하다.</p>
+
+<pre class="brush: js notranslate">let foo = { someFooProp: "hi" };
+
+console.log(foo.someFooProp?.toUpperCase()); // "HI"
+console.log(foo.someBarProp?.toUpperCase()); // undefined
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>이 예제는 기본 값을 제공하지만 <code>null</code> or <code>undefined</code> 이외의 값을 를 유지한다. </p>
+
+<pre class="brush: js notranslate">function getMiscObj(){
+ return {
+ aNullProperty: null,
+ emptyText: "", // this is not falsy
+ someNumber: 42
+ };
+};
+
+const miscObj = getMiscObj();
+
+const newObj = {};
+newObj.propA = miscObj.aNullProperty ?? "default for A";
+newObj.propB = miscObj.emptyText ?? "default for B";
+newObj.propC = miscObj.someNumber ?? 0;
+
+console.log(newObj.propA); // "default for A"
+console.log(newObj.propB); // "" (as the empty string is not null or undefined)
+console.log(newObj.propC); // 42
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><a href="https://tc39.es/proposal-nullish-coalescing/#top">Proposal for the "nullish coalescing" operator</a></td>
+ <td>Stage 3</td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.operators.nullish_coalescing")}}</p>
+
+<h3 id="구현_진행">구현 진행</h3>
+
+<p>The following table provides a daily implementation status for this feature, because this feature has not yet reached cross-browser stability. The data is generated by running the relevant feature tests in <a href="https://github.com/tc39/test262">Test262</a>, the standard test suite of JavaScript, in the nightly build, or latest release of each browser's JavaScript engine.</p>
+
+<div>{{EmbedTest262ReportResultsTable("coalesce-expression")}}</div>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining">The optional chaining operator</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR_2">The logical OR (<code>||</code>) operator</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default paramaters in functions</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/object_initializer/index.html b/files/ko/web/javascript/reference/operators/object_initializer/index.html
new file mode 100644
index 0000000000..825c854848
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/object_initializer/index.html
@@ -0,0 +1,302 @@
+---
+title: 객체 초기자
+slug: Web/JavaScript/Reference/Operators/Object_initializer
+tags:
+ - ECMAScript 2015
+ - ECMAScript6
+ - JSON
+ - JavaScript
+ - Literal
+ - Methods
+ - Object
+ - Primary Expression
+ - computed
+ - mutation
+ - properties
+translation_of: Web/JavaScript/Reference/Operators/Object_initializer
+---
+<div>{{JsSidebar("Operators")}}</div>
+
+<p>객체는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>new Object()</code></a>, <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a></code> 또는 <em>리터럴</em> 표기법 (<em>initializer</em> 표기법)을 사용하여 초기화될 수 있습니다. 객체 초기자(object initializer)는 0개 이상인 객체 속성명 및 관련값 쌍 목록이 콤마로 분리되어 중괄호(<code>{}</code>)로 묶인 형태입니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/expressions-objectinitializer.html", "taller")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: js notranslate">var o = {};
+var o = { a: "foo", b: 42, c: {} };
+
+var a = "foo", b = 42, c = {};
+var o = { a: a, b: b, c: c };
+
+var o = {
+ <var>property: function </var>([<var>parameters</var>]) {},
+ get <var>property</var>() {},
+ set <var>property</var>(<var>value</var>) {},
+};
+</pre>
+
+<h3 id="ECMAScript_2015의_새로운_표기법">ECMAScript 2015의 새로운 표기법</h3>
+
+<p>이 표기법에 대한 지원은 호환성 표를 참조해 주세요. 비지원 환경에서, 이 표기법은 구문 오류로 이어집니다.</p>
+
+<pre class="brush: js notranslate">// 단축 속성명 (ES2015)
+let a = "foo", b = 42, c = {}
+let o = { a, b, c }
+
+// 단축 메서드명 (ES2015)
+var o = {
+ <var>property</var>([<var>parameters</var>]) {}
+}
+
+// 계산된 속성명 (ES2015)
+var prop = 'foo'
+var o = {
+ [prop]: 'hey',
+ ['b' + 'ar']: 'there'
+}</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>객체 초기자는 {{jsxref("Object")}}의 초기화를 기술하는 표현식(expression)입니다. 객체는 객체를 설명하는 데 사용되는<em>속성</em>으로 구성됩니다. 객체의 속성값은 {{Glossary("primitive")}} 데이터 형 또는 다른 객체를 포함할 수 있습니다.</p>
+
+<h3 id="객체_리터럴_표기법_vs_JSON">객체 리터럴 표기법 vs JSON</h3>
+
+<p>객체 리터럴 표기법은 <strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation (<a href="/ko/docs/Glossary/JSON">JSON</a>)과 같지 않습니다. 비슷해 보이지만, 차이가 있습니다:</p>
+
+<ul>
+ <li>JSON은 <code>"property": value</code> 구문을 사용한 속성 정의<em>만</em> 허용합니다. 속성명은 큰 따옴표로 묶여야 하고, 정의는 단축(명)일 수 없습니다.</li>
+ <li>JSON에서 값은 오직 문자열, 숫자, 배열, <code>true</code>, <code>false</code>, <code>null</code> 또는 다른 (JSON) 객체만 될 수 있습니다.</li>
+ <li>함수 값(아래 "메서드" 참조)은 JSON에서 값에 할당될 수 없습니다.</li>
+ <li>{{jsxref("Date")}} 같은 객체는 {{jsxref("JSON.parse()")}} 후에 문자열이 됩니다.</li>
+ <li>{{jsxref("JSON.parse()")}}는 계산된 속성명을 거부하고 오류를 발생합니다.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="객체_생성">객체 생성</h3>
+
+<p>속성이 없는 빈 객체는 다음과 같이 만들 수 있습니다:</p>
+
+<pre class="brush: js notranslate">var object = {};</pre>
+
+<p>그러나, 리터럴(<em>literal</em>) 또는 초기자(<em>initializer</em>) 표기법의 이점은, 빠르게 중괄호 내 속성이 있는 객체를 만들 수 있다는 것입니다. 당신은 그저 쉼표로 구분된 <strong><code>키: 값</code></strong> 쌍 목록을 표기합니다.</p>
+
+<p>다음 코드는 키가 <code>"foo"</code>, <code>"age"</code> 및 <code>"baz"</code>인 세 속성이 있는 객체를 만듭니다. 이들 키값은 문자열 <code>"bar"</code>, 숫자 <code>42</code> 그리고 세 번째 속성은 그 값으로 다른 객체를 갖습니다.</p>
+
+<pre class="brush: js notranslate">var object = {
+ foo: "bar",
+ age: 42,
+ baz: { myProp: 12 },
+}</pre>
+
+<h3 id="속성_접근">속성 접근</h3>
+
+<p>일단 객체를 생성하면, 읽거나 바꿀 수 있습니다. 객체 속성은 점 표기법 또는 각괄호 표기법을 사용하여 액세스될 수 있습니다. (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors" title="property accessors">속성 접근자</a> 참조.)</p>
+
+<pre class="brush: js notranslate">object.foo; // "bar"
+object["age"]; // 42
+
+object.foo = "baz";
+</pre>
+
+<h3 id="속성_정의">속성 정의</h3>
+
+<p>우리는 이미 초기자 구문을 사용한 속성 표기법을 배웠습니다. 가끔, 객체 안에 두고 싶은 코드 속 변수가 있습니다. 다음과 같은 코드가 보입니다:</p>
+
+<pre class="brush: js notranslate">var a = "foo",
+ b = 42,
+ c = {};
+
+var o = {
+ a: a,
+ b: b,
+ c: c
+};</pre>
+
+<p>ECMAScript 2015의 경우, 똑같은 일을 할 수 있는 더 짧은 표기법이 있습니다:</p>
+
+<pre class="brush: js notranslate">var a = "foo",
+ b = 42,
+ c = {};
+
+// 단축 속성명 (ES6)
+var o = { a, b, c }
+
+// 다시 말해서,
+console.log((o.a === {a}.a)) // true
+</pre>
+
+<h4 id="중복된_속성명">중복된 속성명</h4>
+
+<p>속성이 같은 이름을 쓰는 경우, 두 번째 속성은 첫 번째를 겹쳐씁니다.</p>
+
+<pre class="brush: js notranslate">var a = {x: 1, x: 2};
+console.log(a); // {x: 2}
+</pre>
+
+<p>ECMAScript 5 엄격 모드 코드에서, 중복된 속성명은 {{jsxref("SyntaxError")}}로 간주됐습니다. 런타임에 중복을 가능케 하는 속성 계산명 도입으로, ECMAScript 2015는 이 제한을 제거했습니다.</p>
+
+<pre class="brush: js notranslate">function haveES6DuplicatePropertySemantics(){
+ "use strict";
+ try {
+ ({ prop: 1, prop: 2 });
+
+ // 오류 미 발생, 중복 속성명은 엄격 모드에서 허용됨
+ return true;
+ } catch (e) {
+ // 오류 발생, 중복은 엄격 모드에서 금지됨
+ return false;
+ }
+}</pre>
+
+<h3 id="메서드_정의">메서드 정의</h3>
+
+<p>객체의 속성은 <a href="/ko/docs/Web/JavaScript/Reference/Functions">함수</a>나 <a href="/ko/docs/Web/JavaScript/Reference/Functions/get">getter</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Functions/set">setter</a> 메서드를 참조할 수도 있습니다.</p>
+
+<pre class="brush: js notranslate">var o = {
+ <var>property: function </var>([<var>parameters</var>]) {},
+ get <var>property</var>() {},
+ set <var>property</var>(<var>value</var>) {},
+};</pre>
+
+<p>ECMAScript 2015에서는, 단축 표기법을 이용할 수 있습니다, 그래서 키워드 "<code>function</code>"은 더 이상 필요치 않습니다.</p>
+
+<pre class="brush: js notranslate">// 단축 메서드 명 (ES6)
+var o = {
+ <var>property</var>([<var>parameters</var>]) {},
+}</pre>
+
+<p>ECMAScript 2015에는 값이 생성기 함수인 속성을 간결하게 정의하는 법도 있습니다:</p>
+
+<pre class="brush: js notranslate">var o = {
+ *<var>generator</var>() {
+ ...........
+ }
+};</pre>
+
+<p>ECMAScript 5에서는 다음과 같이 작성할 수 있습니다 (하지만 ES5는 생성기가 없음을 주의하세요):</p>
+
+<pre class="brush: js notranslate">var o = {
+ generator<var>Method: function* </var>() {
+ ...........
+ }
+};</pre>
+
+<p>메서드에 관한 자세한 사항 및 예는, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions">메서드 정의</a> 참조.</p>
+
+<h3 id="계산된_속성명">계산된 속성명</h3>
+
+<p>ECMAScript 2015를 시작으로, 객체 초기화 구문은 계산된 속성명(computed property name)도 지원합니다. 각괄호 <code>[]</code> 안에 식을 넣을 수 있고, 식이 계산되고 그 결과가 속성명으로 사용됩니다. 이는 이미 속성을 읽고 설정하는 데 사용했을 수 있는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors" title="property accessor">속성 접근자</a> 구문의 각괄호 표기법을 연상시킵니다.  </p>
+
+<p>이제 당신은 객체 리터럴에서도 같은 구문을 쓸 수 있습니다:</p>
+
+<pre class="brush: js notranslate">// 계산된 속성명 (ES6)
+var i = 0;
+var a = {
+ ["foo" + ++i]: i,
+ ["foo" + ++i]: i,
+ ["foo" + ++i]: i
+};
+
+console.log(a.foo1); // 1
+console.log(a.foo2); // 2
+console.log(a.foo3); // 3
+
+var param = 'size';
+var config = {
+ [param]: 12,
+ ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4
+};
+
+console.log(config); // { size: 12, mobileSize: 4 }</pre>
+
+<h3 id="전개_속성">전개 속성</h3>
+
+<p><a href="https://github.com/tc39/proposal-object-rest-spread">ECMASCript의 나머지/전개 속성</a> 제안 (stage 4) 으로 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">전개(spread)</a> 속성이 객체 리터럴에 추가됩니다. 이 속성은 제공된 객체의 열거 가능한(enumerable) 속성을 새 객체로 복사합니다.</p>
+
+<p>(<code>prototype</code>을 제외하는) 얕은 복제(Shallow-cloning) 나 객체 합침(merging objects)이 이제{{jsxref("Object.assign()")}} 보다 짧은 문법으로 가능해집니다.</p>
+
+<pre class="notranslate">let obj1 = { foo: 'bar', x: 42 }
+let obj2 = { foo: 'baz', y: 13 }
+
+let clonedObj = { ...obj1 }
+// Object { foo: "bar", x: 42 }
+
+let mergedObj = { ...obj1, ...obj2 }
+// Object { foo: "baz", x: 42, y: 13 }</pre>
+
+<div class="blockIndicator warning">
+<p>{{jsxref("Object.assign()")}}는 <a href="https://wiki.developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/set">setters</a>를 작동시키지만, 전개 연산자(spread operator)는 아니라는 걸 주목하세요!</p>
+</div>
+
+<h3 id="프로토타입_변이">프로토타입 변이</h3>
+
+<p><code>__proto__: value</code> 또는 <code>"__proto__": value</code> 형태의 속성 정의는 이름이 <code>__proto__</code>인 속성을 만들지 않습니다. 대신, 제공된 값이 객체 또는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>이면, 생성된 객체의 <code>[[Prototype]]</code>을 그 값으로 바꿉니다. (값이 객체나 null이 아니면, 객체는 바뀌지 않습니다.)</p>
+
+<pre class="brush: js notranslate">var obj1 = {};
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+
+var obj2 = { __proto__: null };
+assert(Object.getPrototypeOf(obj2) === null);
+
+var protoObj = {};
+var obj3 = { "__proto__": protoObj };
+assert(Object.getPrototypeOf(obj3) === protoObj);
+
+var obj4 = { __proto__: "not an object or null" };
+assert(Object.getPrototypeOf(obj4) === Object.prototype);
+assert(!obj4.hasOwnProperty("__proto__"));
+</pre>
+
+<p>단일 프로토타입 변이(mutation)만 객체 리터럴에 허용됩니다: 다중 프로토타입 변이는 구문 오류입니다.</p>
+
+<p>"colon" 표기법을 쓰지 않는 속성 정의는 프로토타입 변이가 아닙니다: 그들은 다른 이름을 사용하는 비슷한 정의와 동일하게 동작하는 속성 정의입니다.</p>
+
+<pre class="brush: js notranslate">var __proto__ = "variable";
+
+var obj1 = { __proto__ };
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+assert(obj1.hasOwnProperty("__proto__"));
+assert(obj1.__proto__ === "variable");
+
+var obj2 = { __proto__() { return "hello"; } };
+assert(obj2.__proto__() === "hello");
+
+var obj3 = { ["__prot" + "o__"]: 17 };
+assert(obj3.__proto__ === 17);
+</pre>
+
+<h2 id="스펙">스펙</h2>
+
+<table>
+ <tbody>
+ <tr>
+ <th scope="col">Specification</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.operators.object_initializer")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a></li>
+ <li><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/get">get</a></code> / <code><a href="/ko/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions">메서드 정의</a></li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Lexical_grammar" title="Lexical grammar">어휘 문법</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/optional_chaining/index.html b/files/ko/web/javascript/reference/operators/optional_chaining/index.html
new file mode 100644
index 0000000000..cdf88c138b
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/optional_chaining/index.html
@@ -0,0 +1,187 @@
+---
+title: Optional chaining
+slug: Web/JavaScript/Reference/Operators/Optional_chaining
+translation_of: Web/JavaScript/Reference/Operators/Optional_chaining
+---
+<div>{{JSSidebar("Operators")}}</div>
+
+<p>{{SeeCompatTable}}</p>
+
+<p><strong>optional chaining</strong> 연산자 <strong><code>?.</code></strong> 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. <span class="seoSummary"><code>?.</code> 연산자는 <code>.</code> 체이닝 연산자와 유사하게 작동하지만, 만약 참조가 {{glossary("nullish")}} ({{JSxRef("null")}} 또는 {{JSxRef("undefined")}})이라면, 에러가 발생하는 것 대신에 표현식의 리턴 값은 <code>undefined</code>로 단락된다.</span> 함수 호출에서 사용될 때, 만약 주어진 함수가 존재하지 않는다면, <code>undefined</code>를 리턴한다.</p>
+
+<p>이것은 참조가 누락될 가능성이 있는 경우 연결된 속성으로 접근할 때 더 짧고 간단한 표현식이 생성된다. 어떤 속성이 필요한지에 대한 보증이 확실하지 않는 경우 객체의 내용을 탐색하는 동안 도움이 될 수 있다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html")}}</div>
+
+<div></div>
+
+<p class="hidden">이 대화식 예제의 소스는 GitHub repository에 저장된다. 만약 너가 대화식 예제 프로젝트에 기여하려면, <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>를 복제(clone)하고 풀 리퀘스트를 보내라.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><var>obj</var>?.<var>prop</var>
+<var>obj</var>?.[<var>expr</var>]
+<em>arr</em>?.[<var>index</var>]
+<var>func</var>?.(<var>args</var>)
+</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>optional chaining 연산자는 참조나 기능이 <code>undefined</code> 또는 <code>null</code>일 수 있을 때 연결된 객체의 값에 접근하는 단순화할 수 있는 방법을 제공한다.</p>
+
+<p>예를 들어, 중첩된 구조를 가진 객체에서 <code>obj</code>가 있다. optional chaining이 없이 깊이 중첩된 하위 속성을 찾으려면, 다음과 같이 참조를 확인해야 한다:</p>
+
+<pre class="brush: js">let nestedProp = obj.first &amp;&amp; obj.first.second;</pre>
+
+<p><code>obj.first</code>의 값은 <code>obj.first.second</code>의 값에 접근하기 전에 <code>null</code> (그리고 <code>undefined</code>)가 아니라는 점을 검증한다. 이는 만약에 <code>obj.first</code>를 테스트 없이 <code>obj.first.second</code> 에 직접 접근할 때 일어날 수 있는 에러를 방지한다. </p>
+
+<p>그러나 optional chaining 연산자(<code>?.</code>)를 사용하여, <code>obj.first.second</code> 에 접근하기 전에 <code>obj.first</code>의 상태에 따라 명시적으로 테스트하거나 단락시키지 않아도 된다:</p>
+
+<pre class="brush: js">let nestedProp = obj.first?.second;</pre>
+
+<p><code>.</code> 대신에 <code>?.</code> 연산자를 사용함으로써, 자바스크립트는 <code>obj.first.second</code>에 접근하기 전에 <code>obj.first</code>가 <code>null</code> 또는 <code>undefined</code>가 아니라는 것을 암묵적으로 확인하는 것을 알고 있다. 만약 <code>obj.first</code>가 <code>null</code> 또는 <code>undefined</code>이라면, 그 표현식은 자동으로 단락되어 <code>undefined</code>가 반환된다.</p>
+
+<p>이는 다음과 같다:</p>
+
+<pre class="brush: js">let nestedProp = ((obj.first === null || obj.first === undefined) ? undefined : obj.first.second);</pre>
+
+<h3 id="함수의_호출과_Optional_chaining">함수의 호출과 Optional chaining</h3>
+
+<p>존재하지 않을 수 있는 매서드를 호출할 때, optional chaining을 사용할 수 있다. 예를 들어, 구현 기간이나 사용자 장치에서 사용할 수 없는 기능 때문에 메서드를 사용할 수 없는 API를 사용할 경우,  유용할 수 있다.</p>
+
+<p>함수 호출과 optional chaining을 사용함으로써 메서드를 찾을 수 없는 경우에 예외를 발생시키는 것 대신에 그 표현식은 자동으로 <code>undefined</code>를 반환한다:</p>
+
+<pre class="brush: js">let result = someInterface.customMethod?.();</pre>
+
+<div class="blockIndicator note">
+<p><strong>메모:</strong> 만약 속성에 해당 이름이 있지만 함수가 아니라면, <code>?.</code>의 사용은 여전히 예외를 발생시킨다. {{JSxRef("TypeError")}} exception (<code>x.y</code><code> is not a function</code>).</p>
+</div>
+
+<h4 id="optional_callbacks과_event_handlers_다루기">optional callbacks과 event handlers 다루기</h4>
+
+<p>만약 객체에서 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring">destructuring assignment</a>로 callbacks 또는 fetch 메서드를 사용한다면, 그 존재 여부를 테스트하지 않으면 함수로 호출할 수 없는 존재 하지 않는 값을 가질 수 있다. <code>?.</code>을 사용하면, 다음 추가 테스트를 피할 수 있다:</p>
+
+<pre class="brush: js">// Written as of ES2019
+function doSomething(onContent, onError) {
+ try {
+ // ... do something with the data
+ }
+ catch (err) {
+ if (onError) { // Testing if onError really exists
+ onError(err.message);
+ }
+ }
+}
+</pre>
+
+<pre class="brush: js">// Using optional chaining with function calls
+function doSomething(onContent, onError) {
+ try {
+ // ... do something with the data
+ }
+ catch (err) {
+ onError?.(err.message); // no exception if onError is undefined
+ }
+}
+</pre>
+
+<h3 id="표현식에서_Optional_chaining">표현식에서 Optional chaining</h3>
+
+<p>optional chaining 연산자를 속성에 표현식으로 접근할 때 대괄호 표기법(<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Bracket_notation">the bracket notation of the property accessor</a>)을 사용할 수 있다:</p>
+
+<pre class="brush: js">let nestedProp = obj?.['prop' + 'Name'];
+</pre>
+
+<h3 id="Optional_chaining으로_배열_항목에_접근하기">Optional chaining으로 배열 항목에 접근하기</h3>
+
+<pre class="brush: js">let arrayItem = arr?.[42];</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="기본_예제">기본 예제</h3>
+
+<p>이 예제는 해당 멤버가 없을 때, map에서 멤버 bar의 <code>name</code>의 속성 값을 찾는다. 그러므로 결과는 <code>undefined</code>이다.</p>
+
+<pre class="brush: js">let myMap = new Map();
+myMap.set("foo", {name: "baz", desc: "inga"});
+
+let nameBar = myMap.get("bar")?.name;</pre>
+
+<h3 id="단락_평가">단락 평가</h3>
+
+<p>표현식에서 optional chaining을 사용할 때, 만약 왼쪽에 있는 피연산자가 <code>null</code> or <code>undefined</code>인  경우, 그 표현식은 평가되지 않는다. 예들 들어:</p>
+
+<pre class="brush: js">let potentiallyNullObj = null;
+let x = 0;
+let prop = potentiallyNullObj?.[x++];
+
+console.log(x); // 0 x는 증가하지 않음
+</pre>
+
+<h3 id="optional_chaining_연산자_쌓기">optional chaining 연산자 쌓기</h3>
+
+<p>중첩된 구조에서는 optional chaining을 여러 번 사용할 수 있다:</p>
+
+<pre class="brush: js">let customer = {
+ name: "Carl",
+ details: {
+ age: 82,
+ location: "Paradise Falls" // detailed address is unknown
+ }
+};
+let customerCity = customer.details?.address?.city;
+
+// … this also works with optional chaining function call
+let duration = vacations.trip?.getTime?.();
+</pre>
+
+<h3 id="널_병합_연산자와_같이_사용하기">널 병합 연산자와 같이 사용하기</h3>
+
+<p>널 병합 연산자는 optional chaining를 사용한 후에 아무 값도 찾을 수 없을 때 기본 값을 주기 위해 사용될 수 있다:</p>
+
+<pre class="brush: js">let customer = {
+ name: "Carl",
+ details: { age: 82 }
+};
+const customerCity = customer?.city ?? "Unknown city";
+console.log(customerCity); // Unknown city</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><a href="https://tc39.es/proposal-optional-chaining/#top">Proposal for the "optional chaining" operator</a></td>
+ <td>Stage 4</td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.operators.optional_chaining")}}</p>
+</div>
+
+<h3 id="구현_진행">구현 진행</h3>
+
+<p>The following table provides a daily implementation status for this feature, because this feature has not yet reached cross-browser stability. The data is generated by running the relevant feature tests in <a href="https://github.com/tc39/test262">Test262</a>, the standard test suite of JavaScript, in the nightly build, or latest release of each browser's JavaScript engine.</p>
+
+<div>{{EmbedTest262ReportResultsTable("optional-chaining")}}</div>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li>The {{JSxRef("Operators/Nullish_Coalescing_Operator", "Nullish Coalescing Operator", '', 1)}}</li>
+ <li><a href="https://github.com/tc39/proposals">TC39 proposals</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/pipeline_operator/index.html b/files/ko/web/javascript/reference/operators/pipeline_operator/index.html
new file mode 100644
index 0000000000..42eb62e545
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/pipeline_operator/index.html
@@ -0,0 +1,76 @@
+---
+title: 파이프 연산자
+slug: Web/JavaScript/Reference/Operators/Pipeline_operator
+tags:
+ - Experimental
+ - JavaScript
+ - Operator
+translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator
+---
+<div>{{jsSidebar("Operators")}} {{SeeCompatTable}}</div>
+
+<p><span class="seoSummary"><strong>파이프 연산자</strong>(<code>|&gt;</code>)는 실험적 기능(stage 1)으로, 표현식의 값을 함수에 전달합니다. 파이프 연산자를 활용하면 중첩 함수 호출을 좀 더 읽기 좋은 형식으로 작성할 수 있습니다.</span> 결과물은 문법적 설탕<sup>syntactic sugar</sup>으로, 하나의 인수를 제공하는 함수 호출은 다음 코드처럼 쓸 수 있습니다.</p>
+
+<pre class="brush: js">let url = "%21" |&gt; decodeURI;</pre>
+
+<p>전통적인 구문에서는 아래처럼 호출합니다.</p>
+
+<pre class="brush: js">let url = decodeURI("%21");
+</pre>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>expression</em> |&gt; <em>function</em>
+</pre>
+
+<p>지정한 <code>expression</code>의 값이 <code>function</code>의 유일한 매개변수로 전달됩니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="함수_체이닝">함수 체이닝</h3>
+
+<p>파이프 연산자를 사용해, 여러 번 중첩된 함수 호출을 읽기 편한 형태로 바꿀 수 있습니다.</p>
+
+<pre class="brush: js">const double = (n) =&gt; n * 2;
+const increment = (n) =&gt; n + 1;
+
+// 파이프 연산자 없이
+double(increment(double(double(5)))); // 42
+
+// 파이프 연산자 사용
+5 |&gt; double |&gt; double |&gt; increment |&gt; double; // 42
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><a href="https://tc39.github.io/proposal-pipeline-operator/#sec-intro">Pipeline operator draft</a></td>
+ <td>Stage 1</td>
+ <td>Not part of the ECMAScript specification yet.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.operators.pipeline")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="https://github.com/tc39/proposal-pipeline-operator">Github - Proposal-pipeline-operator</a></li>
+ <li><a href="https://github.com/tc39/proposals">TC39 제안서</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/property_accessors/index.html b/files/ko/web/javascript/reference/operators/property_accessors/index.html
new file mode 100644
index 0000000000..83ae2e0b80
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/property_accessors/index.html
@@ -0,0 +1,153 @@
+---
+title: 속성 접근자
+slug: Web/JavaScript/Reference/Operators/Property_Accessors
+tags:
+ - JavaScript
+ - Operator
+ - Reference
+translation_of: Web/JavaScript/Reference/Operators/Property_Accessors
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>속성 접근자</strong>는 점 또는 괄호 표기법으로 객체의 속성에 접근할 수 있도록 해줍니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-propertyaccessors.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">object.property
+object['property']
+</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>객체는 속성의 이름을 키로 사용하는 연관 배열(다른 이름으로는 맵, 딕셔너리, 해시, 룩업 테이블)로 생각할 수 있습니다. 보통 객체의 속성을 메서드와 구별해서 말하곤 하지만, 서로의 차이는 관례에 불과합니다. 메서드는 호출할 수 있는 속성일 뿐으로, 속성의 값이 {{jsxref("Function")}}을 가리키는 참조라면 그 속성을 메서드라고 합니다.</p>
+
+<p>속성에 접근하는 법은 점 표기법과 괄호 표기법 두 가지가 있습니다.</p>
+
+<h3 id="점_표기법">점 표기법</h3>
+
+<pre class="brush: js">get = object.property;
+object.property = set;
+</pre>
+
+<p>이 코드에서, <code>property</code>는 유효한 JavaScript {{glossary("identifier", "식별자")}}여야합니다. 따라서 <code>object.$1</code>은 유효하지만 <code>object.1</code>은 아닙니다.</p>
+
+<pre class="brush: js">document.createElement('pre');
+</pre>
+
+<p>여기서는 "createElement"라는 이름을 가진 메서드를 <code>document</code>에서 찾아 호출하고 있습니다.</p>
+
+<p>소숫점 없는 숫자 리터럴의 메서드를 호출하고 싶으면, 메서드의 접근자 앞에 공백을 한 칸 추가해 점이 소숫점으로 인식되지 않도록 해야 합니다.</p>
+
+<pre><code>77 .toExponential();
+// or
+77
+.toExponential();
+// or
+(77).toExponential();
+// or
+77..toExponential();
+// or
+77.0.toExponential();
+// because 77. === 77.0, no ambiguity</code>
+</pre>
+
+<h3 id="괄호_표기법">괄호 표기법</h3>
+
+<pre class="brush: js">get = object[property_name];
+object[property_name] = set;
+</pre>
+
+<p>괄호 표기법에서는 <code>property_name</code>으로 문자열이나 {{jsxref("Symbol")}}을 사용할 수 있습니다. 문자열은 유효한 식별자가 아니어도 괜찮습니다. "<code>1foo</code>", "<code>!bar!</code>", 심지어 "<code> </code>"(공백)도 가능합니다.</p>
+
+<pre class="brush: js">document['createElement']('pre');
+</pre>
+
+<p>이 코드는 점 표기법의 예시와 동일합니다.</p>
+
+<p>괄호 앞에 공백이 올 수도 있습니다.</p>
+
+<pre><code>document ['createElement']('pre');</code>
+</pre>
+
+<h3 id="속성_이름">속성 이름</h3>
+
+<p>속성의 이름은 문자열이나 {{jsxref("Symbol")}}입니다. 숫자 등의 다른 자료형은 문자열로 변환됩니다.</p>
+
+<pre class="brush: js">var object = {};
+object['1'] = 'value';
+console.log(object[1]);
+</pre>
+
+<p>위 코드의 <code>1</code>은 <code>'1'</code>로 변환되므로, 출력 결과는 "value"입니다.</p>
+
+<pre class="brush: js">var foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {};
+object[foo] = 'value';
+console.log(object[bar]);
+</pre>
+
+<p>위의 코드 역시 <code>foo</code>와 <code>bar</code>가 같은 문자열(<a href="/ko/docs/SpiderMonkey">SpiderMonkey</a> JavaScript 엔진에서는 문자열 "<code>['object Object']</code>")로 변환되므로, 출력 결과는 동일하게 "value"입니다.</p>
+
+<h3 id="메서드_바인딩">메서드 바인딩</h3>
+
+<p>메서드는 해당 메서드의 객체에 바인딩되지 않습니다. 특히 <code>this</code>는 메서드 내에 고정되지 않으므로 <code>this</code>가 항상 현재 메서드를 포함하는 객체를 참조하는건 아닙니다. 대신, <code>this</code>는 함수 호출 방식에 따라 "전달"됩니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/this#bind_메서드" title="method binding">메서드 바인딩</a>을 참고하세요.</p>
+
+<h3 id="eval()_주의사항"><code>eval()</code> 주의사항</h3>
+
+<p>JavaScript 초심자로써는 괄호 표기법을 사용할 수 있는 장소에 {{jsxref("eval", "eval()")}}을 남용하기 쉽습니다. 간혹 스크립트에서 다음과 같은 구문을 찾아볼 수 있습니다.</p>
+
+<pre class="brush: js">x = eval('document.forms.form_name.elements.' + strFormControl + '.value');
+</pre>
+
+<p><code>eval()</code>은 느리고, 가능하다면 최대한 피해야 합니다. 또한, <code>strFormControl</code>은 유효한 식별자여야 하지만, 폼 컨트롤의 ID나 이름은 식별자가 아닐 수도 있습니다. 따라서 괄호 표기법을 대신 사용하는 것이 좋습니다.</p>
+
+<pre class="brush: js">x = document.forms["form_name"].elements[strFormControl].value;
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">명세</th>
+ <th scope="col">상태</th>
+ <th scope="col">설명</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-property-accessors', 'Property Accessors')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES6', '#sec-property-accessors', 'Property Accessors')}}</td>
+ <td>{{Spec2('ES6')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES5.1', '#sec-11.2.1', 'Property Accessors')}}</td>
+ <td>{{Spec2('ES5.1')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES1', '#sec-11.2.1', 'Property Accessors')}}</td>
+ <td>{{Spec2('ES1')}}</td>
+ <td>초기 정의. JavaScript 1.0에서 구현됨.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.operators.property_accessors")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Object")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/remainder/index.html b/files/ko/web/javascript/reference/operators/remainder/index.html
new file mode 100644
index 0000000000..beeb0033a3
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/remainder/index.html
@@ -0,0 +1,73 @@
+---
+title: 나머지 연산자 (%)
+slug: Web/JavaScript/Reference/Operators/Remainder
+translation_of: Web/JavaScript/Reference/Operators/Remainder
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>나머지 연산자(<code>%</code>)는 피제수가 제수에 의해 나누어진 후, 그 나머지를 반환합니다. 항상 피제수의 부호를 따릅니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-remainder.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>var1</var> % <var>var2</var>
+</pre>
+
+<h2 id="예시">예시</h2>
+
+<h3 id="피제수의_나머지">(+)피제수의 나머지</h3>
+
+<pre class="brush: js notranslate"> 12 % 5 // 2
+ 1 % -2 // 1
+ 1 % 2 // 1
+ 2 % 3 // 2
+5.5 % 2 // 1.5
+</pre>
+
+<h3 id="-피제수의_나머지">(-)피제수의 나머지</h3>
+
+<pre class="brush: js notranslate">-12 % 5 // -2
+-1 % 2 // -1
+-4 % 2 // -0</pre>
+
+<h3 id="NaN의_나머지">NaN의 나머지</h3>
+
+<pre class="brush: js notranslate">NaN % 2 // NaN</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specification</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Remainder operator')}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.operators.remainder")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition">Addition operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division">Division operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Decrement">Decrement operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/spread_syntax/index.html b/files/ko/web/javascript/reference/operators/spread_syntax/index.html
new file mode 100644
index 0000000000..d2174a53bb
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/spread_syntax/index.html
@@ -0,0 +1,255 @@
+---
+title: 전개 구문
+slug: Web/JavaScript/Reference/Operators/Spread_syntax
+tags:
+ - ECMAScript 2015
+ - Iterator
+ - JavaScript
+ - Reference
+ - Spread
+ - 전개 연산자
+translation_of: Web/JavaScript/Reference/Operators/Spread_syntax
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>전개 구문</strong>을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<p>함수 호출:</p>
+
+<pre class="syntaxbox">myFunction(...iterableObj);
+</pre>
+
+<p>배열 리터럴과 문자열:</p>
+
+<pre class="syntaxbox">[...iterableObj, '4', 'five', 6];</pre>
+
+<p>객체 리터럴(ECMAScript 2018에서 추가):</p>
+
+<pre class="syntaxbox">let objClone = { ...obj };</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="함수_호출에서의_전개">함수 호출에서의 전개</h3>
+
+<h4 id="apply()_대체"><code>apply()</code> 대체</h4>
+
+<p>일반적으로 배열의 엘리먼트를 함수의 인수로 사용하고자 할 때 {{jsxref( "Function.prototype.apply()")}} 를 사용하였습니다.</p>
+
+<pre class="brush: js">function myFunction(x, y, z) { }
+var args = [0, 1, 2];
+myFunction.apply(null, args);</pre>
+
+<p>전개 구문을 사용해 위 코드는 다음과 같이 작성될 수 있습니다.</p>
+
+<pre class="brush: js">function myFunction(x, y, z) { }
+var args = [0, 1, 2];
+myFunction(...args);</pre>
+
+<p>인수 목록의 모든 인수는 전개 구문을 사용할 수 있으며, 여러번 사용될 수도 있습니다.</p>
+
+<pre class="brush: js">function myFunction(v, w, x, y, z) { }
+var args = [0, 1];
+myFunction(-1, ...args, 2, ...[3]);</pre>
+
+<h4 id="new에_적용"><code>new</code>에 적용</h4>
+
+<p>{{jsxref("Operators/new", "new")}}를 사용해 생성자를 호출 할 때, 배열과 <code>apply</code> (<code>apply</code> 는 <code>[[Call]]</code> 을 하지만 <code>[[Construct]]</code> 는 그렇지 않음) 를 <strong>직접</strong> 사용하는 것은 불가했습니다. 하지만, 전개 구문 덕분에 배열을 <code>new</code> 와 함께 쉽게 사용될 수 있습니다.</p>
+
+<pre class="brush: js">var dateFields = [1970, 0, 1]; // 1 Jan 1970
+var d = new Date(...dateFields);
+</pre>
+
+<p>전개 구문 없이 파라미터의 배열과 함께 <code>new</code>를 사용하려면, 부분적인 어플리케이션을 통해 <strong>간접적</strong>으로 해야 합니다.</p>
+
+<pre class="brush: js">function applyAndNew(constructor, args) {
+ function partial () {
+ return constructor.apply(this, args);
+ };
+ if (typeof constructor.prototype === "object") {
+ partial.prototype = Object.create(constructor.prototype);
+ }
+ return partial;
+}
+
+
+function myConstructor () {
+ console.log("arguments.length: " + arguments.length);
+ console.log(arguments);
+ this.prop1="val1";
+ this.prop2="val2";
+};
+
+var myArguments = ["hi", "how", "are", "you", "mr", null];
+var myConstructorWithArguments = applyAndNew(myConstructor, myArguments);
+
+console.log(new myConstructorWithArguments);
+// (internal log of myConstructor): arguments.length: 6
+// (internal log of myConstructor): ["hi", "how", "are", "you", "mr", null]
+// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}</pre>
+
+<h3 id="배열_리터럴에서의_전개">배열 리터럴에서의 전개</h3>
+
+<h4 id="더_강력한_배열_리터럴">더 강력한 배열 리터럴</h4>
+
+<p>전개 구문 없이, 이미 존재하는 배열을 일부로 하는 새로운 배열을 생성하기에, 배열 리터럴 문법은 더 이상 충분하지 않으며 {{jsxref("Array.prototype.push", "push()")}}, {{jsxref("Array.prototype.splice", "splice()")}}, {{jsxref("Array.prototype.concat", "concat()")}} 등의 조합을 사용하는 대신 명령형 코드를 사용해야 했습니다. 전개 구문으로 이는 훨씬 더 간결해졌습니다.</p>
+
+<pre class="brush: js">var parts = ['shoulders', 'knees'];
+var lyrics = ['head', ...parts, 'and', 'toes'];
+// ["head", "shoulders", "knees", "and", "toes"]
+</pre>
+
+<p>인수 목록을 위한 spread 처럼, <code>...</code> 은 배열 리터럴의 어디에서든 사용될 수 있으며 여러번 사용될 수도 있습니다.</p>
+
+<h4 id="배열_복사">배열 복사</h4>
+
+<pre class="brush: js">var arr = [1, 2, 3];
+var arr2 = [...arr]; // arr.slice() 와 유사
+arr2.push(4);
+
+// arr2 은 [1, 2, 3, 4] 이 됨
+// arr 은 영향을 받지 않고 남아 있음
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> Spread 문법은 배열을 복사할 때 1 레벨 깊이에서 효과적으로 동작합니다. 그러므로, 다음 예제와 같이 다차원 배열을 복사하는것에는 적합하지 않을 수 있습니다. ({{jsxref("Object.assign()")}} 과 전개 구문이 동일합니다)</p>
+</div>
+
+<pre class="brush: js">var a = [[1], [2], [3]];
+var b = [...a];
+b.shift().shift(); // 1
+// 이제 배열 a 도 영향을 받음: [[], [2], [3]]
+</pre>
+
+<h4 id="배열을_연결하는_더_나은_방법">배열을 연결하는 더 나은 방법</h4>
+
+<p>{{jsxref("Array.prototype.concat()")}} 은 배열을 존재하는 배열의 끝에 이어붙이는데 종종 사용됩니다. 전개 구문 없이, 이는 다음과 같이 작성됩니다.</p>
+
+<pre class="brush: js">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// arr2 의 모든 항목을 arr1 에 붙임
+arr1 = arr1.concat(arr2);</pre>
+
+<p>전개 구문을 사용해 이는 다음과 같아집니다.</p>
+
+<pre class="brush: js">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1 = [...arr1, ...arr2]; // arr1 은 이제 [0, 1, 2, 3, 4, 5]
+</pre>
+
+<p>{{jsxref("Array.prototype.unshift()")}}는 존재하는 배열의 시작 지점에 배열의 값들을 삽입하는데 종종 사용됩니다. 전개 구문 없이, 이는 다음과 같이 작성됩니다.</p>
+
+<pre class="brush: js">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// arr2 의 모든 항목을 arr1 의 앞에 붙임
+Array.prototype.unshift.apply(arr1, arr2) // arr1 은 이제 [3, 4, 5, 0, 1, 2] 가 됨</pre>
+
+<p>전개 구문으로, 이는 다음과 같아집니다.</p>
+
+<pre class="brush: js">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1 = [...arr2, ...arr1]; // arr1 은 이제 [3, 4, 5, 0, 1, 2] 가 됨
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: <code>unshift()</code>와 달리, 위 예제는 새로운 <code>arr1</code>을 만들며 기존 배열을 변형하지 않습니다.</p>
+</div>
+
+<h3 id="객체_리터럴에서의_전개">객체 리터럴에서의 전개</h3>
+
+<p><a href="https://github.com/tc39/proposal-object-rest-spread">ECMAScript의 Rest/Spread 프로퍼티</a> 제안 (stage 4) 은 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer">객체 리터럴</a>에 속성 전개를 추가합니다. 이는 제공된 객체가 소유한 열거형 프로퍼티를 새로운 객체로 복사합니다.</p>
+
+<p>얕은 복제(prototype 제외) 또는 객체의 병합은 이제 {{jsxref("Object.assign()")}} 보다 더 짧은 문법을 사용해 가능합니다.</p>
+
+<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 };
+var obj2 = { foo: 'baz', y: 13 };
+
+var clonedObj = { ...obj1 };
+// Object { foo: "bar", x: 42 }
+
+var mergedObj = { ...obj1, ...obj2 };
+// Object { foo: "baz", x: 42, y: 13 }</pre>
+
+<p>{{jsxref("Object.assign()")}} 은 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/set">setters</a> 를 트리거하지만 전개 구문은 그렇지 않음을 유의합니다.</p>
+
+<p>{{jsxref("Object.assign()")}} 함수를 대체하거나 흉내낼 수 없음을 유의합니다.</p>
+
+<pre><code>var obj1 = { foo: 'bar', x: 42 };
+var obj2 = { foo: 'baz', y: 13 };
+const merge = ( ...objects ) =&gt; ( { ...objects } );
+
+var mergedObj = merge ( obj1, obj2);
+// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } }
+
+var mergedObj = merge ( {}, obj1, obj2);
+// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }</code></pre>
+
+<p>위 예제에서, 전개 구문은 예상대로 동작하지 않습니다. 나머지 매개변수로 인해, 인수 배열을 객체 리터럴로 전개합니다.</p>
+
+<h3 id="이터러블_전용">이터러블 전용</h3>
+
+<p>전개 구문 (spread 프로퍼티인 경우 제외) 은 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator">iterable</a> 객체에만 적용됩니다.</p>
+
+<pre class="brush: js">var obj = {'key1': 'value1'};
+var array = [...obj]; // TypeError: obj is not iterable
+</pre>
+
+<h3 id="많은_값과_Spread">많은 값과 Spread</h3>
+
+<p>함수 호출에서 spread 문법을 사용할 때, 자바스크립트 엔진의 인수 길이 제한을 초과하지 않도록 주의합니다. 자세한 내용은 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object)."><code>apply()</code></a> 를 보세요.</p>
+
+<h2 id="나머지_구문_(매개변수)">나머지 구문 (매개변수)</h2>
+
+<p>나머지 구문은 전개 구문과 정확히 같아보이지만, 대신 배열이나 객체를 분해할 때 사용됩니다. 어떤 면에서, 나머지 구문은 전개 구문과 반대입니다. 전개는 배열을 그 엘리먼트로 '확장' 하는 반면, 나머지는 여러 엘리먼트를 수집하며 이를 하나의 엘리먼트로 '압축' 합니다. <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">나머지 매개변수</a> 문서를 보세요.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">명세</th>
+ <th scope="col">상태</th>
+ <th scope="col">코멘트</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td>
+ <td>{{Spec2('ES2015')}}</td>
+ <td>명세의 여러 섹션에서 정의 됨: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Array Initializer</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Argument Lists</a></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES2018', '#sec-object-initializer')}}</td>
+ <td>{{Spec2('ES2018')}}</td>
+ <td><a href="http://www.ecma-international.org/ecma-262/9.0/#sec-object-initializer">Object Initializer</a> 에서 정의됨</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td>변동 없음.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-object-initializer')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td>변동 없음.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.operators.spread")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">나머지 매개변수</a> (또한 ‘<code>...</code>’)</li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">fn.apply</a> (또한 ‘<code>...</code>’)</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/super/index.html b/files/ko/web/javascript/reference/operators/super/index.html
new file mode 100644
index 0000000000..fbcb123c57
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/super/index.html
@@ -0,0 +1,176 @@
+---
+title: super
+slug: Web/JavaScript/Reference/Operators/super
+tags:
+ - Classes
+ - JavaScript
+ - Left-hand-side expressions
+ - Operator
+ - Reference
+translation_of: Web/JavaScript/Reference/Operators/super
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>super</strong> 키워드는 부모 오브젝트의 함수를 호출할 때 사용됩니다.</p>
+
+<p><code>super.prop</code> 와 <code>super[expr]</code> 표현식은 <a href="/ko/docs/Web/JavaScript/Reference/Classes">클래스</a> 와 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer">객체리터럴</a>의 어떠한 <a href="/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions">메서드 정의</a> 방법에서도 유효합니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">super([arguments]); // 부모 생성자 호출
+super.functionOnParent([arguments]);
+</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>생성자에서는 <code>super</code> 키워드 하나만 사용되거나 <code>this</code> 키워드가 사용되기 전에 호출되어야 합니다. 또한 <code>super</code> 키워드는 부모 객체의 함수를 호출하는데 사용될 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="클래스에서_super_사용하기">클래스에서 <code>super</code> 사용하기</h3>
+
+<p>이 예제는 옆의 링크에서 발췌하였습니다. <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a>).</p>
+
+<pre class="brush: js">class Polygon {
+ constructor(height, width) {
+ this.name = 'Polygon';
+ this.height = height;
+ this.width = width;
+ }
+ sayName() {
+ console.log('Hi, I am a ', this.name + '.');
+ }
+}
+
+class Square extends Polygon {
+ constructor(length) {
+ this.height; // 참조오류가 발생합니다. super가 먼저 호출되어야 합니다.
+
+ // 여기서, 부모클래스의 생성자함수를 호출하여 높이값을 넘겨줍니다.
+ // Polygon의 길이와 높이를 넘겨줍니다.
+ super(length, length);
+
+ // 참고: 파생 클래스에서 super() 함수가 먼저 호출되어야
+ // 'this' 키워드를 사용할 수 있습니다. 그렇지 않을 경우 참조오류가 발생합니다.
+ this.name = 'Square';
+ }
+
+ get area() {
+ return this.height * this.width;
+ }
+
+ set area(value) {
+ this.area = value;
+ }
+}</pre>
+
+<h3 id="정적_메서드에서_Super_호출">정적 메서드에서 Super 호출</h3>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Classes/static">static</a> 메서드에서도 super를 호출할 수 있습니다.</p>
+
+<pre class="brush: js">class Human {
+ constructor() {}
+ static ping() {
+ return 'ping';
+ }
+}
+
+class Computer extends Human {
+ constructor() {}
+ static pingpong() {
+ return super.ping() + ' pong';
+ }
+}
+Computer.pingpong(); // 'ping pong'
+</pre>
+
+<h3 id="super의_속성_삭제">super의 속성 삭제</h3>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/delete">delete 연산자</a>를 사용할 수 없으며 <code>super.prop</code> 또는 <code>super[expr]</code> 표현식을 사용하여 부모 클래스의 속성을 삭제할 경우 {{jsxref("ReferenceError")}} 오류가 발생합니다.</p>
+
+<pre class="brush: js">class Base {
+ constructor() {}
+ foo() {}
+}
+class Derived {
+ constructor() {}
+ delete() {
+ delete super.foo;
+ }
+}
+
+new Derived().delete(); // 참조오류: 'super'완 관련된 삭제가 유효하지 않습니다. </pre>
+
+<h3 id="Super.prop은_non-writable_속성을_덮어_쓸_수_없습니다"><code>Super.prop</code>은 non-writable 속성을 덮어 쓸 수 없습니다</h3>
+
+<p>예를 들어 {{jsxref("Object.defineProperty")}}로 속성을 정의할 때, <code>super</code>의 속성 값을 덮어 쓸 수 없습니다.</p>
+
+<pre class="brush: js">class X {
+ constructor() {
+ Object.defineProperty(this, "prop", {
+ configurable: true,
+ writable: false,
+ value: 1
+ });
+ }
+ f() {
+ super.prop = 2;
+ }
+}
+
+var x = new X();
+x.f();
+console.log(x.prop); // 1
+</pre>
+
+<h3 id="객체_리터럴에서_super.prop_사용하기">객체 리터럴에서 <code>super.prop</code> 사용하기</h3>
+
+<p>Super는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer / literal</a> 표기법에서 사용할 수 있습니다. 아래의 예제에서, 두개의 객체는 메서드를 정의합니다. 두번째 객체에서, <code>super</code>는  첫번째 객체의 메서드를 호출합니다. 이 예제는 {{jsxref("Object.setPrototypeOf()")}}를 이용하여  obj2 prototype에 obj1을 세팅하여, <code>super</code>가 obj1의 method1을 찾을 수 있도록 합니다.</p>
+
+<pre class="brush: js">var obj1 = {
+ method1() {
+ console.log("method 1");
+ }
+}
+
+var obj2 = {
+ method2() {
+ super.method1();
+ }
+}
+
+Object.setPrototypeOf(obj2, obj1);
+obj2.method2(); // logs "method 1"
+</pre>
+
+<h2 id="명세서">명세서</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES6', '#sec-super-keyword', 'super')}}</td>
+ <td>{{Spec2('ES6')}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.operators.super")}}</p>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/this/index.html b/files/ko/web/javascript/reference/operators/this/index.html
new file mode 100644
index 0000000000..8a2807a5d8
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/this/index.html
@@ -0,0 +1,398 @@
+---
+title: this
+slug: Web/JavaScript/Reference/Operators/this
+tags:
+ - JavaScript
+ - Operator
+ - Primary Expressions
+ - Reference
+translation_of: Web/JavaScript/Reference/Operators/this
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>JavaScript에서 <strong>함수의 <code>this</code> 키워드</strong>는 다른 언어와 조금 다르게 동작합니다. 또한 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a>와 비엄격 모드에서도 일부 차이가 있습니다.</p>
+
+<p>대부분의 경우 <code>this</code>의 값은 함수를 호출한 방법에 의해 결정됩니다. 실행중에는 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있습니다. ES5는 {{jsxref('Operators/this', "함수를 어떻게 호출했는지 상관하지 않고 <code>this</code> 값을 설정할 수 있는")}} {{jsxref("Function.prototype.bind()", "bind")}} 메서드를 도입했고, ES2015는 스스로의 <code>this</code> 바인딩을 제공하지 않는 <a href="/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98">화살표 함수</a>를 추가했습니다(이는 렉시컬 컨텍스트안의 <code>this</code>값을 유지합니다).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-this.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">this</pre>
+
+<h3 id="값">값</h3>
+
+<p>실행 컨텍스트(global, function 또는 eval)의 프로퍼티는 비엄격 모드에서 항상 객체를 참조하며, 엄격 모드에서는 어떠한 값이든 될 수 있습니다.</p>
+
+<h2 id="전역_문맥">전역 문맥</h2>
+
+<p>전역 실행 문맥<sup>global execution context</sup>에서 <code>this</code>는 엄격 모드 여부에 관계 없이 전역 객체를 참조합니다.</p>
+
+<pre class="brush: js notranslate">// 웹 브라우저에서는 window 객체가 전역 객체
+console.log(this === window); // true
+
+a = 37;
+console.log(window.a); // 37
+
+this.b = "MDN";
+console.log(window.b) // "MDN"
+console.log(b) // "MDN"</pre>
+
+<div class="blockIndicator note">
+<p><strong>노트:</strong> global {{jsxref("globalThis")}} 프로퍼티를 사용하여 코드가 실행중인 현재 컨텍스트와 관계없이 항상 전역 객체를 얻을 수 있습니다.</p>
+</div>
+
+<h2 id="함수_문맥">함수 문맥</h2>
+
+<p>함수 내부에서 <code>this</code>의 값은 함수를 호출한 방법에 의해 좌우됩니다.</p>
+
+<h3 id="단순_호출">단순 호출</h3>
+
+<p>다음 예제는 엄격 모드가 아니며 <code>this</code>의 값이 호출에 의해 설정되지 않으므로, 기본값으로 브라우저에서는 {{domxref("Window", "window")}}인 전역 객체를 참조합니다.</p>
+
+<pre class="brush: js notranslate">function f1() {
+ return this;
+}
+
+// 브라우저
+f1() === window; // true
+
+// Node.js
+f1() === global; // true</pre>
+
+<p>반면에 엄격 모드에서 <code>this</code> 값은 실행 문맥에 진입하며 설정되는 값을 유지하므로 다음 예시에서 보여지는 것 처럼 <code>this</code>는 <code>undefined</code>로 남아있습니다.</p>
+
+<pre class="brush: js notranslate">function f2(){
+  "use strict"; // 엄격 모드 참고
+  return this;
+}
+
+f2() === undefined; // true
+</pre>
+
+<div class="blockIndicator note">
+<p>두번째 예제에서 <code>f2</code>를 객체의 메서드나 속성(예: <code>window.f2()</code>)으로써가 아닌 직접 호출했기 때문에  <code>this</code>는 {{jsxref("undefined")}}여야 합니다. 그러나 엄격 모드를 처음 지원하기 시작한 초기 브라우저에서는 구현하지 않았고, <code>window</code> 객체를 잘못 반환했습니다.</p>
+</div>
+
+<p><code>this</code>의 값을 한 문맥에서 다른 문맥으로 넘기려면 다음 예시와 같이 {{jsxref("Function.prototype.call()", "call()")}}이나 {{jsxref("Function.prototype.apply", "apply()")}}를 사용하세요.</p>
+
+<p><strong>예시 1</strong></p>
+
+<pre class="brush: js notranslate" dir="rtl">// call 또는 apply의 첫 번째 인자로 객체가 전달될 수 있으며 this가 그 객체에 묶임
+var obj = {a: 'Custom'};
+
+// 변수를 선언하고 변수에 프로퍼티로 전역 window를 할당
+var a = 'Global';
+
+function whatsThis() {
+ return this.a; // 함수 호출 방식에 따라 값이 달라짐
+}
+
+whatsThis(); // this는 'Global'. 함수 내에서 설정되지 않았으므로 global/window 객체로 초기값을 설정한다.
+whatsThis.call(obj); // this는 'Custom'. 함수 내에서 obj로 설정한다.
+whatsThis.apply(obj); // this는 'Custom'. 함수 내에서 obj로 설정한다.
+</pre>
+
+<p><strong>예시 2</strong></p>
+
+<pre class="brush: js notranslate">function add(c, d) {
+ return this.a + this.b + c + d;
+}
+
+var o = {a: 1, b: 3};
+
+// 첫 번째 인자는 'this'로 사용할 객체이고,
+// 이어지는 인자들은 함수 호출에서 인수로 전달된다.
+add.call(o, 5, 7); // 16
+
+// 첫 번째 인자는 'this'로 사용할 객체이고,
+// 두 번째 인자는 함수 호출에서 인수로 사용될 멤버들이 위치한 배열이다.
+add.apply(o, [10, 20]); // 34
+</pre>
+
+<p>비엄격 모드에서 <code>this</code>로 전달된 값이 객체가 아닌 경우, <code>call</code>과 <code>apply</code>는 이를 객체로 변환하기 위한 시도를 합니다. <code>null</code>과 <code>undefined</code> 값은 전역 객체가 됩니다. <code>7</code>이나 <code>'foo'</code>와 같은 원시값은 관련된 생성자를 사용해 객체로 변환되며, 따라서 원시 숫자 <code>7</code>은 <code>new Number(7)</code>에 의해 객체로 변환되고 문자열 <code>'foo'</code>는 <code>new String('foo')</code>에 의해 객체로 변환됩니다.</p>
+
+<pre class="brush: js notranslate">function bar() {
+ console.log(Object.prototype.toString.call(this));
+}
+
+bar.call(7); // [object Number]
+bar.call('foo'); // [object String]
+bar.call(undefined); // [object global]
+</pre>
+
+<h3 id="bind_메서드"><code>bind</code> 메서드</h3>
+
+<p>ECMAScript 5는 {{jsxref("Function.prototype.bind")}}를 도입했습니다. <code>f.bind(someObject)</code>를 호출하면 <code>f</code>와 같은 본문(코드)과 범위를 가졌지만 this는 원본 함수를 가진 새로운 함수를 생성합니다. 새 함수의 <code>this</code>는 호출 방식과 상관없이 영구적으로<code>bind()</code>의 첫 번째 매개변수로 고정됩니다.</p>
+
+<pre class="brush: js notranslate">function f() {
+ return this.a;
+}
+
+var g = f.bind({a: 'azerty'});
+console.log(g()); // azerty
+
+var h = g.bind({a: 'yoo'}); // bind는 한 번만 동작함!
+console.log(h()); // azerty
+
+var o = {a: 37, f: f, g: g, h: h};
+console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty</pre>
+
+<h3 id="화살표_함수">화살표 함수</h3>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98">화살표 함수</a>에서 <code>this</code>는 자신을 감싼 정적 범위<sup>lexical context</sup>입니다. 전역 코드에서는 전역 객체를 가리킵니다.</p>
+
+<pre class="brush: js notranslate">var globalObject = this;
+var foo = (() =&gt; this);
+console.log(foo() === globalObject); // true</pre>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 화살표 함수를 <code>call()</code>, <code>bind()</code>, <code>apply()</code>를 사용해 호출할 때 <code>this</code>의 값을 정해주더라도 무시합니다. 사용할 매개변수를 정해주는 건 문제 없지만, 첫 번째 매개변수(<code>thisArg</code>)는 <code>null</code>을 지정해야 합니다.</p>
+</div>
+
+<pre class="brush: js notranslate">// 객체로서 메서드 호출
+var obj = {func: foo};
+console.log(obj.func() === globalObject); // true
+
+// call을 사용한 this 설정 시도
+console.log(foo.call(obj) === globalObject); // true
+
+// bind를 사용한 this 설정 시도
+foo = foo.bind(obj);
+console.log(foo() === globalObject); // true</pre>
+
+<p>어떤 방법을 사용하든 <code>foo</code>의 <code>this</code>는 생성 시점의 것으로 설정됩니다(위 예시에서는 global 객체). 다른 함수 내에서 생성된 화살표 함수에도 동일하게 적용됩니다. <code>this</code>는 싸여진 렉시컬 컨텍스트의 것으로 유지됩니다.</p>
+
+<pre class="brush: js notranslate">// this를 반환하는 메소드 bar를 갖는 obj를 생성합니다.
+// 반환된 함수는 화살표 함수로 생성되었으므로,
+// this는 감싸진 함수의 this로 영구적으로 묶입니다.
+// bar의 값은 호출에서 설정될 수 있으며, 이는 반환된 함수의 값을 설정하는 것입니다.
+var obj = {
+  bar: function() {
+ var x = (() =&gt; this);
+ return x;
+ }
+};
+
+// obj의 메소드로써 bar를 호출하고, this를 obj로 설정
+// 반환된 함수로의 참조를 fn에 할당
+var fn = obj.bar();
+
+// this 설정 없이 fn을 호출하면,
+// 기본값으로 global 객체 또는 엄격 모드에서는 undefined
+console.log(fn() === obj); // true
+
+// 호출 없이 obj의 메소드를 참조한다면 주의하세요.
+var fn2 = obj.bar;
+// 화살표 함수의 this를 bar 메소드 내부에서 호출하면
+// fn2의 this를 따르므로 window를 반환할것입니다.
+console.log(fn2()() == window); // true</pre>
+
+<p>위 예시에서, <code>obj.bar</code>에 할당된 함수(익명 함수 A라고 지칭)는 화살표 함수로 생성된 다른 함수(익명 함수 B라고 지칭)를 반환합니다. 결과로써 함수 B가 호출될 때 B의 <code>this</code>는 영구적으로 <code>obj.bar</code>(함수 A)의 <code>this</code>로 설정됩니다. 반환됨 함수(함수 B)가 호출될 때, <code>this</code>는 항상 초기에 설정된 값일 것입니다. 위 코드 예시에서, 함수 B의 <code>this</code>는 함수 A의 <code>this</code>인 <code>obj</code>로 설정되므로, 일반적으로 <code>this</code>를 <code>undefined</code>나 global 객체로 설정하는 방식으로 호출할 때도(또는 이전 예시에서처럼 global 실행 컨텍스트에서 다른 방법을 사용할 때에도) obj의 설정은 유지됩니다.</p>
+
+<h3 id="객체의_메서드로서">객체의 메서드로서</h3>
+
+<p>함수를 어떤 객체의 메서드로 호출하면 <code>this</code>의 값은 그 객체를 사용합니다.</p>
+
+<p>다음 예제에서 <code>o.f()</code>를 실행할 때 <code>o</code> 객체가 함수 내부의 <code>this</code>와 연결됩니다.</p>
+
+<pre class="brush: js notranslate">var o = {
+  prop: 37,
+  f: function() {
+  return this.prop;
+  }
+};
+
+console.log(o.f()); // 37
+</pre>
+
+<p>이 행동이 함수가 정의된 방법이나 위치에 전혀 영향을 받지 않는 것에 유의해라. 이전 예제에서, <code>o</code> 의 정의 중 <code>f</code> 함수를 구성원으로 내부에 정의 하였다.  그러나, 간단하게 함수를 먼저 정의하고 나중에 <code>o.f</code>를 추가할 수 있다. 이렇게 하면 동일한 동작 결과 이다 :</p>
+
+<pre class="brush: js notranslate">var o = {prop: 37};
+
+function independent() {
+  return this.prop;
+}
+
+o.f = independent;
+
+console.log(o.f()); // logs 37
+</pre>
+
+<p>이는 함수가 <code>o</code>의 멤버 <code>f</code>로 부터 호출 된 것만이 중요하다는 것을 보여준다.</p>
+
+<p>마찬가지로, 이 <code>this</code> 바인딩은 가장 즉각으로 멤버 대상에 영향을 받는다. 다음 예제에서, 함수를 실행할 때, 객체 <code>o.b</code>의 메소드 <code>g</code> 로서 호출한다. 이것이 실행되는 동안, 함수 내부의 <code>this</code>는 <code>o.b</code>를 나타낸다. 객체는 그 자신이 <code>o</code>의 멤버 중 하나라는 사실은 중요하지 않다. 가장 즉각적인 참조가  중요한 것이다.</p>
+
+<pre class="brush: js notranslate">o.b = {g: independent, prop: 42};
+console.log(o.b.g()); // logs 42
+</pre>
+
+<h4 id="객체의_프로토타입_체인에서의_this">객체의 프로토타입 체인에서의 <code>this</code></h4>
+
+<p>같은 개념으로 객체의 프로토타입 체인 어딘가에 정의한 메서드도 마찬가지입니다. 메서드가 어떤 객체의 프로토타입 체인 위에 존재하면, <code>this</code>의 값은 그 객체가 메서드를 가진 것 마냥 설정됩니다.</p>
+
+<pre class="brush: js notranslate">var o = {
+  f:function() { return this.a + this.b; }
+};
+var p = Object.create(o);
+p.a = 1;
+p.b = 4;
+
+console.log(p.f()); // 5
+</pre>
+
+<p>이 예제에서, <code>f</code> 속성을 가지고 있지 않은 변수 <code>p</code>가 할당된 객체는, 프로토타입으로 부터 상속받는다. 그러나 그것은 결국 <code>o</code>에서 <code>f</code> 이름을 가진 멤버를 찾는 되는 문제가 되지 않는다 ; <code>p.f</code>를 찾아 참조하기 시작하므로, 함수 내부의 <code>this</code>는<code> p</code> 처럼 나타나는 객체 값을 취한다. 즉, <code>f</code>는 <code>p</code>의 메소드로서 호출된 이후로, <code>this</code>는 <code>p</code>를 나타낸다. 이것은 JavaScript의 프로토타입 상속의 흥미로운 기능이다.</p>
+
+<h4 id="접근자와_설정자의_this">접근자와 설정자의 <code>this</code></h4>
+
+<p>다시 한 번 같은 개념으로, 함수를 접근자와 설정자에서 호출하더라도 동일합니다. 접근자나 설정자로 사용하는 함수의 <code>this</code>는 접근하거나 설정하는 속성을 가진 객체로 묶입니다.</p>
+
+<pre class="brush: js notranslate">function sum() {
+ return this.a + this.b + this.c;
+}
+
+var o = {
+ a: 1,
+ b: 2,
+ c: 3,
+ get average() {
+ return (this.a + this.b + this.c) / 3;
+ }
+};
+
+Object.defineProperty(o, 'sum', {
+ get: sum, enumerable: true, configurable: true});
+
+console.log(o.average, o.sum); // 2, 6
+</pre>
+
+<h3 id="생성자로서">생성자로서</h3>
+
+<p>함수를 {{jsxref("Operators/new", "new")}} 키워드와 함께 생성자로 사용하면 <code>this</code>는 새로 생긴 객체에 묶입니다.</p>
+
+<div class="blockIndicator note">
+<p>While the default for a constructor is to return the object referenced by <code>this</code>, it can instead return some other object (if the return value isn't an object, then the <code>this</code> object is returned).</p>
+</div>
+
+<pre class="brush: js notranslate">/*
+ * Constructors work like this:
+ *
+ * function MyConstructor(){
+ * // Actual function body code goes here.
+ * // Create properties on |this| as
+ * // desired by assigning to them. E.g.,
+ * this.fum = "nom";
+ * // et cetera...
+ *
+ * // If the function has a return statement that
+ * // returns an object, that object will be the
+ * // result of the |new| expression. Otherwise,
+ * // the result of the expression is the object
+ * // currently bound to |this|
+ * // (i.e., the common case most usually seen).
+ * }
+ */
+
+function C() {
+ this.a = 37;
+}
+
+var o = new C();
+console.log(o.a); // 37
+
+
+function C2() {
+ this.a = 37;
+ return {a: 38};
+}
+
+o = new C2();
+console.log(o.a); // 38
+</pre>
+
+<h3 id="DOM_이벤트_처리기로서">DOM 이벤트 처리기로서</h3>
+
+<p>함수를 이벤트 처리기로 사용하면 this는 이벤트를 발사한 요소로 설정됩니다. 일부 브라우저는 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} 외의 다른 방법으로 추가한 처리기에 대해선 이 규칙을 따르지 않습니다.</p>
+
+<pre class="brush: js notranslate">// 처리기로 호출하면 관련 객체를 파랗게 만듦
+function bluify(e) {
+ // 언제나 true
+ console.log(this === e.currentTarget);
+ // currentTarget과 target이 같은 객체면 true
+ console.log(this === e.target);
+ this.style.backgroundColor = '#A5D9F3';
+}
+
+// 문서 내 모든 요소의 목록
+var elements = document.getElementsByTagName('*');
+
+// 어떤 요소를 클릭하면 파랗게 변하도록
+// bluify를 클릭 처리기로 등록
+for (var i = 0; i &lt; elements.length; i++) {
+ elements[i].addEventListener('click', bluify, false);
+}</pre>
+
+<h3 id="인라인_이벤트_핸들러에서">인라인 이벤트 핸들러에서</h3>
+
+<p>코드를 인라인 이벤트 처리기로 사용하면 <code>this</code>는 처리기를 배치한 DOM 요소로 설정됩니다.</p>
+
+<pre class="brush: js notranslate">&lt;button onclick="alert(this.tagName.toLowerCase());"&gt;
+ this 표시
+&lt;/button&gt;</pre>
+
+<p>위의 경고창은 <code>button</code>을 보여줍니다. 다만 바깥쪽 코드만 <code>this</code>를 이런 방식으로 설정합니다.</p>
+
+<pre class="brush: js notranslate">&lt;button onclick="alert((function() { return this; })());"&gt;
+ 내부 this 표시
+&lt;/button&gt;</pre>
+
+<p>위의 경우, 내부 함수의 this는 정해지지 않았으므로 전역/<code>window</code> 객체를 반환합니다. 즉 비엄격 모드에서 <code>this</code>를 설정하지 않은 경우의 기본값입니다.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-this-keyword', 'The this keyword')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES2015', '#sec-this-keyword', 'The this keyword')}}</td>
+ <td>{{Spec2('ES2015')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES5.1', '#sec-11.1.1', 'The this keyword')}}</td>
+ <td>{{Spec2('ES5.1')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES3', '#sec-11.1.1', 'The this keyword')}}</td>
+ <td>{{Spec2('ES3')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES1', '#sec-11.1.1', 'The this keyword')}}</td>
+ <td>{{Spec2('ES1')}}</td>
+ <td>Initial definition. Implemented in JavaScript 1.0.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.operators.this")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/typeof/index.html b/files/ko/web/javascript/reference/operators/typeof/index.html
new file mode 100644
index 0000000000..acdd2eedbb
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/typeof/index.html
@@ -0,0 +1,227 @@
+---
+title: typeof
+slug: Web/JavaScript/Reference/Operators/typeof
+tags:
+ - JavaScript
+ - Operator
+ - Reference
+ - Unary
+translation_of: Web/JavaScript/Reference/Operators/typeof
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong><code>typeof</code></strong> 연산자는 피연산자의 평가 전 자료형을 나타내는 문자열을 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-typeof.html")}}</div>
+
+<p class="hidden">이 예제 소스는 GitHub repository에 존재합니다. 만약 이 예제에 기여하고 싶다면 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>를 클론해서 pull request를 보내주세요.</p>
+
+<h2 id="구문">구문</h2>
+
+<p><code>typeof</code> 연산자는 피연산자 앞에 위치합니다.</p>
+
+<pre>typeof <var>operand</var>
+typeof(<var>operand</var>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>operand</code></dt>
+ <dd>자료형을 가져올 객체 또는 {{glossary("Primitive", "원시값")}}을 나타내는 표현식.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>typeof</code>가 반환할 수 있는 값을 아래 표에서 볼 수 있습니다. 자료형과 원시값에 대한 자세한 정보는 <a href="/ko/docs/Web/JavaScript/Data_structures">JavaScript 자료형과 자료구조</a> 페이지를 참고하세요.</p>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Type</th>
+ <th scope="col">Result</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{glossary("Undefined")}}</td>
+ <td><code>"undefined"</code></td>
+ </tr>
+ <tr>
+ <td>{{glossary("Null")}}</td>
+ <td><code>"object"</code> ({{anch("null", "아래")}} 참고)</td>
+ </tr>
+ <tr>
+ <td>{{glossary("Boolean")}}</td>
+ <td><code>"boolean"</code></td>
+ </tr>
+ <tr>
+ <td>{{glossary("Number")}}</td>
+ <td><code>"number"</code></td>
+ </tr>
+ <tr>
+ <td>{{glossary("BigInt")}}</td>
+ <td><code>"bigint"</code></td>
+ </tr>
+ <tr>
+ <td>{{glossary("String")}}</td>
+ <td><code>"string"</code></td>
+ </tr>
+ <tr>
+ <td>{{glossary("Symbol")}} (ECMAScript 2015에서 추가)</td>
+ <td><code>"symbol"</code></td>
+ </tr>
+ <tr>
+ <td>호스트 객체 (JS 환경에서 제공)</td>
+ <td><em>구현체마다 다름</em></td>
+ </tr>
+ <tr>
+ <td>{{glossary("Function")}} 객체 (ECMA-262 표현으로는 [[Call]]을 구현하는 객체)</td>
+ <td><code>"function"</code></td>
+ </tr>
+ <tr>
+ <td>다른 모든 객체</td>
+ <td><code>"object"</code></td>
+ </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> ECMAScript 2019 and older permitted implementations to have <code>typeof</code> return any implementation-defined string value for non-callable non-standard exotic objects.</p>
+
+<p>The only known browser to have actually taken advantage of this is old Internet Explorer (see <a href="#IE-specific_notes">below</a>).</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush:js">// Numbers
+typeof 37 === 'number';
+typeof 3.14 === 'number';
+typeof Math.LN2 === 'number';
+typeof Infinity === 'number';
+typeof NaN === 'number'; // Despite being "Not-A-Number"
+typeof Number(1) === 'number'; // but never use this form!
+
+typeof 42n === 'bigint';
+
+
+// Strings
+typeof "" === 'string';
+typeof "bla" === 'string';
+typeof (typeof 1) === 'string'; // typeof always returns a string
+typeof String("abc") === 'string'; // but never use this form!
+
+
+// Booleans
+typeof true === 'boolean';
+typeof false === 'boolean';
+typeof Boolean(true) === 'boolean'; // but never use this form!
+
+
+// Symbols
+typeof Symbol() === 'symbol'
+typeof Symbol('foo') === 'symbol'
+typeof Symbol.iterator === 'symbol'
+
+
+// Undefined
+typeof undefined === 'undefined';
+typeof declaredButUndefinedVariable === 'undefined';
+typeof undeclaredVariable === 'undefined';
+
+
+// Objects
+typeof {a:1} === 'object';
+
+// use <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray">Array.isArray</a> or Object.prototype.toString.call
+// to differentiate regular objects from arrays
+typeof [1, 2, 4] === 'object';
+
+typeof new Date() === 'object';
+
+
+// The following is confusing. Don't use!
+typeof new Boolean(true) === 'object';
+typeof new Number(1) === 'object';
+typeof new String("abc") === 'object';
+
+
+// Functions
+typeof function(){} === 'function';
+typeof class C {} === 'function';
+typeof Math.sin === 'function';
+</pre>
+
+<h2 id="추가_정보">추가 정보</h2>
+
+<h3 id="null"><code>null</code></h3>
+
+<pre class="brush:js">// This stands since the beginning of JavaScript
+typeof null === 'object';
+</pre>
+
+<p>자바스크립트를 처음 구현할 때, 자바스크립트 값은 타입 태그와 값으로 표시되었습니다. 객체의 타입 태그는 0이었습니다. <code>null</code>은 Null pointer(대부분의 플랫폼에서 <code>0x00</code>)로 표시되었습니다. 그 결과 null은 타입 태그로 0을 가지며, 따라서 <code>typeof</code>는 object를 반환합니다. (<a href="https://2ality.com/2013/10/typeof-null.html">참고 문서</a>)</p>
+
+<p>ECMAScript에 수정이 제안(opt-in을 통해)되었으나 <a href="https://web.archive.org/web/20160331031419/http://wiki.ecmascript.org:80/doku.php?id=harmony:typeof_null">거절되었습니다</a>. 제안된 것은 다음과 같습니다. <code>typeof null === 'null'.</code></p>
+
+<h3 id="Regular_expressions">Regular expressions</h3>
+
+<p>Callable regular expressions were a non-standard addition in some browsers.</p>
+
+<pre class="brush:js">typeof /s/ === 'function'; // Chrome 1-12 Non-conform to ECMAScript 5.1
+typeof /s/ === 'object'; // Firefox 5+ Conform to ECMAScript 5.1
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-typeof-operator', 'The typeof Operator')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES6', '#sec-typeof-operator', 'The typeof Operator')}}</td>
+ <td>{{Spec2('ES6')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES5.1', '#sec-11.4.3', 'The typeof Operator')}}</td>
+ <td>{{Spec2('ES5.1')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES3', '#sec-11.4.3', 'The typeof Operator')}}</td>
+ <td>{{Spec2('ES3')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES1', '#sec-11.4.3', 'The typeof Operator')}}</td>
+ <td>{{Spec2('ES1')}}</td>
+ <td>Initial definition. Implemented in JavaScript 1.1.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.operators.typeof")}}</p>
+
+<h2 id="IE_참고사항">IE 참고사항</h2>
+
+<p>On IE 6, 7, and 8 a lot of host objects are objects and not functions. For example:</p>
+
+<pre class="brush: js">typeof alert === 'object'</pre>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Operators/instanceof", "instanceof")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/void/index.html b/files/ko/web/javascript/reference/operators/void/index.html
new file mode 100644
index 0000000000..79fe2c1837
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/void/index.html
@@ -0,0 +1,122 @@
+---
+title: void
+slug: Web/JavaScript/Reference/Operators/void
+tags:
+ - JavaScript
+ - Operator
+ - Reference
+ - Unary
+translation_of: Web/JavaScript/Reference/Operators/void
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong><code>void</code> 연산자</strong>는 주어진 표현식을 평가하고 {{jsxref("undefined")}}를 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-voidoperator.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">void <em>expression</em></pre>
+
+<h2 id="설명">설명</h2>
+
+<p><code>void</code>는 값을 생성하는 표현식을 평가해서 {{jsxref("undefined")}}를 반환합니다.</p>
+
+<p>오직 <code>undefined</code> 원시값을 얻기 위해 <code>void 0</code> 또는 <code>void(0)</code>처럼 사용하는 경우도 볼 수 있습니다. 이런 경우 전역 {{jsxref("undefined")}}를 대신 사용해도 됩니다.</p>
+
+<p><code>void</code> 연산자의 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">우선순위</a>도 유념해야 합니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/Grouping">그룹 연산자</a>(괄호)를 사용하면 <code>void</code> 연산자를 사용한 식의 평가 과정을 더 명확하게 보일 수 있습니다.</p>
+
+<pre class="brush: js">void 2 == '2'; // undefined == '2', false
+void (2 == '2'); // void true, undefined
+</pre>
+
+<h2 id="IIFE">IIFE</h2>
+
+<p>즉시 실행 함수 표현식({{Glossary("IIFE")}})을 사용할 때 <code>void</code>를 사용하면 <code>function</code> 키워드를 선언문이 아니라 표현식처럼 간주하도록 강제할 수 있습니다.</p>
+
+<pre class="brush: js">void function iife() {
+ var bar = function () {};
+ var baz = function () {};
+ var foo = function () {
+ bar();
+ baz();
+ };
+ var biz = function () {};
+
+ foo();
+ biz();
+}();
+</pre>
+
+<h2 id="JavaScript_URI">JavaScript URI</h2>
+
+<p><code>javascript:</code>로 시작하는 URI를 지원하는 브라우저에서는, URI에 있는 코드의 평가 결과가 {{jsxref("undefined")}}가 아니라면 페이지의 콘텐츠를 반환 값으로 대체합니다. <code>void</code> 연산자를 사용하면 <code>undefined</code>를 반환할 수 있습니다. 다음 예제를 확인하세요.</p>
+
+<pre class="brush: html">&lt;a href="javascript:void(0);"&gt;
+ 클릭해도 아무 일도 없음
+&lt;/a&gt;
+&lt;a href="javascript:void(document.body.style.backgroundColor='green');"&gt;
+ 클릭하면 배경색이 녹색으로
+&lt;/a&gt;
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: <code>javascript:</code> 의사 프로토콜보다 이벤트 처리기와 같은 대체재 사용을 권장합니다.</p>
+</div>
+
+<h2 id="새지_않는_화살표_함수">새지 않는 화살표 함수</h2>
+
+<p>Arrow functions introduce a short-hand braceless syntax that returns an expression. This can cause unintended side effects by returning the result of a function call that previously returned nothing. To be safe, when the return value of a function is not intended to be used, it can be passed to the void operator to ensure that (for example) changing APIs do not cause arrow functions' behaviors to change.</p>
+
+<pre class="brush: js">button.onclick = () =&gt; void doSomething();</pre>
+
+<p>This ensures the return value of <code>doSomething</code> changing from <code>undefined</code> to <code>true</code> will not change the behavior of this code.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-void-operator', 'The void Operator')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES6', '#sec-void-operator', 'The void Operator')}}</td>
+ <td>{{Spec2('ES6')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES5.1', '#sec-11.4.2', 'The void Operator')}}</td>
+ <td>{{Spec2('ES5.1')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES3', '#sec-11.4.2', 'The void Operator')}}</td>
+ <td>{{Spec2('ES3')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES1', '#sec-11.4.2', 'The void Operator')}}</td>
+ <td>{{Spec2('ES1')}}</td>
+ <td>Initial definition. Implemented in JavaScript 1.1</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.operators.void")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("undefined")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/yield/index.html b/files/ko/web/javascript/reference/operators/yield/index.html
new file mode 100644
index 0000000000..ef884816d2
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/yield/index.html
@@ -0,0 +1,182 @@
+---
+title: yield
+slug: Web/JavaScript/Reference/Operators/yield
+tags:
+ - ECMAScript 2015
+ - Generators
+ - Iterator
+ - JavaScript
+ - Operator
+ - 반복자
+ - 생성기
+translation_of: Web/JavaScript/Reference/Operators/yield
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><code>yield </code>키워드는 제너레이터 함수 ({{jsxref("Statements/function*", "function*")}} 또는  <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">레거시 generator </a>함수)를 중지하거나 재개하는데 사용됩니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">[<em>rv</em>] = <strong>yield</strong> [<em>expression</em>];</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>제너레이터 함수에서 <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">제너레이터 프로토콜</a>을 통해 반환할 값을 정의합니다.  값이 생략되면, <code>undefined를 반환합니다.</code></dd>
+ <dt><code>rv</code></dt>
+ <dd>
+ <p>제너레이터 실행을 재개 하기 위해서, optional value을 제너레이터의 <code>next()</code> 메서드로 전달하여 반환합니다.</p>
+ </dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>yield 키워드</code>는 제너레이터 함수의 실행을 중지시키거나 그리고  <code>yield</code> 키워드 뒤에오는 표현식[expression]의 값은 제너레이터의 caller로 반환된다. 제너레이터 버전의 <code>return</code> 키워드로 생각 할 수 있다.</p>
+
+<p><code>yield</code> 키워드는 실질적으로  value 와 done 이라는 두 개의 속성을 가진 <code>IteratorResult</code> 객체를 반환한다. <code>value</code> 속성은 <code>yield</code> 표현(expression)의 실행 결과를 나타내고, <code>done</code> 속성은 제너레이터 함수가 완전히 종료되었는지 여부를 불린(Boolean) 형태로 보여줍니다. </p>
+
+<p>yield 표현식에서 중지되면 ,제너레이터의 next()가 메서드가 호출될 때까지 제너레이터의 코드 실행이 중지된다. 제너레이터의 next()메서드를 호출할 때마다 제너레이터는 실행을 재개하며 그리고 다음의 같은 경우에 진행될 때 실행된다:</p>
+
+<ul>
+ <li> <code>yield 는</code> 제너레이터가  한번 멈추게 하고 제너레이터의 새로운 값을 반환한다. 다음번의 next()가 호출된 후, yield 이후에 선언된 코드가 바로 실행된다.</li>
+ <li>{{jsxref("Statements/throw", "throw")}}는 제네레이터에서 예외를 설정할 때 사용된다. 예외가 발생할 경우 제너레이터의 전체적으로 실행이 중지되고, 그리고  다시 켜는 것이 일반적으로 실행됩니다.</li>
+ <li>
+ <p>제너레이터 함수가 종료가 되었다; 이 경우, 제너레이터 실행이 종료되고  <code>IteratorResult는 </code>caller 로  값이 {{jsxref("undefined")}}이고 done의 값이 true 로 리턴한다.</p>
+ </li>
+ <li>
+ <p>{{jsxref("Statements/return", "return")}} 문에 도달했다. 이 경우에는, 이 값이 종료되고 <code>IteratorResult는 </code>caller 로<code> return</code> 문에 의해 반환되는 값과 done의 값이 true  로 리턴한다.</p>
+ </li>
+</ul>
+
+<p>만약에 optional value가 제너레이터의 next() 메서드로 전달되면, optional value는  제너레이터의 현재 yield의 연산으로 반환되는 값이 된다.</p>
+
+<p>generator 코드 경로, yield연산자, {{jsxref("Generator.prototype.next()")}}에 이르기까지 새로운 시작 값을 지정할 수 있는 능력과 제네레이터는 커다란 힘과 제어를 제공한다.</p>
+
+<h2 id="예시">예시</h2>
+
+<p>다음 코드는 제너레이터 함수의 선언의 예시이다.</p>
+
+<pre class="brush: js">function* foo(){
+ var index = 0;
+ while (index &lt;= 2) // when index reaches 3,
+ // yield's done will be true
+ // and its value will be undefined;
+ yield index++;
+}</pre>
+
+<p>제너레이터 함수가 정의되면 , 아래 코드와 보여지는 것처럼 iterator로 만들어 사용할 수 있다.</p>
+
+<pre class="brush: js">var iterator = foo();
+console.log(iterator.next()); // { value: 0, done: false }
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: undefined, done: true }</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('ES6', '#', 'Yield')}}</td>
+ <td>{{Spec2('ES6')}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#', 'Yield')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Chrome</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari (WebKit)</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>39</td>
+ <td>{{CompatGeckoDesktop("26.0")}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ <tr>
+ <td><code>IteratorResult</code> object instead of throwing</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatGeckoDesktop("29.0")}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Android</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>IE Mobile</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoMobile("26.0")}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{ CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ <tr>
+ <td><code>IteratorResult</code> object instead of throwing</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatGeckoMobile("29.0")}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Firefox-specific_notes">Firefox-specific notes</h2>
+
+<ul>
+ <li>Starting with Gecko 29 {{geckoRelease(29)}}, the completed generator function no longer throws a {{jsxref("TypeError")}} "generator has already finished". Instead, it returns an <code>IteratorResult</code> object like <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</li>
+ <li>Starting with Gecko 33 {{geckoRelease(33)}}, the parsing of the <code>yield</code> expression has been updated to conform with the latest ES6 specification ({{bug(981599)}}):
+ <ul>
+ <li>The expression after the <code>yield</code> keyword is optional and omitting it no longer throws a {{jsxref("SyntaxError")}}: <code>function* foo() { yield; }</code></li>
+ </ul>
+ </li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li>
+ <li>{{jsxref("Statements/function*", "function*")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("Operators/yield*", "yield*")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/yield_star_/index.html b/files/ko/web/javascript/reference/operators/yield_star_/index.html
new file mode 100644
index 0000000000..3bbb10146d
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/yield_star_/index.html
@@ -0,0 +1,164 @@
+---
+title: yield*
+slug: Web/JavaScript/Reference/Operators/yield*
+tags:
+ - ECMAScript 2015
+ - Generators
+ - Iterable
+ - Iterator
+ - JavaScript
+ - Operator
+ - Reference
+translation_of: Web/JavaScript/Reference/Operators/yield*
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong><code>yield*</code> 표현식</strong>은 다른 {{jsxref("Statements/function*", "generator")}} 또는 이터러블(iterable) 객체에 yield를 위임할 때 사용됩니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-yieldasterisk.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">yield* [[<em>expression</em>]];</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>이터러블(iterable) 객체를 반환하는 표현식.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>yield* 표현은 피연산자를 반복하고 반환되는 값을 yield합니다.</p>
+
+<p>yield* 표현 자체의 값은 반복자(iterator)가 종료될 때 반환되는 값입니다. (i.e., done이 true일 때)</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="다른_생성기(generator)에_위임하기">다른 생성기(generator)에 위임하기</h3>
+
+<p>다음 코드는, next() 호출을 통해 g1()으로부터 yield 되는 값을 g2()에서 yield 되는 것처럼 만듭니다.</p>
+
+<pre class="brush: js">function* g1() {
+ yield 2;
+ yield 3;
+ yield 4;
+}
+
+function* g2() {
+ yield 1;
+ yield* g1();
+ yield 5;
+}
+
+var iterator = g2();
+
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: 3, done: false }
+console.log(iterator.next()); // { value: 4, done: false }
+console.log(iterator.next()); // { value: 5, done: false }
+console.log(iterator.next()); // { value: undefined, done: true }
+</pre>
+
+<h3 id="다른_이터러블(iterable)_객체">다른 이터러블(iterable) 객체</h3>
+
+<p>생성기 객체 말고도, yield*는 다른 반복 가능한 객체도 yield 할 수 있습니다. e.g. 배열, 문자열 또는 arguments 객체</p>
+
+<pre class="brush: js">function* g3() {
+ yield* [1, 2];
+ yield* "34";
+ yield* Array.from(arguments);
+}
+
+var iterator = g3(5, 6);
+
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: "3", done: false }
+console.log(iterator.next()); // { value: "4", done: false }
+console.log(iterator.next()); // { value: 5, done: false }
+console.log(iterator.next()); // { value: 6, done: false }
+console.log(iterator.next()); // { value: undefined, done: true }
+</pre>
+
+<h3 id="yield*_표현_자체의_값"><code>yield*</code> 표현 자체의 값</h3>
+
+<p><code>yield*</code> 는 구문이 아닌 표현입니다. 따라서 값으로 평가됩니다.</p>
+
+<pre class="brush: js">function* g4() {
+ yield* [1, 2, 3];
+ return "foo";
+}
+
+var result;
+
+function* g5() {
+ result = yield* g4();
+}
+
+var iterator = g5();
+
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: 3, done: false }
+console.log(iterator.next()); // { value: undefined, done: true },
+ // g4() 는 여기서 { value: "foo", done: true }를 반환합니다
+
+console.log(result); // "foo"
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('ES2015', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}}</td>
+ <td>{{Spec2('ES2015')}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.operators.yield_star")}}</p>
+
+<h2 id="Firefox에_한정된_내용">Firefox에 한정된 내용</h2>
+
+<ul>
+ <li>Gecko 33 {{geckoRelease(33)}} 부터, yield 표현 구문 분석이 최신 ES6 표준에 맞추도록 업데이트 되었습니다 ({{bug(981599)}}):
+ <ul>
+ <li>개행 제한이 이제 구현되었습니다. 개행이 없는 "yield" 와 "*"만 인정됩니다. 다음과 같은 코드는 {{jsxref("SyntaxError")}}를 발생시킵니다:
+ <pre class="brush: js">function* foo() {
+ yield
+ *[];
+}</pre>
+ </li>
+ </ul>
+ </li>
+</ul>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li>
+ <li>{{jsxref("Statements/function*", "function*")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("Operators/yield", "yield")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/논리_연산자(logical_operators)/index.html b/files/ko/web/javascript/reference/operators/논리_연산자(logical_operators)/index.html
new file mode 100644
index 0000000000..2e1140eed5
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/논리_연산자(logical_operators)/index.html
@@ -0,0 +1,249 @@
+---
+title: 논리 연산자
+slug: Web/JavaScript/Reference/Operators/논리_연산자(Logical_Operators)
+tags:
+ - JavaScript
+ - Logic
+ - Not
+ - Operator
+ - Reference
+ - and
+ - or
+ - 논리
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>논리 연산자는 보통 {{jsxref("Boolean")}}(논리적) 값과 함께 쓰이며, 불리언 값을 반환합니다. 그런데, <code>&amp;&amp;</code>과 <code>||</code> 연산자는 사실 피연산자 중 하나의 값을 반환합니다. 그러므로 불리언 외의 다른 값과 함께 사용하면 불리언 값이 아닌 것을 반환할 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-logicaloperator.html")}}</div>
+
+
+
+<h2 id="설명">설명</h2>
+
+<p>다음 표는 논리 연산자의 종류입니다. (<code><em>expr</em></code>은 불리언을 포함해서 아무 자료형이나 가능합니다)</p>
+
+<table class="fullwidth-table">
+ <tbody>
+ <tr>
+ <th>연산자</th>
+ <th>구문</th>
+ <th>설명</th>
+ </tr>
+ <tr>
+ <td>논리 AND (<code>&amp;&amp;</code>)</td>
+ <td><code><em>expr1</em> &amp;&amp; <em>expr2</em></code></td>
+ <td><code>expr1</code>을 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">true</span></font>로 변환할 수 있는 경우 <code>expr2</code>을 반환하고, 그렇지 않으면 <code>expr1</code>을 반환합니다.</td>
+ </tr>
+ <tr>
+ <td>논리 OR (<code>||</code>)</td>
+ <td><code><em>expr1</em> || <em>expr2</em></code></td>
+ <td>
+ <p><code>expr1</code>을 <code>true</code>로 변환할 수 있으면 <code>expr1</code>을 반환하고, 그렇지 않으면 <code>expr2</code>를 반환합니다.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>논리 NOT (<code>!</code>)</td>
+ <td><code>!<em>expr</em></code></td>
+ <td>단일 피연산자를 <code>true</code>로 변환할 수 있으면 <code>false</code>를 반환합니다. 그렇지 않으면 <code>true</code>를 반환합니다.</td>
+ </tr>
+ </tbody>
+</table>
+
+<p>값을 <code>true</code>로 변환하면 값이 {{Glossary("truthy", "참")}}인 것입니다.<br>
+ 값을 <code>false</code>로 변환할 수 있으면 값이 {{Glossary("falsy", "거짓")}}인 것입니다.</p>
+
+<p>거짓으로 변환할 수 있는 표현의 예는 다음과 같습니다.</p>
+
+<ul>
+ <li><code>null</code></li>
+ <li><code>NaN</code></li>
+ <li><code>0</code></li>
+ <li>빈 문자열 (<code>"",</code> <code>''</code>, <code>``</code>)</li>
+ <li><code>undefined</code></li>
+</ul>
+
+<p><code>&amp;&amp;</code> 연산자와 <code>||</code> 연산자를 불리언 값이 아닌 피연산자와 함께 사용될 수 있지만, 반환 값을 항상 <a href="/ko/docs/Web/JavaScript/Data_structures#Boolean_%ED%83%80%EC%9E%85">불리언 원시값</a>으로 변환할 수 있으므로 불리언 연산자로 생각할 수 있습니다. 반환 값을 직접 불리언으로 바꾸려면 {{jsxref("Boolean")}} 함수나 이중 부정 연산자를 사용하세요.</p>
+
+<h3 id="단락_평가">단락 평가</h3>
+
+<p>논리 표현식을 좌측부터 평가하므로, 아래 규칙에 따라 단락(short-circuit) 평가를 수행합니다.</p>
+
+<ul>
+ <li><code>(거짓 표현식) &amp;&amp; expr</code>은 거짓 표현식으로 단락 평가됩니다.</li>
+ <li><code>(참 표현식) || expr</code>은 참 표현식으로 단락 평가됩니다.</li>
+</ul>
+
+<p>"단락"이란, 위 규칙에서 <code>expr</code>을 평가하지 않는다는 뜻입니다. 따라서 평가 중 발생해야 할 부작용(예: <code>expr</code>이 함수 호출이면 절대 호출하지 않음)도 나타나지 않습니다. 단락 평가가 발생하는 원인은 첫 번째 피연산자를 평가한 순간 이미 연산자의 결과가 정해지기 때문입니다. 다음 예제를 살펴보세요.</p>
+
+<pre>function A(){ console.log('A 호출'); return false; }
+function B(){ console.log('B 호출'); return true; }
+
+console.log( A() &amp;&amp; B() );
+// 함수 호출로 인해 콘솔에 "A 호출" 기록
+// 그 후 연산자의 결과값인 "false" 기록
+
+console.log( B() || A() );
+// 함수 호출로 인해 콘솔에 "B 호출" 기록
+// 그 후 연산자의 결과인 "true" 기록
+</pre>
+
+<h3 id="연산자_우선순위">연산자 우선순위</h3>
+
+<p>다음 두 식은 똑같아 보이지만, <code>&amp;&amp;</code> 연산자는 <code>||</code> 이전에 실행되므로 서로 다릅니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">연산자 우선순위</a>를 참고하세요.</p>
+
+<pre class="brush: js">true || false &amp;&amp; false // returns true, because &amp;&amp; is executed first
+(true || false) &amp;&amp; false // returns false, because operator precedence cannot apply</pre>
+
+<h3 id="논리_AND_()"><a name="Logical_AND">논리 AND (<code>&amp;&amp;</code>)</a></h3>
+
+<p>다음은 <code>&amp;&amp;</code>(논리 AND) 연산자의 예제입니다.</p>
+
+<pre class="brush: js">a1 = true &amp;&amp; true // t &amp;&amp; t returns true
+a2 = true &amp;&amp; false // t &amp;&amp; f returns false
+a3 = false &amp;&amp; true // f &amp;&amp; t returns false
+a4 = false &amp;&amp; (3 == 4) // f &amp;&amp; f returns false
+a5 = 'Cat' &amp;&amp; 'Dog' // t &amp;&amp; t returns "Dog"
+a6 = false &amp;&amp; 'Cat' // f &amp;&amp; t returns false
+a7 = 'Cat' &amp;&amp; false // t &amp;&amp; f returns false
+a8 = '' &amp;&amp; false // f &amp;&amp; f returns ""
+a9 = false &amp;&amp; '' // f &amp;&amp; f returns false</pre>
+
+<h3 id="논리_OR_()"><a name="Logical_OR">논리 OR (<code>||</code>)</a></h3>
+
+<p>다음은 <code>||</code>(논리 OR) 연산자의 예제입니다.</p>
+
+<pre class="brush: js">o1 = true || true // t || t returns true
+o2 = false || true // f || t returns true
+o3 = true || false // t || f returns true
+o4 = false || (3 == 4) // f || f returns false
+o5 = 'Cat' || 'Dog' // t || t returns "Cat"
+o6 = false || 'Cat' // f || t returns "Cat"
+o7 = 'Cat' || false // t || f returns "Cat"
+o8 = '' || false // f || f returns false
+o9 = false || '' // f || f returns ""
+o10 = false || varObject // f || object returns varObject
+</pre>
+
+<h3 id="논리_NOT_(!)"><a name="Logical_NOT">논리 NOT (<code>!</code>)</a></h3>
+
+<p>다음은 <code>!</code>(논리 NOT) 연산자의 예제입니다.</p>
+
+<pre class="brush: js">n1 = !true // !t returns false
+n2 = !false // !f returns true
+n3 = !'' // !f returns true
+n4 = !'Cat' // !t returns false
+</pre>
+
+<h4 id="이중_NOT_(!!)">이중 NOT (<code>!!</code>)</h4>
+
+<p>NOT 연산자 다수를 연속해서 사용하면 아무 값이나 불리언 원시값으로 강제 변환할 수 있습니다. 변환 결과는 피연산자 값의 "참스러움"이나 "거짓스러움"에 따릅니다. ({{Glossary("truthy", "참")}}과 {{Glossary("falsy", "거짓")}}을 참고하세요)</p>
+
+<p>동일한 변환을 {{jsxref("Boolean")}} 함수로도 수행할 수 있습니다.</p>
+
+<pre class="brush: js">n1 = !!true // !!truthy returns true
+n2 = !!{} // !!truthy returns true: any object is truthy...
+n3 = !!(new Boolean(false)) // ...even Boolean objects with a false .valueOf()!
+n4 = !!false // !!falsy returns false
+n5 = !!"" // !!falsy returns false
+n6 = !!Boolean(false) // !!falsy returns false
+</pre>
+
+<h3 id="불리언_변환_규칙">불리언 변환 규칙</h3>
+
+<h4 id="AND에서_OR로_변환">AND에서 OR로 변환</h4>
+
+<p>불리언 계산에서, 다음 두 코드는 항상 같습니다.</p>
+
+<pre class="brush: js">bCondition1 &amp;&amp; bCondition2
+</pre>
+
+<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre>
+
+<h4 id="OR에서_AND로_변환">OR에서 AND로 변환</h4>
+
+<p>불리언 계산에서, 다음 두 코드는 항상 같습니다.</p>
+
+<pre class="brush: js">bCondition1 || bCondition2
+</pre>
+
+<pre class="brush: js">!(!bCondition1 &amp;&amp; !bCondition2)</pre>
+
+<h4 id="NOT_간_변환">NOT 간 변환</h4>
+
+<p>불리언 계산에서, 다음 두 코드는 항상 같습니다.</p>
+
+<pre class="brush: js">!!bCondition
+</pre>
+
+<pre class="brush: js">bCondition</pre>
+
+<h3 id="중첩_괄호_제거">중첩 괄호 제거</h3>
+
+<p>논리 표현식은 항상 왼쪽에서 오른쪽으로 평가되므로, 몇 가지 규칙을 따르면 복잡한 표현식에서 괄호를 제거할 수 있습니다.</p>
+
+<h4 id="중첩_AND_제거">중첩 AND 제거</h4>
+
+<p>불리언의 합성 계산에서, 다음 두 코드는 항상 같습니다.</p>
+
+<pre class="brush: js">bCondition1 || (bCondition2 &amp;&amp; bCondition3)
+</pre>
+
+<pre class="brush: js">bCondition1 || bCondition2 &amp;&amp; bCondition3</pre>
+
+<h4 id="중첩_OR_제거">중첩 OR 제거</h4>
+
+<p>불리언의 합성 계산에서, 다음 두 코드는 항상 같습니다.</p>
+
+<pre class="brush: js">bCondition1 &amp;&amp; (bCondition2 || bCondition3)
+</pre>
+
+<pre class="brush: js">!(!bCondition1 || !bCondition2 &amp;&amp; !bCondition3)</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES1')}}</td>
+ <td>{{Spec2('ES1')}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES5.1', '#sec-11.11')}}</td>
+ <td>{{Spec2('ES5.1')}}</td>
+ <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Binary Logical Operators</a></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td>
+ <td>{{Spec2('ES6')}}</td>
+ <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">Binary Logical Operators</a></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td>Defined in several sections of the specification: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Binary Logical Operators</a></td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.operators.logical")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">비트 연산자</a></li>
+ <li>{{jsxref("Boolean")}}</li>
+ <li>{{Glossary("truthy", "참")}}</li>
+ <li>{{Glossary("falsy", "거짓")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/배열/index.html b/files/ko/web/javascript/reference/operators/배열/index.html
new file mode 100644
index 0000000000..4bdd29b61c
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/배열/index.html
@@ -0,0 +1,200 @@
+---
+title: 배열 내포
+slug: Web/JavaScript/Reference/Operators/배열
+tags:
+ - JavaScript
+ - Non-standard
+ - Obsolete
+ - Operator
+ - Reference
+translation_of: Archive/Web/JavaScript/Array_comprehensions
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<div class="warning"><strong>표준이 아닙니다. 사용하지 않는 것을 권장합니다!</strong><br>
+Array comprehensions 문법은 비표준이며 Firefox 58부터는 제거됩니다. 향후 사용할 수 없게 되기 때문에 사용하지 않는것을 고려해보세요.<br>
+{{jsxref("Array.prototype.map")}}, {{jsxref("Array.prototype.filter")}}, {{jsxref("Functions/Arrow_functions", "arrow functions", "", 1)}}, and {{jsxref("Operators/Spread_operator", "spread syntax", "", 1)}}.</div>
+
+<div>{{Obsolete_Header(58)}}</div>
+
+<p><strong>array comprehension </strong>문법은 기존의 배열을 기반으로 새로운 배열을 신속하게 어셈블 할 수 있는 JavaScript 표현식입니다. 그러나 표준 및 Firefox 구현에서 제거되었습니다. 사용하지 마세요!</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">[for (x of iterable) x]
+[for (x of iterable) if (condition) x]
+[for (x of iterable) for (y of iterable) x + y]
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>배열의 이해로 넘어가서, 다음 두가지의 요소들이 사용가능하다.</p>
+
+<ul>
+ <li>{{jsxref("Statements/for...of", "for...of")}} and</li>
+ <li>{{jsxref("Statements/if...else", "if")}}</li>
+</ul>
+
+<p>for-of 반복문은 항상 첫번째 요소이다. 여러개의 for-of 반복문이나 if 제어문을 사용할 수 있다.</p>
+
+<p>배열 선언은 ECMAScript 2016에서 이전부터 표준으로 정립되어왔으며, 이는 다른 형태의 데이터(contents)를 이용해서 새로운 배열을 구성할 수 있게 해 준다.</p>
+
+<p>아래의 선언은 숫자로 이루어진 배열 내 각각의 숫자들을 이용해서 double형의 새로운 배열을 만들어준다.</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3, 4];
+var doubled = [for (i of numbers) i * 2];
+console.log(doubled); // logs 2,4,6,8
+</pre>
+
+<p>이것은 {{jsxref("Array.prototype.map", "map()")}} 연산자와 같은 기능을 한다.</p>
+
+<pre class="brush: js">var doubled = numbers.map(i =&gt; i * 2);
+</pre>
+
+<p>배열들은 또한 다양한 표현을 통해 몇몇개의 배열 원소들은 선택할 수 도 있다. 아래의 예제는 바로 홀수만 선택하는 예제이다.</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3, 21, 22, 30];
+var evens = [for (i of numbers) if (i % 2 === 0) i];
+console.log(evens); // logs 2,22,30
+</pre>
+
+<p>{{jsxref("Array.prototype.filter", "filter()")}} 또한 같은 목적으로 얼마든지 사용가능하다.</p>
+
+<pre class="brush: js">var evens = numbers.filter(i =&gt; i % 2 === 0);
+</pre>
+
+<p>{{jsxref("Array.prototype.map", "map()")}} 그리고 {{jsxref("Array.prototype.filter", "filter()")}} 스타일과 같은 연산자들은 단한 배열 선언과 결합할 수 있다. 아래는 짝수만 필터링하고, 그 원소들을 2배씩하는 배열들을 만드는 예제이다.</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3, 21, 22, 30];
+var doubledEvens = [for (i of numbers) if (i % 2 === 0) i * 2];
+console.log(doubledEvens); // logs 4,44,60
+</pre>
+
+<p>배열에서의 [ ] (꺽쇠괄호) 는 범위의 목적으로 암시적인 괄호를 의미한다. {{jsxref("Statements/let","let")}}를 사용하면서 정의된다면, 예제의 i와 같은 변수들이 사용된다. 이는 배열 밖에서 사용할 수 없음을 나타낸다.</p>
+
+<p>배열의 원소에 넣어지는 것은 굳이 배열일 필요는 없다 <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators" title="en-US/docs/JavaScript/Guide/Iterators and Generators">iterators and generators</a> 물론 가능하다.</p>
+
+<p>심지어 문자열도 배열의 원소로 넣을 수 있다. 필터와 지도 액션과 같은 데에 이용할 수 있다.</p>
+
+<pre class="brush: js">var str = 'abcdef';
+var consonantsOnlyStr = [for (c of str) if (!(/[aeiouAEIOU]/).test(c)) c].join(''); // 'bcdf'
+var interpolatedZeros = [for (c of str) c + '0' ].join(''); // 'a0b0c0d0e0f0'
+</pre>
+
+<p>또한 입력 폼이 유지되지 않으므로, 문자열을 뒤집기 위해 {{jsxref("Array.prototype.join", "join()")}} 를 사용해야 한다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="단순_배열">단순 배열</h3>
+
+<pre class="brush:js">[for (i of [1, 2, 3]) i * i ];
+// [1, 4, 9]
+
+var abc = ['A', 'B', 'C'];
+[for (letters of abc) letters.toLowerCase()];
+// ["a", "b", "c"]</pre>
+
+<h3 id="if문에서의_배열">if문에서의 배열</h3>
+
+<pre class="brush: js">var years = [1954, 1974, 1990, 2006, 2010, 2014];
+[for (year of years) if (year &gt; 2000) year];
+// [ 2006, 2010, 2014 ]
+[for (year of years) if (year &gt; 2000) if (year &lt; 2010) year];
+// [ 2006], the same as below:
+[for (year of years) if (year &gt; 2000 &amp;&amp; year &lt; 2010) year];
+// [ 2006]
+</pre>
+
+<h3 id="map과_filter를_비교한_배열">map과 filter를 비교한 배열</h3>
+
+<p>배열문법을 가장 쉽게 이해하는 방법은, 배열에서 {{jsxref("Array.map", "map")}} 그리고 {{jsxref("Array.filter", "filter")}}메소드를 비교하는 것이다.</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3];
+
+numbers.map(function (i) { return i * i });
+numbers.map(i =&gt; i * i);
+[for (i of numbers) i * i];
+// all are [1, 4, 9]
+
+numbers.filter(function (i) { return i &lt; 3 });
+numbers.filter(i =&gt; i &lt; 3);
+[for (i of numbers) if (i &lt; 3) i];
+// all are [1, 2]
+</pre>
+
+<h3 id="2개의_배열">2개의 배열</h3>
+
+<p>2개의 배열과 2개의 for-of 반복문을 살펴본다.</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3];
+var letters = ['a', 'b', 'c'];
+
+var cross = [for (i of numbers) for (j of letters) i + j];
+// ["1a", "1b", "1c", "2a", "2b", "2c", "3a", "3b", "3c"]
+
+var grid = [for (i of numbers) [for (j of letters) i + j]];
+// [
+// ["1a", "1b", "1c"],
+// ["2a", "2b", "2c"],
+// ["3a", "3b", "3c"]
+// ]
+
+[for (i of numbers) if (i &gt; 1) for (j of letters) if(j &gt; 'a') i + j]
+// ["2b", "2c", "3b", "3c"], the same as below:
+
+[for (i of numbers) for (j of letters) if (i &gt; 1) if(j &gt; 'a') i + j]
+// ["2b", "2c", "3b", "3c"]
+
+[for (i of numbers) if (i &gt; 1) [for (j of letters) if(j &gt; 'a') i + j]]
+// [["2b", "2c"], ["3b", "3c"]], not the same as below:
+
+[for (i of numbers) [for (j of letters) if (i &gt; 1) if(j &gt; 'a') i + j]]
+// [[], ["2b", "2c"], ["3b", "3c"]]
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<p>ECMAScript 2015 초안에 있었지만 개정 27(2014년 8월)에서 삭제되었습니다. specification semantics에 대해서는 ES2015의 이전 버전을 참조하세요.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("javascript.operators.array_comprehensions")}}</p>
+
+<h2 id="오래된_JS1.7JS1.8_comprehensions과의_차이점들">오래된 JS1.7/JS1.8 comprehensions과의 차이점들</h2>
+
+<div class="warning">Gecko에서 JS1.7 / JS1.8 comprehensions가 46 버전부터 제거되었습니다. ({{bug(1220564)}}).</div>
+
+<p><strong>이전에 사용된 문법입니다. (더 이상 사용되지 않음!):</strong></p>
+
+<pre class="brush: js example-bad">[X for (Y in Z)]
+[X for each (Y in Z)]
+[X for (Y of Z)]
+</pre>
+
+<p>차이점:</p>
+
+<ul>
+ <li>ESNext comprehensions는 전체comprehension 대신 "for"노드마다 하나의 범위를 만듭니다.
+ <ul>
+ <li>Old: <code>[()=&gt;x for (x of [0, 1, 2])][1]() // 2</code></li>
+ <li>New: <code>[for (x of [0, 1, 2]) ()=&gt;x][1]() // 1, each iteration creates a fresh binding for x. </code></li>
+ </ul>
+ </li>
+ <li>ESNext comprehensions은 assignment expression대신 "for"로 시작합니다.
+ <ul>
+ <li>Old: <code>[i * 2 for (i of numbers)]</code></li>
+ <li>New: <code>[for (i of numbers) i * 2]</code></li>
+ </ul>
+ </li>
+ <li>ESNext comprehensions는 <code>if</code> 및 <code>for</code> 구성 요소를 여러 개 가질 수 있습니다.</li>
+ <li>ESNext comprehensions <code>{{jsxref("Statements/for...of", "for...of")}}</code>에서만 동작하고 <code>{{jsxref("Statements/for...in", "for...in")}}</code>에서는 동작하지 않습니다.</li>
+</ul>
+
+<p>버그 업데이트에 대한 제안은 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1220564#c42">Bug 1220564, comment 42</a>를 참조하세요.</p>
+
+<h2 id="더보기">더보기</h2>
+
+<ul>
+ <li>{{jsxref("Statements/for...of", "for...of")}}</li>
+ <li>{{jsxref("Operators/Generator_comprehensions", "Generator comprehensions", "" ,1)}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/연산자_우선순위/index.html b/files/ko/web/javascript/reference/operators/연산자_우선순위/index.html
new file mode 100644
index 0000000000..7a82346d09
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/연산자_우선순위/index.html
@@ -0,0 +1,462 @@
+---
+title: 연산자 우선순위
+slug: Web/JavaScript/Reference/Operators/연산자_우선순위
+tags:
+ - JavaScript
+ - Operator
+ - 연산자
+ - 우선순위
+translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>연산자 우선순위</strong>는 연산자를 실행하는 순서를 결정합니다. 우선순위가 높은 연산자가 먼저 실행됩니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-operatorprecedence.html")}}</div>
+
+
+
+<h2 id="우선순위와_결합성">우선순위와 결합성</h2>
+
+<p>아래와 같이 표현할 수 있는 표현식을 생각해 봅시다. 연산자<sub>1</sub>과 연산자<sub>2</sub>의 자리에는 아무 연산자를 넣을 수 있습니다.</p>
+
+<pre class="syntaxbox">a 연산자<sub>1</sub> b 연산자<sub>2</sub> c</pre>
+
+<p>두 연산자의 우선순위(아래 표 참조)가 다를 경우, 우선순위가 높은 연산자가 먼저 실행되고 결합성은 영향을 미치지 않습니다. 아래 예제에서는 덧셈이 곱셈보다 먼저 쓰였음에도 곱셈의 우선순위가 높기 때문에 먼저 실행됩니다.</p>
+
+<pre class="brush: js">console.log(3 + 10 * 2); // 23을 출력
+console.log(3 + (10 * 2)); // 23을 출력, 괄호는 불필요함
+console.log((3 + 10) * 2); // 26을 출력, 괄호로 인해 실행 순서가 바뀜
+</pre>
+
+<p>좌결합성(왼쪽에서 오른쪽으로)은 표현식이 <code>(a 연산자<sub>1</sub> b) 연산자<sub>2</sub> c</code>와 같이, 우결합성(오른쪽에서 왼쪽으로)은 <code>a 연산자<sub>1</sub> (b 연산자<sub>2</sub> c)</code>와 같이 계산된다는 의미입니다. 대입 연산자는 우결합성이므로 다음과 같은 코드를 작성할 수 있습니다.</p>
+
+<pre class="brush: js">a = b = 5; // a = (b = 5);와 같음
+</pre>
+
+<p>이때 대입 연산자는 대입된 값을 반환하므로 <code>a</code>와 <code>b</code>의 값이 5가 됨을 예상할 수 있습니다. 우선 <code>b</code>의 값이 5로 설정되고, 그 다음에는 <code>a</code>의 값이 우변인 <code>b = 5</code>의 반환값 5로 설정됩니다.</p>
+
+<p>다른 예시로, 좌결합성인 다른 산술 연산자와 달리 거듭제곱 연산자 (<code>**</code>)만은 우결합성입니다. 흥미로운 점으로 표현식의 평가는 결합성과 무관하게 항상 왼쪽에서 오른쪽으로 진행됩니다.</p>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <td>코드</td>
+ <td>출력</td>
+ </tr>
+ <tr>
+ <td>
+ <pre class="brush: js">
+function echo(name, num) {
+ console.log(name + " 항 평가함");
+ return num;
+}
+// 나눗셈 연산자 (/)에 주목
+console.log(echo("첫째", 6) / echo("둘째", 2));
+</pre>
+ </td>
+ <td>
+ <pre>
+첫째 항 평가함
+둘째 항 평가함
+3
+</pre>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <pre class="brush: js">
+function echo(name, num) {
+ console.log(name + " 항 평가함");
+ return num;
+}
+// 거듭제곱 연산자 (**)에 주목
+console.log(echo("첫째", 2) ** echo("둘째", 3));</pre>
+ </td>
+ <td>
+ <pre>
+첫째 항 평가함
+둘째 항 평가함
+8</pre>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<p>여러 연산자의 우선순위가 같을 때는 결합성을 고려합니다. 위에서와 같이 연산자가 하나이거나 연산자끼리 우선순위가 다를 경우에는 결합성이 결과에 영향을 미치지 않습니다. 아래의 예제에서 같은 종류의 연산자를 여러 번 사용했을 때 결합성이 결과에 영향을 미치는 것을 확인할 수 있습니다.</p>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <td>코드</td>
+ <td>출력</td>
+ </tr>
+ <tr>
+ <td>
+ <pre class="brush: js">
+function echo(name, num) {
+ console.log(name + " 항 평가함");
+ return num;
+}
+// 나눗셈 연산자 (/)에 주목
+console.log(echo("첫째", 6) / echo("둘째", 2) / echo("셋째", 3));
+</pre>
+ </td>
+ <td>
+ <pre>
+첫째 항 평가함
+둘째 항 평가함
+셋째 항 평가함
+1
+</pre>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <pre class="brush: js">
+function echo(name, num) {
+ console.log(name + " 항 평가함");
+ return num;
+}
+// 거듭제곱 연산자 (**)에 주목
+console.log(echo("첫째", 2) ** echo("둘째", 3) ** echo("셋째", 2));
+</pre>
+ </td>
+ <td>
+ <pre>
+첫째 항 평가함
+둘째 항 평가함
+셋째 항 평가함
+512
+</pre>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <pre class="brush: js">
+function echo(name, num) {
+ console.log(name + " 항 평가함");
+ return num;
+}
+// 첫 번째 거듭제곱 연산자 주변의 괄호에 주목
+console.log((echo("첫째", 2) ** echo("둘째", 3)) ** echo("셋째", 2));</pre>
+ </td>
+ <td>
+ <pre>
+첫째 항 평가함
+둘째 항 평가함
+셋째 항 평가함
+64</pre>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<p>위의 예제에서 나눗셈은 좌결합성이므로 <code>6 / 3 / 2</code>는 <code>(6 / 3) / 2</code>와 같습니다. 한편 거듭제곱은 우결합성이므로 <code>2 ** 3 ** 2</code>는 <code>2 ** (3 ** 2)</code>와 같습니다. 그러므로 <code>(2 ** 3) ** 2</code>는 괄호로 인해 실행 순서가 바뀌기 때문에 위 표와 같이 64로 평가됩니다.</p>
+
+<p>우선순위는 결합성보다 항상 우선하므로, 거듭제곱과 나눗셈을 같이 사용하면 나눗셈보다 거듭제곱이 먼저 계산됩니다. 예를 들어 <code>2 ** 3 / 3 ** 2</code>는 <code>(2 ** 3) / (3 ** 2)</code>와 같으므로 0.8888888888888888로 계산됩니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">3 &gt; 2 &amp;&amp; 2 &gt; 1
+// true를 반환
+
+3 &gt; 2 &gt; 1
+// 3 &gt; 2는 true인데, 부등호 연산자에서 true는 1로 변환되므로
+// true &gt; 1은 1 &gt; 1이 되고, 이는 거짓이다.
+// 괄호를 추가하면 (3 &gt; 2) &gt; 1과 같다.</pre>
+
+<h2 id="표">표</h2>
+
+<p>다음 표는 우선순위 내림차순(21부터 1까지)으로 정렬되어 있습니다.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+ <tr>
+ <th>우선순위</th>
+ <th>연산자 유형</th>
+ <th>결합성</th>
+ <th>연산자</th>
+ </tr>
+ <tr>
+ <td>21</td>
+ <td>{{jsxref("Operators/Grouping", "그룹", "", 1)}}</td>
+ <td>없음</td>
+ <td><code>( … )</code></td>
+ </tr>
+ <tr>
+ <td colspan="1" rowspan="5">20</td>
+ <td>{{jsxref("Operators/Property_Accessors", "멤버 접근", "#점_표기법", 1)}}</td>
+ <td>좌결합성</td>
+ <td><code>… . …</code></td>
+ </tr>
+ <tr>
+ <td>{{jsxref("Operators/Property_Accessors", "계산된 멤버 접근","#괄호_표기법", "1")}}</td>
+ <td>좌결합성</td>
+ <td><code>… [ … ]</code></td>
+ </tr>
+ <tr>
+ <td>{{jsxref("Operators/new","new")}} (매개변수 리스트 존재)</td>
+ <td>없음</td>
+ <td><code>new … ( … )</code></td>
+ </tr>
+ <tr>
+ <td>
+ <p><a href="/ko/docs/Web/JavaScript/Guide/Functions">함수 호출</a></p>
+ </td>
+ <td>좌결합성</td>
+ <td><code>… ( <var>… </var>)</code></td>
+ </tr>
+ <tr>
+ <td><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Optional chaining</a></td>
+ <td>좌결합성</td>
+ <td><code>?.</code></td>
+ </tr>
+ <tr>
+ <td rowspan="1">19</td>
+ <td>{{jsxref("Operators/new","new")}} (매개변수 리스트 생략)</td>
+ <td>우결합성</td>
+ <td><code>new …</code></td>
+ </tr>
+ <tr>
+ <td rowspan="2">18</td>
+ <td>{{jsxref("Operators/Arithmetic_Operators","후위 증가","#Increment", 1)}}</td>
+ <td colspan="1" rowspan="2">없음</td>
+ <td><code>… ++</code></td>
+ </tr>
+ <tr>
+ <td>{{jsxref("Operators/Arithmetic_Operators","후위 감소","#Decrement", 1)}}</td>
+ <td><code>… --</code></td>
+ </tr>
+ <tr>
+ <td colspan="1" rowspan="10">17</td>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">논리 NOT</a></td>
+ <td colspan="1" rowspan="10">우결합성</td>
+ <td><code>! …</code></td>
+ </tr>
+ <tr>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT">비트 NOT</a></td>
+ <td><code>~ …</code></td>
+ </tr>
+ <tr>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus">단항 양부호</a></td>
+ <td><code>+ …</code></td>
+ </tr>
+ <tr>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation">단항 부정</a></td>
+ <td><code>- …</code></td>
+ </tr>
+ <tr>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">전위 증가</a></td>
+ <td><code>++ …</code></td>
+ </tr>
+ <tr>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement">전위 감소</a></td>
+ <td><code>-- …</code></td>
+ </tr>
+ <tr>
+ <td>{{jsxref("Operators/typeof", "typeof")}}</td>
+ <td><code>typeof …</code></td>
+ </tr>
+ <tr>
+ <td>{{jsxref("Operators/void", "void")}}</td>
+ <td><code>void …</code></td>
+ </tr>
+ <tr>
+ <td>{{jsxref("Operators/delete", "delete")}}</td>
+ <td><code>delete …</code></td>
+ </tr>
+ <tr>
+ <td>{{jsxref("Operators/await", "await")}}</td>
+ <td><code>await …</code></td>
+ </tr>
+ <tr>
+ <td>16</td>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation">거듭제곱</a></td>
+ <td>우결합성</td>
+ <td><code>… ** …</code></td>
+ </tr>
+ <tr>
+ <td rowspan="3">15</td>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Multiplication">곱셈</a></td>
+ <td colspan="1" rowspan="3">좌결합성</td>
+ <td><code>… * …</code></td>
+ </tr>
+ <tr>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Division">나눗셈</a></td>
+ <td><code>… / …</code></td>
+ </tr>
+ <tr>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder">나머지</a></td>
+ <td><code>… % …</code></td>
+ </tr>
+ <tr>
+ <td rowspan="2">14</td>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition">덧셈</a></td>
+ <td colspan="1" rowspan="2">좌결합성</td>
+ <td><code>… + …</code></td>
+ </tr>
+ <tr>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Subtraction">뺄셈</a></td>
+ <td><code>… - …</code></td>
+ </tr>
+ <tr>
+ <td rowspan="3">13</td>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">비트 왼쪽 시프트</a></td>
+ <td colspan="1" rowspan="3">좌결합성</td>
+ <td><code>… &lt;&lt; …</code></td>
+ </tr>
+ <tr>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">비트 오른쪽 시프트</a></td>
+ <td><code>… &gt;&gt; …</code></td>
+ </tr>
+ <tr>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">비트 부호 없는 오른쪽 시프트</a></td>
+ <td><code>… &gt;&gt;&gt; …</code></td>
+ </tr>
+ <tr>
+ <td rowspan="6">12</td>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_operator">미만</a></td>
+ <td colspan="1" rowspan="6">좌결합성</td>
+ <td><code>… &lt; …</code></td>
+ </tr>
+ <tr>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than__or_equal_operator">이하</a></td>
+ <td><code>… &lt;= …</code></td>
+ </tr>
+ <tr>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_operator">초과</a></td>
+ <td><code>… &gt; …</code></td>
+ </tr>
+ <tr>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_or_equal_operator">이상</a></td>
+ <td><code>… &gt;= …</code></td>
+ </tr>
+ <tr>
+ <td>{{jsxref("Operators/in", "in")}}</td>
+ <td><code>… in …</code></td>
+ </tr>
+ <tr>
+ <td>{{jsxref("Operators/instanceof", "instanceof")}}</td>
+ <td><code>… instanceof …</code></td>
+ </tr>
+ <tr>
+ <td rowspan="4">11</td>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality">동등</a></td>
+ <td colspan="1" rowspan="4">좌결합성</td>
+ <td><code>… == …</code></td>
+ </tr>
+ <tr>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Inequality">부등</a></td>
+ <td><code>… != …</code></td>
+ </tr>
+ <tr>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity">일치</a></td>
+ <td><code>… === …</code></td>
+ </tr>
+ <tr>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Nonidentity">불일치</a></td>
+ <td><code>… !== …</code></td>
+ </tr>
+ <tr>
+ <td>10</td>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND">비트 AND</a></td>
+ <td>좌결합성</td>
+ <td><code>… &amp; …</code></td>
+ </tr>
+ <tr>
+ <td>9</td>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">비트 XOR</a></td>
+ <td>좌결합성</td>
+ <td><code>… ^ …</code></td>
+ </tr>
+ <tr>
+ <td>8</td>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR">비트 OR</a></td>
+ <td>좌결합성</td>
+ <td><code>… | …</code></td>
+ </tr>
+ <tr>
+ <td>7</td>
+ <td><a href="https://wiki.developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">널 병합 연산자</a></td>
+ <td>좌결합성</td>
+ <td><code>… ?? …</code></td>
+ </tr>
+ <tr>
+ <td>6</td>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND">논리 AND</a></td>
+ <td>좌결합성</td>
+ <td><code>… &amp;&amp; …</code></td>
+ </tr>
+ <tr>
+ <td>5</td>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR">논리 OR</a></td>
+ <td>좌결합성</td>
+ <td><code>… || …</code></td>
+ </tr>
+ <tr>
+ <td>4</td>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">조건</a></td>
+ <td>우결합성</td>
+ <td><code>… ? … : …</code></td>
+ </tr>
+ <tr>
+ <td rowspan="13">3</td>
+ <td rowspan="13"><a href="/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">할당</a></td>
+ <td rowspan="13">우결합성</td>
+ <td><code>… = …</code></td>
+ </tr>
+ <tr>
+ <td><code>… += …</code></td>
+ </tr>
+ <tr>
+ <td><code>… -= …</code></td>
+ </tr>
+ <tr>
+ <td><code>… **= …</code></td>
+ </tr>
+ <tr>
+ <td><code>… *= …</code></td>
+ </tr>
+ <tr>
+ <td><code>… /= …</code></td>
+ </tr>
+ <tr>
+ <td><code>… %= …</code></td>
+ </tr>
+ <tr>
+ <td><code>… &lt;&lt;= …</code></td>
+ </tr>
+ <tr>
+ <td><code>… &gt;&gt;= …</code></td>
+ </tr>
+ <tr>
+ <td><code>… &gt;&gt;&gt;= …</code></td>
+ </tr>
+ <tr>
+ <td><code>… &amp;= …</code></td>
+ </tr>
+ <tr>
+ <td><code>… ^= …</code></td>
+ </tr>
+ <tr>
+ <td><code>… |= …</code></td>
+ </tr>
+ <tr>
+ <td rowspan="2">2</td>
+ <td>{{jsxref("Operators/yield", "yield")}}</td>
+ <td colspan="1" rowspan="2">우결합성</td>
+ <td><code>yield …</code></td>
+ </tr>
+ <tr>
+ <td>{{jsxref("Operators/yield*", "yield*")}}</td>
+ <td><code>yield* …</code></td>
+ </tr>
+ <tr>
+ <td>1</td>
+ <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comma_Operator">쉼표 / 시퀀스</a></td>
+ <td>좌결합성</td>
+ <td><code>… , …</code></td>
+ </tr>
+ </tbody>
+</table>