diff options
Diffstat (limited to 'files/ko/web/javascript/reference/operators')
5 files changed, 38 insertions, 38 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> |