diff options
Diffstat (limited to 'files/ko/web/javascript/guide')
| -rw-r--r-- | files/ko/web/javascript/guide/expressions_and_operators/index.html | 1699 |
1 files changed, 1032 insertions, 667 deletions
diff --git a/files/ko/web/javascript/guide/expressions_and_operators/index.html b/files/ko/web/javascript/guide/expressions_and_operators/index.html index f5e711304f..d619a14fd8 100644 --- a/files/ko/web/javascript/guide/expressions_and_operators/index.html +++ b/files/ko/web/javascript/guide/expressions_and_operators/index.html @@ -11,454 +11,721 @@ tags: - 연산자 translation_of: Web/JavaScript/Guide/Expressions_and_Operators --- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}</div> -<p class="summary">이 장은 JavaScript의 표현식과 할당, 비교, 산술, 비트 계산, 논리, 문자열, 삼항 등 여러 가지 연산자를 설명합니다.</p> +<div> + {{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Functions", + "Web/JavaScript/Guide/Numbers_and_dates")}} +</div> + +<p class="summary"> + 이 장은 JavaScript의 표현식과 할당, 비교, 산술, 비트 계산, 논리, 문자열, 삼항 등 여러 가지 연산자를 설명합니다. +</p> -<p>연산자와 표현식의 완전하고 구체적인 목록도 <a href="/ko/docs/Web/JavaScript/Reference/Operators">참고서</a>에서 확인할 수 있습니다.</p> +<p> + <a href="/ko/docs/Web/JavaScript/Reference/Operators">참고서</a>에서 구체적인 모든 연산자와 표현식의 목록도 확인할 수 + 있습니다. +</p> -<h2 id="연산자">연산자</h2> +<h2 id="operators">연산자</h2> -<p>JavaScript는 다음과 같은 형태의 연산자가 있습니다. 이 절은 연산자에 대하여 설명하고, 연산자 우선순위에 관한 정보를 포함하고 있습니다.</p> +<p> + JavaScript에는 다음과 같은 유형의 연산자가 있습니다. 이 절에서는 각각의 연산자에 대해 설명하고, 연산자 우선순위에 관한 + 정보를 제공합니다. +</p> <ul> - <li><a href="#할당_연산자">할당 연산자</a></li> - <li><a href="#비교_연산자">비교 연산자</a></li> - <li><a href="#산술_연산자">산술 연산자</a></li> - <li><a href="#비트_연산자">비트 연산자</a></li> - <li><a href="#논리_연산자">논리 연산자</a></li> - <li><a href="#문자열_연산자">문자열 연산자</a></li> - <li><a href="#조건_(삼항)_연산자">조건 (삼항) 연산자</a></li> - <li><a href="#쉼표_연산자">쉼표 연산자</a></li> - <li><a href="#단항_연산자">단항 연산자</a></li> - <li><a href="#관계_연산자">관계 연산자</a></li> + <li><a href="#assignment_operators">할당 연산자</a></li> + <li><a href="#comparison_operators">비교 연산자</a></li> + <li><a href="#arithmetic_operators">산술 연산자</a></li> + <li><a href="#bitwise_operators">비트 연산자</a></li> + <li><a href="#logical_operators">논리 연산자</a></li> + <li><a href="#string_operators">문자열 연산자</a></li> + <li><a href="#conditional_ternary_operator">조건 (삼항) 연산자</a></li> + <li><a href="#comma_operator">쉼표 연산자</a></li> + <li><a href="#unary_operators">단항 연산자</a></li> + <li><a href="#relational_operators">관계 연산자</a></li> </ul> -<p>JavaScript는 이항 연산자와 단항연산자, 조건연산자인 단 하나 존재하는 삼항 연산자를 가지고 있습니다. 이항 연산자는 하나는 좌변에 다른 하나는 우변에 두개의 피연산자가 필요합니다:</p> +<p> + JavaScript는 이항 연산자와 단항 연산자를 포함하며, 유일한 삼항 연산자로 조건 연산자도 가지고 있습니다. 이항 연산자는 + 연산자의 앞과 뒤에 하나씩, 총 두 개의 피연산자가 필요합니다. +</p> -<pre class="syntaxbox"><em>피연산자1</em> <em>연산자</em> <em>피연산자2</em> -</pre> +<pre class="brush: js">피연산자1 연산자 피연산자2</pre> -<p>예를 들면 <code>3+4</code> 또는 <code>x*y</code>와 같습니다.</p> +<p>이항 연산자의 예시로는 <code>3+4</code>와 <code>x*y</code>가 있습니다.</p> -<p>단항 연산자는 연산자 뒤에든 앞에든 하나의 피연산자를 필요로 합니다.:</p> +<p>단항 연산자는 연산자의 앞이나 뒤에 하나의 피연산자가 필요합니다.</p> -<pre class="syntaxbox"><em>연산자</em> <em>피연산자</em> -</pre> +<pre class="brush: js">연산자 피연산자</pre> <p>또는</p> -<pre class="syntaxbox"><em>피연산자</em> <em>연산자</em> -</pre> +<pre class="brush: js">피연산자 연산자</pre> -<p><code>x++</code> 또는 <code>++x</code>를 예시로 들 수 있습니다.</p> +<p>단항 연산자의 예시로는 <code>x++</code> 또는 <code>++x</code>가 있습니다.</p> -<h3 id="할당_연산자">할당 연산자</h3> +<h3 id="assignment_operators">할당 연산자</h3> -<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">할당 연산자</a>는 오른쪽 피연산자의 값을 왼쪽 피연산자에 할당합니다. 기본적인 할당 연산자는 오른쪽의 피연산자 값을 왼쪽 피연산자 값에 할당하는 등호(<code>=</code>) 입니다. 즉 <code>x = y</code> 는 <code>y</code> 값을 <code>x</code>에 할당합니다.</p> +<p> + 할당 연산자는 오른쪽 피연산자의 값을 왼쪽 피연산자에 할당합니다. 기본적인 할당 연산자는 오른쪽의 피연산자 값을 왼쪽 + 피연산자 값에 할당하는 등호(<code>=</code>)로, <code>x = y</code> 는 <code>y</code>의 값을 <code>x</code>에 + 할당합니다. +</p> -<p>다음의 표에 나열된 연산의 약칭인 복합 할당 연산자도 존재합니다:</p> +<p>아래의 표에서 볼 수 있듯, 연산과 할당을 동시에 수행하는 복합 할당 연산자도 존재합니다.</p> <table class="standard-table"> - <caption>복합 할당 연산자</caption> - <thead> - <tr> - <th>이름</th> - <th>복합 할당 연산자</th> - <th>뜻</th> - </tr> - </thead> - <tbody> - <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="/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#지수_연산_할당">지수 연산 할당</a> {{experimental_inline}}</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 <<= y</code></td> - <td><code>x = x << y</code></td> - </tr> - <tr> - <td><a href="#Right_shift_assignment">오른쪽 이동 연산 할당</a></td> - <td><code>x >>= y</code></td> - <td><code>x = x >> y</code></td> - </tr> - <tr> - <td><a href="#Unsigned_right_shift_assignment">부호 없는 오른쪽 이동 연산 할당</a></td> - <td><code>x >>>= y</code></td> - <td><code>x = x >>> y</code></td> - </tr> - <tr> - <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#비트_AND_할당">비트 AND 할당</a></td> - <td><code>x &= y</code></td> - <td><code>x = x & y</code></td> - </tr> - <tr> - <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#비트_XOR_할당">비트 XOR 할당</a></td> - <td><code>x ^= y</code></td> - <td><code>x = x ^ y</code></td> - </tr> - <tr> - <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#비트_OR_할당">비트 OR 할당</a></td> - <td><code>x |= y</code></td> - <td><code>x = x | y</code></td> - </tr> - </tbody> + <caption> + 복합 할당 연산자 + </caption> + <thead> + <tr> + <th>이름</th> + <th>단축 연산자</th> + <th>뜻</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Assignment">할당</a></td> + <td><code>x = y</code></td> + <td><code>x = y</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Addition_assignment">더하기 할당</a></td> + <td><code>x += y</code></td> + <td><code>x = x + y</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Subtraction_assignment">빼기 할당</a></td> + <td><code>x -= y</code></td> + <td><code>x = x - y</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Multiplication_assignment">곱하기 할당</a></td> + <td><code>x *= y</code></td> + <td><code>x = x * y</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Division_assignment">나누기 할당</a></td> + <td><code>x /= y</code></td> + <td><code>x = x / y</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Remainder_assignment">나머지 할당</a></td> + <td><code>x %= y</code></td> + <td><code>x = x % y</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Exponentiation_assignment">거듭제곱 할당</a></td> + <td><code>x **= y</code></td> + <td><code>x = x ** y</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Left_shift_assignment">왼쪽 시프트 할당</a></td> + <td><code>x <<= y</code></td> + <td><code>x = x << y</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Right_shift_assignment">오른쪽 시프트 할당</a></td> + <td><code>x >>= y</code></td> + <td><code>x = x >> y</code></td> + </tr> + <tr> + <td> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment" + >부호 없는 오른쪽 시프트 할당</a + > + </td> + <td><code>x >>>= y</code></td> + <td><code>x = x >>> y</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment">비트 AND 할당</a></td> + <td><code>x &= y</code></td> + <td><code>x = x & y</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment">비트 XOR 할당</a></td> + <td><code>x ^= y</code></td> + <td><code>x = x ^ y</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment">비트 OR 할당</a></td> + <td><code>x |= y</code></td> + <td><code>x = x | y</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Logical_AND_assignment">논리 AND 할당</a></td> + <td><code>x &&= y</code></td> + <td><code>x && (x = y)</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment">논리 OR 할당</a></td> + <td><code>x ||= y</code></td> + <td><code>x || (x = y)</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Logical_nullish_assignment">널 병합 할당</a></td> + <td><code>x ??= y</code></td> + <td><code>x ?? (x = y)</code></td> + </tr> + </tbody> </table> -<h4 id="구조_분해">구조 분해</h4> +<h4 id="return_value_and_chaining">반환 값과 체이닝</h4> + +<p> + <code>x = y</code>와 같은 할당 역시 대부분의 표현식처럼 값을 반환합니다. 할당 연산자의 반환 값은 다른 할당 연산자나 + 콘솔 기록 등을 통해 가져올 수 있습니다. +</p> + +<pre class="brush: js"> +const z = (x = y); // const z = x = y와 같음 + +console.log(z); // x = y 할당의 반환 값을 기록 +console.log(x = y); // 또는 반환 값을 직접 기록 +</pre> + +<p> + 반환 값은 위쪽 표의 "뜻" 열에서 등호(<code>=</code>)의 오른쪽 표현식 값과 동일합니다. 즉 <code>(x = y)</code>는 + <code>y</code>를 반환하고, <code>(x += y)</code>는 <code>x + y</code>의 결과를, <code>(x **= y)</code>는 + <code>x ** y</code>의 결과를 반환합니다. +</p> + +<p> + 논리 할당인 <code>(x &&= y)</code>, <code>(x ||= y)</code>, <code>(x ??= y)</code>의 경우에는 할당 부분을 + 제외한 논리 연산의 결과를 반환합니다. 따라서 각각 <code>x && y</code>, <code>x || y</code>, + <code>x ?? y</code>의 결과를 반환합니다. +</p> + +<p>반환 값은 <em>할당 전</em>의 값을 사용한 논리 연산의 결과임에 주의하세요.</p> + +<p> + 할당 표현식 여러 개를 체이닝할 경우에는 각각의 할당을 <strong>오른쪽에서 왼쪽으로</strong> 평가합니다. 다음의 예제를 + 봐주세요. +</p> + +<ul> + <li><code>w = z = x = y</code>는 <code>w = (z = (x = y))</code> 또는 <code>x = y; z = y; w = y</code>와 같습니다.</li> + <li> + <code>z += x *= y</code>는 <code>z += (x *= y)</code> 또는 <code>tmp = x * y; x *= y; z += tmp</code>와 같습니다. + (<code>tmp</code>라는 변수를 새로 선언하지는 않습니다) + </li> +</ul> + +<h4 id="destructuring">구조 분해</h4> -<p>복잡한 할당 연산에서, <a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">구조 분해 할당</a> 구문은 배열이나 객체의 구조를 반영하여 배열이나 객체에서 데이터를 추출할 수 있게 해주는 JavaScript 표현식입니다.</p> +<p> + 더 복잡한 할당에 사용할 수 있는 + <a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">구조 분해 할당</a>은 배열 리터럴과 객체 + 리터럴을 생성할 때와 비슷한 구문을 사용해서 배열과 객체에서 데이터를 추출할 수 있는 JavaScript 표현식입니다. +</p> -<pre class="brush: js">var foo = ['one', 'two', 'three']; +<pre class="brush: js"> +var foo = ['one', 'two', 'three']; -// 구조 분해를 활용하지 않은 경우 +// 구조 분해 미활용 var one = foo[0]; var two = foo[1]; var three = foo[2]; -// 구조 분해를 활용한 경우 -var [one, two, three] = foo;</pre> - -<h3 id="비교_연산자">비교 연산자</h3> - -<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">비교 연산자</a>는 피연산자들을 비교하고 비교에 따라 논리 값을 반환합니다. 피연산자들은 숫자, 문자열, 논리형, 객체 를 사용할 수 있습니다. 문자열은 유니코드 값을 사용하여 표준 사전순서를 기반으로 비교합니다. 만약 두 피연산자가 다른 형태일 경우, JavaScript는 대부분 비교를 위해 피연산자를 적절한 타입으로 변환합니다. 이런 행동은 보통 숫자로 피연산자를 숫자로 비교하는 형태로 나타납니다. 형태를 바꾸기의 유일한 예외는 엄격한 비교를 수행하는 <code>===</code> 과 <code>!==</code> 연산이 관련되는 경우입니다. 이런 연산자는 비교를 위해 피연산자의 형태를 적절히 바꾸려고 시도하지 않습니다. 다음 표는 샘플 코드를 통해 비교 연산자에 대하여 설명합니다:</p> +// 구조 분해 활용 +var [one, two, three] = foo; +</pre> -<pre><code>var var1 = 3; -var var2 = 4;</code> +<h3 id="comparison_operators">비교 연산자</h3> + +<p> + 비교 연산자는 피연산자를 서로 비교하고, 비교 결과가 참인지에 따라 논리 값을 반환합니다. 피연산자로는 숫자, 문자열, + 논리형, 객체 값을 사용할 수 있습니다. 문자열은 Unicode 값을 사용한 표준 사전식 순서를 기반으로 비교합니다. 만약 두 + 피연산자가 서로 다른 타입일 경우, JavaScript가 피연산자를 비교하기에 적합한 타입으로 변환하며, 대개 숫자로 변환해 + 비교하는 결과를 낳습니다. 비교 연산에서 발생하는 타입 변환의 유일한 예외는 + <code>===</code>와 <code>!==</code> 연산자를 사용해 엄격 일치와 불일치 비교를 수행하는 경우입니다. 두 연산자는 + 비교하기 전에 피연산자를 변환하려는 시도를 하지 않습니다. 다음과 같은 예제 변수 <code>var1</code>과 + <code>var2</code>를 가정할 때, 아래의 표에서 비교 연산자의 종류와, 각각 <code>true</code>를 반환하는 예제 코드를 볼 수 + 있습니다. +</p> + +<pre> +var var1 = 3; +var var2 = 4; </pre> <table class="standard-table"> - <caption>비교 연산자</caption> - <thead> - <tr> - <th scope="col">연산자</th> - <th scope="col">설명</th> - <th scope="col">참을 반환하는 예제</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality">동등</a> (<code>==</code>)</td> - <td>피연산자들이 같으면 참을 반환합니다.</td> - <td><code>3 == var1</code> - <p><code>"3" == var1</code></p> - <code>3 == '3'</code></td> - </tr> - <tr> - <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Inequality">부등</a> (<code>!=</code>)</td> - <td>피연산자들이 다르면 참을 반환합니다.</td> - <td><code>var1 != 4<br> - var2 != "3"</code></td> - </tr> - <tr> - <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity">일치</a> (<code>===</code>)</td> - <td>피연산자들이 같고 피연산자들의 같은 형태인 경우 참을 반환합니다. {{jsxref("Object.is")}} 와 <a href="/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness" title="/ko/docs/Web/JavaScript/Guide/Sameness">JavaScript에서의 같음</a>을 참고하세요.</td> - <td><code>3 === var1</code></td> - </tr> - <tr> - <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Nonidentity">불일치</a> (<code>!==</code>)</td> - <td>피연산자들이 다르거나 형태가 다른 경우 참을 반환합니다.</td> - <td><code>var1 !== "3"<br> - 3 !== '3'</code></td> - </tr> - <tr> - <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_operator">~보다 큰</a> (<code>></code>)</td> - <td>좌변의 피연산자 보다 우변의 피연산자가 크면 참을 반환합니다.</td> - <td><code>var2 > var1<br> - "12" > 2</code></td> - </tr> - <tr> - <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_or_equal_operator">~보다 크거나 같음</a> (<code>>=</code>)</td> - <td>좌변의 피연산자 보다 우변의 피연산자가 크거나 같으면 참을 반환합니다.</td> - <td><code>var2 >= var1<br> - var1 >= 3</code></td> - </tr> - <tr> - <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_operator">~보다 작음</a> (<code><</code>)</td> - <td>좌변의 피연산자 보다 우변의 피연산자가 작으면 참을 반환합니다.</td> - <td><code>var1 < var2<br> - "2" < 12</code></td> - </tr> - <tr> - <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_or_equal_operator">~보다 작거나 같음</a> (<code><=</code>)</td> - <td>좌변의 피연산자 보다 우변의 피연산자가 작거나 같으면 참을 반환합니다.</td> - <td> - <p><code>var1 <= var2<br> - var2 <= 5</code></p> - </td> - </tr> - </tbody> + <caption> + 비교 연산자 + </caption> + <thead> + <tr> + <th scope="col">연산자</th> + <th scope="col">설명</th> + <th scope="col"><code>true</code>를 반환하는 예제</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Equality">동등</a> (<code>==</code>)</td> + <td>피연산자가 서로 같으면 <code>true</code>를 반환합니다.</td> + <td> + <code>3 == var1<br />"3" == var1<br />3 == '3'</code> + </td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Inequality">부등</a> (<code>!=</code>)</td> + <td>피연산자가 서로 다르면 <code>true</code>를 반환합니다.</td> + <td> + <code>var1 != 4<br />var2 != "3"</code> + </td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Strict_equality">일치</a> (<code>===</code>)</td> + <td> + 두 피연산자의 값과 타입이 모두 같은 경우 <code>true</code>를 반환합니다. {{jsxref("Object.is")}}와 + <a href="/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness">JavaScript에서의 같음</a>을 참고하세요. + </td> + <td><code>3 === var1</code></td> + </tr> + <tr> + <td> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/Strict_inequality">불일치</a> + (<code>!==</code>) + </td> + <td>피연산자의 값 또는 타입이 서로 다를 경우 <code>true</code>를 반환합니다.</td> + <td> + <code>var1 !== "3"<br />3 !== '3'</code> + </td> + </tr> + <tr> + <td> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/Greater_than">큼</a> + (<code>></code>) + </td> + <td>왼쪽 피연산자가 오른쪽 피연산자보다 크면 <code>true</code>를 반환합니다.</td> + <td> + <code>var2 > var1<br />"12" > 2</code> + </td> + </tr> + <tr> + <td> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal">크거나 같음</a> + (<code>>=</code>) + </td> + <td>왼쪽 피연산자가 오른쪽 피연산자와 같거나 크면 <code>true</code>를 반환합니다.</td> + <td> + <code>var2 >= var1<br />var1 >= 3</code> + </td> + </tr> + <tr> + <td> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/Less_than">작음</a> + (<code><</code>) + </td> + <td>왼쪽 피연산자가 오른쪽 피연산자보다 작으면 <code>true</code>를 반환합니다.</td> + <td> + <code>var1 < var2<br />"2" < 12</code> + </td> + </tr> + <tr> + <td> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal">작거나 같음</a> + (<code><=</code>) + </td> + <td>왼쪽 피연산자가 오른쪽 피연산자와 같거나 작으면 <code>true</code>를 반환합니다.</td> + <td> + <p> + <code>var1 <= var2<br />var2 <= 5</code> + </p> + </td> + </tr> + </tbody> </table> <div class="note"> -<p><strong>참고: </strong>(<code>=></code>) 은 연산자가 아니고, 화살표 함수(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a>)를 나타내는 기호입니다.</p> + <p> + <strong>참고:</strong> <code>=></code>는 연산자가 아니라 + <a href="/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions">화살표 함수</a>의 표기법입니다. + </p> </div> -<h3 id="산술_연산자">산술 연산자</h3> +<h3 id="arithmetic_operators">산술 연산자</h3> -<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">산술 연산자</a>는 숫자값(리터럴 또는 변수)을 피연산자로 갖고, 하나의 숫자 값을 반환합니다. 기본적인 산술 연산자는 덧셈(<code>+</code>), 뺄셈 (<code>-</code>), 곱셈 (<code>*</code>), 나눗셈 (<code>/</code>)입니다. 이 연산자들은 대부분의 다른 프로그래밍 언어들이 부동소수점 값을 연산하는것처럼 동작합니다. (0 으로 나누는 것은 {{jsxref("Infinity")}} 을 발생시키는 것을 기억하세요) 예를 들면:</p> +<p> + 산술 연산자는 두 개의 숫자 값(리터럴 또는 변수)을 피연산자로 받아서 하나의 숫자 값을 반환합니다. 표준 산술 연산자는 + 더하기(<code>+</code>), 빼기(<code>-</code>), 곱하기(<code>*</code>), 나누기(<code>/</code>)입니다. 이 연산자들은 + 대부분의 다른 프로그래밍 언어에서 부동소수점 값을 연산할 때와 동일하게 동작합니다. (0 으로 나눌 경우 + {{jsxref("Infinity")}}를 반환하는 것에 주의하세요) 예를 들어, +</p> -<pre class="brush: js">1 / 2; // 0.5 -1 / 2 == 1.0 / 2.0; // this is true +<pre class="brush: js"> +1 / 2; // 0.5 +1 / 2 == 1.0 / 2.0; // 참 </pre> -<p>또한, 표준 산술 연산자 (+, -, *, /) 에 대해 JavaScript는 다음의 표에 나와 있는 산술 연산자를 제공합니다.</p> - -<table class="fullwidth-table"> - <caption>산술 연산자</caption> - <thead> - <tr> - <th scope="col">연산자</th> - <th scope="col">설명</th> - <th scope="col">예제</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder">나머지 연산자</a> (<code>%</code>)</td> - <td>이항 연산자입니다. 두 피연산자를 나눈후 나머지를 반환합니다.</td> - <td>12 % 5 는 2를 반환합니다.</td> - </tr> - <tr> - <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">증가 연산자</a> (<code>++</code>)</td> - <td>단항 연산자입니다. 피연산자에 1을 더합니다. 만약 연산자를 피연산자 앞(<code>++x</code>)에 사용하면, 피연산자에 1을 더한 값을 반환합니다.; 만약 연산자를 피연산자 뒤(<code>x++</code>)에 사용하면, 피연산자에 1을 더하기 전 값을 반환합니다.</td> - <td><code>x</code> 가 3이면 <code>++x</code> 는 <code>x</code> 를 4로 만들고 4를 반환합니다. 반면 <code>x++</code> 는 3을 반환하고 <code>x</code> 를 4로 만듭니다.</td> - </tr> - <tr> - <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement">감소 연산자</a> (<code>--</code>)</td> - <td>단항 연산자입니다. 피연산자로 부터 1을 뺍니다. 반환값은 증가 연산자와 유사합니다.</td> - <td><code>x</code> 가 3이면 <code>--x</code> 는 <code>x</code> 를 2로 만들고2를 반환합니다. 반면 <code>x--</code> 는 3을 반환하고 <code>x</code> 를 2로 만듭니다.</td> - </tr> - <tr> - <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation">단항 부정 연산자</a> (<code>-</code>)</td> - <td>단항 연산자 입니다. 피연산자의 반대값(부호 바뀐값)을 반환합니다.</td> - <td> <code>x</code> 가 3이면 <code>-x</code> 는 -3을 반환합니다.</td> - </tr> - <tr> - <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus">숫자화 연산자</a> (<code>+</code>)</td> - <td>단항연산자 입니다. 피연산자가 숫자값이 아니라면 피연산자를 숫자로 변환하기를 시도합니다.</td> - <td><code>+"3"</code> 은 <code>3</code>을 반환합니다.<br> - <code>+true</code> 는 <code>1.</code> 을 반환합니다.</td> - </tr> - </tbody> +<p> + JavaScript는 표준 산술 연산자(<code>+</code>, <code>-</code>, <code>*</code>, <code>/</code>) 외에도 아래의 표에 + 나열된 산술 연산자를 제공합니다. +</p> + +<table class="standard-table"> + <caption> + 산술 연산자 + </caption> + <thead> + <tr> + <th scope="col">연산자</th> + <th scope="col">설명</th> + <th scope="col">예제</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/Remainder">나머지</a> + (<code>%</code>) + </td> + <td>이항 연산자입니다. 두 피연산자를 나눴을 때의 나머지를 반환합니다.</td> + <td>12 % 5 는 2를 반환합니다.</td> + </tr> + <tr> + <td> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/Increment">증가</a> + (<code>++</code>) + </td> + <td> + 단항 연산자입니다. 피연산자에 1을 더합니다. 전위 연산자(<code>++x</code>)로 사용하면 피연산자에 1을 더한 값을 + 반환합니다. 반면 후위 연산자(<code>x++</code>)로 사용한 경우 피연산자에 1을 더하기 전의 값을 반환합니다. + </td> + <td> + <code>x</code>가 3일 때, <code>++x</code>는 <code>x</code>에 4를 할당한 후 4를 반환합니다. 반면 + <code>x++</code>는 3을 먼저 반환한 후 <code>x</code>에 4를 할당합니다. + </td> + </tr> + <tr> + <td> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/Decrement">감소</a> + (<code>--</code>) + </td> + <td>단항 연산자입니다. 피연산자에서 1을 뺍니다. 반환 값은 증가 연산자처럼 동작합니다.</td> + <td> + <code>x</code>가 3일 때, <code>--x</code>는 <code>x</code>에 2를 할당한 후 2를 반환합니다. 반면 + <code>x--</code>는 3을 먼저 반환한 후 <code>x</code>에 2를 할당합니다. + </td> + </tr> + <tr> + <td> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/Unary_negation">단항 부정</a> + (<code>-</code>) + </td> + <td>단항 연산자입니다. 피연산자의 부호를 반대로 바꾼 값을 반환합니다.</td> + <td><code>x</code>가 3일 때, <code>-x</code>는 -3을 반환합니다.</td> + </tr> + <tr> + <td> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/Unary_plus">단항 플러스</a> + (<code>+</code>) + </td> + <td>단항 연산자입니다. 피연산자가 숫자 타입이 아니면 숫자로 변환을 시도합니다.</td> + <td> + <code>+"3"</code>은 <code>3</code>을 반환합니다.<br /> + <code>+true</code>는 <code>1</code>을 반환합니다. + </td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Exponentiation">거듭제곱</a> (<code>**</code>)</td> + <td><code>base^exponent</code>, 즉 <code>base</code>를 <code>exponent</code>로 거듭제곱한 결과를 반환합니다.</td> + <td> + <code>2 ** 3</code>은 <code>8</code>을 반환합니다.<br /> + <code>10 ** -1</code>은 <code>0.1</code>을 반환합니다. + </td> + </tr> + </tbody> </table> -<h3 id="비트_연산자">비트 연산자</h3> +<h3 id="bitwise_operators">비트 연산자</h3> -<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">비트 연산자</a>는 피연산자를 10진수, 16진수, 8진수처럼 취급하지 않고 32비트의 집합으로 취급합니다. 예를 들면, 10진수의 9는 2진수의 1001로 나타낼 수 있습니다. 비트 단위 연산자는 이진법으로 연산을 수행하지만, JavaScript의 표준 숫자값을 반환합니다..</p> +<p> + 비트 연산자는 피연산자를 10진수, 16진수, 8진수 숫자로 취급하지 않고, 대신 비트 32개의 집합으로 취급합니다. 예를 들어, + 10진수 9는 2진수 1001로 나타냅니다. 비트 연산자는 이러한 이진법 표현에 대해 연산을 수행하지만, 반환할 땐 JavaScript + 표준 숫자로 반환합니다. +</p> -<p>다음의 표는 JavaScript의 비트단위 연산자의 요약입니다.</p> +<p>아래의 표에서 JavaScript 비트 연산자의 요약본을 볼 수 있습니다.</p> <table class="standard-table"> - <caption>비트 연산자</caption> - <thead> - <tr> - <th scope="col">연산자</th> - <th scope="col">사용법</th> - <th scope="col">설명</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND">비트단위 논리곱</a></td> - <td><code>a & b</code></td> - <td>두 피연산자의 각 자리 비트의 값이 둘다 1일 경우 해당하는 자리에 1을 반환합니다.</td> - </tr> - <tr> - <td><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR">비트단위 논리합</a></td> - <td><code>a | b</code></td> - <td>두 피연산자의 각 자리 비트의 값이 둘다 0일 경우 해당하는 자리에 0을 반환합니다.</td> - </tr> - <tr> - <td><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">비트단위 배타적 논리합</a></td> - <td><code>a ^ b</code></td> - <td>두 피연산자의 각 자리 비트의 값이 같을 경우 해당하는 자리에 0을 반환합니다.<br> - [두 피연산자의 각 자리 비트의 값이 다를 경우 해당하는 자리에 1을 반환합니다.]</td> - </tr> - <tr> - <td><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT">비트단위 부정</a></td> - <td><code>~ a</code></td> - <td>피연산자의 각 자리의 비트를 뒤집습니다.</td> - </tr> - <tr> - <td><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Left_shift">왼쪽 시프트</a></td> - <td><code>a << b</code></td> - <td>오른쪽에서 0들을 이동시키면서, a의 이진수의 각 비트를 b비트 만큼 왼쪽으로 이동시킨 값을 반환합니다.</td> - </tr> - <tr> - <td><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Right_shift">부호 전파 오른쪽 시프트</a></td> - <td><code>a >> b</code></td> - <td>사라지는 비트를 버리면서, a의 이진수의 각 비트를 b비트만큼 이동시킨값을 반환합니다.</td> - </tr> - <tr> - <td><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Unsigned_right_shift">부호 없는 오른쪽 시프트</a></td> - <td><code>a >>> b</code></td> - <td>사라지는 비트를 버리고 왼쪽에서 0을 이동시키면서, a의 이진수의 각 비트를 b비트 만큼 이동시킨 값을 반환합니다.</td> - </tr> - </tbody> + <caption> + 비트 연산자 + </caption> + <thead> + <tr> + <th scope="col">연산자</th> + <th scope="col">사용법</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_AND">비트 AND</a> + </td> + <td><code>a & b</code></td> + <td>두 피연산자의 각 자리 비트의 값이 모두 1인 위치에 1을 반환합니다.</td> + </tr> + <tr> + <td> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_OR">비트 OR</a> + </td> + <td><code>a | b</code></td> + <td>두 피연산자의 각 자리 비트의 값이 모두 0인 위치에 0을 반환합니다.</td> + </tr> + <tr> + <td> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR">비트 XOR</a> + </td> + <td><code>a ^ b</code></td> + <td> + 두 피연산자의 각 자리 비트의 값이 서로 같은 위치에 0을 반환합니다.<br /> + [두 피연산자의 각 자리 비트의 값이 서로 다른 위치에 1을 반환합니다.] + </td> + </tr> + <tr> + <td> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_NOT">비트 NOT</a> + </td> + <td><code>~ a</code></td> + <td>피연산자의 각 자리의 비트를 뒤집습니다.</td> + </tr> + <tr> + <td> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/Left_shift">왼쪽 시프트</a> + </td> + <td><code>a << b</code></td> + <td><code>a</code>의 이진 표현을 <code>b</code>만큼 왼쪽으로 이동하고, 오른쪽은 0으로 채웁니다.</td> + </tr> + <tr> + <td> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/Right_shift">오른쪽 시프트</a> + </td> + <td><code>a >> b</code></td> + <td><code>a</code>의 이진 표현을 <code>b</code>만큼 오른쪽으로 이동하고, 1 미만으로 이동한 비트는 버립니다.</td> + </tr> + <tr> + <td> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift">부호 없는 오른쪽 시프트</a> + </td> + <td><code>a >>> b</code></td> + <td> + <code>a</code>의 이진 표현을 <code>b</code>만큼 오른쪽으로 이동하고, 1 미만으로 이동한 비트는 버립니다. 왼쪽은 + 0으로 채웁니다. + </td> + </tr> + </tbody> </table> -<h4 id="Bitwise_Logical_Operators" name="Bitwise_Logical_Operators">비트 논리 연산자</h4> +<h4 id="bitwise_logical_operators">비트 논리 연산자</h4> -<p>개념상으로, 비트단위 논리 연산자는 다음과 같이 동작합니다:</p> +<p>개념적으로, 비트 논리 연산자는 다음과 같이 동작합니다.</p> <ul> - <li>피연산자들은 32비트 정수로 변환되고, 비트(0 과 1)의 연속으로 표현됩니다. 숫자는 32비트가 넘는 경우 가장 중요한(왼쪽) 비트부터 제거됩니다. 예를 들면 아래 예처럼 32비트가 넘는 정수는 32비트 정수형으로 변환됩니다: - <pre><code>변환전: 11100110111110100000000000000110000000000001 -변환수: 10100000000000000110000000000001</code></pre> - </li> - <li>처음 피연산자의 각 비트는 두번째 피연산자의 해당하는 비트와 짝지어집니다: 첫번째 비트는 첫번째 비트에, 두번째 비트는 두번째 비트에, 이런식으로 쭉.</li> - <li>연산자는 각 비트 묶음에 적용되고, 결과는 조립된 비트입니다.</li> + <li> + 두 피연산자를 32비트 정수로 변환해서 비트(0 과 1)의 연속으로 표현합니다. 숫자가 32비트를 초과할 경우 가장 큰 + 비트부터 버립니다. 다음은 32비트가 넘는 정수의 변환 예제입니다. + <pre> +전: 1110 0110 1111 1010 0000 0000 0000 0110 0000 0000 0001 +후: 1010 0000 0000 0000 0110 0000 0000 0001 +</pre + > + </li> + <li> + 왼쪽 피연산자의 각 비트와 오른쪽 피연산자의 각 비트를 순서대로 쌍으로 만듭니다. 즉, 첫 비트는 첫 비트와, 두 번째 + 비트는 두 번째 비트와, ... 32번째 비트는 32번째 비트와 짝을 짓습니다. + </li> + <li>연산자를 각각의 비트 쌍에 대해 적용한 결과를 비트 단위로 구축합니다.</li> </ul> -<p>예를 들면, 9의 이진표현은 1001이고, 15의 이진표현은 1111입니다. 따라서, 비트단위 연산자가 이 값들에 적용될때, 결과는 다음과 같습니다:</p> +<p> + 예를 들어, 9의 이진 표현은 1001이고, 15의 이진 표현은 1111입니다. 비트 연산자를 이 두 값에 적용했을 때의 결과는 다음과 같습니다. +</p> <table class="standard-table"> - <caption>비트 연산자 예제</caption> - <thead> - <tr> - <th scope="col">표현</th> - <th scope="col">결과</th> - <th scope="col">이진법 설명</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>15 & 9</code></td> - <td><code>9</code></td> - <td><code>1111 & 1001 = 1001</code></td> - </tr> - <tr> - <td><code>15 | 9</code></td> - <td><code>15</code></td> - <td><code>1111 | 1001 = 1111</code></td> - </tr> - <tr> - <td><code>15 ^ 9</code></td> - <td><code>6</code></td> - <td><code>1111 ^ 1001 = 0110</code></td> - </tr> - <tr> - <td><code>~15</code></td> - <td><code>-16</code></td> - <td><code>~</code><code>00000000...</code><code>00001111 = </code><code>1111</code><code>1111</code><code>...</code><code>11110000</code></td> - </tr> - <tr> - <td><code>~9</code></td> - <td><code>-10</code></td> - <td><code>~</code><code>00000000</code><code>...</code><code>0000</code><code>1001 = </code><code>1111</code><code>1111</code><code>...</code><code>1111</code><code>0110</code></td> - </tr> - </tbody> + <caption> + 비트 연산자 예제 + </caption> + <thead> + <tr> + <th scope="col">표현식</th> + <th scope="col">결과</th> + <th scope="col">이진법 설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>15 & 9</code></td> + <td><code>9</code></td> + <td><code>1111 & 1001 = 1001</code></td> + </tr> + <tr> + <td><code>15 | 9</code></td> + <td><code>15</code></td> + <td><code>1111 | 1001 = 1111</code></td> + </tr> + <tr> + <td><code>15 ^ 9</code></td> + <td><code>6</code></td> + <td><code>1111 ^ 1001 = 0110</code></td> + </tr> + <tr> + <td><code>~15</code></td> + <td><code>-16</code></td> + <td><code>~ 0000 0000 ... 0000 1111 = 1111 1111 ... 1111 0000</code></td> + </tr> + <tr> + <td><code>~9</code></td> + <td><code>-10</code></td> + <td><code>~ 0000 0000 ... 0000 1001 = 1111 1111 ... 1111 0110</code></td> + </tr> + </tbody> </table> -<p>모든 32비트가 비트단위 부정연산자를 통해 뒤집히고, 가장 의미있는(가장 왼쪽의) 비트가 1인 값들이 음수(2의 보수 표기법)로 표현되는것에 주목하세요 . ~x 의 평가 값은 -x -1의 평가값과 동일합니다.</p> - -<h4 id="Bitwise_Shift_Operators" name="Bitwise_Shift_Operators">비트 시프트 연산자</h4> - -<p>비트 단위 연산자는 2개의 피연산자를 가집니다: 첫번째는 이동될 수치이고, 두번째는 첫번째 피연산자가 이동될 비트 자리수를 명시합니다. 비트 이동 연산의 방향은 연산자의 사용에 의해 조종됩니다.</p> - -<p>이동 연산자는 피연산자를 32비트의 정수로 변환하고, 왼쪽의 피연산자와 같은 형태를 반환합니다.</p> - -<p>이동 연산자는 다음의 표에 나열되었습니다.</p> - -<table class="fullwidth-table"> - <caption>비트 시프트 연산자</caption> - <thead> - <tr> - <th scope="col">연산자</th> - <th scope="col">설명</th> - <th scope="col">예제</th> - </tr> - </thead> - <tbody> - <tr> - <td>왼쪽 시프트<br> - (<code><<</code>)</td> - <td>이 연산자는 첫번째 피연산자를 특정한 수의 비트를 왼쪽으로 이동시킵니다. 왼쪽으로 초과되어 이동되는 비트들은 버려집니다. 오른쪽으로부터 0이 이동됩니다.</td> - <td><code>9<<2</code> yields 36, because 1001 shifted 2 bits to the left becomes 100100, which is 36.</td> - </tr> - <tr> - <td>부호 전파 오른쪽 시프트(<code>>></code>)</td> - <td>이 연산자는 첫번째 피연산자를 특정한 수의 비트를 오른쪽으로 이동시킵니다. 오른쪽으로 초과되어 이동되는 비트들은 버려집니다. 왼쪽으로부터 제일 왼쪽의 비트 값이 이동됩니다.</td> - <td><code>9>>2</code> yields 2, because 1001 shifted 2 bits to the right becomes 10, which is 2. Likewise, <code>-9>>2</code> yields -3, because the sign is preserved.</td> - </tr> - <tr> - <td>부호 없는 오른쪽 시프트(<code>>>></code>)</td> - <td>이 연산자는 첫번째 피연산자를 특정한 수의 비트를 오른쪽으로 이동시킵니다. 오른쪽으로 초과되어 이동되는 비트들은 버려집니다. 왼쪽으로부터 0이 이동됩니다 .</td> - <td><code>19>>>2</code> yields 4, because 10011 shifted 2 bits to the right becomes 100, which is 4. For non-negative numbers, zero-fill right shift and sign-propagating right shift yield the same result.</td> - </tr> - </tbody> +<p> + 참고로, 비트 NOT 연산자를 사용하면 32개의 비트를 모두 반전하는데, 가장 큰 (맨 왼쪽) 비트가 1이면 음수를 나타냅니다(2의 + 보수 표현법). <code>~x</code>는 <code>-x - 1</code>과 같은 값으로 평가됩니다. +</p> + +<h4 id="bitwise_shift_operators">비트 시프트 연산자</h4> + +<p> + 비트 시프트 연산자는 시프트를 적용할 값과, 시프트할 자릿수를 피연산자로 받습니다. 시프트 방향은 사용하는 연산자에 따라 + 다릅니다. +</p> + +<p> + 시프트 연산자는 피연산자를 32비트 정수로 변환하고, 결과 값을 {{jsxref("Number")}}나 {{jsxref("BigInt")}}로 반환합니다. + 정확히는, 왼쪽 피연산자가 <code>BigInt</code>면 <code>BigInt</code>를 반환하고, 그 외에는 <code>Number</code>를 + 반환합니다. +</p> + +<p>아래의 표에서 시프트 연산자의 종류를 볼 수 있습니다.</p> + +<table class="standard-table"> + <caption> + 비트 시프트 연산자 + </caption> + <thead> + <tr> + <th scope="col">연산자</th> + <th scope="col">설명</th> + <th scope="col">예제</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/Left_shift">왼쪽 시프트 (<code><<</code>)</a> + </td> + <td> + 왼쪽 피연산자를 오른쪽 피연산자만큼 왼쪽으로 시프트합니다. 왼쪽으로 넘치는 비트는 버리고, 오른쪽을 0으로 + 채웁니다. + </td> + <td><code>9<<2</code>는, 1001을 왼쪽으로 2번 시프트하면 100100이므로 36입니다.</td> + </tr> + <tr> + <td> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/Right_shift">오른쪽 시프트 (<code>>></code>)</a> + </td> + <td> + 왼쪽 피연산자를 오른쪽 피연산자만큼 오른쪽으로 시프트합니다. 오른쪽으로 넘치는 비트는 버리고, 왼쪽은 제일 큰 + 비트의 값으로 채웁니다. + </td> + <td> + <code>9>>2</code>는, 1001을 오른쪽으로 2번 시프트하면 10이므로 2입니다. 마찬가지로 + <code>-9>>2</code>는, 부호를 유지하므로 -3을 반환합니다. + </td> + </tr> + <tr> + <td> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift" + >부호 없는 오른쪽 시프트 (<code>>>></code>)</a + > + </td> + <td> + 왼쪽 피연산자를 오른쪽 피연산자만큼 오른쪽으로 시프트합니다. 오른쪽으로 넘치는 비트는 버리고, 왼쪽은 0으로 + 채웁니다. + </td> + <td> + <code>19>>>2</code>는, 10011을 오른쪽으로 2번 시프트하면 100이므로 4입니다. 양의 수에 대해서는 오른쪽 + 시프트와 부호 없는 오른쪽 시프트 둘 다 같은 결과를 반환합니다. + </td> + </tr> + </tbody> </table> -<h3 id="논리_연산자">논리 연산자</h3> - -<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/Logical_Operators">논리 연산자</a>는 보통 부울 값과 사용됩니다; 부울 값들과 사용될때, 연산자는 부울값을 반환합니다. <code>그러나,&& 과 </code><code>||</code> 연산자는 실제로 명시된 피연자들 중 하나를 반환합니다. 따라서, 만약 이 연산자들이 부울 값이 아닌 값들과 함께 쓰였을때, 그들은 부울 값이 아닌 값을 반환할지도 모릅니다. 논리 연산자들은 다음의 표에서 설명됩니다.</p> - -<table class="fullwidth-table"> - <caption>논리 연산자</caption> - <tbody> - <tr> - <th>연산자</th> - <th>구문</th> - <th>설명</th> - </tr> - <tr> - <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND">논리 AND</a> (<code>&&</code>)</td> - <td><code><em>expr1</em> && <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><a href="/ko/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR">논리 OR</a> (<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><a href="/ko/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">논리 NOT</a> (<code>!</code>)</td> - <td><code>!<em>expr</em></code></td> - <td>단일 피연산자를 <code>true</code>로 변환할 수 있으면 <code>false</code>를 반환합니다. 그렇지 않으면 <code>true</code>를 반환합니다.</td> - </tr> - </tbody> +<h3 id="logical_operators">논리 연산자</h3> + +<p> + 논리 연산자는 보통 불리언(논리) 값과 함께 사용해서 불리언 값을 반환합니다. 그러나 + <code>&&</code>와 <code>||</code> 연산자는 사실 두 피연산자 중 하나를 반환하는 것으로, 만약 둘 중 하나가 + 불리언 값이 아니라면 논리 연산자의 반환 값도 불리언 값이 아닐 수 있습니다. 아래의 표에서 논리 연산자의 설명을 볼 수 + 있습니다. +</p> + +<table class="standard-table"> + <caption> + 논리 연산자 + </caption> + <tbody> + <tr> + <th scope="col">연산자</th> + <th scope="col">사용법</th> + <th scope="col">설명</th> + </tr> + <tr> + <td> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/Logical_AND">논리 AND</a> + (<code>&&</code>) + </td> + <td> + <code>expr1 && expr2</code> + </td> + <td> + <code>expr1</code>을 <code>false</code>로 변환할 수 있으면 <code>expr1</code>을 반환합니다. 그 외의 경우에는 + <code>expr2</code>를 반환합니다. 따라서 불리언 값과 함께 사용한 경우, 둘 다 참일 때 <code>true</code>를, 그 + 외에는 <code>false</code>를 반환합니다. + </td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Logical_OR">논리 OR</a> (<code>||</code>)</td> + <td><code>expr1 || expr2</code></td> + <td> + <code>expr1</code>을 <code>true</code>로 변환할 수 있으면 <code>expr1</code>을 반환합니다. 그 외의 경우에는 + <code>expr2</code>를 반환합니다. 따라서 불리언 값과 함께 사용한 경우, 둘 중 하나가 참일 때 <code>true</code>를, + 그 외에는 <code>false</code>를 반환합니다. + </td> + </tr> + <tr> + <td> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/Logical_NOT">논리 NOT</a> + (<code>!</code>) + </td> + <td><code>!expr</code></td> + <td> + 단일 피연산자를 <code>true</code>로 변환할 수 있으면 <code>false</code>를 반환합니다. 그 외에는 + <code>true</code>를 반환합니다. + </td> + </tr> + </tbody> </table> -<p><code>false</code>로 변환될 수 있는 표현 예제들은 null, 0, NaN, 빈 문자열 (""), 또는 정의되지 않음 으로 평가될 수 있습니다.</p> +<p> + <code>false</code>로 변환할 수 있는 표현식은 평가 결과가 {{jsxref("null")}}, <code>0</code>, {{jsxref("NaN")}}, 빈 + 문자열(<code>""</code>), {{jsxref("undefined")}}인 경우입니다. +</p> -<p>다음의 코드는 <code>&&</code> (논리 곱) 연산자의 예제를 보여주고 있습니다.</p> +<p>다음 코드는 <code>&&</code> (논리 AND) 연산자의 예제입니다.</p> -<pre class="brush: js">var a1 = true && true; // t && t returns true +<pre class="brush: js"> +var a1 = true && true; // t && t returns true var a2 = true && false; // t && f returns false var a3 = false && true; // f && t returns false var a4 = false && (3 == 4); // f && f returns false @@ -467,9 +734,10 @@ var a6 = false && "Cat"; // f && t returns false var a7 = "Cat" && false; // t && f returns false </pre> -<p>다음의 코드는 || (논리 합) 연산자의 예제를 보여주고 있습니다.</p> +<p>다음 코드는 <code>||</code> (논리 OR) 연산자의 예제입니다.</p> -<pre class="brush: js">var o1 = true || true; // t || t returns true +<pre class="brush: js"> +var o1 = true || true; // t || t returns true var o2 = false || true; // f || t returns true var o3 = true || false; // t || f returns true var o4 = false || (3 == 4); // f || f returns false @@ -478,449 +746,546 @@ var o6 = false || "Cat"; // f || t returns Cat var o7 = "Cat" || false; // t || f returns Cat </pre> -<p>다음의 코드는 ! (논리 부정) 연산자의 예제를 보여주고 있습니다.</p> +<p>다음 코드는 <code>!</code> (논리 NOT) 연산자의 예제입니다.</p> -<pre class="brush: js">var n1 = !true; // !t returns false +<pre class="brush: js"> +var n1 = !true; // !t returns false var n2 = !false; // !f returns true var n3 = !"Cat"; // !t returns false </pre> -<h4 id="Short-Circuit_Evaluation" name="Short-Circuit_Evaluation">단락 평가</h4> +<h4 id="short-circuit_evaluation">단락 평가</h4> -<p>논리 연산자가 왼쪽에서 오른쪽으로 평가될때, 논리연산자는 다음의 규칙을 따라서 "단축 계산"으로 검사됩니다:</p> +<p> + 논리 연산자는 왼쪽에서 오른쪽의 순서로 평가하므로, 다음 규칙을 사용해서 "단락"(short-circuit) 평가가 가능한지 + 판별합니다. +</p> <ul> - <li><code>false</code> && <em>anything</em> 는 false로 단축 계산됩니다.</li> - <li><code>true</code> || <em>anything</em> 는 true로 단축 계산됩니다.</li> + <li> + <code>false && <em>아무거나</em></code + >는 거짓으로 단락 평가합니다. + </li> + <li> + <code>true || <em>아무거나</em></code + >는 참으로 단락 평가합니다. + </li> </ul> -<p>이 논리 규칙들은 이러한 평가가 언제나 정확하다고 보증합니다. <em>위에서 anything</em> 부분은 평가되지 않았고, 어떤 부작용도 아무런 효과를 미치지 못한다는 것에 주목하세요.</p> +<p> + 논리 규칙은 위의 단락 평가가 항상 옳음을 보증합니다. <em>아무거나</em> 부분의 표현식은 평가도 하지 않으므로, 해당 + 표현식에서 유발하게 되는 부수 효과도 전혀 발생하지 않음에 주의하세요. +</p> + +<p> + 참고로 <code>||</code>을 사용한 두 번째 단락 평가의 경우, 최근 코드에서는 새로운 + <a href="/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">널 병합 연산자</a> + (<code>??</code>)를 사용할 수도 있습니다. 널 병합 연산자는 첫 번째 연산자가 "<a href="/ko/docs/Glossary/Nullish" + >널과 유사</a + >"한, 즉 {{jsxref("null")}}이거나 {{jsxref("undefined")}}일 때만 두 번째 피연산자를 반환합니다. <code>''</code>와 + <code>0</code>도 유효한 값이라면 널 병합 연산자가 기본 값을 나타낼 때 더 좋은 선택지입니다. +</p> -<h3 id="문자열_연산자">문자열 연산자</h3> +<h3 id="string_operators">문자열 연산자</h3> -<p>문자열 값으로 사용될 수 있는 비교 연산자에 덧붙여서, 연결 연산자 (+)는 두 문자열 값을 연결하고,두 문자열이 합쳐진 새로운 문자열을 반환합니다.</p> +<p> + 문자열에 사용할 수 있는 비교 연산자들 외에도, 문자열 연결(<code>+</code>) 연산자는 두 문자열의 값을 서로 연결한 새로운 + 문자열을 반환합니다. +</p> <p>예를 들어,</p> -<pre class="brush: js"><code>console.log("my " + "string");</code> // console logs the string <code>"my string"</code>.</pre> +<pre class="brush: js">console.log('나만의 ' + '문자열'); // 콘솔에 "나만의 문자열"을 기록</pre> -<p>복합 할당 연산자인 += 또한 문자열을 연결하는데 사용할 수 있습니다.</p> +<p>단축 할당 연산자인 <code>+=</code> 또한 문자열을 연결결할 때 사용할 수 있습니다.</p> <p>예를 들어,</p> -<pre class="brush: js">var <code>mystring</code> = "alpha"; -<code>mystring += "bet"; // </code>evaluates to "alphabet" and assigns this value to <code>mystring</code>.</pre> +<pre class="brush: js"> +var mystring = '한'; +mystring += '글'; // "한글"로 평가되며, mystring에 "한글"을 할당함 +</pre> -<h3 id="조건_삼항_연산자">조건 (삼항) 연산자</h3> +<h3 id="conditional_ternary_operator">조건 (삼항) 연산자</h3> -<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">조건 연산자</a> 는 JavaScript에서 3개의 항을 사용하는 유일한 연산자 입니다. 조건 연산자는 조건에 따라 2개의 값중 하나를 가질 수 있습니다. 문법은 다음과 같습니다:</p> +<p> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">조건 연산자</a>는 JavaScript에서 세 개의 + 피연산자를 받는 유일한 연산자입니다. 조건 연산자는 주어진 조건에 따라 두 값 중 하나를 반환합니다. 구문은 다음과 + 같습니다. +</p> -<pre class="syntaxbox"><em>조건</em> ? <em>값1</em> : <em>값2</em> -</pre> +<pre class="brush: js">condition ? val1 : val2</pre> -<p><code>만약 조건이 참이라면, 조건 연산자는 값1을 값으로 갖습니다</code>.<code> 그렇지 않은 경우 조건 연산자는 값2을 값으로 갖습니다</code>. 표준 연산자를 사용하는 어디든 조건연산자를 사용할 수 있습니다.</p> +<p> + 만약 <code>condition</code>이 참이라면, 조건 연산자는 <code>val1</code>을 반환하고, 그 외에는 <code>val2</code>를 + 반환합니다. 다른 연산자를 사용할 수 있는 곳이라면 조건 연산자도 사용할 수 있습니다. +</p> <p>에들 들어,</p> -<pre class="brush: js">var status = (age >= 18) ? "adult" : "minor"; +<pre class="brush: js"> +var status = (age >= 18) ? "성인" : "미성년자"; </pre> -<p>이 구문은 age 변수가 18보다 같거나 클때 "adult" 값을 <code>status 변수에 할당합니다</code>. 그렇지 않은 경우, 이 구문은 "minor"값을<code> status</code>변수에 할당합니다.</p> +<p> + 위의 명령문은 <code>age</code>가 18 이상이라면 <code>status</code> 변수에 "성인"을 할당하고, 그렇지 않으면 + "미성년자"를 할당합니다. +</p> -<h3 id="쉼표_연산자">쉼표 연산자</h3> +<h3 id="comma_operator">쉼표 연산자</h3> -<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comma_Operator">쉼표 연산자</a> (<code>,</code>)는 두 피연산자를 평가하고, 마지막 피연산자의 값을 반환합니다. 이 연산자는 주로 <code>for</code> 반복문 안에서 각각의 시간에 복수의 변수들을 갱신하기 위하여 사용합니다.</p> +<p> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/Comma_Operator">쉼표 연산자</a>(<code>,</code>)는 두 피연산자를 + 모두 평가하고, 오른쪽 피연산자의 값을 반환합니다. 쉼표 연산자는 주로 <code>for</code> 반복문 안에서 사용해서 한 번의 + 반복으로 다수의 변수를 변경할 때 사용합니다. 그 외의 상황에 사용하는 것은, 꼭 필요하지 않다면 좋지 않은 코드 스타일로 + 여겨집니다. 대개 쉼표 연산자보다는 두 개의 분리된 명령문을 사용하는 편이 낫습니다. +</p> -<p>예를 들어, a는 각 변에 10개의 원소가 있는 2차원 배열일때, 다음의 코드는 콤마 연산자를 두 변수를 한번에 증가 시키기 위하여 사용하였습니다. 이 코드는 배열의 대각선에 위치한 원소를 출력합니다:</p> +<p> + 쉼표 연산자의 예제로는, <code>a</code>가 2차원 배열로서 10행 10열의 요소를 가지고 있다면, 다음 코드는 쉼표 연산자를 + 사용해서 두 개의 변수를 한꺼번에 업데이트하는 모습을 보입니다. 코드의 실행 결과는 <code>a</code>의 요소를 대각선((0, + 0), (1, 1), (2, 2), ...)으로 출력한 것입니다. +</p> -<pre><code>var x = [0,1,2,3,4,5,6,7,8,9] +<pre class="brush: js"> +var x = [0,1,2,3,4,5,6,7,8,9]; var a = [x, x, x, x, x]; -for (var i = 0, j = 9; i <= j; i++, j--) - console.log('a[' + i + '][' + j + ']= ' + a[i][j]);</code></pre> - -<h3 id="단항_연산자">단항 연산자</h3> - -<p>단항 연산자는 오직 하나의 피연산자를 가지고 연산을합니다.</p> - -<h4 id="delete" name="delete"><code>delete</code></h4> - -<p><code><a href="/ko/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>연산자는 객체, 객체의 속성 또는 배열의 특정한 위치에 있는 객체를 삭제합니다. 문법은 다음과 같습니다:</p> - -<pre class="brush: js">delete objectName; -delete objectName.property; -delete objectName[index]; -delete property; // legal only within a with statement +for (var i = 0, j = 9; i <= j; i++, j--); +// ^ + console.log('a[' + i + '][' + j + ']= ' + a[i][j]) </pre> -<p><code>objectName</code>은 객체의 이름이고, <code>property</code>는 객체에 존재하는 속성이고,<code>index</code>는 배열의 위치를 나타내는 정수입니다.</p> +<h3 id="unary_operators">단항 연산자</h3> -<p>네번째 형태의 경우,객체의 속성을 삭제하기 위하여 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/with">with</a></code> 구문이 있어야만 동작합니다.</p> +<p>단항 연산은 오직 하나의 피연산자만 사용하는 연산입니다.</p> -<p><code>delete</code> 연산자를 <code>var</code> 구문을 사용하지 않고 묵시적으로 만들어진 변수를 삭제할 때 사용할 수 있습니다.</p> +<h4 id="delete"><code>delete</code></h4> -<p>만약 <code>delete</code>연산자의 동작이 성공했다면, delete 연산자는 속성이나, 원소를 <code>undefined</code> 로 설정합니다. <code>delete</code> 연산자는 연산이 수행 가능할때 true값을 반환합니다; 수행이 불가능 할 경우 <code>false</code> 값을 반환합니다.</p> +<p> + <code><a href="/ko/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code + >연산자는 객체의 속성을 삭제합니다. 구문은 다음과 같습니다. +</p> -<pre class="brush: js">x = 42; -var y = 43; -myobj = new Number(); -myobj.h = 4; // create property h -delete x; // returns true (can delete if declared implicitly) -delete y; // returns false (cannot delete if declared with var) -delete Math.PI; // returns false (cannot delete predefined properties) -delete myobj.h; // returns true (can delete user-defined properties) -delete myobj; // returns true (can delete if declared implicitly) +<pre class="brush: js"> +delete object.property; +delete object[propertyKey]; +delete objectName[index]; </pre> -<h5 id="배열의_원소를_삭제하기">배열의 원소를 삭제하기</h5> +<p> + 위의 구문에서, <code>objectName</code>은 객체의 이름이고, <code>property</code>는 객체에 존재하는 속성, + <code>propertyKey</code>는 존재하는 속성을 가리키는 문자열이나 심볼입니다. +</p> -<p>배열의 원소를 삭제할때, 배열의 길이에는 영향을 주지 못합니다. 예를 들어, 만약 <code>a[3]</code>, <code>a[4]를 삭제 했다면</code> <code>a[4]</code> 와 <code>a[3]는 undefined(정의되지 않음)상태로 되어 있습니다</code>.</p> +<p> + <code>delete</code> 연산자가 속성을 성공적으로 삭제한 이후, 해당 속성을 접근하려고 하면 <code>undefined</code>가 + 반환됩니다. <code>delete</code>는 속성을 제거할 수 있는 경우에는 <code>true</code>를 반환하고, 제거할 수 없을 땐 + <code>false</code>를 반환합니다. +</p> -<p><code>delete</code> 연산자가 배열의 한 원소를 삭제하였을때, 그 원소는 배열에 존재하지 않습니다. 다음의 예제에서, <code>trees[3]</code>는 <code>delete 연산자에 의해 제거되었습니다</code>.그러나, <code>trees[3]</code> 는 아직도 다룰수 있고 <code>undefined</code>(정의 되지 않음) 을 반환합니다.</p> +<pre class="brush: js"> +delete Math.PI; // false 반환 (설정 불가한 속성 삭제 불가) -<pre class="brush: js">var trees = ["redwood", "bay", "cedar", "oak", "maple"]; -delete trees[3]; -if (3 in trees) { - // this does not get executed -} +var myobj = {h: 4}; +delete myobj.h; // true 반환 (사용자 정의 속성 삭제 가능) </pre> -<p>만약 배열의 원소가 존재하지만 undefined(정의 되지 않음)값을 가지고 싶으면,<code> delete 연산자 대신 undefined</code> 키워드를 사용하세요. 다음의 예제에서, <code>trees[3]</code> 은 <code>undefined값을 할당받습니다</code>,그러나 배열의 원소는 아직도 존재합니다:</p> +<h5 id="deleting_array_elements">배열의 원소 삭제하기</h5> -<pre class="brush: js">var trees = ["redwood", "bay", "cedar", "oak", "maple"]; -trees[3] = undefined; -if (3 in trees) { - // this gets executed -} -</pre> +<p> + 배열도 평범한 객체이므로, 기술적으로는 <code>delete</code>를 사용해서 요소를 제거하는 것이 가능합니다. 그러나 이는 + 좋은 방법이 아니므로 피해야 합니다. 배열의 속성을 제거해도 배열 길이 속성은 영향을 받지 않으며, 다른 요소의 인덱스도 + 그대로 남아있습니다. 이런 동작을 원한다면 단순히 값을 <code>undefined</code>로 덮어쓰는 편이 훨씬 낫습니다. 실제로 + 배열을 변형하고자 하면 {{jsxref("Array.splice", "splice")}}와 같은 다양한 배열 메서드를 사용하세요. +</p> -<h4 id="typeof" name="typeof"><code>typeof</code></h4> +<h4 id="typeof"><code>typeof</code></h4> -<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/typeof"><code>typeof</code> 연산자</a>는 다음과 같은 방법으로 사용됩니다:</p> +<p> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/typeof"><code>typeof</code> 연산자</a>는 다음과 같은 방법으로 + 사용합니다. +</p> -<pre class="syntaxbox">typeof 피연산자 -typeof (피연산자) +<pre class="brush: js"> +typeof operand +typeof (operand) </pre> -<p><code>typeof</code> 연산자 피연산자의 타입을 나타내는 문자열을 반환합니다. <code>피연산자</code> 는 어떤 타입인지 반환될 문자열, 변수, 키워드,또는 객체입니다 . 괄호 표현은 선택사항입니다.</p> +<p> + <code>typeof</code> 연산자는 평가 전의 피연산자 타입을 나타내는 문자열을 반환합니다. <code>operand</code>는 문자열, + 변수, 키워드, 객체 등 타입을 알아낼 값입니다. 주위의 괄호는 선택 사항입니다. +</p> -<p>다음의 변수를 정의했다고 가정하세요:</p> +<p>다음과 같은 변수를 가정하겠습니다.</p> -<pre class="brush: js">var myFun = new Function("5 + 2"); +<pre class="brush: js"> +var myFun = new Function("5 + 2"); var shape = "round"; var size = 1; var foo = ['Apple', 'Mango', 'Orange']; var today = new Date(); </pre> -<p><code>typeof</code> 연산자는 이 변수들에 대하여 다음과 같은 값을 반환합니다:</p> - -<pre class="brush: js">typeof myFun; // returns "function" -typeof shape; // returns "string" -typeof size; // returns "number" -typeof foo; // returns "object" -typeof today; // returns "object" -typeof dontExist; // returns "undefined" -</pre> - -<p><code>typeof</code> 연산자는 키워드<code>true</code> 와 <code>null</code>에 대하여 다음과 같은 결과를 반환합니다:</p> +<p><code>typeof</code> 연산자는 위의 변수들에 대해서 다음과 같은 값을 반환합니다.</p> -<pre class="brush: js">typeof true; // returns "boolean" -typeof null; // returns "object" +<pre class="brush: js"> +typeof myFun; // "function" 반환 +typeof shape; // "string" 반환 +typeof size; // "number" 반환 +typeof foo; // "object" 반환 +typeof today; // "object" 반환 +typeof dontExist; // "undefined" 반환 </pre> -<p>typeof 연산자는 숫자와 문자열에 대하여 다음과 같은 결과를 반환합니다:</p> +<p>키워드 <code>true</code>와 <code>null</code>에 대해서는 다음과 같은 결과를 반환합니다.</p> -<pre class="brush: js">typeof 62; // returns "number" -typeof 'Hello world'; // returns "string" +<pre class="brush: js"> +typeof true; // "boolean" 반환 +typeof null; // "object" 반환 </pre> -<p><code>typeof</code> 연산자는 객체의 속성에 대하여 속성이 갖고있는 타입의 값을 반환합니다.</p> +<p>숫자와 문자열에서는 다음과 같은 결과를 반환합니다.</p> -<pre class="brush: js">typeof document.lastModified; // returns "string" -typeof window.length; // returns "number" -typeof Math.LN2; // returns "number" +<pre class="brush: js"> +typeof 62; // "number" 반환 +typeof 'Hello world'; // "string" 반환 </pre> -<p><code>typeof</code> 연산자는 메소드와 함수들에 대하여 다음과 같은 결과를 반환합니다:</p> +<p>객체의 속성에 사용하면 속성이 갖고 있는 값의 타입을 반환합니다.</p> -<pre class="brush: js">typeof blur; // returns "function" -typeof eval; // returns "function" -typeof parseInt; // returns "function" -typeof shape.split; // returns "function" +<pre class="brush: js"> +typeof document.lastModified; // "string" 반환 +typeof window.length; // "number" 반환 +typeof Math.LN2; // "number" 반환 </pre> -<p><code>typeof 연산자는</code> 미리 정의된 객체에 대하여 다음과 같은 결과를 반환합니다:</p> +<p>메서드와 함수에 대해선 다음과 같은 결과를 반환합니다.</p> -<pre class="brush: js">typeof Date; // returns "function" -typeof Function; // returns "function" -typeof Math; // returns "object" -typeof Option; // returns "function" -typeof String; // returns "function" +<pre class="brush: js"> +typeof blur; // "function" 반환 +typeof eval; // "function" 반환 +typeof parseInt; // "function" 반환 +typeof shape.split; // "function" 반환 </pre> -<h4 id="void" name="void"><code>void</code></h4> +<p>사전 정의된 객체에 대해선 다음과 같은 결과를 반환합니다.</p> -<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/void"><code>void</code> 연산자</a> 는 다음과 같은 방법들로 사용됩니다:</p> - -<pre class="syntaxbox">void (식) -void 식 +<pre class="brush: js"> +typeof Date; // "function" 반환 +typeof Function; // "function" 반환 +typeof Math; // "object" 반환 +typeof Option; // "function" 반환 +typeof String; // "function" 반환 </pre> -<p><code>void</code> 연산자는 값을 반환하지 않고 평가되도록 명시합니다. <code>식</code>은 JavaScript의 평가될 표현 입니다. 괄호 로 둘러싸는것은 선택사항이지만, 괄호로 둘러싸는게 좋은 사용방법입니다.</p> - -<p><code>void</code> 연산자를 표현을 하이퍼링크 에서 명시할때 사용할 수 있습니다 . 구문은 실행이 되나, 현재의 문서에는 로드되지 않습니다.</p> +<h4 id="void"><code>void</code></h4> -<p>다음의 코드는 사용자가 클릭을 하였을때 아무 일도 안하는 하이퍼링크를 생성합니다. 사용자가 클릭을 했을때, <code>void(0)</code>는<code> JavaScript에서 아무런 영향을 줄 수 없는 undefined(정의 되지않음)</code>으로 평가됩니다.</p> +<p> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/void"><code>void</code> 연산자</a>는 다음과 같이 사용합니다. +</p> -<pre class="brush: html"><a href="javascript:void(0)">Click here to do nothing</a> +<pre class="brush: js"> +void (expression) +void expression </pre> -<p>다음의 코드는 사용자가 클릭을 하였을때, 폼을 제출하는 하이퍼링크를 생성합니다.</p> +<p> + <code>void</code> 연산자는 표현식을 평가할 때 값을 반환하지 않도록 지정합니다. <code>expression</code>은 평가할 + JavaScript 표현식입니다. 주위 괄호는 선택 사항이지만, 사용하면 좋습니다. +</p> -<pre class="brush: html"><a href="javascript:void(document.form.submit())"> -Click here to submit</a></pre> +<h3 id="relational_operators">관계 연산자</h3> -<h3 id="관계_연산자">관계 연산자</h3> - -<p>관계 연산자는 피연산자들을 비교하고 <code>,비교의 참 여부에 기반하여 부울 값을 반환합니다</code>.</p> +<p>관계 연산자는 피연산자를 서로 비교하고, 비교 결과가 참인지에 따라 불리언 값을 반환합니다.</p> <h4 id="in"><code>in</code></h4> -<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> 연산자</a>는 객체에 특정한 속성이 있는경우 true를 반환합니다. 구문은 다음과 같습니다:</p> +<p> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> 연산자</a>는 지정한 속성이 지정한 객체에 + 존재할 경우 <code>true</code>를 반환합니다. 구문은 다음과 같습니다. +</p> -<pre class="brush: js">propNameOrNumber in objectName -</pre> +<pre class="brush: js">propNameOrNumber in objectName</pre> -<p><code>propNameOrNumber</code>는 속성의 이름을 나타내는 문자열 또는 배열의 인덱스를 나타내는 숫자이고, <code>objectName은 객체의 이름입니다</code>.</p> +<p> + <code>propNameOrNumber</code>는 속성이나 배열 인덱스를 나타내는 문자열, 숫자, 심볼 표현식이며 + <code>objectName</code>은 객체의 이름입니다. +</p> -<p>다음의 예제는 <code>in</code> 연산자의 사용 예를 보여줍니다.</p> +<p>다음 코드는 <code>in</code> 연산자의 예제입니다.</p> -<pre class="brush: js">// Arrays +<pre class="brush: js"> +// 배열 var trees = ["redwood", "bay", "cedar", "oak", "maple"]; -0 in trees; // returns true -3 in trees; // returns true -6 in trees; // returns false -"bay" in trees; // returns false (you must specify the index number, - // not the value at that index) -"length" in trees; // returns true (length is an Array property) - -// built-in objects -"PI" in Math; // returns true +0 in trees; // true 반환 +3 in trees; // true 반환 +6 in trees; // false 반환 +"bay" in trees; // false 반환 (인덱스에 위치한 값이 아니라 + // 인덱스 자체를 지정해야 함) +"length" in trees; // true 반환 (length는 Array의 속성임) + +// 내장 객체 +"PI" in Math; // true 반환 var myString = new String("coral"); -"length" in myString; // returns true +"length" in myString; // true 반환 -// Custom objects +// 사용자 정의 객체 var mycar = { make: "Honda", model: "Accord", year: 1998 }; -"make" in mycar; // returns true -"model" in mycar; // returns true +"make" in mycar; // true 반환 +"model" in mycar; // true 반환 </pre> -<h4 id="instanceof" name="instanceof"><code>instanceof</code></h4> +<h4 id="instanceof"><code>instanceof</code></h4> -<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/instanceof"><code>instanceof</code> 연산자</a>는 명시된 객체가 명시된 객체형인 경우 true를 반환합니다. 구문은 다음과 같습니다:</p> +<p> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/instanceof"><code>instanceof</code> 연산자</a>는 지정한 객체가 + 지정한 객체 타입에 속하면 <code>true</code>를 반환합니다. +</p> -<pre class="syntaxbox">objectName instanceof objectType -</pre> +<pre class="brush: js">objectName instanceof objectType</pre> -<p><code>objectName은 objectType 과 비교할 객체의 이름이고</code>, <code>objectType</code> 은 {{jsxref("Date")}} 또는 {{jsxref("Array")}}과 같은 객체형 입니다.</p> +<p> + <code>objectName</code>은 <code>objectType</code>과 비교할 객체의 이름이고, <code>objectType</code>은 + {{jsxref("Date")}}, {{jsxref("Array")}}와 같은 객체 타입입니다. +</p> -<p><code>instanceof</code> 연산자를 동작시간에 객체의 형태를 확인할 필요가 있을때 사용하세요. 예를 들어, 예외가 발생하였을때, 던저진 예외의 형태에 따라 예외를 처리하는 코드로 나뉘게 할 수 있습니다.</p> +<p> + 런타임에 객체의 타입을 확인할 필요가 있으면 <code>instanceof</code> 연산자를 사용하세요. 예컨대 예외 처리 시에, 잡아낸 + 예외의 타입에 따라 다른 방법으로 처리할 수 있습니다. +</p> -<p>예를 들어, 다음의 코드는<code>instanceof</code> 연산자를<code>theDay 객체가</code> <code>Date</code> 형의 객체인지 알아내는 코드입니다. <code>theDay</code>객체는 <code>Date</code> 형의 객체이기 때문에, <code>if</code> 문 안의 명령문들은 실행됩니다.</p> +<p> + 다음의 코드는 <code>instanceof</code> 연산자를 사용해서 <code>theDay</code> 객체가 <code>Date</code> 객체인지 알아내는 + 예제입니다. <code>theDay</code> 객체는 <code>Date</code> 객체이기 때문에, <code>if</code> 명령문 안의 내용이 + 실행됩니다. +</p> -<pre class="brush: js">var theDay = new Date(1995, 12, 17); +<pre class="brush: js"> +var theDay = new Date(1995, 12, 17); if (theDay instanceof Date) { - // statements to execute + // 실행할 명령문 } </pre> -<h3 id="연산자_우선순위">연산자 우선순위</h3> +<h3 id="Operator_precedence">연산자 우선순위</h3> -<p>연산자의 우선순위는 구문을 수행할 때 수행될 순서를 결정합니다. 괄호를 통하여 우선순위를 재정의 할 수 있습니다.</p> +<p> + 연산자의 우선순위는 표현식을 평가할 때 연산자를 적용하는 순서를 결정합니다. 괄호를 사용하면 우선순위를 바꿀 수 + 있습니다. +</p> -<p>다음의 표는 우선순위가 높은 순서부터 낮은 순서까지, 연산자의 우선순위에 대하여 설명하고 있습니다.</p> +<p>아래 표는 우선순위가 높은 순서에서 낮은 순서로 연산자를 나열합니다.</p> <table class="standard-table"> - <caption>연산자 우선순위</caption> - <thead> - <tr> - <th scope="col">Operator type</th> - <th scope="col">Individual operators</th> - </tr> - </thead> - <tbody> - <tr> - <td>맴버 연산자</td> - <td><code>. []</code></td> - </tr> - <tr> - <td>객체 호출/생성 연산자</td> - <td><code>() new</code></td> - </tr> - <tr> - <td>부정/증가 연산자</td> - <td><code>! ~ - + ++ -- typeof void delete</code></td> - </tr> - <tr> - <td>곱셈/나눗셈 연산자</td> - <td><code>* / %</code></td> - </tr> - <tr> - <td>덧셈/뺄셈 연산자</td> - <td><code>+ -</code></td> - </tr> - <tr> - <td>비트단위 시프트 연산자</td> - <td><code><< >> >>></code></td> - </tr> - <tr> - <td>관계 연산자</td> - <td><code>< <= > >= in instanceof</code></td> - </tr> - <tr> - <td>같음 비교 연산자</td> - <td><code>== != === !==</code></td> - </tr> - <tr> - <td>비트 단위 논리곱 연산자</td> - <td><code>&</code></td> - </tr> - <tr> - <td>비트단위 배타적 논리합 연산자</td> - <td><code>^</code></td> - </tr> - <tr> - <td>비트단위 논리합 연산자</td> - <td><code>|</code></td> - </tr> - <tr> - <td>논리 곱 연산자</td> - <td><code>&&</code></td> - </tr> - <tr> - <td>논리 합 연산자</td> - <td><code>||</code></td> - </tr> - <tr> - <td>조건 연산자</td> - <td><code>?:</code></td> - </tr> - <tr> - <td>할당 연산자</td> - <td><code>= += -= *= /= %= <<= >>= >>>= &= ^= |=</code></td> - </tr> - <tr> - <td>콤마 연산자</td> - <td><code>,</code></td> - </tr> - </tbody> + <caption> + 연산자 우선순위 + </caption> + <thead> + <tr> + <th scope="col">연산자 유형</th> + <th scope="col">개별 연산자</th> + </tr> + </thead> + <tbody> + <tr> + <td>맴버 접근</td> + <td><code>. []</code></td> + </tr> + <tr> + <td>인스턴스 호출/생성</td> + <td><code>() new</code></td> + </tr> + <tr> + <td>증감</td> + <td><code>! ~ - + ++ -- typeof void delete</code></td> + </tr> + <tr> + <td>곱하기/나누기 연산자</td> + <td><code>* / %</code></td> + </tr> + <tr> + <td>더하기/빼기 연산자</td> + <td><code>+ -</code></td> + </tr> + <tr> + <td>비트 시프트</td> + <td><code><< >> >>></code></td> + </tr> + <tr> + <td>관계</td> + <td><code>< <= > >= in instanceof</code></td> + </tr> + <tr> + <td>동등/일치</td> + <td><code>== != === !==</code></td> + </tr> + <tr> + <td>비트 AND</td> + <td><code>&</code></td> + </tr> + <tr> + <td>비트 XOR</td> + <td><code>^</code></td> + </tr> + <tr> + <td>비트 OR</td> + <td><code>|</code></td> + </tr> + <tr> + <td>논리 AND</td> + <td><code>&&</code></td> + </tr> + <tr> + <td>논리 OR</td> + <td><code>||</code></td> + </tr> + <tr> + <td>조건</td> + <td><code>?:</code></td> + </tr> + <tr> + <td>할당</td> + <td> + <code>= += -= *= /= %= <<= >>= >>>= &= ^= |= &&= ||= ??= </code> + </td> + </tr> + <tr> + <td>쉼표</td> + <td><code>,</code></td> + </tr> + </tbody> </table> -<p>각 각의 연산자에 대한 추가적인 상세사항에 대해 연결된, 더 자세한 표를 보고 싶으면, <a href="/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table">JavaScript Reference</a>에서 보실 수 있습니다.</p> +<p> + 각각의 연산자로 향하는 링크를 포함한 더 자세한 표는 + <a href="/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#ㅅable">JavaScript 참고서</a>에서 찾을 수 + 있습니다. +</p> -<h2 id="표현식">표현식</h2> +<h2 id="expressions">표현식</h2> -<p><span>코드 값으로 확인된 표현은 그 어떤 타당한 단위입니다.</span></p> +<p><b>표현식</b>이란 값으로 이행하는 임의의 유효한 코드 단위를 말합니다.</p> -<p>개념적으로, 2가지의 유형이 있습니다. 첫번째는, 변수에 값을 할당시키는 것, 두번째는 단순히 값을 갖는것이 있습니다.</p> +<p> + 구문적으로 유효한 표현식은 모두 어떤 값으로 이행하지만, 개념적으로는 두 가지로 나뉩니다. 하나는 부수 효과가 있는(예시: + 변수에 값을 할당) 표현식이고, 다른 하나는 평가하면 어떤 값으로 이행하는 표현식입니다. +</p> -<p>x = 7이란 표현은 첫번째 유형입니다. 이 표현은 x에다가 7을 할당시키기위해 =연산자를 사용합니다. 그 표현자체 7로 계산됩니다.</p> +<p> + <code>x = 7</code>은 앞의 범주에 포함됩니다. 이 표현식은 <code>=</code> 연산자를 사용해서 값 7을 <code>x</code> 변수에 + 할당합니다. 표현식 자체도 7로 평가됩니다. +</p> -<p>3 + 4란 코드는 두번째 표현방식의 예입니다. 이 표현은 7이라는 결과로 할당하는것없이 3과 4를 더하기위해 +연산자를 사용합니다.</p> +<p> + <code>3 + 4</code>는 뒤쪽 범주로 들어갑니다. 이 표현식은 <code>+</code> 연산자를 사용해서 3과 4를 더하지만, 결과인 7을 + 변수에 할당하지는 않습니다. +</p> -<p>JavaScript는 아래 표현범주를 따릅니다.</p> +<p>JavaScript의 표현식은 다음과 같은 범주로 구분할 수 있습니다.</p> <ul> - <li>산수 : 예를 들어 3.14159를 숫자로 평가합니다. (일반적으로 <a href="#산술_연산자">산술 연산자</a>를 사용합니다.)</li> - <li>문자열 : 예를 들어 "Fred"나 "234"를 문자열로 평가합니다. (일반적으로 <a href="#문자열_연산자">문자열 연산자</a>를 사용합니다.)</li> - <li>논리 : 참이나 거짓으로 평가합니다. (종종 <a href="#논리_연산자">논리 연산자</a>를 수반합니다.)</li> - <li>일차식 : JavaScript에서 기본핵심어와 일반적인 표현입니다.</li> - <li>좌변식 : 좌변값들이 배치의 목적입니다.</li> + <li>산수: 숫자, 예컨대 3.14159로 평가됩니다. 보통 <a href="#arithmetic_operators">산술 연산자</a>를 사용합니다.</li> + <li> + 문자열: 문자열, 예컨대 "프레디", "234" 등으로 평가됩니다. 보통 <a href="#string_operators">문자열 연산자</a>를 + 사용합니다. + </li> + <li>논리: 참이나 거짓으로 평가됩니다. 대개 <a href="#logical_operators">논리 연산자</a>를 포함합니다.</li> + <li>일차 표현식: JavaScript의 키워드와 일반 표현식입니다.</li> + <li>좌변 표현식: 좌변 값은 할당의 목적지입니다.</li> </ul> -<h3 id="중요한_표현식">중요한 표현식</h3> +<h3 id="primary_expressions">일차 표현식</h3> -<p>JavaScript에서의 기본적인 키워드와 일반적인 표현식입니다.</p> +<p>JavaScript의 키워드와 일반 표현식입니다.</p> <h4 id="this"><code>this</code></h4> -<p>현재 객체를 참조하는 데 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code> 키워드</a>를 사용합니다. 일반적으로, this는 메소드에서 호출하는 객체를 참조합니다. 점(.)이나 괄호([])로 접근할 수 있습니다.</p> +<p> + 현재 객체를 참조하려면 + <a href="/ko/docs/Web/JavaScript/Reference/Operators/this"><code>this</code> 키워드</a>를 사용하세요. 일반적으로 + <code>this</code>는 메서드의 호출 객체를 참조합니다. 다음과 같이, <code>this</code>를 점이나 대괄호 표기법과 함께 + 사용하세요. +</p> -<pre class="syntaxbox">this["propertyName"] +<pre class="brush: js"> +this['propertyName'] this.propertyName </pre> -<p>어떤 객체의 최솟값 최댓값에 대하여, value 프로퍼티가 유효범위에 속하는지를 평가하는 validate 함수를 호출했다고 가정해봅시다.</p> +<p> + 최대와 최소 값을 받아서, 어떤 객체의 <code>value</code> 속성 유효성을 검증하는 <code>validate</code>라는 함수를 + 가정해봅시다. +</p> -<pre class="brush: js">function validate(obj, lowval, hival){ +<pre class="brush: js"> +function validate(obj, lowval, hival) { if ((obj.value < lowval) || (obj.value > hival)) console.log("Invalid Value!"); } </pre> -<p>다음과 같이 각 form 요소의 onChange 이벤트 처리기에서 validate 함수를 호출할 수 있습니다. this 일차식을 사용하여 form 요소(element)를 전달할 수 있습니다:</p> +<p> + 다음과 같이, 각 양식 요소의 {{domxref("GlobalEventHandlers/onchange", "onchange")}} 이벤트 처리기에서 + <code>validate</code>를 호출할 때 <code>this</code>를 사용해서 양식 요소의 참조를 제공할 수 있습니다. +</p> -<pre class="brush: html"><p>Enter a number between 18 and 99:</p> -<input type="text" name="age" size=3 onChange="validate(this, 18, 99);"> +<pre class="brush: html"> +<p>18과 99 사이의 수를 입력:</p> +<input type="text" name="age" size=3 onchange="validate(this, 18, 99);"> </pre> -<h4 id="그룹_연산자">그룹 연산자</h4> +<h4 id="grouping_operator">그룹 연산자</h4> -<p>그룹연산자 ()는 표현식 평가의 우선순위를 조절합니다. 예를 들어, 곱셈과 나눗셈 연산을 무시하고, 우선 덧셈 뺄셈 연산을 먼저 수행할 수도 있습니다.</p> +<p> + 그룹연산자 <code>()</code>는 표현식 평가의 우선순위를 조절합니다. 예를 들어, 곱하기와 나누기보다 더하기와 빼기 연산을 + 먼저 수행할 수 있습니다. +</p> -<pre class="brush:js">var a = 1; +<pre class="brush:js"> +var a = 1; var b = 2; var c = 3; -// default precedence -a + b * c // 7 -// evaluated by default like this -a + (b * c) // 7 +// 기본 우선순위에서는 +a + b * c; // 7 +// 이런 순서로 평가함 +a + (b * c); // 7 -// now overriding precedence -// addition before multiplication -(a + b) * c // 9 +// 우선순위 재정의 +// 곱하기보다 더하기를 먼저 수행 +(a + b) * c; // 9 -// which is equivalent to -a * c + b * c // 9 +// ...하면 아래와 같음 +a * c + b * c; // 9 </pre> -<h3 id="좌변식">좌변식</h3> +<h3 id="left-hand-side_expressions">좌변 표현식</h3> -<p>좌측값들이 좌변식의 목적입니다.</p> +<p>좌변 값은 할당의 목적지입니다.</p> -<h4 id="new" name="new"><code>new</code></h4> +<h4 id="new"><code>new</code></h4> -<p><span>당신은 사용자 정의 객체 형식 또는 한 내장된 객체 형식의 인스턴스를 만드는 데는 </span><code><a href="/ko/docs/Web/JavaScript/Reference/Operators/new">new 연산자</a>를 </code><span>사용할 수 있습니다.</span> new는 아래와 같이 사용할 수 있습니다:</p> +<p> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> 연산자</a>를 사용하면 사용자 정의 객체 + 타입이나 내장 객체 타입의 인스턴스를 생성할 수 있습니다. 아래 코드처럼 사용하세요. +</p> -<pre class="brush: js">var objectName = new objectType([param1, param2, ..., paramN]); +<pre class="brush: js"> +var objectName = new objectType([param1, param2, ..., paramN]); </pre> <h4 id="super">super</h4> -<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/super">Super 키워드</a>는<span>개체의 부모에 함수를 호출하는 데 사용됩니다. 예를 들어 이것은 부모생성자를 부르는 </span> <a href="/ko/docs/Web/JavaScript/Reference/Classes">클래스들</a><span>과 함께 유용합니다 </span></p> +<p> + <a href="/ko/docs/Web/JavaScript/Reference/Operators/super">super 키워드</a>는 객체의 부모가 가진 함수를 호출할 때 + 사용합니다. 예를 하나 들면, <a href="/ko/docs/Web/JavaScript/Reference/Classes">클래스</a>에서 부모의 생성자를 + 호출해야 할 때 유용하게 쓸 수 있습니다. +</p> -<pre class="syntaxbox">super([arguments]); // calls the parent constructor. +<pre class="brush: js"> +super([arguments]); // 부모 생성자 호출 super.functionOnParent([arguments]); </pre> -<h4 id="확산연산자">확산연산자</h4> - -<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/Spread_operator">확산연산자</a>는 다중인수(함수호출)또는 다중요소(문자배열)들이 예상되는 곳에서 확장될 수 있는 표현을 하게합니다.</p> - -<p><strong>Example:</strong> 만약 하나의 배열에 다른 하나의 배열을 추가하고 싶을 때에는 Array 리터럴 구문이 더이상 충분하지않으므로 <code>push</code>, <code>splice</code>, <code>concat</code>과 같은 함수를 사용하는 것이 좋습니다. 하지만 확산연산자를 사용할 경우 좀 더 간결한 구문으로 구현할 수 있습니다. </p> - -<pre class="brush: js">var parts = ['shoulder', 'knees']; -var lyrics = ['head', ...parts, 'and', 'toes']; - -//[ 'head', 'shoulders', 'knees', 'and', 'toes' ] -</pre> - -<p><span>위와 같이, 확산연산자의 함수 호출은 다음과 같이 사용합니다.</span></p> - -<pre class="brush: js">function f(x, y, z) { } -var args = [0, 1, 2]; -f(...args);</pre> - <div>{{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}</div> |