diff options
Diffstat (limited to 'files/ko')
12 files changed, 111 insertions, 111 deletions
diff --git a/files/ko/web/javascript/reference/operators/class/index.html b/files/ko/web/javascript/reference/operators/class/index.html index 6ac133bf39..05e21fb2cb 100644 --- a/files/ko/web/javascript/reference/operators/class/index.html +++ b/files/ko/web/javascript/reference/operators/class/index.html @@ -19,7 +19,7 @@ translation_of: Web/JavaScript/Reference/Operators/class <h2 id="구문">구문</h2> -<pre class="syntaxbox notranslate">var MyClass = class <em>[className]</em> [extends] { +<pre class="syntaxbox ">var MyClass = class <em>[className]</em> [extends] { // class body };</pre> @@ -37,7 +37,7 @@ translation_of: Web/JavaScript/Reference/Operators/class <p>이게 바로 변수 "Foo"를 사용하여 참조할 수 있는 간단한 익명 class 식입니다.</p> -<pre class="brush: js notranslate">var Foo = class { +<pre class="brush: js ">var Foo = class { constructor() {} bar() { return "Hello World!"; @@ -53,7 +53,7 @@ Foo.name; // "" <p>당신이 클래스 몸통 내에서 현재 클래스를 참조하고 싶다면, 유명 class 식을 만들 수 있습니다. 이 이름은 오직 class 식 자체 범위에서만 볼 수 있습니다.</p> -<pre class="brush: js notranslate">var Foo = class NamedFoo { +<pre class="brush: js ">var Foo = class NamedFoo { constructor() {} whoIsThere() { return NamedFoo.name; diff --git a/files/ko/web/javascript/reference/operators/conditional_operator/index.html b/files/ko/web/javascript/reference/operators/conditional_operator/index.html index 491b356792..651f9827d0 100644 --- a/files/ko/web/javascript/reference/operators/conditional_operator/index.html +++ b/files/ko/web/javascript/reference/operators/conditional_operator/index.html @@ -24,7 +24,7 @@ browser-compat: javascript.operators.conditional <h2 id="구문">구문</h2> -<pre class="syntaxbox notranslate"><em>condition</em> ? <em>exprIfTrue</em> : <em>exprIfFalse</em> </pre> +<pre class="syntaxbox "><em>condition</em> ? <em>exprIfTrue</em> : <em>exprIfFalse</em> </pre> <h3 id="매개변수">매개변수</h3> diff --git a/files/ko/web/javascript/reference/operators/equality/index.html b/files/ko/web/javascript/reference/operators/equality/index.html index a31ffca59c..eb323a072d 100644 --- a/files/ko/web/javascript/reference/operators/equality/index.html +++ b/files/ko/web/javascript/reference/operators/equality/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Operators/Equality <h2 id="문법">문법</h2> -<pre class="syntaxbox notranslate">x == y +<pre class="syntaxbox ">x == y </pre> <h2 id="상세_설명">상세 설명</h2> @@ -43,12 +43,12 @@ translation_of: Web/JavaScript/Reference/Operators/Equality <h3 id="타입변환_없이_비교">타입변환 없이 비교</h3> -<pre class="brush: js notranslate">1 == 1; // true +<pre class="brush: js ">1 == 1; // true "hello" == "hello"; // true</pre> <h3 id="타입변환을_이용한_비교">타입변환을 이용한 비교</h3> -<pre class="brush: js notranslate">"1" == 1; // true +<pre class="brush: js ">"1" == 1; // true 1 == "1"; // true 0 == false; // true 0 == null; // false @@ -64,7 +64,7 @@ number1 == number2; // false</pre> <h3 id="객체들_간의_비교">객체들 간의 비교</h3> -<pre class="brush: js notranslate">const object1 = {"key": "value"} +<pre class="brush: js ">const object1 = {"key": "value"} const object2 = {"key": "value"}; object1 == object2 // false @@ -74,7 +74,7 @@ object2 == object2 // true</pre> <p><code>new String()</code> 을 통해 생성된 문자열들은 객체입니다. 이 객체중 하나를 문자열과 비교한다면, <code>String</code> 객체가 문자열로 변환된 후 비교될 것입니다. 그러나 두개의 피연산자 모두 <code>String</code> 객체라면, 객체로써 비교가 이루어지기 때문에 같은 값으로 취급될려면 같은 객체를 참조하고 있어야 합니다:</p> -<pre class="brush: js notranslate">const string1 = "hello"; +<pre class="brush: js ">const string1 = "hello"; const string2 = String("hello"); const string3 = new String("hello"); const string4 = new String("hello"); @@ -87,7 +87,7 @@ 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'); +<pre class="brush: js ">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> 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 index d5a4f69537..d309cd2f3e 100644 --- a/files/ko/web/javascript/reference/operators/nullish_coalescing_operator/index.html +++ b/files/ko/web/javascript/reference/operators/nullish_coalescing_operator/index.html @@ -15,7 +15,7 @@ translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator <h2 id="문법">문법</h2> -<pre class="syntaxbox notranslate"><var>leftExpr</var> ?? <var>rightExpr</var> +<pre class="syntaxbox "><var>leftExpr</var> ?? <var>rightExpr</var> </pre> <h2 id="설명">설명</h2> @@ -26,14 +26,14 @@ translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator <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; +<pre class="brush: js ">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; +<pre class="brush: js ">let count; let text; ... count = 0; @@ -47,7 +47,7 @@ console.log(message); // "hi!" and not "" <p>널 병합 연산자는 첫 번째 연산자가 <code>null</code> 또는 <code>undefined</code>로 평가될 때만, 두 번째 피연산자를 반환함으로써 이러한 위험을 피한다:</p> -<pre class="brush: js notranslate">let myText = ''; // An empty string (which is also a falsy value) +<pre class="brush: js ">let myText = ''; // An empty string (which is also a falsy value) let notFalsyText = myText || 'Hello world'; console.log(notFalsyText); // Hello world @@ -60,7 +60,7 @@ console.log(preservingFalsy); // '' (as myText is neither undefined nor null) <p>OR과 AND 같은 논리 연산자들과 마찬가지로, 만약 왼쪽이 <code>null</code> 또는 <code>undefined</code>가 아님이 판명되면 오른쪽 표현식은 평가되지 않는다.</p> -<pre class="brush: js notranslate">function A() { console.log('A was called'); return undefined;} +<pre class="brush: js ">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";} @@ -78,19 +78,19 @@ console.log( B() ?? C() ); <p>AND (<code>&&</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 +<pre class="brush: js ">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 class="brush: js ">(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" }; +<pre class="brush: js ">let foo = { someFooProp: "hi" }; console.log(foo.someFooProp?.toUpperCase()); // "HI" console.log(foo.someBarProp?.toUpperCase()); // undefined @@ -100,7 +100,7 @@ console.log(foo.someBarProp?.toUpperCase()); // undefined <p>이 예제는 기본 값을 제공하지만 <code>null</code> or <code>undefined</code> 이외의 값을 를 유지한다. </p> -<pre class="brush: js notranslate">function getMiscObj(){ +<pre class="brush: js ">function getMiscObj(){ return { aNullProperty: null, emptyText: "", // this is not falsy diff --git a/files/ko/web/javascript/reference/operators/this/index.html b/files/ko/web/javascript/reference/operators/this/index.html index e74032c1c6..2ff4b1acc2 100644 --- a/files/ko/web/javascript/reference/operators/this/index.html +++ b/files/ko/web/javascript/reference/operators/this/index.html @@ -20,7 +20,7 @@ translation_of: Web/JavaScript/Reference/Operators/this <h2 id="구문">구문</h2> -<pre class="syntaxbox notranslate">this</pre> +<pre class="syntaxbox ">this</pre> <h3 id="값">값</h3> @@ -30,7 +30,7 @@ translation_of: Web/JavaScript/Reference/Operators/this <p>전역 실행 맥락에서 <code>this</code>는 엄격 모드 여부에 관계 없이 전역 객체를 참조합니다.</p> -<pre class="brush: js notranslate">// 웹 브라우저에서는 window 객체가 전역 객체 +<pre class="brush: js ">// 웹 브라우저에서는 window 객체가 전역 객체 console.log(this === window); // true a = 37; @@ -52,7 +52,7 @@ console.log(b) // "MDN"</pre> <p>다음 예제는 엄격 모드가 아니며 <code>this</code>의 값이 호출에 의해 설정되지 않으므로, 기본값으로 브라우저에서는 {{domxref("Window", "window")}}인 전역 객체를 참조합니다.</p> -<pre class="brush: js notranslate">function f1() { +<pre class="brush: js ">function f1() { return this; } @@ -64,7 +64,7 @@ f1() === global; // true</pre> <p>반면에 엄격 모드에서 <code>this</code> 값은 실행 문맥에 진입하며 설정되는 값을 유지하므로 다음 예시에서 보여지는 것 처럼 <code>this</code>는 <code>undefined</code>로 남아있습니다.</p> -<pre class="brush: js notranslate">function f2(){ +<pre class="brush: js ">function f2(){ "use strict"; // 엄격 모드 참고 return this; } @@ -97,7 +97,7 @@ whatsThis.apply(obj); // this는 'Custom'. 함수 내에서 obj로 설정한다. <p><strong>예시 2</strong></p> -<pre class="brush: js notranslate">function add(c, d) { +<pre class="brush: js ">function add(c, d) { return this.a + this.b + c + d; } @@ -114,7 +114,7 @@ add.apply(o, [10, 20]); // 34 <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() { +<pre class="brush: js ">function bar() { console.log(Object.prototype.toString.call(this)); } @@ -127,7 +127,7 @@ bar.call(undefined); // [object global] <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() { +<pre class="brush: js ">function f() { return this.a; } @@ -144,7 +144,7 @@ console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty</pre> <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>는 자신을 감싼 정적 범위입니다. 전역 코드에서는 전역 객체를 가리킵니다.</p> -<pre class="brush: js notranslate">var globalObject = this; +<pre class="brush: js ">var globalObject = this; var foo = (() => this); console.log(foo() === globalObject); // true</pre> @@ -152,7 +152,7 @@ console.log(foo() === globalObject); // true</pre> <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">// 객체로서 메서드 호출 +<pre class="brush: js ">// 객체로서 메서드 호출 var obj = {func: foo}; console.log(obj.func() === globalObject); // true @@ -165,7 +165,7 @@ 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를 생성합니다. +<pre class="brush: js ">// this를 반환하는 메소드 bar를 갖는 obj를 생성합니다. // 반환된 함수는 화살표 함수로 생성되었으므로, // this는 감싸진 함수의 this로 영구적으로 묶입니다. // bar의 값은 호출에서 설정될 수 있으며, 이는 반환된 함수의 값을 설정하는 것입니다. @@ -198,7 +198,7 @@ console.log(fn2()() == window); // true</pre> <p>다음 예제에서 <code>o.f()</code>를 실행할 때 <code>o</code> 객체가 함수 내부의 <code>this</code>와 연결됩니다.</p> -<pre class="brush: js notranslate">var o = { +<pre class="brush: js ">var o = { prop: 37, f: function() { return this.prop; @@ -210,7 +210,7 @@ console.log(o.f()); // 37 <p>이 행동이 함수가 정의된 방법이나 위치에 전혀 영향을 받지 않는 것에 유의해라. 이전 예제에서, <code>o</code> 의 정의 중 <code>f</code> 함수를 구성원으로 내부에 정의 하였다. 그러나, 간단하게 함수를 먼저 정의하고 나중에 <code>o.f</code>를 추가할 수 있다. 이렇게 하면 동일한 동작 결과 이다 :</p> -<pre class="brush: js notranslate">var o = {prop: 37}; +<pre class="brush: js ">var o = {prop: 37}; function independent() { return this.prop; @@ -225,7 +225,7 @@ console.log(o.f()); // logs 37 <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}; +<pre class="brush: js ">o.b = {g: independent, prop: 42}; console.log(o.b.g()); // logs 42 </pre> @@ -233,7 +233,7 @@ console.log(o.b.g()); // logs 42 <p>같은 개념으로 객체의 프로토타입 체인 어딘가에 정의한 메서드도 마찬가지입니다. 메서드가 어떤 객체의 프로토타입 체인 위에 존재하면, <code>this</code>의 값은 그 객체가 메서드를 가진 것 마냥 설정됩니다.</p> -<pre class="brush: js notranslate">var o = { +<pre class="brush: js ">var o = { f:function() { return this.a + this.b; } }; var p = Object.create(o); @@ -249,7 +249,7 @@ console.log(p.f()); // 5 <p>다시 한 번 같은 개념으로, 함수를 접근자와 설정자에서 호출하더라도 동일합니다. 접근자나 설정자로 사용하는 함수의 <code>this</code>는 접근하거나 설정하는 속성을 가진 객체로 묶입니다.</p> -<pre class="brush: js notranslate">function sum() { +<pre class="brush: js ">function sum() { return this.a + this.b + this.c; } @@ -276,7 +276,7 @@ console.log(o.average, o.sum); // 2, 6 <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">/* +<pre class="brush: js ">/* * Constructors work like this: * * function MyConstructor(){ @@ -316,7 +316,7 @@ console.log(o.a); // 38 <p>함수를 이벤트 처리기로 사용하면 this는 이벤트를 발사한 요소로 설정됩니다. 일부 브라우저는 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} 외의 다른 방법으로 추가한 처리기에 대해선 이 규칙을 따르지 않습니다.</p> -<pre class="brush: js notranslate">// 처리기로 호출하면 관련 객체를 파랗게 만듦 +<pre class="brush: js ">// 처리기로 호출하면 관련 객체를 파랗게 만듦 function bluify(e) { // 언제나 true console.log(this === e.currentTarget); @@ -338,13 +338,13 @@ for (var i = 0; i < elements.length; i++) { <p>코드를 인라인 이벤트 처리기로 사용하면 <code>this</code>는 처리기를 배치한 DOM 요소로 설정됩니다.</p> -<pre class="brush: js notranslate"><button onclick="alert(this.tagName.toLowerCase());"> +<pre class="brush: js "><button onclick="alert(this.tagName.toLowerCase());"> this 표시 </button></pre> <p>위의 경고창은 <code>button</code>을 보여줍니다. 다만 바깥쪽 코드만 <code>this</code>를 이런 방식으로 설정합니다.</p> -<pre class="brush: js notranslate"><button onclick="alert((function() { return this; })());"> +<pre class="brush: js "><button onclick="alert((function() { return this; })());"> 내부 this 표시 </button></pre> diff --git a/files/ko/web/javascript/reference/statements/async_function/index.html b/files/ko/web/javascript/reference/statements/async_function/index.html index c1827af8e2..a2dd584d1f 100644 --- a/files/ko/web/javascript/reference/statements/async_function/index.html +++ b/files/ko/web/javascript/reference/statements/async_function/index.html @@ -19,7 +19,7 @@ translation_of: Web/JavaScript/Reference/Statements/async_function <h2 id="Syntax">Syntax</h2> -<pre class="syntaxbox notranslate">async function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { +<pre class="syntaxbox">async function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { <em>statements</em> } </pre> @@ -63,13 +63,13 @@ translation_of: Web/JavaScript/Reference/Statements/async_function <p>예를 들어</p> -<pre class="notranslate">async function foo() { +<pre >async function foo() { return 1 }</pre> <p>위 코드는 아래와 같습니다.</p> -<pre class="notranslate">function foo() { +<pre >function foo() { return Promise.resolve(1) }</pre> @@ -77,13 +77,13 @@ translation_of: Web/JavaScript/Reference/Statements/async_function <p>예를 들어</p> -<pre class="notranslate">async function foo() { +<pre >async function foo() { await 1 }</pre> <p>위 코드는 아래와 같습니다.</p> -<pre class="notranslate">function foo() { +<pre >function foo() { return Promise.resolve(1).then(() => undefined) } </pre> @@ -92,7 +92,7 @@ translation_of: Web/JavaScript/Reference/Statements/async_function <h3 id="Simple_example">Simple example</h3> -<pre class="notranslate"><code>var resolveAfter2Seconds = function() { +<pre ><code>var resolveAfter2Seconds = function() { console.log("starting slow promise"); return new Promise(resolve => { setTimeout(function() { @@ -169,7 +169,7 @@ setTimeout(parallel, 10000); // trully parallel: after 1 second, logs "fast", th <p>{{jsxref("Promise")}} 를 반환하는 API는 promise chain을 만들며 여러 파트의 함수로 나뉜다.<br> 아래 코드를 보자.</p> -<pre class="brush: js notranslate">function getProcessedData(url) { +<pre class="brush: js ">function getProcessedData(url) { return downloadData(url) // returns a promise .catch(e => { return downloadFallbackData(url) // returns a promise @@ -182,7 +182,7 @@ setTimeout(parallel, 10000); // trully parallel: after 1 second, logs "fast", th <p>위의 코드는 하나의 async함수로 아래와 같이 쓰여질 수도 있다.</p> -<pre class="brush: js notranslate">async function getProcessedData(url) { +<pre class="brush: js ">async function getProcessedData(url) { let v; try { v = await downloadData(url); diff --git a/files/ko/web/javascript/reference/statements/do...while/index.html b/files/ko/web/javascript/reference/statements/do...while/index.html index 9cd6ed0e5c..5b869ddb82 100644 --- a/files/ko/web/javascript/reference/statements/do...while/index.html +++ b/files/ko/web/javascript/reference/statements/do...while/index.html @@ -15,7 +15,7 @@ translation_of: Web/JavaScript/Reference/Statements/do...while <h2 id="문법">문법</h2> -<pre class="syntaxbox notranslate">do<em>구문</em> +<pre class="syntaxbox ">do<em>구문</em> while (<em>조건식</em>); </pre> @@ -36,7 +36,7 @@ while (<em>조건식</em>); <p>예제에서 <code>do...while</code> 문은 적어도 한번 반복되고 i 변수가 5 보다 작을 때까지 실행됩니다.</p> -<pre class="brush: js notranslate">var result = ''; +<pre class="brush: js ">var result = ''; var i = 0; do { i += 1; diff --git a/files/ko/web/javascript/reference/statements/for...in/index.html b/files/ko/web/javascript/reference/statements/for...in/index.html index f5e54dcac2..5748e2f097 100644 --- a/files/ko/web/javascript/reference/statements/for...in/index.html +++ b/files/ko/web/javascript/reference/statements/for...in/index.html @@ -14,7 +14,7 @@ translation_of: Web/JavaScript/Reference/Statements/for...in <h2 id="Syntax">문법</h2> -<pre class="syntaxbox notranslate">for (<var>variable</var> in <var>object</var>) {<em> ... </em>}</pre> +<pre class="syntaxbox ">for (<var>variable</var> in <var>object</var>) {<em> ... </em>}</pre> <h3 id="Parameters">파라미터</h3> @@ -64,7 +64,7 @@ translation_of: Web/JavaScript/Reference/Statements/for...in <p>아래의 예는 열거 가능한 non-Symbol속성들을 반복해서 속성의 이름과 그 값을 기록합니다.</p> -<pre class="notranslate"><code>var obj = {a: 1, b: 2, c: 3}; +<pre ><code>var obj = {a: 1, b: 2, c: 3}; for (const prop in obj) { console.log(`obj.${prop} = ${obj[prop]}`); @@ -79,7 +79,7 @@ for (const prop in obj) { <p>아래는 {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}} 를 사용하는 예를 보여주고 있습니다. 상속된 속성은 표시되지 않습니다.</p> -<pre class="brush: js notranslate">var triangle = {a:1, b:2, c:3}; +<pre class="brush: js ">var triangle = {a:1, b:2, c:3}; function ColoredTriangle() { this.color = "red"; @@ -148,7 +148,7 @@ alert(show_own_props(o, "o")); /* alerts: o.color = red */ <p>Prior to SpiderMonkey 40 {{geckoRelease(40)}}, it was possible to use an initializer expression (<code>i=0</code>) in a <code>for...in</code> loop:</p> -<pre class="notranslate"><code>var obj = {a: 1, b: 2, c: 3}; +<pre ><code>var obj = {a: 1, b: 2, c: 3}; for (var i = 0 in obj) { console.log(obj[i]); } diff --git a/files/ko/web/javascript/reference/statements/try...catch/index.html b/files/ko/web/javascript/reference/statements/try...catch/index.html index a96c81e1a5..889fa2e7bb 100644 --- a/files/ko/web/javascript/reference/statements/try...catch/index.html +++ b/files/ko/web/javascript/reference/statements/try...catch/index.html @@ -13,7 +13,7 @@ translation_of: Web/JavaScript/Reference/Statements/try...catch <h2 id="문법">문법</h2> -<pre class="notranslate">try { +<pre >try { <em>try_statements</em> } [catch (<em>exception_var</em>) { @@ -67,7 +67,7 @@ translation_of: Web/JavaScript/Reference/Statements/try...catch -<pre class="brush: js notranslate">try { +<pre class="brush: js ">try { throw "myException"; // generates an exception } catch (e) { @@ -82,7 +82,7 @@ catch (e) { -<pre class="notranslate">try { +<pre >try { myroutine(); // may throw three types of exceptions } catch (e) { if (e instanceof TypeError) { @@ -102,7 +102,7 @@ catch (e) { <p>이에 대한 일반적인 사용 사례는 예상 오류의 작은 하위 집합 만 포착 (및 침묵) 한 다음 다른 경우에 오류를 다시 발생시키는 것입니다.</p> -<pre class="notranslate">try { +<pre >try { myRoutine(); } catch (e) { if (e instanceof RangeError) { @@ -118,7 +118,7 @@ catch (e) { -<pre class="notranslate">function isValidJSON(text) { +<pre >function isValidJSON(text) { try { JSON.parse(text); return true; @@ -135,7 +135,7 @@ catch (e) { <p>The following example shows one use case for the <code>finally</code>-block. The code opens a file and then executes statements that use the file; the <code>finally</code>-block makes sure the file always closes after it is used even if an exception was thrown.</p> -<pre class="notranslate">openMyFile(); +<pre >openMyFile(); try { // tie up a resource writeMyFile(theData); @@ -150,7 +150,7 @@ finally { <p>First, let's see what happens with this:</p> -<pre class="notranslate">try { +<pre >try { try { throw new Error('oops'); } @@ -169,7 +169,7 @@ catch (ex) { <p>Now, if we already caught the exception in the inner <code>try</code>-block by adding a <code>catch</code>-block</p> -<pre class="notranslate">try { +<pre >try { try { throw new Error('oops'); } @@ -191,7 +191,7 @@ catch (ex) { <p>And now, let's rethrow the error.</p> -<pre class="notranslate">try { +<pre >try { try { throw new Error('oops'); } @@ -219,7 +219,7 @@ catch (ex) { <p>If the <code>finally</code>-block returns a value, this value becomes the return value of the entire <code>try-catch-finally</code> statement, regardless of any <code>return</code> statements in the <code>try</code> and <code>catch</code>-blocks. This includes exceptions thrown inside of the <code>catch</code>-block:</p> -<pre class="notranslate">(function() { +<pre >(function() { try { try { throw new Error('oops'); diff --git a/files/ko/web/javascript/reference/strict_mode/index.html b/files/ko/web/javascript/reference/strict_mode/index.html index 9fc6a1afe8..5cffa86224 100644 --- a/files/ko/web/javascript/reference/strict_mode/index.html +++ b/files/ko/web/javascript/reference/strict_mode/index.html @@ -33,7 +33,7 @@ translation_of: Web/JavaScript/Reference/Strict_mode <p>엄격모드를 전체 스크립트에 적용하기 위해, 정확한 구문 <code>"use strict";</code>(또는 <code>'use strict';</code>) 을 다른 구문 작성 전에 삽입합니다.</p> -<pre class="brush: js notranslate">// 전체 스크립트 엄격 모드 구문 +<pre class="brush: js ">// 전체 스크립트 엄격 모드 구문 'use strict'; var v = "Hi! I'm a strict mode script!"; </pre> @@ -46,7 +46,7 @@ var v = "Hi! I'm a strict mode script!"; <p>마찬가지로, 함수에 strict mode를 적용하기 위해, 함수 본문 처음에 다음의 구문을 넣습니다. <code>"use strict";</code> (또는 <code>'use strict';</code>).</p> -<pre class="brush: js notranslate">function strict() { +<pre class="brush: js ">function strict() { // 함수-레벨 strict mode 문법 'use strict'; function nested() { return "And so am I!"; } @@ -59,7 +59,7 @@ function notStrict() { return "I'm not strict."; } <p>ECMAScript 2015 는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export">JavaScript 모듈</a>을 소개했습니다. 따라서, 이는 엄격 모드를 적용할 수 있는 3번 째 방법입니다. JavaScript 모듈의 전체 컨텐츠는 엄격 모드 시작을 위한 구문 없이도 자동으로 엄격모드입니다.</p> -<pre class="notranslate"><code>function strict() { +<pre ><code>function strict() { // 모듈이기때문에 기본적으로 엄격합니다 } export default strict;</code> @@ -76,14 +76,14 @@ export default strict;</code> <p>첫째로, 엄격모드는 실수로 글로벌 변수를 생성하는 것을 불가능하게 만듭니다. 일반적인 JavaScript에서 변수를 잘못 입력하면 전역 객체에 대한 새 속성이 만들어지고 그대로 "동작" (미래의 오류가 발생할 수 있음: modern 자바 스크립트처럼) 합니다. 전역 변수를 생성하는 할당은 엄격 모드에선 오류를 발생시킵니다.</p> -<pre class="brush: js notranslate">"use strict"; +<pre class="brush: js ">"use strict"; // 전역 변수 mistypedVariable 이 존재한다고 가정 mistypedVaraible = 17; // 변수의 오타때문에 이 라인에서 ReferenceError 를 발생시킴 </pre> <p>둘째로, 엄격모드는 예외를 발생시키는 실패를 조용히 넘어가는 대신 작업을 만듭니다. 예를 들어, <code>NaN</code> 은 쓸 수 없는 전역 변수입니다. <code>NaN</code> 에 할당하는 일반적인 코드는 아무 것도 하지 않습니다. 개발자도 아무런 실패 피드백을 받지 않습니다. 엄격 모드에서 <code>NaN</code> 에 할당하는 것은 예외를 발생시킵니다. 일반 코드에서 조용히 넘어가는 모든 실패에 대해 (쓸 수 없는 전역 또는 프로퍼티에 할당, getter-only 프로퍼티에 할당, <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions" title="en-US/JavaScript/Reference/Global Objects/Object/preventExtensions">확장 불가</a> 객체에 새 프로퍼티 할당) 엄격 모드에서는 예외를 발생시킵니다.</p> -<pre class="brush: js notranslate">"use strict"; +<pre class="brush: js ">"use strict"; // 쓸 수 없는 프로퍼티에 할당 var undefined = 5; // TypeError 발생 @@ -106,7 +106,7 @@ fixed.newProp = "ohai"; // TypeError 발생 <p>셋째로, 엄격 모드는 삭제할 수 없는 프로퍼티를 삭제하려할 때 예외를 발생시킵니다(시도가 어떤 효과도 없을 때).</p> -<pre class="brush: js notranslate">"use strict"; +<pre class="brush: js ">"use strict"; delete Object.prototype; // TypeError 발생 </pre> @@ -116,13 +116,13 @@ delete Object.prototype; // TypeError 발생 <p>ECMAScript 2015부터는 에러가 아닙니다. ({{bug(1041128)}}).</p> </div> -<pre class="brush: js notranslate">"use strict"; +<pre class="brush: js ">"use strict"; var o = { p: 1, p: 2 }; // !!! 구문 에러 </pre> <p>다섯째로, 엄격모드는 유니크한 함수 파라미터 이름을 요구합니다. 일반 코드에서는 마지막으로 중복된 인수가 이전에 지정된 인수를 숨깁니다. 이러한 이전의 인수들은 <code>arguments[i]</code> 를 통해 여전히 남아 있을 수 있으므로, 완전히 접근 불가한 것이 아닙니다. 여전히, 이런 숨김 처리는 이치에 맞지 않으며 원했던 것이 아닐 수 있습니다(예를 들면 오타를 숨길 수도 있습니다). 따라서 엄격 모드에서는 중복 인수명은 구문 에러입니다.</p> -<pre class="brush: js notranslate">function sum(a, a, c){ // !!! 구문 에러 +<pre class="brush: js ">function sum(a, a, c){ // !!! 구문 에러 "use strict"; return a + b + c; // 코드가 실행되면 잘못된 것임 } @@ -130,11 +130,11 @@ var o = { p: 1, p: 2 }; // !!! 구문 에러 <p>여섯째로, ECMAScript 5 에서의 엄격 모드는 8진 구문을 금지합니다. 8진 구문은 ES5의 문법이 아니지만, 모든 브라우저에서 앞에 0을 붙여 지원됩니다(<code>0644 === 420</code> 와 <code>"\045" === "%"</code>). ECMAScript 2015 에서는 접두사 "<code>0o</code>"를 붙여 8진수를 지원합니다.</p> -<pre class="brush: js notranslate">var a = 0o10; // ES6: 8진수</pre> +<pre class="brush: js ">var a = 0o10; // ES6: 8진수</pre> <p>초보 개발자들은 가끔 앞에 붙은 0 이 무의미하다고 생각하여, 이를 정렬용으로 사용합니다 — 하지만 이는 숫자의 의미를 바꿔버립니다! 이 8진수 문법은 거의 무용하며 잘못 사용될 수 있으므로 엄격모드에서 이 구문은 에러입니다.</p> -<pre class="brush: js notranslate">"use strict"; +<pre class="brush: js ">"use strict"; var sum = 015 + // !!! 구문 에러 197 + 142; @@ -142,7 +142,7 @@ var sum = 015 + // !!! 구문 에러 <p>일곱째로, ECMAScript 6 의 엄격모드는 {{Glossary("primitive")}} 값에 프로퍼티를 설정하는 것을 금지합니다. 엄격모드가 아닐 때에는 프로퍼티 설정이 간단하게 무시되지만(no-op), 엄격모드에서는 {{jsxref("TypeError")}} 를 발생시킵니다.</p> -<pre class="brush: js notranslate">(function() { +<pre class="brush: js ">(function() { "use strict"; false.true = ""; // TypeError @@ -157,7 +157,7 @@ false.true = ""; // TypeError <p>첫째로, 엄격모드는 <code>with</code> 를 사용하지 못하게합니다. <code>with</code> 사용의 문제는 런타임중에 블록안의 모든 이름이 전달된 객체의 프로퍼티나 인근 (또는 심지어 전역) 스코프 내의 변수로 매핑될 수도 있다는 것입니다. 이는 사전에 아는 것이 불가합니다. 엄격 모드는 <code>with</code> 를 구문 에러로 만들어, <code>with</code> 의 이름이 런타임에 알 수 없는 위치를 참조하지 않도록합니다.</p> -<pre class="brush: js notranslate">"use strict"; +<pre class="brush: js ">"use strict"; var x = 17; with (obj) // !!! 구문 에러 { @@ -173,7 +173,7 @@ with (obj) // !!! 구문 에러 <p>둘째로, <a class="external" href="http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/">엄격모드 코드의 <code>eval</code> 은 새로운 변수를 주위 스코프에 추가하지 않습니다</a>. 일반적인 코드에서 <code>eval("var x;")</code> 는 변수 <code>x</code> 를 주위 함수나 전역 스코프에 추가합니다. 이는, 일반적으로 <code>eval</code> 호출을 포함하는 함수에서 인수나 지역 변수를 참조하지 않는 모든 이름은 런타임에 특정 정의에 반드시 매핑되어야 함을 의미합니다(<code>eval</code> 이 외부 변수를 숨기는 새로운 변수를 추가했기 때문입니다). 엄격모드에서 <code>eval</code> 은 evaluated 된 코드에서만 변수를 생성하므로, 외부 변수나 일부 로컬 변수에 참조하는지에 영향을 주지 않습니다.</p> -<pre class="brush: js notranslate">var x = 17; +<pre class="brush: js ">var x = 17; var evalX = eval("'use strict'; var x = 42; x"); console.assert(x === 17); console.assert(evalX === 42); @@ -181,7 +181,7 @@ console.assert(evalX === 42); <p>이와 관련해서, <code>eval</code> 함수가 엄격모드 코드 내에서 <code>eval(...)</code> 형태의 표현으로 적용되었다면, 코드는 엄격모드 코드로 evaluated 됩니다. 코드는 명시적으로 엄격모드를 적용할 수 있지만, 필수적인 것은 아닙니다.</p> -<pre class="brush: js notranslate">function strict1(str){ +<pre class="brush: js ">function strict1(str){ "use strict"; return eval(str); // str 은 엄격모드 코드로 다뤄짐 } @@ -206,7 +206,7 @@ nonstrict("'use strict'; '엄격모드 코드!'"); <p>셋째로, 엄격모드는 일반 이름을 제거하는 것을 금지합니다. 엄격 모드에서 <code>delete name</code> 은 구문 에러입니다.</p> -<pre class="brush: js notranslate">"use strict"; +<pre class="brush: js ">"use strict"; var x; delete x; // !!! 구문 에러 @@ -219,7 +219,7 @@ eval("var y; delete y;"); // !!! syntax error</pre> <p>첫째로, 변수명 eval 과 arguments 는 언어 문법에 바운드되거나 할당될 수 없습니다. 다음 시도들은 모두 구문 에러입니다.</p> -<pre class="brush: js notranslate">"use strict"; +<pre class="brush: js ">"use strict"; eval = 17; arguments++; ++eval; @@ -234,7 +234,7 @@ var f = new Function("arguments", "'use strict'; return 17;"); <p>둘째로, 엄격모드 코드는 <code>arguments</code> 객체가 생성한 프로퍼티를 앨리어스하지 않습니다. 함수의 첫 번째 인수가 <code>arg</code> 인 일반 코드에서는 <code>arg</code> 를 설정하는 것은 <code>arguments[0]</code> 를 설정하기도 하며, 그 반대도 그렇습니다(인수가 제공되지 않거나, <code>arguments[0]</code> 이 삭제된 경우는 제외). 엄격모드 함수의 <code>arguments</code> 객체는 함수가 호출될 때 원본 인수들을 저장합니다. <code><em>arguments[i]</em></code> 는 명명된 인수에 해당하는 값을 추적하지 않으며, 명명된 인수도 <code>arguments[i]</code> 에 해당하는 값을 추적하지 않습니다.</p> -<pre class="brush: js notranslate">function f(a){ +<pre class="brush: js ">function f(a){ "use strict"; a = 42; return [a, arguments[0]]; @@ -246,7 +246,7 @@ console.assert(pair[1] === 17); <p>셋째로, <code>arguments.callee</code> 는 더 이상 지원되지 않습니다. 일반 코드의 <code>arguments.callee</code> 는 바깥 함수를 참조합니다. 이런 유즈 케이스는 중요하지 않습니다. 간단히 바깥 함수의 이름을 사용하면됩니다. 더욱이, <code>arguments.callee</code> 는 인라인 함수와 같은 최적화를 상당히 방해하므로, <code>arguments.callee</code> 가 접근하는 함수는 인라인이 아닌 함수를 참조하도록 제공해야 했습니다. 엄격모드 함수의 <code>arguments.callee</code> 는 삭제할 수 없는 프로퍼티이며, 설정이나 반환할때 에러를 발생합니다.</p> -<pre class="brush: js notranslate">"use strict"; +<pre class="brush: js ">"use strict"; var f = function() { return arguments.callee; }; f(); // TypeError </pre> @@ -257,7 +257,7 @@ f(); // TypeError <p>첫째, 엄격모드에서는 <code>this</code> 로 함수에 전달된 값은 강제로 객체가 되지 않습니다 (a.k.a. "boxed"). 보통 함수의 경우, <code>this</code> 는 언제나 객체입니다: 객체값 <code>this</code> 와 함께 호출된 경우 제공된 객체이거나 ; 부울값, 문자 또는 숫자 <code>this</code> 로 호출된 경우 그 값은 Boxed 입니다; 또는 <code>undefined</code> 또는 <code>null</code> <code>this</code> 로 호출되면 전역객체입니다. (특정된 <code>this</code> 명세를 위해서는 <a href="/en-US/Web/JavaScript/Reference/Global_Objects/Function/call" title="en-US/JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a>, <a href="/en-US/Web/JavaScript/Reference/Global_Objects/Function/apply" title="en-US/JavaScript/Reference/Global_Objects/Function/apply"><code>apply</code></a>, 또는 <a href="/en-US/Web/JavaScript/Reference/Global_Objects/Function/bind" title="en-US/JavaScript/Reference/Global_Objects/Function/bind"><code>bind</code></a> 를 사용하십시요) 자동 박싱은 성능 비용뿐 아니라 전역 객체가 브라우저에 노출되는것은 보안상 위험합니다. 전역객체들은 자바스크립트 환경의 "보안" 기능에 접근하는것을 제공하기때문에 제한되어야 합니다. 따라서 엄격모드의 함수는, 정의된 <code>this</code> 는 박스드 객체가 되지 않으며, 정의되지 않은경우 <code>this</code> 는 <code>undefined</code> 가 됩니다:</p> -<pre class="brush: js notranslate">"use strict"; +<pre class="brush: js ">"use strict"; function fun() { return this; } console.assert(fun() === undefined); console.assert(fun.call(2) === 2); @@ -270,7 +270,7 @@ console.assert(fun.bind(true)() === true); <p>둘째로, 엄격모드에서는 ECMAScript의 일반적으로 구현된 확장을 통해 자바스크립트 스택을 "걷는"것이 불가능합니다. 이러한 일반적인 확장 코드는, 함수 <code>fun</code> 이 호출되는 중간에, <code>fun.caller</code> 는 가장 최근에 <code>fun</code> 을 호출한 함수이고 <code>fun.arguments</code> 는 <code>fun</code>을 호출하기 위한 인수입니다. "권한있는"함수와 (잠재적으로 보안되지 않은) 인수에 접근을 허용하기때문에 두가지 확장 모두 자바스크립트의 "보안" 문제가 됩니다. <code>fun</code> 이 엄격모드인경우, both <code>fun.caller</code> 와 <code>fun.arguments</code> 모두 설정 또는 검색될때 삭제 불가능한 속성이 됩니다.</p> -<pre class="brush: js notranslate">function restricted() +<pre class="brush: js ">function restricted() { "use strict"; restricted.caller; // throws a TypeError @@ -285,7 +285,7 @@ privilegedInvoker(); <p>셋째, 엄격모드의 <code>인수</code> 는 더이상 해당 함수의 호출 변수에 대한 접근을 제공하지 않습니다. 일부 이전 ECMAScript에서 <code>arguments.caller</code> 해당 함수에 별명이 지정된 객체였습니다. 이것은 함수의 추상화를 통해 권한이 있는 값을 숨길수 있는 기능을 차단하여 <a class="external" href="http://stuff.mit.edu/iap/2008/facebook/">보안의 위협</a>이 됩니다; 이것은 또한 대부분의 최적화를 배제시킵니다. 이러한 이유로 최신 브라우저들은 이를 구현하지 않습니다. 하지만 이것들의 이전 기능들 때문에, 엄격모드함수에서 <code>arguments.caller</code> 설정이나 검색시 삭제 불가능한 요소가 됩니다:</p> -<pre class="brush: js notranslate">"use strict"; +<pre class="brush: js ">"use strict"; function fun(a, b) { "use strict"; @@ -301,7 +301,7 @@ fun(1, 2); // doesn't expose v (or a or b) <p>첫번째로, 엄격 모드에서의 식별자 후보들은 예약어가 됩니다. 이 예약어들은 <code>implements</code>, <code>interface</code>, <code>let</code>, <code>package</code>, <code>private</code>, <code>protected</code>, <code>public</code>, <code>static</code>, <code>yield</code>입니다. 그럼, 엄격 모드에서는 이 예약어와 똑같은 이름을 사용하거나, 변수명 또는 아규먼트명으로도 사용할 수 없습니다. </p> -<pre class="brush: js notranslate">function package(protected){ // !!! +<pre class="brush: js ">function package(protected){ // !!! "use strict"; var implements; // !!! @@ -320,7 +320,7 @@ function fun(static) { 'use strict'; } // !!! <p>다음은, 엄격 모드는 스크립트나 함수의 탑 레벨이 아닌 곳에서의 함수 내용 정의를 제한합니다. (<a class="external" href="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/">strict mode prohibits function statements not at the top level of a script or function</a>). 브라우저에서 일반적인 코드는 함수 내용 정의가 "어디에서든" 허용됩니다. <em>이것은 ES5의 부분이 아닙니다!(심지어 ES3도 아니다.) </em>이건 다른 브라우저에서 공존할 수 없는 시멘틱의 확장입니다. 앞으로의 ECMAScript 에디션은 바라건대, 스크립트나 함수의 탑 레벨이 아닌 곳에서의 함수 내용 정의를 위해, 새로운 시멘틱을 명시할 것입니다. 엄격 모드에서 이러한 함수 정의를 금지하는 것(<a class="external" href="http://wiki.ecmascript.org/doku.php?id=conventions:no_non_standard_strict_decls">Prohibiting such function statements in strict mode</a>)은 앞으로 출시될 ECMAScript의 사양을 위한 "준비"입니다. :</p> -<pre class="brush: js notranslate">"use strict"; +<pre class="brush: js ">"use strict"; if (true){ function f() { } // !!! syntax error f(); diff --git a/files/ko/web/javascript/reference/template_literals/index.html b/files/ko/web/javascript/reference/template_literals/index.html index 882dfc07a1..78ed6fa5a9 100644 --- a/files/ko/web/javascript/reference/template_literals/index.html +++ b/files/ko/web/javascript/reference/template_literals/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Template_literals <h2 id="Syntax">Syntax</h2> -<pre class="syntaxbox notranslate">`string text` +<pre class="syntaxbox ">`string text` `string text line 1 string text line 2` @@ -25,7 +25,7 @@ tag `string text ${expression} string text` <p>템플릿 리터럴은 이중 따옴표 나 작은 따옴표 대신 백틱(` `) (<a href="http://en.wikipedia.org/wiki/Grave_accent">grave accent</a>) 을 이용합니다. 템플릿 리터럴은 또한 플레이스 홀더를 이용하여 표현식을 넣을 수 있는데, 이는 $와 중괄호( <code>$ {expression}</code> ) 로 표기할 수 있습니다. 플레이스 홀더 안에서의 표현식과 그 사이의 텍스트는 함께 함수로 전달됩니다. 기본 함수는 단순히 해당 부분을 단일 문자열로 연결시켜 줍니다. 템플릿 리터럴 앞에 어떠한 표현식이 있다면(여기에서는 태그), 템플릿 리터럴은 "태그가 지정된 템플릿"이라고 불리게 됩니다. 이 때, 태그 표현식 (주로 함수)이 처리된 템플릿 리터럴과 함께 호출되면, 출력하기 전에 조작할 수 있습니다. 템플릿 리터럴 안에서 백틱 문자를 사용하려면 백틱 앞에 백슬러쉬(\)를 넣으십시오.</p> -<pre class="brush: js notranslate">`\`` === "`" // --> true</pre> +<pre class="brush: js ">`\`` === "`" // --> true</pre> <h3 id="Multi-line_strings">Multi-line strings</h3> @@ -33,14 +33,14 @@ tag `string text ${expression} string text` <p>일반 string 들을 사용하여, multi-line strings 들을 얻기 위해서는 아래와 같은 문법을 사용해야 할 것입니다.</p> -<pre class="brush: js notranslate">console.log("string text line 1\n"+ +<pre class="brush: js ">console.log("string text line 1\n"+ "string text line 2"); // "string text line 1 // string text line 2"</pre> <p>같은 효과를 template literal을 통해 얻기 위해서는, 아래와 같이 적을 수 있습니다.</p> -<pre class="brush: js notranslate">console.log(`string text line 1 +<pre class="brush: js ">console.log(`string text line 1 string text line 2`); // "string text line 1 // string text line 2"</pre> @@ -49,7 +49,7 @@ string text line 2`); <p>표현식(expression)을 일반 문자열(normal strings)에 삽입하기 위해서, 당신은 다음의 문법을 사용할 수 있을 것입니다.</p> -<pre class="brush: js notranslate">var a = 5; +<pre class="brush: js ">var a = 5; var b = 10; console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + "."); // "Fifteen is 15 and @@ -57,7 +57,7 @@ console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + "."); <p>template literals을 이용하면, 이를 더욱 읽기 쉽도록 다음과 같은 문법 설탕(syntactic sugar) 을 활용할 수 있습니다.</p> -<pre class="brush: js notranslate">var a = 5; +<pre class="brush: js ">var a = 5; var b = 10; console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`); @@ -72,19 +72,19 @@ not ${2 * a + b}.`); <p>In ES5:</p> -<pre class="notranslate"><code>var classes = 'header' +<pre ><code>var classes = 'header' classes += (isLargeScreen() ? '' : item.isCollapsed ? ' icon-expander' : ' icon-collapser');</code></pre> <p>ES2015에서 중첩(nesting)없이 템플릿 리터럴 사용한 경우:</p> -<pre class="notranslate"><code>const classes = `header ${ isLargeScreen() ? '' : +<pre ><code>const classes = `header ${ isLargeScreen() ? '' : (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;</code></pre> <p>ES2015에서 중첩된(nested) 템플릿 리터럴을 사용한 경우:</p> -<pre class="notranslate"><code>const classes = `header ${ isLargeScreen() ? '' : +<pre ><code>const classes = `header ${ isLargeScreen() ? '' : `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;</code></pre> @@ -93,7 +93,7 @@ classes += (isLargeScreen() ? <p>template literals 의 더욱 발전된 한 형태는 <em>tagged</em> templates 입니다. 태그를 사용하면 템플릿 리터럴을 함수로 파싱 할 수 있습니다. 태그 함수의 첫 번째 인수는 문자열 값의 배열을 포함합니다. 나머지 인수는 표현식과 관련됩니다. 결국 함수는 조작 된 문자열을 반환 할 수 있습니다 (또는 다음 예제에서 설명하는 것과 완전히 다른 결과를 반환 할 수 있습니다). function 이름은 원하는 어떤 것이든 가능합니다.</p> -<pre class="notranslate"><code>var person = 'Mike'; +<pre ><code>var person = 'Mike'; var age = 28; function myTag(strings, personExp, ageExp) { @@ -126,7 +126,7 @@ console.log(output); <p>다음 예시에서 보여지듯이, Tag function 들은 string 을 반환할 필요는 없습니다.</p> -<pre class="brush: js notranslate">function template(strings, ...keys) { +<pre class="brush: js ">function template(strings, ...keys) { return (function(...values) { var dict = values[values.length - 1] || {}; var result = [strings[0]]; @@ -148,7 +148,7 @@ t2Closure('Hello', {foo: 'World'}); // "Hello World!" <p>태그 지정된 템플릿의 첫 번째 함수 인수에서 사용할 수있는 특별한 <code>raw</code> property을 사용하면 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Using_special_characters_in_strings">escape sequences</a> 처리하지 않고 원시 문자열을 입력 한대로 액세스 할 수 있습니다.</p> -<pre class="notranslate"><code>function tag(strings) { +<pre ><code>function tag(strings) { console.log(strings.raw[0]); } @@ -158,7 +158,7 @@ tag`string text line 1 \n string text line 2`; <p>추가로, default template function 과 string 병합으로 생성될 것 같은 raw string 을 생성하기 위한 {{jsxref("String.raw()")}} method가 존재합니다.</p> -<pre class="notranslate"><code>var str = String.raw`Hi\n${2+3}!`; +<pre ><code>var str = String.raw`Hi\n${2+3}!`; // "Hi\n5!" str.length; @@ -184,7 +184,7 @@ str.split('').join(','); <p>이는 다음과 같은 tagged template이 문제가 된다는 것을 의미하는데, ECMAScript문법에 따라, parser는 유효한 유니 코드 탈출 시퀀스가 있는지 확인하지만 형식이 잘못되었기 때문에 오류가 발생합니다.</p> -<pre class="notranslate"><code>latex`\unicode` +<pre ><code>latex`\unicode` // Throws in older ECMAScript versions (ES2016 and earlier) // SyntaxError: malformed Unicode character escape sequence</code></pre> @@ -194,7 +194,7 @@ str.split('').join(','); <p>그러나 illegal escape sequences는 여전히 "cooked"라고 표현되어야합니다. "cooked"배열의 {{jsxref ( "undefined")}} 요소로 나타납니다 :</p> -<pre class="notranslate"><code>function latex(str) { +<pre ><code>function latex(str) { return { "cooked": str[0], "raw": str.raw[0] } } diff --git a/files/ko/web/javascript/reference/trailing_commas/index.html b/files/ko/web/javascript/reference/trailing_commas/index.html index 020febe480..faf27b091a 100644 --- a/files/ko/web/javascript/reference/trailing_commas/index.html +++ b/files/ko/web/javascript/reference/trailing_commas/index.html @@ -30,7 +30,7 @@ translation_of: Web/JavaScript/Reference/Trailing_commas <p>JavaScript는 배열에 나타나는 trailing comma를 무시합니다.</p> -<pre class="brush: js notranslate">var arr = [ +<pre class="brush: js ">var arr = [ 1, 2, 3, @@ -41,7 +41,7 @@ arr.length; // 3</pre> <p>trailing comma가 여러 개 있을 경우 빈 슬롯("구멍")이 생깁니다. 구멍이 있는 배열을 성기다(sparse)고 합니다(조밀한(dense) 배열에는 구멍이 없습니다). {{jsxref("Array.prototype.forEach()")}}나 {{jsxref("Array.prototype.map()")}}을 이용해 배열을 순회할 때는 빈 슬롯을 무시합니다.</p> -<pre class="brush: js notranslate">var arr = [1, 2, 3,,,]; +<pre class="brush: js ">var arr = [1, 2, 3,,,]; arr.length; // 5 </pre> @@ -49,7 +49,7 @@ arr.length; // 5 <p>ECMAScript 5부터는 객체 리터럴에도 trailing comma를 사용할 수 있습니다.</p> -<pre class="brush: js notranslate">var object = { +<pre class="brush: js ">var object = { foo: "bar", baz: "qwerty", age: 42, @@ -63,7 +63,7 @@ arr.length; // 5 <p>아래의 두 함수 정의는 모두 유효하며, 서로 같습니다. Trailing comma는 함수 정의의 <code>length</code> 속성이나 <code>arguments</code> 객체에 영향을 주지 않습니다.</p> -<pre class="brush: js notranslate">function f(p) {} +<pre class="brush: js ">function f(p) {} function f(p,) {} (p) => {}; @@ -72,7 +72,7 @@ function f(p,) {} <p>Trailing comma는 클래스나 객체의 <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">메소드 정의</a>에도 사용할 수 있습니다.</p> -<pre class="brush: js notranslate">class C { +<pre class="brush: js ">class C { one(a,) {}, two(a, b,) {}, } @@ -87,7 +87,7 @@ var obj = { <p>아래의 두 함수 호출은 모두 유효하며, 서로 같습니다.</p> -<pre class="brush: js notranslate">f(p); +<pre class="brush: js ">f(p); f(p,); Math.max(10, 20); @@ -98,7 +98,7 @@ Math.max(10, 20,); <p>함수의 매개변수 정의나 호출에 쉼표만 있을 경우 {{Jsxref("SyntaxError")}}가 발생합니다. 또한, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest 매개변수</a>를 사용할 때는 trailing comma를 사용할 수 없습니다.</p> -<pre class="brush: js example-bad notranslate">function f(,) {} // SyntaxError: missing formal parameter +<pre class="brush: js example-bad ">function f(,) {} // SyntaxError: missing formal parameter (,) => {}; // SyntaxError: expected expression, got ',' f(,) // SyntaxError: expected expression, got ',' @@ -110,7 +110,7 @@ function f(...p,) {} // SyntaxError: parameter after rest parameter <p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">구조 분해 할당</a>의 좌변에도 trailing comma를 사용할 수 있습니다.</p> -<pre class="brush: js notranslate">// Trailing comma가 있는 배열 구조 분해 +<pre class="brush: js ">// Trailing comma가 있는 배열 구조 분해 [a, b,] = [1, 2]; // Trailing comma가 있는 객체 구조 분해 @@ -123,7 +123,7 @@ var {p, q,} = o; <p>Rest 원소가 있을 경우 역시 {{jsxref("SyntaxError")}}가 발생합니다.</p> -<pre class="brush: js example-bad notranslate">var [a, ...b,] = [1, 2, 3]; +<pre class="brush: js example-bad ">var [a, ...b,] = [1, 2, 3]; // SyntaxError: rest element may not have a trailing comma</pre> <h2 id="JSON에서의_trailing_comma">JSON에서의 trailing comma</h2> @@ -132,7 +132,7 @@ var {p, q,} = o; <p>아래의 두 줄 모두 <code>SyntaxError</code>를 발생합니다.</p> -<pre class="brush: js example-bad notranslate">JSON.parse('[1, 2, 3, 4, ]'); +<pre class="brush: js example-bad ">JSON.parse('[1, 2, 3, 4, ]'); JSON.parse('{"foo" : 1, }'); // SyntaxError JSON.parse: unexpected character // at line 1 column 14 of the JSON data @@ -140,7 +140,7 @@ JSON.parse('{"foo" : 1, }'); <p>JSON을 올바르게 파싱하려면 trailing comma를 제거해야 합니다.</p> -<pre class="brush: js example-good notranslate">JSON.parse('[1, 2, 3, 4 ]'); +<pre class="brush: js example-good ">JSON.parse('[1, 2, 3, 4 ]'); JSON.parse('{"foo" : 1 }');</pre> <h2 id="명세">명세</h2> |