diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
commit | da78a9e329e272dedb2400b79a3bdeebff387d47 (patch) | |
tree | e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/ko/web/javascript/reference | |
parent | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff) | |
download | translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2 translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip |
initial commit
Diffstat (limited to 'files/ko/web/javascript/reference')
500 files changed, 68302 insertions, 0 deletions
diff --git a/files/ko/web/javascript/reference/about/index.html b/files/ko/web/javascript/reference/about/index.html new file mode 100644 index 0000000000..f558451826 --- /dev/null +++ b/files/ko/web/javascript/reference/about/index.html @@ -0,0 +1,51 @@ +--- +title: 소개 +slug: Web/JavaScript/Reference/About +translation_of: Web/JavaScript/Reference/About +--- +<p>{{JsSidebar}}<br> + The JavaScript reference serves as a repository of facts about the JavaScript language. The entire language is described here in detail. As you write JavaScript code, you'll refer to these pages often (thus the title "JavaScript reference"). If you're learning JavaScript, or need help understanding some of its capabilities or features, check out the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">JavaScript guide</a>.</p> + +<p>The JavaScript language is intended to be used within some larger environment, be it a browser, server-side scripts, or similar. For the most part, this reference attempts to be environment-agnostic and does not target a web browser environment.</p> + +<h2 id="Where_to_find_JavaScript_information">Where to find JavaScript information</h2> + +<p>JavaScript documentation of core language features (pure <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources">ECMAScript</a>, for the most part) includes the following:</p> + +<ul> + <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">JavaScript guide</a></li> + <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference">JavaScript reference</a></li> +</ul> + +<p>If you are new to JavaScript, start with the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">guide</a>. Once you have a firm grasp of the fundamentals, you can use the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference">reference</a> to get more details on individual objects and language constructs.</p> + +<h2 id="Structure_of_the_reference">Structure of the reference</h2> + +<p>In the JavaScript reference you can find the following chapters:</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects">Standard built-in objects</a></dt> + <dd>This chapter documents all the JavaScript standard built-in objects, along with their methods and properties.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements">Statements and declarations</a></dt> + <dd>JavaScript applications consist of statements with an appropriate syntax. A single statement may span multiple lines. Multiple statements may occur on a single line if each statement is separated by a semicolon. This isn't a keyword, but a group of keywords.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators">Expressions and operators</a></dt> + <dd>This chapter documents all the JavaScript language operators, expressions and keywords.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></dt> + <dd>Chapter about JavaScript functions.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></dt> + <dd>Chapter about JavaScript classes introduced in ECMAScript 2015.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors">Errors</a></dt> + <dd>Chapter about specific errors, exceptions and warnings thrown by JavaScript.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript">New in JavaScript</a></dt> + <dd>Chapter about JavaScript version history.</dd> +</dl> + +<h3 id="More_reference_pages">More reference pages</h3> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Deprecated and obsolete features</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li> +</ul> + +<p> </p> diff --git a/files/ko/web/javascript/reference/classes/class_fields/index.html b/files/ko/web/javascript/reference/classes/class_fields/index.html new file mode 100644 index 0000000000..959c65fada --- /dev/null +++ b/files/ko/web/javascript/reference/classes/class_fields/index.html @@ -0,0 +1,396 @@ +--- +title: Class fields +slug: Web/JavaScript/Reference/Classes/Class_fields +translation_of: Web/JavaScript/Reference/Classes/Public_class_fields +--- +<div>{{JsSidebar("Classes")}}</div> + +<div class="note"> +<p><strong>This page describes experimental features.</strong></p> + +<p>Both Public and private field declarations are an <a href="https://github.com/tc39/proposal-class-fields">experimental feature (stage 3)</a> proposed at <a href="https://tc39.github.io/beta/">TC39</a>, the JavaScript standards committee.</p> + +<p>Support in browsers is limited, but the feature can be used through a build step with systems like <a href="https://babeljs.io/">Babel</a>. See the <a href="#Browser_compatibility">compat information</a> below.</p> +</div> + +<h2 id="Public_fields">Public fields</h2> + +<p>static fields와 instance의 public fields 는 둘 다 writable, enumerable, configurable 한 프로퍼티들이다. 예를들면, 정 반대인 private 과는 다르게, unlike their private counterparts, static fields는 프로토타입 상속에 관여한다.</p> + +<h3 id="Public_static_fields">Public static fields</h3> + +<p>Public static fields 는 클래스에서 생성하는 모든 인스턴스에 대한 필드가 아닌, 클래스마다 단 한개의 필드가 존재하기를 원할 때 유용하게 사용할 수 있다. Public fields는 캐시, 고정된 설정값, 또는 인스턴스 간 복제할 필요가 없는 어떤 데이터 등에 유용하게 쓰일 수 있다.</p> + +<p>Public static fields are declared using the <code>static</code> keyword. They are added to the class constructor at the time of class evaluation using {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}. They are accessed again from the class constructor.</p> + +<pre class="brush: js">class ClassWithStaticField { + static staticField = 'static field' +} + +console.log(ClassWithStaticField.staticField) +// expected output: "static field" +</pre> + +<p>Fields without initializers are initialized to <code>undefined</code>.</p> + +<pre class="brush: js">class ClassWithStaticField { + static staticField +} + +console.assert(ClassWithStaticField.hasOwnProperty('staticField')) +console.log(ClassWithStaticField.staticField) +// expected output: "undefined"</pre> + +<p>Public static fields are not reinitialized on subclasses, but can be accessed via the prototype chain.</p> + +<pre class="brush: js">class ClassWithStaticField { + static baseStaticField = 'base field' +} + +class SubClassWithStaticField extends ClassWithStaticField { + static subStaticField = 'sub class field' +} + +console.log(SubClassWithStaticField.subStaticField) +// expected output: "sub class field" + +console.log(SubClassWithStaticField.baseStaticField) +// expected output: "base field"</pre> + +<p>When initializing fields, <code>this</code> refers to the class constructor. You can also reference it by name, and use <code>super</code> to get the superclass constructor (if one exists).</p> + +<pre class="brush: js">class ClassWithStaticField { + static baseStaticField = 'base static field' + static anotherBaseStaticField = this.baseStaticField + + static baseStaticMethod() { return 'base static method output' } +} + +class SubClassWithStaticField extends ClassWithStaticField { + static subStaticField = super.baseStaticMethod() +} + +console.log(ClassWithStaticField.anotherBaseStaticField) +// expected output: "base static field" + +console.log(SubClassWithStaticField.subStaticField) +// expected output: "base static method output" +</pre> + +<h3 id="Public_instance_fields">Public instance fields</h3> + +<p>Public instance fields exist on every created instance of a class. By declaring a public field, you can ensure the field is always present, and the class definition is more self-documenting.</p> + +<p>Public instance fields are added with {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} either at construction time in the base class (before the constructor body runs), or just after <code>super()</code> returns in a subclass.</p> + +<pre class="brush: js">class ClassWithInstanceField { + instanceField = 'instance field' +} + +const instance = new ClassWithInstanceField() +console.log(instance.instanceField) +// expected output: "instance field"</pre> + +<p>Fields without initializers are initialized to <code>undefined</code>.</p> + +<pre class="brush: js">class ClassWithInstanceField { + instanceField +} + +const instance = new ClassWithInstanceField() +console.assert(instance.hasOwnProperty('instanceField')) +console.log(instance.instanceField) +// expected output: "undefined"</pre> + +<p>Like properties, field names may be computed.</p> + +<pre class="brush: js">const PREFIX = 'prefix' + +class ClassWithComputedFieldName { + [`${PREFIX}Field`] = 'prefixed field' +} + +const instance = new ClassWithComputedFieldName() +console.log(instance.prefixField) +// expected output: "prefixed field"</pre> + +<p>When initializing fields <code>this</code> refers to the class instance under construction. Just as in public instance methods, if you're in a subclass you can access the superclass prototype using <code>super</code>.</p> + +<pre class="brush: js">class ClassWithInstanceField { + baseInstanceField = 'base field' + anotherBaseInstanceField = this.baseInstanceField + baseInstanceMethod() { return 'base method output' } +} + +class SubClassWithInstanceField extends ClassWithInstanceField { + subInstanceField = super.baseInstanceMethod() +} + +const base = new ClassWithInstanceField() +const sub = new SubClassWithInstanceField() + +console.log(base.anotherBaseInstanceField) +// expected output: "base field" + +console.log(sub.subInstanceField) +// expected output: "base method output"</pre> + +<h2 id="Public_methods">Public methods</h2> + +<h3 id="Public_static_methods">Public static methods</h3> + +<p>The <code><strong>static</strong></code> keyword defines a static method for a class. Static methods aren't called on instances of the class. Instead, they're called on the class itself. These are often utility functions, such as functions to create or clone objects.</p> + +<p>{{EmbedInteractiveExample("pages/js/classes-static.html")}}</p> + +<div class="hidden"> +<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> +</div> + +<p>The static methods are added to the class constructor with {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} at class evaluation time. These methods are writable, non-enumerable, and configurable.</p> + +<h3 id="Public_instance_methods">Public instance methods</h3> + +<p>As the name implies, public instance methods are methods available on class instances.</p> + +<pre class="brush: js">class ClassWithPublicInstanceMethod { + publicMethod() { + return 'hello world' + } +} + +const instance = new ClassWithPublicInstanceMethod() +console.log(instance.publicMethod()) +// expected output: "hello world"</pre> + +<p>Public instance methods are added to the class prototype at the time of class evaluation using {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}. They are writable, non-enumerable, and configurable.</p> + +<p>You may make use of generator, async, and async generator functions.</p> + +<pre class="brush: js">class ClassWithFancyMethods { + *generatorMethod() { } + async asyncMethod() { } + async *asyncGeneratorMethod() { } +}</pre> + +<p>Inside instance methods, <code>this</code> refers to the instance itself. In subclasses, <code>super</code> lets you access the superclass prototype, allowing you to call methods from the superclass.</p> + +<pre class="brush: js">class BaseClass { + msg = 'hello world' + basePublicMethod() { + return this.msg + } +} + +class SubClass extends BaseClass { + subPublicMethod() { + return super.basePublicMethod() + } +} + +const instance = new SubClass() +console.log(instance.subPublicMethod()) +// expected output: "hello world" +</pre> + +<p>Getters and setters are special methods that bind to a class property and are called when that property is accessed or set. Use the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a> syntax to declare a public instance getter or setter.</p> + +<pre class="brush: js">class ClassWithGetSet { + #msg = 'hello world' + get msg() { + return this.#msg + } + set msg(x) { + this.#msg = `hello ${x}` + } +} + +const instance = new ClassWithGetSet() +console.log(instance.msg) +// expected output: "hello world" + +instance.msg = 'cake' +console.log(instance.msg) +// expected output: "hello cake" +</pre> + +<h2 id="Private_fields">Private fields</h2> + +<h3 id="Private_static_fields">Private static fields </h3> + +<p>Private fields are accessible on the class constructor from inside the class declaration itself.</p> + +<p>The limitation of static variables being called by only static methods still holds. </p> + +<pre class="brush: js">class ClassWithPrivateStaticField { + static #PRIVATE_STATIC_FIELD + + static publicStaticMethod() { + ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42 + return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD + } +} + +assert(ClassWithPrivateStaticField.publicStaticMethod() === 42)</pre> + +<p>Private static fields are added to the class constructor at class evaluation time.</p> + +<p>There is a provenance restriction on private static fields. Only the class which defines the private static field can access the field.</p> + +<p>This can lead to unexpected behaviour when using <strong><code>this</code></strong>.</p> + +<pre class="brush: js">class BaseClassWithPrivateStaticField { + static #PRIVATE_STATIC_FIELD + + static basePublicStaticMethod() { + this.#PRIVATE_STATIC_FIELD = 42 + return this.#PRIVATE_STATIC_FIELD + } +} + +class SubClass extends BaseClassWithPrivateStaticField { } + +assertThrows(() => SubClass.basePublicStaticMethod(), TypeError) +</pre> + +<h3 id="Private_instance_fields">Private instance fields</h3> + +<p>Private instance fields are declared with <strong># names </strong>(pronounced "<em>hash names</em>"), which are identifiers prefixed with <code>#</code>. The <code>#</code> is a part of the name itself. It is used for declaration and accessing as well.</p> + +<p>The encapsulation is enforced by the language. It is a syntax error to refer to <code>#</code> names from out of scope.</p> + +<pre class="brush: js">class ClassWithPrivateField { + #privateField + + constructor() { + this.#privateField = 42 + this.#randomField = 666 // Syntax error + } +} + +const instance = new ClassWithPrivateField() +instance.#privateField === 42 // Syntax error +</pre> + +<h2 id="Private_Methods">Private Methods</h2> + +<h3 id="Private_static_methods">Private static methods</h3> + +<p>Like their public equivalent, private static methods are called on the class itself, not instances of the class. Like private static fields, they are only accessible from inside the class declaration.</p> + +<p>Private static methods may be generator, async, and async generator functions.</p> + +<pre class="brush: js">class ClassWithPrivateStaticMethod { + static #privateStaticMethod() { + return 42 + } + + static publicStaticMethod1() { + return ClassWithPrivateStaticMethod.#privateStaticMethod(); + } + + static publicStaticMethod2() { + return this.#privateStaticMethod(); + } +} + +assert(ClassWithPrivateStaticField.publicStaticMethod1() === 42); +assert(ClassWithPrivateStaticField.publicStaticMethod2() === 42); +</pre> + +<p>This can lead to unexpected behaviour when using <strong><code>this</code></strong>(because <code>this</code> binding rule applies).</p> + +<pre class="brush: js">class Base { + static #privateStaticMethod() { + return 42; + } + static publicStaticMethod1() { + return Base.#privateStaticMethod(); + } + static publicStaticMethod2() { + return this.#privateStaticMethod(); + } +} + +class Derived extends Base {} + +console.log(Derived.publicStaticMethod1()); // 42 +console.log(Derived.publicStaticMethod2()); // TypeError +</pre> + +<h3 id="Private_instance_methods">Private instance methods</h3> + +<p>Private instance methods are methods available on class instances whose access is restricted in the same manner as private instance fields.</p> + +<pre class="brush: js">class ClassWithPrivateMethod { + #privateMethod() { + return 'hello world' + } + + getPrivateMessage() { + return this.#privateMethod() + } +} + +const instance = new ClassWithPrivateMethod() +console.log(instance.getPrivateMessage()) +// expected output: "hello world"</pre> + +<p>Private instance methods may be generator, async, or async generator functions. Private getters and setters are also possible:</p> + +<pre class="brush: js">class ClassWithPrivateAccessor { + #message + + get #decoratedMessage() { + return `✨${this.#message}✨` + } + set #decoratedMessage(msg) { + this.#message = msg + } + + constructor() { + this.#decoratedMessage = 'hello world' + console.log(this.#decoratedMessage) + } +} + +new ClassWithPrivateAccessor(); +// expected output: "✨hello world✨" +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td><a href="https://tc39.es/proposal-class-fields/#prod-FieldDefinition">FieldDefinition production</a></td> + <td>Stage 3</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<h3 id="Public_class_fields">Public class fields</h3> + + + +<p>{{Compat("javascript.classes.public_class_fields")}}</p> + +<h3 id="Private_class_fields">Private class fields</h3> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("javascript.classes.private_class_fields")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html">The Semantics of All JS Class Elements</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/classes/constructor/index.html b/files/ko/web/javascript/reference/classes/constructor/index.html new file mode 100644 index 0000000000..f07dbd43b9 --- /dev/null +++ b/files/ko/web/javascript/reference/classes/constructor/index.html @@ -0,0 +1,128 @@ +--- +title: constructor +slug: Web/JavaScript/Reference/Classes/constructor +tags: + - Classes + - ECMAScript 2015 + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Classes/constructor +--- +<div>{{jsSidebar("Classes")}}</div> + +<p><strong><code>constructor</code></strong> 메서드는 {{jsxref("Statements/class", "class")}} 내에서 객체를 생성하고 초기화하기 위한 특별한 메서드입니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/classes-constructor.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">constructor([<em>arguments</em>]) { ... } +</pre> + +<h2 id="설명">설명</h2> + +<p>클래스는 <code>constructor</code>라는 이름을 가진 특별한 메서드를 하나씩만 가질 수 있습니다. 두 개 이상의 <code>constructor</code> 메서드는 {{jsxref("SyntaxError")}}를 유발합니다.</p> + +<p>생성자 메서드는 {{jsxref("Operators/super", "super")}} 키워드를 사용하여 상위 클래스의 생성자 메서드를 호출할 수 있습니다.</p> + +<p>생성자 메서드를 지정하지 않은 경우엔 기본 생성자 메서드를 사용합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="constructor_메서드_사용하기"><code>constructor</code> 메서드 사용하기</h3> + +<pre class="brush: js">class Square extends Polygon { + constructor(length) { + // length로 다각형의 넓이와 높이를 정의하기 위해 부모클래스의 생성자를 호출합니다. + super(length, length); + // Note: 파생 클래스에서, 'this'를 사용하기 전에는 반드시 super()를 + // 호출하여야 합니다. 그렇지 않을 경우 참조에러가 발생합니다. + this.name = 'Square'; + } + + get area() { + return this.height * this.width; + } + + set area(value) { + this.area = value; + } +}</pre> + +<h3 id="다른예제">다른예제</h3> + +<pre class="brush: js">class Polygon { + constructor() { + this.name = "Polygon"; + } +} + +class Square extends Polygon { + constructor() { + super(); + } +} + +class Rectangle {} + +Object.setPrototypeOf(Square.prototype, Rectangle.prototype); + +console.log(Object.getPrototypeOf(Square.prototype) === Polygon.prototype); //false +console.log(Object.getPrototypeOf(Square.prototype) === Rectangle.prototype); //true + +let newInstance = new Square(); +console.log(newInstance.name); //Polygon</pre> + +<p>여기서 <strong>Square</strong> 클래스의 프로토 타입이 변경되었지만 사각형의 새 인스턴스가 만들어 질 때 이전 기본 클래스 인 <strong>Polygon</strong>의 생성자가 호출됩니다.</p> + +<h3 id="기본_생성자">기본 생성자</h3> + +<p>만약 생성자를 지정하지 않을 경우 기본 생성자 메서드를 사용합니다. 기본 클래스(즉, 아무것도 상속하지 않는 클래스)의 기본 생성자 메서드는 다음과 같습니다.</p> + +<pre class="brush: js">constructor() {} +</pre> + +<p>파생 클래스의 경우, 기본 생성자는 다음과 같습니다.</p> + +<pre class="brush: js">constructor(...args) { + super(...args); +}</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.classes.constructor")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Operators/super", "super")}}</li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> 표현식</a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> 선언문</a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Classes">클래스</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/classes/extends/index.html b/files/ko/web/javascript/reference/classes/extends/index.html new file mode 100644 index 0000000000..e1ae2eac31 --- /dev/null +++ b/files/ko/web/javascript/reference/classes/extends/index.html @@ -0,0 +1,112 @@ +--- +title: extends +slug: Web/JavaScript/Reference/Classes/extends +tags: + - Classes + - ECMAScript6 + - JavaScript +translation_of: Web/JavaScript/Reference/Classes/extends +--- +<div>{{jsSidebar("Classes")}}</div> + +<p><strong><code>extends</code></strong> 키워드는 클래스를 다른 클래스의 자식으로 만들기 위해 <a href="/ko/docs/Web/JavaScript/Reference/Statements/class" title="class declarations">class 선언</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/class" title="class expressions">class 식</a>에 사용됩니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/classes-extends.html", "taller")}}</p> + +<div class="hidden"> +<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">class ChildClass extends ParentClass { ... }</pre> + +<h2 id="설명">설명</h2> + +<p><code>extends</code> 키워드는 내장 객체뿐만 아니라 사용자 정의 클래스를 하위 클래스로 만들기 위해 사용될 수 있습니다.</p> + +<p>확장( 클래스)의 <code>.prototype</code>은 {{jsxref("Object")}} 또는 {{jsxref("null")}}이어야 합니다.</p> + +<h2 id="예">예</h2> + +<h3 id="extends_사용하기"><code>extends</code> 사용하기</h3> + +<p>첫 번째 예는 <code>Polygon</code> 클래스로부터 <code>Square</code> 클래스를 만듭니다. 이 예는 <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(source)</a>에서 발췌했습니다.</p> + +<pre class="brush: js">class Square extends Polygon { + constructor(length) { + // 여기서, length와 함께 부모 클래스의 생성자를 호출 + // Polygon의 너비 및 높이가 제공됨 + super(length, length); + // 주의: 파생 클래스에서, super()가 먼저 호출되어야 'this'를 + // 사용할 수 있습니다. 이를 빼먹으면 참조 오류가 발생합니다. + this.name = 'Square'; + } + + get area() { + return this.height * this.width; + } + + set area(value) { + this.area = value; + } +}</pre> + +<h3 id="내장_객체에_extends_사용하기">내장 객체에 <code>extends</code> 사용하기</h3> + +<p>이 예제는 내장 객체 {{jsxref("Date")}}를 확장합니다. 이 예제는 <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(source)</a>에서 발췌했습니다.</p> + +<pre class="brush: js">class myDate extends Date { + constructor() { + super(); + } + + getFormattedDate() { + var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; + return this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear(); + } +}</pre> + +<h3 id="null_확장"><code>null</code> 확장</h3> + +<p>{{jsxref("null")}}에서 확장은 prototype 객체가 {{jsxref("Object.prototype")}}으로부터 상속받지 않은 것을 제외하면 보통 클래스처럼 동작합니다.</p> + +<pre class="brush: js">class nullExtends extends null { + constructor() {} +} + +Object.getPrototypeOf(nullExtends); // Function.prototype +Object.getPrototypeOf(nullExtends.prototype) // null</pre> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-class-definitions', 'extends')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.classes.extends")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Reference/Classes">Classes</a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/super">super</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/classes/index.html b/files/ko/web/javascript/reference/classes/index.html new file mode 100644 index 0000000000..59f72f7652 --- /dev/null +++ b/files/ko/web/javascript/reference/classes/index.html @@ -0,0 +1,402 @@ +--- +title: Classes +slug: Web/JavaScript/Reference/Classes +translation_of: Web/JavaScript/Reference/Classes +--- +<div>{{JsSidebar("Classes")}}</div> + +<p>Class는 객체를 생성하기 위한 템플릿입니다. 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화합니다. 자바스크립트에서 클래스는 프로토타입을 이용해서 만들어졌지만 ES5의 클래스 의미와는 다른 문법과 의미를 가집니다.</p> + +<h2 id="Class_정의">Class 정의</h2> + +<p>Class는 사실 "특별한 {{jsxref("Functions", "함수", "", "true")}}"입니다. 함수를 {{jsxref("Operators/function", "함수 표현식", "", "true")}}과 {{jsxref("Statements/function", "함수 선언", "", "true")}}으로 정의할 수 있듯이 class 문법도 {{jsxref("Operators/class", "class 표현식", "", "true")}} and {{jsxref("Statements/class", "class 선언", "", "true")}} 두 가지 방법을 제공합니다.</p> + +<h3 id="Class_선언">Class 선언</h3> + +<p>Class를 정의하는 한 가지 방법은 <strong>class 선언</strong>을 이용하는 것입니다. class를 선언하기 위해서는 클래스의 이름(여기서 "Rectangle")과 함께 <code>class</code> 키워드를 사용해야 합니다.</p> + +<pre class="brush: js notranslate">class Rectangle { + constructor(height, width) { + this.height = height; + this.width = width; + } +}</pre> + +<h4 id="Hoisting">Hoisting</h4> + +<p><strong>함수 선언</strong>과 <strong>클래스 선언</strong>의 중요한 차이점은 함수 선언의 경우 {{Glossary("Hoisting", "호이스팅")}}이 일어나지만, 클래스 선언은 그렇지 않다는 것입니다. 클래스를 사용하기 위해서는 클래스를 먼저 선언 해야 합니다. 그렇지 않으면, 다음 코드는 {{jsxref("ReferenceError")}}를 던질 것입니다. :</p> + +<pre class="brush: js example-bad notranslate">const p = new Rectangle(); // ReferenceError + +class Rectangle {} +</pre> + +<h3 id="Class_표현식">Class 표현식</h3> + +<p><strong>Class 표현식</strong>은 class를 정의하는 또 다른 방법입니다. Class 표현식은 이름을 가질 수도 있고, 갖지 않을 수도 있습니다. 이름을 가진 class 표현식의 이름은 클래스 body의 local scope에 한해 유효합니다. (하지만, 클래스의 (인스턴스 이름이 아닌) {{jsxref("Function.name", "name")}} 속성을 통해 찾을 수 있습니다).</p> + +<pre class="brush: js notranslate">// unnamed +let Rectangle = class { + constructor(height, width) { + this.height = height; + this.width = width; + } +}; +console.log(Rectangle.name); +// 출력: "Rectangle" + +// named +let Rectangle = class Rectangle2 { + constructor(height, width) { + this.height = height; + this.width = width; + } +}; +console.log(Rectangle.name); +// 출력: "Rectangle2" +</pre> + +<div class="note"> +<p><strong>참고:</strong> 클래스 <strong>표현식</strong>에는 {{anch ( "Class 선언")}} 섹션에 설명된 것과 동일한 호이스팅 제한이 적용됩니다.</p> +</div> + +<h2 id="Class_body_와_메서드_정의">Class body 와 메서드 정의</h2> + +<p>Class body는 중괄호 <code>{}</code> 로 묶여 있는 안쪽 부분입니다. 이곳은 여러분이 메서드나 constructor와 같은 class 멤버를 정의할 곳입니다.</p> + +<h3 id="Strict_mode">Strict mode</h3> + +<p>클래스의 본문(body)은 {{jsxref("Strict_mode", "strict mode", "", "true")}}에서 실행됩니다. 즉, 여기에 적힌 코드는 성능 향상을 위해 더 엄격한 문법이 적용됩니다. 그렇지 않으면, 조용히 오류가 발생할 수 있습니다. 특정 키워드는 미래의 ECMAScript 버전용으로 예약됩니다.</p> + +<h3 id="Constructor_생성자">Constructor (생성자)</h3> + +<p>{{jsxref("Classes/constructor", "constructor", "", "true")}} 메서드는 <code>class</code> 로 생성된 객체를 생성하고 초기화하기 위한 특수한 메서드입니다. "constructor" 라는 이름을 가진 특수한 메서드는 클래스 안에 한 개만 존재할 수 있습니다. 만약 클래스에 여러 개의 <code>constructor</code> 메서드가 존재하면 {{jsxref("SyntaxError")}} 가 발생할 것입니다.</p> + +<p>constructor는 부모 클래스의 constructor를 호출하기 위해 <code>super</code> 키워드를 사용할 수 있습니다.</p> + +<h3 id="프로토타입_메서드">프로토타입 메서드</h3> + +<p>{{jsxref("Functions/Method_definitions", "메서드 정의", "", "true")}}도 참조해보세요.</p> + +<pre class="brush: js notranslate">class Rectangle { + constructor(height, width) { + this.height = height; + this.width = width; + } + // Getter + get area() { + return this.calcArea(); + } + // 메서드 + calcArea() { + return this.height * this.width; + } +} + +const square = new Rectangle(10, 10); + +console.log(square.area); // 100</pre> + +<h3 id="정적_메서드와_속성">정적 메서드와 속성</h3> + +<p>{{jsxref("Classes/static", "static", "", "true")}} 키워드는 클래스를 위한 정적(static) 메서드를 정의합니다. 정적 메서드는 클래스의 인스턴스화(<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#The_object_(class_instance)" title='An example of class instance is "var john = new Person();"'>instantiating</a>) 없이 호출되며, 클래스의 인스턴스에서는 호출할 수 없습니다. 정적 메서드는 어플리케이션(application)을 위한 유틸리티(utility) 함수를 생성하는 데 주로 사용됩니다. 반면, 정적 속성은 캐시, 고정 환경설정 또는 인스턴스 간에 복제할 필요가 없는 기타 데이터에 유용합니다.</p> + +<pre class="brush: js notranslate">class Point { + constructor(x, y) { + this.x = x; + this.y = y; + } + + static displayName = "Point"; + static distance(a, b) { + const dx = a.x - b.x; + const dy = a.y - b.y; + + return Math.hypot(dx, dy); + } +} + +const p1 = new Point(5, 5); +const p2 = new Point(10, 10); +p1.displayName; // undefined +p1.distance; // undefined +p2.displayName; // undefined +p2.distance; // undefined + +console.log(Point.displayName); // "Point" +console.log(Point.distance(p1, p2)); // 7.0710678118654755</pre> + +<h3 id="프로토타입_및_정적_메서드를_사용한_this_바인딩">프로토타입 및 정적 메서드를 사용한 <code>this</code> 바인딩</h3> + +<p>메서드를 변수에 할당 한 다음 호출하는 것과 같이, 정적 메서드나 프로토타입 메서드가 {{jsxref("Operators/this", "this")}} 값 없이 호출될 때, <code>this</code> 값은 메서드 안에서 <code>undefined</code>가 됩니다. 이 동작은 {{jsxref("Strict_mode", "\"use strict\"")}} 명령어 없이도 같은 방식으로 동작하는데, <code>class</code> 문법 안에 있는 코드는 항상 strict mode 로 실행되기 때문입니다.</p> + +<pre class="brush: js notranslate">class Animal { + speak() { + return this; + } + static eat() { + return this; + } +} + +let obj = new Animal(); +obj.speak(); // the Animal object +let speak = obj.speak; +speak(); // undefined + +Animal.eat() // class Animal +let eat = Animal.eat; +eat(); // undefined</pre> + +<p>위에 작성된 코드를 전통적 방식의 함수기반의 non–strict mode 구문으로 재작성하면, <code>this</code> 메서드 호출은 기본적으로 {{Glossary("Global_object", "전역 객체")}}인 초기 <code>this</code> 값에 자동으로 바인딩 됩니다. Strict mode에서는 자동 바인딩이 발생하지 않습니다; <code>this</code> 값은 전달된 대로 유지됩니다.</p> + +<pre class="brush: js notranslate">function Animal() { } + +Animal.prototype.speak = function() { + return this; +} + +Animal.eat = function() { + return this; +} + +let obj = new Animal(); +let speak = obj.speak; +speak(); // global object (in non–strict mode) + +let eat = Animal.eat; +eat(); // global object (in non-strict mode)</pre> + +<h3 id="인스턴스_속성">인스턴스 속성</h3> + +<p>인스턴스 속성은 반드시 클래스 메서드 내에 정의되어야 합니다:</p> + +<pre class="brush: js notranslate">class Rectangle { + constructor(height, width) { + this.height = height; + this.width = width; + } +}</pre> + +<p>정적 (클래스사이드) 속성과 프로토타입 데이터 속성은 반드시 클래스 선언부 바깥쪽에서 정의되어야 합니다. </p> + +<pre class="brush: js notranslate">Rectangle.staticWidth = 20; +Rectangle.prototype.prototypeWidth = 25; +</pre> + +<h3 id="Field_선언">Field 선언</h3> + +<div class="blockIndicator warning"> +<p>public과 private 필드 선언은 자바스크립트 표준화 위원회에 <a href="https://github.com/tc39/proposal-class-fields">실험적 기능 (stage 3)</a> <a href="https://tc39.es/">TC39</a> 로 제안되어있습니다. 현재 이를 지원하는 브라우져는 제한적인 상태입니다만, <a href="https://babeljs.io/">Babel</a> 과 같은 build 시스템을 사용한다면 이 기능을 사용해볼 수 있습니다.</p> +</div> + +<h4 id="Public_필드_선언">Public 필드 선언</h4> + +<p>자바스크립트의 필드 선언 문법을 사용해서 위의 예제는 아래와 같이 다시 쓰여질 수 있습니다.</p> + +<pre class="brush: js notranslate">class Rectangle { + height = 0; + width; + constructor(height, width) { + this.height = height; + this.width = width; + } +}</pre> + +<p>필드를 먼저 선언함으로서 클래스 정의는 self-documenting에 가까워졌고 필드는 언제나 존재하는 상태가 됩니다.</p> + +<p>위의 예에서 봤듯이 필드 선언은 기본 값과 같이 선언될 수도 있습니다.</p> + +<p>자세한 내용은 {{jsxref("Classes/Public_class_fields", "public class fields", "", "true")}}를 참조하세요.</p> + +<h4 id="Private_필드_선언">Private 필드 선언</h4> + +<p>private 필드를 사용하면 아래와 같이 예제를 개선할 수 있습니다.</p> + +<pre class="brush: js notranslate">class Rectangle { + #height = 0; + #width; + constructor(height, width) { + this.#height = height; + this.#width = width; + } +}</pre> + +<p>클래스의 바깥에서 private 필드를 접근하려고 하면 에러가 발생합니다. private필드는 클래스 내부에서만 읽고 쓰기가 가능합니다. 클래스 외부에서 보이지 않도록 정의하였으므로 클래스가 버젼업 되면서 내부 구현이 바뀌더라도 클래스 사용자 입장에서는 이에 아무런 영항을 받지 않도록 할 수 있습니다.</p> + +<div class="blockIndicator note"> +<p>Private 필드는 사용전에 선언되어야 합니다.</p> +</div> + +<p>일반적인 프로퍼티와는 다르게 private 필드는 값을 할당하면서 만들어질 수 없습니다.</p> + +<p>자세한 내용은 {{jsxref("Classes/Private_class_fields", "private class fields", "", "true")}}를 참조하세요.</p> + +<h2 id="extends를_통한_클래스_상속sub_classing"><code>extends</code>를 통한 클래스 상속(sub classing)</h2> + +<p>{{jsxref("Classes/extends", "extends")}} 키워드는 <em>클래스 선언</em>이나 <em>클래스 표현식</em>에서 다른 클래스의 자식 클래스를 생성하기 위해 사용됩니다.</p> + +<pre class="brush: js notranslate">class Animal { + constructor(name) { + this.name = name; + } + + speak() { + console.log(`${this.name} makes a noise.`); + } +} + +class Dog extends Animal { + constructor(name) { + super(name); // super class 생성자를 호출하여 name 매개변수 전달 + } + + speak() { + console.log(`${this.name} barks.`); + } +} + +let d = new Dog('Mitzie'); +d.speak(); // Mitzie barks.</pre> + +<p>subclass에 constructor가 있다면, "this"를 사용하기 전에 가장 먼저 super()를 호출해야 합니다.</p> + +<p>또한 es5에서 사용되던 전통적인 함수 기반의 클래스를 통하여 확장할 수도 있습니다.</p> + +<pre class="brush: js notranslate">function Animal (name) { + this.name = name; +} + +Animal.prototype.speak = function () { + console.log(`${this.name} makes a noise.`); +} + +class Dog extends Animal { + speak() { + console.log(`${this.name} barks.`); + } +} + +let d = new Dog('Mitzie'); +d.speak(); // Mitzie barks. + +// 유사한 메서드의 경우, 자식의 메서드가 부모의 메서드보다 우선합니다</pre> + +<p>클래스는 생성자가 없는 객체(non-constructible)을 확장할 수 없습니다. 만약 기존의 생성자가 없는 객체을 확장하고 싶다면, 이 메서드를 사용하세요. {{jsxref("Object.setPrototypeOf()")}}:</p> + +<pre class="brush: js notranslate">const Animal = { + speak() { + console.log(`${this.name} makes a noise.`); + } +}; + +class Dog { + constructor(name) { + this.name = name; + } +} + +// 이 작업을 수행하지 않으면 speak를 호출할 때 TypeError가 발생합니다 +Object.setPrototypeOf(Dog.prototype, Animal); + +let d = new Dog('Mitzie'); +d.speak(); // Mitzie makes a noise.</pre> + +<h2 id="Species">Species</h2> + +<p>배열을 상속 받은 MyArray 클래스에서 {{jsxref("Array")}} Object를 반환하고 싶을 수도 있을 것입니다. 그럴때 Species 패턴은 기본 생성자를 덮어쓰도록 해줍니다.</p> + +<p>예를 들어, {{jsxref("Array.map", "map()")}}과 같은 기본 생성자를 반환하는 메서드를 사용할 때 이 메서드가 MyArray 객체 대신 <code>Array</code> 객체가 반환하도록 하고 싶을 것입니다. {{jsxref("Symbol.species")}} 심볼은 이러한 것을 가능하게 해줍니다:</p> + +<pre class="brush: js notranslate">class MyArray extends Array { + // 부모 Array 생성자로 species 덮어쓰기 + static get [Symbol.species]() { return Array; } +} +var a = new MyArray(1,2,3); +var mapped = a.map(x => x * x); + +console.log(mapped instanceof MyArray); // false +console.log(mapped instanceof Array); // true</pre> + +<h2 id="super_를_통한_상위_클래스_호출"><code>super</code> 를 통한 상위 클래스 호출</h2> + +<p>{{jsxref("Operators/super", "super")}} 키워드는 객체의 부모가 가지고 있는 메서드를 호출하기 위해 사용됩니다. 이는 프로토타입 기반 상속보다 좋은 점 중 하나입니다.</p> + +<pre class="brush: js notranslate">class Cat { + constructor(name) { + this.name = name; + } + + speak() { + console.log(`${this.name} makes a noise.`); + } +} + +class Lion extends Cat { + speak() { + super.speak(); + console.log(`${this.name} roars.`); + } +} + +let l = new Lion('Fuzzy'); +l.speak(); +// Fuzzy makes a noise. +// Fuzzy roars.</pre> + +<h2 id="Mix-ins">Mix-ins</h2> + +<p>추상 서브 클래스 또는 믹스-인은 클래스를 위한 템플릿입니다. ECMAScript 클래스는 하나의 단일 슈퍼클래스만을 가질 수 있으며, 예를 들어 툴링 클래스로부터의 다중 상속은 불가능합니다. 기능은 반드시 슈퍼클래스에서 제공되어야 합니다.</p> + +<p>슈퍼클래스를 인자로 받고 이 슈퍼클래스를 확장하는 서브클래스를 생성하여 반환하는 함수를 사용하여 ECMAScript에서 믹스-인을 구현할 수 있습니다:</p> + +<pre class="brush: js notranslate">var calculatorMixin = Base => class extends Base { + calc() { } +}; + +var randomizerMixin = Base => class extends Base { + randomize() { } +};</pre> + +<p>위 믹스-인을 사용하는 클래스는 다음과 같이 작성할 수 있습니다:</p> + +<pre class="brush: js notranslate">class Foo { } +class Bar extends calculatorMixin(randomizerMixin(Foo)) { }</pre> + +<h2 id="클래스_재정의">클래스 재정의</h2> + +<p>클래스는 재정의될 수 없습니다. 재정의를 시도하면 <code>SyntaxError</code> 가 발생합니다.</p> + +<p>이를 실험해보고 싶으면 FireFox Web Console (<strong>Tools </strong>><strong> Web Developer </strong>><strong> Web Console</strong>) 에서 같은 이름으로 클래스를 두번 정의하려고 해보세요. 다음과 같은 오류를 보게 될 겁니다. <code>SyntaxError: redeclaration of let <em>ClassName</em>;</code>. (See further discussion of this issue in {{Bug(1428672)}}.) Doing something similar in Chrome Developer Tools gives you a message like <code>Uncaught SyntaxError: Identifier '<em>ClassName</em>' has already been declared at <anonymous>:1:1</code>.</p> + +<h2 id="명세서">명세서</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세서</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.classes")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Functions", "함수", "", "true")}}</li> + <li>{{jsxref("Statements/class", "class 선언", "", "true")}}</li> + <li>{{jsxref("Operators/class", "class 식", "", "true")}}</li> + <li>{{jsxref("Classes/Public_class_fields", "Public class fields", "", "true")}}</li> + <li>{{jsxref("Classes/Private_class_fields", "Private class fields", "", "true")}}</li> + <li>{{jsxref("Operators/super", "super")}}</li> + <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-classes/">블로그 게시물: "ES6 In Depth: Classes"</a></li> + <li><a href="https://github.com/tc39/proposal-class-fields">Fields and public/private class properties proposal (stage 3)</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/classes/private_class_fields/index.html b/files/ko/web/javascript/reference/classes/private_class_fields/index.html new file mode 100644 index 0000000000..ea5508ab27 --- /dev/null +++ b/files/ko/web/javascript/reference/classes/private_class_fields/index.html @@ -0,0 +1,201 @@ +--- +title: Private class fields +slug: Web/JavaScript/Reference/Classes/Private_class_fields +tags: + - Class + - JavaScript + - Private Field +translation_of: Web/JavaScript/Reference/Classes/Private_class_fields +--- +<div>{{JsSidebar("Classes")}}</div> + +<p>class 의 속성(property)들은 기본적으로 public 하며 class 외부에서 읽히고 수정될 수 있다. 하지만, ES2019 에서는 해쉬 <code>#</code> prefix 를 추가해 private class 필드를 선언할 수 있게 되었다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="notranslate">class ClassWithPrivateField { + #privateField +} + +class ClassWithPrivateMethod { + #privateMethod() { + return 'hello world' + } +} + +class ClassWithPrivateStaticField { + static #PRIVATE_STATIC_FIELD +}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Private_static_fields">Private static fields</h3> + +<p>private 필드는 class 선언문 내부의 class 생성자(class constructor)에서 접근이 가능하다.</p> + +<p>static 메소드에서만 static 변수들을 호출할 수 있다는 제약은 그대로 유지된다.</p> + +<pre class="notranslate">class ClassWithPrivateStaticField { + static #PRIVATE_STATIC_FIELD + + static publicStaticMethod() { + ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42 + return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD + } +} + +console.assert(ClassWithPrivateStaticField.publicStaticMethod() === 42)</pre> + +<p>Private static 필드는 class evaluation 시 class 생성자(class constructor)에 추가된다.</p> + +<p>Private static 필드는 해당 필드를 선언한 class 에서만 접근할 수 있다.</p> + +<p>이는 <code>this</code> 를 사용함에 있어 예상치 못한 동작을 야기할 수 있다.</p> + +<pre class="notranslate">class BaseClassWithPrivateStaticField { + static #PRIVATE_STATIC_FIELD + + static basePublicStaticMethod() { + this.#PRIVATE_STATIC_FIELD = 42 + return this.#PRIVATE_STATIC_FIELD + } +} + +class SubClass extends BaseClassWithPrivateStaticField { } + +let error = null + +try { + SubClass.basePublicStaticMethod() +} catch(e) { error = e} + +console.assert(error instanceof TypeError)</pre> + +<h3 id="Private_instance_fields">Private instance fields</h3> + +<p>private 인스턴스 필드는 <strong># 이름 ('해쉬 이름' 으로 발음)</strong>,<strong> </strong>즉 <code>#</code> prefix 를 가진 식별자로 선언된다. <code>#</code> 은 그 이름 자체의 일부이며 선언과 접근 시에 모두 사용된다.</p> + +<p>캡슐화(encapsulation) 는 언어로부터 강제된다(enforced by the language). 즉, scope 밖에서 <code>#</code> 이름에 접근하는 것은 syntax error 이다.</p> + +<pre class="notranslate">class ClassWithPrivateField { + #privateField + + constructor() { + this.#privateField = 42 + this.#randomField = 444 // Syntax error + } +} + +const instance = new ClassWithPrivateField() +instance.#privateField === 42 // Syntax error</pre> + +<h3 id="Private_Methods">Private Methods</h3> + +<h4 id="Private_static_methods">Private static methods</h4> + +<p><strong>private static 메소드</strong>는 public static 메소드처럼 인스턴스가 아닌 class 로부터 호출된다. 그리고 private static 필드처럼 class 선언문 내부에서만 접근 가능하다. </p> + +<p>private static 메소드는 generator, async 그리고 async generator 함수가 될 수 있다.</p> + +<pre class="notranslate">class ClassWithPrivateStaticMethod { + static #privateStaticMethod() { + return 42 + } + + static publicStaticMethod1() { + return ClassWithPrivateStaticMethod.#privateStaticMethod(); + } + + static publicStaticMethod2() { + return this.#privateStaticMethod(); + } +} + +console.assert(ClassWithPrivateStaticMethod.publicStaticMethod1() === 42); +console.assert(ClassWithPrivateStaticMethod.publicStaticMethod2() === 42);</pre> + +<p>이는 <code>this</code> 를 사용할 때 예상치 못한 동작을 발생시킬 수 있다. (이는 <code>this</code> binding rule 이 적용되기 때문이다.) 다음 예시에서 <code>Derived.publicStaticMethod2()</code> 를 호출할 때, <code>this</code> 는 class <code>Derived</code> (<code>Base</code> 가 아니라) 를 가리킨다. </p> + +<pre class="notranslate">class Base { + static #privateStaticMethod() { + return 42; + } + static publicStaticMethod1() { + return Base.#privateStaticMethod(); + } + static publicStaticMethod2() { + return this.#privateStaticMethod(); + } +} + +class Derived extends Base {} + +console.log(Derived.publicStaticMethod1()); // 42 +console.log(Derived.publicStaticMethod2()); // TypeError</pre> + +<h4 id="Private_instance_methods">Private instance methods</h4> + +<p>private 인스턴스 메소드는 private 인스턴스 필드와는 다르게 class 인스턴스로부터 접근 가능하다.</p> + +<pre class="notranslate">class ClassWithPrivateMethod { + #privateMethod() { + return 'hello world' + } + + getPrivateMessage() { + return this.#privateMethod() + } +} + +const instance = new ClassWithPrivateMethod() +console.log(instance.getPrivateMessage()) +// expected output: "hello world"</pre> + +<p>private 인스턴스 메소드는 generator, async 그리고 async generator 함수가 될 수 있다. private getter 와 setter 또한 가능하다:</p> + +<pre class="notranslate">class ClassWithPrivateAccessor { + #message + + get #decoratedMessage() { + return `✨${this.#message}✨` + } + set #decoratedMessage(msg) { + this.#message = msg + } + + constructor() { + this.#decoratedMessage = 'hello world' + console.log(this.#decoratedMessage) + } +} + +new ClassWithPrivateAccessor(); +// expected output: "✨hello world✨"</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Public and private instance fields', '#prod-FieldDefinition', 'FieldDefinition')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.classes.private_class_fields")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields">Public class fields</a></li> + <li><a href="https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html">The Semantics of All JS Class Elements</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/classes/static/index.html b/files/ko/web/javascript/reference/classes/static/index.html new file mode 100644 index 0000000000..02701e550d --- /dev/null +++ b/files/ko/web/javascript/reference/classes/static/index.html @@ -0,0 +1,136 @@ +--- +title: static +slug: Web/JavaScript/Reference/Classes/static +tags: + - Classes + - ECMAScript 2015 + - JavaScript + - 자바스크립트 + - 클래스 +translation_of: Web/JavaScript/Reference/Classes/static +--- +<div>{{jsSidebar("Classes")}}</div> + +<p><strong>static</strong> 키워드는 클래스의 정적 메서드를 정의합니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/classes-static.html")}}</p> + +<div class="hidden"> +<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> +</div> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox">static methodName() { ... }</pre> + +<h2 id="설명">설명</h2> + +<p>정적 메서드는 클래스의 인스턴스 없이 호출이 가능하며 클래스가 인스턴스화되면 호출할 수 없다. 정적 메서드는 종종 어플리케이션의 유틸리티 함수를 만드는데 사용된다.</p> + +<h2 id="정적_메서드의_호출">정적 메서드의 호출</h2> + +<h4 id="다른_정적_메서드에서의_호출">다른 정적 메서드에서의 호출</h4> + +<p>동일한 클래스 내의 다른 정적 메서드 내에서 정적 메서드를 호출하는 경우 키워드 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>를 사용할 수 있다.</p> + +<pre class="brush: js">class StaticMethodCall { + static staticMethod() { + return 'Static method has been called'; + } + static anotherStaticMethod() { + return this.staticMethod() + ' from another static method'; + } +} +StaticMethodCall.staticMethod(); +// 'Static method has been called' + +StaticMethodCall.anotherStaticMethod(); +// 'Static method has been called from another static method' +</pre> + +<h3 id="클래스_생성자_및_다른_메서드에서의_호출">클래스 생성자 및 다른 메서드에서의 호출</h3> + +<p>정적 메서드가 비정적 메서드에서 키워드<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> 를 써서는 직접적인 접근을 할 수 없다. 바른 호출 방법은 클래스 명칭을 쓰거나, 즉 <code>CLASSNAME.STATIC_METHOD_NAME()</code> 을 이용하거나 혹은 그 메서드를 생성자의 한 속성으로 부르는 것으로, 즉 <code>constructor</code> : <code>this.constructor.STATIC_METHOD_NAME()</code>를 이용한다.</p> + +<pre class="brush: js">class StaticMethodCall { + constructor() { + console.log(StaticMethodCall.staticMethod()); + // 'static method has been called.' + + console.log(this.constructor.staticMethod()); + // 'static method has been called.' + } + + static staticMethod() { + return 'static method has been called.'; + } +} +</pre> + +<h2 id="예제">예제</h2> + +<p>아래 예제는 여러가지 내용을 설명합니다.</p> + +<ol> + <li>어떻게 정적 메서드가 클래스에서 구현되는지</li> + <li>클래스의 정적 맴버가 서브클래스화 되는 것을 보여줍니다.</li> + <li>정적 메서드가 어떤 경우에 호출 될 수 있는지와 없는지를 설명합니다.</li> +</ol> + +<pre class="brush: js">class Triple { + static triple(n) { + n = n || 1; //비트연산이 아니어야 합니다. + return n * 3; + } +} + +class BiggerTriple extends Triple { + static triple(n) { + return super.triple(n) * super.triple(n); + } +} + +console.log(Triple.triple()); // 3 +console.log(Triple.triple(6)); // 18 +console.log(BiggerTriple.triple(3)); // 81 +var tp = new Triple(); +console.log(BiggerTriple.triple(3)); // 81 (부모의 인스턴스에 영향을 받지 않습니다.) +console.log(tp.triple()); // 'tp.triple은 함수가 아닙니다.'. +console.log(tp.constructor.triple(4)); // 12 +</pre> + +<p> </p> + +<h2 id="명세서">명세서</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.classes.static")}}</p> + +<h2 id="참고">참고</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/deprecated_and_obsolete_features/index.html b/files/ko/web/javascript/reference/deprecated_and_obsolete_features/index.html new file mode 100644 index 0000000000..deffbf4caa --- /dev/null +++ b/files/ko/web/javascript/reference/deprecated_and_obsolete_features/index.html @@ -0,0 +1,290 @@ +--- +title: Deprecated and obsolete features +slug: Web/JavaScript/Reference/Deprecated_and_obsolete_features +tags: + - Deprecated + - JavaScript + - Obsolete +translation_of: Web/JavaScript/Reference/Deprecated_and_obsolete_features +--- +<div>{{JsSidebar("More")}}</div> + +<p>본 페이지는 자바스크립트의 제외 예정인(즉, 아직 사용할 수 있지만 제거 계획이 있는) 기능과 제외된(즉, 더 이상 사용할 수 없는) 기능을 나열합니다.</p> + +<h2 id="제외_예정_기능">제외 예정 기능</h2> + +<p>아래 기능은 아직 사용할 수 있지만, 언젠가 제거될 예정이므로 주의를 기울여야 합니다. 작성한 코드가 항목 중 하나를 포함하고 있다면 제거해야 합니다.</p> + +<h3 id="RegExp_속성">RegExp 속성</h3> + +<p>아래 속성은 제외 예정입니다. 이는 {{jsxref("String.replace")}} 사용에 영향을 주지 않습니다.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Property</th> + <th>Description</th> + </tr> + <tr> + <td>{{jsxref("RegExp.n", "$1-$9")}}</td> + <td> + <p>Parenthesized substring matches, if any.<br> + <strong>Warning:</strong> Using these properties can result in problems, since browser extensions can modify them. Avoid them!</p> + </td> + </tr> + <tr> + <td>{{jsxref("RegExp.input", "$_")}}</td> + <td>See <code>input</code>.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.multiline", "$*")}}</td> + <td>See <code>multiline</code>.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.lastMatch", "$&")}}</td> + <td>See <code>lastMatch</code>.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.lastParen", "$+")}}</td> + <td>See <code>lastParen</code>.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.leftContext", "$`")}}</td> + <td>See <code>leftContext</code>.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.rightContext", "$'")}}</td> + <td>See <code>rightContext</code>.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.input", "input")}}</td> + <td>The string against which a regular expression is matched.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.lastMatch", "lastMatch")}}</td> + <td>The last matched characters.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.lastParen", "lastParen")}}</td> + <td>The last parenthesized substring match, if any.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.leftContext", "leftContext")}}</td> + <td>The substring preceding the most recent match.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.rightContext", "rightContext")}}</td> + <td>The substring following the most recent match.</td> + </tr> + </tbody> +</table> + +<p>The following are now properties of <code>RegExp</code> instances, no longer of the <code>RegExp</code> object:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Property</th> + <th>Description</th> + </tr> + <tr> + <td>{{jsxref("RegExp.global", "global")}}</td> + <td>Whether or not to test the regular expression against all possible matches in a string, or only against the first.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.ignoreCase", "ignoreCase")}}</td> + <td>Whether or not to ignore case while attempting a match in a string.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.lastIndex", "lastIndex")}}</td> + <td>The index at which to start the next match.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.multiline", "multiline")}}</td> + <td>Whether or not to search in strings across multiple lines.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.source", "source")}}</td> + <td>패턴의 텍스트.</td> + </tr> + </tbody> +</table> + +<h3 id="RegExp_메서드">RegExp 메서드</h3> + +<ul> + <li>{{jsxref("RegExp.compile", "compile()")}} 메서드는 제외될 예정입니다.</li> + <li><code>valueOf</code> 메서드는 더 이상 <code>RegExp</code> 전용이 아닙니다. {{jsxref("Object.valueOf()")}}를 사용하세요.</li> +</ul> + +<h3 id="Function_속성">Function 속성</h3> + +<ul> + <li>The {{jsxref("Global_Objects/Function/caller", "caller")}} and {{jsxref("Global_Objects/Function/arguments", "arguments")}} properties are deprecated, because they leak the function caller. Instead of the arguments property, you should use the {{jsxref("Functions/arguments", "arguments")}} object inside function closures.</li> +</ul> + +<h3 id="Legacy_generator">Legacy generator</h3> + +<ul> + <li>{{jsxref("Statements/Legacy_generator_function", "Legacy generator function statement")}} and {{jsxref("Operators/Legacy_generator_function", "Legacy generator function expression")}} are deprecated. Use {{jsxref("Statements/function*", "function* statement")}} and {{jsxref("Operators/function*", "function* expression")}} instead.</li> + <li>{{jsxref("Operators/Array_comprehensions", "JS1.7/JS1.8 Array comprehension", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} and {{jsxref("Operators/Generator_comprehensions", "JS1.7/JS1.8 Generator comprehension", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} are deprecated.</li> +</ul> + +<h3 id="Iterator">Iterator</h3> + +<ul> + <li>{{jsxref("Global_Objects/StopIteration", "StopIteration")}} is deprecated.</li> + <li>{{jsxref("Global_Objects/Iterator", "Iterator")}} is deprecated.</li> +</ul> + +<h3 id="Object_methods">Object methods</h3> + +<ul> + <li>{{jsxref("Object.watch", "watch")}} and {{jsxref("Object.unwatch", "unwatch")}} are deprecated. Use {{jsxref("Proxy")}} instead.</li> + <li><code>__iterator__</code> is deprecated.</li> + <li>{{jsxref("Object.noSuchMethod", "__noSuchMethod__")}} is deprecated. Use {{jsxref("Proxy")}} instead.</li> +</ul> + +<h3 id="Date_methods">Date methods</h3> + +<ul> + <li>{{jsxref("Global_Objects/Date/getYear", "getYear")}} and {{jsxref("Global_Objects/Date/setYear", "setYear")}} are affected by the Year-2000-Problem and have been subsumed by {{jsxref("Global_Objects/Date/getFullYear", "getFullYear")}} and {{jsxref("Global_Objects/Date/setFullYear", "setFullYear")}}.</li> + <li>You should use {{jsxref("Global_Objects/Date/toISOString", "toISOString")}} instead of the deprecated {{jsxref("Global_Objects/Date/toGMTString", "toGMTString")}} method in new code.</li> + <li>{{jsxref("Global_Objects/Date/toLocaleFormat", "toLocaleFormat")}} is deprecated.</li> +</ul> + +<h3 id="Functions">Functions</h3> + +<ul> + <li>{{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}} are deprecated. Use regular {{jsxref("Operators/function", "functions")}} or {{jsxref("Functions/Arrow_functions", "arrow functions", "", 1)}} instead.</li> +</ul> + +<h3 id="Proxy">Proxy</h3> + +<ul> + <li><a href="/en-US/docs/Archive/Web/Old_Proxy_API">Proxy.create</a> and <a href="/en-US/docs/Archive/Web/Old_Proxy_API">Proxy.createFunction</a> are deprecated. Use {{jsxref("Proxy")}} instead.</li> + <li>The following traps are obsolete: + <ul> + <li><code>hasOwn</code> ({{bug(980565)}}, Firefox 33).</li> + <li><code>getEnumerablePropertyKeys</code> ({{bug(783829)}}, Firefox 37)</li> + <li><code>getOwnPropertyNames</code> ({{bug(1007334)}}, Firefox 33)</li> + <li><code>keys</code> ({{bug(1007334)}}, Firefox 33)</li> + </ul> + </li> +</ul> + +<h3 id="Escape_sequences">Escape sequences</h3> + +<ul> + <li>Octal escape sequences (\ followed by one, two, or three octal digits) are deprecated in string and regular expression literals.</li> + <li>The {{jsxref("Global_Objects/escape", "escape")}} and {{jsxref("Global_Objects/unescape", "unescape")}} functions are deprecated. Use {{jsxref("Global_Objects/encodeURI", "encodeURI")}}, {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}}, {{jsxref("Global_Objects/decodeURI", "decodeURI")}} or {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} to encode and decode escape sequences for special characters.</li> +</ul> + +<h3 id="String_methods">String methods</h3> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/tag/HTML%20wrapper%20methods">HTML wrapper methods</a> like {{jsxref("String.prototype.fontsize")}} and {{jsxref("String.prototype.big")}}.</li> + <li>{{jsxref("String.prototype.quote")}} is removed from Firefox 37.</li> + <li>non standard <code>flags</code> parameter in {{jsxref("String.prototype.search")}}, {{jsxref("String.prototype.match")}}, and {{jsxref("String.prototype.replace")}} are deprecated.</li> +</ul> + +<h2 id="Obsolete_features">Obsolete features</h2> + +<p>These obsolete features have been entirely removed from JavaScript and can no longer be used as of the indicated version of JavaScript.</p> + +<h3 id="Object">Object</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Property</th> + <th>Description</th> + </tr> + <tr> + <td>{{jsxref("Global_Objects/Object/count", "__count__")}}</td> + <td>Returns the number of enumerable properties directly on a user-defined object.</td> + </tr> + <tr> + <td>{{jsxref("Global_Objects/Object/Parent", "__parent__")}}</td> + <td>Points to an object's context.</td> + </tr> + <tr> + <td>{{jsxref("Global_Objects/Object/eval", "Object.prototype.eval()")}}</td> + <td>Evaluates a string of JavaScript code in the context of the specified object.</td> + </tr> + <tr> + <td>{{jsxref("Object.observe()")}}</td> + <td>Asynchronously observing the changes to an object.</td> + </tr> + <tr> + <td>{{jsxref("Object.unobserve()")}}</td> + <td>Remove observers.</td> + </tr> + <tr> + <td>{{jsxref("Object.getNotifier()")}}</td> + <td>Creates an object that allows to synthetically trigger a change.</td> + </tr> + </tbody> +</table> + +<h3 id="Function">Function</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Property</th> + <th>Description</th> + </tr> + <tr> + <td>{{jsxref("Global_Objects/Function/arity", "arity")}}</td> + <td>Number of formal arguments.</td> + </tr> + </tbody> +</table> + +<h3 id="Array">Array</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td>Property</td> + <td>Description</td> + </tr> + <tr> + <td>{{jsxref("Array.observe()")}}</td> + <td>Asynchronously observing changes to Arrays.</td> + </tr> + <tr> + <td>{{jsxref("Array.unobserve()")}}</td> + <td>Remove observers.</td> + </tr> + </tbody> +</table> + +<h3 id="Number">Number</h3> + +<ul> + <li>{{jsxref("Number.toInteger()")}}</li> +</ul> + +<h3 id="ParallelArray">ParallelArray</h3> + +<ul> + <li>{{jsxref("ParallelArray")}}</li> +</ul> + +<h3 id="Statements">Statements</h3> + +<ul> + <li>{{jsxref("Statements/for_each...in", "for each...in")}} is deprecated. Use {{jsxref("Statements/for...of", "for...of")}} instead.</li> + <li>Destructuring {{jsxref("Statements/for...in", "for...in")}} is deprecated. Use {{jsxref("Statements/for...of", "for...of")}} instead.</li> + <li>let blocks and let expressions are obsolete.</li> +</ul> + +<h3 id="E4X">E4X</h3> + +<p>See <a href="/en-US/docs/Archive/Web/E4X">E4X</a> for more information.</p> + +<h3 id="Sharp_variables">Sharp variables</h3> + +<p>See <a href="/en-US/docs/Archive/Web/Sharp_variables_in_JavaScript">Sharp variables in JavaScript</a> for more information.</p> diff --git a/files/ko/web/javascript/reference/errors/bad_octal/index.html b/files/ko/web/javascript/reference/errors/bad_octal/index.html new file mode 100644 index 0000000000..8a4590e668 --- /dev/null +++ b/files/ko/web/javascript/reference/errors/bad_octal/index.html @@ -0,0 +1,45 @@ +--- +title: 'SyntaxError: "x" is not a legal ECMA-262 octal constant' +slug: Web/JavaScript/Reference/Errors/Bad_octal +translation_of: Web/JavaScript/Reference/Errors/Bad_octal +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메시지">메시지</h2> + +<pre class="syntaxbox">Warning: SyntaxError: 08 is not a legal ECMA-262 octal constant. +Warning: SyntaxError: 09 is not a legal ECMA-262 octal constant. +</pre> + +<h2 id="에러_형식">에러 형식</h2> + +<p>{{jsxref("SyntaxError")}}<code>. </code>엄격 모드(<a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>)에서만 경고 됨.</p> + +<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2> + +<p>10진법의 리터럴은 <code>0</code>을 가장 앞 자리에 표시하고 뒤따라 다른 10진 숫자가 오게 할 수 있지만, <code>0</code>으로 시작하여 그 뒤를 따르는 모든 숫자들이 8보다 작다면, 그 수는 8진수로 해석됩니다. 이런 경우에는 <code>08<font face="Open Sans, Arial, sans-serif">과</font> 09<font face="Open Sans, Arial, sans-serif">는 허용되지 않기 때문에</font><font face="Open Sans, Arial, sans-serif"> </font></code>JavaScript는 경고를 띄웁니다. </p> + +<p>8진 리터럴과 8진 escape sequence는 사라지고 추가적인 경고가 나타날 것임을 알아 두세요. ECMAScript 6와 그 이후 버전의 구문은, 맨 앞자리에 위치하는 <code>0</code>의 뒤에 소문자 또는 대문자의 라틴 문자 "O" 를 위치시키도록 합니다 (<code>0o</code> or <code>0O)</code>. 더 자세한 설명은 <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Octal">lexical grammar</a> 페이지를 보세요.</p> + +<h2 id="예">예</h2> + +<h3 id="유효하지_않은_8진수">유효하지 않은 8진수</h3> + +<pre class="brush: js example-bad">08; +09; +// SyntaxError: 08 is not a legal ECMA-262 octal constant +// SyntaxError: octal literals and octal escape sequences are deprecated</pre> + +<h3 id="유효한_8진수">유효한 8진수</h3> + +<p>선두로 사용된 <code>0</code>의 뒤에는 문자 "o"가 오도록 한다. </p> + +<pre class="brush: js example-good">0O755; +0o644; +</pre> + +<h2 id="참고">참고</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Octal">Lexical grammar</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/bad_radix/index.html b/files/ko/web/javascript/reference/errors/bad_radix/index.html new file mode 100644 index 0000000000..3ea98bf1eb --- /dev/null +++ b/files/ko/web/javascript/reference/errors/bad_radix/index.html @@ -0,0 +1,57 @@ +--- +title: 'RangeError: radix must be an integer' +slug: Web/JavaScript/Reference/Errors/Bad_radix +translation_of: Web/JavaScript/Reference/Errors/Bad_radix +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메시지">메시지</h2> + +<pre class="syntaxbox">RangeError: radix must be an integer at least 2 and no greater than 36 (Firefox) +RangeError: toString() radix argument must be between 2 and 36 (Chrome) +</pre> + +<h2 id="에러_형식">에러 형식</h2> + +<p>{{jsxref("RangeError")}}</p> + +<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2> + +<p>{{jsxref("Number.prototype.toString()")}} 메소드는 선택적 파라메터인 <code>radix</code>(기수:진수를 지정하는 값)와 함께 사용되어 왔습니다. 이 파라메터는 반드시 수의 값을 나타내는 진법의 2와 36 사이로 지정된 정수(숫자)여야 합니다. </p> + +<p>왜 36으로 제한이 되었을까요? <code>radix</code>는 digit(밑기수) 알파벳 글자로 사용되는 10보다는 큽니다. 그렇기 때문에, <code>radix</code>는 라틴 알파벳 26글자를 가졌을 때, 36보다 클 수 없습니다. </p> + +<p>보통 아래의 <code>radix</code> 중 하나를 사용하게 될 것입니다.</p> + +<ul> + <li>2 for <a href="https://en.wikipedia.org/wiki/Binary_number">binary numbers</a> (2진수),</li> + <li>8 for <a href="https://en.wikipedia.org/wiki/Octal">octal numbers</a> (8진수),</li> + <li>10 for <a href="https://en.wikipedia.org/wiki/Decimal">decimal numbers</a> (10진수),</li> + <li>16 for <a href="https://en.wikipedia.org/wiki/Hexadecimal">hexadecimal numbers</a> (16진수).</li> +</ul> + +<h2 id="예">예</h2> + +<h3 id="허용되지_않는_경우">허용되지 않는 경우</h3> + +<pre class="brush: js example-bad">(42).toString(0); +(42).toString(1); +(42).toString(37); +(42).toString(150); +//포맷팅하기 위해 string을 이런 식으로 사용할 수는 없습니다. : +(12071989).toString("MM-dd-yyyy"); +</pre> + +<h3 id="허용된_경우">허용된 경우</h3> + +<pre class="brush: js example-good">(42).toString(2); // "101010" (2진수) +(13).toString(8); // "15" (8진수) +(0x42).toString(10); // "66" (10진수) +(100000).toString(16) // "186a0" (16진수) +</pre> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Number.prototype.toString()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/bad_regexp_flag/index.html b/files/ko/web/javascript/reference/errors/bad_regexp_flag/index.html new file mode 100644 index 0000000000..2c8d12289d --- /dev/null +++ b/files/ko/web/javascript/reference/errors/bad_regexp_flag/index.html @@ -0,0 +1,107 @@ +--- +title: 'SyntaxError: invalid regular expression flag "x"' +slug: Web/JavaScript/Reference/Errors/Bad_regexp_flag +tags: + - 구문 에러 + - 자바스크립트 + - 정규식 + - 플래그 +translation_of: Web/JavaScript/Reference/Errors/Bad_regexp_flag +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메세지">메세지</h2> + +<pre class="syntaxbox">SyntaxError: Syntax error in regular expression (Edge) +SyntaxError: invalid regular expression flag "x" (Firefox) +SyntaxError: Invalid regular expression flags (Chrome) +</pre> + +<h2 id="에러_타입">에러 타입</h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2> + +<p>코드에 잘못된 정규 표현식 플래그가 있습니다. 슬래시로 묶인 패턴으로 구성되어 있는 정규 표현식 문자에서 플래그는 두 번째 플래그 뒤에 정의됩니다. 플래그는 또한 {{jsxref("RegExp")}} 객체의 생성자 함수에서도 정의될 수 있습니다(두 번째 매개변수). 정규 표현식 플래그는 따로 또는 순서에 상관 없이 같이 사용될 수 있지만 ECMAScript에는 오직 5개만 있습니다.</p> + +<p>정규 표현식에 플래그를 포함시키려면 아래의 문법을 사용하세요:</p> + +<pre class="brush: js">var re = /pattern/flags; +</pre> + +<p>또는</p> + +<pre class="brush: js">var re = new RegExp('pattern', 'flags');</pre> + +<table class="standard-table"> + <caption>정규 표현식 플래그</caption> + <thead> + <tr> + <th scope="col">플래그</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>g</code></td> + <td>전역 검색.</td> + </tr> + <tr> + <td>i</td> + <td>대소문자 구별 없이 검색.</td> + </tr> + <tr> + <td>m</td> + <td>여러 줄(Multi-line) 검색.</td> + </tr> + <tr> + <td>u</td> + <td>유니코드; 패턴을 유니코드 코드 포인트의 나열로 취급.</td> + </tr> + <tr> + <td>y</td> + <td>현재 위치에서 검색. ("sticky" 검색). {{jsxref("RegExp.sticky", "sticky")}} 참조.</td> + </tr> + </tbody> +</table> + +<h2 id="예제">예제</h2> + +<p>5개의 플래그만이 유효합니다.</p> + +<pre class="brush: js example-bad">/foo/bar; + +// SyntaxError: invalid regular expression flag "b" +</pre> + +<p>정규 표현식을 만들려고 했나요? 두 개의 슬래시가 포함된 표현식은 정규 표현식 문자로 해석됩니다.</p> + +<pre class="brush: js example-bad">let obj = { + url: /docs/Web +}; + +// SyntaxError: invalid regular expression flag "W" +</pre> + +<p>아니면 문자열로 만들려고 했나요? 작은 따옴표 또는 큰 따옴표를 추가하여 문자열을 만듭니다.</p> + +<pre class="brush: js example-good">let obj = { + url: '/docs/Web' +};</pre> + +<h3 id="유효한_정규_표현식_플래그">유효한 정규 표현식 플래그</h3> + +<p>자바스크립트에서 허용하는 5개의 유효한 정규 표현식 플래그를 위의 표에서 확인하세요.</p> + +<pre class="brush: js example-good">/foo/g; +/foo/gim; +/foo/uy; +</pre> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%EC%A0%95%EA%B7%9C%EC%8B%9D">정규 표현식</a></li> + <li><a href="http://xregexp.com/flags/">XRegEx flags</a> – 새로운 4개의 플래그(<code>n</code>, <code>s</code>, <code>x</code>, <code>A</code>)를 제공하는 정규 표현식 라이브러리</li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/bad_return_or_yield/index.html b/files/ko/web/javascript/reference/errors/bad_return_or_yield/index.html new file mode 100644 index 0000000000..1239fa27f4 --- /dev/null +++ b/files/ko/web/javascript/reference/errors/bad_return_or_yield/index.html @@ -0,0 +1,51 @@ +--- +title: 'SyntaxError: return not in function' +slug: Web/JavaScript/Reference/Errors/Bad_return_or_yield +translation_of: Web/JavaScript/Reference/Errors/Bad_return_or_yield +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메시지">메시지</h2> + +<pre class="syntaxbox">SyntaxError: return not in function +SyntaxError: yield not in function +</pre> + +<h2 id="에러_타입">에러 타입</h2> + +<p>{{jsxref("SyntaxError")}}.</p> + +<h2 id="뭐가_잘못된_걸까요">뭐가 잘못된 걸까요?</h2> + +<p><code><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/return">return</a></code> 또는 <code><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code> 문장이 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%ED%95%A8%EC%88%98">function</a> 밖에서 호출되었기 때문입니다. 혹시 어딘가에 중괄호를 빠트리신 건 아닌가요? <code>return</code> 과 <code>yield</code> function 내에 있어야 합니다, 왜냐하면 이것들은 function의 실행 종료 (또는 일시정지 및 재개)를 의미하고 function 호출자에게 특정 값을 반환하기 위해 사용되기 때문입니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: js example-bad">var cheer = function(score) { + if (score === 147) + return 'Maximum!'; + }; + if (score > 100) { + return 'Century!'; + } +} + +// SyntaxError: return not in function</pre> + +<p>처음 볼 때는 중괄호가 제대로 있는 것처럼 보인다, 하지만 이 코드 조각에는 if 문장 다음에 중괄호가 하나 빠져 있다. 다음처럼 고쳐야 한다:</p> + +<pre class="brush: js example-good">var cheer = function(score) { + if (score === 147) { + return 'Maximum!'; + } + if (score > 100) { + return 'Century!'; + } +};</pre> + +<h2 id="또_다른_내용">또 다른 내용</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code></li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html b/files/ko/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html new file mode 100644 index 0000000000..593e8cca13 --- /dev/null +++ b/files/ko/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html @@ -0,0 +1,56 @@ +--- +title: 'ReferenceError: can''t access lexical declaration`X'' before initialization' +slug: Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init +translation_of: Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Message">Message</h2> + +<pre class="syntaxbox">ReferenceError: can't access lexical declaration `X' before initialization (Firefox) +ReferenceError: 'x' is not defined (Chrome) +</pre> + +<h2 id="Error_type">Error type</h2> + +<p>{{jsxref("ReferenceError")}}</p> + +<h2 id="무엇이_잘못_되었을까요">무엇이 잘못 되었을까요?</h2> + +<p>변수가 초기화 되기 전에 엑세스가 되어버립니다. 이 문제는 let 또는 const 선언이 정의 되기 전에 엑세스되는 모든 block 문에서 발생합니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="잘못된_경우">잘못된 경우</h3> + +<p>이 경우에 변수 "foo"는 <code>let</code> 을 사용하여 block 문에서 다시 선언됩니다.</p> + +<pre class="brush: js example-bad">function test() { + let foo = 33; + if (true) { + let foo = (foo + 55); + // ReferenceError: can't access lexical + // declaration `foo' before initialization + } +} +test(); +</pre> + +<h3 id="올바른_경우">올바른 경우</h3> + +<p>if 문에서 "foo"를 변경하려면 재 선언을 발생시키는 <code>let</code> 을 제거해야합니다.</p> + +<pre class="brush: js example-good">function test(){ + let foo = 33; + if (true) { + foo = (foo + 55); + } +} +test(); +</pre> + +<h2 id="그밖에_볼_것">그밖에 볼 것</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_Dead_Zone_and_errors_with_let">Temporal Dead Zone and errors with let</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/delete_in_strict_mode/index.html b/files/ko/web/javascript/reference/errors/delete_in_strict_mode/index.html new file mode 100644 index 0000000000..138384bcac --- /dev/null +++ b/files/ko/web/javascript/reference/errors/delete_in_strict_mode/index.html @@ -0,0 +1,71 @@ +--- +title: >- + SyntaxError: applying the 'delete' operator to an unqualified name is + deprecated +slug: Web/JavaScript/Reference/Errors/Delete_in_strict_mode +tags: + - 가비지 컬렉터 + - 구문 에러 + - 변수 삭제 + - 자바스크립트 +translation_of: Web/JavaScript/Reference/Errors/Delete_in_strict_mode +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메세지">메세지</h2> + +<pre class="syntaxbox">SyntaxError: Calling delete on expression not allowed in strict mode (Edge) +SyntaxError: applying the 'delete' operator to an unqualified name is deprecated (Firefox) +SyntaxError: Delete of an unqualified identifier in strict mode. (Chrome) +</pre> + +<h2 id="에러_타입">에러 타입</h2> + +<p>엄격(Strict) 모드에서의 {{jsxref("SyntaxError")}}</p> + +<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2> + +<p>자바스크립트에서 일반 변수는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> 연산자를 사용하여 삭제할 수 없습니다. 엄격 모드에서 변수를 삭제하는 접근은 허용되지 않으므로 에러가 발생합니다.</p> + +<p><code>delete</code> 연산자는 오직 객체의 속성만을 삭제할 수 있습니다. 객체 속성은 설정할 수 있는 경우 "수식"될 수 있습니다.</p> + +<p>일반적인 생각과 다르게 <code>delete</code> 연산자는 메모리 해제와 직접적인 연관이 없습니다. 메모리 관리는 참조가 깨짐에 따라 간접적으로 수행됩니다. 자세한 내용은 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Memory_Management">메모리 관리</a> 페이지와 <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> 연산자 페이지를 참조하십시오.</p> + +<p>이 에러는 오직 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드 코드</a>에서만 발생합니다. 엄격하지 않은 모드에서 해당 연산자는 단순히 <code>false</code> 를 반환합니다.</p> + +<h2 id="예제">예제</h2> + +<p>자바스크립트에서 일반 변수를 삭제하려고 하면 동작하지 않습니다. 그리고 엄격 모드에서는 에러가 발생합니다:</p> + +<pre class="brush: js example-bad">'use strict'; + +var x; + +// ... + +delete x; + +// SyntaxError: applying the 'delete' operator to an unqualified name +// is deprecated +</pre> + +<p>변수의 내용을 비우려면 {{jsxref("null")}}을 설정하면 됩니다:</p> + +<pre class="brush: js example-good">'use strict'; + +var x; + +// ... + +x = null; + +// x는 가비지 컬렉터에 의해 메모리에서 해제됩니다 +</pre> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code></li> + <li><a href="/en-US/docs/Web/JavaScript/Memory_Management">메모리 관리</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Cant_delete">TypeError: property "x" is non-configurable and can't be deleted</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html b/files/ko/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html new file mode 100644 index 0000000000..fc613db1d0 --- /dev/null +++ b/files/ko/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html @@ -0,0 +1,70 @@ +--- +title: 'ReferenceError: deprecated caller or arguments usage' +slug: Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage +translation_of: Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메시지">메시지</h2> + +<pre class="syntaxbox">Warning: ReferenceError: deprecated caller usage (Firefox) +Warning: ReferenceError: deprecated arguments usage (Firefox) +TypeError: 'callee' and 'caller' cannot be accessed in strict mode. (Safari) +</pre> + +<h2 id="에러_형식">에러 형식</h2> + +<p>엄격 모드에서만 {{jsxref("ReferenceError")}} 경고가 발생합니다. JavaScript 실행이 중단되지는 않을 것입니다. </p> + +<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2> + +<p>엄격모드에서, {{jsxref("Function.caller")}} 나 {{jsxref("Function.arguments")}} 속성이 사용되었고, 그러지 말아야 했습니다. 이 속성들은 사라지게 되었는데, 함수 호출자를 흘려보내거나, 비 표준이었으며, 최적화 하기 어렵고, 잠재적으로 퍼포먼스에 무리를 주었기 때문입니다.</p> + +<h2 id="예">예</h2> + +<h3 id="function.caller_or_arguments.callee.caller"><code>function.caller</code> or <code>arguments.callee.caller</code></h3> + +<p>{{jsxref("Function.caller")}} 와 <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee.caller</a></code> 는 사라지게 되었습니다. (자세한 정보는 레퍼런스 문서를 확인해 보세요.)</p> + +<pre class="brush: js example-bad">"use strict"; + +function myFunc() { + if (myFunc.caller == null) { + return 'The function was called from the top!'; + } else { + return 'This function\'s caller was ' + myFunc.caller; + } +} + +myFunc(); +// Warning: ReferenceError: deprecated caller usage +// "The function was called from the top!"</pre> + +<h3 id="Function.arguments"><code>Function.arguments</code></h3> + +<p>{{jsxref("Function.arguments")}} 는 사라졌습니다. (자세한 정보는 레퍼런스 문서를 확인해 주세요.) </p> + +<pre class="brush: js example-bad">"use strict"; + +function f(n) { g(n - 1); } + +function g(n) { + console.log('before: ' + g.arguments[0]); + if (n > 0) { f(n); } + console.log('after: ' + g.arguments[0]); +} + +f(2); + +console.log('returned: ' + g.arguments); +// Warning: ReferenceError: deprecated arguments usage +</pre> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Deprecated and obsolete features</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li> + <li>{{jsxref("Function.arguments")}}</li> + <li>{{jsxref("Function.caller")}} and <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee.caller</a></code></li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/deprecated_octal/index.html b/files/ko/web/javascript/reference/errors/deprecated_octal/index.html new file mode 100644 index 0000000000..55d85cf7eb --- /dev/null +++ b/files/ko/web/javascript/reference/errors/deprecated_octal/index.html @@ -0,0 +1,64 @@ +--- +title: 'SyntaxError: "0"-prefixed octal literals and octal escape seq. are deprecated' +slug: Web/JavaScript/Reference/Errors/Deprecated_octal +translation_of: Web/JavaScript/Reference/Errors/Deprecated_octal +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메시지">메시지</h2> + +<pre class="syntaxbox">SyntaxError: Octal numeric literals and escape characters not allowed in strict mode (Edge) +SyntaxError: +"0"-prefixed octal literals and octal escape sequences are deprecated; +for octal literals use the "0o" prefix instead +</pre> + +<h2 id="에러_타입">에러 타입</h2> + +<p>{{jsxref("SyntaxError")}} <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> 내에서만.</p> + +<h2 id="무엇이_잘_못_되었을까">무엇이 잘 못 되었을까?</h2> + +<p>8진 리터럴과 8진수 이스케이프 시퀀스는 더 이상 사용하지 않으며, 엄격 모드(strict mode) 내에서는 {{jsxref("SyntaxError")}} 에러를 던질 것입니다. ECMAScript 2015와 이 후의 버전의 표준화된 구문은 0을 맨 앞자리에 두고 그 뒤를 대문자 또는 소문자의 라틴 문자 "O" 를 사용하도록 합니다. (<code>0o</code> 또는 <code>0O)</code></p> + +<h2 id="예제">예제</h2> + +<h3 id="0이_접두인_8진_리터럴">"0"이 접두인 8진 리터럴</h3> + +<pre class="brush: js example-bad">"use strict"; + +03; + +// SyntaxError: "0"-prefixed octal literals and octal escape sequences +// are deprecated (0으로 시작하는 8진수와 8진 이스케이프 시퀀스는 더 이상 사용되지 않습니다. ) +</pre> + +<h3 id="8진수_이스케이프_시퀀스">8진수 이스케이프 시퀀스</h3> + +<pre class="brush: js example-bad">"use strict"; + +"\251"; + +// SyntaxError: "0"-prefixed octal literals and octal escape sequences +// are deprecated (0으로 시작하는 8진수와 8진 이스케이프 시퀀스는 더 이상 사용되지 않습니다. ) +</pre> + +<h3 id="유효한_8진_수들">유효한 8진 수들</h3> + +<p>0뒤에 "o" 또는 "O"를 사용합니다. :</p> + +<pre class="brush: js example-good">0o3; +</pre> + +<p>8진수 이스케이프 시퀀스 대신 16진수 이스케이프 시퀀스를 사용할 수도 있습니다. :</p> + +<pre class="brush: js example-good">'\xA9';</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Octal">Lexical grammar</a></li> + <li> + <p><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Bad_octal">Warning: 08/09 is not a legal ECMA-262 octal constant</a></p> + </li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/identifier_after_number/index.html b/files/ko/web/javascript/reference/errors/identifier_after_number/index.html new file mode 100644 index 0000000000..14e5b336c7 --- /dev/null +++ b/files/ko/web/javascript/reference/errors/identifier_after_number/index.html @@ -0,0 +1,57 @@ +--- +title: 'SyntaxError: identifier starts immediately after numeric literal' +slug: Web/JavaScript/Reference/Errors/Identifier_after_number +tags: + - 구문 에러 + - 변수 이름 + - 식별자 + - 자바스크립트 +translation_of: Web/JavaScript/Reference/Errors/Identifier_after_number +--- +<div>{{JSSidebar("Errors")}}</div> + +<h2 id="메세지">메세지</h2> + +<pre class="syntaxbox">SyntaxError: Unexpected identifier after numeric literal (Edge) +SyntaxError: identifier starts immediately after numeric literal (Firefox) +SyntaxError: Unexpected number (Chrome) +</pre> + +<h2 id="에러_타입">에러 타입</h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2> + +<p>{{Glossary("식별자", "식별자")}}라고 불리는 변수의 이름은 반드시 지켜야 하는 특정 규칙을 따라야 합니다.</p> + +<p>자바스크립트의 식별자는 반드시 문자, 언더스코어(_), 또는 달러 표시($)로 시작돼야 합니다. 숫자로 시작될 수 없습니다. 글자 뒤에만 숫자(0-9)가 올 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="숫자로_시작하는_변수_이름">숫자로 시작하는 변수 이름</h3> + +<p>자바스크립트에서 변수 이름은 숫자로 시작될 수 없습니다. 아래 예제는 에러가 발생합니다:</p> + +<pre class="brush: js example-bad">var 1life = 'foo'; +// SyntaxError: identifier starts immediately after numeric literal + +var foo = 1life; +// SyntaxError: identifier starts immediately after numeric literal + +alert(1.foo); +// SyntaxError: identifier starts immediately after numeric literal +</pre> + +<p>숫자가 뒤에 오도록 변수 이름을 변경해야 합니다.</p> + +<pre class="brush: js example-good">var life1 = 'foo'; +var foo = life1; +</pre> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Lexical_grammar">문법</a></li> + <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#%EB%B3%80%EC%88%98">변수</a>(<a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a>)</li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/illegal_character/index.html b/files/ko/web/javascript/reference/errors/illegal_character/index.html new file mode 100644 index 0000000000..b3cd3a9750 --- /dev/null +++ b/files/ko/web/javascript/reference/errors/illegal_character/index.html @@ -0,0 +1,81 @@ +--- +title: 'SyntaxError: illegal character' +slug: Web/JavaScript/Reference/Errors/Illegal_character +tags: + - ZWSP + - 구문 에러 + - 자바스크립트 + - 폭 없는 공백 +translation_of: Web/JavaScript/Reference/Errors/Illegal_character +--- +<p>{{jsSidebar("Errors")}}</p> + +<h2 id="메세지">메세지</h2> + +<pre class="syntaxbox">SyntaxError: Invalid character (Edge) +SyntaxError: illegal character (Firefox) +SyntaxError: Invalid or unexpected token (Chrome) +</pre> + +<h2 id="에러_타입">에러 타입</h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2> + +<p>코드에 해당 구문에 맞지 않거나 예기치 않은 토큰이 있습니다. 마이너스 기호(<code> - </code>)와 대시(<code> – </code>) 또는 따옴표(<code> " </code>)와 비표준 따옴표(<code> “ </code>) 등이 잘못 사용된 경우에 대해 문법 체크를 해주는 편집기를 사용하여 코드를 주의 깊게 확인해야 합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="잘못_사용된_문자">잘못 사용된 문자</h3> + +<p>일부 문자들은 비슷하게 보이지만 파서가 코드 해석을 실패하게 만듭니다. 유명한 예로 따옴표, 마이너스 또는 세미콜론(<a href="https://en.wikipedia.org/wiki/Question_mark#Greek_question_mark">greek questionmark (U+37e)</a>과 동일하게 보입니다)이 있습니다.</p> + +<pre class="brush: js example-bad">“This looks like a string”; // SyntaxError: illegal character + // 비슷해 보이지만 “와 ”는 "이 아닙니다 + +42 – 13; // SyntaxError: illegal character + // 비슷해 보이지만 –은 -이 아닙니다 + +var foo = 'bar'; // SyntaxError: illegal character + // 비슷해 보이지만 <37e>은 ;이 아닙니다 +</pre> + +<p>아래 예제는 정상적으로 동작합니다:</p> + +<pre class="brush: js example-good">"This is actually a string"; +42 - 13; +var foo = 'bar'; +</pre> + +<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">일부 편집기와 IDE는 문제가 있는 부분을 알려주거나 적어도 강조 표시를 해주지만 전부는 아닙니다. 이런 에러가 발생했을 때 무엇이 문제인지 찾을 수 없는 경우, 문제가 있는 줄을 지우고 다시 작성하는 것 가장 좋습니다.</span></span></span></span></p> + +<h3 id="문자_빠트리기">문자 빠트리기</h3> + +<p>앞이나 뒤에 오는 문자를 잊어버리기 쉽습니다.</p> + +<pre class="brush: js example-bad">var colors = ['#000', #333', '#666']; +// SyntaxError: illegal character +</pre> + +<p> <code><strong>'</strong>#333'</code>에 빠진 작은따옴표를 추가합니다.</p> + +<pre class="brush: js example-good">var colors = ['#000', '#333', '#666'];</pre> + +<h3 id="숨겨진_문자">숨겨진 문자</h3> + +<p>다른 곳에서 코드를 복사하여 붙여넣은 경우 잘못된 문자가 포함돼 있을 수 있습니다. 주의하세요!</p> + +<pre class="brush: js example-bad">var foo = 'bar'; +// SyntaxError: illegal character +</pre> + +<p>Vim과 같은 편집기에서 아래 코드를 체크하면 폭 없는 공백(<a href="https://en.wikipedia.org/wiki/Zero-width_space">zero-width space (ZWSP) (U+200B)</a>) 문자가 있는 것을 확인할 수 있습니다.</p> + +<pre class="brush: js">var foo = 'bar';<200b></pre> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Lexical_grammar">문법</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/index.html b/files/ko/web/javascript/reference/errors/index.html new file mode 100644 index 0000000000..79e24cc575 --- /dev/null +++ b/files/ko/web/javascript/reference/errors/index.html @@ -0,0 +1,12 @@ +--- +title: JavaScript error reference +slug: Web/JavaScript/Reference/Errors +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Errors +--- +<p>{{jsSidebar("Errors")}}</p> + +<p>오류, 사방에 오류.</p> + +<p>{{ListSubPages("/ko/docs/Web/JavaScript/Reference/Errors")}}</p> diff --git a/files/ko/web/javascript/reference/errors/invalid_array_length/index.html b/files/ko/web/javascript/reference/errors/invalid_array_length/index.html new file mode 100644 index 0000000000..6ddeb58f06 --- /dev/null +++ b/files/ko/web/javascript/reference/errors/invalid_array_length/index.html @@ -0,0 +1,73 @@ +--- +title: 'RangeError: invalid array length' +slug: Web/JavaScript/Reference/Errors/Invalid_array_length +translation_of: Web/JavaScript/Reference/Errors/Invalid_array_length +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메세지">메세지</h2> + +<pre class="syntaxbox">RangeError: invalid array length (Firefox) +RangeError: Invalid array length (Chrome) +RangeError: Invalid array buffer length (Chrome) +</pre> + +<h2 id="에러_형식">에러 형식</h2> + +<p>{{jsxref("RangeError")}}</p> + +<h2 id="무엇이_잘못_된_것일까">무엇이 잘못 된 것일까?</h2> + +<p>다음과 같은 원인 때문이다:</p> + +<ul> + <li>2<sup>32</sup>와 같거나 이보다 긴, 혹은 음수의 길이를 가진 {{jsxref("Array")}}나 {{jsxref("ArrayBuffer")}}를 생성했기 때문에, 혹은</li> + <li>{{jsxref("Array")}} 속성을 2<sup>32</sup>와 같거나 이보다 긴 값으로 설정했기 때문이다.</li> +</ul> + +<p><code>Array와 ArrayBuffer의 길이에 제한을 둔 이유는, Array나 ArrayBuffer의 length 속성은 사인되지 않은(unsigned) 32 비트 정수로 반영되기 때문이다.</code> 즉 <code>Array나 ArrayBuffer는 오직 0 ~ </code>2<sup>32</sup>-1 사이의 값만을 저장할 수 있다.</p> + +<p>Array의 length로 해석되는 첫번째 argument로서 문자열 표기를 통해 contructor를 사용하여 Array를 생성할 수 있다.</p> + +<p>다른 방법으로는, length 속성을 설정하기 전에 length의 길이에 제한을 두거나, constructor의 aurgment로서 사용할 수 있다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="잘못된_예제">잘못된 예제</h3> + +<pre class="brush: js example-bad">new Array(Math.pow(2, 40)) +new Array(-1) +new ArrayBuffer(Math.pow(2, 32)) +new ArrayBuffer(-1) + +let a = []; +a.length = a.length - 1; // set -1 to the length property + +let b = new Array(Math.pow(2, 32) - 1); +b.length = b.length + 1; // set 2^32 to the length property +</pre> + +<h3 id="올바른_예제">올바른 예제</h3> + +<pre class="brush: js example-good">[ Math.pow(2, 40) ] // [ 1099511627776 ] +[ -1 ] // [ -1 ] +new ArrayBuffer(Math.pow(2, 32) - 1) +new ArrayBuffer(0) + +let a = []; +a.length = Math.max(0, a.length - 1); + +let b = new Array(Math.pow(2, 32) - 1); +b.length = Math.min(0xffffffff, b.length + 1); + +// 0xffffffff is the hexadecimal notation for 2^32 - 1 +// which can also be written as (-1 >>> 0) +</pre> + +<h2 id="sect1"> </h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.length")}}</li> + <li>{{jsxref("ArrayBuffer")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html b/files/ko/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html new file mode 100644 index 0000000000..7a7acf3ca2 --- /dev/null +++ b/files/ko/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html @@ -0,0 +1,50 @@ +--- +title: 'ReferenceError: invalid assignment left-hand side' +slug: Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side +translation_of: Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메시지">메시지</h2> + +<pre class="syntaxbox">ReferenceError: invalid assignment left-hand side +</pre> + +<h2 id="에러_타입">에러 타입</h2> + +<p>{{jsxref("ReferenceError")}}.</p> + +<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2> + +<p>예상치 못한 할당이 일어났습니다. 이것은 할당 연산자(<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">assignment operator</a>)와 비교 연산자(<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">comparison operator</a>) 간의 불일치로 인한 것일 겁니다. 예를 들면, "<code>=</code>" 부호는 값을 변수에 할당합니다. "<code>==</code>" 나 "<code>===</code>"는 값을 비교하는 연산을 합니다.</p> + +<h2 id="예">예</h2> + +<pre class="brush: js example-bad">if (Math.PI = 3 || Math.PI = 4) { + console.log('no way!'); +} +// ReferenceError: invalid assignment left-hand side + +var str = 'Hello, ' ++= 'is it me ' ++= 'you\'re looking for?'; +// ReferenceError: invalid assignment left-hand side +</pre> + +<p><code>if </code>구문에서, 비교 연산자 ("==")로 비교하려 할 때, 문자열의 연속적인 결합의 경우에는, 플러스("+") 연산자가 필요합니다.</p> + +<pre class="brush: js example-good">if (Math.PI == 3 || Math.PI == 4) { + console.log('no way!'); +} + +var str = 'Hello, ' ++ 'from the ' ++ 'other side!'; +</pre> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Assignment operators</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Comparison operators</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/invalid_date/index.html b/files/ko/web/javascript/reference/errors/invalid_date/index.html new file mode 100644 index 0000000000..32cf041e7e --- /dev/null +++ b/files/ko/web/javascript/reference/errors/invalid_date/index.html @@ -0,0 +1,50 @@ +--- +title: 'RangeError: invalid date' +slug: Web/JavaScript/Reference/Errors/Invalid_date +translation_of: Web/JavaScript/Reference/Errors/Invalid_date +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메시지">메시지</h2> + +<pre class="syntaxbox">RangeError: invalid date (Firefox) +RangeError: invalid time value (Chrome) +RangeError: Provided date is not in valid range (Chrome) +</pre> + +<h2 id="에러_종류">에러 종류</h2> + +<p>{{jsxref("RangeError")}}</p> + +<h2 id="무엇이_잘못_된_걸까">무엇이 잘못 된 걸까?</h2> + +<p>유효하지 않은 String이 {{jsxref("Date")}} 나 {{jsxref("Date.parse()")}}에 입력되었습니다.</p> + +<h2 id="예시">예시</h2> + +<h3 id="올바르지_않은_사용_예시">올바르지 않은 사용 예시</h3> + +<p>인식 할 수 없는 string이나 잘못된 요소 값을 포함하는 ISO 형식의 날짜 string은 일반적으로 {{jsxref ( "NaN")}}을 반환합니다. 그러나 구현 방식에 따라 ISO 형식 string을 따르지 않는 경우 <code>RangeError: invalid date</code>가 표시 될 수 있습니다. Firefox의 경우:</p> + +<pre class="brush: js example-bad">new Date('foo-bar 2014'); +new Date('2014-25-23').toISOString(); +new Date('foo-bar 2014').toString(); +</pre> + +<p>그러나 이 경우, Firefox에서는 {{jsxref("NaN")}} 을 반환합니다:</p> + +<pre class="brush: js example-bad">Date.parse('foo-bar 2014'); // NaN</pre> + +<p>더 자세한 사항은 {{jsxref("Date.parse()")}} 문서를 참고하세요.</p> + +<h3 id="올바른_사용_예시">올바른 사용 예시</h3> + +<pre class="brush: js example-good">new Date('05 October 2011 14:48 UTC');</pre> + +<h2 id="더_보기">더 보기</h2> + +<ul> + <li>{{jsxref("Date")}}</li> + <li>{{jsxref("Date.prototype.parse()")}}</li> + <li>{{jsxref("Date.prototype.toISOString()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/invalid_for-in_initializer/index.html b/files/ko/web/javascript/reference/errors/invalid_for-in_initializer/index.html new file mode 100644 index 0000000000..7dd5e15a9a --- /dev/null +++ b/files/ko/web/javascript/reference/errors/invalid_for-in_initializer/index.html @@ -0,0 +1,75 @@ +--- +title: 'SyntaxError: for-in loop head declarations may not have initializers' +slug: Web/JavaScript/Reference/Errors/Invalid_for-in_initializer +tags: + - for...in 구문 + - 구문 에러 + - 배열 반복 + - 자바스크립트 + - 초기화 +translation_of: Web/JavaScript/Reference/Errors/Invalid_for-in_initializer +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메세지">메세지</h2> + +<pre class="syntaxbox">SyntaxError: for-in loop head declarations cannot have an initializer (Edge) +SyntaxError: for-in loop head declarations may not have initializers (Firefox) +SyntaxError: for-in loop variable declaration may not have an initializer. (Chrome) +</pre> + +<h2 id="에러_타입">에러 타입</h2> + +<p>엄격(Strict) 모드에서의 {{jsxref("SyntaxError")}}.</p> + +<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> 반복문의 선언부에 초기화 구문이 포함되어 있습니다. 즉, |<code>for (var i = 0 in obj)</code>| 구문을 통해 변수가 정의되고 값이 할당된 것을 말합니다. 비엄격 모드(non-strict) 모드에서는 이 초기화 구문이 무시되어 <code>|for (var i in obj)|</code> 처럼 동작합니다. 하지만 엄격 모드에서는 <code>SyntaxError</code> 가 발생합니다.</p> + +<h2 id="예제">예제</h2> + +<p>이 예제는 <code>SyntaxError</code>를 발생시킵니다.</p> + +<pre class="brush: js example-bad">"use strict"; + +var obj = {a: 1, b: 2, c: 3 }; + +for (var i = 0 in obj) { + console.log(obj[i]); +} + +// SyntaxError: for-in loop head declarations may not have initializers +</pre> + +<h3 id="올바른_for-in_반복문">올바른 for-in 반복문</h3> + +<p>for-in 반복문의 선언부에서 초기화 구문(<code>i = 0</code>)을 삭제합니다.</p> + +<pre class="brush: js example-good">"use strict"; + +var obj = {a: 1, b: 2, c: 3 }; + +for (var i in obj) { + console.log(obj[i]); +} +</pre> + +<h3 id="배열_반복">배열 반복</h3> + +<p>for...in 반복문은 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...in#Array_iteration_and_for...in">배열을 반복하는데에는 사용하지 않습니다</a>. 배열({{jsxref("Array")}})을 반복하기 위해 <code>for-in</code> 반복문 대신에 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a></code> 반복문을 사용하려고 한 적이 있습니까? <code>for</code> 반복문은 선언부에서 초기화도 할 수 있습니다:</p> + +<pre class="brush: js example-good">var arr = [ "a", "b", "c" ] + +for (var i = 2; i < arr.length; i++) { + console.log(arr[i]); +} + +// "c"</pre> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code> – 엄격 모드와 비엄격 모드에서 모두 초기화를 허용하지 않습니다.</li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a></code> – 배열 반복에 적합하고 초기화도 가능합니다.</li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/invalid_for-of_initializer/index.html b/files/ko/web/javascript/reference/errors/invalid_for-of_initializer/index.html new file mode 100644 index 0000000000..0e60e242e8 --- /dev/null +++ b/files/ko/web/javascript/reference/errors/invalid_for-of_initializer/index.html @@ -0,0 +1,64 @@ +--- +title: >- + SyntaxError: a declaration in the head of a for-of loop can't have an + initializer +slug: Web/JavaScript/Reference/Errors/Invalid_for-of_initializer +tags: + - For문 초기화 + - 구문 에러 + - 반복문 + - 자바스크립트 +translation_of: Web/JavaScript/Reference/Errors/Invalid_for-of_initializer +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메세지">메세지</h2> + +<pre class="syntaxbox">SyntaxError: for-of loop head declarations cannot have an initializer (Edge) +SyntaxError: a declaration in the head of a for-of loop can't have an initializer (Firefox) +SyntaxError: for-of loop variable declaration may not have an initializer. (Chrome) +</pre> + +<h2 id="에러_타입">에러 타입</h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a> 반복문의 식이 초기화 구문을 포함한 것이 문제입니다. 즉, |<code>for (var i = 0 of iterable)</code>| 구문을 통해 변수가 정의되고 값이 할당된 것을 말합니다. 이 구문은 for-of 반복문에서 허용되지 않습니다. 이 경우 초기화를 할 수 있는 for 반복문이 필요합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="잘못된_for-of_반복문">잘못된 for-of 반복문</h3> + +<pre class="brush: js example-bad">let iterable = [10, 20, 30]; + +for (let value = 50 of iterable) { + console.log(value); +} + +// SyntaxError: a declaration in the head of a for-of loop can't +// have an initializer</pre> + +<h3 id="올바른_for-of_반복문">올바른 <code>for-of</code> 반복문</h3> + +<p>for-of 반복문에서 초기화 구문(<code>value = 50</code>)을 삭제해야 합니다. 50을 더하고 싶다면 다음 예제와 같이 반복문 안에 추가할 수 있습니다.</p> + +<pre class="brush: js example-good">let iterable = [10, 20, 30]; + +for (let value of iterable) { + value += 50; + console.log(value); +} +// 60 +// 70 +// 80 +</pre> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> – 엄격(Strict) 모드에서는 마찬가지로 초기화를 허용하지 않습니다. (<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_for-in_initializer">SyntaxError: for-in loop head declarations may not have initializers</a>)</li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a></code> – 초기화를 허용합니다.</li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/is_not_iterable/index.html b/files/ko/web/javascript/reference/errors/is_not_iterable/index.html new file mode 100644 index 0000000000..8e00501d54 --- /dev/null +++ b/files/ko/web/javascript/reference/errors/is_not_iterable/index.html @@ -0,0 +1,106 @@ +--- +title: 'TypeError: ''x'' is not iterable' +slug: Web/JavaScript/Reference/Errors/is_not_iterable +tags: + - JavaScript + - 레퍼런스 + - 에러 + - 타입에러 +translation_of: Web/JavaScript/Reference/Errors/is_not_iterable +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메시지">메시지</h2> + +<pre class="syntaxbox">TypeError: 'x' is not iterable (Firefox, Chrome) +TypeError: 'x' is not a function or its return value is not iterable (Chrome) +</pre> + +<h2 id="에러_타입">에러 타입</h2> + +<p>{{jsxref("TypeError")}}</p> + +<h2 id="무엇이_문제인가요">무엇이 문제인가요?</h2> + +<p>{{jsxref("Promise.all")}} 또는 {{jsxref("TypedArray.from")}} 과 같은 함수의 아규먼트 또는 <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for…of</a> 의 right hand-side 로 주어진 값이 <a href="/ko/docs/Web/JavaScript/Reference/Iteration_protocols">iterable 객체</a>가 아닙니다. iterable 은 {{jsxref("Array")}}, {{jsxref("String")}} 또는 {{jsxref("Map")}}, 생성자 결과, 또는 <a href="/ko/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">iterable protocol</a> 구현 객체와 같은 내장 iterable 타입이 될 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="모든_객체_프로퍼티_iterating">모든 객체 프로퍼티 iterating</h3> + +<p>JavaScript 에서 <a href="/ko/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">iterable protocol</a> 을 구현하지 않은 {{jsxref("Object")}} 는 iterable 이 아닙니다.<br> + 그러므로, 객체의 프로퍼티를 반복하기 위해 <a href="/ko/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for…of</a> 를 사용하면 안됩니다.</p> + +<pre class="brush: js example-bad">var obj = { 'France': 'Paris', 'England': 'London' }; +for (let p of obj) { // TypeError: obj is not iterable + // … +} +</pre> + +<p>객체의 모든 항목 또는 프로퍼티를 반복하려면 대신 {{jsxref("Object.keys")}} 또는 {{jsxref("Object.entries")}} 를 사용해야 합니다.</p> + +<pre class="brush: js example-good">var obj = { 'France': 'Paris', 'England': 'London' }; +// 모든 프로퍼티 이름을 iterate: +for (let country of Object.keys(obj)) { + var capital = obj[country]; + console.log(country, capital); +} + +for (const [country, capital] of Object.entries(obj)) + console.log(country, capital); + + +</pre> + +<p>이 유즈 케이스에 대한 다른 옵션은 {{jsxref("Map")}} 을 사용하는 것입니다.</p> + +<pre class="brush: js example-good">var map = new Map; +map.set('France', 'Paris'); +map.set('England', 'London'); +// 모든 프로퍼티 이름 iterate +for (let country of map.keys()) { + let capital = map[country]; + console.log(country, capital); +} + +for (let capital of map.values()) + console.log(capital); + +for (const [country, capital] of map.entries()) + console.log(country, capital); +</pre> + +<h3 id="Generator_iterating">Generator iterating</h3> + +<p><a href="/ko/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">Generators</a> 는 iterable 객체를 생성하기 위해 호출하는 함수입니다.</p> + +<pre class="brush: js example-bad">function* generate(a, b) { + yield a; + yield b; +} + +for (let x of generate) // TypeError: generate is not iterable + console.log(x); +</pre> + +<p>generator 가 호출되지 않으면, generator 에 해당하는 {{jsxref("Function")}} 객체를 호출할수는 있지만 interable 하지는 않습니다. generator 호출은 generator 실행동안 yield 된 모든 값을 iterate 하는 iterable 객체를 생성합니다.</p> + +<pre class="brush: js example-good">function* generate(a, b) { + yield a; + yield b; +} + +for (let x of generate(1,2)) + console.log(x); +</pre> + +<h2 id="함께_보기">함께 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">iterable protocol</a></li> + <li>{{jsxref("Object.keys")}}</li> + <li>{{jsxref("Object.entries")}}</li> + <li>{{jsxref("Map")}}</li> + <li><a href="/ko/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">generators</a></li> + <li><a href="/ko/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for…of</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/json_bad_parse/index.html b/files/ko/web/javascript/reference/errors/json_bad_parse/index.html new file mode 100644 index 0000000000..c73b082dbb --- /dev/null +++ b/files/ko/web/javascript/reference/errors/json_bad_parse/index.html @@ -0,0 +1,105 @@ +--- +title: 'SyntaxError: JSON.parse: bad parsing' +slug: Web/JavaScript/Reference/Errors/JSON_bad_parse +translation_of: Web/JavaScript/Reference/Errors/JSON_bad_parse +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메시지">메시지</h2> + +<pre class="syntaxbox">SyntaxError: JSON.parse: unterminated string literal +SyntaxError: JSON.parse: bad control character in string literal +SyntaxError: JSON.parse: bad character in string literal +SyntaxError: JSON.parse: bad Unicode escape +SyntaxError: JSON.parse: bad escape character +SyntaxError: JSON.parse: unterminated string +SyntaxError: JSON.parse: no number after minus sign +SyntaxError: JSON.parse: unexpected non-digit +SyntaxError: JSON.parse: missing digits after decimal point +SyntaxError: JSON.parse: unterminated fractional number +SyntaxError: JSON.parse: missing digits after exponent indicator +SyntaxError: JSON.parse: missing digits after exponent sign +SyntaxError: JSON.parse: exponent part is missing a number +SyntaxError: JSON.parse: unexpected end of data +SyntaxError: JSON.parse: unexpected keyword +SyntaxError: JSON.parse: unexpected character +SyntaxError: JSON.parse: end of data while reading object contents +SyntaxError: JSON.parse: expected property name or '}' +SyntaxError: JSON.parse: end of data when ',' or ']' was expected +SyntaxError: JSON.parse: expected ',' or ']' after array element +SyntaxError: JSON.parse: end of data when property name was expected +SyntaxError: JSON.parse: expected double-quoted property name +SyntaxError: JSON.parse: end of data after property name when ':' was expected +SyntaxError: JSON.parse: expected ':' after property name in object +SyntaxError: JSON.parse: end of data after property value in object +SyntaxError: JSON.parse: expected ',' or '}' after property value in object +SyntaxError: JSON.parse: expected ',' or '}' after property-value pair in object literal +SyntaxError: JSON.parse: property names must be double-quoted strings +SyntaxError: JSON.parse: expected property name or '}' +SyntaxError: JSON.parse: unexpected character +SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data +</pre> + +<h2 id="에러_타입">에러 타입</h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="뭐가_잘못됬나요">뭐가 잘못됬나요?</h2> + +<p>{{jsxref("JSON.parse()")}} 는 문자열을 JSON으로 파싱한다. 이 문자열은 유효한 JSON 형태의 문자열이어야 하며, 유효하지 않을 경우 에러가 발생한다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="JSON.parse()_는_여분의_콤마를_허용하지_않는다."><code>JSON.parse()</code> 는 여분의 콤마를 허용하지 않는다.</h3> + +<p>다음 두 줄은 SyntaxError를 발생시킨다:</p> + +<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 +</pre> + +<p>끝에 오는 콤마를 제거하면 정확하게 JSON으로 파싱한다:</p> + +<pre class="brush: js example-good">JSON.parse('[1, 2, 3, 4]'); +JSON.parse('{"foo": 1}');</pre> + +<h3 id="프로퍼티_이름은_반드시_쌍따옴표로_표현해야_한다.">프로퍼티 이름은 반드시 쌍따옴표로 표현해야 한다.</h3> + +<p>'foo'처럼 프로퍼티를 작은 따옴표로 감싸서는 안된다.</p> + +<pre class="brush: js example-bad">JSON.parse("{'foo': 1}"); +// SyntaxError: JSON.parse: expected property name or '}' +// at line 1 column 2 of the JSON data</pre> + +<p>대신에 "foo" 처럼 써야 한다:</p> + +<pre class="brush: js example-good">JSON.parse('{"foo": 1}');</pre> + +<h3 id="리딩_제로와_십진_소수점">리딩 제로와 십진 소수점</h3> + +<p>01 처럼 리딩제로를 사용할 수 없고, 십진 소수점 뒤에는 최소한 하나의 숫자는 등장해야 한다.</p> + +<pre class="brush: js example-bad">JSON.parse('{"foo": 01}'); +// SyntaxError: JSON.parse: expected ',' or '}' after property value +// in object at line 1 column 2 of the JSON data + +JSON.parse('{"foo": 1.}'); +// SyntaxError: JSON.parse: unterminated fractional number +// at line 1 column 2 of the JSON data +</pre> + +<p>대신에 리딩제로를 없애고 1 이라고 쓰고, 십진 소수점 뒤에는 반드시 하나 이상의 숫자를 적도록 한다:</p> + +<pre class="brush: js example-good">JSON.parse('{"foo": 1}'); +JSON.parse('{"foo": 1.0}'); +</pre> + +<h2 id="또다른_내용">또다른 내용</h2> + +<ul> + <li>{{jsxref("JSON")}}</li> + <li>{{jsxref("JSON.parse()")}}</li> + <li>{{jsxref("JSON.stringify()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/malformed_formal_parameter/index.html b/files/ko/web/javascript/reference/errors/malformed_formal_parameter/index.html new file mode 100644 index 0000000000..e258ba49e6 --- /dev/null +++ b/files/ko/web/javascript/reference/errors/malformed_formal_parameter/index.html @@ -0,0 +1,57 @@ +--- +title: 'SyntaxError: Malformed formal parameter' +slug: Web/JavaScript/Reference/Errors/Malformed_formal_parameter +translation_of: Web/JavaScript/Reference/Errors/Malformed_formal_parameter +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Message">Message</h2> + +<pre class="syntaxbox">SyntaxError: malformed formal parameter (Firefox) +</pre> + +<h2 id="Error_type">Error type</h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="무엇이_잘못_되었을까요">무엇이 잘못 되었을까요?</h2> + +<p>코드에는 최소한 두 개의 인수가 전달 된 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code> 생성자가 있습니다. 마지막 인수는 작성중인 새 함수의 소스코드 입니다. 나머지는 모두 새 함수의 인수 목록을 구성합니다.</p> + +<p>인수 목록이 어딘가 잘못되었습니다. 아마도 실수로 인수 이름으로 if 또는 var와 같은 키워드를 선택했거나 인수 목록에 갈곳 잃은 구두점이 있을 수 있습니다. 또는 실수로 숫자나 개체와 같은 잘못된 값을 전달한 것일 수 있습니다.</p> + +<h2 id="그래_내_문제가_해결됐어._근데_왜_말_안해줬어">그래, 내 문제가 해결됐어. 근데 왜 말 안해줬어?</h2> + +<p>틀림 없이 오류 메세지의 표현은 다소 이상한 부분이 있습니다. "공식 매개 변수"는 "함수 인수"를 말하는 좋은 방법입니다. 우리는 "잘못된 형식의 단어를 사용했다"라고 표현 합니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Invalid_cases">Invalid cases</h3> + +<pre class="brush: js example-bad">var f = Function('x y', 'return x + y;'); +// SyntaxError (missing a comma) + +var f = Function('x,', 'return x;'); +// SyntaxError (extraneous comma) + +var f = Function(37, "alert('OK')"); +// SyntaxError (numbers can't be argument names) +</pre> + +<h3 id="Valid_cases">Valid cases</h3> + +<pre class="brush: js example-good">var f = Function('x, y', 'return x + y;'); // correctly punctuated + +var f = Function('x', 'return x;'); + +// if you can, avoid using Function - this is much faster +var f = function(x) { return x; }; +</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions">About functions</a></li> + <li><a href="https://www.gutenberg.org/ebooks/84"><em>Frankenstein</em> by Mary Wollstonecraft Shelley, full e-text</a> ("Cursed (although I curse myself) be the hands that formed you! You have made me wretched beyond expression. You have left me no power to consider whether I am just to you or not. Begone! Relieve me from the sight of your detested form.")</li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/missing_bracket_after_list/index.html b/files/ko/web/javascript/reference/errors/missing_bracket_after_list/index.html new file mode 100644 index 0000000000..b9149ac159 --- /dev/null +++ b/files/ko/web/javascript/reference/errors/missing_bracket_after_list/index.html @@ -0,0 +1,56 @@ +--- +title: 'SyntaxError: missing ] after element list' +slug: Web/JavaScript/Reference/Errors/Missing_bracket_after_list +tags: + - 구문 에러 + - 배열 초기자 + - 자바스크립트 +translation_of: Web/JavaScript/Reference/Errors/Missing_bracket_after_list +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메세지">메세지</h2> + +<pre class="syntaxbox">SyntaxError: missing ] after element list +</pre> + +<h2 id="에러_타입">에러 타입</h2> + +<p>{{jsxref("SyntaxError")}}.</p> + +<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2> + +<p>배열 초기자 구문에 오류가 있습니다. 닫는 대괄호("<code>]</code>") 또는 콤마("<code>,</code>")가 빠진 것 같습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="완성되지_않은_배열_초기자">완성되지 않은 배열 초기자</h3> + +<pre class="brush: js example-bad">var list = [1, 2, + +var instruments = [ + 'Ukulele', + 'Guitar', + 'Piano' +}; + +var data = [{foo: 'bar'} {bar: 'foo'}]; +</pre> + +<p>바르게 고치면:</p> + +<pre class="brush: js example-good">var list = [1, 2]; + +var instruments = [ + 'Ukulele', + 'Guitar', + 'Piano' +]; + +var data = [{foo: 'bar'}, {bar: 'foo'}];</pre> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/missing_colon_after_property_id/index.html b/files/ko/web/javascript/reference/errors/missing_colon_after_property_id/index.html new file mode 100644 index 0000000000..4fe7865664 --- /dev/null +++ b/files/ko/web/javascript/reference/errors/missing_colon_after_property_id/index.html @@ -0,0 +1,78 @@ +--- +title: 'SyntaxError: missing : after property id' +slug: Web/JavaScript/Reference/Errors/Missing_colon_after_property_id +tags: + - 객체 초기자 + - 계산된 속성 + - 구문 에러 + - 자바스크립트 +translation_of: Web/JavaScript/Reference/Errors/Missing_colon_after_property_id +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메세지">메세지</h2> + +<pre class="syntaxbox">SyntaxError: Expected ':' (Edge) +SyntaxError: missing : after property id (Firefox) +</pre> + +<h2 id="에러_타입">에러 타입</h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="무엇이_문제일까">무엇이 문제일까?</h2> + +<p><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer">객체 초기자</a> 구문으로 객체를 만들 때 콜론(<code>:</code>)은 객체의 속성을 키와 값으로 분리합니다.</p> + +<pre class="brush: js">var obj = { propertyKey: 'value' }; +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="콜론_vs._등호">콜론 vs. 등호</h3> + +<p>객체 초기자 구문에는 등호를 사용할 수 없으므로 아래 예제는 실패합니다.</p> + +<pre class="brush: js example-bad">var obj = { propertyKey = 'value' }; +// SyntaxError: missing : after property id +</pre> + +<p>콜론을 사용하거나 객체를 생성한 뒤에 대괄호를 사용하여 새로운 속성을 할당하는 것이 바릅니다.</p> + +<pre class="brush: js example-good">var obj = { propertyKey: 'value' }; + +// 또는 + +var obj = { }; +obj['propertyKey'] = 'value'; +</pre> + +<h3 id="빈_속성">빈 속성</h3> + +<p>아래와 같이 빈 속성을 만들 수 없습니다:</p> + +<pre class="brush: js example-bad">var obj = { propertyKey; }; +// SyntaxError: missing : after property id +</pre> + +<p>만약 값 없이 속성을 정의해야 한다면 값으로 {{jsxref("null")}}을 지정할 수 있습니다.</p> + +<pre class="brush: js example-good">var obj = { propertyKey: null };</pre> + +<h3 id="계산된_속성">계산된 속성</h3> + +<p>식으로 속성의 키를 만드는 경우 대괄호를 사용해야 합니다. 그렇지 않으면 속성 이름에 계산된 값을 사용할 수 없습니다:</p> + +<pre class="brush: js example-bad">var obj = { 'b'+'ar': 'foo' }; +// SyntaxError: missing : after property id +</pre> + +<p>식에 대괄호를 넣으세요 <code>[]</code>:</p> + +<pre class="brush: js example-good">var obj = { ['b'+'ar']: 'foo' };</pre> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer">객체 초기자</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/missing_curly_after_property_list/index.html b/files/ko/web/javascript/reference/errors/missing_curly_after_property_list/index.html new file mode 100644 index 0000000000..8e0abf94db --- /dev/null +++ b/files/ko/web/javascript/reference/errors/missing_curly_after_property_list/index.html @@ -0,0 +1,47 @@ +--- +title: 'SyntaxError: missing } after property list' +slug: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list +translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메시지">메시지</h2> + +<pre class="syntaxbox">SyntaxError: missing } after property list +</pre> + +<h2 id="에러_유형">에러 유형</h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="무엇이_잘못_된_걸까">무엇이 잘못 된 걸까?</h2> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">객체를 초기화 하는 부분</a> 어딘가에 구문에 실수가 있습니다. 실제로 빠진 중괄호 일 수도 있지만, 누락 된 쉼표 일 수도 있습니다. 또한 닫는 중괄호나 괄호가 올바른 순서인지 확인하세요. 코드를 들여쓰기하거나 서식을 지정하면 좀 더 보기 쉽습니다.</p> + +<h2 id="예시">예시</h2> + +<h3 id="쉼표를_까먹은_경우">쉼표를 까먹은 경우</h3> + +<p>종종 객체 초기화 과정에서 쉼표를 빠트리는 경우가 있습니다:</p> + +<pre class="brush: js example-bad">var obj = { + a: 1, + b: { myProp: 2 } + c: 3 +}; +</pre> + +<p>올바른 예시는 다음과 같습니다:</p> + +<pre class="brush: js example-good">var obj = { + a: 1, + b: { myProp: 2 }, + c: 3 +}; +</pre> + +<h2 id="더_보기">더 보기</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">Object initializer</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/missing_initializer_in_const/index.html b/files/ko/web/javascript/reference/errors/missing_initializer_in_const/index.html new file mode 100644 index 0000000000..be116cf3a4 --- /dev/null +++ b/files/ko/web/javascript/reference/errors/missing_initializer_in_const/index.html @@ -0,0 +1,55 @@ +--- +title: 'SyntaxError: missing = in const declaration' +slug: Web/JavaScript/Reference/Errors/Missing_initializer_in_const +translation_of: Web/JavaScript/Reference/Errors/Missing_initializer_in_const +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메시지">메시지</h2> + +<pre class="syntaxbox">SyntaxError: Const must be initalized (Edge) +SyntaxError: missing = in const declaration (Firefox) +SyntaxError: Missing initializer in const declaration (Chrome) +</pre> + +<h2 id="에러_유형">에러 유형</h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="무엇이_잘못되었나요">무엇이 잘못되었나요?</h2> + +<p>상수는 일반적인 실행 중에 프로그램에 의해 변경될 수 없는 값입니다. 상수는 재할당되거나 재선언될 수 없습니다. 자바스크립트에서 상수는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code> 키워드를 사용해 선언됩니다. 상수는 이니셜라이저가 필요합니다. 다시말해, 한 문장 안에 선언과 동시에 초기화가 이루어져야 합니다 (따라서 추후 수정 불가).</p> + +<h2 id="예제">예제</h2> + +<h3 id="const_이니셜라이저가_빠진_경우">const 이니셜라이저가 빠진 경우</h3> + +<p><code>var</code> 또는 <code>let</code>과 달리, <code>const</code> 선언에서는 반드시 값을 정의해야 합니다.</p> + +<pre class="brush: js example-bad">const COLUMNS; +// SyntaxError: missing = in const declaration</pre> + +<h3 id="에러_수정">에러 수정</h3> + +<p>해당 에러를 수정하기 위해서 여러가지 방법이 존재합니다. 문제 상황에서 상수를 사용해 무엇을 하려 했는지 확인해보세요.</p> + +<h4 id="상수_값_추가">상수 값 추가</h4> + +<p>선언과 같은 문장에 상수 값을 정의합니다.</p> + +<pre class="brush: js example-good">const COLUMNS = 80;</pre> + +<h4 id="const_let_var"><code>const</code>, <code>let</code>, <code>var</code>?</h4> + +<p>상수를 선언할 목적이 아니었다면 <code>const</code>를 사용하지 마세요. <code>let</code> 키워드를 이용한 블록범위 변수, 또는 <code>var</code> 키워드를 이용한 전역 변수를 사용할 수 있습니다. 두 가지 경우 모두 초기값을 요구하지 않습니다.</p> + +<pre class="brush: js example-good">let columns; +</pre> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a></code></li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/missing_name_after_dot_operator/index.html b/files/ko/web/javascript/reference/errors/missing_name_after_dot_operator/index.html new file mode 100644 index 0000000000..a549e48e51 --- /dev/null +++ b/files/ko/web/javascript/reference/errors/missing_name_after_dot_operator/index.html @@ -0,0 +1,63 @@ +--- +title: 'SyntaxError: missing name after . operator' +slug: Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator +translation_of: Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메시지">메시지</h2> + +<pre class="syntaxbox">SyntaxError: missing name after . operator +</pre> + +<h2 id="에러_타입">에러 타입</h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="무엇이_잘_못_되었을까">무엇이 잘 못 되었을까?</h2> + +<p>점 연산자 (<code>.</code>)는 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">프로퍼티 접근</a>을 위해 사용합니다. 접근해야 하는 프로퍼티 명은 제대로 명시 해야 합니다. 연산 프로퍼티에 접근하려면, 점 연산자를 사용하지 않고 대괄호를 사용하는 것으로 프로퍼티 접근 방식을 바꿔야 합니다. 이런 방식들이 표현식의 계산을 수행시켜줄 것입니다. 아마 당신은 연결을 하려고 했을 것입니다. 이 경우에는 더하기 연산자(<code>+</code>)가 필요합니다. 아래의 예제를 봐주세요. </p> + +<h2 id="예제">예제</h2> + +<h3 id="프로퍼티_접근">프로퍼티 접근</h3> + +<p>JavaScript <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">프로퍼티 접근자</a>는 점(.) 또는 대괄호(<code>[]</code>) 중 하나만 사용한다. 대괄호는 연산 프로퍼티에 접근을 허용합니다. </p> + +<pre class="brush: js example-bad">var obj = { foo: { bar: "baz", bar2: "baz2" } }; +var i = 2; + +obj.[foo].[bar] +// SyntaxError: missing name after . operator + +obj.foo."bar"+i; +// SyntaxError: missing name after . operator +</pre> + +<p>이 코드를 고치려면, 오브젝트에 이런 식으로 접근해야 합니다.:</p> + +<pre class="brush: js example-good">obj.foo.bar; // "baz" +// 또는 대신에 +obj["foo"]["bar"]; // "baz" + +// 연산 프로퍼티는 대괄호가 필요합니다. +obj.foo["bar" + i]; // "baz2" +</pre> + +<h3 id="프로퍼티_접근_vs._연결">프로퍼티 접근 vs. 연결</h3> + +<p>다른 프로그램 언어를 사용하다 왔다면 ( {{Glossary("PHP")}} 같은), 점 연산자(<code>.</code>)와 연결 연산자(<code>+</code>)를 혼동해서 쓰기가 더 쉬울 것입니다.</p> + +<pre class="brush: js example-bad">console.log("Hello" . "world"); + +// SyntaxError: missing name after . operator</pre> + +<p>대신에 결합을 위해서는 더하기 표식을 사용해야 합니다.:</p> + +<pre class="brush: js example-good">console.log("Hello" + "World");</pre> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Property accessors</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html b/files/ko/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html new file mode 100644 index 0000000000..1f28ac1104 --- /dev/null +++ b/files/ko/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html @@ -0,0 +1,38 @@ +--- +title: 'SyntaxError: missing ) after argument list' +slug: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list +translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Message">Message</h2> + +<pre class="syntaxbox">SyntaxError: missing ) after argument list +</pre> + +<h2 id="Error_type">Error type</h2> + +<p>{{jsxref("SyntaxError")}}.</p> + +<h2 id="What_went_wrong">What went wrong?</h2> + +<p>function을 호출하는 방식에 에러가 있는 것입니다. 맞춤법, 연산자 누락 또는 이스케이프 처리를 하지 않는 문자열과 같은 것으로 발생될 수 있습니다.</p> + +<h2 id="Examples">Examples</h2> + +<p>문자열을 합치는 "+" 연산자가 없기 때문에, Javascript는 <code>log</code> function에 대한 인수를 <code>"PI: "</code>로 인식을 합니다. 이 경우, 닫침 괄호가 누락된 것으로 인식을 합니다.</p> + +<pre class="brush: js example-bad">console.log('PI: ' Math.PI); +// SyntaxError: missing ) after argument list +</pre> + +<p>You can correct the <code>log</code> call by adding the "<code>+</code>" operator:</p> + +<pre class="brush: js example-good">console.log('PI: ' + Math.PI); +// "PI: 3.141592653589793"</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Functions</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html b/files/ko/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html new file mode 100644 index 0000000000..cd7b368aa4 --- /dev/null +++ b/files/ko/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html @@ -0,0 +1,65 @@ +--- +title: 'SyntaxError: missing ) after condition' +slug: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition +translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메시지">메시지</h2> + +<pre class="syntaxbox">SyntaxError: missing ) after condition +</pre> + +<h2 id="에러_유형">에러 유형</h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="무엇이_잘못_된_걸까">무엇이 잘못 된 걸까?</h2> + +<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if</a></code>조건문에 에러가 있습니다. 어떠한 프로그래밍 언어에서든 코드는 입력값에 따라 의사를 결정하고 행동을 수행해야합니다. 지정된 조건이 true이면 if 문이 명령문을 실행합니다. 자바스크립트에서는 이 조건이 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if</a></code>문 다음의 괄호에 있어야 합니다. 다음은 그 예시입니다.</p> + +<pre class="brush: js">if (condition) { + // do something if the condition is true +}</pre> + +<h2 id="예시">예시</h2> + +<p>실수가 있을 수 있으니, 모든 괄호를 주의깊게 확인하세요.</p> + +<pre class="brush: js example-bad">if (3 > Math.PI { + console.log("wait what?"); +} + +// SyntaxError: missing ) after condition +</pre> + +<p>이 코드를 고치기 위해선, 조건문을 괄호로 닫아야 합니다.</p> + +<pre class="brush: js example-good">if (3 > Math.PI) { + console.log("wait what?"); +}</pre> + +<p>다른 프로그래밍 언어를 배운 경우, 자바스크립트에서는 다르게 쓰이거나, 쓰이지 않는 키워드를 사용하기 쉽습니다.</p> + +<pre class="brush: js example-bad">if (done is true) { + console.log("we are done!"); +} + +// SyntaxError: missing ) after condition +</pre> + +<p>이 경우 올바른 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">비교연산자</a>를 사용해야 합니다. 그 예시로:</p> + +<pre class="brush: js example-good">if (done === true) { + console.log("we are done!"); +}</pre> + +<h2 id="더_보기">더 보기</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if...else</a></code></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Comparison operators</a></li> + <li> + <p><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></p> + </li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/missing_semicolon_before_statement/index.html b/files/ko/web/javascript/reference/errors/missing_semicolon_before_statement/index.html new file mode 100644 index 0000000000..ec3334b52f --- /dev/null +++ b/files/ko/web/javascript/reference/errors/missing_semicolon_before_statement/index.html @@ -0,0 +1,63 @@ +--- +title: 'SyntaxError: missing ; before statement' +slug: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement +translation_of: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메시지">메시지</h2> + +<pre class="syntaxbox">SyntaxError: missing ; before statement +</pre> + +<h2 id="오류_타입">오류 타입</h2> + +<p>{{jsxref("SyntaxError")}}.</p> + +<h2 id="무엇이_잘_못_되었나">무엇이 잘 못 되었나?</h2> + +<p>어딘가에 세미 콜론(<code>;</code>)이 빠져 있습니다. <a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript 구문</a>은 반드시 세미 콜론으로 끝나야 합니다. 일부는 자동 세미콜론 삽입 (<a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">automatic semicolon insertion (ASI)</a>)의 영향을 받습니다. 그러나 이 경우에는 직접 세미 콜론을 써주어야 합니다. 그래야 JavaScript가 올바르게 해석 될 수 있기 때문입니다.</p> + +<p>그러나, 가끔, 이 오류는 또 다른 오류의 결과로도 나타날 수도 있습니다. 문자열을 escape 문자로 적절히 처리해 주지 않았을 때, 또는 <code>var</code> 키워드를 잘 못 사용했을 때와 같은 경우 입니다. 또한 어딘가에 너무 많은 괄호 기호를 사용했을 것입니다. 이 오류가 발생했을 때에는 문법을 신중히 검토해야 합니다. </p> + +<h2 id="예제">예제</h2> + +<h3 id="Escape_처리되지_않은_문자열">Escape 처리되지 않은 문자열</h3> + +<p>이 오류는 문자열을 escape 처리 하지 않았을 때, JavaScript 엔진이 문자열 끝을 미리 예측하여 발생합니다. 예를 들자면 아래와 같습니다. :</p> + +<pre class="brush: js example-bad">var foo = 'Tom's bar'; +// SyntaxError: missing ; before statement</pre> + +<p>문자열을 묶어줄 때 쌍 따옴표를 사용하거나, 역슬래시를 이용해서 홑따옴표를 사용 할 수 있습니다. :</p> + +<pre class="brush: js example-good">var foo = "Tom's bar"; +var foo = 'Tom\'s bar'; +</pre> + +<h3 id="var와_함께_선언하는_것">var와 함께 선언하는 것</h3> + +<p>이미 <code>var</code> 선언된 object나 array의 요소를 새로 선언 할 수 없습니다.</p> + +<pre class="brush: js example-bad">var obj = {}; +var obj.foo = 'hi'; // SyntaxError missing ; before statement + +var array = []; +var array[0] = 'there'; // SyntaxError missing ; before statement +</pre> + +<p>대신에, <code>var</code> 키워드를 생략하고 정의합니다. :</p> + +<pre class="brush: js example-good">var obj = {}; +obj.foo = 'hi'; + +var array = []; +array[0] = 'there'; +</pre> + +<h2 id="참조_문서">참조 문서</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">Automatic semicolon insertion (ASI)</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript statements</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/more_arguments_needed/index.html b/files/ko/web/javascript/reference/errors/more_arguments_needed/index.html new file mode 100644 index 0000000000..41137d2f63 --- /dev/null +++ b/files/ko/web/javascript/reference/errors/more_arguments_needed/index.html @@ -0,0 +1,45 @@ +--- +title: 'TypeError: More arguments needed' +slug: Web/JavaScript/Reference/Errors/More_arguments_needed +translation_of: Web/JavaScript/Reference/Errors/More_arguments_needed +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메시지">메시지</h2> + +<pre class="syntaxbox">TypeError: argument is not an Object and is not null (Edge) +TypeError: Object.create requires at least 1 argument, but only 0 were passed +TypeError: Object.setPrototypeOf requires at least 2 arguments, but only 0 were passed +TypeError: Object.defineProperties requires at least 1 argument, but only 0 were passed +</pre> + +<h2 id="에러_타입">에러 타입</h2> + +<p>{{jsxref("TypeError")}}.</p> + +<h2 id="무엇이_잘_못_되었을까">무엇이 잘 못 되었을까?</h2> + +<p>함수 호출 시 에러가 있습니다. 더 많은 인수가 주어져야 합니다.</p> + +<h2 id="예제">예제</h2> + +<p>{{jsxref("Object.create()")}} 메서드는 적어도 1개의 인자가 필요하며, {{jsxref("Object.setPrototypeOf()")}} 메서드는 적어도 2개의 인자가 필요합니다.:</p> + +<pre class="brush: js example-bad">var obj = Object.create(); +// TypeError: Object.create requires at least 1 argument, but only 0 were passed + +var obj = Object.setPrototypeOf({}); +// TypeError: Object.setPrototypeOf requires at least 2 arguments, but only 1 were passed +</pre> + +<p>예를 들면, 이렇게 프로토 타입으로 {{jsxref("null")}}를 세팅해서 고칠 수 있습니다.:</p> + +<pre class="brush: js example-good">var obj = Object.create(null); + +var obj = Object.setPrototypeOf({}, null);</pre> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Functions</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/negative_repetition_count/index.html b/files/ko/web/javascript/reference/errors/negative_repetition_count/index.html new file mode 100644 index 0000000000..b2437c9ad8 --- /dev/null +++ b/files/ko/web/javascript/reference/errors/negative_repetition_count/index.html @@ -0,0 +1,40 @@ +--- +title: 'RangeError: repeat count must be non-negative' +slug: Web/JavaScript/Reference/Errors/Negative_repetition_count +translation_of: Web/JavaScript/Reference/Errors/Negative_repetition_count +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메시지">메시지</h2> + +<pre class="syntaxbox">RangeError: repeat count must be non-negative (Firefox) +RangeError: Invalid count value (Chrome) +</pre> + +<h2 id="에러_형식">에러 형식</h2> + +<p>{{jsxref("RangeError")}}</p> + +<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2> + +<p>{{jsxref("String.prototype.repeat()")}} 메소드가 사용되었습니다. 이 메소드는 문자열이 반복되는 수를 예측하는 카운트 파라메터를 가지고 있었습니다. 이 파라메터는 0보다 크고, 양의 {{jsxref("Infinity")}} 보다는 작으며, 음수는 될수 없습니다. 이 범위는 이렇게 표현 될 수 있습니다. : [0, +∞)</p> + +<h2 id="예">예</h2> + +<h3 id="허용되지_않는_경우">허용되지 않는 경우</h3> + +<pre class="brush: js example-bad">'abc'.repeat(-1); // RangeError </pre> + +<h3 id="허용되는_경우">허용되는 경우</h3> + +<pre class="brush: js example-good">'abc'.repeat(0); // '' +'abc'.repeat(1); // 'abc' +'abc'.repeat(2); // 'abcabc' +'abc'.repeat(3.5); // 'abcabcabc' (수는 정수로 변환될 것입니다.) +</pre> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("String.prototype.repeat()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/no_variable_name/index.html b/files/ko/web/javascript/reference/errors/no_variable_name/index.html new file mode 100644 index 0000000000..e9d6ec6ee7 --- /dev/null +++ b/files/ko/web/javascript/reference/errors/no_variable_name/index.html @@ -0,0 +1,79 @@ +--- +title: 'SyntaxError: missing variable name' +slug: Web/JavaScript/Reference/Errors/No_variable_name +translation_of: Web/JavaScript/Reference/Errors/No_variable_name +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메시지">메시지</h2> + +<pre class="syntaxbox">SyntaxError: missing variable name (Firefox) +SyntaxError: Unexpected token = (Chrome)</pre> + +<h2 id="에러_타입">에러 타입</h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="무엇이_잘_못_되었을까">무엇이 잘 못 되었을까?</h2> + +<p>변수에 이름이 없습니다. 이것은 코드 내의 구문 에러 때문일 수도 있습니다. 어쩌면 콤마를 잘 못 된 곳에 찍었거나, 변수명을 지을 때 애를 먹었을 수도 있습니다. 그럴 수도 있죠! 작명은 너무 어려우니까요. </p> + +<h2 id="예제">예제</h2> + +<h3 id="이름을_잃은_변수">이름을 잃은 변수</h3> + +<pre class="brush: js example-bad">var = "foo"; +</pre> + +<p>좋은 이름을 떠올리기 어려웠을 거예요. 우리 모두 겪는 일이죠.</p> + +<pre class="brush: js example-good">var ohGodWhy = "foo";</pre> + +<h3 id="예약어는_변수명이_될_수_없어요">예약어는 변수명이 될 수 없어요</h3> + +<p>예약어로 지정된 이름들이 변수로 쓰여 있습니다. 이것들은 사용할 수 없어요. 미안합니다. :(</p> + +<pre class="brush: js example-bad">var debugger = "whoop"; +// SyntaxError: missing variable name +</pre> + +<h3 id="여러_변수를_선언하기">여러 변수를 선언하기</h3> + +<p>여러 변수를 한 번에 선언할 때에는 콤마에 주의를 기울여야 합니다. 쓸 데없는 콤마를 더 찍지는 않았는지? 무심코 세미콜론 대신 콤마를 찍지는 않았는지? </p> + +<pre class="brush: js example-bad">var x, y = "foo", +var x, = "foo" + +var first = document.getElementById('one'), +var second = document.getElementById('two'), + +// SyntaxError: missing variable name +</pre> + +<p>올바르게 수정한 버전:</p> + +<pre class="brush: js example-good">var x, y = "foo"; +var x = "foo"; + +var first = document.getElementById('one'); +var second = document.getElementById('two');</pre> + +<h3 id="배열">배열</h3> + +<p>JavaScript 의 {{jsxref("Array")}} 리터럴은 대괄호로 감싸주어야 합니다. 이건 동작하지 않아요.</p> + +<pre class="brush: js example-bad">var arr = 1,2,3,4,5; +// SyntaxError: missing variable name +</pre> + +<p>이렇게 해야 맞습니다:</p> + +<pre class="brush: js example-good">var arr = [1,2,3,4,5];</pre> + +<h2 id="더_보기">더 보기</h2> + +<ul> + <li><a href="http://wiki.c2.com/?GoodVariableNames">Good variable names</a></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a></code></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">Variable declarations in the JavaScript Guide</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/not_a_codepoint/index.html b/files/ko/web/javascript/reference/errors/not_a_codepoint/index.html new file mode 100644 index 0000000000..782cea10f2 --- /dev/null +++ b/files/ko/web/javascript/reference/errors/not_a_codepoint/index.html @@ -0,0 +1,51 @@ +--- +title: 'RangeError: argument is not a valid code point' +slug: Web/JavaScript/Reference/Errors/Not_a_codepoint +translation_of: Web/JavaScript/Reference/Errors/Not_a_codepoint +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메시지">메시지</h2> + +<pre class="syntaxbox">RangeError: {0} is not a valid code point (Firefox) +RangeError: Invalid code point {0} (Chrome) +</pre> + +<h2 id="에러_형식">에러 형식</h2> + +<p>{{jsxref("RangeError")}}</p> + +<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2> + +<p>{{jsxref("String.fromCodePoint()")}} 메소드는 유효한 코드 포인트(<a href="https://en.wikipedia.org/wiki/Code_point">code point</a>)만을 받아들입니다.</p> + +<p><a href="https://en.wikipedia.org/wiki/Code_point">code point</a>는 유니코드의 코드 스페이스 값으로, <code>0</code>부터 <code>0x10FFFF</code>까지의 정수 범위입니다.</p> + +<p>{{jsxref("NaN")}}을 사용하는 값, 음수 (<code>-1</code>), 정수가 아닌 수(3.14), 또는 <code>0x10FFFF</code> (<code>1114111</code>) 보다 큰 값은 이 함수에 적용될 수 없습니다.</p> + +<h2 id="예">예</h2> + +<h3 id="유효하지_않은_경우">유효하지 않은 경우</h3> + +<pre class="brush: js example-bad">String.fromCodePoint('_'); // RangeError +String.fromCodePoint(Infinity); // RangeError +String.fromCodePoint(-1); // RangeError +String.fromCodePoint(3.14); // RangeError +String.fromCodePoint(3e-2); // RangeError +String.fromCodePoint(NaN); // RangeError</pre> + +<h3 id="유효한_경우">유효한 경우</h3> + +<pre class="brush: js example-good">String.fromCodePoint(42); // "*" +String.fromCodePoint(65, 90); // "AZ" +String.fromCodePoint(0x404); // "\u0404" +String.fromCodePoint(0x2F804); // "\uD87E\uDC04" +String.fromCodePoint(194564); // "\uD87E\uDC04" +String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07" +</pre> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("String.fromCodePoint()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/not_a_constructor/index.html b/files/ko/web/javascript/reference/errors/not_a_constructor/index.html new file mode 100644 index 0000000000..80bc235779 --- /dev/null +++ b/files/ko/web/javascript/reference/errors/not_a_constructor/index.html @@ -0,0 +1,91 @@ +--- +title: 'TypeError: "x" is not a constructor' +slug: Web/JavaScript/Reference/Errors/Not_a_constructor +translation_of: Web/JavaScript/Reference/Errors/Not_a_constructor +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메세지">메세지</h2> + +<pre class="syntaxbox">TypeError: "x" is not a constructor + +TypeError: Math is not a constructor +TypeError: JSON is not a constructor +TypeError: Symbol is not a constructor +TypeError: Reflect is not a constructor +TypeError: Intl is not a constructor +TypeError: SIMD is not a constructor +TypeError: Atomics is not a constructor +</pre> + +<h2 id="오류_유형">오류 유형</h2> + +<p>{{jsxref("TypeError")}}</p> + +<h2 id="뭐가_잘못된_거죠">뭐가 잘못된 거죠?</h2> + +<p>객체 혹은 변수를 생성자로 사용하려고 했습니다, 하지만 객체(혹은 변수)가 생성자가 아닙니다. 생성자가 무엇인지에 대한 자세한 정보는 {{Glossary("constructor")}} 혹은 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a> 를 참조하시기 바랍니다.</p> + +<p>{{jsxref("String")}} 혹은 {{jsxref("Array")}}와 같이 <code>new</code>,를 사용하여 생성할 수 있는 전역 객체들이 있습니다. 하지만 일부 전역 객체들은 그렇지 않고 속성과 메서드가 정적입니다. 다음의 자바스크립트 표준 내장 객체들은 생성자가 아닙니다: {{jsxref("Math")}}, {{jsxref("JSON")}}, {{jsxref("Symbol")}}, {{jsxref("Reflect")}}, {{jsxref("Intl")}}, {{jsxref("SIMD")}}, {{jsxref("Atomics")}}.</p> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">Generator functions</a> 또한 생성자로 사용될 수 없습니다.</p> + +<h2 id="예시">예시</h2> + +<h3 id="유효하지_않은_경우">유효하지 않은 경우</h3> + +<pre class="brush: js example-bad">var Car = 1; +new Car(); +// TypeError: Car is not a constructor + +new Math(); +// TypeError: Math is not a constructor + +new Symbol(); +// TypeError: Symbol is not a constructor + +function* f() {}; +var obj = new f; +// TypeError: f is not a constructor +</pre> + +<h3 id="car_생성자">car 생성자</h3> + +<p>자동차(car) 객체를 만들고자 한다고 가정합니다. 이 객체의 타입을 <code>car</code>라 하고 make, model, and year 세 개의 프로퍼티를 갖습니다. 이를 위해 다음과 같은 함수를 작성할 것입니다:</p> + +<pre class="brush: js">function Car(make, model, year) { + this.make = make; + this.model = model; + this.year = year; +} +</pre> + +<p>이제 다음과 같이 <code>mycar</code> 라 불리는 객체를 생성할 수 있습니다:</p> + +<pre class="brush: js">var mycar = new Car('Eagle', 'Talon TSi', 1993);</pre> + +<h3 id="프라미스_이용">프라미스 이용</h3> + +<p>즉시 실행되는 프라미스를 반환하는 경우에는 <em>새로운 Promise(...)</em>를 생성할 필요가 없습니다.</p> + +<p>아래는 올바른 방법이 아닙니다(<a href="https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Promise#Constructor">프라미스 생성자</a>가 제대로 호출되고 있지 않습니다). <code>TypeError: this is not a constructor</code> 예외를 던지게 됩니다:</p> + +<pre class="brush: js example-bad">return new Promise.resolve(true); +</pre> + +<p>대신, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve">Promise.resolve()</a> 혹은 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject">Promise.reject()</a> <a href="https://en.wikipedia.org/wiki/Method_(computer_programming)#Static_methods">정적 메서드</a>를 사용하십시오:</p> + +<pre class="brush: js">// This is legal, but unnecessarily long: +return new Promise((resolve, reject) => { resolve(true); }) + +// Instead, return the static method: +return Promise.resolve(true); +return Promise.reject(false); +</pre> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{Glossary("constructor")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/not_defined/index.html b/files/ko/web/javascript/reference/errors/not_defined/index.html new file mode 100644 index 0000000000..6b403dd848 --- /dev/null +++ b/files/ko/web/javascript/reference/errors/not_defined/index.html @@ -0,0 +1,66 @@ +--- +title: 'ReferenceError: "x" is not defined' +slug: Web/JavaScript/Reference/Errors/Not_defined +translation_of: Web/JavaScript/Reference/Errors/Not_defined +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메시지">메시지</h2> + +<pre class="syntaxbox">ReferenceError: "x" is not defined +</pre> + +<h2 id="에러_타입">에러 타입</h2> + +<p>{{jsxref("ReferenceError")}}.</p> + +<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2> + +<p>존재하지 않는 변수를 참조하는 곳이 있습니다. 이 변수는 선언되어야 합니다. 또는, 현재 스크립트나 {{Glossary("scope")}} 에서 사용이 가능하도록 해야합니다.</p> + +<div class="note"> +<p><strong>Note:</strong> 라이브러리(예를 들면 jQuery와 같은)의 로딩은, 반드시 코드에서 "$"와 같은 라이브러리 변수에 접근하기 이전에 수행되어야 합니다. 라이브러리를 로딩하는 {{HTMLElement("script")}} 태그가 그 변수를 사용하는 코드보다 앞에 위치하도록 하세요.</p> +</div> + +<h2 id="예">예</h2> + +<h3 id="선언되지_않은_변수">선언되지 않은 변수</h3> + +<pre class="brush: js example-bad">foo.substring(1); // ReferenceError: foo is not defined +</pre> + +<p>"foo" 변수는 어디에도 선언되지 않았습니다. {{jsxref("String.prototype.substring()")}} 메소드가 작동하도록 하기 위해서는 문자열을 필요로 합니다.</p> + +<pre class="brush: js example-good">var foo = "bar"; +foo.substring(1); // "ar"</pre> + +<h3 id="잘못된_스코프">잘못된 스코프</h3> + +<p>변수는 현재의 실행 흐름 내에서 이용 가능해야합니다. 함수 내부에 정의된 변수는 다른 외부의 함수에서는 접근할 수 없습니다. 그 때문에, 변수는 함수의 스코프 내부에서만 정의 됩니다.</p> + +<pre class="brush: js example-bad">function numbers () { + var num1 = 2, + num2 = 3; + return num1 + num2; +} + +console.log(num1); // ReferenceError: num1 is not defined</pre> + +<p>그러나, 함수는 모든 변수와 정의된 스코프 안에 정의된 함수에 접근할 수 있습니다. 따라서, 전역으로 정의된 함수는 전역에 정의된 모든 변수에도 접근할 수 있습니다.</p> + +<pre class="brush: js example-good">var num1 = 2, + num2 = 3; + +function numbers () { + return num1 + num2; +} + +console.log(num1); // 2</pre> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{Glossary("Scope")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Declaring_variables">Declaring variables in the JavaScript Guide</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_scope/en-US/docs/">Function scope in the JavaScript Guide</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/precision_range/index.html b/files/ko/web/javascript/reference/errors/precision_range/index.html new file mode 100644 index 0000000000..43ab7392e4 --- /dev/null +++ b/files/ko/web/javascript/reference/errors/precision_range/index.html @@ -0,0 +1,92 @@ +--- +title: 'RangeError: precision is out of range' +slug: Web/JavaScript/Reference/Errors/Precision_range +translation_of: Web/JavaScript/Reference/Errors/Precision_range +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메시지">메시지</h2> + +<pre class="syntaxbox">RangeError: precision {0} out of range (Firefox) +RangeError: toExponential() argument must be between 0 and 20 (Chrome) +RangeError: toFixed() digits argument must be between 0 and 20 (Chrome) +RangeError: toPrecision() argument must be between 1 and 21 (Chrome) +</pre> + +<h2 id="에러_형식">에러 형식</h2> + +<p>{{jsxref("RangeError")}}</p> + +<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2> + +<p>아래의 메소드들 중 하나에서, 실행 인자(argument)가 정확도의 범위를 벗어났습니다. :</p> + +<ul> + <li>{{jsxref("Number.prototype.toExponential()")}}</li> + <li>{{jsxref("Number.prototype.toFixed()")}}</li> + <li>{{jsxref("Number.prototype.toPrecision()")}}</li> +</ul> + +<p>이 메소드들에게 허용된 범위는 0부터 20 (또는 21)까지 입니다. 하지만, ECMAScript 스펙은 아래의 범위까지 확장하여 허용하고 있습니다.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Method</th> + <th scope="col">Firefox (SpiderMonkey)</th> + <th scope="col">Chrome, Opera (V8)</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("Number.prototype.toExponential()")}}</td> + <td>0 부터 100</td> + <td>0 부터 20</td> + </tr> + <tr> + <td>{{jsxref("Number.prototype.toFixed()")}}</td> + <td>-20 부터 100</td> + <td>0 부터 20</td> + </tr> + <tr> + <td>{{jsxref("Number.prototype.toPrecision()")}}</td> + <td>1 부터 100</td> + <td>1 부터 21</td> + </tr> + </tbody> +</table> + +<h2 id="예">예</h2> + +<h3 id="유효하지_않은_경우">유효하지 않은 경우</h3> + +<pre class="brush: js example-bad">77.1234.toExponential(-1); // RangeError +77.1234.toExponential(101); // RangeError + +2.34.toFixed(-100); // RangeError +2.34.toFixed(1001); // RangeError + +1234.5.toPrecision(-1); // RangeError +1234.5.toPrecision(101); // RangeError +</pre> + +<h3 id="유효한_경우">유효한 경우</h3> + +<pre class="brush: js example-good">77.1234.toExponential(4); // 7.7123e+1 +77.1234.toExponential(2); // 7.71e+1 + +2.34.toFixed(1); // 2.3 +2.35.toFixed(1); // 2.4 (note that it rounds up in this case) + +5.123456.toPrecision(5); // 5.1235 +5.123456.toPrecision(2); // 5.1 +5.123456.toPrecision(1); // 5 +</pre> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Number.prototype.toExponential()")}}</li> + <li>{{jsxref("Number.prototype.toFixed()")}}</li> + <li>{{jsxref("Number.prototype.toPrecision()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/property_access_denied/index.html b/files/ko/web/javascript/reference/errors/property_access_denied/index.html new file mode 100644 index 0000000000..2468d0221a --- /dev/null +++ b/files/ko/web/javascript/reference/errors/property_access_denied/index.html @@ -0,0 +1,42 @@ +--- +title: 'Error: Permission denied to access property "x"' +slug: Web/JavaScript/Reference/Errors/Property_access_denied +translation_of: Web/JavaScript/Reference/Errors/Property_access_denied +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메시지">메시지</h2> + +<pre class="syntaxbox">Error: Permission denied to access property "x" +</pre> + +<h2 id="에러_형식">에러 형식</h2> + +<p>{{jsxref("Error")}}.</p> + +<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2> + +<p>접근이 허가되지 않은 객체에 접근하기 위한 시도가 있었습니다. 아마 동일 출처 정책(<a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>)을 침해하여 다른 도메인으로부터 로드된 {{HTMLElement("iframe")}} 엘리먼트에 대한 것이었을 겁니다.</p> + +<h2 id="예">예</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"></iframe> + <script> + onload = function() { + console.log(frames[0].document); + // Error: Permission denied to access property "document" + } + </script> + </head> + <body></body> +</html></pre> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{HTMLElement("iframe")}}</li> + <li><a href="/en-US/docs/Web/Security/Same-origin_policy">Same-origin policy</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/read-only/index.html b/files/ko/web/javascript/reference/errors/read-only/index.html new file mode 100644 index 0000000000..7260fd71f8 --- /dev/null +++ b/files/ko/web/javascript/reference/errors/read-only/index.html @@ -0,0 +1,77 @@ +--- +title: 'TypeError: "x" is read-only' +slug: Web/JavaScript/Reference/Errors/Read-only +translation_of: Web/JavaScript/Reference/Errors/Read-only +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메시지">메시지</h2> + +<pre class="syntaxbox">TypeError: "x" is read-only (Firefox) +TypeError: 0 is read-only (Firefox) +TypeError: Cannot assign to read only property 'x' of #<Object> (Chrome) +TypeError: Cannot assign to read only property '0' of [object Array] (Chrome) +</pre> + +<h2 id="에러_유형">에러 유형</h2> + +<p>{{jsxref("TypeError")}}</p> + +<h2 id="무엇이_잘못_된_걸까">무엇이 잘못 된 걸까?</h2> + +<p>전역변수 또는 객체 프로퍼티가 읽기 전용으로 할당된 경우입니다.(엄밀히 따지자면 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#Writable_attribute">쓰기가 불가능한 데이터 속성입니다.</a>)</p> + +<p>이 에러는 <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">엄격모드</a>에서만 등장합니다. 엄격하지 않은 모드에서는 읽기전용 속성은 묵시적으로 무시됩니다.</p> + +<h2 id="예시">예시</h2> + +<h3 id="적절하지_않은_예">적절하지 않은 예</h3> + +<p>읽기 전용 속성은 아주 흔한 것은 아니지만, {{jsxref("Object.defineProperty()")}} 나 {{jsxref("Object.freeze()")}} 를 이용해 만들어 질 수 있습니다.</p> + +<pre class="brush: js example-bad">'use strict'; +var obj = Object.freeze({name: 'Elsa', score: 157}); +obj.score = 0; // TypeError + +'use strict'; +Object.defineProperty(this, 'LUNG_COUNT', {value: 2, writable: false}); +LUNG_COUNT = 3; // TypeError + +'use strict'; +var frozenArray = Object.freeze([0, 1, 2]); +frozenArray[0]++; // TypeError +</pre> + +<p>자바 스크립트에는 몇 가지 읽기 전용 속성이 내장되어 있습니다. 아마도 수학적 상수를 재정의하려고 한 것 같습니다.</p> + +<pre class="brush: js example-bad">'use strict'; +Math.PI = 4; // TypeError +</pre> + +<p>이렇게는 불가능합니다.</p> + +<p>전역변수 <code>undefined</code> 또한 읽기전용으로, 사람들이 모두 좋아하지 않는 "undefined is not a function" 에러가 다음과 같은 경우 등장합니다:</p> + +<pre class="brush: js example-bad">'use strict'; +undefined = function() {}; // TypeError: "undefined" is read-only +</pre> + +<h3 id="적절한_예">적절한 예</h3> + +<pre class="brush: js example-good">'use strict'; +var obj = Object.freeze({name: 'Score', points: 157}); +obj = {name: obj.name, points: 0}; // replacing it with a new object works + +'use strict'; +var LUNG_COUNT = 2; // a `var` works, because it's not read-only +LUNG_COUNT = 3; // ok (anatomically unlikely, though) +</pre> + +<h2 id="더보기">더보기</h2> + +<ul> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.freeze()")}}</li> + <li><a href="https://www.answers.com/Q/Which_animals_have_three_lungs">"Which animals have three lungs?" on answers.com</a></li> + <li><a href="https://aliens.wikia.com/wiki/Klingon">Klingons</a> (another answer to that query)</li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html b/files/ko/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html new file mode 100644 index 0000000000..53796ea87f --- /dev/null +++ b/files/ko/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html @@ -0,0 +1,83 @@ +--- +title: 'TypeError: Reduce of empty array with no initial value' +slug: Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value +translation_of: Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Message">Message</h2> + +<pre class="syntaxbox">TypeError: 초기값이 없는 빈 배열에 대한 recude는 에러 +</pre> + +<h2 id="Error_type">Error type</h2> + +<p>{{jsxref("TypeError")}}</p> + +<h2 id="What_went_wrong">What went wrong?</h2> + +<p>자바스크립크에서 몇 몇의 reduce 함수들:</p> + +<ul> + <li>{{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}} and</li> + <li>{{jsxref("TypedArray.prototype.reduce()")}}, {{jsxref("TypedArray.prototype.reduceRight()")}}).</li> +</ul> + +<p>이러한 함수들은 선택적으로 초기값(<code>initialValue</code>)을 사용합니다.(콜백(<code>callback)</code>의 첫번째 호출에 대한 첫번째 인수로 사용됩니다.) 그러나, 만약에 초기값을 설정하지 않는다면, {{jsxref("Array")}} or {{jsxref("TypedArray")}}에 대한 첫번째 엘리먼트를 초기값으로 사용 합니다. 이런 경우에 초기값이 없기 때문에 빈 배열이 제공될 경우 오류가 발생 합니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Invalid_cases">Invalid cases</h3> + +<p>This problem appears frequently when combined with a filter ({{jsxref("Array.prototype.filter()")}}, {{jsxref("TypedArray.prototype.filter()")}}) which will remove all elements of the list. Thus leaving none to be used as the initial value.</p> + +<pre class="brush: js example-bad">var ints = [0, -1, -2, -3, -4, -5]; +ints.filter(x => x > 0) // removes all elements + .reduce((x, y) => x + y) // no more elements to use for the initial value.</pre> + +<p>Similarly, the same issue can happen if there is a typo in a selector, or an unexpected number of elements in a list:</p> + +<pre class="brush: js example-bad">var names = document.getElementsByClassName("names"); +var name_list = Array.prototype.reduce.call(names, (acc, name) => acc + ", " + name); +</pre> + +<h3 id="Valid_cases">Valid cases</h3> + +<p>These problems can be solved in two different ways.</p> + +<p>One way is to actually provide an <code>initialValue</code> as the neutral element of the operator, such as 0 for the addition, 1 for a multiplication, or an empty string for a concatenation.</p> + +<pre class="brush: js example-good">var ints = [0, -1, -2, -3, -4, -5]; +ints.filter(x => x > 0) // removes all elements + .reduce((x, y) => x + y, 0) // the initial value is the neutral element of the addition +</pre> + +<p>Another way would be two to handle the empty case, either before calling <code>reduce</code>, or in the callback after adding an unexpected dummy initial value.</p> + +<pre class="brush: js example-good">var names = document.getElementsByClassName("names"); + +var name_list1 = ""; +if (names1.length >= 1) + name_list1 = Array.prototype.reduce.call(names, (acc, name) => acc + ", " + name); +// name_list1 == "" when names is empty. + +var name_list2 = Array.prototype.reduce.call(names, (acc, name) => { + if (acc == "") // initial value + return name; + return acc + ", " + name; +}, ""); +// name_list2 == "" when names is empty. +</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.reduce()")}}</li> + <li>{{jsxref("Array.prototype.reduceRight()")}}</li> + <li>{{jsxref("TypedArray.prototype.reduce()")}}</li> + <li>{{jsxref("TypedArray.prototype.reduceRight()")}}</li> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("TypedArray")}}</li> + <li>{{jsxref("Array.prototype.filter()")}}</li> + <li>{{jsxref("TypedArray.prototype.filter()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/reserved_identifier/index.html b/files/ko/web/javascript/reference/errors/reserved_identifier/index.html new file mode 100644 index 0000000000..8a1932d9cc --- /dev/null +++ b/files/ko/web/javascript/reference/errors/reserved_identifier/index.html @@ -0,0 +1,80 @@ +--- +title: 'SyntaxError: "x" is a reserved identifier' +slug: Web/JavaScript/Reference/Errors/Reserved_identifier +tags: + - 구문 에러 + - 예약어 + - 자바스크립트 +translation_of: Web/JavaScript/Reference/Errors/Reserved_identifier +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메세지">메세지</h2> + +<pre class="syntaxbox">SyntaxError: The use of a future reserved word for an identifier is invalid (Edge) +SyntaxError: "x" is a reserved identifier (Firefox) +SyntaxError: Unexpected reserved word (Chrome)</pre> + +<h2 id="에러_타입">에러 타입</h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">예약어</a>가 식별자로 쓰인 경우 발생하는 에러입니다. 이 키워드는 엄격(Strict) 모드와 느슨한(Sloppy) 모드에서 모두 예약어로 취급됩니다.</p> + +<ul> + <li><code>enum</code></li> +</ul> + +<p>다음은 엄격 모드의 코드에서만 예약어로 취급됩니다:</p> + +<ul class="threecolumns"> + <li><code>implements</code></li> + <li><code>interface</code></li> + <li>{{jsxref("Statements/let", "let")}}</li> + <li><code>package</code></li> + <li><code>private</code></li> + <li><code>protected</code></li> + <li><code>public</code></li> + <li><code>static</code></li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="엄격_모드와_엄격하지_않은_모드에서의_예약어">엄격 모드와 엄격하지 않은 모드에서의 예약어</h3> + +<p><code>enum</code> 식별자는 일반적으로 예약되어 있습니다.</p> + +<pre class="brush: js example-bad">var enum = { RED: 0, GREEN: 1, BLUE: 2 }; +// SyntaxError: enum is a reserved identifier +</pre> + +<p>엄격 모드의 코드에선 더 많은 식별자들이 예약되어 있습니다.</p> + +<pre class="brush: js example-bad">"use strict"; +var package = ["potatoes", "rice", "fries"]; +// SyntaxError: package is a reserved identifier +</pre> + +<p>이 변수들의 이름을 변경해야 합니다.</p> + +<pre class="brush: js example-good">var colorEnum = { RED: 0, GREEN: 1, BLUE: 2 }; +var list = ["potatoes", "rice", "fries"];</pre> + +<h3 id="오래된_브라우저의_업데이트">오래된 브라우저의 업데이트</h3> + +<p>새로운 구문을 사용하기 위해서는 최근 버전의 브라우저로 업데이트 해야 합니다. 예를 들어, 오래된 브라우저를 사용하고 있다면 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code> 또는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class</a></code> 구현할 수 없습니다.</p> + +<pre class="brush: js">"use strict"; +class DocArchiver {} + +// SyntaxError: class is a reserved identifier +// (오래된 버전의 브라우저에서만 에러가 발생합니다. 예) Firefox 44 이하) +</pre> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="http://wiki.c2.com/?GoodVariableNames">Good variable names</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/resulting_string_too_large/index.html b/files/ko/web/javascript/reference/errors/resulting_string_too_large/index.html new file mode 100644 index 0000000000..20e28cbe2b --- /dev/null +++ b/files/ko/web/javascript/reference/errors/resulting_string_too_large/index.html @@ -0,0 +1,46 @@ +--- +title: 'RangeError: repeat count must be less than infinity' +slug: Web/JavaScript/Reference/Errors/Resulting_string_too_large +translation_of: Web/JavaScript/Reference/Errors/Resulting_string_too_large +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메시지">메시지</h2> + +<pre class="syntaxbox">RangeError: repeat count must be less than infinity and not overflow maximum string size (Firefox) +(repeat count는 infinity보다 작아야하며, 최대 문자열 크기를 넘길 수 없습니다.) + +RangeError: Invalid count value (Chrome) +</pre> + +<h2 id="에러_형식">에러 형식</h2> + +<p>{{jsxref("RangeError")}}</p> + +<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2> + +<p> {{jsxref("String.prototype.repeat()")}} 메소드가 사용되었습니다. 이 메소드는 문자열을 반복하는 수를 예측하는 카운트 파라메터를 가지고 있었습니다. 그리고 이 파라메터는 0보다 커야하며, 양의 {{jsxref("Infinity")}} 보다 작아야 했으며, 음수는 허용되지 않았습니다. 이 값의 허용 범위는 이렇게 표현될 수 있습니다. : [0, +∞). </p> + +<p>결과인 문자열은 최대 문자열 크기보다 클 수 없지만, JavaScript 에서는 다를 수 있습니다. Firefox (SpiderMonkey) 에서의 최대 문자열 크기는 2<sup>28</sup> -1 (<code>0xFFFFFFF</code>)입니다.</p> + +<h2 id="예">예</h2> + +<h3 id="허용되지_않는_경우">허용되지 않는 경우</h3> + +<pre class="brush: js example-bad">'abc'.repeat(Infinity); // RangeError +'a'.repeat(2**28); // RangeError +</pre> + +<h3 id="허용되는_경우">허용되는 경우</h3> + +<pre class="brush: js example-good">'abc'.repeat(0); // '' +'abc'.repeat(1); // 'abc' +'abc'.repeat(2); // 'abcabc' +'abc'.repeat(3.5); // 'abcabcabc' (숫자는 정수로 변환될 것입니다.) +</pre> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("String.prototype.repeat()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/strict_non_simple_params/index.html b/files/ko/web/javascript/reference/errors/strict_non_simple_params/index.html new file mode 100644 index 0000000000..8c07f4b46a --- /dev/null +++ b/files/ko/web/javascript/reference/errors/strict_non_simple_params/index.html @@ -0,0 +1,107 @@ +--- +title: 'SyntaxError: "use strict" not allowed in function with non-simple parameters' +slug: Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params +translation_of: Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Message">Message</h2> + +<pre class="syntaxbox">Firefox: +SyntaxError: "use strict" not allowed in function with default parameter +SyntaxError: "use strict" not allowed in function with rest parameter +SyntaxError: "use strict" not allowed in function with destructuring parameter + +Chrome: +SyntaxError: Illegal 'use strict' directive in function with non-simple parameter list +</pre> + +<h2 id="Error_type">Error type</h2> + +<p>{{jsxref("SyntaxError")}}.</p> + +<h2 id="무엇이_잘못_되었을까요">무엇이 잘못 되었을까요?</h2> + +<p> <code>"use strict"</code> 지시문은 다음 매개변수 중 한 개가 있는 함수의 맨 위에 작성됩니다:</p> + +<ul> + <li>{{jsxref("Functions/Default_parameters", "Default parameters", "", 1)}}</li> + <li>{{jsxref("Functions/rest_parameters", "Rest parameters", "", 1)}}</li> + <li>{{jsxref("Operators/Destructuring_assignment", "Destructuring parameters", "", 1)}}</li> +</ul> + +<p><code>"use strict"</code> 지시문은 ECMAScript 동작에 따라 이러한 함수의 맨 위에 허용되지 않습니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="기능_명세서">기능 명세서</h3> + +<p>다음은 함수 <code>sum</code> 에는 기본 매개 변수 <code>a=1</code> 및 <code>b=2</code>가 있는 경우입니다:</p> + +<pre class="brush: js example-bad">function sum(a = 1, b = 2) { + // SyntaxError: "use strict" not allowed in function with default parameter + 'use strict'; + return a + b; +} +</pre> + +<p>함수가 <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> 모드에 있어야 하고 전체 스크립트 또는 포함된 함수가 <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>에 있어도 괜찮으면 함수 외부에서 <code>"use strict"</code> 지시문을 이동할 수 있습니다:</p> + +<pre class="brush: js example-good">'use strict'; +function sum(a = 1, b = 2) { + return a + b; +} +</pre> + +<h3 id="함수_표현식">함수 표현식</h3> + +<p>함수 표현식은 또 다른 해결방법을 사용할 수 있습니다:</p> + +<pre class="brush: js example-bad">var sum = function sum([a, b]) { + // SyntaxError: "use strict" not allowed in function with destructuring parameter + 'use strict'; + return a + b; +}; +</pre> + +<p>이것은 다음 표현식으로 변환 될 수 있습니다:</p> + +<pre class="brush: js example-good">var sum = (function() { + 'use strict'; + return function sum([a, b]) { + return a + b; + }; +})(); +</pre> + +<h3 id="화살표_함수">화살표 함수</h3> + +<p>화살표 함수가 <code>this</code>에 접근해야 하는 경우에는, 둘러싼 함수로 화살표 함수를 사용할 수 있습니다:</p> + +<pre class="brush: js example-bad">var callback = (...args) => { + // SyntaxError: "use strict" not allowed in function with rest parameter + 'use strict'; + return this.run(args); +}; +</pre> + +<p>이것은 다음 표현식과 같이 변환될 수 있습니다:</p> + +<pre class="brush: js example-good">var callback = (() => { + 'use strict'; + return (...args) => { + return this.run(args); + }; +})(); +</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Strict_mode", "Strict mode", "", 1)}}</li> + <li>{{jsxref("Statements/function", "function statement", "", 1)}}</li> + <li>{{jsxref("Operators/function", "function expression", "", 1)}}</li> + <li>{{jsxref("Functions/Default_parameters", "Default parameters", "", 1)}}</li> + <li>{{jsxref("Functions/rest_parameters", "Rest parameters", "", 1)}}</li> + <li>{{jsxref("Operators/Destructuring_assignment", "Destructuring parameters", "", 1)}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/too_much_recursion/index.html b/files/ko/web/javascript/reference/errors/too_much_recursion/index.html new file mode 100644 index 0000000000..90495a359b --- /dev/null +++ b/files/ko/web/javascript/reference/errors/too_much_recursion/index.html @@ -0,0 +1,50 @@ +--- +title: 'InternalError: too much recursion' +slug: Web/JavaScript/Reference/Errors/Too_much_recursion +translation_of: Web/JavaScript/Reference/Errors/Too_much_recursion +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메시지">메시지</h2> + +<pre class="syntaxbox">InternalError: too much recursion +</pre> + +<h2 id="에러_형식">에러 형식</h2> + +<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/InternalError" title='The InternalError object indicates an error that occurred internally in the JavaScript engine. For example: "InternalError: too much recursion".'><code>InternalError</code></a>.</p> + +<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2> + +<p>자신을 호출하는 함수를 재귀 함수라고 합니다. 어떤 면에서, 재귀는 반복과 유사합니다. 둘 다 같은 코드를 여러 번 실행하며, 조건(무한 반복 피하기, 더 정확히 여기서 말하는 무한 재귀)이 있습니다. 너무 많거나 무한 번의 재귀가 발생할 경우, JavaScript는 이 에러를 던질 것입니다.</p> + +<h2 id="예">예</h2> + +<p>이 재귀 함수는 exit 조건에 따라 10번을 실행합니다.</p> + +<pre class="brush: js">function loop(x) { + if (x >= 10) // "x >= 10" is the exit condition + return; + // do stuff + loop(x + 1); // the recursive call +} +loop(0);</pre> + +<p>이 조건에 대하여 너무 높은 값을 설정 하면 작동하지 않게 됩니다.</p> + +<pre class="brush: js example-bad">function loop(x) { + if (x >= 1000000000000) + return; + // do stuff + loop(x + 1); +} +loop(0); + +// InternalError: too much recursion</pre> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{Glossary("Recursion")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions#Recursion">Recursive functions</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/undeclared_var/index.html b/files/ko/web/javascript/reference/errors/undeclared_var/index.html new file mode 100644 index 0000000000..688c92473d --- /dev/null +++ b/files/ko/web/javascript/reference/errors/undeclared_var/index.html @@ -0,0 +1,62 @@ +--- +title: 'ReferenceError: assignment to undeclared variable "x"' +slug: Web/JavaScript/Reference/Errors/Undeclared_var +translation_of: Web/JavaScript/Reference/Errors/Undeclared_var +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메시지">메시지</h2> + +<pre class="syntaxbox">ReferenceError: assignment to undeclared variable "x" (Firefox) +ReferenceError: "x" is not defined (Chrome) +ReferenceError: Variable undefined in strict mode (Edge) +</pre> + +<h2 id="에러_형식">에러 형식</h2> + +<p>엄격 모드(<a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>)에서만 발생하는 {{jsxref("ReferenceError")}} 경고.</p> + +<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2> + +<p>선언되지 않은 변수로 값은 할당되었습니다. <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a></code> 키워드가 없이 할당이 된 것입니다. 선언된 변수와 선언되지 않은 변수 사이에는 차이가 있는데, 이는 예상치 못한 결과를 가져오며, 때문에 JavaScript 엄격모드에서는 에러를 발생시키고 있습니다.</p> + +<p>선언된 변수와 선언되지 않은 변수에 대하여 기억해야 할 세 가지:</p> + +<ul> + <li>선언된 변수는 선언된 실행 맥락 내에서 요구됩니다. 선언되지 않은 변수는 항상 전역의 특성을 띱니다.</li> + <li>선언된 변수는 코드가 실행되기 전에 생성됩니다. 선언되지 않은 변수는 실행을 위해 할당이 일어날 때까지 존재하지 않습니다.</li> + <li>선언된 변수는 실행 맥락 내(함수나 전역적인)에서 변경 불가한 요소입니다. 선언되지 않은 변수는 변경이 가능합니다. (삭제 될 수도 있습니다.)</li> +</ul> + +<p>더 많은 설명과 예제를 필요로 한다면 이 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a></code> 참조문서 페이지를 보세요.</p> + +<p>선언되지 않은 변수 할당에 대한 에러는 엄격 모드(<a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode code</a>)에서만 발생합니다. 비-엄격 코드에서는 조용히 묵인됩니다.</p> + +<h2 id="예">예</h2> + +<h3 id="허용되지_않는_경우">허용되지 않는 경우</h3> + +<p>이런 경우에는, 변수 "bar"는 선언되지 않은 변수가 됩니다.</p> + +<pre class="brush: js example-bad">function foo() { + "use strict"; + bar = true; +} +foo(); // ReferenceError: assignment to undeclared variable bar +</pre> + +<h3 id="허용되는_경우">허용되는 경우</h3> + +<p>"bar" 를 선언된 변수로 만들기 위해서, <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a> </code>키워드를 변수명 앞에 붙여줍니다.</p> + +<pre class="brush: js example-good">function foo() { + "use strict"; + var bar = true; +} +foo();</pre> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/undefined_prop/index.html b/files/ko/web/javascript/reference/errors/undefined_prop/index.html new file mode 100644 index 0000000000..7919ca877d --- /dev/null +++ b/files/ko/web/javascript/reference/errors/undefined_prop/index.html @@ -0,0 +1,58 @@ +--- +title: 'ReferenceError: reference to undefined property "x"' +slug: Web/JavaScript/Reference/Errors/Undefined_prop +translation_of: Web/JavaScript/Reference/Errors/Undefined_prop +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메시지">메시지</h2> + +<pre class="syntaxbox">ReferenceError: reference to undefined property "x" (Firefox) +</pre> + +<h2 id="에러_형식">에러 형식</h2> + +<p>엄격 모드(<a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>)에서만 발생하는 {{jsxref("ReferenceError")}} 경고.</p> + +<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2> + +<p>이 스크립트는 존재하지 않는 객체의 속성에 접근을 시도했습니다. 요소에 접근하는 방법에는 두 가지가 있습니다.; 더 자세히 알고 싶으시다면, 속성 접근자(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">property accessors</a>) 참조 문서를 봐주세요. </p> + +<p>정의되지 않은 속성 참조에 대한 에러는 엄격 모드 코드(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode code</a>)에서만 발생합니다. 비-엄격모드의 코드에서는 존재하지 않는 속성에 대한 접근은 조용히 무시됩니다.</p> + +<h2 id="예">예</h2> + +<h3 id="허용되지_않는_경우">허용되지 않는 경우</h3> + +<p>이 경우에는, 속성 <code>bar</code> 는 정의되지 않은 속성으로, <code>ReferenceError</code> 가 발생합니다.</p> + +<pre class="brush: js example-bad">"use strict"; + +var foo = {}; +foo.bar; // ReferenceError: reference to undefined property "bar" +</pre> + +<h3 id="허용되는_경우">허용되는 경우</h3> + +<p>에러를 피하기 위해서는, 접근을 시도하기 앞서, 객체에 <code>bar</code> 에 대한 정의를 추가하거나 <code>bar</code> 속성의 존재 여부를 확인해야 합니다.; 아래와 같이 {{jsxref("Object.prototype.hasOwnProperty()")}} method)를 사용하는 것이 하나의 방법이 될 수 있습니다.:</p> + +<pre class="brush: js example-good">"use strict"; + +var foo = {}; + +// bar 속성을 정의한다. + +foo.bar = "moon"; +console.log(foo.bar); // "moon" + +// bar에 접근하기 전에 존재 하는지 확인한다. + +if (foo.hasOwnProperty("bar") { + console.log(foo.bar); +}</pre> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/unexpected_token/index.html b/files/ko/web/javascript/reference/errors/unexpected_token/index.html new file mode 100644 index 0000000000..91704a6006 --- /dev/null +++ b/files/ko/web/javascript/reference/errors/unexpected_token/index.html @@ -0,0 +1,49 @@ +--- +title: 'SyntaxError: Unexpected token' +slug: Web/JavaScript/Reference/Errors/Unexpected_token +tags: + - 에러 + - 자바스크립트 +translation_of: Web/JavaScript/Reference/Errors/Unexpected_token +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메시지">메시지</h2> + +<pre class="syntaxbox">SyntaxError: expected expression, got "x" +SyntaxError: expected property name, got "x" +SyntaxError: expected target, got "x" +SyntaxError: expected rest argument name, got "x" +SyntaxError: expected closing parenthesis, got "x" +SyntaxError: expected '=>' after argument list, got "x" +</pre> + +<h2 id="에러_타입">에러 타입</h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="무엇이_잘못되었나요">무엇이 잘못되었나요?</h2> + +<p>특정 언어 구조를 예상했지만 무언가 다른 것이 있었습니다. 아마도, 간단한 오타일 것입니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="예상하지_못한_표현식">예상하지 못한 표현식</h3> + +<p>예를 들어, 함수를 호출할 때, 인수에서 마지막 부분에 콤마는 허용되지 않습니다. 자바스크립트는 계속해서 다른 인자가 있을 것이라고 기대하기 때문입니다.</p> + +<pre class="brush: js example-bad">Math.max(2, 42,); +// SyntaxError: expected expression, got ')' +</pre> + +<p>콤마를 생략하거나 다른 인수를 추가해 수정할 수 있습니다.</p> + +<pre class="brush: js example-good">Math.max(2, 42); +Math.max(2, 42, 13+37); +</pre> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Math.max()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/unexpected_type/index.html b/files/ko/web/javascript/reference/errors/unexpected_type/index.html new file mode 100644 index 0000000000..527411ab9a --- /dev/null +++ b/files/ko/web/javascript/reference/errors/unexpected_type/index.html @@ -0,0 +1,67 @@ +--- +title: 'TypeError: "x" is (not) "y"' +slug: Web/JavaScript/Reference/Errors/Unexpected_type +tags: + - Errors + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Unexpected_type +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Message">Message</h2> + +<pre class="syntaxbox">TypeError: "x" is (not) "y" + +Examples: +TypeError: "x" is undefined +TypeError: "x" is null +TypeError: "undefined" is not an object +TypeError: "x" is not an object or null +TypeError: "x" is not a symbol +</pre> + +<h2 id="Error_type">Error type</h2> + +<p>{{jsxref("TypeError")}}.</p> + +<h2 id="What_went_wrong">What went wrong?</h2> + +<p>그것은 정확하지 않은 형태이다. 그것은 가끔{{jsxref("undefined")}} 나 {{jsxref("null")}} 값을 발생한다.</p> + +<p>또한, {{jsxref("Object.create()")}} 또는 {{jsxref("Symbol.keyFor()")}}와 같은 메서드는 반드시 제공되어야하는 특별한 형태를 요구한다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Invalid_cases">Invalid cases</h3> + +<pre class="brush: js example-bad">// undefined and null cases on which the substring method won't work +var foo = undefined; +foo.substring(1); // TypeError: foo is undefined + +var foo = null; +foo.substring(1); // TypeError: foo is null + + +// Certain methods might require a specific type +var foo = {} +Symbol.keyFor(foo); // TypeError: foo is not a symbol + +var foo = 'bar' +Object.create(foo); // TypeError: "foo" is not an object or null +</pre> + +<h3 id="Fixing_the_issue">Fixing the issue</h3> + +<p>undefined 나 null 값을 가진 null 포인터를 고치기 위해서 아래 예제와 같이 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a> 연산자를 사용할 수 있다.</p> + +<pre class="brush: js">if (typeof foo !== 'undefined') { + // Now we know that foo is defined, we are good to go. +}</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("undefined")}}</li> + <li>{{jsxref("null")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/errors/unnamed_function_statement/index.html b/files/ko/web/javascript/reference/errors/unnamed_function_statement/index.html new file mode 100644 index 0000000000..b7afe67563 --- /dev/null +++ b/files/ko/web/javascript/reference/errors/unnamed_function_statement/index.html @@ -0,0 +1,118 @@ +--- +title: 'SyntaxError: function statement requires a name' +slug: Web/JavaScript/Reference/Errors/Unnamed_function_statement +tags: + - IIEF + - 객체 메소드 + - 구문 에러 + - 자바스크립트 + - 콜백 함수 + - 함수 이름 +translation_of: Web/JavaScript/Reference/Errors/Unnamed_function_statement +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="메세지">메세지</h2> + +<pre class="syntaxbox">Syntax Error: Expected identifier (Edge) +SyntaxError: function statement requires a name [Firefox] +SyntaxError: Unexpected token ( [Chrome] +</pre> + +<h2 id="에러_타입">에러 타입</h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2> + +<p><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/function">함수 구문</a>(Function statement)은 이름이 필수입니다. 함수가 정의된 방법에 따라 함수의 이름을 짓거나 함수 표현식(Function expression) {{Glossary("IIFE")}}으로 작성하거나, 함수가 맥락에 맞게 제대로 작성되었는지 확인해야 합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="구문_vs_표현식">구문 vs 표현식</h3> + +<p><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/function">함수 구문</a>(또는 함수 선언)은 이름이 필요하므로 아래 예제는 동작하지 않습니다:</p> + +<pre class="brush: js example-bad">function () { + return 'Hello world'; +} +// SyntaxError: function statement requires a name +</pre> + +<p>대신 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/function">함수 표현식</a>을 사용할 수 있습니다:</p> + +<pre class="brush: js example-good">var greet = function() { + return 'Hello world'; +};</pre> + +<p>또는, 선언하자마자 바로 실행되는 <a href="https://en.wikipedia.org/wiki/Immediately-invoked_function_expression">IIFE</a> (Immediately Invoked Function Expression)를 사용할 수 있습니다. 이 경우 몇 개의 괄호가 더 필요합니다:</p> + +<pre class="brush: js example-good">(function () { + +})();</pre> + +<h3 id="레이블을_붙인_함수">레이블을 붙인 함수</h3> + +<p>만약 함수 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/label">레이블</a>을 사용하는 경우 <code>function</code> 키워드 뒤에 함수 이름이 필요하므로 아래 예제는 동작하지 않습니다:</p> + +<pre class="brush: js example-bad">function Greeter() { + german: function () { + return "Moin"; + } +} +// SyntaxError: function statement requires a name +</pre> + +<p>아래 예제는 동작합니다:</p> + +<pre class="brush: js example-good">function Greeter() { + german: function g() { + return "Moin"; + } +}</pre> + +<h3 id="객체_메소드">객체 메소드</h3> + +<p>만약 객체 메소드를 만드는 경우 먼저 객체를 만들어야 합니다. 객체 메소드의 경우 아래 예제와 같이 <code>function</code> 키워드 뒤에 이름이 없어도 정상적으로 동작합니다.</p> + +<pre class="brush: js example-good">var greeter = { + german: function () { + return "Moin"; + } +};</pre> + +<h3 id="콜백_구문">콜백 구문</h3> + +<p>콜백을 사용하는 경우 구문을 확인해야 합니다. 괄호와 쉼표는 구문을 어렵게 만듭니다.</p> + +<pre class="brush: js example-bad">promise.then( + function() { + console.log("success"); + }); + function() { + console.log("error"); +} +// SyntaxError: function statement requires a name +</pre> + +<p>올바르게 변경하면:</p> + +<pre class="brush: json example-good">promise.then( + function() { + console.log("success"); + }, + function() { + console.log("error"); + } +); +</pre> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%ED%95%A8%EC%88%98">함수</a></li> + <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/function">함수 구문</a></li> + <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/function">함수 표현식</a></li> + <li><a href="https://en.wikipedia.org/wiki/Immediately-invoked_function_expression">IIFE</a></li> + <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/label">레이블</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/functions/arguments/@@iterator/index.html b/files/ko/web/javascript/reference/functions/arguments/@@iterator/index.html new file mode 100644 index 0000000000..454c8111b8 --- /dev/null +++ b/files/ko/web/javascript/reference/functions/arguments/@@iterator/index.html @@ -0,0 +1,78 @@ +--- +title: 'arguments[@@iterator]()' +slug: Web/JavaScript/Reference/Functions/arguments/@@iterator +tags: + - Deprecated + - Functions + - JavaScript + - Property + - arguments +translation_of: Web/JavaScript/Reference/Functions/arguments/@@iterator +--- +<div>{{jsSidebar("Functions")}}</div> + +<p><code><strong>@@iterator</strong></code> 속성의 초기값은 {{jsxref("Array.prototype.values")}} 속성의 초기값과 같은 함수 객체입니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>arguments</var>[Symbol.iterator]()</pre> + +<h2 id="예제">예제</h2> + +<h3 id="for...of_반복문을_사용한_반복"><code>for...of</code> 반복문을 사용한 반복</h3> + +<pre class="brush: js">function f() { + // 브라우저가 for...of 반복문과 + // for 반복문 안의 let 범위의 변수를 지원해야 합니다. + for (let letter of arguments) { + console.log(letter); + } +} +f('w', 'y', 'k', 'o', 'p'); +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-createunmappedargumentsobject', ' CreateUnmappedArgumentsObject')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-createmappedargumentsobject', ' CreateMappedArgumentsObject')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-createunmappedargumentsobject', 'CreateUnmappedArgumentsObject')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-createmappedargumentsobject', 'CreateMappedArgumentsObject')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("javascript.functions.arguments.@@iterator")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.values()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/functions/arguments/callee/index.html b/files/ko/web/javascript/reference/functions/arguments/callee/index.html new file mode 100644 index 0000000000..13ab0c948d --- /dev/null +++ b/files/ko/web/javascript/reference/functions/arguments/callee/index.html @@ -0,0 +1,203 @@ +--- +title: arguments.callee +slug: Web/JavaScript/Reference/Functions/arguments/callee +tags: + - Deprecated + - Functions + - JavaScript + - Property + - arguments +translation_of: Web/JavaScript/Reference/Functions/arguments/callee +--- +<div>{{jsSidebar("Functions")}}</div> + +<p><strong><code>arguments.callee</code></strong> 속성(property)은 현재 실행 중인 함수를 포함합니다.</p> + +<h2 id="설명">설명</h2> + +<p><code>callee</code>는 <code>arguments</code> 객체의 속성입니다. 그 함수의 몸통(body) 내에서 현재 실행 중인 함수를 참조하는 데 쓰일 수 있습니다. 이는 함수의 이름을 알 수 없는 경우에 유용합니다, 가령 이름 없는 함수 식(또한 "익명 함수"라 함) 내에서.</p> + +<div class="warning"><strong>경고:</strong> ECMAScript 제5판(ES5) 은 <a href="/ko/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="Strict mode">엄격 모드</a>에서 <code>arguments.callee()</code>의 사용을 금합니다. function 식(expression)에 이름을 주거나 함수 자체를 호출해야 하는 곳에 function 선언을 사용하여 <code>arguments.callee()</code> 사용을 피하세요.</div> + +<h3 id="arguments.callee는_왜_ES5_엄격_모드에서_제거되었나요"><code>arguments.callee</code>는 왜 ES5 엄격 모드에서 제거되었나요?</h3> + +<p>(<a href="http://stackoverflow.com/a/235760/578288" title="http://stackoverflow.com/a/235760/578288">olliej의 Stack Overflow 답변</a>에서 고쳐씀)</p> + +<p>초기 버전 JavaScript는 유명(named) 함수 식을 허용하지 않습니다. 그리고 이 때문에 재귀(recursive) 함수 식을 만들 수 없습니다.</p> + +<p>예를 들어, 이 구문은 작동됩니다:</p> + +<pre class="brush: js">function factorial (n) { + return !(n > 1) ? 1 : factorial(n - 1) * n; +} + +[1,2,3,4,5].map(factorial);</pre> + +<p>하지만 다음은:</p> + +<pre class="brush: js">[1,2,3,4,5].map(function (n) { + return !(n > 1) ? 1 : /* what goes here? */ (n - 1) * n; +});</pre> + +<p>아닙니다. 이를 우회하기 위해 <code>arguments.callee</code>가 추가되었고 이와 같이 할 수 있습니다</p> + +<pre class="brush: js">[1,2,3,4,5].map(function (n) { + return !(n > 1) ? 1 : arguments.callee(n - 1) * n; +});</pre> + +<p>그러나, 이는 실로 정말 나쁜 해결책이었습니다. 이는 (다른 <code>arguments</code>, <code>callee</code> 및 <code>caller</code> 문제와 함께) 일반적인 경우에 인라인 및 tail 재귀를 불가능케 하기에 (tracing 등을 통해 선택한 경우에 그것을 달성할 수 있지만 최고의 코드는 검사가 달리 필요하지 않기에 차선입니다.) 다른 주요 문제는 그 재귀 호출이 다른 <code>this</code> 값을 갖는 것입니다. 가령:</p> + +<pre class="brush: js">var global = this; + +var sillyFunction = function (recursed) { + if (!recursed) { return arguments.callee(true); } + if (this !== global) { + alert("This is: " + this); + } else { + alert("This is the global"); + } +} + +sillyFunction();</pre> + +<p>ECMAScript 3은 유명(named) 함수 식을 허용해서 이 문제를 해결했습니다. 예를 들면:</p> + +<pre class="brush: js">[1,2,3,4,5].map(function factorial (n) { + return !(n > 1) ? 1 : factorial(n-1)*n; +});</pre> + +<p>이는 많은 이점이 있습니다:</p> + +<ul> + <li>함수는 코드 내부에서 다른 함수처럼 호출될 수 있습니다</li> + <li>외부 범위(outer scope)에서 변수를 만들지 않습니다 (<a href="http://kangax.github.io/nfe/#example_1_function_expression_identifier_leaks_into_an_enclosing_scope">IE 8 아래는 제외하고</a>)</li> + <li>arguments 객체에 액세스하는 것보다 성능이 더 낫습니다</li> +</ul> + +<p>사라지게 됐던 또 다른 기능은 <code>arguments.callee.caller</code> 또는 더 명확하게 <code>Function.caller</code>였습니다. 이는 왜일까요? 자, 어느 시점에서든 당신은 모든 함수의 스택 상 가장 깊은 caller를 찾을 수 있고 위에서 말했듯이 호출 스택 보기는 한 가지 주요 효과가 있습니다: 이는 큰 수의 최적화를 불가능 또는 훨씬 훨씬 더 어렵게 합니다. 예를 들어, 함수 <code>f</code>가 익명(unknown) 함수를 호출하지 않음을 보장할 수 없는 경우, <code>f</code>를 인라인하는 게 가능하지 않습니다. 원래 사소하게 인라인 가능했을 지도 모를 모든 호출 사이트가 다수의 guard를 축적함을 뜻합니다:</p> + +<pre class="brush: js">function f (a, b, c, d, e) { return a ? b * c : d * e; }</pre> + +<p>JavaScript 인터프리터가 제공된 모든 인수가 호출이 행해진 그 시점에 숫자임을 보장할 수 없다면, 인라인된 코드 앞에 모든 인수에 대한 검사 삽입이 필요합니다. 그렇지 않으면 그 함수를 인라인할 수 없습니다. 이제 이 특정한 경우에 스마트 인터프리터는 더 최적이고 사용되지 않을 값은 확인하지 않을 검사를 재배열할 수 있어야 합니다. 그러나 많은 경우에 그건 그냥 가능하지 않고 그러므로 인라인은 불가능하게 됩니다.</p> + +<h2 id="예">예</h2> + +<h3 id="익명_재귀_함수에서_arguments.callee_사용하기">익명 재귀 함수에서 <code>arguments.callee</code> 사용하기</h3> + +<p>재귀 함수는 자신을 참조할 수 있어야 합니다. 보통, 함수는 그 이름으로 자신을 참조합니다. 그러나, 익명 함수(<a href="/ko/docs/Web/JavaScript/Reference/Operators/function" title="function expression">함수 식</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function" title="Function constructor"><code>Function</code> 생성자</a>로 생성될 수 있는)는 이름이 없습니다. 그러므로 그를 참조하는 액세스 가능한 변수가 없는 경우, 함수가 자신을 참조할 수 있는 유일한 방법은 <code>arguments.callee</code>에 의해서입니다.</p> + +<p>다음 예는 차례로 팩토리얼 함수를 정의하고 반환하는 함수를 정의합니다. 이 예는 매우 실용적이지 않고 같은 결과가 <a href="/ko/docs/Web/JavaScript/Reference/Operators/function" title="named function expressions">유명 함수 식</a>으로 달성될 수 없는 경우가 거의 없습니다.</p> + +<pre class="brush: js">function create() { + return function(n) { + if (n <= 1) + return 1; + return n * arguments.callee(n - 1); + }; +} + +var result = create()(5); // 반환값 120 (5 * 4 * 3 * 2 * 1)</pre> + +<h3 id="좋은_대안_없는_arguments.callee의_사용">좋은 대안 없는 <code>arguments.callee</code>의 사용</h3> + +<p>그러나, 다음과 같은 경우에는 <code>arguments.callee</code>에 대안이 없습니다. 그래서 그 사라짐(deprecation)은 버그가 될 수 있습니다 ({{Bug("725398")}} 참조):</p> + +<pre class="brush: js">function createPerson (sIdentity) { + var oPerson = new Function("alert(arguments.callee.identity);"); + oPerson.identity = sIdentity; + return oPerson; +} + +var john = createPerson("John Smith"); + +john();</pre> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>초기 정의. JavaScript 1.2에서 구현됨</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/functions/arguments/caller/index.html b/files/ko/web/javascript/reference/functions/arguments/caller/index.html new file mode 100644 index 0000000000..bcdc54c7dc --- /dev/null +++ b/files/ko/web/javascript/reference/functions/arguments/caller/index.html @@ -0,0 +1,93 @@ +--- +title: arguments.caller +slug: Web/JavaScript/Reference/Functions/arguments/caller +translation_of: Archive/Web/JavaScript/arguments.caller +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>이전의 <strong><code>arguments.caller</code></strong> 속성은 현재 실행한 함수를 적용하여 제공했었습니다. 이 속성은 삭제되었으며 더 이상 작동하지 않습니다.</p> + +<h2 id="설명">설명</h2> + +<p>이 속성은 더 이상 이용할 수 없습니다. 하지만 {{jsxref("Function.caller")}} 는 사용할 수 있습니다.</p> + +<pre class="brush: js">function whoCalled() { + if (whoCalled.caller == null) + console.log('I was called from the global scope.'); + else + console.log(whoCalled.caller + ' called me!'); +}</pre> + +<h2 id="예">예</h2> + +<p>다음의 코드는 함수 내에서 <code>arguments.caller </code>값을 확인하기 위해 사용되었지만, 더 이상 작동하지 않습니다.</p> + +<pre class="brush: js example-bad">function whoCalled() { + if (arguments.caller == null) + console.log('I was called from the global scope.'); + else + console.log(arguments.caller + ' called me!'); +} +</pre> + +<h2 id="스펙">스펙</h2> + +<p>초기 정의된 부분이 아닙니다. JavaScript 1.1에서 구현되었으며, 잠재적인 보안 취약의 우려로 ({{bug(7224)}}) 삭제되었습니다.</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/functions/arguments/index.html b/files/ko/web/javascript/reference/functions/arguments/index.html new file mode 100644 index 0000000000..98b5f1385b --- /dev/null +++ b/files/ko/web/javascript/reference/functions/arguments/index.html @@ -0,0 +1,189 @@ +--- +title: arguments 객체 +slug: Web/JavaScript/Reference/Functions/arguments +tags: + - Functions + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Functions/arguments +--- +<div> +<div>{{jsSidebar("Functions")}}</div> +</div> + +<p><strong><code>arguments</code></strong> 객체는 함수에 전달된 인수에 해당하는 <code>Array</code> 형태의 객체입니다.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> ES6 호환 코드를 작성 중이라면 되도록 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">나머지 매개변수</a> 구문을 사용해야 합니다.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: "<code>Array</code> 형태"란 <code>arguments</code>가 {{jsxref("Array.length", "length")}} 속성과 더불어 0부터 인덱스 된 다른 속성을 가지고 있지만, {{jsxref("Array")}}의 {{jsxref("Array.prototype.forEach()", "forEach")}}, {{jsxref("Array.prototype.map()", "map")}}과 같은 내장 메서드를 가지고 있지 않다는 뜻입니다.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/functions-arguments.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">arguments</pre> + +<h2 id="설명">설명</h2> + +<p><code>arguments</code> 객체는 모든 함수 내에서 이용 가능한 지역 변수입니다. <code>arguments</code> 객체를 사용하여 함수 내에서 모든 인수를 참조할 수 있으며, 호출할 때 제공한 인수 각각에 대한 항목을 갖고 있습니다. 항목의 인덱스는 0부터 시작합니다.</p> + +<p>예를 들어, 함수가 세 개의 인수를 받은 경우 다음과 같이 접근할 수 있습니다.</p> + +<pre class="brush: js">arguments[0] +arguments[1] +arguments[2] +</pre> + +<p>각 인수를 설정하거나 재할당할 수도 있습니다.</p> + +<pre class="brush: js">arguments[1] = 'new value'; +</pre> + +<p><code>arguments</code> 객체는 {{jsxref("Array")}}가 아닙니다. <code>Array</code>와 비슷하지만, {{jsxref("Array.prototype.length", "length")}} 빼고는 {{jsxref("Array.prototype.pop", "pop()")}}과 같은 어떤 <code>Array</code> 속성도 없습니다. 그러나 실제 <code>Array</code>로 변환할 수 있습니다:</p> + +<pre class="brush: js">var args = Array.prototype.slice.call(arguments); +var args = [].slice.call(arguments); +</pre> + +<p><code>arguments</code>를 실제 <code>Array</code>로 변환하기 위해 ES2015의 {{jsxref("Array.from()")}} 메서드 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Spread_operator" title="spread operator">전개 연산자</a>를 사용할 수도 있습니다.</p> + +<pre class="brush: js">var args = Array.from(arguments); +var args = [...arguments]; +</pre> + +<p>당신이 형식상 받기로 선언된 것보다 많은 인수로 함수를 호출하는 경우 <code>arguments</code> 객체를 사용할 수 있습니다. 이 기법은 가변 인수가 전달될 수 있는 함수에 유용합니다. 함수에 전달된 인수의 수를 결정하기 위해 <code><a href="/ko/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code>를 쓰세요, 그 뒤에 <code>arguments</code> 객체를 사용하여 각 인수를 처리하세요. 함수 <a href="/ko/docs/Glossary/Signature/Function">signature</a>에 매개변수의 수를 결정하기 위해서는, <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/length">Function.length</a></code> 속성을 쓰세요.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code></dt> + <dd>현재 실행 중인 함수를 가리킵니다.</dd> + <dt><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments/caller">arguments.caller</a></code> {{ Obsolete_inline() }}</dt> + <dd>현재 실행 중인 함수를 호출한 함수를 가리킵니다.</dd> + <dt><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments/length">arguments.length</a></code></dt> + <dd>함수에 전달된 인수의 수를 가리킵니다.</dd> + <dt><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments/@@iterator">arguments[@@iterator]</a></code></dt> + <dd>arguments의 각 인덱스 값을 포함하는 새로운 Array Iterator 객체를 반환합니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<h3 id="여러_문자열을_연결하는_함수_정의하기">여러 문자열을 연결하는 함수 정의하기</h3> + +<p>이 예는 여러 문자열을 연결하는 함수를 정의합니다. 함수의 유일한 형식 인수는 연결할 항목을 구분하는 문자를 지정하는 문자열입니다. 함수는 다음과 같이 정의됩니다:</p> + +<pre class="brush:js">function myConcat(separator) { + var args = Array.prototype.slice.call(arguments, 1); + return args.join(separator); +}</pre> + +<p>이 함수에 인수를 얼마든지 전달할 수 있으며 리스트 내 항목처럼 각 인수를 사용하여 리스트를 만듭니다.</p> + +<pre class="brush:js">// "red, orange, blue" 반환 +myConcat(", ", "red", "orange", "blue"); + +// "elephant; giraffe; lion; cheetah" 반환 +myConcat("; ", "elephant", "giraffe", "lion", "cheetah"); + +// "sage. basil. oregano. pepper. parsley" 반환 +myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");</pre> + +<h3 id="HTML_리스트를_만드는_함수_정의하기">HTML 리스트를 만드는 함수 정의하기</h3> + +<p>이 예는 리스트 HTML을 포함하는 문자열을 만드는 함수를 정의합니다. 함수의 유일한 형식 인수는 리스트가 정렬되지 않은(bulluet(글 머리 기호)가 붙는) 경우 "<code>u</code>" 또는 정렬된(번호가 매겨진) 경우 "<code>o</code>"인 문자열입니다. 함수는 다음과 같이 정의됩니다:</p> + +<pre class="brush:js">function list(type) { + var result = "<" + type + "l><li>"; + var args = Array.prototype.slice.call(arguments, 1); + result += args.join("</li><li>"); + result += "</li></" + type + "l>"; // end list + + return result; +}</pre> + +<p>이 함수에 인수를 얼마든지 전달할 수 있고, 표시된 유형의 리스트에 항목으로 각 인수를 추가합니다. 예를 들면:</p> + +<pre class="brush:js">var listHTML = list("u", "One", "Two", "Three"); + +/* listHTML은: + +"<ul><li>One</li><li>Two</li><li>Three</li></ul>" + +*/</pre> + +<h3 id="나머지_기본_및_비구조화된_매개변수">나머지, 기본 및 비구조화된 매개변수</h3> + +<p><code>arguments</code> 객체는 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters" title="rest parameters">나머지 매개변수</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters" title="default parameters">기본 매개변수</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" title="destructured parameters">비구조화된 매개변수</a>와 함께 사용될 수 있습니다.</p> + +<pre class="brush: js">function foo(...args) { + return arguments; +} +foo(1, 2, 3); // { "0": 1, "1": 2, "2": 3 } +</pre> + +<p>그러나, 비엄격 함수에서는 <strong>mapped <code>arguments</code> 객체</strong>는 함수가 어떤 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters" title="rest parameters">나머지 매개변수</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters" title="default parameters">기본 매개변수</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" title="destructured parameters">비구조화된 매개변수</a>든 포함하지 <strong>않는</strong> 경우에만 제공됩니다. 예를 들어, 기본 매개변수를 사용하는 다음 함수에서는, 100 대신에 <code>10</code>이 반환됩니다:</p> + +<pre class="brush: js">function bar(a=1) { + arguments[0] = 100; + return a; +} +bar(10); // 10 +</pre> + +<p>이 예에서, 어떤 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters" title="rest parameters">나머지 매개변수</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters" title="default parameters">기본 매개변수</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" title="destructured parameters">비구조화된 매개변수</a>가 없는 경우에는, 100이 반환됩니다:</p> + +<pre class="brush: js">function zoo(a) { + arguments[0] = 100; + return a; +} +zoo(10); // 100 + +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>초기 정의. JavaScript 1.1에서 구현됨</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.functions.arguments")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/functions/arguments/length/index.html b/files/ko/web/javascript/reference/functions/arguments/length/index.html new file mode 100644 index 0000000000..d8ea3f0da4 --- /dev/null +++ b/files/ko/web/javascript/reference/functions/arguments/length/index.html @@ -0,0 +1,74 @@ +--- +title: arguments.length +slug: Web/JavaScript/Reference/Functions/arguments/length +translation_of: Web/JavaScript/Reference/Functions/arguments/length +--- +<div>{{jsSidebar("Functions")}}</div> + +<p><strong><code>arguments.length</code></strong> 속성은 함수에 전달된 인수의 수를 포함하고 있습니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">arguments.length</pre> + +<h2 id="설명">설명</h2> + +<p>arguments.length 속성은 실제로 함수에 전달된 arguments 의 수를 제공합니다. 이것은 정의된 매개변수의 수보다 작을 수도 클 수도 있습니다. ({{jsxref("Function.length")}} 보기).</p> + +<h2 id="예제">예제</h2> + +<h3 id="arguments.length_사용하기"><code>arguments.length</code> 사용하기</h3> + +<p>이 예시에서는 둘 또는 그 이상의 수를 더할 수 있는 함수를 정의합니다.</p> + +<pre class="brush: js">function adder(base /*, n2, ... */) { + base = Number(base); + for (var i = 1; i < arguments.length; i++) { + base += Number(arguments[i]); + } + return base; +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>초기 정의. JavaScript 1.1에서 구현됨.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.functions.arguments.length")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Function.length")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/functions/default_parameters/index.html b/files/ko/web/javascript/reference/functions/default_parameters/index.html new file mode 100644 index 0000000000..2783b65844 --- /dev/null +++ b/files/ko/web/javascript/reference/functions/default_parameters/index.html @@ -0,0 +1,239 @@ +--- +title: 기본값 매개변수 +slug: Web/JavaScript/Reference/Functions/Default_parameters +tags: + - ECMAScript2015 + - ECMAScript6 + - Functions + - JavaScript + - 기본값 매개변수 +translation_of: Web/JavaScript/Reference/Functions/Default_parameters +--- +<div>{{jsSidebar("Functions")}}</div> + +<p> 기본값 함수 매개변수 (<strong>default function parameter</strong>)를 사용하면 값이 없거나 <code>undefined</code>가 전달될 경우 이름붙은 매개변수를 기본값으로 초기화할 수 있습니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/functions-default.html")}}</p> + +<div class="hidden"> +<p>위의 상호작용가능한 예제의 소스는 깃허브 저장소에 저장됩니다. 상호작용 예제 프로젝트에 기여하고 싶다면 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 를 클론(clone)하여 풀 리퀘스트(pull request) 를 보내주세요.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate">function [<em>name</em>]([<em>param1</em>[ = <em>defaultValue1</em> ][, ..., <em>paramN</em>[ = defaultValueN ]]]) { + <em>statements</em> +} +</pre> + +<h2 id="설명">설명</h2> + +<p>JavaScript에서, 함수의 매개변수는 <code>{{jsxref("undefined")}}</code>가 기본입니다. 그러나, 일부 상황에서는 다른 기본 값을 설정하는 것이 유용할 수 있습니다. 이때가 바로 기본값 매개변수 가 필요할 때 입니다.</p> + +<p>과거에 기본값 설정을 위한 일반적인 방법은 함수 내부(body)에서 매개변수 값을 검사해 <code>undefined</code>인 경우 값을 할당하는 것이었습니다.</p> + +<p>다음 예제에서, <code>multiply</code>호출시 <code>b</code>에 할당된 값이 없다면, <code>b</code> 값은 <code>a*b</code>를 평가할 때 <code>undefined</code>일 거고 <code>multiply</code> 호출은 <code>NaN</code>이 반환됩니다. </p> + +<pre class="notranslate"><code>function multiply(a, b) { + return a * b +} + +multiply(5, 2) // 10 +multiply(5) // NaN !</code></pre> + +<p>이를 방지하기 위해서, 아래 두번째 줄과 같이 <code>multiply</code> 함수가 오직 한 개의 인수만 있다면 <code>b</code>를 <code>1</code>로 설정하는 방식을 사용하곤 했습니다.</p> + +<pre class="brush: js notranslate">function multiply(a, b) { + b = (typeof b !== 'undefined') ? b : 1 + return a*b +} + +multiply(5, 2) // 10 +multiply(5) // 5 +</pre> + +<p>ES2015의 기본값 매개변수로 함수 내부 에서의 검사는 더 이상 필요치 않습니다. 이제, 간단히 함수 머리(head)에서 <code>b</code>의 기본값으로 <code>1</code> 로 설정할 수 있습니다:</p> + +<pre class="brush: js notranslate">function multiply(a, b = 1) { + return a*b +} + +multiply(5, 2) // 10 +multiply(5) // 5 +multiply(5, undefined) // 5 +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="undefined_vs._다른_거짓같은_값falsy_values_전달하기"><code>undefined</code> vs. 다른 거짓같은 값(falsy values) 전달하기</h3> + +<p>아래 예제중 두 번째 호출에서, 설사 두 번째 인수를 호출할 때 명시해서 <code>undefined</code> (<code>null</code> 혹은 {{glossary("falsy")}} 값이 아니긴 하지만 )로 설정하더라도 , <code>num</code> 인수의 값은 여전히 기본값입니다.</p> + +<pre class="brush: js notranslate">function test(num = 1) { + console.log(typeof num) +} + +test() // 'number' (num 은 1로 설정됨) +test(undefined) // 'number' (num 이 역시 1로 설정됨) + +// 다른 falsy values로 테스트 하기: +test('') // 'string' (num 은 ''로 설정됨) +test(null) // 'object' (num 은 null로 설정됨) +</pre> + +<h3 id="호출_시_평가">호출 시 평가</h3> + +<p>기본 인수는 <em>호출</em> <em>시 </em>에 평가됩니다, 그래서 Python의 경우 와는 달리, 함수가 호출될 때마다 새로운 객체가 생성됩니다.</p> + +<pre class="brush: js notranslate">function append(value, array = []) { + array.push(value) + return array +} + +append(1) // [1] +append(2) // [2], [1, 2]가 아니라 + +</pre> + +<p>이는 심지어 함수 및 변수에도 적용됩니다:</p> + +<pre class="brush: js notranslate">function callSomething(thing = something()) { + return thing +} + +let numberOfTimesCalled = 0 +function something(){ + numberOfTimesCalled += 1 + return numberOfTimesCalled +} + +callSomething() // 1 +callSomething() // 2 +</pre> + +<h3 id="앞쪽_매개변수는_뒷쪽의_매개변수_기본값에_사용할_수_있습니다">앞쪽 매개변수는 뒷쪽의 매개변수 기본값에 사용할 수 있습니다</h3> + +<p>매개 변수가 여러개일 때 앞쪽에( 왼쪽 부분) 정의된 매개변수는 뒷쪽에 정의된 매개변수의 기본값에 바로 사용할 수 있습니다.</p> + +<pre class="brush: js notranslate">function greet(name, greeting, message = greeting + ' ' + name) { + return [name, greeting, message] +} + +greet('David', 'Hi') // ["David", "Hi", "HiDavid"] +greet('David', 'Hi', 'Happy Birthday!') // ["David", "Hi", "Happy Birthday!"] +</pre> + +<p>이 기능은, 얼마나 많은 경계 조건(edge case)를 다룰수 있는지 보여주는, 아래 예제로 거의 설명 가능합니다.</p> + +<pre class="brush: js notranslate">function go() { + return ':P' +} + +// 함수 정의가 간단해짐 +function withDefaults(a, b = 5, c = b, d = go(), e = this, + f = arguments, g = this.value) { + return [a,b,c,d,e,f,g] +} + +// 함수 정의가 길고 장황함 +function withoutDefaults(a, b, c, d, e, f, g){ + switch(arguments.length){ + case 0: + a; + case 1: + b = 5; + case 2: + c = b; + case 3: + d = go(); + case 4: + e = this; + case 5: + f = arguments; + case 6: + g = this.value; + default: + } + return [a,b,c,d,e,f,g]; +} + +// 아래와 같이 함수 호출하면 동일한 결과를 보임 + +withDefaults.call({value:"=^_^="}); +// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] + +withoutDefaults.call({value:"=^_^="}); +// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] +</pre> + +<h3 id="유효범위_효과_Scope_Effects">유효범위 효과 (Scope Effects)</h3> + +<p>한개 이상의 매개변수에 기본값이 지정되면 특별히 매개변수 목록내의 식별자들(identifiers) 대상으로, <a href="https://tc39.es/ecma262/#sec-functiondeclarationinstantiation">두번째 스코프</a> (Environment Record) 가 생성됩니다.</p> + +<p>이 말은 함수 내부에 선언된 함수와 변수들은 매개변수 기본값 초기화시에 참조할 수 없다는 말입니다; 그렇게 하려고 하면 실행시간 에러인 {{jsxref("ReferenceError")}} 를 유발합니다.</p> + +<p>이 말은 또한 함수 내부에서 <code>var</code> 로 선언된 변수는 동일한 이름을 가진 매개변수를 가리게 되는, 중첩 <code>var</code> 선언 으로 인한 일반적인 동작이 일어나지 않는다는 말입니다.</p> + +<p>아래 함수는 호출되면 <code>ReferenceError</code> 를 발생시킵니다. 매개변수 기본값이 함수 내부의 자식 유효범위를 참조할 수 없기 때문입니다.</p> + +<pre class="brush: js example-bad notranslate">function f(a = go()) { // `f`가 호출 되면 `ReferenceError` 발생 + function go() { return ':P' } +}</pre> + +<p>...그리고 아래 함수는 <code>undefined</code> 를 프린트 하는데, <code>var a</code> 가 함수 내부 대상의 유효범위내에서만 효과를 가지기 때문입니다. ( 매개변수 목록이 대상인 부모 스코프가 아니라)</p> + +<pre class="brush: js example-bad notranslate">function f(a, b = () => console.log(a)) { + var a = 1 + b() // `undefined`를 인쇄하는데, 매개변수 기본값이 자체 스코프에 있기 때문입니다 +} </pre> + +<h3 id="기본값_매개변수_뒤쪽의_기본값_없는_매개변수">기본값 매개변수 뒤쪽의 기본값 없는 매개변수</h3> + +<p>매개변수는 여전히 왼쪽에서 오른쪽으로 설정됩니다. 아래 예제에서 뒷쪽에 기본값이 없는 매개변수가 있지만 기본값 매개변수를 덮어씁니다.</p> + +<pre class="brush: js notranslate">function f(x=1, y) { + return [x, y]; +} + +f() // [1, undefined] +f(2) // [2, undefined] +</pre> + +<h3 id="기본값_할당_있는_해체된_매개변수">기본값 할당 있는 해체된 매개변수</h3> + +<p>기본값 할당을 {{jsxref("Operators/Destructuring_assignment", "destructuring assignment", "", 1)}} 표기와 함께 사용할 수 있습니다:</p> + +<pre class="brush: js notranslate">function f([x, y] = [1, 2], {z: z} = {z: 3}) { + return x + y + z +} + +f() // 6</pre> + +<h2 id="스펙">스펙</h2> + +<table> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden"> +<p>이 페이지의 호환성 표는 구조화된 데이타로 부터 생성됩니다. 해당 데이타 업데이트에 기여하고 싶다면 이 깃허브 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 를 체크아웃 해서 풀 리퀘스트를 보내주세요.</p> +</div> + +<p>{{Compat("javascript.functions.default_parameters")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values" rel="external" title="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values">Original proposal at ecmascript.org</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/functions/get/index.html b/files/ko/web/javascript/reference/functions/get/index.html new file mode 100644 index 0000000000..fb64206dff --- /dev/null +++ b/files/ko/web/javascript/reference/functions/get/index.html @@ -0,0 +1,179 @@ +--- +title: getter +slug: Web/JavaScript/Reference/Functions/get +tags: + - 자바스크립트 + - 함수 +translation_of: Web/JavaScript/Reference/Functions/get +--- +<div>{{jsSidebar("Functions")}}</div> + +<p><strong><code>get</code></strong> 구문은 객체의 프로퍼티를 그 프로퍼티를 가져올 때 호출되는 함수로 바인딩합니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/functions-getter.html")}}</p> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">{get <em>prop</em>() { ... } } {get <em>[expression]</em>() { ... } }</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>주어진 함수를 바인딩할 프로퍼티의 이름입니다.</dd> + <dt>expression</dt> + <dd>ECMAScript 2015가 도입되면서, 함수의 이름을 계산하기 위해 표현식을 사용할 수 있습니다.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>어떤 프로퍼티에 접근할 때마다 그 값을 계산하도록 해야 하거나, 내부 변수의 상태를 명시적인 함수 호출 없이 보여주고 싶을 때, JavaScript의 <em>getter</em>를 이용할 수 있습니다. getter가 바인딩된 프로퍼티는 동시에 실제 값을 가질 수는 없지만, getter와 setter를 동시에 바인딩해 일종의 유사 프로퍼티(pseudo-property)를 만들 수는 있습니다.</p> + +<p><code>get</code> 구문을 이용할 때는 다음을 유의하세요.</p> + +<div> +<ul> + <li>숫자나 문자열로 구성된 식별자를 이용할 수 있습니다.</li> + <li>getter는 절대로 매개변수를 가져서는 안 됩니다. (<a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a> 를 참조하세요.)</li> + <li>하나의 객체 리터럴에 또다른 getter나 데이터 바인딩은 불가능합니다. (<code>{ get x() { }, get x() { } }</code> 나 <code>{ x: ..., get x() { } }</code> 는 사용할 수 없습니다.)</li> +</ul> +</div> + +<p>getter는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/delete_Operator">delete</a></code> 연산자를 이용해 삭제할 수 있습니다.</p> + +<h2 id="예">예</h2> + +<h3 id="getter를_객체_초기자에서_정의하기">getter를 객체 초기자에서 정의하기</h3> + +<p>객체 <code>obj</code>에 유사 프로퍼티 <code>latest</code>를 생성합니다. <code>latest</code>는 배열 <code>log</code>의 마지막 요소를 반환합니다.</p> + +<pre><code>var obj = { + log: ['example','test'], + get latest() { + if (this.log.length == 0) return undefined; + return this.log[this.log.length - 1]; + } +} +console.log(obj.latest); // "test".</code></pre> + +<p><code>latest</code>에 어떤 값을 할당하려고 시도해도 그 값이 바뀌지 않는다는 점을 유의하세요.</p> + +<h3 id="delete연산자를_이용해_getter_삭제하기"><code>delete</code>연산자를 이용해 getter 삭제하기</h3> + +<p>getter를 삭제하고 싶다면, <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>를 이용하면 됩니다.</p> + +<pre class="brush: js">delete obj.latest; +</pre> + +<h3 id="defineProperty를_이용해_이미_존재하는_객체에_getter_정의하기"><code>defineProperty</code>를 이용해 이미 존재하는 객체에 getter 정의하기</h3> + +<p>이미 존재하는 객체에 getter를 추가하고자 한다면, {{jsxref("Object.defineProperty()")}}를 이용하면 됩니다.</p> + +<pre class="brush: js">var o = { a:0 } + +Object.defineProperty(o, "b", { get: function () { return this.a + 1; } }); + +console.log(o.b) // getter를 실행합니다. a + 1 (= 1)이 반환됩니다.</pre> + +<h3 id="계산된_(computed)_프로퍼티_이름">계산된 (computed) 프로퍼티 이름</h3> + +<pre class="brush: js">var expr = "foo"; + +var obj = { + get [expr]() { return "bar"; } +}; + +console.log(obj.foo); // "bar"</pre> + +<h3 id="똑똑한(Smart)_스스로_덮어쓰는(self-overwriting)_느긋한(lazy)_getter">똑똑한(Smart) / 스스로 덮어쓰는(self-overwriting) / 느긋한(lazy) getter</h3> + +<p>Getter는 객체에 프로퍼티를 정의할 수 있도록 하지만, 그 프로퍼티에 접근하기 전까지는 값을 계산하지 않습니다. getter는 값을 계산하는 비용을 실제 값이 필요할 때까지 미루며, 그 값이 필요없다면 계산 비용도 들지 않습니다.</p> + +<p>또다른 최적화 기법으로는 계산 미루기와 함께 프로퍼티 값을 나중에 접근하기 위해 캐싱하는 것이 있습니다. 이를<strong> 똑똑한(smart), 혹은 메모화된(<a href="https://en.wikipedia.org/wiki/Memoization">memoized</a>) getter</strong>라고 부릅니다. 값은 getter가 호출될 때 처음 계산되며, 캐싱됩니다. 이후의 호출에는 다시 계산하지 않고 이 캐시값을 반환합니다. 이는 다음과 같은 상황에 유용합니다.</p> + +<ul> + <li>값의 계산 비용이 큰 경우. (RAM이나 CPU 시간을 많이 소모하거나, worker thread를 생성하거나, 원격 파일을 불러오는 등)</li> + <li>값이 당장은 필요하지 않지만 나중에 사용되어야 할 경우, 혹은 절대로 이용되지 않을 수도 있는 경우.</li> + <li>값이 여러 차례 이용되지만 절대 변경되지 않아 매번 다시 계산할 필요가 없는 경우, 혹은 다시 계산되어서는 안 되는 경우.</li> +</ul> + +<p>똑똑한 getter는 값을 다시 계산하지 않기 때문에, 값의 변경이 예상되는 경우에는 똑똑한 getter를 이용해서는 안 됩니다.</p> + +<p>다음 예제에서, 객체는 원래 프로퍼티로 getter를 가집니다. 프로퍼티를 가져올 때, getter는 삭제되며 대신 명시적인 값이 저장됩니다. 최종적으로 값을 반환합니다.</p> + +<pre class="brush: js">get notifier() { + delete this.notifier; + return this.notifier = document.getElementById("bookmarked-notification-anchor"); +},</pre> + +<p>Firefox 코드의 경우, <code><a href="/en-US/docs/Mozilla/JavaScript_code_modules/XPCOMUtils.jsm#defineLazyGetter()">defineLazyGetter()</a></code> 함수를 정의하고 있는 XPCOMUtils.jsm 모듈을 참조하세요.</p> + +<h3 id="get_Vs._defineProperty"><code>get</code> Vs. <code>defineProperty</code></h3> + +<p>While using the <code>get</code> 키워드와 {{jsxref("Object.defineProperty()")}}를 사용하면 비슷한 결과를 얻지만, {{jsxref("classes")}}에서 사용되는 두 가지 경우에는 미묘한 차이가 있습니다.</p> + +<p>get을 사용할 때 속성은 {{jsxref("Object.defineProperty()")}} 를 사용하는 동안 객체의 프로토 타입에 정의 될 것이고, 속성은 그것이 적용되는 인스턴스에 정의 될 것입니다.</p> + +<pre class="brush: js"><code>class Example { + get hello() { + return 'world'; + } +} + +const obj = new Example(); +console.log(obj.hello); +// "world" +console.log(Object.getOwnPropertyDescriptor(obj, 'hello')); +// undefined +console.log(Object.getOwnPropertyDescriptor(Object.getPrototypeOf(obj), 'hello')); +// { configurable: true, enumerable: false, get: function get hello() { return 'world'; }, set: undefined }</code></pre> + +<p> </p> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>최초로 정의되었습니다.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>계산된 프로퍼티 이름이 추가되었습니다.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.functions.get")}}</p> + +<p> </p> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a></li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li> + <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Defining Getters and Setters</a> in JavaScript Guide</li> +</ul> diff --git a/files/ko/web/javascript/reference/functions/index.html b/files/ko/web/javascript/reference/functions/index.html new file mode 100644 index 0000000000..2052b67a93 --- /dev/null +++ b/files/ko/web/javascript/reference/functions/index.html @@ -0,0 +1,596 @@ +--- +title: 함수 +slug: Web/JavaScript/Reference/Functions +tags: + - 생성자 + - 인자 + - 파라미터 + - 함수 +translation_of: Web/JavaScript/Reference/Functions +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>일반적으로, 함수는 함수 외부 (또는 재귀(recursion)의 경우엔 내부) 코드에 의해 <em>호출될</em> 수 있는 "하위프로그램"입니다. 프로그램 그 자체처럼, 함수는 함수 몸통(<em>function body</em>)이라고 하는 일련의 구문(statement)으로 구성됩니다. 값은 함수에 <em>전달될</em> 수 있고 함수는 값을 <em>반환</em>합니다.</p> + +<p>JavaScript에서, 함수는 다른 객체처럼 속성 및 메서드를 가질 수 있기에 일급(first-class) 객체입니다. 다른 객체와 함수를 구별하는 것은 함수는 호출될 수 있다는 것입니다. 간단히 말해, 함수는 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a></code> 객체입니다.</p> + +<p>더 많은 예제와 설명은, <a href="/ko/docs/Web/JavaScript/Guide/함수" title="JavaScript guide about functions">JavaScript 함수 안내서</a>를 참조하세요.</p> + +<h2 id="설명">설명</h2> + +<p>JavaScript에서 모든 함수는 <code>Function</code> 객체입니다. <code>Function</code> 객체의 속성(property) 및 메서드에 관한 정보는 {{jsxref("Function")}} 참조.</p> + +<p>기본값 이외의 값을 반환하려면, 함수는 반환할 값을 지정하는 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/return">return</a></code> 문이 있어야 합니다. return 문이 없는 함수는 기본값을 반환합니다. <code><a href="/ko/docs/Web/JavaScript/Reference/Operators/new">new</a></code> 키워드로 호출되는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">생성자</a>의 경우에, 기본값은 자신의 <code>this</code> 매개변수 값입니다. 다른 모든 함수의 경우, 기본 반환값은 {{jsxref("undefined")}}입니다.</p> + +<p>함수 호출의 매개변수는 함수의 <em>인수</em>입니다. 인수는 함수에 <em>값으로</em> 전달됩니다. 함수가 인수값을 바꾸면, 이 변화는 전역 또는 호출한 함수에 반영되지 않습니다. 그러나, 객체 참조(reference)는 값이지만 특별합니다: 함수가 참조된 객체의 속성을 바꾸면, 그 변화는 다음 예에서와 같이 함수 밖에서도 바뀌는 것을 볼 수 있습니다:</p> + +<pre class="brush: js">/* 함수 'myFunc' 선언 */ +function myFunc(theObject) { + theObject.brand = "Toyota"; + } + + /* + * 변수 'mycar' 선언; + * 새 객체를 만들고 초기화; + * 'mycar'에 객체 참조를 할당 + */ + var mycar = { + brand: "Honda", + model: "Accord", + year: 1998 + }; + + /* Logs 'Honda' */ + console.log(mycar.brand); + + /* 객체 참조를 함수에 전달 */ + myFunc(mycar); + + /* + * 함수에 의해 바뀌었기에 객체의 + * 'brand' 속성의 값으로 'Toyota' 출력. + */ + console.log(mycar.brand); +</pre> + +<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/this"><code>this</code> 키워드</a>는 현재 실행 중인 함수를 참조하지 않습니다, 그래서 심지어 함수 몸통 내에서도 이름으로 <code>Function</code> 객체를 참조해야 합니다.</p> + +<h2 id="함수_정의하기">함수 정의하기</h2> + +<p>함수를 정의하는 여러 방법이 있습니다:</p> + +<h3 id="함수_선언_function_문">함수 선언 (<code>function</code> 문)</h3> + +<p>함수 선언을 위한 특별한 구문이 있습니다 (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Statements/function" title="function statement">function 문</a> 참조):</p> + +<pre class="brush: js">function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>함수 이름.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>함수에 전달되는 인수의 이름. 함수는 255개까지 인수를 가질 수 있습니다.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>함수의 몸통을 구성하는 문.</dd> +</dl> + +<h3 id="함수_표현식_function_식">함수 표현식 (<code>function</code> 식)</h3> + +<p>함수 식(expression)은 함수 선언과 비슷하고 구문이 같습니다 (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/function" title="function expression">function 식</a> 참조):</p> + +<p>함수 표현식(expression)은 함수 선언과 비슷하고 구문이 같습니다 (자세한 내용은 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> 참조). 함수 표현식은 더 큰 표현식의 일부일 수 있습니다. "이름이 붙은(named)"함수 표현식 (예 : 호출 스택에서 표현식 이름 사용하는경우) 또는 "익명"함수 표현식을 정의 할 수 있습니다. 함수 표현식은 선언이 되지 않은 상태에서 사용할 수 없기 때문에 함수를 사용하기 전에 코드에 함수코드가 존제해야 사용 할 수 있습니다.</p> + +<pre class="brush: js">function [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>함수 이름. 함수가 익명(anonymous) 함수로 알려진 경우, 생략될 수 있음.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>함수에 전달되는 인수의 이름. 함수는 255개까지 인수를 가질 수 있습니다.</dd> + <dt><code>statements</code></dt> + <dd>함수의 몸통을 구성하는 문.</dd> +</dl> + +<p>다음은 익명 함수 표현식의 예입니다 (<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">이름</span></font> 이 사용되지 않음):</p> + +<pre class="brush: js"><code>var myFunction = function() { + statements +}</code></pre> + +<p>It is also possible to provide a name inside the definition in order to create a <strong>named</strong> function expression:</p> + +<pre class="brush: js"><code>var myFunction = function namedFunction(){ + statements +}</code></pre> + +<p>One of the benefits of creating a named function expression is that in case we encountered an error, the stack trace will contain the name of the function, making it easier to find the origin of the error.</p> + +<p>As we can see, both examples do not start with the <code>function</code> keyword. Statements involving functions which do not start with <code>function</code> are function expressions.</p> + +<p>When functions are used only once, a common pattern is an <a href="https://developer.mozilla.org/en-US/docs/Glossary/IIFE">IIFE (Immediately Invokable Function Expression)</a>.</p> + +<pre class="brush: js"><code>(function() { + statements +})();</code></pre> + +<p>IIFE are function expressions that are invoked as soon as the function is declared.</p> + +<h3 id="생성기_함수_선언_function*_문">생성기 함수 선언 (<code>function*</code> 문)</h3> + +<p>생성기 함수 선언을 위한 특별한 구문이 있습니다 (자세한 사항은 {{jsxref('Statements/function*', 'function* statement')}} 참조):</p> + +<pre class="brush: js">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>함수 이름.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>함수에 전달되는 인수의 이름.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>함수의 몸통을 구성하는 문.</dd> +</dl> + +<h3 id="생성기_함수_식_function*_식">생성기 함수 식 (<code>function*</code> 식)</h3> + +<p>생성기 함수 식은 생성기 함수 선언과 비슷하고 구문이 같습니다 (자세한 사항은 {{jsxref('Operators/function*', 'function* expression')}} 참조):</p> + +<pre class="brush: js">function* [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>함수 이름. 함수가 익명 함수인 경우 생략될 수 있음.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>함수에 전달되는 인수의 이름.</dd> + <dt><code>statements</code></dt> + <dd>함수의 몸통을 구성하는 문.</dd> +</dl> + +<h3 id="화살표_함수_표현식_>">화살표 함수 표현식 (=>)</h3> + +<p>화살표 함수 식은 구문이 더 짧고 어휘상(lexically) <code>this</code> 값을 바인딩합니다 (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션" title="arrow functions">화살표 함수</a> 참조):</p> + +<pre class="brush: js">([param[, param]]) => { + statements +} + +param => expression +</pre> + +<dl> + <dt><code>param</code></dt> + <dd>인수의 이름. 0개 인수는 <code>()</code>로 표시돼야 합니다. 인수가 1개뿐이면, 괄호는 필요치 않습니다. (<code>foo => 1</code>처럼)</dd> + <dt><code>statements or expression</code></dt> + <dd>선언문이 여러개인 경우 괄호로 묶여야 합니다. 단일 식(expression)은 괄호가 필요 없습니다. 그리고 식은 암시적으로(implicit) 함수의 반환값이 됩니다.</dd> +</dl> + +<h3 id="Function_constructor"><code>Function</code> constructor</h3> + +<div class="note"> +<p><strong>참고</strong> : <code>Function</code> constructor를 사용하여 함수를 만드는 것은 권장되지 않습니다. 함수 본문을 일부 JS 엔진 최적화를 방해 할 수있는 문자열로 사용해야하고 다른 문제를 유발할 수 있기 때문입니다.</p> +</div> + +<p>다른 모든 객체처럼, {{jsxref("Function")}} 객체는 <code>new</code> 연산자를 사용하여 생성될 수 있습니다:</p> + +<pre class="brush: js">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>형식 매개변수로 함수에 의해 사용되는 0개 이상의 이름. 각각은 알맞은 JavaScript 식별자(identifier)여야 합니다.</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>함수 몸통을 구성하는 JavaScript 문을 포함하는 문자열.</dd> +</dl> + +<p>함수로 <code>Function</code> 생성자 호출(<code>new</code> 연산자 사용 없이)하는 것은 생성자로 호출하는 것과 같습니다.</p> + +<h3 id="GeneratorFunction_생성자"><code>GeneratorFunction</code> 생성자</h3> + +<div class="note"> +<p><strong>주의:</strong> <code>GeneratorFunction</code>은 전역 객체가 아니지만 생성기 함수 인스턴스로부터 얻을 수 있습니다(자세한 사항은 {{jsxref("GeneratorFunction")}} 참조).</p> +</div> + +<div class="note"> +<p><strong>주의:</strong> <code>GeneratorFunction</code> 생성자를 사용하여 함수를 만드는 것은 권장되지 않습니다. 함수 본문을 일부 JS 엔진 최적화를 방해 할 수있는 문자열로 사용해야하고 다른 문제를 유발할 수 있기 때문입니다.</p> +</div> + +<p>다른 모든 객체처럼, {{jsxref("GeneratorFunction")}} 객체는 <code>new</code> 연산자를 사용하여 생성될 수 있습니다:</p> + +<pre class="brush: js">new GeneratorFunction (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>형식 인수명으로 함수에 의해 사용되는 0개 이상의 이름. 각각은 유효한 JavaScript 식별자 규칙을 따르는 문자열 또는 콤마로 구분된 그러한 문자열 목록이어야 합니다; 예를 들어 "<code>x</code>", "<code>theValue</code>" 또는 "<code>a,b</code>".</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>함수 정의를 구성하는 JavaScript 문을 포함하는 문자열.</dd> +</dl> + +<p>함수로서 <code>Function</code> 생성자 호출(<code>new</code> 연산자 사용 없이)은 생성자로서 호출하는 것과 같은 효과입니다.</p> + +<h2 id="Function_매개변수">Function 매개변수</h2> + +<h3 id="기본_매개변수">기본 매개변수</h3> + +<p>기본(default) 함수 매개변수는 전달된 값이 없거나 <code>undefined</code>인 경우 기본값으로 초기화되는 형식 매개변수를 허용합니다. 자세한 사항은, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters" title="default parameters">기본 매개변수</a> 참조.</p> + +<h3 id="나머지_매개변수">나머지 매개변수</h3> + +<p>나머지(rest) 매개변수 구문은 부정(indefinite)수인 인수를 배열로 나타내는 것을 허용합니다. 자세한 사항은, <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters" title="rest parameters">나머지 매개변수</a> 참조.</p> + +<h2 id="arguments_객체"><code>arguments</code> 객체</h2> + +<p><code>arguments</code> 객체를 사용하여 함수 내에서 함수의 인수를 참조할 수 있습니다. <a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a> 참조.</p> + +<ul> + <li><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code>: 현재 실행 중인 함수에 전달된 인수를 포함하는 배열 같은 객체.</li> + <li><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code> {{Deprecated_inline}} : 현재 실행 중인 함수.</li> + <li><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments/caller">arguments.caller</a></code> {{Obsolete_inline}} : 현재 실행 중인 함수를 호출한 함수.</li> + <li><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments/length">arguments.length</a></code>: 함수에 전달된 인수의 수.</li> +</ul> + +<h2 id="메서드_함수_정의하기">메서드 함수 정의하기</h2> + +<h3 id="getter_및_setter_함수">getter 및 setter 함수</h3> + +<p>모든 표준 내장 객체 또는 새로운 속성 추가를 지원하는 사용자 정의 객체에 getter(accessor 메서드) 및 setter(mutator 메서드)를 정의할 수 있습니다. getter 및 setter를 정의하는 구문은 객체 리터럴 구문을 사용합니다.</p> + +<dl> + <dt><a href="/ko/docs/Web/JavaScript/Reference/Functions/get">get</a></dt> + <dd> + <p>객체 속성을 그 속성이 검색되는 경우 호출되는 함수에 바인딩합니다.</p> + </dd> + <dt><a href="/ko/docs/Web/JavaScript/Reference/Functions/set">set</a></dt> + <dd>객체 속성을 그 속성을 설정하려는 시도가 있는 경우 호출되는 함수에 바인딩합니다.</dd> +</dl> + +<h3 id="메서드_정의_구문">메서드 정의 구문</h3> + +<p>ECMAScript 2015를 시작으로, getter 및 setter와 비슷한 단축 구문으로 자신의 메서드를 정의할 수 있습니다. 더 자세한 정보는 <a href="/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions">메서드 정의</a> 참조.</p> + +<pre class="brush: js">var obj = { + foo() {}, + bar() {} +};</pre> + +<h2 id="생성자_vs._선언문_vs._표현식">생성자 vs. 선언문 vs. 표현식</h2> + +<p>다음을 비교해보세요:</p> + +<p><code>Function</code> <em>constructor로 정의된 함수를 </em>변수<code>multiply</code>에 할당.</p> + +<pre class="brush: js"><code>var multiply = new Function('x', 'y', 'return x * y');</code></pre> + +<p>이름이 <code>multiply</code>인 함수 선언:</p> + +<pre class="brush: js">function multiply(x, y) { + return x * y; +} +</pre> + +<p>변수 <code>multiply</code>에 할당된 익명(anonymous) 함수의 <em>function 식</em>:</p> + +<pre class="brush: js">var multiply = function(x, y) { + return x * y; +}; +</pre> + +<p>변수 <code>multiply</code>에 할당된 이름이 <code>func_name</code>인 함수의 <em>function 식</em>:</p> + +<pre class="brush: js">var multiply = function func_name(x, y) { + return x * y; +}; +</pre> + +<h3 id="차이">차이</h3> + +<p>모두 거의 같은 일을 하지만 약간 미묘한 차이가 있습니다:</p> + +<p>함수 이름과 함수가 할당 된 변수 사이에는 차이가 있습니다. 함수 이름을 변경할 수 없으며 함수가 할당 된 변수는 다시 할당 할 수 있습니다. 함수 이름은 함수 본문(body)내에서만 사용할 수 있습니다. 함수 본문(body) 외부에서 사용하려고 하면 오류가 발생합니다. (함수 이름이 <code>var</code> 문을 통해 이전에 선언 된 경우에는 정의되지 않습(<code>undefined</code>)니다.</p> + +<p>예를 들어:</p> + +<pre class="brush: js">var y = function x() {}; +alert(x); // 오류 발생 +</pre> + +<p>함수 이름은 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/toString"><code>Function</code>의 toString 메서드</a>를 통해 직렬화되는 경우에도 보입니다.</p> + +<p>반면에 함수가 할당 된 변수는 함수의 범위(scope)가 포함되도록 보장 된 범위로만 제한됩니다.</p> + +<p>예제 4에서 볼 수 있듯이 함수 이름은 함수가 할당 된 변수와 다를 수 있습니다. 그들은 서로에게 아무런 관련이 없습니다. 함수 선언은 함수 이름과 동일한 이름의 변수도 만듭니다. 따라서 함수 표현식으로 정의 된 함수와 달리 함수 선언으로 정의 된 함수는 정의 된 범위에서 함수 선언의 이름으로 액세스 할 수 있습니다.</p> + +<p>'<code>new Function</code>'으로 정의된 함수는 함수 이름이 없습니다. 그러나, <a href="/ko/docs/SpiderMonkey">SpiderMonkey</a> JavaScript 엔진에서는, 함수의 직렬화된 형태가 마치 그 이름이 "anonymous"인 것처럼 보입니다. 예를 들어, <code>alert(new Function())</code>은 다음을 출력합니다:</p> + +<pre class="brush: js">function anonymous() { +} +</pre> + +<p>함수가 실제로는 이름이 없기에, <code>anonymous</code>는 함수 내에서 액세스될 수 있는 변수가 아닙니다.</p> + +<p>다음 코드는 오류가 날 것입니다:</p> + +<pre class="brush: js">var foo = new Function("alert(anonymous);"); +foo(); +</pre> + +<p>function 식 또는 <code>Function</code> 생성자에 의해 정의된 함수와는 달리, function 선언으로 정의된 함수는 function 자체의 선언 전에 사용될 수 있습니다. 예를 들어:</p> + +<pre class="brush: js">foo(); // alerts FOO! +function foo() { + alert('FOO!'); +} +</pre> + +<p>함수 표현식(function expression)이나 함수 선언(function declaration)에 의해 정의 된 함수는 현재 범위를 상속합니다. 즉,이 함수는 클로저를 형성합니다. 반면에 <code>Function</code> 생성자가 정의한 함수는 전역 범위 (모든 함수가 상속) 이외의 다른 범위를 상속하지 않습니다.</p> + +<pre class="brush: js"><code>/* + * Declare and initialize a variable 'p' (global) + * and a function 'myFunc' (to change the scope) inside which + * declare a varible with same name 'p' (current) and + * define three functions using three different ways:- + * 1. function declaration + * 2. function expression + * 3. function constructor + * each of which will log 'p' + */ +var p = 5; +function myFunc() { + var p = 9; + + function decl() { + console.log(p); + } + var expr = function() { + console.log(p); + }; + var cons = new Function('\tconsole.log(p);'); + + decl(); + expr(); + cons(); +} +myFunc(); + +/* + * Logs:- + * 9 - for 'decl' by function declaration (current scope) + * 9 - for 'expr' by function expression (current scope) + * 5 - for 'cons' by Function constructor (global scope) + */</code></pre> + +<p>function 식 및 function 선언에 의해 정의된 함수는 한 번만 구문 분석됩니다, 반면에 <code>Function</code> 생성자에 의해 정의된 함수는 아닙니다. 즉, <code>Function</code> 생성자에 전달된 함수 몸통 문자열은 생성자가 호출될 때마다 구문 분석되어야 합니다. function 식이 매번 closure를 만들더라도, 함수 몸통은 다시 구문 분석되지 않습니다, 그래서 function 식은 "<code>new Function(...)</code>"보다 여전히 더 빠릅니다. 따라서 <code>Function</code> 생성자는 보통 가능한 한 피해야 합니다.</p> + +<p>함수 식과 함수 선언으로 정의 된 함수는 한 번만 구문 분석되지만 <code>Function</code> 생성자로 정의 된 함수는 구문 분석되지 않습니다. 즉, <code>Function</code> 생성자에 전달 된 함수 본문 문자열은 생성자가 호출 될 때마다 파싱되어야합니다. 함수식이 매번 클로저(closure)를 만들지만 함수 본문은 다시 파싱되지 않으므로 함수 식은 여전히 "<code>new Function (...)</code>"보다 빠릅니다. 따라서 <code>Function</code> 생성자는 가능한 피하는 것이 좋습니다.</p> + +<p>그러나 <code>Function constructor</code>의 문자열을 구문 분석하여 생성된 함수 내에 중첩된 function 식 및 function 선언은 반복해서 구문 분석되지 않음에 주의해야 합니다. 예를 들면:</p> + +<pre class="brush: js">var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))(); +foo(); // 함수 몸통 문자열의 "function() {\n\talert(bar);\n}" 부분은 다시 구문 분석되지 않습니다.</pre> + +<p>function 선언은 매우 쉽게 (그리고 종종 무심코) function 식으로 바뀝니다. function 선언은 다음 어느 쪽이든 function 식이 되는 것을 중단합니다:</p> + +<ul> + <li>식의 일부가 된 경우</li> + <li>더 이상 함수 또는 스크립트 자체의 "source 요소"가 아닌 경우. "source 요소"는 스크립트 또는 함수 몸통에서 중첩되지 않은 문입니다:</li> +</ul> + +<pre class="brush: js">var x = 0; // source 요소 +if (x == 0) { // source 요소 + x = 10; // source 요소가 아님 + function boo() {} // source 요소가 아님 +} +function foo() { // source 요소 + var y = 20; // source 요소 + function bar() {} // source 요소 + while (y == 10) { // source 요소 + function blah() {} // source 요소가 아님 + y++; // source 요소가 아님 + } +} +</pre> + +<h3 id="예">예</h3> + +<pre class="brush: js">// function 선언 +function foo() {} + +// function 식 +(function bar() {}) + +// function 식 +x = function hello() {} + + +if (x) { + // function 식 + function world() {} +} + + +// function 선언 +function a() { + // function 선언 + function b() {} + if (0) { + // function 식 + function c() {} + } +} +</pre> + +<h2 id="블록_레벨_함수">블록 레벨 함수</h2> + +<p>ES2015 (ES6)를 시작으로 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode" title="strict mode">엄격 모드</a>에서, 블록 내부 함수는 이제 그 블록 범위가 됩니다. ES6 이전에, 블록 레벨 함수는 엄격 모드에서 금지됐습니다.</p> + +<pre class="brush: js">'use strict'; + +function f() { + return 1; +} + +{ + function f() { + return 2; + } +} + +f() === 1; // true + +// 비엄격 모드에서는 f() === 2 +</pre> + +<h3 id="비엄격_코드에서_블록_레벨_함수">비엄격 코드에서 블록 레벨 함수</h3> + +<p>한 마디로: 안됩니다.</p> + +<p>비엄격 코드에서, 블록 내부 function 선언은 이상하게 동작합니다. 예를 들면:</p> + +<pre class="brush: js">if (shouldDefineZero) { + function zero() { // 위험: 호환성 위험 + console.log("This is zero."); + } +} +</pre> + +<p>ES2015는 <code>shouldDefineZero</code>가 false인 경우, 그러면 <code>zero</code>는 결코 정의되어서는 안된다고 합니다, 그 블록이 실행된 적이 없기에. 그러나, 이는 표준의 새로운 일부입니다. 역사상, 이는 지정되지 않은 채 방치되었고 일부 브라우저는 블록이 실행됐든 아니든 <code>zero</code>를 정의할 겁니다.</p> + +<p><a href="/ko/docs/Web/JavaScript/Reference/Strict_mode" title="strict mode">엄격 모드</a>에서, ES2015를 지원하는 모든 브라우저는 이를 같은 식으로 다룹니다: <code>zero</code>는 <code>shouldDefineZero</code>가 true이고 <code>if</code> 블록 범위인 경우에만 정의됩니다.</p> + +<p>조건부 함수를 정의하는 더 안전한 방법은 function 식을 변수에 할당하는 것입니다:</p> + +<pre class="brush: js">var zero; +if (0) { + zero = function() { + console.log("This is zero."); + }; +} +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="형식_갖춘_숫자_반환하기">형식 갖춘 숫자 반환하기</h3> + +<p>다음 함수는 선행 0으로 채워진 형식 갖춘(formatted) 숫자 표현을 포함하는 문자열을 반환합니다.</p> + +<pre class="brush: js">// 이 함수는 선행 0으로 채워진 문자열을 반환 +function padZeros(num, totalLen) { + var numStr = num.toString(); // 문자열로 반환값을 초기화 + var numZeros = totalLen - numStr.length; // 0의 개수 계산 + for (var i = 1; i <= numZeros; i++) { + numStr = "0" + numStr; + } + return numStr; +} +</pre> + +<p>다음 문은 padZeros 함수를 호출합니다.</p> + +<pre class="brush: js">var result; +result = padZeros(42,4); // 반환값 "0042" +result = padZeros(42,2); // 반환값 "42" +result = padZeros(5,4); // 반환값 "0005" +</pre> + +<h3 id="함수_존재_여부_결정하기">함수 존재 여부 결정하기</h3> + +<p><code>typeof</code> 연산자를 사용하여 함수가 존재하는지 여부를 결정할 수 있습니다. 다음 예에서, <code>window</code> 객체가 함수인 <code>noFunc</code>이라고 하는 속성이 있는지 결정하기 위해 테스트가 수행됩니다. 있으면, 사용됩니다; 그렇지 않으면 무언가 다른 행동을 취합니다.</p> + +<pre class="brush: js"> if ('function' == typeof window.noFunc) { + // noFunc() 사용 + } else { + // 뭔가 다른 것 수행 + } +</pre> + +<p><code>if</code> 테스트에는, <code>noFunc</code>에 대한 참조가 사용되고—실제 함수가 호출되지 않도록 함수 이름 뒤에 괄호 "()"가 없음을 주의하세요.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>초기 정의. JavaScript 1.0에서 구현됨</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>신규: 화살표 함수, 생성기 함수, 기본 매개변수, 나머지 매개변수.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.functions")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Statements/function", "function 문")}}</li> + <li>{{jsxref("Operators/function", "function 식")}}</li> + <li>{{jsxref("Statements/function*", "function* 문")}}</li> + <li>{{jsxref("Operators/function*", "function* 식")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{jsxref("Functions/애로우_펑션", "화살표 함수")}}</li> + <li>{{jsxref("Functions/Default_parameters", "기본 매개변수")}}</li> + <li>{{jsxref("Functions/rest_parameters", "나머지 매개변수")}}</li> + <li>{{jsxref("Functions/arguments", "arguments 객체")}}</li> + <li>{{jsxref("Functions/get", "getter")}}</li> + <li>{{jsxref("Functions/set", "setter")}}</li> + <li>{{jsxref("Functions/Method_definitions", "메서드 정의")}}</li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Functions" title="Functions and function scope">함수 및 함수 범위</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/functions/method_definitions/index.html b/files/ko/web/javascript/reference/functions/method_definitions/index.html new file mode 100644 index 0000000000..ff1b67956a --- /dev/null +++ b/files/ko/web/javascript/reference/functions/method_definitions/index.html @@ -0,0 +1,230 @@ +--- +title: 메서드 정의 +slug: Web/JavaScript/Reference/Functions/Method_definitions +tags: + - ECMAScript 2015 + - Functions + - JavaScript + - Object + - Syntax +translation_of: Web/JavaScript/Reference/Functions/Method_definitions +--- +<div>{{JsSidebar("Functions")}}</div> + +<p>ECMAScript 2015 를 시작으로, 객체 초기자(initializer)에 메서드 정의를 위한 더 짧은 구문이 도입되었습니다. 이는 메서드 명에 할당된 함수를 위한 단축입니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">var obj = { + <var>property</var>( <var>parameters…</var> ) {}, + *<var>generator</var>( <var>parameters…</var> ) {}, +// 키(속성) 계산값과도 함께: + [property]( <var>parameters…</var> ) {}, + *[generator]( <var>parameters…</var> ) {}, +// ES5 getter/setter 구문과 비교해 보세요: + get <var>property</var>() {}, + set <var>property</var>(<var>value</var>) {} +}; +</pre> + +<h2 id="설명">설명</h2> + +<p>단축 구문은 ECMAScript 5에 도입된 <a href="/ko/docs/Web/JavaScript/Reference/Functions/get">getter</a> 및 <a href="/ko/docs/Web/JavaScript/Reference/Functions/set">setter</a> 구문과 비슷합니다.</p> + +<p>다음 코드가 주어지면:</p> + +<pre class="brush: js">var obj = { + foo: function() {}, + bar: function() {} +};</pre> + +<p>이제 이를 아래로 줄일 수 있습니다:</p> + +<pre class="brush: js">var obj = { + foo() {}, + bar() {} +};</pre> + +<div class="note"> +<p><strong>주의 :</strong> 단축 구문은 익명(anonymous) 함수 (…<code>foo: function() {}</code>… 에서처럼) 대신 유명(named) 함수를 사용합니다. 유명 함수는 함수 본체에서 호출될 수 있습니다 (이는 참조할 식별자가 없기에 익명 함수에게는 불가능합니다). 자세한 사항은, {{jsxref("Operators/function","function","#Examples")}} 참조.</p> +</div> + +<h3 id="단축_생성기_메서드">단축 생성기 메서드</h3> + +<p><a href="/ko/docs/Web/JavaScript/Reference/Statements/function*">생성기 메서드</a>는 단축 구문을 사용해서도 정의될 수 있습니다. 단축 구문 내 별표(*)는 생성기 속성명 앞에 와야 함을 주의하세요. 즉, <code>* g(){}</code>는 작동하지만 <code>g *(){}</code>는 아닙니다.</p> + +<pre class="brush: js;highlight[12]">// 유명 속성 사용 (ES2015 이전) +var obj2 = { + g: function*() { + var index = 0; + while(true) + yield index++; + } +}; + +// 단축 구문을 쓰는 같은 객체 +var obj2 = { + * g() { + var index = 0; + while(true) + yield index++; + } +}; + +var it = obj2.g(); +console.log(it.next().value); // 0 +console.log(it.next().value); // 1</pre> + +<h3 id="메서드_정의는_생성_불가능합니다">메서드 정의는 생성 불가능합니다</h3> + +<p>모든 메서드 정의는 생성자가 아니고 인스턴스화하려고 하는 경우 {{jsxref("TypeError")}} 예외가 발생합니다.</p> + +<pre class="brush: js example-bad">var obj = { + method() {}, +}; +new obj.method; // TypeError: obj.method는 생성자가 아닙니다 + +var obj = { + * g() {} +}; +new obj.g; // TypeError: obj.g는 생성자가 아닙니다 (ES2016에서 바뀜) +</pre> + +<h2 id="예">예</h2> + +<h3 id="간단한_테스트_사례">간단한 테스트 사례</h3> + +<pre class="brush: js;highlight[3]">var obj = { + a : "foo", + b(){ return this.a; } +}; +console.log(obj.b()); // "foo" +</pre> + +<h3 id="속성_계산명">속성 계산명</h3> + +<p>단축 구문은 속성 계산명(computed property name)도 지원합니다.</p> + +<pre class="brush: js;highlight[4]">var bar = { + foo0 : function (){return 0;}, + foo1(){return 1;}, + ["foo" + 2](){return 2;}, +}; + +console.log(bar.foo0()); // 0 +console.log(bar.foo1()); // 1 +console.log(bar.foo2()); // 2</pre> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ES7', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ES7')}}</td> + <td>생성기 메서드 역시 [[Construct]] 트랩이 없어야 하고 <code>new</code>와 함께 사용되는 경우 예외 발생으로 바뀜.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Method definition shorthand</td> + <td>{{CompatChrome("39")}}</td> + <td>{{CompatGeckoDesktop("34")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("26")}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Generator methods are not constructable (ES2016)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("43")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Method definition shorthand</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("34")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Generator methods are not constructable (ES2016)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("43")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="SpiderMonkey_전용_주의사항">SpiderMonkey 전용 주의사항</h2> + +<ul> + <li>SpiderMonkey 38 {{geckoRelease(38)}} 이전에, "<code>get</code>" 및 "<code>set</code>"은 생성기 메서드에 무효한 이름이었습니다. 이는 {{bug(1073809)}}에서 해결됐습니다.</li> + <li>SpiderMonkey 41 {{geckoRelease(41)}} 이전에, 중괄호는 메서드 정의에 필요하지 않았습니다. ES2015 스펙을 따르기 위해 이제부터 필요하고 이번과 이후 버전에서 {{jsxref("SyntaxError")}}가 발생합니다 ({{bug(1150855)}}). + <pre class="brush: js example-bad">var o = {x() 12}; // SyntaxError</pre> + </li> + <li>오직 생성기 메서드만이 생성자인 제한은 SpiderMonkey 41 {{geckoRelease(41)}}에서 구현되었습니다. {{bug(1059908)}} 및 {{bug(1166950)}} 참조.</li> +</ul> + +<h2 id="참조">참조</h2> + +<ul> + <li><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/get">get</a></code></li> + <li><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Lexical_grammar" title="Lexical grammar">어휘 문법</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/functions/rest_parameters/index.html b/files/ko/web/javascript/reference/functions/rest_parameters/index.html new file mode 100644 index 0000000000..eee5528b38 --- /dev/null +++ b/files/ko/web/javascript/reference/functions/rest_parameters/index.html @@ -0,0 +1,223 @@ +--- +title: Rest 파라미터 +slug: Web/JavaScript/Reference/Functions/rest_parameters +tags: + - Functions + - JavaScript + - Rest + - Rest parameters +translation_of: Web/JavaScript/Reference/Functions/rest_parameters +--- +<div>{{jsSidebar("Functions")}}</div> + +<p><strong>Rest 파라미터</strong> 구문은 정해지지 않은 수(an indefinite number, 부정수) 인수를 배열로 나타낼 수 있게 합니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}</p> + +<div class="hidden"> +<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> +</div> + +<p> </p> + +<h2 id="구문">구문</h2> + +<pre class="brush: js">function f(a, b, ...theArgs) { + // ... +} +</pre> + +<h2 id="설명">설명</h2> + +<p>함수의 마지막 파라미터의 앞에 <code>...</code> 를 붙여 (사용자가 제공한) 모든 나머지 인수를 "표준" 자바스크립트 배열로 대체합니다. 마지막 파라미터만 "Rest 파라미터" 가 될 수 있습니다.</p> + +<pre class="brush: js">function myFun(a, b, ...manyMoreArgs) { + console.log("a", a); + console.log("b", b); + console.log("manyMoreArgs", manyMoreArgs); +} + +myFun("one", "two", "three", "four", "five", "six"); + +// Console Output: +// a, one +// b, two +// manyMoreArgs, [three, four, five, six]</pre> + +<p> </p> + +<h3 id="Rest_파라미터_및_arguments_객체간_차이">Rest 파라미터 및 <code>arguments</code> 객체간 차이</h3> + +<p>Rest 파라미터와 <a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments"><code>arguments</code></a> 객체 사이에 세 가지 주요 차이점이 있습니다:</p> + +<ul> + <li>Rest 파라미터는 구분된 이름(예, 함수 표현에 정식으로 정의된 것)이 주어지지 않은 유일한 대상인 반면, <code>arguments</code> 객체는 함수로 전달된 모든 인수를 포함합니다.</li> + <li><code>arguments</code> 객체는 실제 배열이 아니고 rest 파라미터는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a> 인스턴스로, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort" title="Array sort method"><code>sort</code></a>, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map" title="Array map method"><code>map</code></a>, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" title="Array forEach method"><code>forEach</code></a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/pop" title="Array pop method"><code>pop</code></a> 같은 메서드가 바로 인스턴스에 적용될 수 있음을 뜻합니다.</li> + <li>즉 <code>arguments</code> 객체는 자체에 특정 추가 기능이 있습니다 (<code>callee</code> 속성처럼).</li> +</ul> + +<h3 id="arguments에서_배열까지">arguments에서 배열까지</h3> + +<p>Rest 파라미터는 인수에 의해 유발된 상용구(boilerplate) 코드를 줄이기 위해 도입되었습니다.</p> + +<pre class="brush: js">// Rest 파라미터 이전에, "arguments" 는 다음을 사용해 일반적인 배열로 변환될 수 있음 + +function f(a, b) { + + var normalArray = Array.prototype.slice.call(arguments); + // -- 또는 -- + var normalArray = [].slice.call(arguments); + // -- 또는 -- + var normalArray = Array.from(arguments); + + var first = normalArray.shift(); // OK, 첫 번째 인수를 반환 + var first = arguments.shift(); // ERROR (arguments 가 일반적인 배열이 아님) + +} + +// 이제 rest 파라미터를 사용해 쉽게 일반적인 배열에 접근할 수 있음 + +function f(...args) { + var normalArray = args; + var first = normalArray.shift(); // OK, 첫 번째 인수를 반환 +}</pre> + +<h3 id="Rest_파라미터_해체">Rest 파라미터 해체</h3> + +<p>Rest 파라미터는 해체될 수 있습니다(배열로만). 이는 데이터가 구분된 변수로 해체될 수 있음을 의미합니다. <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">구조 분해 할당</a> 문서를 보세요.</p> + +<pre class="brush: js">function f(...[a, b, c]) { + return a + b + c; +} + +f(1) // NaN (b 와 c 는 undefined) +f(1, 2, 3) // 6 +f(1, 2, 3, 4) // 6 (4번 째 파라미터는 해체되지 않음)</pre> + +<h2 id="예제">예제</h2> + +<p>이 예제에서, 첫 번째 인수는 <code>"a"</code>, 두 번째 인수는 <code>"b"</code> 로 매핑되어, 일반적인 유명 인수와 같이 사용됩니다. 반면에 3번 째 인수 <code>"manyMoreArgs"</code> 는 사용자가 포함시킨 인수를 포함하는 배열이 됩니다.</p> + +<pre class="brush: js">function myFun(a, b, ...manyMoreArgs) { + console.log("a", a); + console.log("b", b); + console.log("manyMoreArgs", manyMoreArgs); +} + +myFun("one", "two", "three", "four", "five", "six"); + +// a, one +// b, two +// manyMoreArgs, [three, four, five, six]</pre> + +<p>아래를 보면, 하나의 값만 있더라도 마지막 인수는 여전히 배열을 갖습니다.</p> + +<pre class="brush: js">// 위 예제와 동일한 함수 정의를 사용 + +myFun("one", "two", "three"); + +// a, one +// b, two +// manyMoreArgs, [three]</pre> + +<p>아래를 보면, 3번 째 인수가 제공되지 않더라도, "manyMoreArgs" 는 여전히 배열입니다(비어있긴하지만).</p> + +<pre class="brush: js">// 위 예제와 동일한 함수 정의를 사용 + +myFun("one", "two"); + +// a, one +// b, two +// manyMoreArgs, []</pre> + +<p><code>theArgs</code> 가 배열이므로, <code>length</code> 프로퍼티를 사용해 엘리먼트의 수를 얻을 수 있습니다.</p> + +<pre class="brush: js">function fun1(...theArgs) { + console.log(theArgs.length); +} + +fun1(); // 0 +fun1(5); // 1 +fun1(5, 6, 7); // 3</pre> + +<p>다음 예제에서, rest 파라미터는 첫 번째 인수 다음의 모든 인수를 배열로 모으는데 사용됩니다. 각각은 첫 번째 파라미터와 곱해져 배열로 반환됩니다.</p> + +<pre class="brush: js">function multiply(multiplier, ...theArgs) { + return theArgs.map(function(element) { + return multiplier * element; + }); +} + +var arr = multiply(2, 1, 2, 3); +console.log(arr); // [2, 4, 6]</pre> + +<p><code>Array</code> 메소드는 rest 파라미터에서 사용될 수 있지만, <code>arguments</code> 객체에서는 그렇지 않습니다.</p> + +<pre class="brush: js">function sortRestArgs(...theArgs) { + var sortedArgs = theArgs.sort(); + return sortedArgs; +} + +console.log(sortRestArgs(5, 3, 7, 1)); // 1, 3, 5, 7 + +function sortArguments() { + var sortedArgs = arguments.sort(); + return sortedArgs; // this will never happen +} + + +console.log(sortArguments(5, 3, 7, 1)); // TypeError (arguments.sort is not a function)</pre> + +<p><code>arguments</code> 객체에서 <code>Array</code> 메소드를 사용하려면, 이를 먼저 실제 배열로 변환해야합니다.</p> + +<pre class="brush: js">function sortArguments() { + var args = Array.from(arguments); + var sortedArgs = args.sort(); + return sortedArgs; +} +console.log(sortArguments(5, 3, 7, 1)); // 1, 3, 5, 7 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p> </p> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("javascript.functions.rest_parameters")}}</p> + +<h2 id="함께_보기">함께 보기</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax" title="spread operator">Spread 문법</a> (또한 ‘<code>...</code>’)</li> + <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments">Arguments 객체</a></li> + <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array">Array</a></li> + <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions" title="Functions and function scope">함수</a></li> + <li><a href="http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters">Original proposal at ecmascript.org</a></li> + <li><a href="http://javascriptweblog.wordpress.com/2011/01/18/javascripts-arguments-object-and-beyond/">JavaScript arguments object and beyond</a></li> + <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">구조 분해 할당</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/functions/set/index.html b/files/ko/web/javascript/reference/functions/set/index.html new file mode 100644 index 0000000000..248a218c37 --- /dev/null +++ b/files/ko/web/javascript/reference/functions/set/index.html @@ -0,0 +1,208 @@ +--- +title: setter +slug: Web/JavaScript/Reference/Functions/set +translation_of: Web/JavaScript/Reference/Functions/set +--- +<div>{{jsSidebar("Functions")}}</div> + +<p><strong><code>set</code></strong> syntax는 어떤 객체의 속성에 이 속성을 설정하려고 할 때 호출되는 함수를 바인드한다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">{set <em>prop</em>(<em>val</em>) { . . . }} +{set [expression](<em>val</em>) { . . . }}</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>주어진 함수를 바인드할 속성의 이름</dd> +</dl> + +<dl> + <dt><code>val</code></dt> + <dd><code>prop에 설정될 값을 가지고 있는 변수의 별명.</code></dd> + <dt>expression</dt> + <dd>ECMAScript 6부터는, 주어진 함수에 바인드 되는 속성 이름은 계산(computed)을 통해 얻을 수 있고 이것을 위한 expressions을 사용할 수 있다.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p> 자바스크립트에서, setter는 특정한 속성에 값이 변경되어 질 때마다 함수를 실행하는데 사용될 수 있다. Setter는 유사(pseudo)-property 타입을 생성하는 getter와 함께 가장 자주 사용된다. 실제 값을 가지는 property와 이 property의 setter 를 동시에 갖는 것은 불가능하다.</p> + +<p><code>set</code> 문법을 사용할 때 다음을 주의한다:</p> + +<div> +<ul> + <li>숫자혹은 문자로된 식별자를 가질 수 있다;</li> + <li>한 개의 파라메터만 가질 수 있다.(더 자세한 정보는 <a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a>를 본다);</li> + <li>오브젝트 리터럴에 동일한 property에 대한 다른 set나 데이터 항목이 올 수 없다.<br> + ( <code>{ set x(v) { }, set x(v) { } }</code> 그리고 <code>{ x: ..., set x(v) { } }</code> 는 허용되지 않는다.)</li> +</ul> +</div> + +<p>setter는 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete"><code>delete</code></a> operator를 사용하여 제거할 수 있다.</p> + +<h2 id="예">예</h2> + +<h3 id="새로운_객체의_setter를_객체의_initializer에서_정의하기">새로운 객체의 setter를 객체의 initializer에서 정의하기 </h3> + +<p>다음은 객체 o의 유사 프로러티(pseudo-property )인 <code>current를 정의한다. 이것은 값이 설정될 때, 이 값으로 로그를 갱신 한다.</code></p> + +<pre class="brush: js">var o = { + set current (str) { + this.log[this.log.length] = str; + }, + log: [] +} +</pre> + +<p><code><font face="Open Sans, Arial, sans-serif">다음 사항에 주의한다. </font>current는 정의 되지 않았고 이것에 접근하는 모든 시도는 undefined 값을 얻게될 것이다.</code></p> + +<h3 id="delete_operator로_setter를_제거하기"><code>delete</code> operator로 setter를 제거하기</h3> + +<p>만약 setter를 제거하기 원한다면, 그냥 그것을 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> 하면 된다:</p> + +<pre class="brush: js">delete o.current; +</pre> + +<h3 id="defineProperty를_사용하여_이미_존재하는_객체에_setter를_정의하기"><code>defineProperty를 사용하여 이미 존재하는 객체에 </code>setter를 정의하기</h3> + +<p>setter를 이미 존재하는 object에 나중에 언제라도 추가하기 위해서, {{jsxref("Object.defineProperty()")}}를 사용한다.</p> + +<pre class="brush: js">var o = { a:0 }; + +Object.defineProperty(o, "b", { set: function (x) { this.a = x / 2; } }); + +o.b = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property +console.log(o.a) // 5</pre> + +<h3 id="연산된(computed)_property_name_사용하기">연산된(computed) property name 사용하기</h3> + +<div class="note"> +<p><strong>Note:</strong> 계산된(Computed) properties는 실험적인 기술이고, ECMAScript 6 proposal의 부분이다. 아직 많은 브라우저가 지원하지 않는다. 이것 때문에 지원하지 않는 환경에서는 문법 오류가 발생할 것이다.</p> +</div> + +<pre class="brush: js">var expr = "foo"; + +var obj = { + baz: "bar", + set [expr](v) { this.baz = v; } +}; + +console.log(obj.baz); // "bar" +obj.foo = "baz"; // run the setter +console.log(obj.baz); // "baz" +</pre> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Added computed property names.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성CompatibilityTable">브라우저 호환성{{CompatibilityTable}}</h2> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(1)}}</td> + <td>{{ CompatGeckoDesktop("1.8.1") }}</td> + <td>{{ CompatIE(9) }}</td> + <td>9.5</td> + <td>3</td> + </tr> + <tr> + <td>Computed property names</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("1.8.1") }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Computed property names</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("34.0") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="SpiderMonkey-specific_notes">SpiderMonkey-specific notes</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8.1"> JavaScript 1.8.1</a>부터, object와 array initializers에서 properties를 설정 할 때 setter는 더이상 호출되지 않는다.</li> + <li>SpiderMonkey 38 부터, {{jsxref("Functions/rest_parameters", "rest parameter", "", 1)}} 를 갖는 setter는 ES6 specification에 따라 {{jsxref("SyntaxError")}}이다.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a></li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li> + <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Defining Getters and Setters</a> in JavaScript Guide</li> +</ul> diff --git a/files/ko/web/javascript/reference/functions/애로우_펑션/index.html b/files/ko/web/javascript/reference/functions/애로우_펑션/index.html new file mode 100644 index 0000000000..02dc0d55e4 --- /dev/null +++ b/files/ko/web/javascript/reference/functions/애로우_펑션/index.html @@ -0,0 +1,465 @@ +--- +title: 화살표 함수 +slug: Web/JavaScript/Reference/Functions/애로우_펑션 +tags: + - ECMAScript6 + - Functions + - Intermediate + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Functions/Arrow_functions +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>화살표 함수 표현(<strong>arrow function expression</strong>)은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/function" title="function expressions">function 표현</a>에 비해 구문이 짧고 자신의 <a href="/ko/docs/Web/JavaScript/Reference/Operators/this">this</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>, <a href="/ko/docs/Web/JavaScript/Reference/Operators/super">super</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a>을 바인딩 하지 않습니다. 화살표 함수는 항상 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/name" title="anonymous">익명</a>입니다. 이 함수 표현은 메소드 함수가 아닌 곳에 가장 적합합니다. 그래서 생성자로서 사용할 수 없습니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}</p> + +<h2 id="구문">구문</h2> + +<h3 id="기본_구문">기본 구문</h3> + +<pre class="syntaxbox notranslate"><strong>(</strong><em>param1</em>, <em>param2</em>, …, <em>paramN</em><strong>) => {</strong> <em>statements</em> <strong>}</strong> +<strong>(</strong><em>param1</em>, <em>param2</em>, …, <em>paramN</em><strong>) =></strong> <em>expression</em> +// 다음과 동일함: => { return expression; } + +// 매개변수가 하나뿐인 경우 괄호는 선택사항: +<em>(singleParam)</em> <strong>=> {</strong> <em>statements</em> <strong>}</strong> +<em>singleParam</em> <strong>=></strong> { <em>statements }</em> + +// 매개변수가 없는 함수는 괄호가 필요: +<strong>() => {</strong> <em>statements</em> <strong>}</strong></pre> + +<h3 id="고급_구문">고급 구문</h3> + +<pre class="syntaxbox notranslate">// 객체 리터럴 표현을 반환하기 위해서는 함수 본문(body)을 괄호 속에 넣음: +<em>params</em> => ({<em>foo: bar</em>}) + +// <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters" title="Rest parameter">나머지 매개변수</a> 및 <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters" title="Default parameter">기본 매개변수</a>를 지원함 +(<em>param1</em>, <em>param2</em>, <strong>...rest</strong>) => { <em>statements</em> } +(<em>param1</em> <strong>= defaultValue1</strong>, <em>param2</em>, …, paramN <strong>= defaultValueN</strong>) => { <em>statements</em> } + +// 매개변수 목록 내 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" title="Destructuring">구조분해할당</a>도 지원됨 +var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; +f(); // 6 +</pre> + +<p>상세한 구문 예는 <a href="http://wiki.ecmascript.org/doku.php?id=harmony:arrow_function_syntax">여기</a>에서 볼 수 있습니다.</p> + +<h2 id="설명">설명</h2> + +<p><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">Hacks 블로그 "ES6 In Depth: Arrow functions" 포스트</a> 참조.</p> + +<p>화살표 함수 도입에 영향을 준 두 요소: 보다 짧아진 함수 및 <code>바인딩하지 않은 this.</code></p> + +<h3 id="짧은_함수">짧은 함수</h3> + +<p>일부 함수 패턴에서는, 짧은 함수가 환영받습니다. 비교해 보세요:</p> + +<pre class="notranslate">var elements = [ + 'Hydrogen', + 'Helium', + 'Lithium', + 'Beryllium' +]; + +// 이 문장은 배열을 반환함: [8, 6, 7, 9] +elements.<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(function(element) { + return element.length; +}); + +// 위의 일반적인 함수 표현은 아래 화살표 함수로 쓸 수 있다. +elements.map((element) => { + return element.length; +}); // [8, 6, 7, 9] + +// 파라미터가 하나만 있을 때는 주변 괄호를 생략할 수 있다. +elements.<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(element => { + return element.length; +}); // [8, 6, 7, 9] + +// 화살표 함수의 유일한 문장이 'return'일 때 'return'과 +// 중괄호({})를 생략할 수 있다. +elements.map(element => element.length); // [8, 6, 7, 9] + +// 이 경우 length 속성만 필요하므로 destructuring 매개변수를 사용할 수 있다. +// 'length'는 우리가 얻고자 하는 속성에 해당하는 반면, +// lengthFooBArX'는 변경 가능한 변수의 이름일 뿐이므로 +// 원하는 유효한 변수명으로 변경할 수 있다. +elements.<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(({ length: lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9] + +// destructuring 파라미터 할당도 아래와 같이 작성할 수 있습니다. +// 이 예에서 정의한 객체내의 'length'에 값을 지정하지 않은 점에 주목하세요. 대신, "length" 변수의 +// 리터럴 이름은 우리가 해당 객체에서 꺼내오고 싶은 속성이름 자체로 사용됩니다. +elements.<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(({ length }) => length); // [8, 6, 7, 9] </pre> + +<h3 id="바인딩_되지_않은_this">바인딩 되지 않은 <code>this</code></h3> + +<p>화살표 함수가 나오기 전까지는, 모든 새로운 함수는, 어떻게 그 함수가 호출되는지에 따라 자신의 <code><a href="/ko/docs/Web/JavaScript/Reference/Operators/this">this</a></code> 값을 정의했습니다:</p> + +<ul> + <li>이 함수가 생성자인 경우는 새로운 객체</li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Strict_mode" title="strict mode">엄격 모드</a> 함수 호출에서는 <code>undefined</code> </li> + <li>함수가 "객체 메서드"로서 호출된 경우 문맥 객체</li> + <li>등등</li> +</ul> + +<p>이는 객체 지향 스타일로 프로그래밍할 때 별로 좋지않습니다.</p> + +<pre class="brush: js notranslate">function Person() { + // Person() 생성자는 `this`를 자신의 인스턴스로 정의. + this.age = 0; + + setInterval(function growUp() { + // 비엄격 모드에서, growUp() 함수는 `this`를 + // 전역 객체로 정의하고, 이는 Person() 생성자에 + // 정의된 `this`와 다름. + this.age++; + }, 1000); +} + +var p = new Person();</pre> + +<p>ECMAScript 3/5 에서는, 이 문제를 <code>this</code> 값을 폐쇄될 수 있는 (비전역) 변수에 할당하여 해결했습니다.</p> + +<pre class="brush: js notranslate">function Person() { + var that = this; + that.age = 0; + + setInterval(function growUp() { + // 콜백은 `that` 변수를 참조하고 이것은 값이 기대한 객체이다. + that.age++; + }, 1000); +}</pre> + +<p>이렇게 하는 대신에, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" title="bound function">바인딩한 함수</a>는 적절한 <code>this</code> 값이 <code>growUp()</code> 함수에 전달될 수 있도록 생성될 수 있습니다.</p> + +<p>화살표 함수는 자신의 <code>this</code>가 없습니다. 대신 화살표 함수를 둘러싸는 렉시컬 범위(lexical scope)의 <code>this</code>가 사용됩니다; 화살표 함수는 일반 변수 조회 규칙(normal variable lookup rules)을 따릅니다. 때문에 현재 범위에서 존재하지 않는 <code>this</code>를 찾을 때, 화살표 함수는 바로 바깥 범위에서 <code>this</code>를 찾는것으로 검색을 끝내게 됩니다.</p> + +<p>따라서 다음 코드에서 <code>setInterval</code>에 전달 된 함수 내부의 <code>this</code>는 <code>setInterval</code>을 포함한 function의 <code>this</code>와 동일한 값을 갖습니다.</p> + +<pre class="brush: js notranslate">function Person(){ + this.age = 0; + + setInterval(() => { + this.age++; // |this|는 Person 객체를 참조 + }, 1000); +} + +var p = new Person();</pre> + +<h4 id="엄격_모드와의_관계">엄격 모드와의 관계</h4> + +<p><code>this</code>가 렉시컬(lexical, 정적)임을 감안하면, <code>this</code>에 관한 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode" title="strict mode">엄격 모드</a> 규칙은 그냥 무시됩니다.</p> + +<pre class="notranslate">var f = () => { 'use strict'; return this; }; +f() === window; // 혹은 전역객체</pre> + +<p>엄격 모드의 나머지 규칙은 평소대로 적용합니다.</p> + +<p><strong>CORRECTION: START</strong></p> + +<p>NOTE: the previous statement seems false.</p> + +<p>Strict mode should prevent creating global variables when assigning to an undeclared identifier in a function.</p> + +<p>This code sample using Chrome 81 demonstrates that arrow functions allow the creation of global variables in such situations (both for a concise body and for a normal function body):</p> + +<pre class="notranslate">> f1 = x => { y = x; console.log(`x: ${x}, y: ${y}`); return x + 1; } +x => { y = x; console.log(`x: ${x}, y: ${y}`); return x + 1; } + +> y +VM51587:1 Uncaught ReferenceError: y is not defined + at <anonymous>:1:1 +(anonymous) @ VM51587:1 + +> f1(3) +VM51533:1 x: 3, y: 3 +4 + +> y +3 + +> f2 = x => { 'use strict'; z = x; console.log(`x: ${x}, z: ${z}`); return x + 1; } +x => { 'use strict'; z = x; console.log(`x: ${x}, z: ${z}`); return x + 1; } + +> z +VM51757:1 Uncaught ReferenceError: z is not defined + at <anonymous>:1:1 +(anonymous) @ VM51757:1 + +> f2(4) +VM51712:1 Uncaught ReferenceError: z is not defined + at f2 (<anonymous>:1:29) + at <anonymous>:1:1 +f2 @ VM51712:1 +(anonymous) @ VM51800:1 + +> f3 = x => (z1 = x + 1) +x => (z1 = x + 1) + +> z1 +VM51891:1 Uncaught ReferenceError: z1 is not defined + at <anonymous>:1:1 +(anonymous) @ VM51891:1 + +> f3(10) +11 + +> z1 +11 +</pre> + +<p>f2 illustrates that when explicitly setting the arrow function to apply strict mode, it does throw an error when attempting to assign an undeclared variable.</p> + +<p>https://www.ecma-international.org/ecma-262/10.0/index.html#sec-strict-mode-code</p> + +<p>https://www.ecma-international.org/ecma-262/10.0/index.html#sec-arrow-function-definitions-runtime-semantics-evaluation</p> + +<p><strong>CORRECTION: END</strong></p> + +<h4 id="call_또는_apply를_통한_피호출">call 또는 apply를 통한 피호출</h4> + +<p>화살표 함수에서는 <code>this가 </code> 바인딩되지 않았기 때문에, <code>call()</code> 또는 <code>apply()</code> 메서드는 인자만 전달 할 수 있습니다. this는 무시됩니다.</p> + +<pre class="brush: js notranslate">var adder = { + base : 1, + + add : function(a) { + var f = v => v + this.base; + return f(a); + }, + + addThruCall: function(a) { + var f = v => v + this.base; + var b = { + base : 2 + }; + + return f.call(b, a); + } +}; + +console.log(adder.add(1)); // 이는 2가 콘솔에 출력될 것임 +console.log(adder.addThruCall(1)); // 이도 2가 콘솔에 출력될 것임</pre> + +<h3 id="바인딩_되지_않은_arguments">바인딩 되지 않은 <code>arguments</code></h3> + +<p>화살표 함수는 <a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code> 객체</a>를 바인드 하지 않습니다. 때문에, <code>arguments는</code> 그저 둘러싸는 범위(scope) 내 이름에 대한 참조입니다.</p> + +<pre class="brush: js notranslate"><code>var arguments = [1, 2, 3]; +var arr = () => arguments[0]; + +arr(); // 1 + +function foo(n) { + var f = () => arguments[0] + n; // foo's implicit arguments binding. arguments[0] is n + return f(); +} + +foo(1); // 2</code></pre> + +<p>화살표 함수는 자신의 <code>arguments</code> 객체가 없지만, 대부분의 경우에 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters" title="rest parameters">나머지 매개변수</a>가 좋은 대안입니다:</p> + +<pre class="brush: js notranslate">function foo(n) { + var f = (...args) => args[0] + n; + return f(2); +} + +foo(1); // 3</pre> + +<h3 id="메소드로_사용되는_화살표_함수">메소드로 사용되는 화살표 함수</h3> + +<p>이야기 했듯이, 화살표 함수 표현은 메소드 함수가 아닌 형태로 사용 할 수 있습니다. 메소드로 사용하려고 한면 무슨일이 발생하는지 봅시다.</p> + +<pre class="brush: js notranslate"><code>'use strict'; + +var obj = { // does not create a new scope + i: 10, + b: () => console.log(this.i, this), + c: function() { + console.log( this.i, this) + } +} +obj.b(); // prints undefined, Window {...} (or the global object) +obj.c(); // prints 10, Object {...}</code> +</pre> + +<p>화살표 함수는 자신의 this를 가지고("bind" 바인드)있지 않습니다.{{jsxref("Object.defineProperty()")}}</p> + +<pre class="brush: js notranslate"><code>'use strict'; + +var obj = { + a: 10 +}; + +Object.defineProperty(obj, 'b', { + get: () => { + console.log(this.a, typeof this.a, this); // undefined 'undefined' Window {...} (or the global object) + return this.a + 10; // represents global object 'Window', therefore 'this.a' returns 'undefined' + } +});</code></pre> + +<h3 id="new_연산자_사용"><code>new</code> 연산자 사용</h3> + +<p>화살표 함수는 생성자로서 사용될 수 없으며 <code>new</code>와 함께 사용하면 오류가 발생합니다.</p> + +<pre class="brush: js notranslate"><code>var Foo = () => {}; +var foo = new Foo(); // TypeError: Foo is not a constructor</code></pre> + +<h3 id="prototype_속성_사용"><code>prototype</code> 속성 사용</h3> + +<p>화살표 함수는 <code>prototype</code> 속성이 없습니다.</p> + +<pre class="brush: js notranslate"><code>var Foo = () => {}; +console.log(Foo.prototype); // undefined</code></pre> + +<h3 id="yield_키워드_사용"><code>yield</code> 키워드 사용</h3> + +<p><code><a href="/ko/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code> 키워드는 화살표 함수의 본문(그 안에 더 중첩된 함수 내에서 허용한 경우를 제외하고)에 사용될 수 없습니다. 그 결과, 화살표 함수는 생성기(generator)로서 사용될 수 없습니다.</p> + +<h3 id="함수_본문">함수 본문</h3> + +<p>화살표 함수는 "concise 바디"든 보통 "block 바디"든 하나를 가질 수 있습니다.</p> + +<div class="note"> +<p>concise바디는 중괄호'{}'로 묶이지않은 한줄짜리 바디이고 block바디는 중괄호로 묶인 바디입니다. 보통 여러줄 쓸때 block바디를 사용합니다.</p> +</div> + +<p>block바디는 자동으로 값을 반환하지 않습니다. <code>return</code>을 사용해서 값을 반환해야 합니다.</p> + +<pre class="brush: js notranslate">var func = x => x * x; // concise 바디, 생략된 "return" 여기서는 x * x +var func = (x, y) => { return x + y; }; // block 바디, "return"이 필요 +</pre> + +<h3 id="객체_리터럴_반환">객체 리터럴 반환</h3> + +<p>간결한 구문 <code>params => {object:literal}</code>을 사용한 객체 리터럴 반환은 예상대로 작동하지 않음을 명심하세요:</p> + +<pre class="brush: js notranslate">var func = () => { foo: 1 }; +// func() 호출은 undefined를 반환! + +var func = () => { foo: function() {} }; +// SyntaxError: function 문은 이름이 필요함</pre> + +<p>이는 중괄호({}) 안 코드가 일련의 문(즉 <code>foo</code>는 라벨처럼 취급됩니다, 객체 리터럴 내 키가 아니라)으로 파싱(parse, 구문 분석)되기 때문입니다.</p> + +<p>객체 리터럴를 괄호로 감싸는 것을 기억하세요:</p> + +<pre class="brush: js notranslate">var func = () => ({ foo: 1 });</pre> + +<h3 id="줄바꿈">줄바꿈</h3> + +<p>화살표 함수는 파라메터와 화살표 사이에 개행 문자를 포함 할 수 없습니다.</p> + +<pre class="brush: js notranslate"><code>var func = (a, b, c) + => 1; +// SyntaxError: expected expression, got '=>'</code></pre> + +<p>하지만, 보기 좋은 코드를 유지하고 싶다면, 아래에 보는 것처럼 괄호나 개행을 둠으로써 이를 수정할 수 있습니다.</p> + +<pre class="notranslate">var func = (a, b, c) => + 1; + +var func = (a, b, c) => ( + 1 +); + +var func = (a, b, c) => { + return 1 +}; + +<code>var func = ( + a, + b, + c +) => 1; + +// SyntaxError가 발생하지 않습니다.</code></pre> + +<h3 id="파싱순서">파싱순서</h3> + +<p>화살표 함수 내의 화살표는 연산자가 아닙니다. 그러나 화살표 함수는 평범한 함수와 비교했을 때 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">operator precedence</a>와 다르게 반응하는 특별한 파싱룰을 가지고 있습니다.</p> + +<pre class="brush: js notranslate"><code>let callback; + +callback = callback || function() {}; // ok + +callback = callback || () => {}; +// SyntaxError: invalid arrow-function arguments + +callback = callback || (() => {}); // ok</code> +</pre> + +<h2 id="다른_예">다른 예</h2> + +<h3 id="기본_사용법">기본 사용법</h3> + +<pre class="brush: js notranslate"><code>// </code> empty 화살표 함수는 undefined를 반환 <code> +let empty = () => {}; + +(() => 'foobar')(); +// "foobar" 반환 +// (this is an Immediately Invoked Function Expression + +var simple = a => a > 15 ? 15 : a; +simple(16); // 15 +simple(10); // 10 + +let max = (a, b) => a > b ? a : b; + +// Easy array filtering, mapping, ... + +var arr = [5, 6, 13, 0, 1, 18, 23]; + +var sum = arr.reduce((a, b) => a + b); +// 66 + +var even = arr.filter(v => v % 2 == 0); +// [6, 0, 18] + +var double = arr.map(v => v * 2); +// [10, 12, 26, 0, 2, 36, 46] + +// 더 간결한 promise 체인 +promise.then(a => { + // ... +}).then(b => { + // ... +}); + +// 매개변수가 없는 경우에도 더 읽기 쉬움 +setTimeout( () => { + console.log('I happen sooner'); + setTimeout( () => { + // deeper code + console.log('I happen later'); + }, 1); +}, 1);</code></pre> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden"> +<p><span style="">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out </span><a href="https://github.com/mdn/browser-compat-data" style="">https://github.com/mdn/browser-compat-data</a><span style=""> and send us a pull request.</span></p> +</div> + +<p>{{Compat("javascript.functions.arrow_functions")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">Hacks 블로그 "ES6 In Depth: Arrow functions" 포스트</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/aggregateerror/index.html b/files/ko/web/javascript/reference/global_objects/aggregateerror/index.html new file mode 100644 index 0000000000..b83db1139e --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/aggregateerror/index.html @@ -0,0 +1,87 @@ +--- +title: AggregateError +slug: Web/JavaScript/Reference/Global_Objects/AggregateError +tags: + - AggregateError + - 실험적 + - 인터페이스 + - 자바스크립트 + - 클래스 +translation_of: Web/JavaScript/Reference/Global_Objects/AggregateError +--- +<div>{{JSRef}}</div> + +<p><code><strong>AggregateError</strong></code> 객체는 다수의 에러가 한 에러로 랩핑되어야 할 때의 오류를 나타냅니다. 한 작업에서 여러개의 오류가 보고될 때 발생하는데, 대표적으로 {{JSxRef("Promise.any()")}}에 전달된 모든 promise들이 거부되었을 때 발생합니다.</p> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{jsxref("Global_Objects/AggregateError/AggregateError", "AggregateError()")}}</dt> + <dd>새로운 <code>AggregateError</code> 객체를 생성합니다.</dd> +</dl> + +<h2 id="Instance_properties">Instance properties</h2> + +<dl> + <dt>{{JSxRef("Error.prototype.message", "AggregateError.prototype.message")}}</dt> + <dd>에러 메시지, 기본값 <code>""</code>.</dd> + <dt>{{JSxRef("Error.prototype.name", "AggregateError.prototype.name")}}</dt> + <dd>에러 이름, 기본값 <code>AggregateError</code>.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="AggregateError_다루기">AggregateError 다루기</h3> + +<pre class="brush: js; notranslate">Promise.any([ + Promise.reject(new Error("some error")), +]).catch(e => { + console.log(e instanceof AggregateError); // true + console.log(e.message); // "All Promises rejected" + console.log(e.name); // "AggregateError" + console.log(e.errors); // [ Error: "some error" ] +}); +</pre> + +<h3 id="AggregateError_발생시키기">AggregateError 발생시키기</h3> + +<pre class="brush: js; notranslate">try { + throw new AggregateError([ + new Error("some error"), + ], 'Hello'); +} catch (e) { + console.log(e instanceof AggregateError); // true + console.log(e.message); // "Hello" + console.log(e.name); // "AggregateError" + console.log(e.errors); // [ Error: "some error" ] +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Promise.any', '#sec-aggregate-error-objects', 'AggregateError')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.AggregateError")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{JSxRef("Error")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/@@iterator/index.html b/files/ko/web/javascript/reference/global_objects/array/@@iterator/index.html new file mode 100644 index 0000000000..89e08aa41e --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/@@iterator/index.html @@ -0,0 +1,84 @@ +--- +title: 'Array.prototype[@@iterator]()' +slug: Web/JavaScript/Reference/Global_Objects/Array/@@iterator +tags: + - Array + - ECMAScript 2015 + - Iterator + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@iterator +--- +<div>{{JSRef}}</div> + +<p> <code><strong>@@iterator</strong></code> 속성의 초기 값은 {{jsxref("Array.prototype.values()", "values()")}} 속성의 초기 값과 같은 함수 객체입니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code>arr[Symbol.iterator]()</code></pre> + +<h3 id="반환_값">반환 값</h3> + +<p>{{jsxref("Array.prototype.values()", "values()")}} 반복기가 반환하는 초기 값. <code>arr[Symbol.iterator]</code>의 기본값은 {{jsxref("Array.prototype.values()", "values()")}} 입니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="for…of_반복문을_이용한_순회"><code>for…of</code> 반복문을 이용한 순회</h3> + +<pre class="brush: js"><code>var arr = ['w', 'y', 'k', 'o', 'p']; +var eArr = arr[Symbol.iterator](); +// your browser must support for..of loop +// and let-scoped variables in for loops +// const and var could also be used +for (let letter of eArr) { + console.log(letter); +}</code></pre> + +<h3 id="다른_방법">다른 방법</h3> + +<pre class="brush: js"><code>var arr = ['w', 'y', 'k', 'o', 'p']; +var eArr = arr[Symbol.iterator](); +console.log(eArr.next().value); // w +console.log(eArr.next().value); // y +console.log(eArr.next().value); // k +console.log(eArr.next().value); // o +console.log(eArr.next().value); // p</code></pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("javascript.builtins.Array.@@iterator")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.values()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/@@species/index.html b/files/ko/web/javascript/reference/global_objects/array/@@species/index.html new file mode 100644 index 0000000000..7b1bda0ca6 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/@@species/index.html @@ -0,0 +1,75 @@ +--- +title: 'get Array[@@species]' +slug: Web/JavaScript/Reference/Global_Objects/Array/@@species +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@species +--- +<div>{{JSRef}}</div> + +<p><strong><code>Array[@@species]</code> </strong>접근자 속성은 <code>Array</code> 생성자를 반환합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Array[Symbol.species] +</pre> + +<h3 id="반환_값">반환 값</h3> + +<p>{{jsxref("Array")}} 생성자.</p> + +<h2 id="설명">설명</h2> + +<p><code>species</code> 접근자 속성은 <code>Array</code> 객체의 기본 생성자를 반환합니다. 서브클래스 생성자는 생성자 할당을 변경하기 위해 이 속성을 재정의할 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<p><code>species</code> 속성은 <code>Array</code> 객체의 <code>Array</code> 생성자를 반환합니다.</p> + +<pre class="brush: js">Array[Symbol.species]; // function Array()</pre> + +<p>파생 콜렉션 개체(예시: 사용자 설정 배열인 <code>MyArray</code>)에서, <code>MyArray</code> 종<sup>species</sup>은 <code>MyArray</code> 생성자입니다. 그러나 이 속성을 재정의하면 파생 클래스 메서드에서 상위 <code>Array</code> 객체를 반환할 수 있습니다.</p> + +<pre class="brush: js">class MyArray extends Array { + // MyArray species를 부모 Array 생성자로 재설정 + static get [Symbol.species]() { return Array; } +}</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-get-array-@@species', 'get Array [ @@species ]')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-get-array-@@species', 'get Array [ @@species ]')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Array.@@species")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Symbol.species")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/@@unscopables/index.html b/files/ko/web/javascript/reference/global_objects/array/@@unscopables/index.html new file mode 100644 index 0000000000..1ac7f0b29b --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/@@unscopables/index.html @@ -0,0 +1,72 @@ +--- +title: 'Array.prototype[@@unscopables]' +slug: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Property + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables +--- +<div>{{JSRef}}</div> + +<p><strong><code>@@unscopable</code></strong> 기호 속성은 ES2015 이전 ECMAScript 표준에 포함되지 않은 속성 이름을 포함합니다. 해당 속성들은 {{jsxref("Statements/with", "with")}} 바인딩에서 제외됩니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>arr</var>[Symbol.unscopables]</pre> + +<h2 id="설명">설명</h2> + +<p>with 바인딩에서 제외되는 배열의 기본 속성은 copyWithin, entries, fill, find, findIndex, includes, keys, values입니다.</p> + +<p>자신의 객체에 대해 <code>unscopables</code>를 설정하는 방법은 {{jsxref("Symbol.unscopables")}}를 참고하세요.</p> + +<p>{{js_property_attributes (0,0,1)}}</p> + +<h2 id="예제">예제</h2> + +<p>아래 코드는 ES5 이하에서 잘 작동합니다. 그러나 ECMAScript 2015 이후 {{jsxref("Array.prototype.keys()")}} 메서드가 도입되었습니다. 이는 <code>with</code> 내부에서 "keys"가 변수가 아니라 메서드임을 의미합니다. 여기서 <code>Array.prototype[@@unscopables]</code>가 개입하여 일부 배열 메서드가 <code>with</code> 범위에 묶이는 일을 방지합니다.</p> + +<pre class="brush: js">var keys = []; + +with (Array.prototype) { + keys.push("something"); +} + +Object.keys(Array.prototype[Symbol.unscopables]); +// ["copyWithin", "entries", "fill", "find", "findIndex", +// "includes", "keys", "values"]</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.Array.@@unscopables")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Symbol.unscopables")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/array/index.html b/files/ko/web/javascript/reference/global_objects/array/array/index.html new file mode 100644 index 0000000000..3f3d60a4ec --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/array/index.html @@ -0,0 +1,86 @@ +--- +title: Array() 생성자 +slug: Web/JavaScript/Reference/Global_Objects/Array/Array +tags: + - Array + - Constructor + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/Array +--- +<div>{{JSRef}}</div> + +<p><strong><code>Array()</code></strong> 생성자는 새로운 {{jsxref("Array")}} 객체를 생성할 때 사용합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>] + +new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]]) +new Array(<var>arrayLength</var>)</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>JavaScript 배열을 초기화할 때 채워넣을 요소. 단, 항목이 하나 뿐이며 그 항목의 자료형이 숫자일 경우 아래의 <code>arrayLength</code> 매개변수로 간주합니다.</dd> + <dt><code>arrayLength</code></dt> + <dd><code>Array</code> 생성자에 제공한 유일한 매개변수가 0에서 2<sup>32</sup>-1 이하의 정수인 경우, <code>length</code> 속성이 해당 값인 새로운 JavaScript 배열을 생성합니다. (<strong>참고:</strong> 이렇게 생성한 배열은 <code>arrayLength</code> 만큼의 빈 슬롯을 가지는 것으로, 실제 {{jsxref("undefined")}}를 채우는 것이 아닙니다.) 값이 범위 밖이거나 정수가 아닌 경우 {{jsxref("RangeError")}}가 발생합니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<h3 id="배열_리터럴_표기법">배열 리터럴 표기법</h3> + +<p>배열은 <a href="/ko/docs/Web/JavaScript/Reference/Lexical_grammar#배열_리터럴">리터럴 표기법</a>으로 생성할 수도 있습니다.</p> + +<pre class="brush: js">let fruits = ['사과', '바나나'] + +console.log(fruits.length) // 2 +console.log(fruits[0]) // "사과" +</pre> + +<h3 id="단일_매개변수_배열_생성자">단일 매개변수 배열 생성자</h3> + +<p>배열을 생성자와 하나의 숫자 매개변수로 생성할 수 있습니다. 그 결과는 <code>length</code>가 매개변수고, 길이만큼의 빈 슬롯을 가진 배열입니다.</p> + +<pre class="brush: js">let fruits = new Array(2) + +console.log(fruits.length) // 2 +console.log(fruits[0]) // undefined +</pre> + +<h3 id="복수_매개변수_배열_생성자">복수 매개변수 배열 생성자</h3> + +<p>생성자에 두 개 이상의 매개변수를 제공할 경우, 매개변수를 원소로 하는 새로운 배열을 생성합니다.</p> + +<pre class="brush: js">let fruits = new Array('사과', '바나나') + +console.log(fruits.length) // 2 +console.log(fruits[0]) // "사과" +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-constructor', 'Array constructor')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Array.Array")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array")}} 클래스</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/concat/index.html b/files/ko/web/javascript/reference/global_objects/array/concat/index.html new file mode 100644 index 0000000000..b35f040632 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/concat/index.html @@ -0,0 +1,138 @@ +--- +title: Array.prototype.concat() +slug: Web/JavaScript/Reference/Global_Objects/Array/concat +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat +--- +<div>{{JSRef}}</div> + +<p><code><strong>concat()</strong></code> 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다. </p> + +<ul> + <li>기존배열을 변경하지 않습니다. </li> + <li> 추가된 새로운 배열을 반환합니다.</li> +</ul> + +<div>{{EmbedInteractiveExample("pages/js/array-concat.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>array</var>.concat([value1[, value2[, ...[, <var>valueN</var>]]]])</pre> + +<h3 id="매개변수">매개변수</h3> + +<ul> + <li>배열 또는 값 </li> + <li>만약 value1 ~ valueN 인자를 생략하면 기존배열의 얕은 복사본을 반환.</li> +</ul> + +<dl> + <dt><code>valueN</code> {{optional_inline}}</dt> + <dd>자세한 내용은 아래 설명을 참고하세요.</dd> +</dl> + +<h3 id="반환값">반환값</h3> + +<p>새로운 {{jsxref("Array")}} 객체.</p> + +<h2 id="설명">설명</h2> + +<p><code>concat</code>은 메서드를 호출한 배열 뒤에 각 인수를 순서대로 붙여 새로운 배열을 만듭니다. 인수가 배열이면 그 구성요소가 순서대로 붙고, 배열이 아니면 인수 자체가 붙습니다. 중첩 배열 내부로 재귀하지 않습니다.</p> + +<p><code>concat</code>은 <code>this</code>나 인수로 넘겨진 배열의 내용을 바꾸지 않고, 대신 주어진 배열을 합친 뒤 그 얕은 사본을 반환합니다. 새 배열에는 원본 배열의 요소를 다음과 같은 방법으로 복사합니다.</p> + +<ul> + <li>실제 객체가 아닌 객체 참조: <code>concat</code>은 새 배열에 참조를 복사합니다. 원본 배열과 새 배열에서 같은 객체를 가리키게 됩니다. 즉, 참조하는 객체를 수정하면 그 내용이 새 배열과 원본 배열 둘 다에서 나타납니다.</li> + <li>문자열, 숫자, 불리언 등 자료형({{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}} 객체 아님): <code>concat</code>은 새 배열에 문자열과 수의 값을 복사합니다.</li> +</ul> + +<div class="note"> +<p><strong>참고:</strong> 배열이나 값을 이어붙여도 원본은 변하지 않으며, 새로운 배열이나 원본 배열을 조작해도 서로 영향을 받지 않습니다.</p> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="배열_두_개_이어붙이기">배열 두 개 이어붙이기</h3> + +<p>다음 예제는 두 개의 배열을 이어붙입니다.</p> + +<pre class="brush: js">const alpha = ['a', 'b', 'c']; +const numeric = [1, 2, 3]; + +alpha.concat(numeric); +// 결과: ['a', 'b', 'c', 1, 2, 3] +</pre> + +<h3 id="배열_세_개_이어붙이기">배열 세 개 이어붙이기</h3> + +<p>다음 예제는 세 개의 배열을 이어붙입니다.</p> + +<pre class="brush: js">const num1 = [1, 2, 3]; +const num2 = [4, 5, 6]; +const num3 = [7, 8, 9]; + +num1.concat(num2, num3); +// 결과: [1, 2, 3, 4, 5, 6, 7, 8, 9] +</pre> + +<h3 id="배열에_값_이어붙이기">배열에 값 이어붙이기</h3> + +<p>다음 코드는 배열에 세 개의 값을 이어붙입니다.</p> + +<pre class="brush: js">const alpha = ['a', 'b', 'c']; + +alpha.concat(1, [2, 3]); +// 결과: ['a', 'b', 'c', 1, 2, 3] +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">표준</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>최초 정의. JavaScript 1.2에서 구현됨.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("javascript.builtins.Array.concat")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} — 배열의 뒤에 요소 추가/제거</li> + <li>{{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} — 배열의 앞에 요소 추가/제거</li> + <li>{{jsxref("Array.splice", "splice")}} — 배열의 특정 위치에 요소 추가/제거</li> + <li>{{jsxref("String.prototype.concat()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/copywithin/index.html b/files/ko/web/javascript/reference/global_objects/array/copywithin/index.html new file mode 100644 index 0000000000..7d6c2cdf8b --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/copywithin/index.html @@ -0,0 +1,183 @@ +--- +title: Array.prototype.copyWithin() +slug: Web/JavaScript/Reference/Global_Objects/Array/copyWithin +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Method + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/copyWithin +--- +<div>{{JSRef}}</div> + +<p><strong><code>copyWithin()</code></strong> 메서드는 배열의 일부를 얕게 복사한 뒤, 동일한 배열의 다른 위치에 덮어쓰고 그 배열을 반환합니다. 이 때, 크기(배열의 길이)를 수정하지 않고 반환합니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-copywithin.html")}}</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>arr</var>.copyWithin(<var>target[, start[, end]]</var>) +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>target</code></dt> + <dd>복사한 시퀀스(값)를 넣을 위치를 가리키는 0 기반 인덱스. 음수를 지정하면 인덱스를 배열의 끝에서부터 계산합니다.<br> + <br> + <code>target</code>이 <code>arr.length</code>보다 크거나 같으면 아무것도 복사하지 않습니다. <code>target</code>이 <code>start</code> 이후라면 복사한 시퀀스를 <code>arr.length</code>에 맞춰 자릅니다.</dd> + <dt><code>start</code> {{optional_inline}}</dt> + <dd>복사를 시작할 위치를 가리키는 0 기반 인덱스. 음수를 지정하면 인덱스를 배열의 끝에서부터 계산합니다.<br> + <br> + 기본값은 0으로, <code>start</code>를 지정하지 않으면 배열의 처음부터 복사합니다.</dd> + <dt><code>end</code> {{optional_inline}}</dt> + <dd>복사를 끝낼 위치를 가리키는 0 기반 인덱스. <code>copyWithin</code>은 <code>end</code> 인덱스 이전까지 복사하므로 <code>end</code> 인덱스가 가리키는 요소는 제외합니다. 음수를 지정하면 인덱스를 배열의 끝에서부터 계산합니다.<br> + <br> + 기본값은 <code>arr.length</code>로, <code>end</code>를 지정하지 않으면 배열의 끝까지 복사합니다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>수정한 배열.</p> + +<h2 id="설명">설명</h2> + +<p><code>copyWithin</code>은 C와 C++의 <code>memmove</code>처럼 작동하고, 복사와 대입이 하나의 연산에서 이루어지므로 {{jsxref("Array")}}의 데이터를 이동할 때 사용할 수 있는 고성능 메서드입니다. {{jsxref("TypedArray.prototype.copyWithin()", "TypedArray")}}의 동명 메서드에서 이 특징이 두드러집니다. 붙여넣은 시퀀스의 위치가 복사한 범위와 겹치더라도 최종 결과는 원본 배열에서 복사한 것과 같습니다.</p> + +<p><code>copyWithin</code> 함수는 제네릭 함수로, <code>this</code> 값이 {{jsxref("Array")}} 객체일 필요는 없습니다.</p> + +<p><code>copyWithin</code> 메서드는 변경자 메서드로, <code>this</code>의 길이는 바꾸지 않지만 내용을 바꾸며 필요하다면 새로운 속성을 생성합니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">[1, 2, 3, 4, 5].copyWithin(-2); +// [1, 2, 3, 1, 2] + +[1, 2, 3, 4, 5].copyWithin(0, 3); +// [4, 5, 3, 4, 5] + +[1, 2, 3, 4, 5].copyWithin(0, 3, 4); +// [4, 2, 3, 4, 5] + +[1, 2, 3, 4, 5].copyWithin(-2, -3, -1); +// [1, 2, 3, 3, 4] + +[].copyWithin.call({length: 5, 3: 1}, 0, 3); +// {0: 1, 3: 1, length: 5} + +// ES2015 TypedArray는 Array의 하위 클래스 +var i32a = new Int32Array([1, 2, 3, 4, 5]); + +i32a.copyWithin(0, 2); +// Int32Array [3, 4, 5, 4, 5] + +// 아직 ES2015를 사용할 수 없는 환경에서 +[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4); +// Int32Array [4, 2, 3, 4, 5] +</pre> + +<h2 id="폴리필">폴리필</h2> + +<pre><code>if (!Array.prototype.copyWithin) { + Array.prototype.copyWithin = function(target, start/*, end*/) { + // Steps 1-2. + if (this == null) { + throw new TypeError('this is null or not defined'); + } + + var O = Object(this); + + // Steps 3-5. + var len = O.length >>> 0; + + // Steps 6-8. + var relativeTarget = target >> 0; + + var to = relativeTarget < 0 ? + Math.max(len + relativeTarget, 0) : + Math.min(relativeTarget, len); + + // Steps 9-11. + var relativeStart = start >> 0; + + var from = relativeStart < 0 ? + Math.max(len + relativeStart, 0) : + Math.min(relativeStart, len); + + // Steps 12-14. + var end = arguments[2]; + var relativeEnd = end === undefined ? len : end >> 0; + + var final = relativeEnd < 0 ? + Math.max(len + relativeEnd, 0) : + Math.min(relativeEnd, len); + + // Step 15. + var count = Math.min(final - from, len - to); + + // Steps 16-17. + var direction = 1; + + if (from < to && to < (from + count)) { + direction = -1; + from += count - 1; + to += count - 1; + } + + // Step 18. + while (count > 0) { + if (from in O) { + O[to] = O[from]; + } else { + delete O[to]; + } + + from += direction; + to += direction; + count--; + } + + // Step 19. + return O; + }; +}</code></pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES7', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td> + <td>{{Spec2('ES7')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("javascript.builtins.Array.copyWithin")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/entries/index.html b/files/ko/web/javascript/reference/global_objects/array/entries/index.html new file mode 100644 index 0000000000..316886c261 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/entries/index.html @@ -0,0 +1,89 @@ +--- +title: Array.prototype.entries() +slug: Web/JavaScript/Reference/Global_Objects/Array/entries +tags: + - Array + - ECMAScript 2015 + - Iterator + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries +--- +<div>{{JSRef}}</div> + +<p><code><strong>entries()</strong></code> 메서드는 배열의 각 인덱스에 대한 키/값 쌍을 가지는 새로운 <code><strong>Array Iterator</strong></code><strong> </strong>객체를 반환합니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-entries.html")}}</p> + +<div class="hidden"> +<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate"><code><var>arr</var>.entries()</code> +</pre> + +<h3 id="반환_값">반환 값</h3> + +<p>{{jsxref("Array")}} 반복자 인스턴스 객체.</p> + +<h2 id="예시">예시</h2> + +<h3 id="인덱스와_요소_이터레이팅">인덱스와 요소 이터레이팅</h3> + +<pre class="notranslate">const a = ['a', 'b', 'c']; + +for (const [index, element] of a.entries()) + console.log(index, element); + +// 0 'a' +// 1 'b' +// 2 'c'</pre> + +<h3 id="for…of_루프_사용"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for…of</a> 루프 사용</h3> + +<pre class="brush:js notranslate">var a = ['a', 'b', 'c']; +var iterator = a.entries(); + +for (let e of iterator) { + console.log(e); +} +// [0, 'a'] +// [1, 'b'] +// [2, 'c'] +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성"><span>브라우저 호환성</span></h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.entries")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.values()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/every/index.html b/files/ko/web/javascript/reference/global_objects/array/every/index.html new file mode 100644 index 0000000000..827b81e760 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/every/index.html @@ -0,0 +1,191 @@ +--- +title: Array.prototype.every() +slug: Web/JavaScript/Reference/Global_Objects/Array/every +tags: + - Array + - ECMAScript 5 + - JavaScript + - Method + - Prototype + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/every +--- +<div>{{JSRef}}</div> + +<p><code><strong>every()</strong></code> 메서드는 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트합니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 빈 배열에서 호출하면 무조건 <code>true</code>를 반환합니다.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/array-every.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>arr</var>.every(<var>callback</var>[, <var>thisArg</var>])</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>각 요소를 시험할 함수. 다음 세 가지 인수를 받습니다. + <dl> + <dt><code>currentValue</code></dt> + <dd>처리할 현재 요소.</dd> + <dt><code>index</code> {{Optional_inline}}</dt> + <dd>처리할 현재 요소의 인덱스.</dd> + <dt><code>array</code> {{Optional_inline}}</dt> + <dd><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">every</span></font>를 호출한 배열.</dd> + </dl> + </dd> + <dt><code>thisArg</code> {{Optional_inline}}</dt> + <dd><code>callback</code>을 실행할 때 <code>this</code>로 사용하는 값.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p><code>callback</code>이 모든 배열 요소에 대해 참({{Glossary("truthy")}})인 값을 반환하는 경우 <code><strong>true</strong></code>, 그 외엔 <code><strong>false</strong></code>.</p> + +<h2 id="설명">설명</h2> + +<p><code>every</code>는 <code>callback</code>이 {{glossary("falsy", "거짓")}}을 반환하는 요소를 찾을 때까지 배열에 있는 각 요소에 대해 한 번씩 <code>callback</code> 함수를 실행합니다. 해당하는 요소를 발견한 경우 <code>every</code>는 즉시 <code>false</code>를 반환합니다. 그렇지 않으면, 즉 모든 값에서 참을 반환하면 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">true</span></font>를 반환합니다. 할당한 값이 있는 배열의 인덱스에서만 <code>callback</code>을 호출합니다. 삭제했거나 값을 할당한 적이 없는 인덱스에서는 호출하지 않습니다.</p> + +<p><code>callback</code>은 요소의 값, 해당 요소의 인덱스 및 순회하고 있는 배열 세 가지 인수와 함께 호출됩니다.</p> + +<p><code>thisArg</code> 매개변수를 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">every</span></font>에 제공한 경우 <code>callback</code>의 <code>this</code>로 사용됩니다. 그 외엔 {{jsxref("undefined")}}값을 사용합니다. 최종적으로 <code>callback</code>이 볼 수 있는 <code>this</code>의 값은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/this">함수가 볼 수 있는 <code>this</code>를 결정하는 평소 규칙</a>을 따릅니다.</p> + +<p><code>every</code>는 호출한 배열을 변형하지 않습니다.</p> + +<p><code>every</code>가 처리하는 요소의 범위는 <code>callback</code>의 첫 호출 전에 설정됩니다. <code>every</code> 호출 이후로 배열에 추가하는 요소는 <code>callback</code>이 방문하지 않습니다. 배열에 원래 있었지만 아직 방문하지 않은 요소가 <code>callback</code>에 의해 변경된 경우, 그 인덱스를 방문하는 시점의 값을 사용합니다. 삭제한 요소는 방문하지 않습니다.</p> + +<p><code>every</code>는 (이산)수학에서 전칭(∀) 정량자<sup>quantifier</sup>(한정자)처럼 행동합니다. 특히, 빈 배열에 대해서는 <code>true</code>를 반환합니다. (이는 <a href="http://en.wikipedia.org/wiki/Empty_set#Common_problems">공집합</a>의 모든 요소가 어떠한 주어진 조건도 만족하는 <a href="http://en.wikipedia.org/wiki/Vacuous_truth#Vacuous_truths_in_mathematics" title="vacuously true">공허한 참</a>입니다.)</p> + +<h2 id="예제">예제</h2> + +<h3 id="모든_배열_요소의_크기_테스트">모든 배열 요소의 크기 테스트</h3> + +<p>다음 예는 배열의 모든 요소가 10보다 더 큰지 테스트합니다.</p> + +<pre class="brush: js">function isBigEnough(element, index, array) { + return element >= 10; +} +[12, 5, 8, 130, 44].every(isBigEnough); // false +[12, 54, 18, 130, 44].every(isBigEnough); // true +</pre> + +<h3 id="화살표_함수_사용">화살표 함수 사용</h3> + +<p><a href="/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션">화살표 함수</a>는 같은 테스트에 대해 더 짧은 구문을 제공합니다.</p> + +<pre class="brush: js">[12, 5, 8, 130, 44].every(elem => elem >= 10); // false +[12, 54, 18, 130, 44].every(elem => elem >= 10); // true</pre> + +<h2 id="폴리필">폴리필</h2> + +<p><code>every</code>는 ECMA-262 표준 제5판에 추가됐으므로 어떤 표준 구현체에서는 사용하지 못할 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 <code>every</code>를 지원하지 않는 환경에서도 사용할 수 있습니다. 아래 알고리즘은 {{jsxref("Object")}}와 {{jsxref("TypeError")}}가 변형되지 않고, <code>callbackfn.call</code>의 계산 값이 원래의 {{jsxref("Function.prototype.call()")}}과 같은 경우 ECMA-262 제5판이 명시한 것과 동일합니다.</p> + +<pre class="brush: js">if (!Array.prototype.every) { + Array.prototype.every = function(callbackfn, thisArg) { + 'use strict'; + var T, k; + + if (this == null) { + throw new TypeError('this is null or not defined'); + } + + // 1. Let O be the result of calling ToObject passing the this + // value as the argument. + var O = Object(this); + + // 2. Let lenValue be the result of calling the Get internal method + // of O with the argument "length". + // 3. Let len be ToUint32(lenValue). + var len = O.length >>> 0; + + // 4. If IsCallable(callbackfn) is false, throw a TypeError exception. + if (typeof callbackfn !== 'function') { + throw new TypeError(); + } + + // 5. If thisArg was supplied, let T be thisArg; else let T be undefined. + if (arguments.length > 1) { + T = thisArg; + } + + // 6. Let k be 0. + k = 0; + + // 7. Repeat, while k < len + while (k < len) { + + var kValue; + + // a. Let Pk be ToString(k). + // This is implicit for LHS operands of the in operator + // b. Let kPresent be the result of calling the HasProperty internal + // method of O with argument Pk. + // This step can be combined with c + // c. If kPresent is true, then + if (k in O) { + + // i. Let kValue be the result of calling the Get internal method + // of O with argument Pk. + kValue = O[k]; + + // ii. Let testResult be the result of calling the Call internal method + // of callbackfn with T as the this value and argument list + // containing kValue, k, and O. + var testResult = callbackfn.call(T, kValue, k, O); + + // iii. If ToBoolean(testResult) is false, return false. + if (!testResult) { + return false; + } + } + k++; + } + return true; + }; +}</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>초기 정의. JavaScript 1.6에서 구현됨.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.Array.every")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("TypedArray.prototype.every()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/fill/index.html b/files/ko/web/javascript/reference/global_objects/array/fill/index.html new file mode 100644 index 0000000000..5a18af7d24 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/fill/index.html @@ -0,0 +1,146 @@ +--- +title: Array.prototype.fill() +slug: Web/JavaScript/Reference/Global_Objects/Array/fill +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Method + - Prototype + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill +--- +<div>{{JSRef}}</div> + +<p><code><strong>fill()</strong></code> 메서드는 배열의 시작 인덱스부터 끝 인덱스의 이전까지 정적인 값 하나로 채웁니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-fill.html")}}</p> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="syntaxbox"><code><var>arr</var>.fill(<var>value</var>[, <var>start<var>[, <var>end</var>]])</var></var></code></pre> + +<h3 id="Parameters" name="Parameters">매개변수</h3> + +<dl> + <dt><code>value</code></dt> + <dd>배열을 채울 값.</dd> + <dt><code>start</code> {{optional_inline}}</dt> + <dd>시작 인덱스, 기본 값은 0.</dd> + <dt><code>end</code> {{optional_inline}}</dt> + <dd>끝 인덱스, 기본 값은 <code>this.length</code>.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>변형한 배열.</p> + +<h2 id="Description" name="Description">설명 </h2> + +<p><code>fill</code> 메서드는 <code>value</code>, <code>start</code>, <code>end</code>의 3개 인자를 가집니다. <code>start</code>와 <code>end</code> 인자는 선택 사항으로써 기본값으로 각각 <code>0</code>과, <code>this</code> 객체의 <code>length</code>를 가집니다.</p> + +<p><code>length</code>가 배열의 길이일 때, <code>start</code>가 음수이면 시작 인덱스는 <code>length+start</code>입니다. <code>end</code>가 음수이면 끝 인덱스는 <code>length+end</code>입니다.</p> + +<p><code>fill</code>은 일반 함수이며, <code>this</code> 값이 배열 객체일 필요는 없습니다.</p> + +<p><code>fill</code> 메서드는 변경자 메서드로, 복사본이 아니라 <code>this</code> 객체를 변형해 반환합니다.</p> + +<p><code>value</code>에 객체를 받을 경우 그 참조만 복사해서 배열을 채웁니다.</p> + +<h2 id="Examples" name="Examples">예제</h2> + +<pre class="brush: js">[1, 2, 3].fill(4); // [4, 4, 4] +[1, 2, 3].fill(4, 1); // [1, 4, 4] +[1, 2, 3].fill(4, 1, 2); // [1, 4, 3] +[1, 2, 3].fill(4, 1, 1); // [1, 2, 3] +[1, 2, 3].fill(4, 3, 3); // [1, 2, 3] +[1, 2, 3].fill(4, -3, -2); // [4, 2, 3] +[1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3] +[1, 2, 3].fill(4, 3, 5); // [1, 2, 3] +Array(3).fill(4); // [4, 4, 4] +[].fill.call({ length: 3 }, 4); // {0: 4, 1: 4, 2: 4, length: 3} + +// Objects by reference. +var arr = Array(3).fill({}); // [{}, {}, {}] +arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }] +</pre> + +<h2 id="Polyfill" name="Polyfill">폴리필</h2> + +<pre><code>if (!Array.prototype.fill) { + Object.defineProperty(Array.prototype, 'fill', { + value: function(value) { + + // Steps 1-2. + if (this == null) { + throw new TypeError('this is null or not defined'); + } + + var O = Object(this); + + // Steps 3-5. + var len = O.length >>> 0; + + // Steps 6-7. + var start = arguments[1]; + var relativeStart = start >> 0; + + // Step 8. + var k = relativeStart < 0 ? + Math.max(len + relativeStart, 0) : + Math.min(relativeStart, len); + + // Steps 9-10. + var end = arguments[2]; + var relativeEnd = end === undefined ? + len : end >> 0; + + // Step 11. + var final = relativeEnd < 0 ? + Math.max(len + relativeEnd, 0) : + Math.min(relativeEnd, len); + + // Step 12. + while (k < final) { + O[k] = value; + k++; + } + + // Step 13. + return O; + } + }); +}</code></pre> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<div>{{Compat("javascript.builtins.Array.fill")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("TypedArray.prototype.fill()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/filter/index.html b/files/ko/web/javascript/reference/global_objects/array/filter/index.html new file mode 100644 index 0000000000..9d1b623fd0 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/filter/index.html @@ -0,0 +1,231 @@ +--- +title: Array.prototype.filter() +slug: Web/JavaScript/Reference/Global_Objects/Array/filter +tags: + - Array + - ECMAScript 5 + - JavaScript + - Method + - Prototype + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter +--- +<div>{{JSRef}}</div> + +<p><code><strong>filter()</strong></code> 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-filter.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>arr.filter(callback(element[, index[, array]])[, thisArg])</var></code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>각 요소를 시험할 함수. <code>true</code>를 반환하면 요소를 유지하고, <code>false</code>를 반환하면 버립니다. 다음 세 가지 매개변수를 받습니다.</dd> + <dd> + <dl> + <dt><code>element</code></dt> + <dd>처리할 현재 요소.</dd> + <dt><code>index</code> {{optional_inline}}</dt> + <dd>처리할 현재 요소의 인덱스.</dd> + <dt><code>array</code> {{optional_inline}}</dt> + <dd><code>filter</code>를 호출한 배열.</dd> + </dl> + </dd> + <dt><code>thisArg</code> {{optional_inline}}</dt> + <dd><code>callback</code>을 실행할 때 <code>this</code>로 사용하는 값.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>테스트를 통과한 요소로 이루어진 새로운 배열. 어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환합니다.</p> + +<h2 id="설명">설명</h2> + +<p><code>filter()</code>는 배열 내 각 요소에 대해 한 번 제공된 <code>callback</code> 함수를 호출해, <code>callback</code>이 <a href="/ko/docs/Glossary/Truthy"><code>true</code>로 강제하는 값</a>을 반환하는 모든 값이 있는 새로운 배열을 생성합니다. <code>callback</code>은 할당된 값이 있는 배열의 인덱스에 대해서만 호출됩니다; 삭제됐거나 값이 할당된 적이 없는 인덱스에 대해서는 호출되지 않습니다. <code>callback</code> 테스트를 통과하지 못한 배열 요소는 그냥 건너뛰며 새로운 배열에 포함되지 않습니다.</p> + +<p><code>callback</code>은 다음 세 인수와 함께 호출됩니다:</p> + +<ol> + <li>요소값</li> + <li>요소 인덱스</li> + <li>순회(traverse)되는 배열 객체</li> +</ol> + +<p><code>thisArg</code> 매개변수가 <code>filter</code>에 제공된 경우, 호출될 때 그 값은 <code>callback</code>의 <code>this</code> 값으로 전달됩니다. 그 이외에, <code>undefined</code>값도 <code>callback</code>의 <code>this</code> 값으로 쓰기 위해 전달됩니다. 결국 <code>callback</code>에 의해 관찰될 수 있는 <code>this</code> 값은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/this"><code>this</code>를 결정하는 함수의 평소 규칙</a>에 따라 결정됩니다.</p> + +<p><code>filter()</code>는 호출되는 배열을 변화시키지(mutate) 않습니다.</p> + +<p><code>filter()</code>에 의해 처리되는 요소의 범위는 <code>callback</code>의 첫 호출 전에 설정됩니다. <code>filter()</code> 호출 시작 이후로 배열에 추가된 요소는 <code>callback</code>에 의해 방문되지 않습니다. 배열의 기존 요소가 변경 또는 삭제된 경우, <code>callback</code>에 전달된 그 값은 <code>filter()</code>가 그 요소를 방문한 시점에 값이 됩니다; 삭제된 요소는 반영되지 않습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="모든_작은_값_걸러내기">모든 작은 값 걸러내기</h3> + +<p>다음 예는 값이 10 이하인 모든 요소가 제거된 걸러진 배열을 만들기 위해 <code>filter()</code>를 사용합니다.</p> + +<pre class="brush: js">function isBigEnough(value) { + return value >= 10; +} + +var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); +// filtered 는 [12, 130, 44] +</pre> + +<h3 id="JSON에서_무효한_항목_거르기">JSON에서 무효한 항목 거르기</h3> + +<p>다음 예는 0이 아닌, 숫자 <code>id</code>인 모든 요소의 걸러진 json을 만들기 위해 <code>filter()</code>를 사용합니다.</p> + +<pre class="brush: js"><code>var arr = [ + { id: 15 }, + { id: -1 }, + { id: 0 }, + { id: 3 }, + { id: 12.2 }, + { }, + { id: null }, + { id: NaN }, + { id: 'undefined' } +]; + +var invalidEntries = 0; + +function isNumber(obj) { + return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj); +} + +function filterByID(item) { + if (isNumber(item.id) && item.id !== 0) { + return true; + } + invalidEntries++; + return false; +} + +var arrByID = arr.filter(filterByID); + +console.log('Filtered Array\n', arrByID); +// Filtered Array +// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }] + +console.log('Number of Invalid Entries = ', invalidEntries); +// Number of Invalid Entries = 5</code> +</pre> + +<h3 id="배열_내용_검색">배열 내용 검색</h3> + +<p>다음 예는 배열 내용을 조건에 따라 검색하기 위해 <code>filter()</code> 를 사용합니다.</p> + +<pre class="brush: js"><code>var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']; + +/** + * 검색 조건에 따른 배열 필터링(쿼리) + */ +function filterItems(query) { + return fruits.filter(function(el) { + return el.toLowerCase().indexOf(query.toLowerCase()) > -1; + }) +} + +console.log(filterItems('ap')); // ['apple', 'grapes'] +console.log(filterItems('an')); // ['banana', 'mango', 'orange']</code></pre> + +<h3 id="ES2015로_구현">ES2015로 구현</h3> + +<pre class="brush: js"><code>const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']; + +/** + * 검색 조건에 따른 배열 필터링(쿼리) + */ +const filterItems = (query) => { + return fruits.filter((el) => + el.toLowerCase().indexOf(query.toLowerCase()) > -1 + ); +} + +console.log(filterItems('ap')); // ['apple', 'grapes'] +console.log(filterItems('an')); // ['banana', 'mango', 'orange']</code></pre> + +<h2 id="폴리필">폴리필</h2> + +<p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">filter</span></font>는 ECMA-262 표준 제5판에 추가됐습니다. 따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 환경에서도 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">filter</span></font>를 사용할 수 있습니다. 아래 알고리즘은 <code>fn.call</code>의 계산 값이 원래의 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="call() 메소드는 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출합니다."><code>Function.prototype.call()</code></a>과 같고, {{jsxref("Array.prototype.push()")}}가 변형되지 않은 경우 ECMA-262 제5판이 명시한 것과 동일합니다.</p> + +<pre class="brush: js">if (!Array.prototype.filter){ + Array.prototype.filter = function(func, thisArg) { + 'use strict'; + if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) ) + throw new TypeError(); + + var len = this.length >>> 0, + res = new Array(len), // preallocate array + t = this, c = 0, i = -1; + if (thisArg === undefined){ + while (++i !== len){ + // checks to see if the key was set + if (i in this){ + if (func(t[i], i, t)){ + res[c++] = t[i]; + } + } + } + } + else{ + while (++i !== len){ + // checks to see if the key was set + if (i in this){ + if (func.call(thisArg, t[i], i, t)){ + res[c++] = t[i]; + } + } + } + } + + res.length = c; // shrink down array to proper size + return res; + }; +}</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>초기 정의. JavaScript 1.6에서 구현됨.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.Array.filter")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/find/index.html b/files/ko/web/javascript/reference/global_objects/array/find/index.html new file mode 100644 index 0000000000..92a0208a6b --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/find/index.html @@ -0,0 +1,226 @@ +--- +title: Array.prototype.find() +slug: Web/JavaScript/Reference/Global_Objects/Array/find +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Method + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/find +--- +<div>{{JSRef}}</div> + +<p><code><strong>find()</strong></code><strong> </strong>메서드는 주어진 판별 함수를 만족하는 <strong>첫 번째 요소</strong>의 <strong>값</strong>을 반환합니다. 그런 요소가 없다면 {{jsxref("undefined")}}를 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-find.html")}}</div> + + + +<p>찾은 요소의 값 대신 <strong>인덱스</strong>를 반환하는 {{jsxref("Array.findIndex", "findIndex()")}} 메서드도 살펴보세요.</p> + +<p>배열 요소의 위치를 찾고자 하는 경우에는 {{jsxref("Array.prototype.indexOf()")}}를 사용하세요.</p> + +<p>배열 요소가 해당 배열에 존재하는지 확인하고자 하는 경우에는 {{jsxref("Array.prototype.indexOf()")}} 또는 {{jsxref("Array.prototype.includes()")}}를 사용세요.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>arr</var>.find(<var>callback</var>[, <var>thisArg</var>])</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>배열의 각 값에 대해 실행할 함수. 아래의 세 인자를 받습니다. + <dl> + <dt><code>element</code></dt> + <dd>콜백함수에서 처리할 현재 요소.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>콜백함수에서 처리할 현재 요소의 인덱스.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd><code>find</code> 함수를 호출한 배열.</dd> + </dl> + </dd> + <dt><code>thisArg</code></dt> + <dd>선택 항목. 콜백이 호출될 때 <code>this</code>로 사용할 객체.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 판별 함수를 만족하는 <strong>첫 번째 요소</strong>의 <strong>값</strong>. 그 외에는 {{jsxref("undefined")}}.</p> + +<h2 id="설명">설명</h2> + +<p><code>find</code> 메서드는 <code>callback</code> 함수가 참을 반환 할 때까지 해당 배열의 각 요소에 대해서 <code>callback</code> 함수를 실행합니다. 만약 어느 요소를 찾았다면 <code>find</code> 메서드는 해당 요소의 값을 즉시 반환하고, 그렇지 않았다면 {{jsxref("undefined")}}를 반환합니다. <code>callback</code>은 <code>0</code> 부터 <code>length - 1</code> 까지 배열의 모든 인덱스에 대해 호출되며, 값이 지정되지 않은 요소도 포함하여 모든 인덱스에 대해 호출됩니다. 따라서, 희소 배열 (sparse arrays)의 경우에는 값이 지정된 요소만 탐색하는 다른 메소드에 비해 더 비효율적입니다.</p> + +<p><code>callback</code>은 다음의 세가지 인자를 가지고 호출됩니다: 요소의 값, 요소의 인덱스, 순회의 대상이 되는 배열. </p> + +<p><code>thisArg</code> 파라미터가 주어진 경우에는 제공되었다면 <code>thisArg</code>가 <code>callback</code>안에서 <code>this</code>로 사용되고, 그렇지 않은 경우 {{jsxref("undefined")}} 가 <code>this</code>로 사용됩니다. </p> + +<p><code>find</code>는 호출의 대상이 된 배열을 변경(mutate)하지 않습니다.</p> + +<p><code>find</code>가 처리할 배열 요소의 범위는 첫 <code>callback</code>이 호출되기 전에 먼저 결정됩니다. <code>find</code>메서드가 실행 된 이후에 배열에 추가된 요소들에 대해서는 <code>callback</code>이 호출되지 않습니다. 아직 <code>callback</code>이 호출되지 않았던 배열 요소가 <code>callback</code>에 의해서 변경된 경우, <code>find</code>가 해당 요소의 인덱스를 방문할 때의 값으로 <code>callback</code>함수에 전달될 것입니다. 즉, 삭제된 요소에도 <code>callback</code>이 호출됩니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="속성_중_하나를_사용하여_배열에서_객체_찾기">속성 중 하나를 사용하여 배열에서 객체 찾기</h3> + +<pre class="brush: js">var inventory = [ + {name: 'apples', quantity: 2}, + {name: 'bananas', quantity: 0}, + {name: 'cherries', quantity: 5} +]; + +function findCherries(fruit) { + return fruit.name === 'cherries'; +} + +console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 } +</pre> + +<h4 id="ES2015_화살표_함수_사용하기">ES2015 화살표 함수 사용하기</h4> + +<p> </p> + +<pre class="brush: js">const inventory = [ + {name: 'apples', quantity: 2}, + {name: 'bananas', quantity: 0}, + {name: 'cherries', quantity: 5} +]; + +const result = inventory.find(fruit => fruit.name === 'cherries'); + +console.log(result) // { name: 'cherries', quantity: 5 }</pre> + +<p> </p> + +<h3 id="배열에서_소수_찾기">배열에서 소수 찾기</h3> + +<p>다음 예제에서는 배열의 요소 중 소수인 요소를 찾습니다(소수가 없는 경우에는 {{jsxref("undefined")}}를 반환).</p> + +<pre class="brush: js">function isPrime(element, index, array) { + var start = 2; + while (start <= Math.sqrt(element)) { + if (element % start++ < 1) { + return false; + } + } + return element > 1; +} + +console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found +console.log([4, 5, 8, 12].find(isPrime)); // 5 +</pre> + +<h3 id="탐색_중_삭제된_배열_요소">탐색 중 삭제된 배열 요소</h3> + +<p>다음 예제에서는 삭제되어 존재하지 않는 배열의 요소에도 <code>callback</code>이 호출되어 해당 시점의 값이 <code>callback</code>에 전달되는 것을 보여줍니다.</p> + +<pre class="brush: js">// Declare array with no element at index 2, 3 and 4 +var a = [0,1,,,,5,6]; + +// Shows all indexes, not just those that have been assigned values +a.find(function(value, index) { + console.log('Visited index ' + index + ' with value ' + value); +}); +// Shows all indexes, including deleted + a.find(function(value, index) { + // Delete element 5 on first iteration + if (index == 0) { + console.log('Deleting a[5] with value ' + a[5]); + delete a[5]; + } + // Element 5 is still visited even though deleted + console.log('Visited index ' + index + ' with value ' + value); +}); +</pre> + +<h2 id="폴리필">폴리필</h2> + +<p><code>find</code>는 ECMAScript 2015 명세에 추가됐으므로 어떤 표준 구현체에서는 사용지 못할 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 <code>find</code>를 지원하지 않는 환경에서도 사용할 수 있습니다.</p> + +<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.find +if (!Array.prototype.find) { + Object.defineProperty(Array.prototype, 'find', { + value: function(predicate) { + // 1. Let O be ? ToObject(this value). + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var o = Object(this); + + // 2. Let len be ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // 3. If IsCallable(predicate) is false, throw a TypeError exception. + if (typeof predicate !== 'function') { + throw new TypeError('predicate must be a function'); + } + + // 4. If thisArg was supplied, let T be thisArg; else let T be undefined. + var thisArg = arguments[1]; + + // 5. Let k be 0. + var k = 0; + + // 6. Repeat, while k < len + while (k < len) { + // a. Let Pk be ! ToString(k). + // b. Let kValue be ? Get(O, Pk). + // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). + // d. If testResult is true, return kValue. + var kValue = o[k]; + if (predicate.call(thisArg, kValue, k, o)) { + return kValue; + } + // e. Increase k by 1. + k++; + } + + // 7. Return undefined. + return undefined; + }, + configurable: true, + writable: true + }); +}</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.find', 'Array.prototype.find')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("javascript.builtins.Array.find")}}</div> + +<div id="compat-mobile"> </div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.findIndex()")}} – 찾기 이후 인덱스 반환</li> + <li>{{jsxref("Array.prototype.includes()")}} – 배열에 어떤 값이 존재하는지 검사</li> + <li>{{jsxref("Array.prototype.filter()")}} – 매칭되는 모든 요소 찾기</li> + <li>{{jsxref("Array.prototype.every()")}} – 모든 요소에 대해서 검사</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/findindex/index.html b/files/ko/web/javascript/reference/global_objects/array/findindex/index.html new file mode 100644 index 0000000000..9406439e6a --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/findindex/index.html @@ -0,0 +1,146 @@ +--- +title: Array.prototype.findIndex() +slug: Web/JavaScript/Reference/Global_Objects/Array/findIndex +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Method + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex +--- +<div>{{JSRef}}</div> + +<p><strong><code>findIndex()</code></strong> 메서드는 <strong>주어진 판별 함수를 만족하는</strong> 배열의 첫 번째 요소에 대한 <strong>인덱스</strong>를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-findindex.html")}}</div> + + + +<p>인덱스 대신 <strong>값</strong>을 반환하는 {{jsxref("Array.prototype.find", "find()")}} 메서드도 참고하세요.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>arr</var>.findIndex(<var>callback(element</var>[, index[, array]])[, <var>thisArg</var>])</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>3개의 인수를 취하여 배열의 각 값에 대해 실행할 함수입니다.</dd> + <dd> + <dl> + <dt><code>element</code></dt> + <dd>배열에서 처리중인 현재 요소입니다.</dd> + <dt><code>index</code></dt> + <dd>배열에서 처리중인 현재 요소의 인덱스입니다.</dd> + <dt><code>array</code></dt> + <dd>findIndex 함수가 호출된 배열입니다.</dd> + </dl> + </dd> + <dt><code>thisArg</code></dt> + <dd>선택 사항. 콜백을 실행할 때 this로 사용할 객체입니다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>요소가 테스트를 통과하면 배열의 인덱스. 그렇지 않으면 -1입니다.</p> + +<h2 id="설명">설명</h2> + +<p>findIndex 메서드는 콜백 함수가 진리 값 (true를 반환하는 값)을 반환 할 때까지 배열의 모든 배열 인덱스 0..length-1 (포함)에 대해 한 번씩 콜백 함수를 실행합니다. 이러한 요소가 발견되면 findIndex는 해당 반복에 대한 색인을 즉시 반환합니다. 콜백이 진리 값을 반환하지 않거나 배열의 길이가 0 인 경우 findIndex는 -1을 반환합니다. Array # some과 같은 다른 배열 메소드와는 달리, 배열에 존재하지 않는 엔트리의 인덱스에 대해서조차 콜백이 호출됩니다.</p> + +<p>콜백은 요소의 값, 요소의 인덱스 및 가로 지르는 <code>Array</code> 객체의 세 가지 인수로 호출됩니다.</p> + +<p>thisArg 매개 변수가 findIndex에 제공되면 콜백 호출마다 thisArg 매개 변수가 사용됩니다. 제공되지 않으면 {{jsxref ( "undefined")}}가 사용됩니다.</p> + +<p><code>findIndex</code>는 호출 된 배열을 변경하지 않습니다.</p> + +<p>findIndex에 의해 처리되는 요소의 범위는 콜백의 첫 번째 호출 전에 설정됩니다. findIndex 호출이 시작된 후 배열에 추가되는 요소는 콜백에 의해 방문되지 않습니다. 배열의 기존의 방문하지 않은 요소가 콜백에 의해 변경되면 방문 콜백에 전달 된 값은 findIndex가 해당 요소의 인덱스를 방문 할 때의 값이됩니다. 삭제된 요소도 방문합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="배열에서_소수의_색인_찾기">배열에서 소수의 색인 찾기</h3> + +<p>다음 예제에서는 배열에서 소수 (소수가없는 경우 -1을 반환) 인 요소의 인덱스를 찾습니다.</p> + +<pre class="brush: js">function isPrime(element, index, array) { + var start = 2; + while (start <= Math.sqrt(element)) { + if (element % start++ < 1) { + return false; + } + } + return element > 1; +} + +console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found +console.log([4, 6, 7, 12].findIndex(isPrime)); // 2 +</pre> + +<h2 id="폴리필">폴리필</h2> + +<pre class="brush: js">if (!Array.prototype.findIndex) { + Object.defineProperty(Array.prototype, 'findIndex', { + value: function(predicate) { + 'use strict'; + if (this == null) { + throw new TypeError('Array.prototype.findIndex called on null or undefined'); + } + if (typeof predicate !== 'function') { + throw new TypeError('predicate must be a function'); + } + var list = Object(this); + var length = list.length >>> 0; + var thisArg = arguments[1]; + var value; + + for (var i = 0; i < length; i++) { + value = list[i]; + if (predicate.call(thisArg, value, i, list)) { + return i; + } + } + return -1; + }, + enumerable: false, + configurable: false, + writable: false + }); +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("javascript.builtins.Array.findIndex")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/flat/index.html b/files/ko/web/javascript/reference/global_objects/array/flat/index.html new file mode 100644 index 0000000000..4d4af6dc36 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/flat/index.html @@ -0,0 +1,160 @@ +--- +title: Array.prototype.flat() +slug: Web/JavaScript/Reference/Global_Objects/Array/flat +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat +--- +<div>{{JSRef}}</div> + +<p><code><strong>flat()</strong></code> 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">const <em>newArr</em> = <em>arr</em>.flat([<em>depth</em>])</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>depth</code> {{optional_inline}}</dt> + <dd>중첩 배열 구조를 평탄화할 때 사용할 깊이 값. 기본값은 1입니다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>하위 배열을 이어붙인 새로운 배열.</p> + +<h2 id="예제">예제</h2> + +<h3 id="중첩_배열_평탄화">중첩 배열 평탄화</h3> + +<pre class="brush: js">const arr1 = [1, 2, [3, 4]]; +arr1.flat(); +// [1, 2, 3, 4] + +const arr2 = [1, 2, [3, 4, [5, 6]]]; +arr2.flat(); +// [1, 2, 3, 4, [5, 6]] + +const arr3 = [1, 2, [3, 4, [5, 6]]]; +arr3.flat(2); +// [1, 2, 3, 4, 5, 6] + +const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]; +arr4.flat(Infinity); +// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]</pre> + +<h3 id="배열_구멍_제거">배열 구멍 제거</h3> + +<p><code>flat</code> 메서드는 배열의 구멍도 제거합니다.</p> + +<pre class="brush: js">const arr5 = [1, 2, , 4, 5]; +arr5.flat(); +// [1, 2, 4, 5]</pre> + +<h2 id="대안">대안</h2> + +<h3 id="reduce와_concat"><code>reduce</code>와 <code>concat</code></h3> + +<pre class="brush: js">const arr = [1, 2, [3, 4]]; + +// To flat single level array +arr.flat(); +// is equivalent to +arr.reduce((acc, val) => acc.concat(val), []); +// [1, 2, 3, 4] + +// or with decomposition syntax +const flattened = arr => [].concat(...arr);</pre> + +<h3 id="reduce_concat_isArray_재귀"><code>reduce</code> + <code>concat</code> + <code>isArray</code> + 재귀</h3> + +<pre class="brush: js">const arr = [1, 2, [3, 4, [5, 6]]]; + +// to enable deep level flatten use recursion with reduce and concat +function flatDeep(arr, d = 1) { + return d > 0 ? arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatDeep(val, d - 1) : val), []) + : arr.slice(); +}; + +flatDeep(arr, Infinity); +// [1, 2, 3, 4, 5, 6]</pre> + +<h3 id="스택">스택</h3> + +<pre class="brush: js">// non recursive flatten deep using a stack +// note that depth control is hard/inefficient as we will need to tag EACH value with its own depth +// also possible w/o reversing on shift/unshift, but array OPs on the end tends to be faster +function flatten(input) { + const stack = [...input]; + const res = []; + while(stack.length) { + // pop value from stack + const next = stack.pop(); + if(Array.isArray(next)) { + // push back array items, won't modify the original input + stack.push(...next); + } else { + res.push(next); + } + } + // reverse to restore input order + return res.reverse(); +} + +const arr = [1, 2, [3, 4, [5, 6]]]; +flatten(arr); +// [1, 2, 3, 4, 5, 6]</pre> + +<h3 id="Generator_함수"><code>Generator</code> 함수</h3> + +<pre class="brush: js">function* flatten(array, depth) { + if(depth === undefined) { + depth = 1; + } + for(const item of array) { + if(Array.isArray(item) && depth > 0) { + yield* flatten(item, depth - 1); + } else { + yield item; + } + } +} + +const arr = [1, 2, [3, 4, [5, 6]]]; +const flattened = [...flatten(arr, Infinity)]; +// [1, 2, 3, 4, 5, 6]</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.flat', 'Array.prototype.flat')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.flat")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.flatMap()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/flatmap/index.html b/files/ko/web/javascript/reference/global_objects/array/flatmap/index.html new file mode 100644 index 0000000000..9d762001e8 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/flatmap/index.html @@ -0,0 +1,148 @@ +--- +title: Array.prototype.flatMap() +slug: Web/JavaScript/Reference/Global_Objects/Array/flatMap +tags: + - Array + - Experimental + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap +--- +<div>{{JSRef}} {{SeeCompatTable}}</div> + +<p><code><strong>flatMap()</strong></code> 메서드는 먼저 매핑함수를 사용해 각 엘리먼트에 대해 map 수행 후, 결과를 새로운 배열로 평탄화합니다. 이는 깊이 1의 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat">flat</a> 이 뒤따르는 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a> 과 동일하지만, <code>flatMap</code> 은 아주 유용하며 둘을 하나의 메소드로 병합할 때 조금 더 효율적입니다.</p> + +<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatmap.html")}}</p> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>arr</var>.flatMap(<var>callback(currentValue[, index[, array]])</var>[, <var>thisArg</var>])</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>새로운 배열의 엘리먼트를 생성하는 함수. 3개의 아규먼트를 갖습니다. + <dl> + <dt></dt> + <dt><code>currentValue</code></dt> + <dd>배열에서 처리되는 현재 엘리먼트.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>배열에서 처리되고 있는 현재 엘리먼트의 인덱스.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd><code>map</code> 이 호출된 배열.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{optional_inline}}</dt> + <dd><code>callback</code> 실행에서 <code>this</code> 로 사용할 값.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>각 엘리먼트가 callback 함수의 결과이고, 깊이 1로 평탄화된 새로운 배열.</p> + +<h2 id="설명">설명</h2> + +<p>callback 함수의 상세 설명은 {{jsxref("Array.prototype.map()")}} 문서를 보시기 바랍니다. <code>flatMap</code> 메소드는 깊이 1의 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat">flat</a></code> 이 뒤따르는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a></code> 과 동일합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="map_과_flatMap"><code>map</code> 과 <code>flatMap</code></h3> + +<pre class="brush: js">let arr1 = <span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>[</span></span><span class="constant decimal js numeric"><span>1</span></span><span class="comma delimiter js meta object"><span>,</span></span><span> </span><span class="brace js meta square"><span>2, 3, 4]; + +arr1.map(</span></span></span></span></span>x => [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);</span></span></span></span></span> +// [[2], [4], [6], [8]] + +arr1.flatMap(x => [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>); +// [2, 4, 6, 8]</span></span></span></span></span> + +// 한 레벨만 평탄화됨 +arr1.flatMap(x => [[x * 2]]); +// [[2], [4], [6], [8]] +</pre> + +<p>위 코드는 map 자체만을 사용해서 구현할 수 있지만, 다음은 <code>flatMap</code> 의 유즈케이스를 더 잘 보여주는 예시입니다.</p> + +<p>문장의 리스트로부터 단어의 리스트를 생성해봅시다.</p> + +<pre class="brush: js">let arr1 = ["it's Sunny in", "", "California"]; + +arr1.map(x=>x.split(" ")); +// [["it's","Sunny","in"],[""],["California"]] + +arr1.flatMap(x => x.split(" ")<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>); +// ["it's","Sunny","in","California"]</span></span></span></span></span></pre> + +<p>출력 리스트의 길이는 입력 리스트의 길이와 다를 수 있습니다.</p> + +<h3 id="flatMap_을_이용한_아이템_추가_및_제거"><code>flatMap()</code> 을 이용한 아이템 추가 및 제거</h3> + +<p><code>flatMap</code>은 <code>map</code>을 하는 과정에서 아이템을 추가하거나 제거하여 아이템 개수를 바꿀 수 있습니다. 다른 말로는 각각의 아이템에 대하여 1:1대응관계 뿐만 아니라 다대다 대응도 가능하다는 것입니다. 이러한 측면에서 <a href="https://wiki.developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter">filter</a>가 하는 역할의 반대역할을 한다고 볼 수 있습니다. 단순히 아무런 변화를 주고 싶지 않을때에는 원소 하나를 가진 배열을 반환할 수도, 아이템을 추가하고 싶을 때는 다-원소 배열을 반환할 수도, 아이템을 제거하고 싶을 때에는 빈 배열을 반환할 수도 있습니다.</p> + +<pre><code>// 다음은 음수는 제거하고 홀수는 1과 짝수로 분리하는 예시입니다. +let a = [5, 4, -3, 20, 17, -33, -4, 18] +// |\ \ x | | \ x x | +// [4,1, 4, 20, 16, 1, 18] + +a.flatMap( (n) => + (n < 0) ? [] : + (n % 2 == 0) ? [n] : + [n-1, 1] +) + +// expected output: [4, 1, 4, 20, 16, 1, 18]</code></pre> + +<div class="line"><span class="js source"><span class="comment double-slash js line"><span class="comment definition js punctuation"><span>//</span></span><span>=> [1, 2, 3, 4, 5, 6, 7, 8, 9]</span></span></span></div> + +<h2 id="대안">대안</h2> + +<h3 id="reduce_와_concat"><code>reduce</code> 와 <code>concat</code></h3> + +<pre class="brush: js">var arr1 = <span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>[</span></span><span class="constant decimal js numeric"><span>1</span></span><span class="comma delimiter js meta object"><span>,</span></span><span> </span><span class="brace js meta square"><span>2, 3, 4]; +</span></span></span></span></span> +arr1.flatMap(x => [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);</span></span></span></span></span> +// 다음과 동일합니다 +arr1.reduce((acc, x) => acc.concat([x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>), []);</span></span></span></span></span> +<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>// [2, 4, 6, 8]</span></span></span></span></span> +</pre> + +<div class="line"><span class="js source"><span class="comment double-slash js line"><span class="comment definition js punctuation"><span>//</span></span><span>=> [1, 2, 3, 4, 5, 6, 7, 8, 9]</span></span></span></div> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td><a href="https://tc39.github.io/proposal-flatMap/#sec-Array.prototype.flatMap"><code>Array.prototype.flatMap</code> proposal</a></td> + <td>Finished (4)</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.flatMap")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.flat()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/foreach/index.html b/files/ko/web/javascript/reference/global_objects/array/foreach/index.html new file mode 100644 index 0000000000..809bc4d269 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/foreach/index.html @@ -0,0 +1,264 @@ +--- +title: Array.prototype.forEach() +slug: Web/JavaScript/Reference/Global_Objects/Array/forEach +tags: + - Array + - ECMAScript 5 + - JavaScript + - Method + - Prototype + - Referennce +translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach +--- +<div>{{JSRef}}</div> + +<p><code><strong>forEach()</strong></code> 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-foreach.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>arr</var>.forEach(<var>callback(currentvalue[, index[, array]])</var>[, <var>thisArg</var>])</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>각 요소에 대해 실행할 함수. 다음 세 가지 매개변수를 받습니다.</dd> + <dd> + <dl> + <dt><code>currentValue</code></dt> + <dd>처리할 현재 요소.</dd> + <dt><code>index</code> {{optional_inline}}</dt> + <dd>처리할 현재 요소의 인덱스.</dd> + <dt><code>array</code> {{optional_inline}}</dt> + <dd><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">forEach()</span></font>를 호출한 배열.</dd> + </dl> + </dd> + <dt><code>thisArg</code> {{optional_inline}}</dt> + <dd><code>callback</code>을 실행할 때 <code>this</code>로 사용할 값.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="설명">설명</h2> + +<p><code>forEach()</code>는 주어진 <code>callback</code>을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행합니다. 삭제했거나 초기화하지 않은 인덱스 속성에 대해서는 실행하지 않습니다. (예: 희소 배열)</p> + +<p><code>callback</code>은 다음 세 인수와 함께 호출됩니다.</p> + +<ul> + <li><strong>요소 값</strong></li> + <li><strong>요소 인덱스</strong></li> + <li><strong>순회 중인 배열</strong></li> +</ul> + +<p><code>thisArg</code> 매개변수를 <code>forEach()</code>에 제공한 경우 <code>callback</code>을 호출할 때 전달해 <code>this</code>의 값으로 쓰입니다. 전달하지 않으면 <code>undefined</code>를 사용하며, 최종 <code>this</code> 값은 {{jsxref("Operators/this", "함수의 <code>this</code>를 결정하는 평소 규칙", "", 0)}}을 따릅니다.</p> + +<p><code>forEach()</code>로 처리할 요소의 범위는 최초 <code>callback</code> 호출 전에 설정됩니다. <code>forEach()</code> 호출을 시작한 뒤 배열에 추가한 요소는 <code>callback</code>이 방문하지 않습니다. 배열의 기존 요소값이 바뀐 경우, <code>callback</code>에 전달하는 값은 <code>forEach()</code>가 요소를 방문한 시점의 값을 사용합니다. 방문하기 전에 삭제한 요소는 방문하지 않습니다.</p> + +<p><code>forEach()</code>는 각 배열 요소에 대해 한 번씩 <code>callback</code> 함수를 실행합니다. {{jsxref("Array.prototype.map()", "map()")}}과 {{jsxref("Array.prototype.reduce()", "reduce()")}}와는 달리 {{jsxref("undefined")}}를 반환하기 때문에 메서드 체인의 중간에 사용할 수 없습니다. 대표적인 사용처는 메서드 체인 끝에서 부작용<sup>side effect</sup>을 실행하는 겁니다.</p> + +<p><code>forEach()</code>는 배열을 변형하지 않습니다. 그러나 <code>callback</code>이 변형할 수는 있습니다.</p> + +<div class="note"> +<p>예외를 던지지 않고는 <code>forEach()</code>를 중간에 멈출 수 없습니다. 중간에 멈춰야 한다면 <code>forEach()</code>가 적절한 방법이 아닐지도 모릅니다.</p> + +<p>다음 방법으로는 조기에 반복을 종료할 수 있습니다.</p> + +<ul> + <li>간단한 <a href="/ko/docs/Web/JavaScript/Reference/Statements/for">for</a> 반복문</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a>, <a href="/ko/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> 반복문</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> +</ul> + +<p>다른 배열 메서드 {{jsxref("Array.prototype.every()", "every()")}}, {{jsxref("Array.prototype.some()", "some()")}}, {{jsxref("Array.prototype.find()", "find()")}}, {{jsxref("Array.prototype.findIndex()", "findIndex()")}}는 배열 요소를 판별 함수에 전달하고, 그 결과의 참/거짓 여부에 따라 반복의 종료 여부를 결정합니다.</p> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="초기화하지_않은_값의_반복_생략">초기화하지 않은 값의 반복 생략</h3> + +<pre class="brush: js">const arraySparse = [1,3,,7] +let numCallbackRuns = 0 + +arraySparse.forEach(function(element){ + console.log(element) + numCallbackRuns++ +}) + +console.log("numCallbackRuns: ", numCallbackRuns) + +// 1 +// 3 +// 7 +// numCallbackRuns: 3 +// comment: as you can see the missing value between 3 and 7 didn't invoke callback function.</pre> + +<h3 id="for_반복문을_forEach로_바꾸기"><code>for</code> 반복문을 <code>forEach()</code>로 바꾸기</h3> + +<pre class="brush: js">const items = ['item1', 'item2', 'item3']; +const copy = []; + +// 이전 +for (let i=0; i<items.length; i++) { + copy.push(items[i]); +} + +// 이후 +items.forEach(function(item){ + copy.push(item); +});</pre> + +<h3 id="배열_콘텐츠_출력">배열 콘텐츠 출력</h3> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> {{domxref("console.table()")}}을 사용하면 배열 내용물을 서식에 맞춰 출력할 수 있습니다.</p> + +<p>다음 예제는 <code>forEach()</code>를 사용한 다른 방법을 소개합니다.</p> +</div> + +<p>다음 코드는 배열의 각 요소에 대해 한 줄을 기록합니다:</p> + +<pre class="brush:js">function logArrayElements(element, index, array) { + console.log('a[' + index + '] = ' + element); +} + +// 인덱스 2는 배열의 그 위치에 항목이 없기에 +// 건너뜀을 주의하세요. +[2, 5, , 9].forEach(logArrayElements); +// 기록: +// a[0] = 2 +// a[1] = 5 +// a[3] = 9 +</pre> + +<h3 id="thisArg_사용"><code>thisArg</code> 사용</h3> + +<p>다음 예제는 배열의 각 항목에서 객체의 속성을 갱신합니다:</p> + +<pre class="brush:js">function Counter() { + this.sum = 0 + this.count = 0 +} +Counter.prototype.add = function(array) { + array.forEach(function(entry) { + this.sum += entry + ++this.count + }, this) + // ^---- 주의 +} + +const obj = new Counter() +obj.add([2, 5, 9]) +obj.count +// 3 +obj.sum +// 16</pre> + +<p><code>thisArg</code> 매개변수(<code>this</code>)를 <code>forEach()</code>에 제공했기에, <code>callback</code>은 전달받은 <code>this</code>의 값을 자신의 <code>this</code> 값으로 사용할 수 있습니다. </p> + +<div class="note"> +<p><a href="/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션">화살표 함수 표현식</a>을 사용하여 함수 인수를 전달하는 경우 <code>thisArg</code> 매개변수는 화살표 함수가 {{jsxref("Operators/this", "this")}} 값을 렉시컬(lexical, 정적) 바인딩하기에 생략될 수 있습니다.</p> +</div> + +<h3 id="객체_복사_함수">객체 복사 함수</h3> + +<p>다음 코드는 주어진 객체의 사본을 만듭니다.</p> + +<p>객체 사본을 만드는 방법에는 여러가지가 있습니다, 다음은 그 중 한 방법으로, ECMAScript 5 <code>Object.*</code> 메타 속성 함수를 사용하여 <code>Array.prototype.forEach()</code>가 작동하는 법을 설명하기 위한 코드입니다.</p> + +<pre class="brush: js">function copy(obj) { + const copy = Object.create(Object.getPrototypeOf(obj)) + const propNames = Object.getOwnPropertyNames(obj) + + propNames.forEach(function(name) { + const desc = Object.getOwnPropertyDescriptor(obj, name) + Object.defineProperty(copy, name, desc) + }) + + return copy +} + +const obj1 = { a: 1, b: 2 } +const obj2 = copy(obj1) // obj2 looks like obj1 now</pre> + +<h3 id="반복_중_배열이_변경으로_인한_반복_생략">반복 중 배열이 변경으로 인한 반복 생략</h3> + +<p>다음 예제에서는 <code>"one"</code>, <code>"two"</code>, <code>"four"</code>를 기록합니다.</p> + +<p><code>forEach()</code>가 값 <code>"two"</code>를 포함하는 항목에 도달하면 전체 배열의 첫 번째 항목을 제거하여, 나머지 모든 항목이 한 위치 앞으로 이동합니다. 요소 <code>"four"</code>는 이제 배열에서 보다 앞에 위치하므로 <code>"three"</code>는 건너 뜁니다.</p> + +<p><code>forEach()</code>는 반복 전에 배열의 복사본을 만들지 않습니다.</p> + +<pre class="brush:js">let words = ['one', 'two', 'three', 'four'] +words.forEach(function(word) { + console.log(word) + if (word === 'two') { + words.shift() + } +}) +// one +// two +// four</pre> + +<h3 id="배열_평탄화">배열 평탄화</h3> + +<p>다음 예제는 오직 시연 용으로만 추가한 것으로, 평탄화를 하려면 {{jsxref("Array.prototype.flat()")}}을 사용하세요.</p> + +<pre class="brush: js">function flatten(arr) { + const result = [] + + arr.forEach((i) => { + if (Array.isArray(i)) { + result.push(...flatten(i)) + } else { + result.push(i) + } + }) + + return result +} + +// Usage +const nested = [1, 2, 3, [4, 5, [6, 7], 8, 9]] + +flatten(nested) // [1, 2, 3, 4, 5, 6, 7, 8, 9]</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Array.forEach")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Map.prototype.forEach()")}}</li> + <li>{{jsxref("Set.prototype.forEach()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/from/index.html b/files/ko/web/javascript/reference/global_objects/array/from/index.html new file mode 100644 index 0000000000..487cc36848 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/from/index.html @@ -0,0 +1,244 @@ +--- +title: Array.from() +slug: Web/JavaScript/Reference/Global_Objects/Array/from +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Method + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/from +--- +<div>{{JSRef}}</div> + +<p><code><strong>Array.from()</strong></code> 메서드는 유사 배열 객체(array-like object)나반복 가능한 객체(iterable object)를 얕게 복사해새로운<code>Array</code> 객체를 만듭니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-from.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="syntaxbox">Array.from(<em>arrayLike</em>[, <em>mapFn</em>[, <em>thisArg</em>]]) +</pre> + +<h3 id="Parameters" name="Parameters"><span>매개변수</span></h3> + +<dl> + <dt><code>arrayLike</code></dt> + <dd>배열로 변환하고자 하는유사 배열 객체나 반복 가능한 객체.</dd> + <dt><code>mapFn</code>{{Optional_inline}}</dt> + <dd>배열의 모든 요소에 대해 호출할 맵핑 함수.</dd> + <dt><code>thisArg</code>{{Optional_inline}}</dt> + <dd><code>mapFn</code> 실행 시에 <code>this</code>로 사용할 값.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>새로운 {{jsxref("Array")}} 인스턴스.</p> + +<h2 id="Description" name="Description">설명</h2> + +<p>다음과 같은 경우에 <code>Array.from()</code>으로새<code>Array</code>를 만들 수 있습니다.</p> + +<ul> + <li>유사 배열 객체 (<code>length</code> 속성과 인덱싱된 요소를 가진 객체)</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/iterable">순회 가능한 객체</a> ({{jsxref("Map")}}, {{jsxref("Set")}} 등객체의 요소를 얻을 수 있는 객체)</li> +</ul> + +<p><code>Array.from()</code>은 선택 매개변수인 <code>mapFn</code>를 가지는데,배열(혹은 배열 서브클래스)의 각 요소를{{jsxref("Array.prototype.map", "맵핑", "", 0)}}할 때 사용할 수 있습니다. 즉,<code>Array.from(obj, mapFn, thisArg)</code>는 중간에 다른 배열을 생성하지 않는다는 점을 제외하면<code>Array.from(obj).map(mapFn, thisArg)</code>와 같습니다. 이 특징은 <a href="/ko/docs/Web/JavaScript/Typed_arrays">typed arrays</a>와 같은 특정 배열 서브클래스에서 중간 배열 값이 적절한 유형에 맞게 생략되기 때문에 특히 중요합니다.</p> + +<p><code>from()</code> 메서드의 <code>length</code> 속성은 1입니다.</p> + +<p>ES2015 이후, 클래스 구문은 내장 및 새 클래스의 상속을 가능케 했습니다. 그 결과로 <code>Array.from</code>과 같은 정적 메서드는 <code>Array</code>의 서브클래스에 의해 상속되며, <code>Array</code> 대신 자신의 인스턴스를 만듭니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="String에서_배열_만들기"><code>String</code>에서 배열 만들기</h3> + +<pre class="brush: js">Array.from('foo'); +// ["f", "o", "o"] +</pre> + +<h3 id="Set에서_배열_만들기"><code>Set</code>에서 배열 만들기</h3> + +<pre class="brush: js">const s = new Set(['foo', window]); +Array.from(s); +// ["foo", window] +</pre> + +<h3 id="Map에서_배열_만들기"><code>Map</code>에서 배열 만들기</h3> + +<pre class="brush: js">const m = new Map([[1, 2], [2, 4], [4, 8]]); +Array.from(m); +// [[1, 2], [2, 4], [4, 8]] + +const mapper = new Map([['1', 'a'], ['2', 'b']]); +Array.from(mapper.values()); +// ['a', 'b']; + +Array.from(mapper.keys()); +// ['1', '2']; +</pre> + +<h3 id="배열_형태를_가진_객체(arguments)에서_배열_만들기">배열 형태를 가진 객체(<code>arguments</code>)에서 배열 만들기</h3> + +<pre class="brush: js">function f() { + return Array.from(arguments); +} + +f(1, 2, 3); + +// [1, 2, 3] +</pre> + +<h3 id="Array.from과_화살표_함수_사용하기"><code>Array.from</code>과 화살표 함수 사용하기</h3> + +<pre class="brush: js">// Using an arrow function as the map function to +// manipulate the elements +Array.from([1, 2, 3], x => x + x); +// [2, 4, 6] + +// Generate a sequence of numbers +// Since the array is initialized with `undefined` on each position, +// the value of `v` below will be `undefined` +Array.from({length: 5}, (v, i) => i); +// [0, 1, 2, 3, 4] +</pre> + +<h3 id="시퀀스_생성기(range)">시퀀스 생성기(range)</h3> + +<pre class="brush: js">// Sequence generator function (commonly referred to as "range", e.g. Clojure, PHP etc) +const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step)); + +// Generate numbers range 0..4 +range(0, 4, 1); +// [0, 1, 2, 3, 4] + +// Generate numbers range 1..10 with step of 2 +range(1, 10, 2); +// [1, 3, 5, 7, 9] + +// Generate the alphabet using Array.from making use of it being ordered as a sequence +range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x => String.fromCharCode(x)); +// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]</pre> + +<h2 id="폴리필">폴리필</h2> + +<p><code><font face="consolas, Liberation Mono, courier, monospace">Array.from</font></code>은 ECMA-262 표준 제6판에 추가됐습니다.따라서 어떤 표준 구현체에서는 사용할 수없을 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 플랫폼에서도<code>Array.from</code>을사용할 수 있습니다. 아래 알고리즘은<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object" title="객체(object) 생성자(constructor)는 객체 레퍼(wrapper)를 생성합니다."><code>Object</code></a>와<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError" title="TypeError 객체는 변수의 값이 원하는 타입이 아닐 때 발생하는 에러를 표현합니다."><code>TypeError</code></a>가 변형되지 않고,<code>callback.call</code>의 계산 값이 원래의<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="call() 메소드는 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출합니다."><code>Function.prototype.call()</code></a>과 같은 경우ECMA-262 제6판이 명시한 것과 동일합니다.<span style="letter-spacing: -0.00278rem;">또한 반복가능자(iterable)는 완벽하게 폴리필할 수없기에 본 구현은 ECMA-262 제6판의 제네릭 반복가능자를 지원하지 않습니다.</span></p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 6, 22.1.2.1 +if (!Array.from) { + Array.from = (function () { + var toStr = Object.prototype.toString; + var isCallable = function (fn) { + return typeof fn === 'function' || toStr.call(fn) === '[object Function]'; + }; + var toInteger = function (value) { + var number = Number(value); + if (isNaN(number)) { return 0; } + if (number === 0 || !isFinite(number)) { return number; } + return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number)); + }; + var maxSafeInteger = Math.pow(2, 53) - 1; + var toLength = function (value) { + var len = toInteger(value); + return Math.min(Math.max(len, 0), maxSafeInteger); + }; + + // The length property of the from method is 1. + return function from(arrayLike/*, mapFn, thisArg */) { + // 1. Let C be the this value. + var C = this; + + // 2. Let items be ToObject(arrayLike). + var items = Object(arrayLike); + + // 3. ReturnIfAbrupt(items). + if (arrayLike == null) { + throw new TypeError('Array.from requires an array-like object - not null or undefined'); + } + + // 4. If mapfn is undefined, then let mapping be false. + var mapFn = arguments.length > 1 ? arguments[1] : void undefined; + var T; + if (typeof mapFn !== 'undefined') { + // 5. else + // 5. a If IsCallable(mapfn) is false, throw a TypeError exception. + if (!isCallable(mapFn)) { + throw new TypeError('Array.from: when provided, the second argument must be a function'); + } + + // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined. + if (arguments.length > 2) { + T = arguments[2]; + } + } + + // 10. Let lenValue be Get(items, "length"). + // 11. Let len be ToLength(lenValue). + var len = toLength(items.length); + + // 13. If IsConstructor(C) is true, then + // 13. a. Let A be the result of calling the [[Construct]] internal method + // of C with an argument list containing the single item len. + // 14. a. Else, Let A be ArrayCreate(len). + var A = isCallable(C) ? Object(new C(len)) : new Array(len); + + // 16. Let k be 0. + var k = 0; + // 17. Repeat, while k < len… (also steps a - h) + var kValue; + while (k < len) { + kValue = items[k]; + if (mapFn) { + A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k); + } else { + A[k] = kValue; + } + k += 1; + } + // 18. Let putStatus be Put(A, "length", len, true). + A.length = len; + // 20. Return A. + return A; + }; + }()); +}</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.from', 'Array.from')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Array.from")}}</p> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("TypedArray.from()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/includes/index.html b/files/ko/web/javascript/reference/global_objects/array/includes/index.html new file mode 100644 index 0000000000..a646fd3bb4 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/includes/index.html @@ -0,0 +1,173 @@ +--- +title: Array.prototype.includes() +slug: Web/JavaScript/Reference/Global_Objects/Array/includes +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes +--- +<div>{{JSRef}}</div> + +<p><strong><code>includes()</code></strong> 메서드는 배열이 특정 요소를 포함하고 있는지 판별합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-includes.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>arr</var>.includes(<em>valueToFind</em>[, <em>fromIndex</em>]) +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">valueToFind</span></font></dt> + <dd>탐색할 요소. + <div class="blockIndicator note"> + <p><strong>참고</strong>: 문자나 문자열을 비교할 때, <code>includes()</code>는 <strong>대소문자를 구분</strong>합니다.</p> + </div> + </dd> + <dt><code>fromIndex</code> {{optional_inline}}</dt> + <dd>이 배열에서 searchElement 검색을 시작할 위치입니다. 음의 값은 array.length + fromIndex의 인덱스를 asc로 검색합니다. 기본값은 0입니다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>{{jsxref("Boolean")}}.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">[1, 2, 3].includes(2); // true +[1, 2, 3].includes(4); // false +[1, 2, 3].includes(3, 3); // false +[1, 2, 3].includes(3, -1); // true +[1, 2, NaN].includes(NaN); // true +</pre> + +<h3 id="fromIndex_가_배열의_길이보다_같거나_큰_경우"><code>fromIndex</code> 가 배열의 길이보다 같거나 큰 경우</h3> + +<p><code>fromIndex</code> 가 배열의 길이보다 같거나 크다면, <code>false</code> 를 반환합니다. 배열은 검색되지 않을 것입니다.</p> + +<pre class="brush: js">var arr = ['a', 'b', 'c']; + +arr.includes('c', 3); // false +arr.includes('c', 100); // false</pre> + +<h3 id="0보다_작은_인덱스의_계산">0보다 작은 인덱스의 계산</h3> + +<p><code>fromIndex</code> 가 음수라면, 이 계산된 인덱스는 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">valueToFind</span></font> 를 찾기 시작할 배열의 위치로 사용되기 위해 연산됩니다. 만약 계산된 인덱스가 <code>-1 * array.length</code> 보다 작거나 같다면, 전체 배열이 검색될 것입니다.</p> + +<pre class="brush: js">// array length is 3 +// fromIndex is -100 +// computed index is 3 + (-100) = -97 + +var arr = ['a', 'b', 'c']; + +arr.includes('a', -100); // true +arr.includes('b', -100); // true +arr.includes('c', -100); // true +arr.includes('a', -2); // false</pre> + +<h3 id="제네릭_메소드로_사용되는_includes">제네릭 메소드로 사용되는 <code>includes()</code></h3> + +<p><code>includes()</code> 메서드는 의도적으로 제네릭입니다. 배열 객체가 되기 위한 <code>this</code> 값을 요구하지 않아, 다른 종류의 객체에 적용될 수 있습니다 (e.g. 유사 배열 객체). 아래 예시는 이 함수의 <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a> 객체로 호출되는 <code>includes()</code> 메소드를 보여줍니다.</p> + +<pre class="brush: js">(function() { + console.log([].includes.call(arguments, 'a')); // true + console.log([].includes.call(arguments, 'd')); // false +})('a','b','c');</pre> + +<h2 id="폴리필">폴리필</h2> + +<pre class="brush: js"><code>// https://tc39.github.io/ecma262/#sec-array.prototype.includes +if (!Array.prototype.includes) { + Object.defineProperty(Array.prototype, 'includes', { + value: function(searchElement, fromIndex) { + + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + // 1. Let O be ? ToObject(this value). + var o = Object(this); + + // 2. Let len be ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // 3. If len is 0, return false. + if (len === 0) { + return false; + } + + // 4. Let n be ? ToInteger(fromIndex). + // (If fromIndex is undefined, this step produces the value 0.) + var n = fromIndex | 0; + + // 5. If n ≥ 0, then + // a. Let k be n. + // 6. Else n < 0, + // a. Let k be len + n. + // b. If k < 0, let k be 0. + var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); + + function sameValueZero(x, y) { + return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y)); + } + + // 7. Repeat, while k < len + while (k < len) { + // a. Let elementK be the result of ? Get(O, ! ToString(k)). + // b. If SameValueZero(searchElement, elementK) is true, return true. + if (sameValueZero(o[k], searchElement)) { + return true; + } + // c. Increase k by 1. + k++; + } + + // 8. Return false + return false; + } + }); +}</code></pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> + <td>{{Spec2('ES7')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("javascript.builtins.Array.includes")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("TypedArray.prototype.includes()")}}</li> + <li>{{jsxref("String.prototype.includes()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/index.html b/files/ko/web/javascript/reference/global_objects/array/index.html new file mode 100644 index 0000000000..4bb18af837 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/index.html @@ -0,0 +1,493 @@ +--- +title: Array +slug: Web/JavaScript/Reference/Global_Objects/Array +tags: + - Array + - Example + - Global Objects + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array +--- +<div>{{JSRef}}</div> + +<p>JavaScript <strong><code>Array</code></strong> 전역 객체는 배열을 생성할 때 사용하는 리스트 형태의 고수준 객체입니다.</p> + +<h2 id="설명">설명</h2> + +<p>배열은 프로토타입으로 탐색과 변형 작업을 수행하는 메서드를 갖는, 리스트와 비슷한 객체입니다. JavaScript에서 배열의 길이와 요소의 자료형은 고정되어 있지 않습니다. 배열의 길이가 언제든지 늘어나거나 줄어들 수 있기 때문에 JavaScript 배열들은 밀집도가 보장되지 않습니다. 보통 이 성질은 편리하지만, 목적에 맞지 않는다면 형식화 배열(typed array)을 사용하는 것을 고려해보세요.</p> + +<p>배열은 요소 인덱스로 문자열(<a href="https://ko.wikipedia.org/wiki/%EC%97%B0%EA%B4%80_%EB%B0%B0%EC%97%B4">연관 배열</a>)을 사용할 수 없으며 무조건 정수만 허용합니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a>를 사용해 정수 외 키에 접근할 경우 배열 리스트의 요소가 아니라 배열 객체의 속성 변수를 설정하거나 회수합니다. 배열 객체의 속성과 배열 요소의 리스트의 요소는 서로 다른 별개의 항목으로, <a href="/ko/docs/Web/JavaScript/Guide/Indexed_collections#배열_객체의_메서드">순회 및 변형 작업</a>은 객체 속성에 적용되지 않습니다.</p> + +<h3 id="자주_사용하는_연산">자주 사용하는 연산</h3> + +<h4 id="배열_만들기">배열 만들기</h4> + +<pre class="brush: js">let fruits = ['사과', '바나나'] + +console.log(fruits.length) +// 2 +</pre> + +<h4 id="인덱스로_배열의_항목에_접근하기">인덱스로 배열의 항목에 접근하기</h4> + +<pre class="brush: js">let first = fruits[0] +// 사과 + +let last = fruits[fruits.length - 1] +// 바나나 +</pre> + +<h4 id="배열의_항목들을_순환하며_처리하기">배열의 항목들을 순환하며 처리하기</h4> + +<pre class="brush: js">fruits.forEach(function (item, index, array) { + console.log(item, index) +}) +// 사과 0 +// 바나나 1 +</pre> + +<h4 id="배열_끝에_항목_추가하기">배열 끝에 항목 추가하기</h4> + +<pre class="brush: js">let newLength = fruits.push('오렌지') +// ["사과", "바나나", "오렌지"] +</pre> + +<h4 id="배열_끝에서부터_항목_제거하기">배열 끝에서부터 항목 제거하기</h4> + +<pre class="brush: js">let last = fruits.pop() // 끝에있던 '오렌지'를 제거 +// ["사과", "바나나"] +</pre> + +<h4 id="배열_앞에서부터_항목_제거하기">배열 앞에서부터 항목 제거하기</h4> + +<pre class="brush: js">let first = fruits.shift() // 제일 앞의 '사과'를 제거 +// ["바나나"] +</pre> + +<h4 id="배열_앞에_항목_추가하기">배열 앞에 항목 추가하기</h4> + +<pre class="brush: js">let newLength = fruits.unshift('딸기') // 앞에 추가 +// ["딸기", "바나나"] +</pre> + +<h4 id="배열_안_항목의_인덱스_찾기">배열 안 항목의 인덱스 찾기</h4> + +<pre class="brush: js">fruits.push('망고') +// ["딸기", "바나나", "망고"] + +let pos = fruits.indexOf("바나나") +// 1 +</pre> + +<h4 id="인덱스_위치에_있는_항목_제거하기">인덱스 위치에 있는 항목 제거하기</h4> + +<pre class="brush: js">let removedItem = fruits.splice(pos, 1) // 항목을 제거하는 방법 + +// ["딸기", "망고"] +</pre> + +<h4 id="인덱스_위치에서부터_여러개의_항목_제거하기">인덱스 위치에서부터 여러개의 항목 제거하기</h4> + +<pre class="brush: js">let vegetables = ['양배추', '순무', '무', '당근'] +console.log(vegetables) +// ["양배추", "순무", "무", "당근"] + +let pos = 1 +let n = 2 + +let removedItems = vegetables.splice(pos, n) +// 배열에서 항목을 제거하는 방법 +// pos 인덱스부터 n개의 항목을 제거함 + +console.log(vegetables) +// ["양배추", "당근"] (원 배열 vegetables의 값이 변함) + +console.log(removedItems) +// ["순무", "무"] +</pre> + +<h4 id="배열_복사하기">배열 복사하기</h4> + +<pre class="brush: js">let shallowCopy = fruits.slice() // 사본을 만드는 방법 +// ["딸기", "망고"] +</pre> + +<h3 id="배열_요소에_접근하기">배열 요소에 접근하기</h3> + +<p>JavaScript 배열의 인덱스는 0부터 시작합니다. 즉, 배열 첫 번째 요소의 인덱스는 0이고, 마지막 요소의 인덱스는 배열의 {{jsxref("Array.length", "length")}} 속성에서 1을 뺀 것과 같습니다.</p> + +<p>잘못된 인덱스를 사용하면 <code>undefined</code>를 반환합니다.</p> + +<pre class="brush: js">let arr = ['첫 번재 요소입니다', '두 번째 요소입니다', '마지막 요소입니다'] +console.log(arr[0]) // '첫 번재 요소입니다'를 기록 +console.log(arr[1]) // '두 번재 요소입니다'를 기록 +console.log(arr[arr.length - 1]) // '마지막 요소입니다'를 기록 +</pre> + +<p><code>toString</code>이 속성인 것과 마찬가지로(정확히 하자면, <code>toString()</code>은 메서드입니다) 배열의 요소도 속성입니다. 하지만 아래의 예시처럼 배열 요소에 접근하려 하면, 속성 이름이 유효하지 않기 때문에 구문 오류가 발생합니다.</p> + +<pre class="brush: js">console.log(arr.0) // 구문 오류 +</pre> + +<p>이 점에는 JavaScript 배열과 속성에 특별한 점이 없습니다. 숫자로 시작하는 JavaScript 속성은 마침표 구문으로 접근할 수 없으며, 반드시 괄호 표기법으로 접근해야 합니다.</p> + +<p>예를 들어 <code>'3d'</code>라는 이름의 속성을 가진 객체에서 해당 속성에 접근할 땐 괄호 표기법을 사용해야만 합니다.</p> + +<pre class="brush: js">let years = [1950, 1960, 1970, 1980, 1990, 2000, 2010] +console.log(years.0) // 구문 오류 +console.log(years[0]) // 정상 작동 +</pre> + +<pre class="brush: js">renderer.3d.setTexture(model, 'character.png') // 구문 오류 +renderer['3d'].setTexture(model, 'character.png') // 정상 작동 +</pre> + +<p><code>3d</code> 예시에서 <code>'3d'</code>를 따옴표로 감싸야 함에 유의하세요. JavaScript 배열 인덱스도 따옴표로 둘러쌀 수는 있지만(<code>years[2]</code> 대신에 <code>years['2']</code>처럼), 굳이 필요하지는 않습니다.</p> + +<p><code>years[2]</code>의 2는 JavaScript 엔진이 암시적인 <code>toString</code> 변환을 사용해 문자열로 변환합니다. 그 결과로서 <code>'2'</code>와 <code>'02'</code>는 <code>years</code> 객체에서 서로 다른 칸을 가리키며, 다음 코드는 <code>true</code>가 될 수 있습니다.</p> + +<pre class="brush: js">console.log(years['2'] != years['02']); +</pre> + +<h3 id="length_와_숫자형_속성의_관계"><code>length</code> 와 숫자형 속성의 관계</h3> + +<p>JavaScript 배열의 {{jsxref("Array.length", "length")}} 속성과 숫자형 속성은 연결되어 있습니다.</p> + +<p>몇몇 배열 내장 메서드({{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}} 등)은 호출했을 때 배열의 {{jsxref("Array.length", "length")}} 속성의 값을 참조합니다.</p> + +<p>다른 메서드({{jsxref("Array.push", "push")}}, {{jsxref("Array.splice", "splice")}} 등) 또한 배열의 {{jsxref("Array.length", "length")}} 속성의 업데이트를 유발합니다.</p> + +<pre class="brush: js">const fruits = [] +fruits.push('banana', 'apple', 'peach') + +console.log(fruits.length) // 3 +</pre> + +<p>JavaScript 배열의 속성을 설정할 때 그 속성이 유효한 배열 인덱스이고 그 인덱스가 현재 배열의 경계를 넘어간다면, JavaScript 엔진은 배열의 {{jsxref("Array.length", "length")}} 속성을 그에 맞춰 업데이트 합니다.</p> + +<pre class="brush: js">fruits[5] = 'mango' +console.log(fruits[5]) // 'mango' +console.log(Object.keys(fruits)) // ['0', '1', '2', '5'] +console.log(fruits.length) // 6 +</pre> + +<p>{{jsxref("Array.length", "length")}}를 직접 늘릴 수 있습니다.</p> + +<pre class="brush: js">fruits.length = 10; +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 10 +</pre> + +<p>하지만, {{jsxref("Array.length", "length")}} 속성을 감소시키면 요소를 지웁니다.</p> + +<pre class="brush: js">fruits.length = 2 +console.log(Object.keys(fruits)) // ['0', '1'] +console.log(fruits.length) // 2 +</pre> + +<p>{{jsxref("Array.length")}} 문서에 더 자세한 설명이 있습니다.</p> + +<h3 id="매치_결과를_이용한_배열_생성">매치 결과를 이용한 배열 생성</h3> + +<p>정규표현식과 문자열 사이의 매치 결과로 JavaScript 배열을 만들 수 있습니다. 이 배열은 매치에 대한 정보를 제공하는 속성들과 요소들을 가집니다. 이러한 배열은 {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, {{jsxref("String.replace")}}로부터 반환됩니다. 이 속성들과 요소들에 대한 설명을 돕기위해, 다음 예제를 보고 아래 테이블을 참조해주세요.</p> + +<pre class="brush: js">// 하나의 d와 하나 이상의 b에 하나의 d가 뒤따라 일치해야 합니다. +// 일치한 b와 다음 d를 기억하십시오. +// 대소문자 구분은 무시됩니다. + +var myRe = /d(b+)(d)/i; +var myArray = myRe.exec('cdbBdbsbz'); +</pre> + +<p>매치로부터 반환되는 속성들과 요소들은 다음과 같습니다:</p> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <td class="header">속성/요소</td> + <td class="header">설명</td> + <td class="header">예시</td> + </tr> + <tr> + <td><code>input </code> {{ReadOnlyInline}}</td> + <td>정규 표현식과 일치시키는 원본 문자열을 나타내는 읽기 전용 속성입니다.</td> + <td><code>"cdbBdbsbz"</code></td> + </tr> + <tr> + <td><code>index </code> {{ReadOnlyInline}}</td> + <td>원본 문자열에서 정규 표현식이 처음 일치하는 문자열의 위치(원본 문자열의 첫 문자 위치를 0으로 하는)를 나타내는 읽기 전용 속성입니다.</td> + <td><code>1</code></td> + </tr> + <tr> + <td><code>[0]</code> {{ReadOnlyInline}}</td> + <td>원본 문자열에서 정규 표현식이 처음 일치하는 문자열을 지정하는 읽기 전용 요소입니다.</td> + <td><code>"dbBd"</code></td> + </tr> + <tr> + <td><code>[1], ...[n] </code> {{ReadOnlyInline}}</td> + <td>만약 정규 표현식에 괄호가 포함돼 있다면 괄호에 일치하는 부분 문자열을 나타내는 읽기 전용 요소들입니다. 가능한 괄호 안의 부분 문자열의 수는 무제한입니다.</td> + <td><code>[1]: bB</code><br> + <code>[2]: d</code></td> + </tr> + </tbody> +</table> + +<h2 id="생성자">생성자</h2> + +<dl> + <dt>{{jsxref("Array.Array", "Array()")}}</dt> + <dd><code>Array</code> 객체를 생성합니다.</dd> +</dl> + +<h2 id="정적_속성">정적 속성</h2> + +<dl> + <dt><code>Array.length</code></dt> + <dd>값이 1인 <code>Array</code> 생성자의 길이 속성입니다.</dd> + <dt>{{jsxref("Array.@@species", "get Array[@@species]")}}</dt> + <dd>파생 객체를 생성하는데 사용하는 생성자 함수입니다.</dd> +</dl> + +<h2 id="정적_메서드">정적 메서드</h2> + +<dl> + <dt>{{jsxref("Array.from()")}}</dt> + <dd>유사 배열 또는 반복 가능한 객체로부터 새로운 <code>Array</code> 인스턴스를 생성합니다.</dd> + <dt>{{jsxref("Array.isArray()")}}</dt> + <dd>만약 변수가 배열이면 참을, 아니면 거짓을 반환합니다.</dd> + <dt>{{jsxref("Array.of()")}}</dt> + <dd>전달인자의 개수나 데이터 타입에 관계없이 새 <code>Array</code> 인스턴스를 생성합니다.</dd> +</dl> + +<h2 id="Array_인스턴스"><code>Array</code> 인스턴스</h2> + +<p>모든 <code>Array</code> 인스턴스는 <code>Array.prototype</code>을 상속합니다. 다른 생성자와 마찬가지로, <code>Array()</code> 생성자의 프로토타입을 수정하면 모든 <code>Array</code> 인스턴스도 수정의 영향을 받습니다. 예를 들면, 새로운 메서드와 속성을 추가해 모든 <code>Array</code>를 확장할 수 있으므로, {{glossary("polyfill", "폴리필")}}에 쓰입니다.</p> + +<p>그러나 배열 객체에 비표준 메서드를 추가하면 나중에 스스로, 혹은 <a href="https://developers.google.com/web/updates/2018/03/smooshgate">JavaScript에 기능이 추가</a>될 경우 문제가 될 수 있습니다.</p> + +<p>잘 모를 법한 사실: <code>Array.prototype</code>은 그 스스로 <code>Array</code>입니다.</p> + +<pre class="brush: js">Array.isArray(Array.prototype) // true</pre> + +<h2 id="인스턴스_속성">인스턴스 속성</h2> + +<div> +<dl> + <dt><code>Array.prototype.constructor</code></dt> + <dd>객체의 프로토타입을 생성하는 함수를 지정합니다.</dd> + <dt>{{jsxref("Array.prototype.length")}}</dt> + <dd>배열의 원소 수를 나타냅니다.</dd> + <dt>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</dt> + <dd>{{jsxref("Statements/with", "with")}} 결속 범위로부터 제외하려는 속성 이름이 들어있는 기호입니다.</dd> +</dl> +</div> + +<h2 id="인스턴스_메서드">인스턴스 메서드</h2> + +<h4 id="변경자_메서드">변경자 메서드</h4> + +<div> +<p>변경자 메서드는 배열을 수정합니다.</p> + +<dl> + <dt>{{jsxref("Array.prototype.copyWithin()")}}</dt> + <dd>배열 내의 지정된 요소들을 동일한 배열 내에서 복사합니다.</dd> + <dt>{{jsxref("Array.prototype.fill()")}}</dt> + <dd>배열 안의 시작 인덱스부터 끝 인덱스까지의 요소값을 지정된 정적 값으로 채웁니다.</dd> + <dt>{{jsxref("Array.prototype.pop()")}}</dt> + <dd>배열에서 마지막 요소를 뽑아내고, 그 요소를 반환합니다.</dd> + <dt>{{jsxref("Array.prototype.push()")}}</dt> + <dd>배열의 끝에 하나 이상의 요소를 추가하고, 변경된 배열의 길이를 반환합니다.</dd> + <dt>{{jsxref("Array.prototype.reverse()")}}</dt> + <dd>배열의 요소 순서를 반전시킵니다. 첫 번째가 마지막이 되고 마지막이 첫 번째가 됩니다.</dd> + <dt>{{jsxref("Array.prototype.shift()")}}</dt> + <dd>배열에서 첫 번째 요소를 삭제하고 그 요소를 반환합니다.</dd> + <dt>{{jsxref("Array.prototype.sort()")}}</dt> + <dd>배열의 요소를 정렬하고 그 배열을 반환합니다.</dd> + <dt>{{jsxref("Array.prototype.splice()")}}</dt> + <dd>배열에서 요소를 추가/삭제합니다.</dd> + <dt>{{jsxref("Array.prototype.unshift()")}}</dt> + <dd>배열의 앞에 하나 이상의 요소를 추가하고 새로운 길이를 반환합니다.</dd> +</dl> +</div> + +<h4 id="접근자_메서드">접근자 메서드</h4> + +<div> +<p>접근자 메서드는 배열을 수정하지 않고, 기존 배열의 일부에 기반한 새로운 배열 또는 값을 반환합니다.</p> + +<dl> + <dt>{{jsxref("Array.prototype.concat()")}}</dt> + <dd>배열을 매개변수로 주어진 배열/값과 이어붙인 새로운 배열을 반환합니다.</dd> + <dt>{{jsxref("Array.prototype.filter()")}}</dt> + <dd>지정한 콜백의 반환 결과가 <code>true</code>인 요소만 모은 새로운 배열을 반환합니다.</dd> + <dt>{{jsxref("Array.prototype.includes()")}}</dt> + <dd>배열이 주어진 값을 포함하는지 판별해 <code>true</code> 또는 <code>false</code>를 반환합니다.</dd> + <dt>{{jsxref("Array.prototype.indexOf()")}}</dt> + <dd>배열에서 주어진 값과 일치하는 제일 앞의 인덱스를 반환합니다. 없으면 <code>-1</code>을 반환합니다.</dd> + <dt>{{jsxref("Array.prototype.join()")}}</dt> + <dd>배열의 모든 요소를 문자열로 합칩니다.</dd> + <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt> + <dd>배열에서 주어진 값과 일치하는 제일 뒤의 인덱스를 반환합니다. 없으면 <code>-1</code>을 반환합니다.</dd> + <dt>{{jsxref("Array.prototype.slice()")}}</dt> + <dd>배열의 일부를 추출한 새 배열을 반환합니다.</dd> + <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>지정한 배열을 나타내는 배열 리터럴을 반환합니다. 새로운 배열을 만들기 위해 이 값을 사용할 수 있습니다. {{jsxref("Object.prototype.toSource()")}} 메서드를 재정의합니다.</dd> + <dt>{{jsxref("Array.prototype.toString()")}}</dt> + <dd>배열과 그 요소를 나타내는 문자열을 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 재정의합니다.</dd> + <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt> + <dd>배열과 그 요소를 나타내는 지역화된 문자열을 반환합니다. {{jsxref("Object.prototype.toLocaleString()")}} 메서드를 재정의합니다.</dd> +</dl> +</div> + +<h4 id="순회_메서드">순회 메서드</h4> + +<p>배열을 처리하면서 호출할 콜백 함수를 받는 메서드 여럿이 존재합니다. 이런 메서드를 호출하면 배열의 <code>length</code>를 기억하므로, 아직 순회를 끝내지 않았을 때 요소를 더 추가하면 콜백이 방문하지 않습니다.</p> + +<p>요소의 값을 바꾸거나, 요소를 제거하는 등 다른 변경점은 콜백 방문 시점에 따라 최종 값에 영향을 줄 수 있습니다. 비록 이런 동작 방식은 잘 정의되어 있으나, 여러분의 코드를 다른 사람이 읽을 때 헷갈리지 않도록 여기에 의존하면 안됩니다.</p> + +<p>반드시 배열을 변형해야 한다면, 새로운 배열로 복사하세요.</p> + +<div> +<dl> + <dt>{{jsxref("Array.prototype.entries()")}}</dt> + <dd>배열의 각 인덱스에 대한 키/값 쌍을 포함하는 새로운 배열 반복자 객체를 반환합니다.</dd> + <dt>{{jsxref("Array.prototype.every()")}}</dt> + <dd>배열의 모든 요소가 주어진 판별 콜백을 만족할 경우 <code>true</code>를 반환합니다.</dd> + <dt>{{jsxref("Array.prototype.find()")}}</dt> + <dd>주어진 판별 콜백을 만족하는 첫 번째 요소를 반환합니다. 만족하는 요소가 없으면 <code>undefined</code>를 반환합니다.</dd> + <dt>{{jsxref("Array.prototype.findIndex()")}}</dt> + <dd>주어진 판별 콜백을 만족하는 첫 번째 요소의 인덱스를 반환합니다. 만족하는 요소가 없으면 <code>undefined</code>를 반환합니다.</dd> + <dt>{{jsxref("Array.prototype.forEach()")}}</dt> + <dd>배열의 각각의 요소에 대해 콜백을 호출합니다.</dd> + <dt>{{jsxref("Array.prototype.keys()")}}</dt> + <dd>배열의 각 인덱스에 대한 키를 가지는 새로운 배열 반복자 객체를 반환합니다.</dd> + <dt>{{jsxref("Array.prototype.map()")}}</dt> + <dd>배열의 모든 요소 각각에 대하여 주어진 콜백 함수를 호출하고, 그 반환값을 모은 새로운 배열을 반환합니다.</dd> + <dt>{{jsxref("Array.prototype.reduce()")}}</dt> + <dd><span class="short_text" id="result_box" lang="ko"><span>주어진 콜백 함수를 가산기와 요소 각각에 대해 왼쪽에서 오른쪽으로 호출하여 하나의 값으로 줄인(reduce) 결과를 반환합니다.</span></span></dd> + <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt> + <dd><span class="short_text" id="result_box" lang="ko"><span>주어진 콜백 함수를 가산기와 요소 각각에 대해 오른쪽에서 왼쪽으로 호출하여 하나의 값으로 줄인(reduce) 결과를 반환합니다.</span></span></dd> + <dt>{{jsxref("Array.prototype.some()")}}</dt> + <dd>배열의 어떤 요소가 주어진 판별 콜백을 만족할 경우 <code>true</code>를 반환합니다.</dd> + <dt>{{jsxref("Array.prototype.values()")}}</dt> + <dd>배열의 각 인덱스에 대한 값을 가지는 새로운 배열 반복자 객체를 반환합니다.</dd> + <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}</dt> + <dd>배열의 각 인덱스에 대한 값을 가지는 새로운 배열 반복자 객체를 반환합니다.</dd> +</dl> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="배열_생성">배열 생성</h3> + +<p>아래 예제는 길이 0의 배열 <code>msgArray</code> 을 생성하고, <code>msgArray[0]</code> 와 <code>msgArray[99]</code> 에 값을 할당하여, 배열의 길이를 100으로 변경합니다.</p> + +<pre class="brush: js">let msgArray = [] +msgArray[0] = 'Hello' +msgArray[99] = 'world' + +if (msgArray.length === 100) { + console.log('The length is 100.') +}</pre> + +<h3 id="2차원_배열_생성">2차원 배열 생성</h3> + +<p>아래의 예제는 2차원 문자열 배열로 체스보드를 생성합니다. 첫번째 이동은 (6,4)의 'p'를 (4,4)로 복사하여 이루어집니다. 이전 위치 (6,4)는 빈공간으로 만듭니다.</p> + +<pre class="brush: js">let board = [ + ['R','N','B','Q','K','B','N','R'], + ['P','P','P','P','P','P','P','P'], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + ['p','p','p','p','p','p','p','p'], + ['r','n','b','q','k','b','n','r'] ] + +console.log(board.join('\n') + '\n\n') + +// Move King's Pawn forward 2 +board[4][4] = board[6][4] +board[6][4] = ' ' +console.log(board.join('\n'))</pre> + +<p>결과는 다음과 같습니다.</p> + +<pre class="eval">R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , , , , , + , , , , , , , +p,p,p,p,p,p,p,p +r,n,b,q,k,b,n,r + +R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , ,p, , , + , , , , , , , +p,p,p,p, ,p,p,p +r,n,b,q,k,b,n,r +</pre> + +<h3 id="배열을_사용하여_일련의_값을_테이블처럼_표시하기">배열을 사용하여 일련의 값을 테이블처럼 표시하기</h3> + +<pre class="brush: js">const values = [] +for (let x = 0; x < 10; x++){ + values.push([ + 2 ** x, + 2 * x ** 2 + ]) +} +console.table(values)</pre> + +<p>결과는 다음과 같습니다.</p> + +<pre class="eval line-numbers language-html">0 1 0 +1 2 2 +2 4 8 +3 8 18 +4 16 32 +5 32 50 +6 64 72 +7 128 98 +8 256 128 +9 512 162 +</pre> + +<p>(첫번째 열은 (인덱스))</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Initial publication</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}</td> + <td>ECMAScript 1</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Array")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Indexing_object_properties">JavaScript Guide: “Indexing object properties”</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Array_Object">JavaScript Guide: “Predefined Core Objects: <code>Array</code> Object”</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a></li> + <li><a href="https://github.com/plusdude/array-generics">Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras</a></li> + <li><a href="/en-US/docs/JavaScript_typed_arrays">Typed Arrays</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/indexof/index.html b/files/ko/web/javascript/reference/global_objects/array/indexof/index.html new file mode 100644 index 0000000000..9748918d5a --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/indexof/index.html @@ -0,0 +1,196 @@ +--- +title: Array.prototype.indexOf() +slug: Web/JavaScript/Reference/Global_Objects/Array/indexOf +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf +--- +<div>{{JSRef}}</div> + +<p><code>indexOf()</code> 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 문자열은 {{jsxref("String.prototype.indexOf()")}}를 참고하세요.</p> +</div> + +<p>{{EmbedInteractiveExample("pages/js/array-indexof.html")}}</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>arr</var>.indexOf(<var>searchElement[, fromIndex]</var>) +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>searchElement</code></dt> + <dd>배열에서 찾을 요소입니다.</dd> + <dt><code>fromIndex</code> {{optional_inline}}</dt> + <dd>검색을 시작할 색인입니다. 인덱스가 배열의 길이보다 크거나 같은 경우 -1이 반환되므로 배열이 검색되지 않습니다. 제공된 색인 값이 음수이면 배열 끝에서부터의 오프셋 값으로 사용됩니다. 참고 : 제공된 색인이 음수이면 배열은 여전히 앞에서 뒤로 검색됩니다. 계산 된 인덱스가 0보다 작 으면 전체 배열이 검색됩니다. 기본값 : 0 (전체 배열 검색).</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>배열 내의 요소의 최초의 인덱스. 발견되지 않으면 -1.</p> + +<h2 id="설명">설명</h2> + +<p><code>indexOf()</code>는 엄격한 동등성 (<code>===</code> 또는 triple-equals 연산자에서 사용하는 것과 같은 메서드)을 사용하여 검색 요소를 <code>Array</code>의 요소와 비교합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="indexOf_사용하기"><code>indexOf()</code> 사용하기</h3> + +<p>다음 예제에서는 indexOf ()를 사용하여 배열의 값을 찾습니다.</p> + +<pre class="brush: js">var array = [2, 9, 9]; +array.indexOf(2); // 0 +array.indexOf(7); // -1 +array.indexOf(9, 2); // 2 +array.indexOf(2, -1); // -1 +array.indexOf(2, -3); // 0 +</pre> + +<h3 id="요소의_모든_항목_찾기">요소의 모든 항목 찾기</h3> + +<pre class="brush: js">var indices = []; +var array = ['a', 'b', 'a', 'c', 'a', 'd']; +var element = 'a'; +var idx = array.indexOf(element); +while (idx != -1) { + indices.push(idx); + idx = array.indexOf(element, idx + 1); +} +console.log(indices); +// [0, 2, 4] +</pre> + +<h3 id="요소가_배열에_존재하는지_확인하고_배열을_업데이트">요소가 배열에 존재하는지 확인하고 배열을 업데이트</h3> + +<pre class="brush: js">function updateVegetablesCollection (veggies, veggie) { + if (veggies.indexOf(veggie) === -1) { + veggies.push(veggie); + console.log('새로운 veggies 컬렉션 : ' + veggies); + } else if (veggies.indexOf(veggie) > -1) { + console.log(veggie + ' 은 이미 veggies 컬렉션에 존재합니다.'); + } +} + +var veggies = ['potato', 'tomato', 'chillies', 'green-pepper']; + +updateVegetablesCollection(veggies, 'spinach'); +// 새로운 veggies 컬렉션 : potato, tomato, chillies, green-pepper, spinach +updateVegetablesCollection(veggies, 'spinach'); +// spinach 은 이미 veggies 컬렉션에 존재합니다. +</pre> + +<h2 id="폴리필">폴리필</h2> + +<pre class="brush: js">// ECMA-262, 제 5 판, 15.4.4.14의 생산 단계 +// 참조 : http://es5.github.io/#x15.4.4.14 +if (!Array.prototype.indexOf) { + Array.prototype.indexOf = function(searchElement, fromIndex) { + + var k; + + // 1. 이 값을 인수로 전달하는 ToObject를 호출 한 결과를 + // o라고합니다. + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var o = Object(this); + + // 2. lenValue를 Get 함수를 호출 한 결과로 둡니다. + // 인수가 "length"인 o의 내부 메소드. + // 3. len을 ToUint32 (lenValue)로 지정합니다. + var len = o.length >>> 0; + + // 4. len이 0이면 -1을 반환합니다. + if (len === 0) { + return -1; + } + + // 5.Index에서 인수가 전달 된 경우 n을 + // ToInteger (fromIndex); 그렇지 않으면 n은 0이됩니다. + var n = fromIndex | 0; + + // 6. If n >= len, return -1. + if (n >= len) { + return -1; + } + + // 7. n> = 0 인 경우 k를 n이라고 합니다. + // 8. 그렇지 않으면 n <0, k는 len - abs (n)이됩니다. + // k가 0보다 작은 경우 k를 0으로 만듭니다. + k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); + + // 9. k <len 인 동안 반복한다. + while (k < len) { + // a. Pk를 ToString (k)이라고합시다. + // 이것은 in 연산자의 LHS 피연산자에 대해 암시 적입니다. + // b. kPresent를 호출 한 결과라고합시다. + // Hasproperty 인수에 Pk가있는 o의 내부 메소드. + //이 단계는 c와 결합 될 수 있습니다. + // c. kPresent가 참이면 + // i. elementK를 Get을 호출 한 결과로합시다. + // ToString (k) 인수를 가진 o의 내부 메쏘드. + // ii. 적용한 결과와 동일하게 봅시다. + // 엄격한 평등 비교 알고리즘 + // searchElement 및 elementK. + // iii. 동일하면 k를 반환합니다. + if (k in o && o[k] === searchElement) { + return k; + } + k++; + } + return -1; + }; +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> +<p>{{Compat("javascript.builtins.Array.indexOf")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("TypedArray.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.indexOf()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/isarray/index.html b/files/ko/web/javascript/reference/global_objects/array/isarray/index.html new file mode 100644 index 0000000000..0a3a074a3d --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/isarray/index.html @@ -0,0 +1,131 @@ +--- +title: Array.isArray() +slug: Web/JavaScript/Reference/Global_Objects/Array/isArray +tags: + - Array + - ECMAScript 5 + - JavaScript + - Method + - Reference + - polyfill + - 자바스크립트 + - 폴리필 +translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray +--- +<div>{{JSRef}}</div> + +<p><code><strong>Array.isArray()</strong></code> 메서드는 인자가 {{jsxref("Array")}}인지 판별합니다.</p> + +<pre><code>Array.isArray([1, 2, 3]); // true +Array.isArray({foo: 123}); // false +Array.isArray('foobar'); // false +Array.isArray(undefined); // false</code> +</pre> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code>Array.isArray(<var>obj</var>)</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>검사할 객체.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>객체가 {{jsxref("Array")}}라면 <code>true</code>, 아니라면 <code>false</code>.</p> + +<h2 id="설명">설명</h2> + +<p>객체가 {{jsxref("Array")}}라면 <code>true</code>를 반환하고, 아니라면 <code>false</code>를 반환합니다.</p> + +<p>자세한 정보는 <a href="http://web.mit.edu/jwalden/www/isArray.html">“Determining with absolute accuracy whether or not a JavaScript object is an array”</a>(자바스크립트 객체가 배열인지 정확히 판별하는 방법) 문서를 참조하세요.</p> + +<h2 id="예제">예제</h2> + +<pre><code>// 모두 true 반환 +Array.isArray([]); +Array.isArray([1]); +Array.isArray(new Array()); +Array.isArray(new Array('a', 'b', 'c', 'd')); +Array.isArray(new Array(3)); +// Array.prototype은 스스로도 배열입니다 +Array.isArray(Array.prototype); + +// 모두 false 반환 +Array.isArray(); +Array.isArray({}); +Array.isArray(null); +Array.isArray(undefined); +Array.isArray(17); +Array.isArray('Array'); +Array.isArray(true); +Array.isArray(false); +Array.isArray({ __proto__: Array.prototype });</code></pre> + +<h3 id="instanceof_vs_isArray"><code>instanceof</code> vs <code>isArray</code></h3> + +<p><code>Array</code> 객체를 판별할 때, <code>Array.isArray</code>는 <code>iframe</code>을 통해서도 작동하기 때문에 <code>instanceof</code> 보다 적합합니다.</p> + +<pre><code>var iframe = document.createElement('iframe'); +document.body.appendChild(iframe); +xArray = window.frames[window.frames.length-1].Array; +var arr = new xArray(1,2,3); // [1,2,3] + +// 올바른 Array 판별 +Array.isArray(arr); // true +// iframe을 통해서 작동하지 않기 때문에 올바르지 않은 방법 +arr instanceof Array; // false</code> +</pre> + +<h2 id="폴리필">폴리필</h2> + +<p>아래 코드를 실행하면 지원하지 않는 환경에서도 <code>Array.isArray()</code>를 사용할 수 있습니다.</p> + +<pre class="brush: js">if (!Array.isArray) { + Array.isArray = function(arg) { + return Object.prototype.toString.call(arg) === '[object Array]'; + }; +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>초안. 자바스크립트 1.8.5 에 구현됨.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> + <p> </p> + </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("javascript.builtins.Array.isArray")}}</div> + +<h2 id="참고">참고</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/join/index.html b/files/ko/web/javascript/reference/global_objects/array/join/index.html new file mode 100644 index 0000000000..7a78c568ab --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/join/index.html @@ -0,0 +1,91 @@ +--- +title: Array.prototype.join() +slug: Web/JavaScript/Reference/Global_Objects/Array/join +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/join +--- +<div>{{JSRef}}</div> + +<p><code><strong>join()</strong></code> 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-join.html")}}</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>arr</var>.join([<var>separator</var>])</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>separator</code> {{optional_inline}}</dt> + <dd>배열의 각 요소를 구분할 문자열을 지정합니다. 이 구분자는 필요한 경우 문자열로 변환됩니다. 생략하면 배열의 요소들이 쉼표로 구분됩니다. <code>separator</code>가 빈 문자열이면 모든 요소들이 사이에 아무 문자도 없이 연결됩니다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>배열의 모든 요소들을 연결한 하나의 문자열을 반환합니다. 만약 <code><em>arr</em>.length</code> 가 <code>0</code>이라면, 빈 문자열을 반환합니다.</p> + +<h2 id="설명">설명</h2> + +<p>모든 배열 요소가 문자열로 변환된 다음 하나의 문자열로 연결됩니다.</p> + +<div class="blockIndicator warning"> +<p>요소가 <code>undefined</code> 또는 <code>null</code>이면 빈 문자열로 변환합니다.</p> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="네_가지_다른_방법으로_배열_연결하기">네 가지 다른 방법으로 배열 연결하기</h3> + +<p>다음 예제에서는 3개의 요소를 가진 배열 <code>a</code>를 만들고, 기본 구분자, 쉼표와 공백, 더하기 기호, 빈 문자열의 네 가지 구분자를 사용해 배열을 연결합니다.</p> + +<pre class="brush: js">var a = ['바람', '비', '불']; +var myVar1 = a.join(); // myVar1에 '바람,비,불'을 대입 +var myVar2 = a.join(', '); // myVar2에 '바람, 비, 불'을 대입 +var myVar3 = a.join(' + '); // myVar3에 '바람 + 비 + 불'을 대입 +var myVar4 = a.join(''); // myVar4에 '바람비불'을 대입 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">표준</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>최초 정의. JavaScript 1.1에 구현됨.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.Array.join")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("Array.prototype.toString()")}}</li> + <li>{{jsxref("TypedArray.prototype.join()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/keys/index.html b/files/ko/web/javascript/reference/global_objects/array/keys/index.html new file mode 100644 index 0000000000..4afb826a3e --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/keys/index.html @@ -0,0 +1,69 @@ +--- +title: Array.prototype.keys() +slug: Web/JavaScript/Reference/Global_Objects/Array/keys +tags: + - Array + - ECMAScript 2015 + - Iterator + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/keys +--- +<div>{{JSRef}}</div> + +<p><code><strong>keys()</strong></code> 메서드는 배열의 각 인덱스를 키 값으로 가지는 새로운 <code><strong>Array Iterator</strong></code> 객체를 반환합니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-keys.html")}}</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>arr</var>.keys()</code></pre> + +<h3 id="반환_값">반환 값</h3> + +<p>새로운 {{jsxref("Array")}} 반복기 객체.</p> + +<h2 id="예제">예제</h2> + +<h3 id="키_반복기는_빈_인덱스를_무시하지_않음">키 반복기는 빈 인덱스를 무시하지 않음</h3> + +<pre><code>var arr = ['a', , 'c']; +var sparseKeys = Object.keys(arr); +var denseKeys = [...arr.keys()]; +console.log(sparseKeys); // ['0', '2'] +console.log(denseKeys); // [0, 1, 2]</code></pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.Array.keys")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.values()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/lastindexof/index.html b/files/ko/web/javascript/reference/global_objects/array/lastindexof/index.html new file mode 100644 index 0000000000..7e1519ae78 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/lastindexof/index.html @@ -0,0 +1,103 @@ +--- +title: Array.prototype.lastIndexOf() +slug: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf +tags: + - Array + - ECMAScript 5 + - JavaScript + - Method + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf +--- +<div>{{JSRef}}</div> + +<p><strong><code>lastIndexOf()</code></strong> 메서드는 배열에서 주어진 값을 발견할 수 있는 마지막 인덱스를 반환하고, 요소가 존재하지 않으면 -1을 반환합니다. 배열 탐색은 <code>fromIndex</code>에서 시작하여 뒤로 진행합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-lastindexof.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>arr</var>.lastIndexOf(<var>searchElement[</var>, <var>fromIndex]</var>)</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>searchElement</code></dt> + <dd>배열에서 찾을 요소.</dd> + <dt><code>fromIndex</code> {{optional_inline}}</dt> + <dd>역순으로 검색을 시작할 인덱스. 배열의 길이에서 1을 뺀 값(<code>arr.length - 1</code>)이 기본값이므로 지정하지 않을 경우 전체 배열을 검색합니다. 주어진 값이 배열의 길이 이상이면 전체 배열을 검색합니다. 값이 음수인 경우, 배열의 마지막부터 시작하는 인덱스로 처리합니다. 다만, 음수를 제공하더라도 검색 순서는 뒤에서 앞입니다. 위의 모든 절차를 거친 최종 계산값이 0 미만인 경우, <code>lastIndexOf()</code>는 항상 -1을 반환합니다. 즉, 배열을 탐색하지 않습니다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 값과 일치하는 마지막 요소의 인덱스, 없으면 -1.</p> + +<h2 id="설명">설명</h2> + +<p><code>lastIndexOf</code>는 일치 연산(<code>===</code> 연산자와 동일)을 사용해 <code>searchElement</code>와 각 요소를 비교합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="lastIndexOf_사용하기"><code>lastIndexOf</code> 사용하기</h3> + +<p>다음 예제에서는 <code>lastIndexOf</code>를 사용하여 배열의 값을 찾습니다.</p> + +<pre class="brush: js">var array = [2, 5, 9, 2]; +array.lastIndexOf(2); // 3 +array.lastIndexOf(7); // -1 +array.lastIndexOf(2, 3); // 3 +array.lastIndexOf(2, 2); // 0 +array.lastIndexOf(2, -2); // 0 +array.lastIndexOf(2, -1); // 3 +</pre> + +<h3 id="요소의_모든_항목_찾기">요소의 모든 항목 찾기</h3> + +<p>다음 예제에서는 <code>lastIndexOf</code>를 사용하여 {{jsxref("Array.prototype.push", "push")}}를 사용하여 지정된 배열의 요소 색인을 모두 찾아서 다른 배열에 추가합니다.</p> + +<pre class="brush: js">var indices = []; +var array = ['a', 'b', 'a', 'c', 'a', 'd']; +var element = 'a'; +var idx = array.lastIndexOf(element); +while (idx != -1) { + indices.push(idx); + idx = (idx > 0 ? array.lastIndexOf(element, idx - 1) : -1); +} + +console.log(indices); +// [4, 2, 0] +</pre> + +<p>배열의 첫 번째 요소 인 경우 요소가 fromIndex 매개 변수와 관계없이 항상 발견되므로 idx == 0 사례를 여기에서 개별적으로 처리해야합니다. 이는 {{jsxref ( "Array.prototype.indexOf", "indexOf")}} 메소드와 다릅니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.Array.lastIndexOf")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> + <li>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/length/index.html b/files/ko/web/javascript/reference/global_objects/array/length/index.html new file mode 100644 index 0000000000..b241e88045 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/length/index.html @@ -0,0 +1,135 @@ +--- +title: Array.length +slug: Web/JavaScript/Reference/Global_Objects/Array/length +tags: + - Array + - JavaScript + - Property + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/length +--- +<div>{{JSRef}}</div> + +<p><code>Array</code> 인스턴스의 <code><strong>length</strong></code> 속성은 배열의 길이를 반환합니다. 반환값은 부호 없는 32비트 정수형이며, 배열의 최대 인덱스보다 항상 큽니다. <strong><code>length</code></strong> 속성에 값을 설정할 경우 배열의 길이를 변경합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-length.html")}}</div> + + + +<h2 id="설명">설명</h2> + +<p><code>length</code> 속성의 값은 양의 정수이며 2<sup>32</sup> 미만의 값을 가집니다.</p> + +<pre class="brush: js line-numbers language-js">var namelistA = new Array(4294967296); // 2의 32제곱 = 4294967296 +var namelistC = new Array(-100) // 음수 + +console.log(namelistA.length); // RangeError: Invalid array length +console.log(namelistC.length); // RangeError: Invalid array length + +var namelistB = []; +namelistB.length = Math.pow(2,32)-1; // 길이를 2의 32제곱 미만으로 설정 +console.log(namelistB.length); + +// 4294967295</pre> + +<p>아무 때나 <code>length</code> 속성에 값을 설정해 배열을 절단할 수 있습니다. <code>length</code> 속성으로 배열의 길이를 늘리면 실제 원소의 수가 증가합니다. 예를 들어 길이가 2인 배열의 <code>length</code>를 3으로 설정한다면 마지막에 <code>undefined</code>가 추가돼 총 3개의 요소를 갖게 됩니다.</p> + +<pre class="brush: js line-numbers language-js">var arr = [1, 2, 3]; +printEntries(arr); + +arr.length = 5; // set array length to 5 while currently 3. +printEntries(arr); + +function printEntries(arr) { + var length = arr.length; + for (var i = 0; i < length; i++) { + console.log(arr[i]); + } + console.log('=== printed ==='); +} + +// 1 +// 2 +// 3 +// === printed === +// 1 +// 2 +// 3 +// undefined +// undefined +// === printed === +</pre> + +<p>그러나 <code>length</code> 속성의 값이 꼭 배열에 정의된 원소의 수를 나타내진 않습니다. <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#length_%EC%99%80_%EC%88%AB%EC%9E%90%ED%98%95_%EC%86%8D%EC%84%B1%EC%9D%98_%EA%B4%80%EA%B3%84"><code>length</code>와 숫자형 속성의 관계</a>를 참고하세요.</p> + +<p>{{js_property_attributes(1, 0, 0)}}</p> + +<h2 id="예제">예제</h2> + +<h3 id="배열_순회">배열 순회</h3> + +<p>다음 예제는 <code>numbers</code> 배열을 length 속성의 크기만큼 순회합니다. 각 원소의 값은 두 배가 됩니다.</p> + +<pre class="brush: js line-numbers language-js">var numbers = [1, 2, 3, 4, 5]; +var length = numbers.length; +for (var i = 0; i < length; i++) { + numbers[i] *= 2; +} +// numbers is now [2, 4, 6, 8, 10] +</pre> + +<h3 id="배열_단축">배열 단축</h3> + +<p>다음 예제는 <code>numbers</code> 배열의 현재 길이가 3보다 클 경우 3으로 줄입니다.</p> + +<pre class="brush: js line-numbers language-js">var numbers = [1, 2, 3, 4, 5]; + +if (numbers.length > 3) { + numbers.length = 3; +} + +console.log(numbers); // [1, 2, 3] +console.log(numbers.length); // 3 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("javascript.builtins.Array.length")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/map/index.html b/files/ko/web/javascript/reference/global_objects/array/map/index.html new file mode 100644 index 0000000000..b3f494a8e3 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/map/index.html @@ -0,0 +1,293 @@ +--- +title: Array.prototype.map() +slug: Web/JavaScript/Reference/Global_Objects/Array/map +tags: + - Array + - ECMAScript 5 + - JavaScript + - Method + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/map +--- +<div>{{JSRef}}</div> + +<p><code><strong>map()</strong></code> 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-map.html")}}</p> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="syntaxbox"><code><var>arr</var>.map(<var>callback(currentValue</var>[, index[, array]])[, <var>thisArg</var>])</code></pre> + +<h3 id="Parameters" name="Parameters">매개변수</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.</dd> + <dd> + <dl> + <dt><code>currentValue</code></dt> + <dd>처리할 현재 요소.</dd> + <dt><code>index</code> {{optional_inline}}</dt> + <dd>처리할 현재 요소의 인덱스.</dd> + <dt><code>array</code> {{optional_inline}}</dt> + <dd><code>map()</code>을 호출한 배열.</dd> + </dl> + </dd> + <dt><code>thisArg</code> {{optional_inline}}</dt> + <dd><code>callback</code>을 실행할 때 <code>this</code>로 사용되는 값.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>배열의 각 요소에 대해 실행한 <code>callback</code>의 결과를 모은 새로운 배열.</p> + +<h2 id="Description" name="Description">설명</h2> + +<p><code>map</code>은 <code>callback</code> 함수를 <strong>각각의 요소에 대해 한번씩 </strong>순서대로 불러 그 함수의 반환값으로 새로운 배열을 만듭니다. <code>callback</code> 함수는 ({{jsxref("undefined")}}도 포함해서) 배열 값이 들어있는 인덱스에 대해서만 호출됩니다. 즉, 값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스에 대해서는 호출되지 않습니다.</p> + +<p><code>callback</code> 함수는 호출될 때 대상 요소의 값, 그 요소의 인덱스, 그리고 <code>map</code>을 호출한 원본 배열<span style="font-family: courier,andale mono,monospace;"> </span>3개의 인수를 전달받습니다.</p> + +<p><code>thisArg</code> 매개변수가 <code>map</code>에 전달된 경우 <code>callback</code> 함수의 <code>this</code>값으로 사용됩니다. 그 외의 경우 {{jsxref("undefined")}}값이 <code>this</code> 값으로 사용됩니다.<font face="Consolas, Liberation Mono, Courier, monospace"> </font><code>callback</code> 함수에서 최종적으로 볼 수 있는 <code>this</code> 값은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/this">함수 내 <code>this</code>를 정하는 일반적인 규칙</a>에 따라 결정됩니다.</p> + +<p><code>map</code>은 호출한 배열의 값을 변형하지 않습니다. 단, <code>callback</code> 함수에 의해서 변형될 수는 있습니다.</p> + +<p><code>map</code>이 처리할 요소의 범위는 첫 <code>callback</code>을 호출하기 전에 정해집니다. <code>map</code>이 시작한 이후 배열에 추가되는 요소들은 <code>callback</code>을 호출하지 않습니다. 배열에 존재하는 요소들의 값이 바뀐 경우 <code>map</code>이 방문하는 시점의 값이 <code>callback</code>에 전달됩니다. <code>map</code>이 시작되고, 방문하기 전에 삭제된 요소들은 방문하지 않습니다.</p> + +<p>명세서에 정의된 알고리즘으로 인해 <code>map</code>을 호출한 배열의 중간이 비어있는 경우, 결과 배열 또한 동일한 인덱스를 빈 값으로 유지합니다.</p> + +<h2 id="Examples" name="Examples">예제</h2> + +<h3 id="Example_Mapping_an_array_of_numbers_to_an_array_of_square_roots" name="Example:_Mapping_an_array_of_numbers_to_an_array_of_square_roots">배열에 들어있는 숫자들의 제곱근을 구하여 새로운 배열을 만들기</h3> + +<p>다음 코드는 숫자의 배열을 받아 각 숫자들의 제곱근이 들어있는 새로운 배열을 만듭니다.</p> + +<pre class="brush: js">var numbers = [1, 4, 9]; +var roots = numbers.map(Math.sqrt); +// roots는 [1, 2, 3] +// numbers는 그대로 [1, 4, 9] +</pre> + +<h3 id="Example_Using_map_to_reformat_objects_in_an_array" name="Example:_Using_map_to_reformat_objects_in_an_array"><code>map</code>을 활용해 배열 속 객체를 재구성하기</h3> + +<p>다음 코드는 오브젝트의 배열을 받아 각 오브젝트를 다른 형태으로 재구성해 새로운 배열을 만듭니다.</p> + +<pre class="brush: js">var kvArray = [{key:1, value:10}, + {key:2, value:20}, + {key:3, value: 30}]; + +var reformattedArray = kvArray.map(function(obj){ + var rObj = {}; + rObj[obj.key] = obj.value; + return rObj; +}); +// reformattedArray는 [{1:10}, {2:20}, {3:30}] + +// kvArray는 그대로 +// [{key:1, value:10}, +// {key:2, value:20}, +// {key:3, value: 30}] +</pre> + +<h3 id="Example_Mapping_an_array_of_numbers_using_a_function_containing_an_argument" name="Example:_Mapping_an_array_of_numbers_using_a_function_containing_an_argument">인자를 받는 함수를 사용하여 숫자 배열 재구성하기</h3> + +<p>다음 코드는 인자가 한개인 함수를 이용하여 map이 어떻게 동작하는지 나타냅니다. 인자인 배열과 안의 요소들은 map을 통해 순회하면서 원본 배열로 부터 자동으로 할당됩니다.</p> + +<pre class="brush: js">var numbers = [1, 4, 9]; +var doubles = numbers.map(function(num) { + return num * 2; +}); +// doubles는 이제 [2, 8, 18] +// numbers는 그대로 [1, 4, 9] +</pre> + +<h3 id="Example_using_map_generically" name="Example:_using_map_generically"><code>map</code>을 포괄적으로 사용하기</h3> + +<p>아래 예제는 {{jsxref("Global_Objects/String", "String")}}에 map을 사용해서 각 문자의 ASCII 인코딩 값을 요소로 갖는 배열을 얻는 방법을 보여줍니다.</p> + +<pre class="brush: js">var map = Array.prototype.map; +var a = map.call('Hello World', function(x) { return x.charCodeAt(0); }); +// a는 이제 [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100] +</pre> + +<h3 id="Example_using_map_generically_querySelectorAll" name="Example:_using_map_generically_querySelectorAll"><code>map</code>을 포괄적으로 사용하기 (<code>querySelectorAll</code>)</h3> + +<p>아래 예제는 <code>querySelectorAll</code>을 사용해서 수집된 객체들을 순회 처리하는 법을 보여줍니다. 이번 경우 체크한 옵션 박스를 콘솔에 프린트합니다.</p> + +<pre class="brush: js">var elems = document.querySelectorAll('select option:checked'); +var values = [].map.call(elems, function(obj) { + return obj.value; +}); +</pre> + +<p>더 쉬운 방법은 {{jsxref("Array.from()")}}을 사용하는 것입니다.</p> + +<h3 id="Example_Tricky_use_case" name="Example:_Tricky_use_case">까다로운 사례</h3> + +<p><a href="http://www.wirfs-brock.com/allen/posts/166">(참고한 블로그 포스트)</a></p> + +<p><code>map</code>에 하나의 인자(순회하는 원소)만 받는 콜백을 사용하는 경우가 많습니다. 그러나 어떤 함수는 대개 하나의 인자로 호출하지만 두 개 이상의 인자를 사용하는 경우도 있습니다. 이로 인해 어떤 경우 혼란스러울 수도 있습니다.</p> + +<pre class="brush: js">// 아래 라인을 보시면... +['1', '2', '3'].map(parseInt); +// 결과를 [1, 2, 3] 으로 기대할 수 있습니다. +// 그러나 실제 결과는 [1, NaN, NaN] 입니다. + +// parseInt 함수는 보통 하나의 인자만 사용하지만, 두 개를 받을 수 있습니다. +// 첫 번째 인자는 변환하고자 하는 표현이고 두 번째는 숫자로 변환할 때 사용할 진법입니다. +// Array.prototype.map은 콜백에 세 가지 인자를 전달합니다. +// 배열의 값, 값의 인덱스, 그리고 배열 +// 세 번째 인자는 parseInt가 무시하지만 두 번째 인자는 아닙니다. +// 따라서 혼란스러운 결과를 도출할 수 있습니다. 자세한 내용은 블로그 포스트를 참고하시길 바랍니다. + +function returnInt(element) { + return parseInt(element, 10); +} + +['1', '2', '3'].map(returnInt); // [1, 2, 3] +// 실제 결과가 예상한 대로 배열의 숫자와 같습니다. + +// 위와 같지만 더 간단한 화살표 표현식 +['1', '2', '3'].map(str => parseInt(str)); + +// 더 간단하게 해결할 수 있는 방법 +['1', '2', '3'].map(Number); // [1, 2, 3] +// 그러나 `parseInt`와 달리 float이나 지수표현도 반환합니다. +['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300] +</pre> + +<h2 id="Polyfill" name="Polyfill">폴리필</h2> + +<p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">map</span></font>은 ECMA-262 표준 제5판에 추가됐습니다. 따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 플랫폼에서도 <code>map</code>을 사용할 수 있습니다. 아래 알고리즘은 {{jsxref("Object")}}, {{jsxref("TypeError")}}, {{jsxref("Array")}}가 변형되지 않고, <code>callback.call</code>의 계산 값이 원래의 {{jsxref("Function.prototype.call()")}}과 같은 경우 ECMA-262 제5판이 명시한 것과 동일합니다.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.19 +// Reference: http://es5.github.io/#x15.4.4.19 +if (!Array.prototype.map) { + + Array.prototype.map = function(callback, thisArg) { + + var T, A, k; + + if (this == null) { + throw new TypeError(' this is null or not defined'); + } + + // 1. Let O be the result of calling ToObject passing the |this| + // value as the argument. + var O = Object(this); + + // 2. Let lenValue be the result of calling the Get internal + // method of O with the argument "length". + // 3. Let len be ToUint32(lenValue). + var len = O.length >>> 0; + + // 4. If IsCallable(callback) is false, throw a TypeError exception. + // See: http://es5.github.com/#x9.11 + if (typeof callback !== 'function') { + throw new TypeError(callback + ' is not a function'); + } + + // 5. If thisArg was supplied, let T be thisArg; else let T be undefined. + if (arguments.length > 1) { + T = thisArg; + } + + // 6. Let A be a new array created as if by the expression new Array(len) + // where Array is the standard built-in constructor with that name and + // len is the value of len. + A = new Array(len); + + // 7. Let k be 0 + k = 0; + + // 8. Repeat, while k < len + while (k < len) { + + var kValue, mappedValue; + + // a. Let Pk be ToString(k). + // This is implicit for LHS operands of the in operator + // b. Let kPresent be the result of calling the HasProperty internal + // method of O with argument Pk. + // This step can be combined with c + // c. If kPresent is true, then + if (k in O) { + + // i. Let kValue be the result of calling the Get internal + // method of O with argument Pk. + kValue = O[k]; + + // ii. Let mappedValue be the result of calling the Call internal + // method of callback with T as the this value and argument + // list containing kValue, k, and O. + mappedValue = callback.call(T, kValue, k, O); + + // iii. Call the DefineOwnProperty internal method of A with arguments + // Pk, Property Descriptor + // { Value: mappedValue, + // Writable: true, + // Enumerable: true, + // Configurable: true }, + // and false. + + // In browsers that support Object.defineProperty, use the following: + // Object.defineProperty(A, k, { + // value: mappedValue, + // writable: true, + // enumerable: true, + // configurable: true + // }); + + // For best browser support, use the following: + A[k] = mappedValue; + } + // d. Increase k by 1. + k++; + } + + // 9. return A + return A; + }; +} +</pre> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}</td> + <td></td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<div>{{Compat("javascript.builtins.Array.map")}}</div> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Map")}} 객체</li> + <li>{{jsxref("Array.from()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/observe/index.html b/files/ko/web/javascript/reference/global_objects/array/observe/index.html new file mode 100644 index 0000000000..015ae049c5 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/observe/index.html @@ -0,0 +1,87 @@ +--- +title: Array.observe() +slug: Web/JavaScript/Reference/Global_Objects/Array/observe +tags: + - Array + - JavaScript + - Method + - Obsolete +translation_of: Archive/Web/JavaScript/Array.observe +--- +<div>{{JSRef}} {{obsolete_header}}</div> + +<p><strong><code>Array.observe()</code> </strong>메서드는 {{jsxref("Object.observe()")}}가 객체를 관찰하는 것과 비슷하게 , 배열의 변화를 비동기 적으로 관찰 하는데 사용 되었습니다. <font face="Consolas, Liberation Mono, Courier, monospace">그것은 </font>발생 순서에 따른 변화의 흐름을 제공합니다. <code>Object.observe()</code>가 accept type list <code>["add", "update", "delete", "splice"]</code>와 함께 호출되는 것과 같습니다. 하지만 이 API는 더이상 사용되지 않고 브라우저에서 제거 되었습니다. 대신, 더 일반적인 {{jsxref("Proxy")}} 객체를 사용하세요.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Array.observe(<var>arr</var>, <var>callback</var>)</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>arr</code></dt> + <dd>관찰 할 배열</dd> + <dt><code>callback</code></dt> + <dd>이 함수는 변화가 일어날때 마다 다음과 같은 인수와 함께 호출됩니다. + <dl> + <dt><code>changes</code></dt> + <dd>변경을 나타내는 각 객체들의 배열입니다. 이 변경 객체들의 프로퍼티 들은: + <ul> + <li><strong><code>name</code></strong>: 변경된 프로퍼티의 이름</li> + <li><strong><code>object</code></strong>: 변경 후 배열</li> + <li><strong><code>type</code></strong>: 변경 타입을 나타내는 문자. <code>"add"</code>, <code>"update"</code>, <code>"delete"</code>, 또는 <code>"splice" 중 하나</code>.</li> + <li><strong><code>oldValue</code></strong>: <code>"update"</code> 나 <code>"delete"유형에만 해당합니다. 변경 전 값</code>.</li> + <li><strong><code>index</code></strong>: <code>"splice"유형에만 해당합니다</code>. 변경이 발생한 인덱스.</li> + <li><strong><code>removed</code></strong>: <code>"splice"유형에만 해당합니다</code>. 삭제 된 요소들의 배열.</li> + <li><strong><code>addedCount</code></strong>: <code>"splice"유형에만 해당합니다</code>. 추가 된 요소들의 숫자.</li> + </ul> + </dd> + </dl> + </dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>콜백 함수는 arr이 변경 될 때마다 호출되며 발생하는 순서대로 모든 변경 사항의 배열로 호출됩니다</p> + +<div class="note"> +<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop">Array.prototype.pop()</a>이</code> <code>"splice"</code> 변경으로 보고되는 것처럼, 변경은 배열 메서드를 통해 일어납니다. 배열 길이를 변경하지 않는 인덱스 할당 변경은 "update" 변경으로 보고 될 수 있습니다.</p> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="다른_변경_유형_로깅(Logging)">다른 변경 유형 로깅(Logging)</h3> + +<pre class="brush: js">var arr = ['a', 'b', 'c']; + +Array.observe(arr, function(changes) { + console.log(changes); +}); + +arr[1] = 'B'; +// [{type: 'update', object: <arr>, name: '1', oldValue: 'b'}] + +arr[3] = 'd'; +// [{type: 'splice', object: <arr>, index: 3, removed: [], addedCount: 1}] + +arr.splice(1, 2, 'beta', 'gamma', 'delta'); +// [{type: 'splice', object: <arr>, index: 1, removed: ['B', 'c'], addedCount: 3}] +</pre> + +<h2 id="명세">명세</h2> + +<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal specification</a>.</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Array.observe")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="//stackoverflow.com/q/29269057/778272">Under what condition would Array.observe's “add” event trigger?</a></li> + <li>{{jsxref("Array.unobserve()")}} {{obsolete_inline}}</li> + <li>{{jsxref("Object.observe()")}} {{obsolete_inline}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/of/index.html b/files/ko/web/javascript/reference/global_objects/array/of/index.html new file mode 100644 index 0000000000..edcd9bddc5 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/of/index.html @@ -0,0 +1,104 @@ +--- +title: Array.of() +slug: Web/JavaScript/Reference/Global_Objects/Array/of +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Method + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/of +--- +<div>{{JSRef}}</div> + +<p><code><strong>Array.of()</strong></code> 메서드는 인자의 수나 유형에 관계없이 가변 인자를 갖는 새 <code>Array</code> 인스턴스를 만듭니다.</p> + +<p><code>Array.of()</code>와 <code>Array</code> 생성자의 차이는 정수형 인자의 처리 방법에 있습니다. <code>Array.of(7)</code>은 하나의 요소 <code>7</code>을 가진 배열을 생성하지만 <code>Array(7)</code>은 <code>length</code> 속성이 7인 빈 배열을 생성합니다.</p> + +<pre class="brush: js">Array.of(7); // [7] +Array.of(1, 2, 3); // [1, 2, 3] + +Array(7); // [ , , , , , , ] +Array(1, 2, 3); // [1, 2, 3] +</pre> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="syntaxbox">Array.of(<var>element0</var>[, <var>element1</var>[, ...[, <var>elementN</var>]]])</pre> + +<h3 id="Parameters" name="Parameters">매개변수</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>배열을 생성할 때 사용할 요소.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>새로운 {{jsxref("Array")}} 객체.</p> + +<h2 id="Description" name="Description">설명</h2> + +<p>이 함수는 ECMAScript 2015 표준 일부입니다. 자세한 정보는 <a href="https://gist.github.com/rwaldron/1074126"><code>Array.of</code>, <code>Array.from</code> 제안 사항</a>과 <a href="https://gist.github.com/rwaldron/3186576"><code>Array.of</code> 폴리필</a>에서 확인하실 수 있습니다.</p> + +<h2 id="Examples" name="Examples">예제</h2> + +<pre class="brush: js">Array.of(1); // [1] +Array.of(1, 2, 3); // [1, 2, 3] +Array.of(undefined); // [undefined] +</pre> + +<h2 id="Polyfill" name="Polyfill">폴리필</h2> + +<p>아래 코드를 다른 코드 이전에 포함하면 <code>Array.of</code>를 지원하지 않는 환경에서도 사용할 수 있습니다.</p> + +<pre class="brush: js">if (!Array.of) { + Array.of = function() { + return Array.prototype.slice.call(arguments); + }; +} +</pre> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-array.of', 'Array.of')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<p> </p> + +<p> </p> + +<p> </p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("javascript.builtins.Array.of")}}</p> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.from()")}}</li> + <li>{{jsxref("TypedArray.of()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/pop/index.html b/files/ko/web/javascript/reference/global_objects/array/pop/index.html new file mode 100644 index 0000000000..d02df55262 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/pop/index.html @@ -0,0 +1,91 @@ +--- +title: Array.prototype.pop() +slug: Web/JavaScript/Reference/Global_Objects/Array/pop +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop +--- +<div>{{JSRef}}</div> + +<p><code><strong>pop()</strong></code> 메서드는 배열에서 <strong>마지막</strong> 요소를 제거하고 그 요소를 반환합니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-pop.html")}}</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>arr</var>.pop()</code></pre> + +<h3 id="반환_값">반환 값</h3> + +<p>배열에서 제거한 요소. 빈 배열의 경우 {{jsxref("undefined")}} 를 반환합니다.</p> + +<h2 id="설명">설명</h2> + +<p><code>pop</code> 메서드는 배열에서 마지막 요소를 제거하여 그 값을 호출자(caller)에게 반환합니다.</p> + +<p><code>pop</code>은 일부러 일반(generic)입니다; 이 메서드는 배열을 닮은 객체에 {{jsxref("Function.call", "호출", "", 1)}} 또는 {{jsxref("Function.apply", "적용", "", 1)}}될 수 있습니다. 0부터 시작하는 일련의 연속되는 숫자 속성 내 마지막을 반영하는 <code>length</code> 속성을 포함하지 않는 객체는 어떤 의미 있는 방식으로도 행동하지 않을 수 있습니다.</p> + +<p>빈 배열에 <code>pop()</code>을 호출하면, {{jsxref("undefined")}}를 반환합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="배열의_마지막_요소_제거">배열의 마지막 요소 제거</h3> + +<p>다음 코드는 요소 넷을 포함하는 <code>myFish</code> 배열을 생성하고 그 마지막 요소를 제거합니다.</p> + +<pre><code>var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; + +var popped = myFish.pop(); + +console.log(myFish); // ['angel', 'clown', 'mandarin' ] + +console.log(popped); // 'sturgeon'</code></pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>초기 정의. JavaScript 1.2에서 구현됨.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.Array.pop")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.splice()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/push/index.html b/files/ko/web/javascript/reference/global_objects/array/push/index.html new file mode 100644 index 0000000000..73d9c9ad78 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/push/index.html @@ -0,0 +1,113 @@ +--- +title: Array.prototype.push() +slug: Web/JavaScript/Reference/Global_Objects/Array/push +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/push +--- +<div>{{JSRef}}</div> + +<p><code><strong>push()</strong></code> 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-push.html")}}</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>arr</var>.push(<var>element1[</var>, ...[, <var>elementN]]</var>)</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>배열의 끝에 추가할 요소.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>호출한 배열의 새로운 {{jsxref("Array.length", "length")}} 속성.</p> + +<h2 id="설명">설명</h2> + +<p><code>push</code> 메서드는 배열 끝에 여러 값을 추가합니다.</p> + +<p><code>push</code>는 의도적으로 <a href="https://en.wikipedia.org/wiki/Generic_programming">제네릭</a>합니다. 배열을 닯은 객체에 {{jsxref("Function.call", "call()")}} 또는 {{jsxref("Function.apply", "apply()")}}로 사용될 수 있다. <code>push</code> 메서드는 주어진 값을 입력하는 것을 어디에 시작할 것인지를 결정하기 위해 <code>length</code> 속성에 의존한다. 만약 <code>length</code> 속성이 숫자로 변환 될 수 없다면 인덱스는 0을 사용한다. <code>length</code> 가 생성되게 될 경우에 길이 값이 존재하지 않을 가능성을 포함한다. </p> + +<p>String(문자열)이 변경할 수 없는 것처럼 비록 이 명령어의 어플리케이션들이 적합하지 않다고 할지라도 단지 원래 배열 같은 객체는 {{jsxref("Global_Objects/String", "strings", "", 1)}}이다.</p> + +<h2 id="예시">예시</h2> + +<h3 id="배열에_엘리먼트를_추가_하기">배열에 엘리먼트를 추가 하기</h3> + +<p>다음 코드는 두가지 엘리먼트를 포함하는 스포츠 배열을 생성하고 두개의 엘리먼트를 추가 한다. <code>total</code> 변수는 추가한 배열의 새 길이 값을 포함한다. </p> + +<pre class="brush: js">var sports = ['축구', '야구']; +var total = sports.push('미식축구', '수영'); + +console.log(sports); // ['축구', '야구', '미식축구', '수영'] +console.log(total); // 4 +</pre> + +<h3 id="두개의_배열을_합치기">두개의 배열을 합치기</h3> + +<p>이 예제는 두번째 배열의 모든 엘리먼트를 push 하기 위해 {{jsxref("Function.apply", "apply()")}}를 사용한다.</p> + +<p>만약 두번째 배열( 아래 예제에서는 moreVegs )이 매우 클 경우, 이 메소드를 사용하지 말아야 한다. 실제로 한 함수가 사용가능한 매개변수의 최대 개수에는 제한이 있기 때문이다. 더 자세한 사항은 {{jsxref("Function.apply", "apply()")}} 에서 찾아볼 수 있다.</p> + +<pre class="brush: js">var vegetables = ['설탕당근', '감자']; +var moreVegs = ['셀러리', '홍당무']; + +// 첫번째 배열에 두번째 배열을 합친다. +// vegetables.push('셀러리', '홍당무'); 하는 것과 동일하다. +Array.prototype.push.apply(vegetables, moreVegs); + +console.log(vegetables); // ['설탕당근', '감자', '셀러리', '홍당무'] +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세서</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>초기 정의. JavaScript 1.2에서 구현되었음.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.push', 'Array.prototype.push')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.Array.push")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/reduce/index.html b/files/ko/web/javascript/reference/global_objects/array/reduce/index.html new file mode 100644 index 0000000000..bd3516865e --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/reduce/index.html @@ -0,0 +1,573 @@ +--- +title: Array.prototype.reduce() +slug: Web/JavaScript/Reference/Global_Objects/Array/Reduce +tags: + - Array + - ECMAScript 5 + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><code><strong>reduce()</strong></code><strong> </strong>메서드는 배열의 각 요소에 대해 주어진 <strong>리듀서</strong>(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/array-reduce.html")}}</div> + + + +<p><strong>리듀서</strong> 함수는 네 개의 인자를 가집니다.</p> + +<ol> + <li>누산기<sup>accumulator</sup> (acc)</li> + <li>현재 값 (cur)</li> + <li>현재 인덱스 (idx)</li> + <li>원본 배열 (src)</li> +</ol> + +<p>리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 됩니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>arr</var>.reduce(<var>callback</var>[, <var>initialValue</var>])</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받습니다.</dd> + <dd> + <dl> + <dt><code>accumulator</code></dt> + <dd>누산기<sup>accmulator</sup>는 콜백의 반환값을 누적합니다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 <code>initialValue</code>를 제공한 경우에는 <code>initialValue</code>의 값입니다.</dd> + <dt><code>currentValue</code></dt> + <dd>처리할 현재 요소.</dd> + <dt><code>currentIndex</code> {{optional_inline}}</dt> + <dd>처리할 현재 요소의 인덱스. <code>initialValue</code>를 제공한 경우 0, 아니면 1부터 시작합니다.</dd> + <dt><code>array</code> {{optional_inline}}</dt> + <dd><code>reduce()</code>를 호출한 배열.</dd> + </dl> + </dd> + <dt><code>initialValue</code> {{optional_inline}}</dt> + <dd><code>callback</code>의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용합니다. 빈 배열에서 초기값 없이 <code>reduce()</code>를 호출하면 오류가 발생합니다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>누적 계산의 결과 값.</p> + +<h2 id="설명">설명</h2> + +<p><code>reduce()</code>는 빈 요소를 제외하고 배열 내에 존재하는 각 요소에 대해 <code>callback</code> 함수를 한 번씩 실행하는데, 콜백 함수는 다음의 네 인수를 받습니다:</p> + +<ul> + <li><code>accumulator</code></li> + <li><code>currentValue</code></li> + <li><code>currentIndex</code></li> + <li><code>array</code></li> +</ul> + +<p>콜백의 최초 호출 때 <code>accumulator</code>와 <code>currentValue</code>는 다음 두 가지 값 중 하나를 가질 수 있습니다. 만약 <code>reduce()</code> 함수 호출에서 <code>initialValue</code>를 제공한 경우, <code>accumulator</code>는 <code>initialValue</code>와 같고 <code>currentValue</code>는 배열의 첫 번째 값과 같습니다. <code>initialValue</code>를 제공하지 않았다면, <code>accumulator</code>는 배열의 첫 번째 값과 같고 <code>currentValue</code>는 두 번째와 같습니다.</p> + +<div class="note"> +<p><strong>참고:</strong> <code>initialValue</code>를 제공하지 않으면, <code>reduce()</code>는 인덱스 1부터 시작해 콜백 함수를 실행하고 첫 번째 인덱스는 건너 뜁니다. <code>initialValue</code>를 제공하면 인덱스 0에서 시작합니다.</p> +</div> + +<p>배열이 비어있는데 <code>initialValue</code>도 제공하지 않으면 {{jsxref("TypeError")}}가 발생합니다. 배열의 요소가 (위치와 관계없이) 하나 뿐이면서 <code>initialValue</code>를 제공되지 않은 경우, 또는 <code>initialValue</code>는 주어졌으나 배열이 빈 경우엔 그 단독 값을 <code>callback</code> 호출 없이 반환합니다.</p> + +<p>다음의 예제처럼 <code>initialValue</code>을 제공하지 않으면 출력 가능한 형식이 세 가지이므로, 보통 초기값을 주는 것이 더 안전합니다.</p> + +<pre class="brush: js">var maxCallback = ( acc, cur ) => Math.max( acc.x, cur.x ); +var maxCallback2 = ( max, cur ) => Math.max( max, cur ); + +// initialValue 없이 reduce() +[ { x: 22 }, { x: 42 } ].reduce( maxCallback ); // 42 +[ { x: 22 } ].reduce( maxCallback ); // { x: 22 } +[ ].reduce( maxCallback ); // TypeError + +// map/reduce로 개선 - 비었거나 더 큰 배열에서도 동작함 +[ { x: 22 }, { x: 42 } ].map( el => el.x ) + .reduce( maxCallback2, -Infinity );</pre> + +<h3 id="reduce()_작동_방식"><code>reduce()</code> 작동 방식</h3> + +<p>다음의 예제를 생각해 봅시다.</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) { + return accumulator + currentValue; +}); +</pre> + +<p>콜백은 4번 호출됩니다. 각 호출의 인수와 반환값은 다음과 같습니다.</p> + +<table> + <thead> + <tr> + <th scope="col"><code>callback</code></th> + <th scope="col"><code>accumulator</code></th> + <th scope="col"><code>currentValue</code></th> + <th scope="col"><code>currentIndex</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">반환 값</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1번째 호출</th> + <td><code>0</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>1</code></td> + </tr> + <tr> + <th scope="row">2번째 호출</th> + <td><code>1</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>3</code></td> + </tr> + <tr> + <th scope="row">3번째 호출</th> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>6</code></td> + </tr> + <tr> + <th scope="row">4번째 호출</th> + <td><code>6</code></td> + <td><code>4</code></td> + <td><code>4</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + </tbody> +</table> + +<p><code>reduce()</code>가 반환하는 값으로는 마지막 콜백 호출의 반환값(<code>10</code>)을 사용합니다.</p> + +<p>완전한 함수 대신에 {{jsxref("Functions/애로우_펑션", "화살표 함수","",1)}}를 제공할 수도 있습니다. 아래 코드는 위의 코드와 같은 결과를 반환합니다.</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduce( (prev, curr) => prev + curr ); +</pre> + +<p><code>reduce()</code>의 두 번째 인수로 초기값을 제공하는 경우, 결과는 다음과 같습니다:</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) { + return accumulator + currentValue; +}, 10); +</pre> + +<table> + <thead> + <tr> + <th scope="col"> </th> + <th scope="col"><code>accumulator</code></th> + <th scope="col"><code>currentValue</code></th> + <th scope="col"><code>currentIndex</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">반환값</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1번째 호출</th> + <td><code>10</code></td> + <td><code>0</code></td> + <td><code>0</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + <tr> + <th scope="row">2번째 호출</th> + <td><code>10</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>11</code></td> + </tr> + <tr> + <th scope="row">3번째 호출</th> + <td><code>11</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>13</code></td> + </tr> + <tr> + <th scope="row">4번째 호출</th> + <td><code>13</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>16</code></td> + </tr> + <tr> + <th scope="row">5번째 호출</th> + <td><code>16</code></td> + <td><code>4</code></td> + <td><code>4</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>20</code></td> + </tr> + </tbody> +</table> + +<p>이 때 <code>reduce()</code>가 결과로 반환하는 값은 <code>20</code>입니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="배열의_모든_값_합산">배열의 모든 값 합산</h3> + +<pre class="brush: js">var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) { + return accumulator + currentValue; +}, 0); +// sum is 6 + +</pre> + +<p>화살표 함수로도 작성할 수 있습니다.</p> + +<pre class="brush: js">var total = [ 0, 1, 2, 3 ].reduce( + ( accumulator, currentValue ) => accumulator + currentValue, + 0 +);</pre> + +<h3 id="객체_배열에서의_값_합산">객체 배열에서의 값 합산</h3> + +<p>객체로 이루어진 배열에 들어 있는 값을 합산하기 위해서는 <strong>반드시</strong> 초기값을 주어 각 항목이 여러분의 함수를 거치도록 해야 합니다.</p> + +<pre class="brush: js">var initialValue = 0; +var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) { + return accumulator + currentValue.x; +},initialValue) + +console.log(sum) // logs 6 +</pre> + +<p>화살표 함수(arrow function)로도 작성할 수 있습니다: </p> + +<pre class="brush: js">var initialValue = 0; +var sum = [{x: 1}, {x:2}, {x:3}].reduce( + (accumulator, currentValue) => accumulator + currentValue.x + ,initialValue +); + +console.log(sum) // logs 6</pre> + +<h3 id="중첩_배열_펼치기flatten">중첩 배열 펼치기<sup>flatten</sup></h3> + +<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduce( + function(accumulator, currentValue) { + return accumulator.concat(currentValue); + }, + [] +); +// 펼친 결과: [0, 1, 2, 3, 4, 5] +</pre> + +<p>화살표 함수로도 작성할 수 있습니다:</p> + +<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduce( + ( accumulator, currentValue ) => accumulator.concat(currentValue), + [] +); +</pre> + +<h3 id="객체_내의_값_인스턴스_개수_세기">객체 내의 값 인스턴스 개수 세기</h3> + +<pre class="brush: js">var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']; + +var countedNames = names.reduce(function (allNames, name) { + if (name in allNames) { + allNames[name]++; + } + else { + allNames[name] = 1; + } + return allNames; +}, {}); +// countedNames is: +// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 } +</pre> + +<h3 id="속성으로_객체_분류하기">속성으로 객체 분류하기</h3> + +<pre class="brush: js">var people = [ + { name: 'Alice', age: 21 }, + { name: 'Max', age: 20 }, + { name: 'Jane', age: 20 } +]; + +function groupBy(objectArray, property) { + return objectArray.reduce(function (acc, obj) { + var key = obj[property]; + if (!acc[key]) { + acc[key] = []; + } + acc[key].push(obj); + return acc; + }, {}); +} + +var groupedPeople = groupBy(people, 'age'); +// groupedPeople is: +// { +// 20: [ +// { name: 'Max', age: 20 }, +// { name: 'Jane', age: 20 } +// ], +// 21: [{ name: 'Alice', age: 21 }] +// } +</pre> + +<h3 id="확장_연산자와_초기값을_이용하여_객체로_이루어진_배열에_담긴_배열_연결하기">확장 연산자와 초기값을 이용하여 객체로 이루어진 배열에 담긴 배열 연결하기</h3> + +<pre class="brush: js">// friends - an array of objects +// where object field "books" - list of favorite books +var friends = [{ + name: 'Anna', + books: ['Bible', 'Harry Potter'], + age: 21 +}, { + name: 'Bob', + books: ['War and peace', 'Romeo and Juliet'], + age: 26 +}, { + name: 'Alice', + books: ['The Lord of the Rings', 'The Shining'], + age: 18 +}]; + +// allbooks - list which will contain all friends' books + +// additional list contained in initialValue +var allbooks = friends.reduce(function(accumulator, currentValue) { + return [...accumulator, ...currentValue.books]; +}, ['Alphabet']); + +// allbooks = [ +// 'Alphabet', 'Bible', 'Harry Potter', 'War and peace', +// 'Romeo and Juliet', 'The Lord of the Rings', +// 'The Shining' +// ] +</pre> + +<h3 id="배열의_중복_항목_제거">배열의 중복 항목 제거</h3> + +<div class="blockIndicator note"> +<p>참고: {{jsxref("Set")}}과 {{jsxref("Array.from()")}}을 사용할 수 있는 환경이라면, <code>let orderedArray = Array.from(new Set(myArray));</code>를 사용해 중복 요소를 제거할 수도 있습니다.</p> +</div> + +<pre class="brush: js">let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]; +let result = arr.sort().reduce((accumulator, current) => { + const length = accumulator.length + if (length === 0 || accumulator[length - 1] !== current) { + accumulator.push(current); + } + return accumulator; +}, []); +console.log(result); //[1,2,3,4,5] +</pre> + +<h3 id="프로미스를_순차적으로_실행하기">프로미스를 순차적으로 실행하기</h3> + +<pre class="brush: js">/** + * Runs promises from array of functions that can return promises + * in chained manner + * + * @param {array} arr - promise arr + * @return {Object} promise object + */ +function runPromiseInSequence(arr, input) { + return arr.reduce( + (promiseChain, currentFunction) => promiseChain.then(currentFunction), + Promise.resolve(input) + ); +} + +// promise function 1 +function p1(a) { + return new Promise((resolve, reject) => { + resolve(a * 5); + }); +} + +// promise function 2 +function p2(a) { + return new Promise((resolve, reject) => { + resolve(a * 2); + }); +} + +// function 3 - will be wrapped in a resolved promise by .then() +function f3(a) { + return a * 3; +} + +// promise function 4 +function p4(a) { + return new Promise((resolve, reject) => { + resolve(a * 4); + }); +} + +const promiseArr = [p1, p2, f3, p4]; +runPromiseInSequence(promiseArr, 10) + .then(console.log); // 1200 +</pre> + +<h3 id="함수_구성을_위한_파이프_함수">함수 구성을 위한 파이프 함수</h3> + +<pre class="brush: js">// Building-blocks to use for composition +const double = x => x + x; +const triple = x => 3 * x; +const quadruple = x => 4 * x; + +// Function composition enabling pipe functionality +const pipe = (...functions) => input => functions.reduce( + (acc, fn) => fn(acc), + input +); + +// Composed functions for multiplication of specific values +const multiply6 = pipe(double, triple); +const multiply9 = pipe(triple, triple); +const multiply16 = pipe(quadruple, quadruple); +const multiply24 = pipe(double, triple, quadruple); + +// Usage +multiply6(6); // 36 +multiply9(9); // 81 +multiply16(16); // 256 +multiply24(10); // 240 +</pre> + +<h3 id="reduce()로_map()_작성"><code>reduce()</code>로 <code>map()</code> 작성</h3> + +<pre class="brush: js">if (!Array.prototype.mapUsingReduce) { + Array.prototype.mapUsingReduce = function(callback, thisArg) { + return this.reduce(function(mappedArray, currentValue, index, array) { + mappedArray[index] = callback.call(thisArg, currentValue, index, array); + return mappedArray; + }, []); + }; +} + +[1, 2, , 3].mapUsingReduce( + (currentValue, index, array) => currentValue + index + array.length +); // [5, 7, , 10] + +</pre> + +<h2 id="폴리필">폴리필</h2> + +<pre class="brush: js">// ECMA-262의 진행 단계, 5판(Edition), 15.4.4.21 +// 참조: http://es5.github.io/#x15.4.4.21 +// https://tc39.github.io/ecma262/#sec-array.prototype.reduce +if (!Array.prototype.reduce) { + Object.defineProperty(Array.prototype, 'reduce', { + value: function(callback /*, initialValue*/) { + if (this === null) { + throw new TypeError( 'Array.prototype.reduce ' + + 'called on null or undefined' ); + } + if (typeof callback !== 'function') { + throw new TypeError( callback + + ' is not a function'); + } + + // 1. Let O be ? ToObject(this value). + var o = Object(this); + + // 2. Let len be ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // Steps 3, 4, 5, 6, 7 + var k = 0; + var value; + + if (arguments.length >= 2) { + value = arguments[1]; + } else { + while (k < len && !(k in o)) { + k++; + } + + // 3. If len is 0 and initialValue is not present, + // throw a TypeError exception. + if (k >= len) { + throw new TypeError( 'Reduce of empty array ' + + 'with no initial value' ); + } + value = o[k++]; + } + + // 8. Repeat, while k < len + while (k < len) { + // a. Let Pk be ! ToString(k). + // b. Let kPresent be ? HasProperty(O, Pk). + // c. If kPresent is true, then + // i. Let kValue be ? Get(O, Pk). + // ii. Let accumulator be ? Call( + // callbackfn, undefined, + // « accumulator, kValue, k, O »). + if (k in o) { + value = callback(value, o[k], k, o); + } + + // d. Increase k by 1. + k++; + } + + // 9. Return accumulator. + return value; + } + }); +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce()')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.8.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.reduce")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.reduceRight()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/reduceright/index.html b/files/ko/web/javascript/reference/global_objects/array/reduceright/index.html new file mode 100644 index 0000000000..07bbdb800e --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/reduceright/index.html @@ -0,0 +1,283 @@ +--- +title: Array.prototype.reduceRight() +slug: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight +tags: + - Array + - ECMAScript 5 + - JavaScript + - Method + - Prototype + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight +--- +<div>{{JSRef}}</div> + +<p><strong><code>reduceRight()</code></strong> 메서드는 누적기에 대해 함수를 적용하고 배열의 각 값 (오른쪽에서 왼쪽으로)은 값을 단일 값으로 줄여야합니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-reduce-right.html")}}</p> + +<p>왼쪽에서 오른쪽으로 {{jsxref("Array.prototype.reduce()")}}도 참조하십시오.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>arr</var>.reduceRight(<var>callback</var>[, <var>initialValue</var>])</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>4 개의 인수를 취하여 배열의 각 값에 대해 실행할 함수입니다. + <dl> + <dt><code>previousValue</code></dt> + <dd>콜백의 마지막 호출에서 이전에 리턴 된 값 또는 제공된 경우 initialValue. (아래 참조).</dd> + <dt><code>currentValue</code></dt> + <dd>배열에서 처리중인 현재 요소입니다.</dd> + <dt><code>index</code></dt> + <dd>배열에서 처리중인 현재 요소의 인덱스입니다.</dd> + <dt><code>array</code></dt> + <dd>배열 reduce가 호출되었습니다.</dd> + </dl> + </dd> + <dt><code>initialValue</code></dt> + <dd>선택 과목. 콜백의 최초의 호출의 최초의 인수로서 사용하는 객체입니다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>누적 계산의 결과를 반환합니다.</p> + +<h2 id="설명">설명</h2> + +<p><code>reduceRight는 배열의 구멍을 제외하고 배열에있는 각 요소에 대해 콜백 함수를 한 번 실행합니다.이 인수는 초기 값 (또는 이전 콜백 호출의 값), 현재 요소의 값, 현재 인덱스 및 반복이 일어나는 배열.</code></p> + +<p>reduceRight 콜백 호출은 다음과 같습니다.</p> + +<pre class="brush: js">array.reduceRight(function(previousValue, currentValue, index, array) { + // ... +}); +</pre> + +<p>함수가 처음 호출 될 때 previousValue 및 currentValue는 두 값 중 하나가 될 수 있습니다. reduceValue에 대한 호출에 initialValue가 제공된 경우 previousValue는 initialValue와 같고 currentValue는 배열의 마지막 값과 같습니다. initialValue가 제공되지 않으면 previousValue는 배열의 마지막 값과 같고 currentValue는 두 번째 - 마지막 값과 같습니다.</p> + +<p>배열이 비어 있고 initialValue가 제공되지 않으면 {{jsxref ( "TypeError")}}가 발생합니다. 배열에 요소가 1 개만 있어도 (위치에 관계없이) initialValue가 제공되지 않았던 경우, 또는 initialValue가 준비되어 있지만 배열이 비어있는 경우, 콜백을 호출하지 않고 솔로 값이 반환됩니다.</p> + +<p>함수의 일부 실행 예제는 다음과 같습니다.</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) { + return previousValue + currentValue; +}); +</pre> + +<p>콜백은 네 번 호출되며 각 호출의 인수와 반환 값은 다음과 같습니다.</p> + +<table> + <thead> + <tr> + <th scope="col"><code>previousValue</code></th> + <th scope="col"><code>currentValue</code></th> + <th scope="col"><code>index</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">return value</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">first call</th> + <td><code>4</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>7</code></td> + </tr> + <tr> + <th scope="row">second call</th> + <td><code>7</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>9</code></td> + </tr> + <tr> + <th scope="row">third call</th> + <td><code>9</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + <tr> + <th scope="row">fourth call</th> + <td><code>10</code></td> + <td><code>0</code></td> + <td><code>0</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + </tbody> +</table> + +<p>reduceRight에 의해 반환 된 값은 마지막 콜백 호출 (10)의 값이됩니다.</p> + +<p>initialValue를 제공하면 결과는 다음과 같습니다.</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) { + return previousValue + currentValue; +}, 10); +</pre> + +<table> + <thead> + <tr> + <th scope="col"><code>previousValue</code></th> + <th scope="col"><code>currentValue</code></th> + <th scope="col"><code>index</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">return value</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">first call</th> + <td><code>10</code></td> + <td><code>4</code></td> + <td><code>4</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>14</code></td> + </tr> + <tr> + <th scope="row">second call</th> + <td><code>14</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>17</code></td> + </tr> + <tr> + <th scope="row">third call</th> + <td><code>17</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>19</code></td> + </tr> + <tr> + <th scope="row">fourth call</th> + <td><code>19</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>20</code></td> + </tr> + <tr> + <th scope="row">fifth call</th> + <td><code>20</code></td> + <td><code>0</code></td> + <td><code>0</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>20</code></td> + </tr> + </tbody> +</table> + +<p>reduceRight에 의해 이번에 반환 된 값은 물론 20입니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="배열_내_모든_값의_합계_구하기">배열 내 모든 값의 합계 구하기</h3> + +<pre class="brush: js">var sum = [0, 1, 2, 3].reduceRight(function(a, b) { + return a + b; +}); +// sum is 6 +</pre> + +<h3 id="이중_배열_전개하기">이중 배열 전개하기</h3> + +<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) { + return a.concat(b); +}, []); +// flattened is [4, 5, 2, 3, 0, 1] +</pre> + +<h3 id="reduce와_reduceRight의_차이점">reduce와 reduceRight의 차이점</h3> + +<pre class="brush: js">var a = ["1", "2", "3", "4", "5"]; +var left = a.reduce(function(prev, cur) { return prev + cur; }); +var right = a.reduceRight(function(prev, cur) { return prev + cur; }); + +console.log(left); // "12345" +console.log(right); // "54321"</pre> + +<h2 id="폴리필">폴리필</h2> + +<p><code>reduceRight</code>는 5 판에서 ECMA-262 표준에 추가되었습니다. 표준의 모든 구현에 존재하지 않을 수도 있습니다. 이 문제를 해결하려면 스크립트 시작 부분에 다음 코드를 삽입하여 reduceRight를 기본적으로 지원하지 않는 구현에서 사용할 수있게하십시오.</p> + +<pre class="brush: js">// ECMA-262, 5 판, 15.4.4.22의 제작 단계 +// 참조 : http://es5.github.io/#x15.4.4.22 +if ('function' !== typeof Array.prototype.reduceRight) { + Array.prototype.reduceRight = function(callback /*, initialValue*/) { + 'use strict'; + if (null === this || 'undefined' === typeof this) { + throw new TypeError('Array.prototype.reduce called on null or undefined' ); + } + if ('function' !== typeof callback) { + throw new TypeError(callback + ' is not a function'); + } + var t = Object(this), len = t.length >>> 0, k = len - 1, value; + if (arguments.length >= 2) { + value = arguments[1]; + } else { + while (k >= 0 && !(k in t)) { + k--; + } + if (k < 0) { + throw new TypeError('Reduce of empty array with no initial value'); + } + value = t[k--]; + } + for (; k >= 0; k--) { + if (k in t) { + value = callback(value, t[k], k, t); + } + } + return value; + }; +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.22', 'Array.prototype.reduceRight')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.8.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("javascript.builtins.Array.reduceRight")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.reduce()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/reverse/index.html b/files/ko/web/javascript/reference/global_objects/array/reverse/index.html new file mode 100644 index 0000000000..95b4c1a348 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/reverse/index.html @@ -0,0 +1,87 @@ +--- +title: Array.prototype.reverse() +slug: Web/JavaScript/Reference/Global_Objects/Array/reverse +tags: + - Array + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse +--- +<div>{{JSRef}}</div> + +<p><code><strong>reverse()</strong></code> 메서드는 배열의 순서를 반전합니다. 첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 됩니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-reverse.html")}}</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>a</var>.reverse()</code></pre> + +<h3 id="반환_값">반환 값</h3> + +<p>순서가 반전된 배열.</p> + +<h2 id="설명">설명</h2> + +<p><code>reverse</code> 메서드는 호출한 배열을 반전하고 원본 배열을 변형하며 그 참조를 반환합니다.</p> + +<h2 id="예시">예시</h2> + +<h3 id="배열의_요소를_반전하기">배열의 요소를 반전하기</h3> + +<p>다음 예시는 3개의 요소가 든 myArray 배열을 만든 후, 반전시킵니다.</p> + +<pre><code>const a = [1, 2, 3]; +console.log(a); // [1, 2, 3] + +a.reverse(); +console.log(a); // [3, 2, 1]</code></pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("javascript.builtins.Array.reverse")}}</div> + +<div id="compat-desktop"> </div> + +<div id="compat-mobile"> </div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.join()")}}</li> + <li>{{jsxref("Array.prototype.sort()")}}</li> + <li>{{jsxref("TypedArray.prototype.reverse()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/shift/index.html b/files/ko/web/javascript/reference/global_objects/array/shift/index.html new file mode 100644 index 0000000000..bf610b95f9 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/shift/index.html @@ -0,0 +1,102 @@ +--- +title: Array.prototype.shift() +slug: Web/JavaScript/Reference/Global_Objects/Array/shift +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift +--- +<div>{{JSRef}}</div> + +<p><strong><code>shift()</code></strong> 메서드는 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다. 이 메서드는 배열의 길이를 변하게 합니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-shift.html")}}</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>arr</var>.shift()</code> +</pre> + +<h3 id="반환_값">반환 값</h3> + +<p>배열에서 제거한 요소. 빈 배열의 경우 {{jsxref("undefined")}} 를 반환합니다.</p> + +<h2 id="설명">설명</h2> + +<p><code>shift</code> 메서드는 0번째 위치의 요소를 제거 하고 연이은 나머지 값들의 위치를 한칸 씩 앞으로 당깁니다. 그리고 제거된 값을 반환 합니다. 만약 배열의 {{jsxref("Array.length", "length")}}가 0이라면 {{jsxref("undefined")}}를 리턴 합니다.</p> + +<p><code>shift</code>는 의도적인 일반형태로써; 이 메서드는 배열과 유사한 형태의 객체에서 {{jsxref("Function.call", "호출", "", 1)}} 하거나 {{jsxref("Function.apply", "적용", "", 1)}} 할 수 있습니다. 연속된 일련의 마지막 항목을 나타내는 길이 속성을 가지고 있지 않은 객체의 제로베이스 수치 속성에는 의미 있는 작동을 하지 않을 수 있습니다. (<em>Objects which do not contain a <code>length</code> property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner</em>.)</p> + +<h2 id="예제">예제</h2> + +<h3 id="배열에서_한_요소_제거하기">배열에서 한 요소 제거하기</h3> + +<p>아래 코드는 <code>myFish</code> 라는 배열에서 첫번째 요소를 제거 하기 전과 후를 보여 줍니다. 그리고 제거된 요소도 보여줍니다.</p> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'surgeon']; + +console.log('myFish before: ' + myFish); +// "제거전 myFish 배열: angel,clown,mandarin,surgeon" + +var shifted = myFish.shift(); + +console.log('myFish after: ' + myFish); +// "제거후 myFish 배열: clown,mandarin,surgeon" + +console.log('Removed this element: ' + shifted); +// "제거된 배열 요소: angel" +</pre> + +<h3 id="while_반복문_안에서_shift()_사용하기">while 반복문 안에서 shift() 사용하기</h3> + +<p>shift() 메서드는 while 문의 조건으로 사용되기도 합니다. 아래 코드에서는 while 문을 한번 돌 때 마다 배열의 다음 요소를 제거하고, 이는 빈 배열이 될 때까지 반복됩니다.</p> + +<pre><code>var names = ["Andrew", "Edward", "Paul", "Chris" ,"John"]; + +while( (i = names.shift()) !== undefined ) { + console.log(i); +} +// Andrew, Edward, Paul, Chris, John</code> +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.Array.shift")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/slice/index.html b/files/ko/web/javascript/reference/global_objects/array/slice/index.html new file mode 100644 index 0000000000..a5264b1f86 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/slice/index.html @@ -0,0 +1,155 @@ +--- +title: Array.prototype.slice() +slug: Web/JavaScript/Reference/Global_Objects/Array/slice +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice +--- +<div>{{JSRef}}</div> + +<p><code><strong>slice()</strong></code><strong> </strong>메서드는 어떤 배열의 <code>begin</code>부터 <code>end</code>까지(<code>end</code> 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-slice.html")}}</div> + +<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>arr</var>.slice([<em>begin</em>[, <em>end</em>]]) +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>begin</code> {{optional_inline}}</dt> + <dd>0을 시작으로 하는 추출 시작점에 대한 인덱스를 의미합니다.</dd> + <dd>음수 인덱스는 배열의 끝에서부터의 길이를 나타냅니다. <code>slice(-2)</code> 는 배열에서 마지막 두 개의 엘리먼트를 추출합니다.</dd> + <dd><code>begin</code>이 <code>undefined</code>인 경우에는, 0번 인덱스부터 <code>slice</code> 합니다.</dd> + <dd><code>begin</code>이 배열의 길이보다 큰 경우에는, 빈 배열을 반환합니다.</dd> + <dt><code>end</code> {{optional_inline}}</dt> + <dd>추출을 종료 할 0 기준 인덱스입니다. <code>slice</code> 는 <code>end</code> 인덱스를 제외하고 추출합니다.</dd> + <dd>예를 들어, <code>slice(1,4)</code>는 두번째 요소부터 네번째 요소까지 (1, 2 및 3을 인덱스로 하는 요소) 추출합니다.</dd> + <dd>음수 인덱스는 배열의 끝에서부터의 길이를 나타냅니다. 예를들어 <code>slice(2,-1)</code> 는 세번째부터 끝에서 두번째 요소까지 추출합니다.</dd> + <dd><code>end</code>가 생략되면 <code>slice()</code>는 배열의 끝까지(<code>arr.length</code>) 추출합니다.</dd> +</dl> + +<p> 만약 <code>end</code> 값이 배열의 길이보다 크다면, <code>silce()</code>는 배열의 끝까지(<code>arr.length</code>) 추출합니다.</p> + +<dl> + <dt> + <h3 id="반환_값">반환 값</h3> + </dt> +</dl> + +<p>추출한 요소를 포함한 새로운 배열.</p> + +<h2 id="설명">설명</h2> + +<p><code>slice()</code>는 원본을 대체하지 않습니다. 원본 배열에서 요소의 얕은 복사본을 반환합니다. 원본 배열의 요소는 다음과 같이 반환 된 배열에 복사됩니다:</p> + +<ul> + <li>객체 참조(및 실제 객체가 아님)의 경우, <code>slice()</code>는 객체 참조를 새 배열로 복사합니다. 원본 배열과 새 배열은 모두 동일한 객체를 참조합니다. 참조 된 객체가 변경되면 변경 내용은 새 배열과 원래 배열 모두에서 볼 수 있습니다.</li> + <li>{{jsxref ("String")}} 및 {{jsxref("Number")}} 객체가 아닌 문자열과 숫자의 경우 <code>slice()</code>는 문자열과 숫자를 새 배열에 복사합니다. 한 배열에서 문자열이나 숫자를 변경해도 다른 배열에는 영향을 주지 않습니다.</li> +</ul> + +<p>새 요소를 두 배열 중 하나에 추가해도 다른 배열은 영향을 받지 않습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="기존_배열의_일부_반환">기존 배열의 일부 반환</h3> + +<pre class="brush: js">let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] +let citrus = fruits.slice(1, 3) + +// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] +// citrus contains ['Orange','Lemon']</pre> + +<h3 id="slice_사용하기"><code>slice</code> 사용하기</h3> + +<p>다음 예제에서 <code>slice()</code>는 <code>myCar</code>에서 <code>newCar</code>라는 새 배열을 만듭니다. 두 가지 모두 <code>myHonda</code> 객체에 대한 참조를 포함합니다. <code>myHonda</code>의 색상이 자주색으로 변경되면 두 배열 모두 변경 사항을 반영합니다.</p> + +<pre class="brush: js">// Using slice, create newCar from myCar. +let myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } } +let myCar = [myHonda, 2, 'cherry condition', 'purchased 1997'] +let newCar = myCar.slice(0, 2) + +// Display the values of myCar, newCar, and the color of myHonda +// referenced from both arrays. +console.log('myCar = ' + JSON.stringify(myCar)) +console.log('newCar = ' + JSON.stringify(newCar)) +console.log('myCar[0].color = ' + myCar[0].color) +console.log('newCar[0].color = ' + newCar[0].color) + +// Change the color of myHonda. +myHonda.color = 'purple' +console.log('The new color of my Honda is ' + myHonda.color) + +// Display the color of myHonda referenced from both arrays. +console.log('myCar[0].color = ' + myCar[0].color) +console.log('newCar[0].color = ' + newCar[0].color)</pre> + +<p>스크립트를 실행하면 다음과 같은 기록을 남깁니다.</p> + +<pre>myCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2, + 'cherry condition', 'purchased 1997'] +newCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2] +myCar[0].color = red +newCar[0].color = red +The new color of my Honda is purple +myCar[0].color = purple +newCar[0].color = purple</pre> + +<h3 id="배열형_객체">배열형 객체</h3> + +<p><code>slice()</code> 메서드를 호출하여 배열형 객체와 콜렉션을 새로운 <code>Array</code>로 변환할 수 있습니다. 단순히 {{jsxref("Function.prototype.bind()")}}를 사용해 객체에 <code>slice()</code>를 바인딩 하면 됩니다. 대표적인 "배열형 객체"의 예시는 함수 내의 {{jsxref("Functions/arguments", "arguments")}}입니다.</p> + +<pre class="brush: js">function list() { + return Array.prototype.slice.call(arguments); +} + +let list1 = list(1, 2, 3); // [1, 2, 3] +</pre> + +<p>{{jsxref("Function.prototype.call()")}} 메서드를 사용해서도 바인딩을 할 수 있으며, <code>Array.prototype.slice.call</code> 대신 더 짧게 <code>[].slice.call</code>로 작성할 수도 있습니다.</p> + +<p>아무튼, 다음과 같이 {{jsxref("Function.prototype.bind", "bind()")}}를 사용해 줄일 수 있습니다.</p> + +<pre class="brush: js">let unboundSlice = Array.prototype.slice +let slice = Function.prototype.call.bind(unboundSlice) + +function list() { + return slice(arguments) +} + +let list1 = list(1, 2, 3) // [1, 2, 3]</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Array.slice")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.splice()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/some/index.html b/files/ko/web/javascript/reference/global_objects/array/some/index.html new file mode 100644 index 0000000000..8fbe19bcda --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/some/index.html @@ -0,0 +1,202 @@ +--- +title: Array.prototype.some() +slug: Web/JavaScript/Reference/Global_Objects/Array/some +tags: + - Array + - ECMAScript 5 + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/some +--- +<div>{{JSRef}}</div> + +<p><code><strong>some()</strong></code> 메서드는 배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트합니다.</p> + +<div class="note"> +<p><strong>참고</strong>: 빈 배열에서 호출하면 무조건 <code>false</code>를 반환합니다.</p> +</div> + +<p>{{EmbedInteractiveExample("pages/js/array-some.html")}}</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>arr</var>.some(<var>callback</var>[, <var>thisArg</var>])</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>각 요소를 시험할 함수. 다음 세 가지 인수를 받습니다. + <dl> + <dt><code>currentValue</code></dt> + <dd>처리할 현재 요소.</dd> + <dt><code>index</code> {{Optional_inline}}</dt> + <dd>처리할 현재 요소의 인덱스.</dd> + <dt><code>array</code> {{Optional_inline}}</dt> + <dd><code>some</code>을 호출한 배열.</dd> + </dl> + </dd> + <dt><code>thisArg</code> {{Optional_inline}}</dt> + <dd><code>callback</code>을 실행할 때 <code>this</code>로 사용하는 값.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p><code>callback</code>이 어떤 배열 요소라도 대해 참인({{Glossary("truthy")}}) 값을 반환하는 경우 <code><strong>true</strong></code>, 그 외엔 <code><strong>false</strong></code>.</p> + +<h2 id="설명">설명</h2> + +<p><code>some</code>은 <code>callback</code>이 참(불린으로 변환했을 때 <code>true</code>가 되는 값)을 반환하는 요소를 찾을 때까지 배열에 있는 각 요소에 대해 한 번씩 <code>callback</code> 함수를 실행합니다. 해당하는 요소를 발견한 경우 <code>some</code>은 즉시 <code>true</code>를 반환합니다. 그렇지 않으면, 즉 모든 값에서 거짓을 반환하면 <code>false</code>를 반환합니다. 할당한 값이 있는 배열의 인덱스에서만 <code>callback</code>을 호출합니다. 삭제했거나 값을 할당한 적이 없는 인덱스에서는 호출하지 않습니다.</p> + +<p><code>callback</code>은 요소의 값, 해당 요소의 인덱스 및 순회하고 있는 배열 세 가지 인수와 함께 호출됩니다.</p> + +<p><code>thisArg</code> 매개변수를 <code>some</code>에 제공한 경우 <code>callback</code>의 <code>this</code>로 사용됩니다. 그 외엔 {{jsxref("undefined")}}값을 사용합니다. 최종적으로 <code>callback</code>이 볼 수 있는 <code>this</code>의 값은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/this">함수가 볼 수 있는 <code>this</code>를 결정하는 평소 규칙</a>을 따릅니다.</p> + +<p><code>some</code>은 호출한 배열을 변형하지 않습니다.</p> + +<p><code>some</code>이 처리하는 요소의 범위는 <code>callback</code>의 첫 호출 전에 설정됩니다. <code>some</code> 호출 이후로 배열에 추가하는 요소는 <code>callback</code>이 방문하지 않습니다. 배열에 원래 있었지만 아직 방문하지 않은 요소가 <code>callback</code>에 의해 변경된 경우, 그 인덱스를 방문하는 시점의 값을 사용합니다. 삭제한 요소는 방문하지 않습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="배열의_요소_테스트">배열의 요소 테스트</h3> + +<p>다음 예제는 배열 내 요소 중 하나라도 10보다 큰지 판별합니다.</p> + +<pre class="brush: js">function isBiggerThan10(element, index, array) { + return element > 10; +} +[2, 5, 8, 1, 4].some(isBiggerThan10); // false +[12, 5, 8, 1, 4].some(isBiggerThan10); // true +</pre> + +<h3 id="화살표_함수를_사용한_배열의_요소_테스트">화살표 함수를 사용한 배열의 요소 테스트</h3> + +<p><a href="/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션">화살표 함수</a>는 같은 테스트에 대해 더 짧은 구문을 제공합니다.</p> + +<pre class="brush: js">[2, 5, 8, 1, 4].some(elem => elem > 10); // false +[12, 5, 8, 1, 4].some(elem => elem > 10); // true +</pre> + +<h3 id="값이_배열_내_존재하는지_확인">값이 배열 내 존재하는지 확인</h3> + +<p>다음 예제는 요소가 하나라도 배열 내 존재하는 경우 <code>true</code>를 반환합니다.</p> + +<pre class="brush: js">var fruits = ['apple', 'banana', 'mango', 'guava']; + +function checkAvailability(arr, val) { + return arr.some(function(arrVal) { + return val === arrVal; + }); +} + +checkAvailability(fruits, 'kela'); //false +checkAvailability(fruits, 'banana'); //true</pre> + +<h3 id="화살표_함수를_사용하여_값이_존재하는지_확인">화살표 함수를 사용하여 값이 존재하는지 확인</h3> + +<pre class="brush: js">var fruits = ['apple', 'banana', 'mango', 'guava']; + +function checkAvailability(arr, val) { + return arr.some(arrVal => val === arrVal); +} + +checkAvailability(fruits, 'kela'); //false +checkAvailability(fruits, 'banana'); //true</pre> + +<h3 id="모든_값을_불린으로_변환">모든 값을 불린으로 변환</h3> + +<pre class="brush: js">var TRUTHY_VALUES = [true, 'true', 1]; + +function getBoolean(a) { + 'use strict'; + + var value = a; + + if (typeof value === 'string') { + value = value.toLowerCase().trim(); + } + + return TRUTHY_VALUES.some(function(t) { + return t === value; + }); +} + +getBoolean(false); // false +getBoolean('false'); // false +getBoolean(1); // true +getBoolean('true'); // true</pre> + +<h2 id="폴리필">폴리필</h2> + +<p><code><font face="consolas, Liberation Mono, courier, monospace">some</font></code>은 ECMA-262 표준 제5판에 추가됐습니다. 따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 환경에서도 <code>some</code>을 사용할 수 있습니다. 아래 알고리즘은 {{jsxref("Object")}}와 {{jsxref("TypeError")}}가 변형되지 않고, <code>fun.call</code>의 계산 값이 원래의 {{jsxref("Function.prototype.call()")}}과 같은 경우 ECMA-262 제5판이 명시한 것과 동일합니다.</p> + +<pre class="brush: js">// ECMA-262 5판, 15.4.4.17항의 작성 과정 +// 출처: http://es5.github.io/#x15.4.4.17 +if (!Array.prototype.some) { + Array.prototype.some = function(fun/*, thisArg*/) { + 'use strict'; + + if (this == null) { + throw new TypeError('Array.prototype.some called on null or undefined'); + } + + if (typeof fun !== 'function') { + throw new TypeError(); + } + + var t = Object(this); + var len = t.length >>> 0; + + var thisArg = arguments.length >= 2 ? arguments[1] : void 0; + for (var i = 0; i < len; i++) { + if (i in t && fun.call(thisArg, t[i], i, t)) { + return true; + } + } + + return false; + }; +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.17', 'Array.prototype.some')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>초기 정의. JavaScript 1.6에서 구현됨.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.some', 'Array.prototype.some')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.some', 'Array.prototype.some')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.Array.some")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("TypedArray.prototype.some()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/sort/index.html b/files/ko/web/javascript/reference/global_objects/array/sort/index.html new file mode 100644 index 0000000000..ddab9a428f --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/sort/index.html @@ -0,0 +1,245 @@ +--- +title: Array.prototype.sort() +slug: Web/JavaScript/Reference/Global_Objects/Array/sort +tags: + - Array + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort +--- +<div>{{JSRef}}</div> + +<p><code><strong>sort()</strong></code> 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 <a href="https://en.wikipedia.org/wiki/Sorting_algorithm#Stability">stable sort</a>가 아닐 수 있습니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다.</p> + +<p>정렬 속도와 복잡도는 각 구현방식에 따라 다를 수 있습니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-sort.html")}}</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>arr</var>.sort([<var>compareFunction]</var>) +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>compareFunction</code> {{optional_inline}}</dt> + <dd>정렬 순서를 정의하는 함수. 생략하면 배열은 각 요소의 문자열 변환에 따라 각 문자의 유니 코드 코드 포인트 값에 따라 정렬됩니다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>정렬한 배열. 원 배열이 정렬되는 것에 유의하세요. 복사본이 만들어지는 것이 아닙니다.</p> + +<h2 id="설명">설명</h2> + +<p><code>compareFunction</code>이 제공되지 않으면 요소를 문자열로 변환하고 유니 코드 코드 포인트 순서로 문자열을 비교하여 정렬됩니다. 예를 들어 "바나나"는 "체리"앞에옵니다. 숫자 정렬에서는 9가 80보다 앞에 오지만 숫자는 문자열로 변환되기 때문에 "80"은 유니 코드 순서에서 "9"앞에옵니다.</p> + +<p><code>compareFunction</code>이 제공되면 배열 요소는 compare 함수의 반환 값에 따라 정렬됩니다. a와 b가 비교되는 두 요소라면,</p> + +<ul> + <li><code>compareFunction(a, b)</code>이 0보다 작은 경우 a를 b보다 낮은 색인으로 정렬합니다. 즉, a가 먼저옵니다.</li> + <li><code>compareFunction(a, b)</code>이 0을 반환하면 a와 b를 서로에 대해 변경하지 않고 모든 다른 요소에 대해 정렬합니다. 참고 : ECMAscript 표준은 이러한 동작을 보장하지 않으므로 모든 브라우저(예 : Mozilla 버전은 적어도 2003 년 이후 버전 임)가 이를 존중하지는 않습니다.</li> + <li><code>compareFunction(a, b)</code>이 0보다 큰 경우, b를 a보다 낮은 인덱스로 소트합니다.</li> + <li><code>compareFunction(a, b)</code>은 요소 a와 b의 특정 쌍이 두 개의 인수로 주어질 때 항상 동일한 값을 반환해야합니다. 일치하지 않는 결과가 반환되면 정렬 순서는 정의되지 않습니다.</li> +</ul> + +<p>따라서 compare 함수의 형식은 다음과 같습니다.</p> + +<pre class="brush: js">function compare(a, b) { + if (a is less than b by some ordering criterion) { + return -1; + } + if (a is greater than b by the ordering criterion) { + return 1; + } + // a must be equal to b + return 0; +} +</pre> + +<p>문자열 대신 숫자를 비교하기 위해 compare 함수는 a에서 b를 뺄 수 있습니다. 다음 함수는 배열을 오름차순으로 정렬합니다 (Infinity 및 NaN이 포함되어 있지 않은 경우).</p> + +<pre class="brush: js">function compareNumbers(a, b) { + return a - b; +} +</pre> + +<p>sort 메소드는 {{jsxref ( "연산자 / 함수", "함수식", "", 1)}} (및 클로저)와 함께 편리하게 사용할 수 있습니다.</p> + +<pre class="brush: js">var numbers = [4, 2, 5, 1, 3]; +numbers.sort(function(a, b) { + return a - b; +}); +console.log(numbers); + +// [1, 2, 3, 4, 5] +</pre> + +<p>개체는 해당 속성 중 하나의 값을 기준으로 정렬 할 수 있습니다.</p> + +<pre class="brush: js">var items = [ + { name: 'Edward', value: 21 }, + { name: 'Sharpe', value: 37 }, + { name: 'And', value: 45 }, + { name: 'The', value: -12 }, + { name: 'Magnetic', value: 13 }, + { name: 'Zeros', value: 37 } +]; + +// value 기준으로 정렬 +items.sort(function (a, b) { + if (a.value > b.value) { + return 1; + } + if (a.value < b.value) { + return -1; + } + // a must be equal to b + return 0; +}); + +// name 기준으로 정렬 +items.sort(function(a, b) { + var nameA = a.name.toUpperCase(); // ignore upper and lowercase + var nameB = b.name.toUpperCase(); // ignore upper and lowercase + if (nameA < nameB) { + return -1; + } + if (nameA > nameB) { + return 1; + } + + // 이름이 같을 경우 + return 0; +});</pre> + +<h2 id="예제">예제</h2> + +<h3 id="배열_만들기_표시_및_정렬">배열 만들기, 표시 및 정렬</h3> + +<p>다음 예제에서는 네 개의 배열을 만들고 원래 배열을 표시 한 다음 정렬 된 배열을 표시합니다. 숫자 배열은 비교 함수없이 정렬 된 다음 비교 함수로 정렬됩니다.</p> + +<pre class="brush: js">var stringArray = ['Blue', 'Humpback', 'Beluga']; +var numericStringArray = ['80', '9', '700']; +var numberArray = [40, 1, 5, 200]; +var mixedNumericArray = ['80', '9', '700', 40, 1, 5, 200]; + +function compareNumbers(a, b) { + return a - b; +} + +console.log('stringArray:', stringArray.join()); +console.log('Sorted:', stringArray.sort()); + +console.log('numberArray:', numberArray.join()); +console.log('Sorted without a compare function:', numberArray.sort()); +console.log('Sorted with compareNumbers:', numberArray.sort(compareNumbers)); + +console.log('numericStringArray:', numericStringArray.join()); +console.log('Sorted without a compare function:', numericStringArray.sort()); +console.log('Sorted with compareNumbers:', numericStringArray.sort(compareNumbers)); + +console.log('mixedNumericArray:', mixedNumericArray.join()); +console.log('Sorted without a compare function:', mixedNumericArray.sort()); +console.log('Sorted with compareNumbers:', mixedNumericArray.sort(compareNumbers)); +</pre> + +<p>이 예제는 다음 출력을 생성합니다. 결과가 보여 주듯이 비교 함수가 사용되면 숫자는 숫자 또는 숫자 문자열인지 여부에 관계없이 올바르게 정렬됩니다.</p> + +<pre>stringArray: Blue,Humpback,Beluga +Sorted: Beluga,Blue,Humpback + +numberArray: 40,1,5,200 +Sorted without a compare function: 1,200,40,5 +Sorted with compareNumbers: 1,5,40,200 + +numericStringArray: 80,9,700 +Sorted without a compare function: 700,80,9 +Sorted with compareNumbers: 9,80,700 + +mixedNumericArray: 80,9,700,40,1,5,200 +Sorted without a compare function: 1,200,40,5,700,80,9 +Sorted with compareNumbers: 1,5,9,40,80,200,700 +</pre> + +<h3 id="비_ASCII_문자_정렬">비 ASCII 문자 정렬</h3> + +<p>ASCII 이외의 문자, 즉 악센트 부호가있는 문자 (e, é, è, a, ä 등)가있는 문자열을 정렬하려면 영어가 아닌 다른 언어의 문자열에 {{jsxref ( "String.localeCompare")}}를 사용하십시오. 이 함수는 해당 문자를 비교하여 올바른 순서로 나타낼 수 있습니다.</p> + +<pre class="brush: js">var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu']; +items.sort(function (a, b) { + return a.localeCompare(b); +}); + +// items is ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé'] +</pre> + +<h3 id="map을_사용한_정렬">map을 사용한 정렬</h3> + +<p><code>compareFunction</code>은 배열 내의 요소마다 여러 번 호출될 수 있습니다. 이러한 <code>compareFunction</code>의 성질에 따라, 높은 오버헤드가 발생할 수도 있습니다. <code>compareFunction</code>이 복잡해지고, 정렬할 요소가 많아질 경우, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>을 사용한 정렬을 고려해보는 것이 좋습니다. 이 방법은 임시 배열을 하나 만들어서 여기에 실제 정렬에 사용할 값만을 뽑아서 넣어서 이를 정렬하고, 그 결과를 이용해서 실제 정렬을 하는 것입니다.</p> + +<pre class="brush: js">// 소트 할 배열 +var list = ['Delta', 'alpha', 'CHARLIE', 'bravo']; + +// 임시 배열은 위치 및 정렬 값이있는 객체를 보유합니다. +var mapped = list.map(function(el, i) { + return { index: i, value: el.toLowerCase() }; +}) + +// 축소 치를 포함한 매핑 된 배열의 소트 +mapped.sort(function(a, b) { + return +(a.value > b.value) || +(a.value === b.value) - 1; +}); + +// 결과 순서를 위한 컨테이너 +var result = mapped.map(function(el){ + return list[el.index]; +}); +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.11', 'Array.prototype.sort')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("javascript.builtins.Array.sort")}}</div> + +<div id="compat-mobile"></div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.reverse()")}}</li> + <li>{{jsxref("String.prototype.localeCompare()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/splice/index.html b/files/ko/web/javascript/reference/global_objects/array/splice/index.html new file mode 100644 index 0000000000..eb2a09af12 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/splice/index.html @@ -0,0 +1,153 @@ +--- +title: Array.prototype.splice() +slug: Web/JavaScript/Reference/Global_Objects/Array/splice +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice +--- +<div>{{JSRef}}</div> + +<p><code><strong>splice()</strong></code> 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-splice.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">array.splice(<em>start</em>[, <em>deleteCount</em>[, <em>item1</em>[, <em>item2</em>[, <em>...</em>]]]]) +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>start</code></dt> + <dd>배열의 변경을 시작할 인덱스입니다. 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정됩니다. 음수인 경우 배열의 끝에서부터 요소를 세어나갑니다(원점 -1, 즉 -n이면 요소 끝의 n번째 요소를 가리키며 <code>array.length - n</code>번째 인덱스와 같음). 값의 절대값이 배열의 길이 보다 큰 경우 0으로 설정됩니다.</dd> + <dt><code>deleteCount</code> {{optional_inline}}</dt> + <dd>배열에서 제거할 요소의 수입니다.</dd> + <dd><code>deleteCount</code>를 생략하거나 값이 <code>array.length - start</code>보다 크면 <code>start</code>부터의 모든 요소를 제거합니다.</dd> + <dd><code>deleteCount</code>가 0 이하라면 어떤 요소도 제거하지 않습니다. 이 때는 최소한 하나의 새로운 요소를 지정해야 합니다.</dd> + <dt><code>item1, item2, <em>...</em></code> {{optional_inline}}</dt> + <dd>배열에 추가할 요소입니다. 아무 요소도 지정하지 않으면 <code>splice()</code>는 요소를 제거하기만 합니다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>제거한 요소를 담은 배열. 하나의 요소만 제거한 경우 길이가 1인 배열을 반환합니다. 아무 값도 제거하지 않았으면 빈 배열을 반환합니다.</p> + +<h2 id="설명">설명</h2> + +<p>만약 제거할 요소의 수와 추가할 요소의 수가 다른 경우 배열의 길이는 달라집니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="하나도_제거하지_않고_2번_인덱스에_drum_추가">하나도 제거하지 않고, 2번 인덱스에 "drum" 추가</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(2, 0, 'drum'); + +// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"] +// removed is [], no elements removed</pre> + +<h3 id="하나도_제거하지_않고_2번_인덱스에_drum과_guitar_추가">하나도 제거하지 않고, 2번 인덱스에 "drum"과 "guitar" 추가</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(2, 0, 'drum', 'guitar'); + +// myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"] +// removed is [], no elements removed +</pre> + +<h3 id="3번_인덱스에서_한_개_요소_제거">3번 인덱스에서 한 개 요소 제거</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']; +var removed = myFish.splice(3, 1); + +// removed is ["mandarin"] +// myFish is ["angel", "clown", "drum", "sturgeon"] +</pre> + +<h3 id="2번_인덱스에서_한_개_요소_제거하고_trumpet_추가">2번 인덱스에서 한 개 요소 제거하고 "trumpet" 추가</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'sturgeon']; +var removed = myFish.splice(2, 1, 'trumpet'); + +// myFish is ["angel", "clown", "trumpet", "sturgeon"] +// removed is ["drum"]</pre> + +<h3 id="0번_인덱스에서_두_개_요소_제거하고_parrot_anemone_blue_추가">0번 인덱스에서 두 개 요소 제거하고 "parrot", "anemone", "blue" 추가</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'trumpet', 'sturgeon']; +var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue'); + +// myFish is ["parrot", "anemone", "blue", "trumpet", "sturgeon"] +// removed is ["angel", "clown"]</pre> + +<h3 id="2번_인덱스에서_두_개_요소_제거">2번 인덱스에서 두 개 요소 제거</h3> + +<pre class="brush: js">var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon']; +var removed = myFish.splice(myFish.length - 3, 2); + +// myFish is ["parrot", "anemone", "sturgeon"] +// removed is ["blue", "trumpet"]</pre> + +<h3 id="-2번_인덱스에서_한_개_요소_제거">-2번 인덱스에서 한 개 요소 제거</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(-2, 1); + +// myFish is ["angel", "clown", "sturgeon"] +// removed is ["mandarin"]</pre> + +<h3 id="2번_인덱스를_포함해서_이후의_모든_요소_제거">2번 인덱스를 포함해서 이후의 모든 요소 제거</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(2); + +// myFish is ["angel", "clown"] +// removed is ["mandarin", "sturgeon"]</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Array.splice")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()", "push()")}} / {{jsxref("Array.prototype.pop()", "pop()")}} — 배열 끝에 요소를 추가하거나 제거</li> + <li>{{jsxref("Array.prototype.unshift()", "unshift()")}} / {{jsxref("Array.prototype.shift()", "shift()")}} — 배열 처음에 요소를 추가하거나 제거</li> + <li>{{jsxref("Array.prototype.concat()", "concat()")}} — 배열과 배열 또는 값을 합친 새로운 배열 반환</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/tolocalestring/index.html b/files/ko/web/javascript/reference/global_objects/array/tolocalestring/index.html new file mode 100644 index 0000000000..4fc1bd7f1a --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/tolocalestring/index.html @@ -0,0 +1,195 @@ +--- +title: Array.prototype.toLocaleString() +slug: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString +tags: + - Array + - Internationalization + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString +--- +<div>{{JSRef}}</div> + +<p><code><strong>toLocaleString()</strong></code> 메서드는 배열의 요소를 나타내는 문자열을 반환합니다. 요소는 <code>toLocaleString</code> 메서드를 사용하여 문자열로 변환되고 이 문자열은 locale 고유 문자열(가령 쉼표 “,”)에 의해 분리됩니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-tolocalestring.html")}}</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>arr</var>.toLocaleString([locales[, options]]);</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>locales</code> {{optional_inline}}</dt> + <dd>A string with a BCP 47 language tag, or an array of such strings. For the general form and interpretation of the <code>locales</code> argument, see the {{jsxref("Intl")}} page.</dd> + <dt><code>options</code> {{optional_inline}}</dt> + <dd>An object with configuration properties, for numbers see {{jsxref("Number.prototype.toLocaleString()")}}, and for dates see {{jsxref("Date.prototype.toLocaleString()")}}.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>배열의 요소를 표현하는 문자열.</p> + +<h2 id="설명">설명</h2> + +<p>배열의 요소는 <code>toLocaleString</code> 메서드를 사용하여 문자열로 변환됩니다:</p> + +<ul> + <li><code>Object</code>: {{jsxref("Object.prototype.toLocaleString()")}}</li> + <li><code>Number</code>: {{jsxref("Number.prototype.toLocaleString()")}}</li> + <li><code>Date</code>: {{jsxref("Date.prototype.toLocaleString()")}}</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="toLocaleString_사용"><code>toLocaleString</code> 사용</h3> + +<pre class="brush: js">var number = 1337; +var date = new Date(); +var myArr = [number, date, 'foo']; + +var str = myArr.toLocaleString(); + +console.log(str); +// '1337,6.12.2013 19:37:35,foo' 출력(log) +// Europe/Berlin 시간대로 German (de-DE) locale에서 실행하는 경우 +</pre> + +<h2 id="폴리필">폴리필</h2> + +<pre class="brush: js">// https://tc39.github.io/ecma402/#sup-array.prototype.tolocalestring +if (!Array.prototype.toLocaleString) { + Object.defineProperty(Array.prototype, 'toLocaleString', { + value: function(locales, options) { + // 1. Let O be ? ToObject(this value). + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var a = Object(this); + + // 2. Let len be ? ToLength(? Get(A, "length")). + var len = a.length >>> 0; + + // 3. Let separator be the String value for the + // list-separator String appropriate for the + // host environment's current locale (this is + // derived in an implementation-defined way). + // NOTE: In this case, we will use a comma + var separator = ','; + + // 4. If len is zero, return the empty String. + if (len === 0) { + return ''; + } + + // 5. Let firstElement be ? Get(A, "0"). + var firstElement = a[0]; + // 6. If firstElement is undefined or null, then + // a.Let R be the empty String. + // 7. Else, + // a. Let R be ? + // ToString(? + // Invoke( + // firstElement, + // "toLocaleString", + // « locales, options » + // ) + // ) + var r = firstElement == null ? + '' : firstElement.toLocaleString(locales, options); + + // 8. Let k be 1. + var k = 1; + + // 9. Repeat, while k < len + while (k < len) { + // a. Let S be a String value produced by + // concatenating R and separator. + var s = r + separator; + + // b. Let nextElement be ? Get(A, ToString(k)). + var nextElement = a[k]; + + // c. If nextElement is undefined or null, then + // i. Let R be the empty String. + // d. Else, + // i. Let R be ? + // ToString(? + // Invoke( + // nextElement, + // "toLocaleString", + // « locales, options » + // ) + // ) + r = nextElement == null ? + '' : nextElement.toLocaleString(locales, options); + + // e. Let R be a String value produced by + // concatenating S and R. + r = s + r; + + // f. Increase k by 1. + k++; + } + + // 10. Return R. + return r; + } + }); +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.3', 'Array.prototype.toLocaleString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sup-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td> + <td>{{Spec2('ES Int Draft')}}</td> + <td>This definition supersedes the definition provided in ECMA-262.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.Array.toLocaleString")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.toString()")}}</li> + <li>{{jsxref("Intl")}}</li> + <li>{{jsxref("Object.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Number.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Date.prototype.toLocaleString()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/tosource/index.html b/files/ko/web/javascript/reference/global_objects/array/tosource/index.html new file mode 100644 index 0000000000..e503b9c617 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/tosource/index.html @@ -0,0 +1,71 @@ +--- +title: Array.prototype.toSource() +slug: Web/JavaScript/Reference/Global_Objects/Array/toSource +tags: + - Array + - JavaScript + - Method + - Non-standard + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toSource +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p><code><strong>toSource()</strong></code> 메서드는 해당 배열의 소스 코드를 문자열로 반환합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>arr</var>.toSource()</pre> + +<h3 id="반환_값">반환 값</h3> + +<p>배열의 소스 코드를 나타내는 문자열을 반환합니다.</p> + +<h2 id="설명">설명</h2> + +<p><code>toSource</code> 메서드는 다음의 값을 반환합니다.</p> + +<ul> + <li>내장 된 {{jsxref("Array")}} 객체의 경우에는 <code>toSource</code>는 소스 코드를 사용할 수 없음을 나타내며 다음의 문자열을 반환합니다. + + <pre class="brush: js">function Array() { + [native code] +} +</pre> + </li> + <li>{{jsxref("Array")}} 인스턴스의 경우에는<code>toSource</code>는 소스 코드를 나타내는 문자열을 반환합니다.</li> +</ul> + +<p>이 메서드는 보통 코드에 명시되지 않고 자바스크립트 내부적으로 호출됩니다. 디버깅을 위해 <code>toSource</code>를 호출하여 배열의 내용을 검사할 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="배열의_소스_코드_검사하기">배열의 소스 코드 검사하기</h3> + +<p>다음 코드는 배열의 소스 코드 문자열을 생성합니다.</p> + +<pre class="brush: js">var alpha = new Array('a', 'b', 'c'); + +alpha.toSource(); +//returns ['a', 'b', 'c'] +</pre> + +<h2 id="명세">명세</h2> + +<p>Not part of any standard. Implemented in JavaScript 1.3.</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.toSource")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> + <li>{{jsxref("Array.prototype.toString()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/tostring/index.html b/files/ko/web/javascript/reference/global_objects/array/tostring/index.html new file mode 100644 index 0000000000..9a1179be14 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/tostring/index.html @@ -0,0 +1,80 @@ +--- +title: Array.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Array/toString +tags: + - Array + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString +--- +<div>{{JSRef}}</div> + +<p><code><strong>toString()</strong></code> 메서드는 지정된 배열 및 그 요소를 나타내는 문자열을 반환합니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-tostring.html")}}</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>arr</var>.toString()</code></pre> + +<h3 id="반환_값">반환 값</h3> + +<p>배열을 표현하는 문자열을 반환합니다.</p> + +<h2 id="설명">설명</h2> + +<p>{{jsxref("Array")}} 객체는 {{jsxref("Object")}}의 <code>toString</code> 메서드를 재정의(override)합니다. Array 객체에 대해, <code>toString</code> 메서드는 배열을 합쳐(join) 쉼표로 구분된 각 배열 요소를 포함하는 문자열 하나를 반환합니다. 예를 들어, 다음 코드는 배열을 생성하며 그 배열을 문자열로 변환하기 위해 <code>toString</code>을 사용합니다.</p> + +<pre class="brush: js">var monthNames = ['Jan', 'Feb', 'Mar', 'Apr']; +var myVar = monthNames.toString(); // 'Jan,Feb,Mar,Apr'을 myVar에 할당. +</pre> + +<p>JavaScript는 배열이 텍스트 값으로 표현되거나 배열이 문자열 연결(concatenation)에 참조될 때 자동으로 <code>toString</code> 메서드를 호출합니다.</p> + +<h3 id="ECMAScript_5_의미">ECMAScript 5 의미</h3> + +<p>JavaScript 1.8.5 (Firefox 4)부터, ECMAScript 제5판 의미(semantics)와 일치하는 <code>toString()</code> 메서드는 일반(generic) 메서드이므로 모든 객체에 사용될 수 있습니다. 객체가 <code>join()</code> 메서드가 있는 경우, 호출되어 그 값이 반환됩니다. 그렇지 않으면 {{jsxref("Object.prototype.toString()")}}가 호출되어 그 결과값이 반환됩니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>초기 정의. JavaScript 1.1에서 구현됨.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.2', 'Array.prototype.toString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.Array.toString")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.join()")}}</li> + <li>{{jsxref("Object.prototype.toSource()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/unshift/index.html b/files/ko/web/javascript/reference/global_objects/array/unshift/index.html new file mode 100644 index 0000000000..c4a03fd091 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/unshift/index.html @@ -0,0 +1,91 @@ +--- +title: Array.prototype.unshift() +slug: Web/JavaScript/Reference/Global_Objects/Array/unshift +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift +--- +<div>{{JSRef}}</div> + +<p><code><strong>unshift()</strong></code> 메서드는 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환합니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-unshift.html")}}</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>arr</var>.unshift([...elementN])</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>배열 맨 앞에 추가할 요소.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>메서드를 호출한 배열의 새로운 {{jsxref("Array.length", "length")}} 속성.</p> + +<h2 id="설명">설명</h2> + +<p><code>unshift</code> 메서드는 배열 형태의 객체 시작점에 주어진 값을 삽입합니다.</p> + +<p><code>unshift</code>는 제네릭하도록 설계되었으며, 배열 형태를 가진 객체가 {{jsxref("Function.call", "호출", "", 1)}}하거나 객체에 {{jsxref("Function.apply", "적용", "", 1)}}할 수 있습니다. <code>length</code> 속성을 가지지 않고, 대신 마지막 요소를 0부터 시작하는 순차적 인덱스로만 나타내는 객체에서는 의도한 것과 다르게 행동할 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">var arr = [1, 2]; + +arr.unshift(0); // result of call is 3, the new array length +// arr is [0, 1, 2] + +arr.unshift(-2, -1); // = 5 +// arr is [-2, -1, 0, 1, 2] + +arr.unshift([-3]); +// arr is [[-3], -2, -1, 0, 1, 2] +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.Array.unshift")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/array/values/index.html b/files/ko/web/javascript/reference/global_objects/array/values/index.html new file mode 100644 index 0000000000..eb66adb964 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/values/index.html @@ -0,0 +1,87 @@ +--- +title: Array.prototype.values() +slug: Web/JavaScript/Reference/Global_Objects/Array/values +tags: + - Array + - ECMAScript 2015 + - Iterator + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/values +--- +<div>{{JSRef}}</div> + +<p><strong><code>values()</code></strong> 메서드는 배열의 각 인덱스에 대한 값을 가지는 새로운 <strong><code>Array Iterator</code></strong> 객체를 반환합니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-values.html")}}</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>arr</var>.values() +</pre> + +<h3 id="반환_값">반환 값</h3> + +<p>새로운 {{jsxref("Array")}} 반복기 객체.</p> + +<h2 id="예제">예제</h2> + +<h3 id="for...of_루프를_통한_반복"><code>for...of</code> 루프를 통한 반복</h3> + +<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p']; +var eArr = arr.values(); +// your browser must support for..of loop +// and let-scoped variables in for loops +for (let letter of eArr) { + console.log(letter); +} +</pre> + +<h3 id="다른_반복법">다른 반복법</h3> + +<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p']; +var eArr = arr.values(); +console.log(eArr.next().value); // w +console.log(eArr.next().value); // y +console.log(eArr.next().value); // k +console.log(eArr.next().value); // o +console.log(eArr.next().value); // p +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.values', 'Array.prototype.values')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.Array.values")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/arraybuffer/arraybuffer/index.html b/files/ko/web/javascript/reference/global_objects/arraybuffer/arraybuffer/index.html new file mode 100644 index 0000000000..4012646fa4 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/arraybuffer/arraybuffer/index.html @@ -0,0 +1,70 @@ +--- +title: ArrayBuffer() 생성자 +slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/ArrayBuffer +tags: + - ArrayBuffer + - Constructor + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/ArrayBuffer +--- +<div>{{JSRef}}</div> + +<p><strong><code>ArrayBuffer()</code></strong> 생성자는 {{jsxref("ArrayBuffer")}} 객체를 생성합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/arraybuffer-constructor.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">new ArrayBuffer(<em>length</em>) +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>length</code></dt> + <dd>생성할 <code>ArrayBuffer</code>의 바이트 크기.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>지정한 크기를 가진 새로운 <code>ArrayBuffer</code> 객체. 내용은 모두 0으로 초기화됩니다.</p> + +<h3 id="예외">예외</h3> + +<p><code>length</code>가 {{jsxref("Number.MAX_SAFE_INTEGER")}}보다 크거나, 음수면 {{jsxref("RangeError")}}.</p> + +<h2 id="예제">예제</h2> + +<p>아래 예제 코드는 8바이트 버퍼를 생성한 후 {{jsxref("Int32Array")}} 뷰로 그 버퍼를 참조합니다.</p> + +<pre class="brush: js">var buffer = new ArrayBuffer(8); +var view = new Int32Array(buffer);</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.ArrayBuffer.ArrayBuffer")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li> + <li>{{jsxref("SharedArrayBuffer")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html b/files/ko/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html new file mode 100644 index 0000000000..b17502631a --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html @@ -0,0 +1,57 @@ +--- +title: ArrayBuffer.prototype.byteLength +slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength +tags: + - ArrayBuffer + - JavaScript + - Property + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength +--- +<div>{{JSRef}}</div> + +<p><code><strong>byteLength</strong></code> 접근자 속성은 {{jsxref("ArrayBuffer")}}의 길이를 바이트 단위로 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/arraybuffer-bytelength.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>arr</var>aybuffer.byteLength</pre> + +<h2 id="설명">설명</h2> + +<p><code>byteLength</code> 속성은 설정자 속성이 <code>undefined</code>인 접근자 속성으로, 오직 읽기만 가능합니다. <code>byteLength</code>는 배열 버퍼를 처음 생성할 때 정해지며 바꿀 수 없습니다. <code>ArrayBuffer</code>가 분리된 경우 0을 반환합니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush:js">var buffer = new ArrayBuffer(8); +buffer.byteLength; // 8 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-get-arraybuffer.prototype.bytelength', 'ArrayBuffer.prototype.byteLength')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.ArrayBuffer.byteLength")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("ArrayBuffer")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/arraybuffer/index.html b/files/ko/web/javascript/reference/global_objects/arraybuffer/index.html new file mode 100644 index 0000000000..8b5b0cd361 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/arraybuffer/index.html @@ -0,0 +1,97 @@ +--- +title: ArrayBuffer +slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer +tags: + - ArrayBuffer + - JavaScript + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer +--- +<div>{{JSRef}}</div> + +<p><strong><code>ArrayBuffer</code></strong> 객체는 일반적인 고정 길이 원시 이진 데이터 버퍼를 나타냅니다.</p> + +<p>ArrayBuffer는 바이트로 구성된 배열로, 다른 언어에서는 종종 "바이트 배열"이라고 부릅니다. <code>ArrayBuffer</code>에 담긴 정보를 직접 수정하는 것은 불가능하지만, 대신 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">형식화 배열</a>이나 {{jsxref("DataView")}} 객체를 통해 버퍼를 특정 형식으로 나타내고, 이를 통해 버퍼의 내용을 읽거나 쓸 수 있습니다.</p> + +<p>{{jsxref("ArrayBuffer.ArrayBuffer", "ArrayBuffer()")}} 생성자는 주어진 길이를 가진 새로운 <code>ArrayBuffer</code>를 생성합니다. 또한 Base64 문자열이나 <a href="/ko/docs/Web/API/FileReader/readAsArrayBuffer">로컬 파일</a>처럼 기존 데이터에서 배열 버퍼를 생성할 수도 있습니다.</p> + +<h2 id="생성자">생성자</h2> + +<dl> + <dt>{{jsxref("ArrayBuffer.ArrayBuffer", "ArrayBuffer()")}}</dt> + <dd>새로운 <code>ArrayBuffer</code> 객체를 생성합니다.</dd> +</dl> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>ArrayBuffer.length</code></dt> + <dd><code>ArrayBuffer</code> 생성자의 길이 속성으로, 값은 1입니다.</dd> + <dt>{{jsxref("ArrayBuffer.@@species", "get ArrayBuffer[@@species]")}}</dt> + <dd>파생 객체를 생성할 때 사용할 생성자 함수입니다.</dd> + <dt><code>ArrayBuffer.prototype</code></dt> + <dd>모든 <code>ArrayBuffer</code> 객체에 속성을 추가할 수 있습니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("ArrayBuffer.isView()")}}</dt> + <dd>주어진 매개변수가 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">형식화 배열</a> 객체 또는 {{jsxref("DataView")}}와 같은 <code>ArrayBuffer</code>의 뷰면 <code>true</code>를, 아니면 <code>false</code>를 반환합니다.</dd> + <dt>{{jsxref("ArrayBuffer.transfer()")}} {{experimental_inline}}</dt> + <dd>주어진 버퍼의 내용으로 새로운 버퍼를 만들고, 그 길이를 지정한 길이만큼 자르거나 확장(0 초기화)한 후 반환합니다.</dd> +</dl> + +<h2 id="인스턴스">인스턴스</h2> + +<p>모든 <code>ArrayBuffer</code> 인스턴스는 <code>ArrayBuffer.prototype</code>을 상속합니다.</p> + +<h3 id="속성_2">속성</h3> + +<dl> + <dt><code>ArrayBuffer.prototype.constructor</code></dt> + <dd>객체의 프로토타입을 생성하는 함수를 지정합니다. 초깃값은 내장 <code>ArrayBuffer</code> 생성자입니다.</dd> + <dt>{{jsxref("ArrayBuffer.prototype.byteLength")}} {{readonlyInline}}</dt> + <dd><code>ArrayBuffer</code>의 바이트 길이입니다. 처음 생성 시 정해지며 변경할 수 없습니다.</dd> +</dl> + +<h3 id="메서드_2">메서드</h3> + +<dl> + <dt>{{jsxref("ArrayBuffer.prototype.slice()")}}</dt> + <dd><code>ArrayBuffer</code>를 지정한 위치에서 잘라낸 새로운 <code>ArrayBuffer</code>를 반환합니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<p>다음 코드는 8바이트 버퍼를 생성하고, {{jsxref("Global_Objects/Int32Array", "Int32Array")}} 뷰로 그 버퍼를 참조합니다.</p> + +<pre class="brush: js">const buffer = new ArrayBuffer(8); +const view = new Int32Array(buffer);</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arraybuffer-objects', 'ArrayBuffer')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.ArrayBuffer")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript 형식화 배열</a></li> + <li>{{jsxref("SharedArrayBuffer")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/arraybuffer/isview/index.html b/files/ko/web/javascript/reference/global_objects/arraybuffer/isview/index.html new file mode 100644 index 0000000000..c68d5e0ef3 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/arraybuffer/isview/index.html @@ -0,0 +1,76 @@ +--- +title: ArrayBuffer.isView() +slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView +tags: + - ArrayBuffer + - JavaScript + - Method + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView +--- +<div>{{JSRef}}</div> + +<p><code><strong>ArrayBuffer.isView()</strong></code> 메서드는 주어진 값이 <code>ArrayBuffer</code> 뷰, 즉 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">형식화 배열 객체</a> 또는 {{jsxref("DataView")}}인지 판별합니다..</p> + +<div>{{EmbedInteractiveExample("pages/js/arraybuffer-isview.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">ArrayBuffer.isView(<em>value</em>)</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>value</code></dt> + <dd>판별할 값.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 값이 {{jsxref("ArrayBuffer")}} 뷰라면 <code>true</code>, 아니면 <code>false</code>.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">ArrayBuffer.isView(); // false +ArrayBuffer.isView([]); // false +ArrayBuffer.isView({}); // false +ArrayBuffer.isView(null); // false +ArrayBuffer.isView(undefined); // false +ArrayBuffer.isView(new ArrayBuffer(10)); // false + +ArrayBuffer.isView(new Uint8Array()); // true +ArrayBuffer.isView(new Float32Array()); // true +ArrayBuffer.isView(new Int8Array(10).subarray(0, 3)); // true + +const buffer = new ArrayBuffer(2); +const dv = new DataView(buffer); +ArrayBuffer.isView(dv); // true +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arraybuffer.isview', 'ArrayBuffer.isView')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.ArrayBuffer.isView")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript 형식화 배열</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/arraybuffer/slice/index.html b/files/ko/web/javascript/reference/global_objects/arraybuffer/slice/index.html new file mode 100644 index 0000000000..6c286be9aa --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/arraybuffer/slice/index.html @@ -0,0 +1,77 @@ +--- +title: ArrayBuffer.prototype.slice() +slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice +tags: + - ArrayBuffer + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice +--- +<div>{{JSRef}}</div> + +<p><code><strong>slice()</strong></code> 메서드는 현재 <code>ArrayBuffer</code>를 주어진 시작과 끝점에 맞춰 자른 새로운 <code>ArrayBuffer</code>를 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/arraybuffer-slice.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><em>arraybuffer</em>.slice(<em>begin</em>[, <em>end</em>])</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>begin</code></dt> + <dd>자르기 시작할 지점을 나타내는 0 기반 인덱스.</dd> +</dl> + +<dl> + <dt><code>end</code> {{optional_inline}}</dt> + <dd>자르기 끝낼 지점을 나타내는 바이트 인덱스. 지정하지 않은 경우 새로운 <code>ArrayBuffer</code>는 지정한 시작점부터 현재 <code>ArrayBuffer</code>의 끝까지 가지게 됩니다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>새로운 {{jsxref("ArrayBuffer")}} 객체.</p> + +<h2 id="설명">설명</h2> + +<p><code>slice()</code> 메서드는 <code>end</code> 매개변수로 지정한 바이트 위치 바로 앞까지 현재 배열 버퍼를 복사합니다. <code>begin</code>과 <code>end</code>는 음의 값인 경우 배열의 시작부터 위치를 세지 않고 끝에서부터 셉니다.</p> + +<p><code>end</code> 값이 유효한 범위를 벗어날 경우 버퍼 길이에 맞춰 잘라냅니다. 또한 새로운 ArrayBuffer의 길이가 음의 값이 나올 경우 0으로 처리합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="ArrayBuffer_복사하기"><code>ArrayBuffer</code> 복사하기</h3> + +<pre class="brush: js">const buf1 = new ArrayBuffer(8); +const buf2 = buf1.slice(0); +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arraybuffer.prototype.slice', 'ArrayBuffer.prototype.slice')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.ArrayBuffer.slice")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("ArrayBuffer")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/asyncfunction/index.html b/files/ko/web/javascript/reference/global_objects/asyncfunction/index.html new file mode 100644 index 0000000000..9578d2e534 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/asyncfunction/index.html @@ -0,0 +1,125 @@ +--- +title: AsyncFunction +slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction +--- +<div>{{JSRef}}</div> + +<p><code><strong>Async</strong></code><strong><code>Function</code> 생성자는</strong> 새로운 {{jsxref("Statements/async_function", "async function")}} 객체를 만든다. 자바스크립트에서 모든 비동기 함수는 사실상 AsyncFunction 객체이다.</p> + +<p><code>AsyncFunction</code>이 전역변수가 아님에 주의한다. 다음코드를 보면 알 수 있다. </p> + +<pre class="brush: js">Object.getPrototypeOf(async function(){}).constructor +</pre> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox">new AsyncFunction([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</pre> + +<h3 id="파라미터">파라미터</h3> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>인수의 이름들은 함수내에서 사용되는 이름이다. 이름은 자바스크립트 식별자 로 유용한 문자열이거나 컴마로 구분된 문자열 목록이어야 한다. 예를들면 "x","theValue",or"a,b"와 같다.</dd> + <dt><code>functionBody</code></dt> + <dd>함수 정의를 구성하는 자바스크립트 명령문들로 구성된 문자열.</dd> +</dl> + +<h2 id="상세설명">상세설명</h2> + +<p>AsyncFunction 생성자를 통해 만들어진 {{jsxref("Statements/async_function", "async function")}} 객체는 함수가 만들어질때 분석된다. 이방법에서는 코드가 실행되지 않을 때도 작동하기 때문에 {{jsxref("Statements/async_function", "async function expression")}} 으로 비동기함수를 정의하고 해당 코드에서 호출할 때보다 비효율적이다.</p> + +<p>함수에 전달된 모든 인수들은 전달된 순서대로 함수내에서 인수이름으로 식별자가 생성된 것처럼 다루어진다.</p> + +<div class="note"> +<p><strong>주의:</strong> <code>AsyncFunction</code> 생성자로 만들어진 {{jsxref("Statements/async_function", "async functions")}} 객체는 클로저를 생성 컨텍스트에 만들지 않는다; 이 객체들은 항상 전역 범위에서 생성됩니다. </p> + +<p><font><font>이객체들을 실행할 때, </font></font><code>AsyncFunction</code><font><font>생성자가 호출 </font><font>된 범위의 변수가 아니라 자신의 지역 변수와 전역 변수에만 액세스 할 수 있습니다 </font><font>.</font></font></p> + +<p><font><font>이것은 비동기 함수 표현식을위한 코드와 함께 {{jsxref ( "Global_Objects / eval", "eval")}}을 사용하는 것과 다릅니다.</font></font></p> +</div> + +<p><code>AsyncFunction</code> 생성자를 (<code>new</code> 연산자를 사용하지 않고) 함수로 호출하는 것과 생성자로 동작시키는 것은 동일하다.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code><strong>AsyncFunction.length</strong></code></dt> + <dd><code>AsyncFunction</code> 생성자의 <code>length</code> 속성(이 값은 1임).</dd> + <dt><strong><code>AsyncFunction.prototype</code></strong></dt> + <dd>모든 비동기 함수 객체에 속성을 추가할 수 있도록 함.</dd> + <dt><code><strong>AsyncFunction.constructor</strong></code></dt> + <dd>초기값은 {{jsxref("AsyncFunction")}}임.</dd> + <dt><code><strong>AsyncFunction.prototype[@@toStringTag]</strong></code></dt> + <dd>"AsyncFunction"을 반환.</dd> +</dl> + +<h2 id="AsyncFunction_인스턴스"><code>AsyncFunction 인스턴스</code></h2> + +<p><code>AsyncFunction</code> 인스턴스는 <code>AsyncFunction.prototype</code> 에서ㅜ메소드와 속성을 상속받는다.</p> + +<p>여느 생성자에서와 같이 모든 <code>AsyncFunction</code> 인스턴스들을 수정할 수 있도록 생성자의 <code>prototype</code> 객체를 수정할 수 있다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="AsyncFunction_생성자를_통한_비동기_함수_만들기"><code>AsyncFunction</code> 생성자를 통한 비동기 함수 만들기</h3> + +<pre>function resolveAfter2Seconds(x) { + return new Promise(resolve => { + setTimeout(() => { + resolve(x); + }, 2000); + }); +} + +let AsyncFunction = Object.getPrototypeOf(async function(){}).constructor + +let a = new AsyncFunction('a', + 'b', + 'return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);'); + +a(10, 20).then(v => { + console.log(v); // 4초 후에 30을 출력 +});</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-async-function-objects', 'AsyncFunction object')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Initial definition in ES2017.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("javascript.builtins.AsyncFunction")}}</p> + + + +<h2 id="참고_문서">참고 문서</h2> + +<ul> + <li>{{jsxref("Statements/async_function", "async function function")}}</li> + <li>{{jsxref("Operators/async_function", "async function expression")}}</li> + <li>{{jsxref("Global_Objects/Function", "Function")}}</li> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope", "", 1)}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/atomics/index.html b/files/ko/web/javascript/reference/global_objects/atomics/index.html new file mode 100644 index 0000000000..6f155e8272 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/atomics/index.html @@ -0,0 +1,162 @@ +--- +title: Atomics +slug: Web/JavaScript/Reference/Global_Objects/Atomics +translation_of: Web/JavaScript/Reference/Global_Objects/Atomics +--- +<div>{{JSRef}} {{SeeCompatTable}}</div> + +<div><strong>Atomics 오브젝트</strong>는 atomic operations 정적메소드로서 제공됩니다. 다음과 같은 오브젝트와 함께 {{jsxref("SharedArrayBuffer")}} 사용합니다.</div> + +<p>Atomic operations Atomic Module을 인스톨해야합니다. 다른 global objects들과 다르게 Atomic은 constructor가 아닙니다. <strong>new operator</strong>를 사용하면 안되고 invoke Atomics object 함수로 사용하면됩니다. Atomics의 속성과 함수들은 static입니다. (as is the case with the {{jsxref("Math")}} object, for example).</p> + +<h2 id="Methods">Methods</h2> + +<h3 id="Atomic_operations">Atomic operations</h3> + +<p>메모리가 공유되었을때, 멀티쓰레드는 메모리안에 같은 데이터들을 읽거나 쓸 수 있습니다.<br> + Atomic operations은 예측 가능한 값을 쓰고 읽으며 다음 작업이 시작되기 전에 작업이 완료되고,작업이 중단되지 않도록합니다.</p> + +<dl> + <dt>{{jsxref("Atomics.add()")}}</dt> + <dd>Adds a given value at a given position in the array. Returns the old value at that position.</dd> + <dt>{{jsxref("Atomics.and()")}}</dt> + <dd>Computes a bitwise AND at a given position in the array. Returns the old value at that position.</dd> + <dt>{{jsxref("Atomics.compareExchange()")}}</dt> + <dd>Stores a given value at a given position in the array, if it equals a given value. Returns the old value.</dd> + <dt>{{jsxref("Atomics.exchange()")}}</dt> + <dd>Stores a given value at a given position in the array. Returns the old value.</dd> +</dl> + +<dl> + <dt>{{jsxref("Atomics.load()")}}</dt> + <dd>Returns the value at the given position in the array.</dd> + <dt>{{jsxref("Atomics.or()")}}</dt> + <dd>Computes a bitwise OR at a given position in the array. Returns the old value at that position.</dd> + <dt>{{jsxref("Atomics.store()")}}</dt> + <dd>Stores a given value at the given position in the array. Returns the value.</dd> + <dt>{{jsxref("Atomics.sub()")}}</dt> + <dd>Subtracts a given value at a given position in the array. Returns the old value at that position.</dd> + <dt>{{jsxref("Atomics.xor()")}}</dt> + <dd>Computes a bitwise XOR at a given position in the array. Returns the old value at that position.</dd> +</dl> + +<h3 id="Wait_and_wake">Wait and wake</h3> + +<p>The <code>wait()</code> and <code>wake()</code> methods are modeled on Linux futexes ("fast user-space mutex") and provide ways for waiting until a certain condition becomes true and are typically used as blocking constructs.</p> + +<dl> + <dt>{{jsxref("Atomics.wait()")}}</dt> + <dd> + <p>Verifies that a given position in the array still contains a given value and sleeps awaiting or times out. Returns either <code>"ok"</code>, <code>"not-equal"</code>, or <code>"timed-out"</code>. If waiting is not allowed in the calling agent then it throws an Error exception (most browsers will not allow <code>wait()</code> on the browser's main thread).</p> + </dd> + <dt>{{jsxref("Atomics.wake()")}}</dt> + <dd>Wakes up some agents that are sleeping in the wait queue on the given array position. Returns the number of agents that were woken up.</dd> + <dt>{{jsxref("Atomics.isLockFree()", "Atomics.isLockFree(size)")}}</dt> + <dd> + <p>An optimization primitive that can be used to determine whether to use locks or atomic operations. Returns <code>true</code>, if an atomic operation on arrays of the given element size will be implemented using a hardware atomic operation (as opposed to a lock). Experts only.</p> + </dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Shared Memory', '#AtomicsObject', 'Atomics')}}</td> + <td>{{Spec2('Shared Memory')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("46")}} [1] [3]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("46")}} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] This feature is disabled by a preference setting. In about:config, set <code>javascript.options.shared_memory</code> to <code>true</code>. </p> + +<p>[2] The implementation is under development and needs these runtime flags: <code>--js-flags=--harmony-sharedarraybuffer --enable-blink-feature=SharedArrayBuffer</code></p> + +<h2 id="Compatibility_notes">Compatibility notes</h2> + +<p>[3] The Shared memory specification is still stabilizing. Prior to SpiderMonkey 48 {{geckoRelease(48)}}, the latest API names and semantics weren't implemented yet. The changes between Firefox version 46 and version 48 are:</p> + +<ul> + <li>The methods <code>Atomics.futexWakeOrRequeue()</code> and <code>Atomics.fence()</code> are now removed entirely ({{bug(1259544)}} and {{bug(1225028)}}).</li> + <li>The methods {{jsxref("Atomics.wait()")}} and {{jsxref("Atomics.wake()")}} were named <code>Atomics.futexWait()</code> and <code>Atomics.futexWake()</code> ({{bug(1260910)}}). Note: The old names have been removed in version 49 and later ({{bug(1262062)}}).</li> + <li>The properties <code>Atomics.OK</code>, <code>Atomics.TIMEDOUT</code>, <code>Atomics.NOTEQUAL</code> have been removed. The {{jsxref("Atomics.wait()")}} method now returns the strings "ok", "timed-out" and "not-equal" ({{bug(1260835)}}).</li> + <li> + <p>The <code>count</code> parameter of the {{jsxref("Atomics.wake()")}} method has been changed: it now defaults to <code>+Infinity</code>, not <code>0</code> ({{bug(1253350)}}).</p> + </li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("ArrayBuffer")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li> + <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li> + <li><a href="https://github.com/lars-t-hansen/parlib-simple">parlib-simple </a>– a simple library providing synchronization and work distribution abstractions.</li> + <li><a href="https://github.com/tc39/ecmascript_sharedmem/blob/master/TUTORIAL.md">Shared Memory – a brief tutorial</a></li> + <li><a href="https://hacks.mozilla.org/2016/05/a-taste-of-javascripts-new-parallel-primitives/">A Taste of JavaScript’s New Parallel Primitives – Mozilla Hacks</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/bigint/bigint/index.html b/files/ko/web/javascript/reference/global_objects/bigint/bigint/index.html new file mode 100644 index 0000000000..9a7405fac8 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/bigint/bigint/index.html @@ -0,0 +1,62 @@ +--- +title: BigInt() 생성자 +slug: Web/JavaScript/Reference/Global_Objects/BigInt/BigInt +tags: + - BigInt + - Constructor + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/BigInt +--- +<div>{{JSRef}}</div> + +<p><strong><code>BigInt()</code></strong> 생성자는 {{jsxref("BigInt")}} 객체를 생성합니다.</p> + +<h2 id="구분">구분</h2> + +<pre class="syntaxbox">BigInt(<em>value</em>); +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>value</code></dt> + <dd>생성하는 객체에 할당할 숫자 값. 문자열 또는 정수를 사용할 수 있습니다.</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: <code>BigInt()</code>는 {{jsxref("Operators/new", "new")}} 연산자와 함께 사용하지 않습니다.</p> +</div> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">BigInt(123); +// 123n +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-bigint-constructor', 'BigInt constructor')}}</td> + <td>{{Spec2('ESDraft')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.BigInt.BigInt")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("BigInt")}} 클래스</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/bigint/index.html b/files/ko/web/javascript/reference/global_objects/bigint/index.html new file mode 100644 index 0000000000..dcfc19e799 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/bigint/index.html @@ -0,0 +1,280 @@ +--- +title: BigInt +slug: Web/JavaScript/Reference/Global_Objects/BigInt +tags: + - BigInt + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt +--- +<div>{{JSRef}}</div> + +<p><strong><code>BigInt</code></strong>는 {{jsxref("Number")}} 원시 값이 안정적으로 나타낼 수 있는 최대치인 2<sup>53</sup> - 1보다 큰 정수를 표현할 수 있는 내장 객체입니다.</p> + +<h2 id="설명">설명</h2> + +<p><code>BigInt</code>는 정수 리터럴의 뒤에 <code>n</code>을 붙이거나(<code>10n</code>) 함수 <code>BigInt()</code>를 호출해 생성할 수 있습니다.</p> + +<pre class="brush: js">const theBiggestInt = 9007199254740991n; + +const alsoHuge = BigInt(9007199254740991); +// ↪ 9007199254740991n + +const hugeString = BigInt("9007199254740991"); +// ↪ 9007199254740991n + +const hugeHex = BigInt("0x1fffffffffffff"); +// ↪ 9007199254740991n + +const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111111"); +// ↪ 9007199254740991n</pre> + +<p><code>BigInt</code>와 {{jsxref("Number")}}는 어떤 면에서 비슷하지만 중요한 차이점이 있습니다. 예컨대 <code>BigInt</code>는 내장 {{jsxref("Math")}} 객체의 메서드와 함께 사용할 수 없고, 연산에서 <code>Number</code>와 혼합해 사용할 수 없습니다. 따라서 먼저 같은 자료형으로 변환해야 합니다. 그러나, <code>BigInt</code>가 <code>Number</code>로 바뀌면 정확성을 잃을 수 있으니 주의해야 합니다.</p> + +<h3 id="자료형_정보">자료형 정보</h3> + +<p><code>BigInt</code>의 <code>typeof</code> 판별 결과는 <code>"bigint"</code>입니다.</p> + +<pre class="brush: js">typeof 1n === 'bigint'; // true +typeof BigInt('1') === 'bigint'; // true +</pre> + +<p>{{jsxref("Object")}}로 감싼 <code>BigInt</code>는 일반적인 <code>object</code> 자료형으로 취급합니다.</p> + +<pre class="brush: js">typeof Object(1n) === 'object'; // true +</pre> + +<h3 id="연산자">연산자</h3> + +<p><code>+</code>, <code>*</code>, <code>-</code>, <code>**</code>, <code>%</code> 연산자를 <code>BigInt</code>나 객체로 감싼 <code>BigInt</code>에서 사용할 수 있습니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">비트 연산자</a>도 사용할 수 있으나, 모든 <code>BigInt</code>는 부호를 가져야 하므로 <code>>>></code> (부호 버림 오른쪽 시프트)는 사용할 수 없습니다. <a href="https://github.com/tc39/proposal-bigint/blob/master/ADVANCED.md#dont-break-asmjs">asm.js에서 문제를 일으키지 않도록</a>, 단항 <code>+</code> 연산자도 지원하지 않습니다.</p> + +<pre class="brush: js">const previousMaxSafe = BigInt(Number.MAX_SAFE_INTEGER); +// ↪ 9007199254740991 + +const maxPlusOne = previousMaxSafe + 1n; +// ↪ 9007199254740992n + +const theFuture = previousMaxSafe + 2n; +// ↪ 9007199254740993n, this works now! + +const multi = previousMaxSafe * 2n; +// ↪ 18014398509481982n + +const subtr = multi – 10n; +// ↪ 18014398509481972n + +const mod = multi % 10n; +// ↪ 2n + +const bigN = 2n ** 54n; +// ↪ 18014398509481984n + +bigN * -1n +// ↪ –18014398509481984n +</pre> + +<p><code>/</code> 연산자도 정수 연산에서 예상할 수 있는 결과를 동일하게 도출합니다. 그러나 <code>BigInt</code>는 <code>BigDecimal</code>이 아니므로, 연산의 결과는 언제나 소수점 이하를 버립니다. 즉, 정수가 아닌 결과는 나오지 않습니다.</p> + +<div class="blockIndicator warning"> +<p>소수점 결과를 포함하는 연산을 <code>BigInt</code>와 사용하면 소수점 이하는 사라집니다.</p> +</div> + +<pre class="brush: js">const expected = 4n / 2n; +// ↪ 2n + +const rounded = 5n / 2n; +// ↪ 2.5n이 아니라 2n +</pre> + +<h3 id="비교">비교</h3> + +<p><code>BigInt</code>는 {{jsxref("Number")}}와 일치하지 않지만 동등합니다.</p> + +<pre class="brush: js">0n === 0 +// ↪ false + +0n == 0 +// ↪ true</pre> + +<p><code>Number</code>와 <code>BigInt</code>는 일반적인 방법으로 비교할 수 있습니다.</p> + +<pre class="brush: js">1n < 2 +// ↪ true + +2n > 1 +// ↪ true + +2 > 2 +// ↪ false + +2n > 2 +// ↪ false + +2n >= 2 +// ↪ true</pre> + +<p>배열의 요소로 함께 사용했을 땐 정렬도 가능합니다.</p> + +<pre class="brush: js">const mixed = [4n, 6, -12n, 10, 4, 0, 0n]; +// ↪ [4n, 6, -12n, 10, 4, 0, 0n] + +mixed.sort(); +// ↪ [-12n, 0, 0n, 10, 4n, 4, 6] +</pre> + +<p>{{jsxref("Object")}}로 감싼 <code>BigInt</code>의 경우 다른 객체와 마찬가지로 자기 자신과 비교했을 때만 일치합니다.</p> + +<pre class="brush: js">0n === Object(0n); // false +Object(0n) === Object(0n); // false + +const o = Object(0n); +o === o // true +</pre> + +<h3 id="조건">조건</h3> + +<p><code>BigInt</code>는 다음의 상황에서는 {{jsxref("Number")}}처럼 행동합니다.</p> + +<ul> + <li>{{jsxref("Boolean")}} 함수를 사용해 Boolean 객체로 변환</li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/%EB%85%BC%EB%A6%AC_%EC%97%B0%EC%82%B0%EC%9E%90(Logical_Operators)">논리 연산자</a> <code>||</code>, <code>&&</code>, <code>!</code>와 함께 사용</li> + <li>{{jsxref("Statements/if...else", "if")}}문 등 조건 판별 시</li> +</ul> + +<pre class="brush: js">if (0n) { + console.log('if에서 안녕!'); +} else { + console.log('else에서 안녕!'); +} + +// ↪ "else에서 안녕!" + +0n || 12n +// ↪ 12n + +0n && 12n +// ↪ 0n + +Boolean(0n) +// ↪ false + +Boolean(12n) +// ↪ true + +!12n +// ↪ false + +!0n +// ↪ true +</pre> + +<h2 id="생성자">생성자</h2> + +<dl> + <dt>{{jsxref("BigInt.BigInt", "BigInt()")}}</dt> + <dd><code>BigInt</code> 객체를 생성합니다.</dd> +</dl> + +<h2 id="정적_메서드">정적 메서드</h2> + +<dl> + <dt>{{jsxref("BigInt.asIntN()")}}</dt> + <dd>주어진 <code>BigInt</code>를 <code>-2<sup>width-1</sup></code>과 <code>2<sup>width-1</sup> - 1</code>의 범위로 자릅니다.</dd> + <dt>{{jsxref("BigInt.asUintN()")}}</dt> + <dd>주어진 <code>BigInt</code>를 <code>0</code>과 <code>2<sup>width</sup> - 1</code>의 범위로 자릅니다.</dd> +</dl> + +<h2 id="인스턴스_메서드">인스턴스 메서드</h2> + +<dl> + <dt>{{jsxref("BigInt.prototype.toLocaleString()")}}</dt> + <dd>BigInt를 주어진 언어에 적합한 형태를 가진 문자열로 변환해 반환합니다. {{jsxref("Object.prototype.toLocaleString()")}} 메서드를 재정의합니다.</dd> + <dt>{{jsxref("BigInt.prototype.toString()")}}</dt> + <dd><code>BigInt</code>의 값을 주어진 진수로 표현한 문자열을 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 재정의합니다.</dd> + <dt>{{jsxref("BigInt.prototype.valueOf()")}}</dt> + <dd><code>BigInt</code> 객체의 원시 값 표현을 반환합니다. {{jsxref("Object.prototype.valueOf()")}} 메서드를 재정의합니다.</dd> +</dl> + +<h2 id="권장사항">권장사항</h2> + +<h3 id="변환">변환</h3> + +<p><code>BigInt</code>를 {{jsxref("Number")}}로 변환하는 과정에서 정확도를 유실할 수 있으므로, 2<sup>53</sup>보다 큰 값을 예상할 수 있는 경우 <code>BigInt</code>만 사용하는 것이 좋습니다.</p> + +<h3 id="암호화">암호화</h3> + +<p><code>BigInt</code>가 지원하는 연산의 소요시간은 상수 시간이 아니기 때문에 <a href="https://www.chosenplaintext.ca/articles/beginners-guide-constant-time-cryptography.html">암호화에 적합하지 않습니다</a>.</p> + +<h3 id="JSON과_함께_사용하기">JSON과 함께 사용하기</h3> + +<p><code>BigInt</code>는 직렬화할 수 없기 때문에, {{jsxref("JSON.stringify()")}}에 <code>BigInt</code>를 포함한 값을 전달한다면 <code>TypeError</code>가 발생합니다. 대신, 필요한 경우 자신만의 <code>toJSON</code> 메서드를 만들 수 있습니다.</p> + +<pre class="brush: js">BigInt.prototype.toJSON = function() { return this.toString(); }</pre> + +<p>이제 아래 코드가 오류를 던지지 않고 문자열을 반환합니다.</p> + +<pre class="brush: js">JSON.stringify(BigInt(1)); +// '"1"' +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="소수_구하기">소수 구하기</h3> + +<pre class="brush: js">// 주어진 BigInt가 소수이면 true 반환 +function isPrime(p) { + for (let i = 2n; i * i <= p; i++) { + if (p % i === 0n) return false; + } + return true; +} + +// BigInt를 받아, n번째 소수를 BigInt로 반환 +function nthPrime(nth) { + let maybePrime = 2n; + let prime = 0n; + + while (nth >= 0n) { + if (isPrime(maybePrime)) { + nth -= 1n; + prime = maybePrime; + } + maybePrime += 1n; + } + + return prime; +} + +nthPrime(20n) +// ↪ 73n</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName("ESDraft", "#sec-bigint-objects", "<code>BigInt</code> objects")}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.BigInt")}}</p> + +<h3 id="구현_진척도">구현 진척도</h3> + +<p>본 기능은 아직 안정적인 크로스 브라우징에 도달하지 못했으므로, 매일 업데이트되는 아래 표에서 브라우저별 구현 상황을 확인할 수 있습니다. 이 데이터는 각 브라우저 JavaScript 엔진의 나이틀리 빌드 또는 최신 릴리즈판에서, JavaScript 표준 테스트인 <a href="https://github.com/tc39/test262">Test262</a>의 관련 항목을 시험해 생성합니다.</p> + +<p>{{EmbedTest262ReportResultsTable("BigInt")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Number")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/bigint/prototype/index.html b/files/ko/web/javascript/reference/global_objects/bigint/prototype/index.html new file mode 100644 index 0000000000..6ba56eb37e --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/bigint/prototype/index.html @@ -0,0 +1,59 @@ +--- +title: BigInt.prototype +slug: Web/JavaScript/Reference/Global_Objects/BigInt/prototype +tags: + - BigInt + - JavaScript + - Property + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/prototype +--- +<div>{{JSRef}}</div> + +<p><strong><code>BigInt.prototype</code></strong> 속성은 {{jsxref("BigInt")}} 생성자의 프로토타입을 나타냅니다.</p> + +<p>{{js_property_attributes(0, 0, 0)}}</p> + +<h2 id="설명">설명</h2> + +<p>모든 {{jsxref("BigInt")}} 인스턴스는 <code>BigInt.prototype</code>을 상속합니다. <code>BigInt</code> 생성자의 프로토타입 객체를 변형해 모든 <code>BigInt</code> 인스턴스에 영향을 줄 수 있습니다.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>BigInt.prototype.constructor</code></dt> + <dd>이 객체의 인스턴스를 만들 때 사용한 함수를 반환합니다. 기본값은 {{jsxref("BigInt")}} 객체입니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt><code>BigInt.prototype.toLocaleString()</code></dt> + <dd>BigInt를 주어진 언어에 적합한 형태를 가진 문자열로 변환해 반환합니다. {{jsxref("Object.prototype.toLocaleString()")}} 메서드를 재정의합니다.</dd> + <dt><code>BigInt.prototype.toString()</code></dt> + <dd><code>BigInt</code>의 값을 주어진 진수로 표현한 문자열을 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 재정의합니다.</dd> + <dt><code>BigInt.prototype.valueOf()</code></dt> + <dd><code>BigInt</code> 객체의 원시 값 표현을 반환합니다. {{jsxref("Object.prototype.valueOf()")}} 메서드를 재정의합니다.</dd> +</dl> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + <tr> + <td><a href="https://tc39.github.io/proposal-bigint/#sec-bigint.prototype">BigInt.prototype</a></td> + <td>Stage 3</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.BigInt.prototype")}}</p> diff --git a/files/ko/web/javascript/reference/global_objects/boolean/boolean/index.html b/files/ko/web/javascript/reference/global_objects/boolean/boolean/index.html new file mode 100644 index 0000000000..bbe86a5134 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/boolean/boolean/index.html @@ -0,0 +1,55 @@ +--- +title: Boolean() 생성자 +slug: Web/JavaScript/Reference/Global_Objects/Boolean/Boolean +tags: + - Boolean + - Constructor + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/Boolean +--- +<div>{{JSRef}}</div> + +<p><strong><code>Boolean()</code></strong> 생성자는 {{jsxref("Boolean")}} 객체를 생성할 때 사용합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/boolean-constructor.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">new Boolean([<var>value</var>])</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>value</code> {{optional_inline}}</dt> + <dd><code>Boolean</code> 객체의 초깃값.</dd> +</dl> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-boolean-constructor', 'Boolean constructor')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Boolean.Boolean")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>용어 사전: {{Glossary("Boolean")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/boolean/index.html b/files/ko/web/javascript/reference/global_objects/boolean/index.html new file mode 100644 index 0000000000..06618f3ffe --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/boolean/index.html @@ -0,0 +1,108 @@ +--- +title: Boolean +slug: Web/JavaScript/Reference/Global_Objects/Boolean +tags: + - Boolean + - Constructor + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean +--- +<div>{{JSRef}}</div> + +<p><strong><code>Boolean</code></strong> 객체는 불리언 값을 감싸고 있는 객체입니다.</p> + +<h2 id="설명">설명</h2> + +<p>첫 번재 매개변수로서 전달한 값은 필요한 경우 불리언 값으로 변환됩니다. 값이 없거나 <code>0</code>, <code>-0</code>, {{jsxref("null")}}, <code>false</code>, {{jsxref("NaN")}}, {{jsxref("undefined")}}, 빈 문자열 (<code>""</code>)이라면 객체의 초기값은 <code>false</code>가 됩니다. 문자열 <code>"false"</code>를 포함한 그 외 모든 다른 값은 초기값을 <code>true</code>로 설정합니다.</p> + +<p><code>Boolean</code> 객체의 <code>true</code>와 <code>false</code> 값을 원시 <code>Boolean</code> 값 <code>true</code>, <code>false</code>와 혼동해선 안됩니다.</p> + +<p>값이 {{jsxref("undefined")}}, {{jsxref("null")}}이 아닌 <strong>모든</strong> 객체는 조건문에서 <code>true</code>로 계산됩니다. 이는 값이 <code>false</code>인 <code>Boolean</code> 객체도 포함합니다. 즉 아래 {{jsxref("Statements/if...else", "if")}} 문의 조건은 참입니다.</p> + +<pre class="brush: js notranslate">var x = new Boolean(false); +if (x) { + // 이 코드는 실행됨 +} +</pre> + +<p>그러나 원시 <code>Boolean</code> 값에는 적용되지 않습니다. 따라서 아래 {{jsxref("Statements/if...else", "if")}} 문의 조건은 거짓입니다.</p> + +<pre class="brush: js notranslate">var x = false; +if (x) { + // 이 코드는 실행되지 않음 +} +</pre> + +<p>불리언이 아닌 값을 변환할 때 <code>Boolean</code> 객체를 사용해선 안됩니다. 대신 <code>Boolean</code> 함수를 사용하세요.</p> + +<pre class="brush: js notranslate">var x = Boolean(expression); // 추천 +var x = new Boolean(expression); // 사용하지 말것</pre> + +<p>값이 <code>false</code>인 <code>Boolean</code> 객체를 포함한 어떠한 객체를 <code>Boolean</code> 객체의 초기값으로 넘겨주더라도 새로운 <code>Boolean</code> 객체는 <code>true</code>를 가집니다.</p> + +<pre class="brush: js notranslate">var myFalse = new Boolean(false); // 초기값 거짓 +var g = Boolean(myFalse); // 초기값 참 +var myString = new String('Hello'); // 문자열 객체 +var s = Boolean(myString); // 초기값 참</pre> + +<p><code>Boolean</code> 원시 값의 자리에서 <code>Boolean</code> 객체를 이용해선 안됩니다.</p> + +<h2 id="생성자">생성자</h2> + +<dl> + <dt>{{jsxref("Boolean.Boolean", "Boolean()")}}</dt> + <dd><code>Boolean</code> 객체를 생성합니다.</dd> +</dl> + +<h2 id="인스턴스_메서드">인스턴스 메서드</h2> + +<dl> + <dt>{{jsxref("Boolean.prototype.toString()")}}</dt> + <dd>객체의 값에 따라 문자열 <code>"true"</code> 또는 <code>"false"</code>를 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 재정의합니다.</dd> + <dt>{{jsxref("Boolean.prototype.valueOf()")}}</dt> + <dd>{{jsxref("Boolean")}} 객체의 원시값을 반환합니다. {{jsxref("Object.prototype.valueOf()")}} 메서드를 재정의합니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<h3 id="false_값으로_초기화한_Boolean_객체_만들기"><code>false</code> 값으로 초기화한 <code>Boolean</code> 객체 만들기</h3> + +<pre class="brush: js notranslate">var bNoParam = new Boolean(); +var bZero = new Boolean(0); +var bNull = new Boolean(null); +var bEmptyString = new Boolean(''); +var bfalse = new Boolean(false);</pre> + +<h3 id="true_값으로_초기화한_Boolean_객체_만들기"><code>true</code> 값으로 초기화한 <code>Boolean</code> 객체 만들기</h3> + +<pre class="brush: js notranslate">var btrue = new Boolean(true); +var btrueString = new Boolean('true'); +var bfalseString = new Boolean('false'); +var bSuLin = new Boolean('Su Lin'); +var bArrayProto = new Boolean([]); +var bObjProto = new Boolean({});</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-boolean-objects', 'Boolean')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.Boolean")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{Glossary("Boolean")}}</li> + <li>{{interwiki("wikipedia", "불리언 자료형")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/boolean/prototype/index.html b/files/ko/web/javascript/reference/global_objects/boolean/prototype/index.html new file mode 100644 index 0000000000..7d1ce4f379 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/boolean/prototype/index.html @@ -0,0 +1,81 @@ +--- +title: Boolean.prototype +slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +tags: + - Boolean + - JavaScript + - Property + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean +--- +<div>{{JSRef}}</div> + +<p><strong><code>Boolean.prototype</code></strong> 속성은 {{jsxref("Boolean")}} 생성자의 프로토타입을 나타냅니다.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<div>{{EmbedInteractiveExample("pages/js/boolean-constructor.html")}}</div> + + + +<h2 id="설명">설명</h2> + +<p>{{jsxref("Boolean")}} 인스턴스는 <code>Boolean.prototype</code>을 상속받습니다. 생성자의 프로토타입 객체를 사용해 모든 <code>Boolean</code> 인스턴스에 속성이나 메서드를 추가할 수 있습니다.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>Boolean.prototype.constructor</code></dt> + <dd>인스턴스의 프로토타입을 생성한 함수를 반환합니다. 기본값은 {{jsxref("Boolean")}} 함수입니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>{{jsxref("Boolean")}} 객체의 소스를 포함한 문자열을 반환합니다. 반환 문자열을 사용해 동일한 객체를 생성할 수 있습니다. {{jsxref("Object.prototype.toSource()")}} 메서드를 재정의합니다.</dd> + <dt>{{jsxref("Boolean.prototype.toString()")}}</dt> + <dd>객체의 값에 따라 문자열 <code>"true"</code> 또는 <code>"false"</code>를 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 재정의합니다.</dd> + <dt>{{jsxref("Boolean.prototype.valueOf()")}}</dt> + <dd>{{jsxref("Boolean")}} 객체의 원시 값을 반환합니다. {{jsxref("Object.prototype.valueOf()")}} 메서드를 재정의합니다.</dd> +</dl> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-boolean.prototype', 'Boolean.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Boolean.prototype")}}</p> diff --git a/files/ko/web/javascript/reference/global_objects/boolean/tostring/index.html b/files/ko/web/javascript/reference/global_objects/boolean/tostring/index.html new file mode 100644 index 0000000000..5cdb2c1f47 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/boolean/tostring/index.html @@ -0,0 +1,69 @@ +--- +title: Boolean.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Boolean/toString +tags: + - Boolean + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toString +--- +<div>{{JSRef}}</div> + +<p><code><strong>toString()</strong></code> 메서드는 {{jsxref("Boolean")}} 객체를 나타내는 문자열을 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/boolean-tostring.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate"><var>bool</var>.toString()</pre> + +<h3 id="반환_값">반환 값</h3> + +<p>{{jsxref("Boolean")}} 객체를 나타내는 문자열.</p> + +<h2 id="설명">설명</h2> + +<p>{{jsxref("Boolean")}} 객체는 {{jsxref("Object.prototype.toString()")}} 메서드를 상속받지 않고 재정의합니다. <code>Boolean</code> 객체에서 <code>toString()</code> 메서드는 객체의 문자열 표현을 반환합니다.</p> + +<p>JavaScript는 {{jsxref("Boolean")}}을 문자열로 표현해야 할 때나 문자열 결합에 사용할 때 <code>toString()</code>을 자동으로 호출합니다.</p> + +<p><code>toString()</code>은 불리언 객체의 값에 따라 문자열 "<code>true</code>" 또는 "<code>false</code>"를 반환합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="toString_사용하기"><code>toString()</code> 사용하기</h3> + +<pre class="brush: js notranslate">var flag = new Boolean(true); +flag.toString(); // false +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Boolean.toString")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/boolean/valueof/index.html b/files/ko/web/javascript/reference/global_objects/boolean/valueof/index.html new file mode 100644 index 0000000000..50df1d98d2 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/boolean/valueof/index.html @@ -0,0 +1,67 @@ +--- +title: Boolean.prototype.valueOf() +slug: Web/JavaScript/Reference/Global_Objects/Boolean/valueOf +tags: + - Boolean + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/valueOf +--- +<div>{{JSRef}}</div> + +<p><code><strong>valueOf()</strong></code> 메서드는 {{jsxref("Boolean")}} 객체의 원시 값을 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/boolean-valueof.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate"><var>bool</var>.valueOf()</pre> + +<h3 id="반환_값">반환 값</h3> + +<p>{{jsxref("Boolean")}} 객체의 원시 값.</p> + +<h2 id="설명">설명</h2> + +<p><code>valueOf()</code> 메서드는 {{jsxref("Boolean")}} 객체나 불리언 리터럴의 원시 값을 Boolean 자료형의 값으로 반환합니다.</p> + +<p><code>valueOf()</code> 메서드는 보통 JavaScript 내부에서 호출하며 코드에서 명시적으로 사용하지는 않습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="valueOf_사용하기"><code>valueOf</code> 사용하기</h3> + +<pre class="brush: js notranslate">var x = new Boolean(); +x.valueOf(); // false +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Boolean.valueOf")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Object.prototype.valueOf()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/dataview/dataview/index.html b/files/ko/web/javascript/reference/global_objects/dataview/dataview/index.html new file mode 100644 index 0000000000..7c8b3634a1 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/dataview/dataview/index.html @@ -0,0 +1,75 @@ +--- +title: DataView() 생성자 +slug: Web/JavaScript/Reference/Global_Objects/DataView/DataView +tags: + - Constructor + - DataView + - JavaScript + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/DataView/DataView +--- +<div>{{JSRef}}</div> + +<p><strong><code>DataView()</code></strong> 생성자는 새로운 {{jsxref("DataView")}} 객체를 생성합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/dataview-constructor.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">new DataView(<var>buffer</var> [, <var>byteOffset</var> [, <var>byteLength</var>]])</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code><var>buffer</var></code></dt> + <dd>새로운 <code>DataView</code> 객체의 저장소로 사용할 {{jsxref("ArrayBuffer")}} 또는 {{jsxref("SharedArrayBuffer")}} {{experimental_inline}}.</dd> + <dt><code><var>byteOffset</var></code> {{optional_inline}}</dt> + <dd>새로운 뷰가 참조할 첫 번째 바이트로의 바이트 단위 오프셋. 지정하지 않을 경우 버퍼 뷰는 첫 번째 바이트부터 시작합니다.</dd> + <dt><code><var>byteLength</var></code> {{optional_inline}}</dt> + <dd>바이트 배열의 요소 수. 지정하지 않을 경우 뷰의 길이는 버퍼의 길이와 같아집니다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>지정한 데이터 버퍼를 나타내는 새로운 <code>DataView</code> 객체.</p> + +<p><code>DataView</code> 객체는 배열 버퍼의 "인터프리터"라고 생각하면 좀 더 쉽습니다. <code>DataView</code>는 읽기와 쓰기 모두에서 버퍼에 잘 맞도록 숫자를 올바르게 변환하는 법, 즉 정수/부동소수점 실수 변환, 엔디언 등 이진 형식으로 나타낸 숫자의 처리법을 알고 있습니다.</p> + +<h3 id="예외">예외</h3> + +<dl> + <dt>{{jsxref("RangeError")}}</dt> + <dd> + <p><code>byteOffset</code> 또는 <code>byteLength</code> 매개변수가 버퍼의 끝을 벗어남.</p> + + <p>예를 들어, 버퍼가 16바이트 길이인데 <code>byteOffset</code>을 8로, <code>byteLength</code>를 10으로 설정할 경우 총 길이 18로서 2바이트를 초과하므로 오류가 발생합니다.</p> + </dd> +</dl> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-dataview-constructor', 'DataView constructor')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.DataView.DataView")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("DataView")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/dataview/index.html b/files/ko/web/javascript/reference/global_objects/dataview/index.html new file mode 100644 index 0000000000..3bde0a032c --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/dataview/index.html @@ -0,0 +1,168 @@ +--- +title: DataView +slug: Web/JavaScript/Reference/Global_Objects/DataView +tags: + - DataView + - JavaScript + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/DataView +--- +<div>{{JSRef}}</div> + +<p><strong><code>DataView</code></strong> 뷰는 플랫폼의 자체 {{glossary("endianness", "엔디언")}}(바이트 정렬 방법)에 신경 쓰지 않으면서 {{jsxref("ArrayBuffer")}}에서 다양한 숫자 자료형의 데이터를 읽고 쓰기 위한 저수준 인터페이스를 제공합니다.</p> + +<h2 id="설명">설명</h2> + +<h3 id="엔디언">엔디언</h3> + +<p>다중 바이트 숫자 자료형은 장치의 아키텍처에 따라 메모리에 다르게 표현됩니다. {{glossary("endianness", "엔디언")}} 용어 사전을 참고하세요. <code>DataView</code> 접근자는 코드를 실행하는 컴퓨터의 엔디언에 관계 없이 데이터의 접근법을 명시적으로 통제할 수 있습니다.</p> + +<pre class="brush: js">var littleEndian = (function() { + var buffer = new ArrayBuffer(2); + new DataView(buffer).setInt16(0, 256, true /* littleEndian */); + // Int16Array uses the platform's endianness. + return new Int16Array(buffer)[0] === 256; +})(); +console.log(littleEndian); // true or false</pre> + +<h3 id="64비트_정수_자료형">64비트 정수 자료형</h3> + +<p>JavaScript는 64비트 정수형 값에 대한 표준 지원을 아직 제공하지 않으므로 <code>DataView</code>도 64비트 연산을 지원하지 않습니다. 필요한 경우 최대 정확도 {{jsxref("Number.MAX_SAFE_INTEGER")}}의 값을 가져올 수 있는 <code>getUint64()</code> 함수를 만들 수는 있으며, 어느 정도까지는 충분할 것입니다.</p> + +<pre class="brush: js">function getUint64(dataview, byteOffset, littleEndian) { + // split 64-bit number into two 32-bit (4-byte) parts + const left = dataview.getUint32(byteOffset, littleEndian); + const right = dataview.getUint32(byteOffset+4, littleEndian); + + // combine the two 32-bit values + const combined = littleEndian? left + 2**32*right : 2**32*left + right; + + if (!Number.isSafeInteger(combined)) + console.warn(combined, 'exceeds MAX_SAFE_INTEGER. Precision may be lost'); + + return combined; +}</pre> + +<p>완전한 범위의 64비트를 지원해야 할 경우 {{jsxref("BigInt")}}를 사용하세요. 단, <code>BigInt</code>는 사용자 계층 라이브러리 구현체보다는 훨씬 빠르지만, 가변 크기라는 성질로 인해 JavaScript 32비트 정수보다는 항상 느릴 수밖에 없습니다.</p> + +<pre class="brush: js">const BigInt = window.BigInt, bigThirtyTwo = BigInt(32), bigZero = BigInt(0); +function getUint64BigInt(dataview, byteOffset, littleEndian) { + // split 64-bit number into two 32-bit (4-byte) parts + const left = BigInt(dataview.getUint32(byteOffset|0, !!littleEndian)>>>0); + const right = BigInt(dataview.getUint32((byteOffset|0) + 4|0, !!littleEndian)>>>0); + + // combine the two 32-bit values and return + return littleEndian ? (right<<bigThirtyTwo)|left : (left<<bigThirtyTwo)|right; +}</pre> + +<h2 id="생성자">생성자</h2> + +<dl> + <dt>{{jsxref("DataView.DataView", "DataView()")}}</dt> + <dd>새로운 <code>DataView</code> 객체를 생성합니다.</dd> +</dl> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>DataView.prototype.constructor</code></dt> + <dd>객체의 프로토타입을 생성한 함수를 나타냅니다. 초깃값은 내장 <code>DataView</code> 생성자입니다.</dd> + <dt>{{jsxref("DataView.prototype.buffer")}} {{readonlyInline}}</dt> + <dd>뷰가 참조하는 {{jsxref("ArrayBuffer")}}입니다.</dd> + <dt>{{jsxref("DataView.prototype.byteLength")}} {{readonlyInline}}</dt> + <dd>뷰의 시작점부터 측정한 {{jsxref("ArrayBuffer")}}의 길이(바이트 단위)입니다.</dd> + <dt>{{jsxref("DataView.prototype.byteOffset")}} {{readonlyInline}}</dt> + <dd>뷰의 시작점 오프셋(바이트 단위)입니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<h3 id="읽기">읽기</h3> + +<dl> + <dt>{{jsxref("DataView.prototype.getInt8()")}}</dt> + <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치의 8비트 정수(byte)를 가져옵니다.</dd> + <dt>{{jsxref("DataView.prototype.getUint8()")}}</dt> + <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치의 8비트 부호 없는 정수(unsigned byte)를 가져옵니다.</dd> + <dt>{{jsxref("DataView.prototype.getInt16()")}}</dt> + <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치의 16비트 정수(short)를 가져옵니다.</dd> + <dt>{{jsxref("DataView.prototype.getUint16()")}}</dt> + <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치의 16비트 부호 없는 정수(unsigned short)를 가져옵니다.</dd> + <dt>{{jsxref("DataView.prototype.getInt32()")}}</dt> + <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치의 32비트 정수(long)를 가져옵니다.</dd> + <dt>{{jsxref("DataView.prototype.getUint32()")}}</dt> + <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치의 32비트 부호 없는 정수(unsigned short)를 가져옵니다.</dd> + <dt>{{jsxref("DataView.prototype.getFloat32()")}}</dt> + <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치의 32비트 실수(float)를 가져옵니다.</dd> + <dt>{{jsxref("DataView.prototype.getFloat64()")}}</dt> + <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치의 64비트 실수(double)를 가져옵니다.</dd> + <dt>{{jsxref("DataView.prototype.getBigInt64()")}}</dt> + <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치의 64비트 정수(long long)를 가져옵니다.</dd> + <dt>{{jsxref("DataView.prototype.getBigUint64()")}}</dt> + <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치의 64비트 부호 없는 정수(unsigned long long)를 가져옵니다.</dd> +</dl> + +<h3 id="쓰기">쓰기</h3> + +<dl> + <dt>{{jsxref("DataView.prototype.setInt8()")}}</dt> + <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치에 8비트 정수(byte)를 저장합니다.</dd> + <dt>{{jsxref("DataView.prototype.setUint8()")}}</dt> + <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치에 8비트 부호 없는 정수(unsigned byte)를 저장합니다.</dd> + <dt>{{jsxref("DataView.prototype.setInt16()")}}</dt> + <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치에 16비트 정수(short)를 저장합니다.</dd> + <dt>{{jsxref("DataView.prototype.setUint16()")}}</dt> + <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치에 16비트 부호 없는 정수(unsigned short)를 저장합니다.</dd> + <dt>{{jsxref("DataView.prototype.setInt32()")}}</dt> + <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치에 32비트 정수(long)를 저장합니다.</dd> + <dt>{{jsxref("DataView.prototype.setUint32()")}}</dt> + <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치에 32비트 부호 없는 정수(unsigned long)를 저장합니다.</dd> + <dt>{{jsxref("DataView.prototype.setFloat32()")}}</dt> + <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치에 32비트 실수(float)를 저장합니다.</dd> + <dt>{{jsxref("DataView.prototype.setFloat64()")}}</dt> + <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치에 64비트 실수(double)를 저장합니다.</dd> + <dt>{{jsxref("DataView.prototype.setBigInt64()")}}</dt> + <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치에 64비트 정수(long long)를 저장합니다.</dd> + <dt>{{jsxref("DataView.prototype.setBigUint64()")}}</dt> + <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치에 64비트 부호 없는 정수(unsigned long long)를 저장합니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">var buffer = new ArrayBuffer(16); +var view = new DataView(buffer, 0); + +view.setInt16(1, 42); +view.getInt16(1); //42 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-dataview-objects', 'DataView')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.DataView")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("ArrayBuffer")}}</li> + <li>{{jsxref("SharedArrayBuffer")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/getdate/index.html b/files/ko/web/javascript/reference/global_objects/date/getdate/index.html new file mode 100644 index 0000000000..1a5d6f2d5a --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/getdate/index.html @@ -0,0 +1,84 @@ +--- +title: Date.prototype.getDate() +slug: Web/JavaScript/Reference/Global_Objects/Date/getDate +tags: + - Date + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDate +--- +<div>{{JSRef}}</div> + +<p><strong><code>getDate()</code></strong> 메서드는 주어진 날짜의 현지 시간 기준 일을 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getdate.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getDate()</code></pre> + +<h3 id="반환_값">반환 값</h3> + +<p>현지 시간에 따라, 주어진 날짜의 일에 해당하는 1 이상 31 이하의 정수.</p> + +<h2 id="예제">예제</h2> + +<h3 id="getDate()_사용하기"><code>getDate()</code> 사용하기</h3> + +<p>아래 코드의 두 번째 명령문은 <code>Xmas95</code>의 값에 기반하여 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">day</span></font>에 2를 할당합니다.</p> + +<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30'); +var day = Xmas95.getDate(); + +console.log(day); // 25 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.14', 'Date.prototype.getDate')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Date.getDate")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCDate()")}}</li> + <li>{{jsxref("Date.prototype.getUTCDay()")}}</li> + <li>{{jsxref("Date.prototype.setDate()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/getday/index.html b/files/ko/web/javascript/reference/global_objects/date/getday/index.html new file mode 100644 index 0000000000..1c936def69 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/getday/index.html @@ -0,0 +1,95 @@ +--- +title: Date.prototype.getDay() +slug: Web/JavaScript/Reference/Global_Objects/Date/getDay +tags: + - Date + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDay +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><strong><code>getDay()</code></strong> 메서드는 주어진 날짜의 현지 시간 기준 요일을 반환합니다. 0은 일요일을 나타냅니다.</span> 현재의 일을 반환하려면 {{jsxref("Date.prototype.getDate()")}}를 사용하세요.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getday.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getDay()</code></pre> + +<h3 id="반환_값">반환 값</h3> + +<p>현지 시간에 따라, 주어진 날짜의 요일에 해당하는 0 이상 6 이하의 정수. (일요일은 0, 월요일은 1, 화요일은 2, ...)</p> + +<h2 id="예제">예제</h2> + +<h3 id="getDay()_사용하기"><code>getDay()</code> 사용하기</h3> + +<p>1995년 12월 25일은 월요일입니다. 따라서 아래 코드의 두 번째 명령문은 <code>Xmas95</code>의 값에 기반하여 <code>weekday</code>에 1을 할당합니다.</p> + +<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30'); +var weekday = Xmas95.getDay(); + +console.log(weekday); // 1 +</pre> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> 필요하다면, 요일의 이름(<code>"월요일"</code> 등)을 {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}과 <code>options</code> 매개변수를 사용해 얻을 수 있습니다. 이 방법을 사용하면 국제화도 더 쉬워집니다.</p> + +<pre class="brush: js">var options = { weekday: 'long'}; +console.log(new Intl.DateTimeFormat('en-US', options).format(Xmas95)); +// Monday +console.log(new Intl.DateTimeFormat('ko-KR', options).format(Xmas95)); +// 월요일 +</pre> +</div> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getday', 'Date.prototype.getDay')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getday', 'Date.prototype.getDay')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.16', 'Date.prototype.getDay')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Date.getDay")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCDate()")}}</li> + <li>{{jsxref("Date.prototype.getUTCDay()")}}</li> + <li>{{jsxref("Date.prototype.setDate()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/getfullyear/index.html b/files/ko/web/javascript/reference/global_objects/date/getfullyear/index.html new file mode 100644 index 0000000000..c1a90e5340 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/getfullyear/index.html @@ -0,0 +1,88 @@ +--- +title: Date.prototype.getFullYear() +slug: Web/JavaScript/Reference/Global_Objects/Date/getFullYear +tags: + - Date + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getFullYear +--- +<div>{{JSRef}}</div> + +<p><strong><code>getFullYear()</code></strong> 메서드는 주어진 날짜의 현지 시간 기준 연도를 반환합니다.</p> + +<p>{{jsxref("Date.prototype.getYear()", "getYear()")}} 메서드 대신 이 메서드를 사용하세요.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getfullyear.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getFullYear()</code></pre> + +<h3 id="반환_값">반환 값</h3> + +<p>현지 시간에 따라, 주어진 날짜의 연도에 해당하는 숫자.</p> + +<h2 id="설명">설명</h2> + +<p><code>getFullYear()</code>가 반환하는 값은 절댓값입니다. <code>getFullYear()</code>는 1000년과 9999년 사이의, 1995년과 같은 날짜에 대해서는 네 자리 숫자를 반환합니다. 이 메서드를 사용해야 2000년 이후의 날짜에 대해서도 호환을 유지할 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="getFullYear()_사용하기"><code>getFullYear()</code> 사용하기</h3> + +<p>다음 예제에서는 현재 연도의 네 자릿값을 변수 <code>year</code>에 할당합니다.</p> + +<pre class="brush: js">var today = new Date(); +var year = today.getFullYear(); +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.10', 'Date.prototype.getFullYear')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Date.getFullYear")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setFullYear()")}}</li> + <li>{{jsxref("Date.prototype.getYear()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/gethours/index.html b/files/ko/web/javascript/reference/global_objects/date/gethours/index.html new file mode 100644 index 0000000000..8095548633 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/gethours/index.html @@ -0,0 +1,83 @@ +--- +title: Date.prototype.getHours() +slug: Web/JavaScript/Reference/Global_Objects/Date/getHours +tags: + - Date + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getHours +--- +<div>{{JSRef}}</div> + +<p><strong><code>getHours()</code></strong> 메서드는 주어진 날짜의 현지 시간 기준 시를 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-gethours.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getHours()</code></pre> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 날짜의 현지 시간 기준 시를 나타내는 0에서 23 사이의 정수.</p> + +<h2 id="예제">예제</h2> + +<h3 id="getHours()_사용하기"><code>getHours()</code> 사용하기</h3> + +<p>아래의 두 번째 명령문은 {{jsxref("Date")}} 객체 <code>Xmas95</code> 날짜의 시를 <code>hours</code> 변수에 할당합니다.</p> + +<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30'); +var hours = Xmas95.getHours(); + +console.log(hours); // 23 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.18', 'Date.prototype.getHours')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Date.getHours")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCHours()")}}</li> + <li>{{jsxref("Date.prototype.setHours()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/getmilliseconds/index.html b/files/ko/web/javascript/reference/global_objects/date/getmilliseconds/index.html new file mode 100644 index 0000000000..49be5d7ff7 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/getmilliseconds/index.html @@ -0,0 +1,81 @@ +--- +title: Date.prototype.getMilliseconds() +slug: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds +tags: + - Date + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds +--- +<div>{{JSRef}}</div> + +<p><code><strong>getMilliseconds()</strong></code> 메서드는 <code>Date</code> 인스턴스의 밀리초를 현지 시간 기준으로 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getmilliseconds.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>dateObj</var>.getMilliseconds()</pre> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 날짜의 현지 시간 기준 밀리초를 나타내는 0에서 999 사이의 정수.</p> + +<h2 id="예제">예제</h2> + +<h3 id="getMilliseconds()_사용하기"><code>getMilliseconds()</code> 사용하기</h3> + +<p>다음 예제에서는 현재 시간의 밀리초를 변수 <code>milliseconds</code>에 할당합니다.</p> + +<pre class="brush: js">var today = new Date(); +var milliseconds = today.getMilliseconds(); +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.24', 'Date.prototype.getMilliseconds')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Date.getMilliseconds")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</li> + <li>{{jsxref("Date.prototype.setMilliseconds()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/getminutes/index.html b/files/ko/web/javascript/reference/global_objects/date/getminutes/index.html new file mode 100644 index 0000000000..5cd9c3c99a --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/getminutes/index.html @@ -0,0 +1,83 @@ +--- +title: Date.prototype.getMinutes() +slug: Web/JavaScript/Reference/Global_Objects/Date/getMinutes +tags: + - Date + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMinutes +--- +<div>{{JSRef}}</div> + +<p><code><strong>getMinutes()</strong></code> 메서드는 <code>Date</code> 인스턴스의 분을 현지 시간 기준으로 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getminutes.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>dateObj</var>.getMinutes()</pre> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 날짜의 현지 시간 기준 분을 나타내는 0에서 59 사이의 정수.</p> + +<h2 id="예제">예제</h2> + +<h3 id="getMinutes()_사용하기"><code>getMinutes()</code> 사용하기</h3> + +<p>다음 예제는 {{jsxref("Date")}} 객체 <code>Xmas95</code>의 분을 사용해 변수 <code>minutes</code>에 15를 할당합니다.</p> + +<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30'); +var minutes = Xmas95.getMinutes(); + +console.log(minutes); // 15 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.20', 'Date.prototype.getMinutes')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Date.getMinutes")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCMinutes()")}}</li> + <li>{{jsxref("Date.prototype.setMinutes()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/getmonth/index.html b/files/ko/web/javascript/reference/global_objects/date/getmonth/index.html new file mode 100644 index 0000000000..48fe002a99 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/getmonth/index.html @@ -0,0 +1,94 @@ +--- +title: Date.prototype.getMonth() +slug: Web/JavaScript/Reference/Global_Objects/Date/getMonth +tags: + - Date + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMonth +--- +<div>{{JSRef}}</div> + +<p><strong><code>getMonth()</code> </strong>메서드는 <code>Date</code> 객체의 월 값을 현지 시간에 맞춰 반환합니다. 월은 0부터 시작합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getmonth.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>dateObj</var>.getMonth()</pre> + +<h3 id="반환_값">반환 값</h3> + +<p>현지 시간 기준 월을 나타내는 0에서 11 사이의 정수. 0은 1월, 1은 2월... 을 나타냅니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="getMonth()_사용하기"><code>getMonth()</code> 사용하기</h3> + +<p>다음 예제는 {{jsxref("Date")}} 객체 <code>Xmas95</code>의 값을 사용해 변수 <code>month</code>에 11을 할당합니다.</p> + +<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30'); +var month = Xmas95.getMonth(); + +console.log(month); // 11 +</pre> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> 필요한 경우 {{jsxref("DateTimeFormat", "Intl.DateTimeFormat()")}}과 <code>options</code> 매개변수를 사용해 해당하는 달의 이름(<code>"January"</code> 등)을 가져올 수 있습니다. 이 방법을 사용하면 국제화도 보다 편리합니다.</p> + +<pre class="brush: js">var options = { month: 'long'}; +console.log(new Intl.DateTimeFormat('ko-KR', options).format(Xmas95)); +// 12월 +console.log(new Intl.DateTimeFormat('en-US', options).format(Xmas95)); +// December +</pre> +</div> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.12', 'Date.prototype.getMonth')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Date.getMonth")}}</p> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCMonth()")}}</li> + <li>{{jsxref("Date.prototype.setMonth()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/getseconds/index.html b/files/ko/web/javascript/reference/global_objects/date/getseconds/index.html new file mode 100644 index 0000000000..c5155d4d4a --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/getseconds/index.html @@ -0,0 +1,83 @@ +--- +title: Date.prototype.getSeconds() +slug: Web/JavaScript/Reference/Global_Objects/Date/getSeconds +tags: + - Date + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getSeconds +--- +<div>{{JSRef}}</div> + +<p><strong><code>getSeconds()</code> </strong>메서드는 <code>Date</code> 객체의 초 값을 현지 시간에 맞춰 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getseconds.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>dateObj</var>.getSeconds()</pre> + +<h3 id="반환_값">반환 값</h3> + +<p>현지 시간 기준 초를 나타내는 0에서 59 사이의 정수.</p> + +<h2 id="예제">예제</h2> + +<h3 id="getSeconds()_사용하기"><code>getSeconds()</code> 사용하기</h3> + +<p>다음 예제는 {{jsxref("Date")}} 객체 <code>Xmas95</code>의 값을 사용해 변수 <code>seconds</code>에 30을 할당합니다.</p> + +<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30'); +var seconds = Xmas95.getSeconds(); + +console.log(seconds); // 30 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.22', 'Date.prototype.getSeconds')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Date.getSeconds")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCSeconds()")}}</li> + <li>{{jsxref("Date.prototype.setSeconds()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/gettime/index.html b/files/ko/web/javascript/reference/global_objects/date/gettime/index.html new file mode 100644 index 0000000000..20b554b41f --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/gettime/index.html @@ -0,0 +1,139 @@ +--- +title: Date.prototype.getTime() +slug: Web/JavaScript/Reference/Global_Objects/Date/getTime +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTime +--- +<div>{{JSRef}}</div> + +<p><strong>getTime()</strong> 메서드는 표준시에 따라 지정된 날짜의 시간에 해당하는 숫자 값을 반환합니다.</p> + +<p>이 메서드를 사용하면 다른 {{jsxref ( "Date")}} 객체에 날짜와 시간을 지정할 수 있습니다. 이 메소드는 기능적으로 {{jsxref("Date.valueof", "valueOf()")}} 메소드와 동일합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getTime()</code></pre> + +<h3 id="Return_value">Return value</h3> + +<p>1970 년 1 월 1 일 00:00:00 UTC와 주어진 날짜 사이의 경과 시간 (밀리 초)을 나타내는 숫자입니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="날짜_복사에_getTime_()_사용">날짜 복사에 getTime () 사용</h3> + +<p>동일한 시간 값으로 날짜 객체를 생성합니다.</p> + +<pre class="brush: js">// 월은 0부터 시작하여 생일은 1995 년 1 월 10 일이됩니다. +var birthday = new Date(1994, 12, 10); +var copy = new Date(); +copy.setTime(birthday.getTime()); +</pre> + +<p> </p> + +<h3 id="측정_실행_시간">측정 실행 시간</h3> + +<p>새로 생성 된 {{jsxref ( "Date")}} 객체에서 두 개의 연속 getTime () 호출을 뺀 후에이 두 호출 사이의 시간 범위를 지정하십시오. 일부 작업의 실행 시간을 계산하는 데 사용할 수 있습니다. 불필요한 {{jsxref ( "Date")}} 객체를 인스턴스화하지 않으려면 {{jsxref("Date.now()")}}를 참조하십시오.</p> + +<pre class="brush: js">var end, start; + +start = new Date(); +for (var i = 0; i < 1000; i++) { + Math.sqrt(i); +} +end = new Date(); + +console.log('Operation took ' + (end.getTime() - start.getTime()) + ' msec'); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.9', 'Date.prototype.getTime')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.setTime()")}}</li> + <li>{{jsxref("Date.prototype.valueOf()")}}</li> + <li>{{jsxref("Date.now()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html b/files/ko/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html new file mode 100644 index 0000000000..5f1681767f --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html @@ -0,0 +1,119 @@ +--- +title: Date.prototype.getTimezoneOffset() +slug: Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset +--- +<div>{{JSRef}}</div> + +<p><strong>getTimezoneOffset() </strong>메소드는 현재 로케일 (즉, 호스트 시스템 설정)에 대한 시간대 오프셋 (UTC)을 분 단위로 반환합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getTimezoneOffset()</code></pre> + +<h3 id="Return_value">Return value</h3> + +<p>현재 호스트 설정을 기반으로하는 날짜에 대한 시간대 오프셋 (UTC) (분)을 나타내는 숫자입니다.</p> + +<h2 id="Description">Description</h2> + +<p>시간대 오프셋은 UTC와 현지 시간의 차이 (분)입니다. 이것은 로컬 시간대가 UTC보다 뒤떨어져 있으면 오프셋이 양수이고 앞에있을 경우 음수임을 의미합니다. 예를 들어, 시간대 UTC + 10 : 00 (오스트레일리아 동부 표준시, 블라디보스토크 시간, 차모로 표준시)의 경우 -600이 반환됩니다.</p> + +<p>반환 된 표준 시간대 오프셋은 호출 된 날짜에 적용되는 오프셋입니다. 호스트 시스템이 일광 절약 시간으로 구성된 경우 오프셋은 Date가 나타내는 날짜와 시간에 따라 변경되고 일광 절약 시간이 적용됩니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_getTimezoneOffset()">Using <code>getTimezoneOffset()</code></h3> + +<pre class="brush: js">// 호스트 장치의 현재 시간대 오프셋 가져 오기 +var x = new Date(); +var currentTimeZoneOffsetInHours = x.getTimezoneOffset() / 60; + +// 2016 년 국제 노동절 (5 월 1 일)에 대한 시간대 오프셋 가져 오기 +var labourDay = new Date(2016,4,1) +var labourDayOffset = labourDay.getTimezoneOffset() / 60; +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.26', 'Date.prototype.getTimezoneOffset')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatIE("5")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ko/web/javascript/reference/global_objects/date/getutcdate/index.html b/files/ko/web/javascript/reference/global_objects/date/getutcdate/index.html new file mode 100644 index 0000000000..f74fb120db --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/getutcdate/index.html @@ -0,0 +1,118 @@ +--- +title: Date.prototype.getUTCDate() +slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCDate +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDate +--- +<div>{{JSRef}}</div> + +<p><strong>getUTCDate()</strong> 메서드는 표준시에 따라 지정된 날짜에 해당 월의 요일 (날짜)을 반환합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getUTCDate()</code></pre> + +<h3 id="Return_value">Return value</h3> + +<p>보편적 인 시간에 따라 지정된 날짜의 달의 날짜를 나타내는 1에서 31 사이의 정수입니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_getUTCDate()">Using <code>getUTCDate()</code></h3> + +<p>다음 예제에서는 현재 날짜의 일 부분을 day 변수에 할당합니다.</p> + +<pre class="brush: js">var today = new Date(); +var day = today.getUTCDate(); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.15', 'Date.prototype.getUTCDate')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getDate()")}}</li> + <li>{{jsxref("Date.prototype.getUTCDay()")}}</li> + <li>{{jsxref("Date.prototype.setUTCDate()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/getutcday/index.html b/files/ko/web/javascript/reference/global_objects/date/getutcday/index.html new file mode 100644 index 0000000000..c451fba612 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/getutcday/index.html @@ -0,0 +1,118 @@ +--- +title: Date.prototype.getUTCDay() +slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCDay +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDay +--- +<div>{{JSRef}}</div> + +<p><strong>getUTCDay()</strong> 메서드는 지정된 날짜의 요일을 표준시에 따라 반환합니다. 여기서 0은 일요일을 나타냅니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getUTCDay()</code></pre> + +<h3 id="Return_value">Return value</h3> + +<p>지정된 날짜의 요일에 해당하는 표준시에 따른 정수입니다 (일요일은 0, 월요일은 1, 화요일은 2 등).</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_getUTCDay()">Using <code>getUTCDay()</code></h3> + +<p>다음 예제에서는 현재 날짜의 평일 부분을 weekday 변수에 할당합니다.</p> + +<pre class="brush: js">var today = new Date(); +var weekday = today.getUTCDay(); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.17', 'Date.prototype.getUTCDay')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCDate()")}}</li> + <li>{{jsxref("Date.prototype.getDay()")}}</li> + <li>{{jsxref("Date.prototype.setUTCDate()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/getutcfullyear/index.html b/files/ko/web/javascript/reference/global_objects/date/getutcfullyear/index.html new file mode 100644 index 0000000000..f7097db08a --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/getutcfullyear/index.html @@ -0,0 +1,121 @@ +--- +title: Date.prototype.getUTCFullYear() +slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear +--- +<div>{{JSRef}}</div> + +<p><strong>getUTCFullYear()</strong> 메서드는 표준시에 따라 지정된 날짜의 연도를 반환합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getUTCFullYear()</code></pre> + +<h3 id="Return_value">Return value</h3> + +<p>주어진 날짜의 연도를 표준시에 따라 나타내는 숫자입니다.</p> + +<h2 id="Description">Description</h2> + +<p><strong>getUTCFullYear()</strong>에 의해 반환 된 값은 1995 년과 같이 2000 년과 호환되는 절대 숫자입니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_getUTCFullYear()">Using <code>getUTCFullYear()</code></h3> + +<p>다음 예제에서는 현재 연도의 4 자리 값을 변수 year에 할당합니다.</p> + +<pre class="brush: js">var today = new Date(); +var year = today.getUTCFullYear(); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.11', 'Date.prototype.getUTCFullYear')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setFullYear()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/getutchours/index.html b/files/ko/web/javascript/reference/global_objects/date/getutchours/index.html new file mode 100644 index 0000000000..11171e568c --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/getutchours/index.html @@ -0,0 +1,117 @@ +--- +title: Date.prototype.getUTCHours() +slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCHours +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCHours +--- +<div>{{JSRef}}</div> + +<p>getUTCHours () 메서드는 표준시에 따라 지정된 날짜의 시간을 반환합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getUTCHours()</code></pre> + +<h3 id="Return_value">Return value</h3> + +<p>0부터 23까지의 정수로, 표준시에 따라 지정된 날짜의 시간을 나타냅니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_getUTCHours()">Using <code>getUTCHours()</code></h3> + +<p>다음 예제에서는 현재 시간의 시간 부분을 시간 변수로 지정합니다.</p> + +<pre class="brush: js">var today = new Date(); +var hours = today.getUTCHours(); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.19', 'Date.prototype.getUTCHours')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getHours()")}}</li> + <li>{{jsxref("Date.prototype.setUTCHours()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html b/files/ko/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html new file mode 100644 index 0000000000..8121d3c7c4 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html @@ -0,0 +1,117 @@ +--- +title: Date.prototype.getUTCMilliseconds() +slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds +--- +<div>{{JSRef}}</div> + +<p><strong>getUTCMilliseconds()</strong> 메서드는 표준시에 따라 지정된 날짜의 밀리 초를 반환합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getUTCMilliseconds()</code></pre> + +<h3 id="Return_value">Return value</h3> + +<p>0부터 999까지의 정수로, 표준시에 따라 지정된 날짜의 밀리 초를 나타냅니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_getUTCMilliseconds()">Using <code>getUTCMilliseconds()</code></h3> + +<p>다음 예제에서는 현재 시간의 밀리 초 부분을 밀리 초 변수에 할당합니다.</p> + +<pre class="brush: js">var today = new Date(); +var milliseconds = today.getUTCMilliseconds(); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.25', 'Date.prototype.getUTCMilliseconds')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getutcmilliseconds', 'Date.prototype.getUTCMilliseconds')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcmilliseconds', 'Date.prototype.getUTCMilliseconds')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getMilliseconds()")}}</li> + <li>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/getutcminutes/index.html b/files/ko/web/javascript/reference/global_objects/date/getutcminutes/index.html new file mode 100644 index 0000000000..45c453dced --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/getutcminutes/index.html @@ -0,0 +1,117 @@ +--- +title: Date.prototype.getUTCMinutes() +slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes +--- +<div>{{JSRef}}</div> + +<p><strong>getUTCMinutes()</strong> 메서드는 표준시에 따라 지정된 날짜의 분을 반환합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getUTCMinutes()</code></pre> + +<h3 id="Return_value">Return value</h3> + +<p>0부터 59까지의 정수로, 표준시에 따라 지정된 날짜의 분을 나타냅니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_getUTCMinutes()">Using <code>getUTCMinutes()</code></h3> + +<p>다음 예제에서는 현재 시간의 분 부분을 minutes 변수에 할당합니다.</p> + +<pre class="brush: js">var today = new Date(); +var minutes = today.getUTCMinutes(); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.21', 'Date.prototype.getUTCMinutes')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getMinutes()")}}</li> + <li>{{jsxref("Date.prototype.setUTCMinutes()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/getutcmonth/index.html b/files/ko/web/javascript/reference/global_objects/date/getutcmonth/index.html new file mode 100644 index 0000000000..b4031536d6 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/getutcmonth/index.html @@ -0,0 +1,117 @@ +--- +title: Date.prototype.getUTCMonth() +slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth +--- +<div>{{JSRef}}</div> + +<p><strong>getUTCMonth()</strong>는 지정된 날짜의 월을 0부터 시작하는 값 (0은 첫 해를 나타냄)으로 표준시에 따라 반환합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getUTCMonth()</code></pre> + +<h3 id="Return_value">Return value</h3> + +<p>0부터 11까지의 정수로, 표준시에 따라 주어진 날짜의 달에 해당합니다. 1 월은 0, 2 월은 1, 3 월은 2 등입니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_getUTCMonth()">Using <code>getUTCMonth()</code></h3> + +<p>다음 예제에서는 현재 날짜의 월 부분을 month 변수에 할당합니다.</p> + +<pre class="brush: js">var today = new Date(); +var month = today.getUTCMonth(); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.13', 'Date.prototype.getUTCMonth')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getMonth()")}}</li> + <li>{{jsxref("Date.prototype.setUTCMonth()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/getutcseconds/index.html b/files/ko/web/javascript/reference/global_objects/date/getutcseconds/index.html new file mode 100644 index 0000000000..d643903df7 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/getutcseconds/index.html @@ -0,0 +1,117 @@ +--- +title: Date.prototype.getUTCSeconds() +slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds +--- +<div>{{JSRef}}</div> + +<p><strong>getUTCSeconds()</strong> 메서드는 표준시에 따라 지정된 날짜의 초를 반환합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getUTCSeconds()</code></pre> + +<h3 id="Return_value">Return value</h3> + +<p>0부터 59까지의 정수로, 표준시에 따라 지정된 날짜의 초를 나타냅니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_getUTCSeconds()">Using <code>getUTCSeconds()</code></h3> + +<p>다음 예제에서는 현재 시간의 초 부분을 초 변수에 지정합니다.</p> + +<pre class="brush: js">var today = new Date(); +var seconds = today.getUTCSeconds(); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.23', 'Date.prototype.getUTCSeconds')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getSeconds()")}}</li> + <li>{{jsxref("Date.prototype.setUTCSeconds()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/index.html b/files/ko/web/javascript/reference/global_objects/date/index.html new file mode 100644 index 0000000000..d9cf05bbdb --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/index.html @@ -0,0 +1,239 @@ +--- +title: Date +slug: Web/JavaScript/Reference/Global_Objects/Date +tags: + - Constructor + - Date + - JavaScript + - Reference + - 날짜 + - 시간 +translation_of: Web/JavaScript/Reference/Global_Objects/Date +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><strong><code>Date</code></strong> 생성자는 시간의 특정 지점을 나타내는 <code>Date</code> 객체를 생성합니다.</span> <code>Date</code> 객체는 1970년 1월 1일 UTC(국제표준시) 00:00으로부터 지난 시간을 밀리초로 나타내는 <a href="http://pubs.opengroup.org/onlinepubs/9699919799/basedefs/V1_chap04.html#tag_04_16">유닉스 타임스탬프</a>를 사용합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-constructor.html")}}</div> + + + +<h2 id=".EC.83.9D.EC.84.B1" name=".EC.83.9D.EC.84.B1"><code>Date</code> 객체 초기화</h2> + +<p>JavaScript Date 객체를 생성하는 법은 {{jsxref("new")}} 연산자를 사용하는 것이 유일합니다.</p> + +<pre class="brush: js">let now = new Date();</pre> + +<p>단순히 {{jsxref("Date", "Date")}} 객체를 직접 호출했을 때, 반환 값은 <code>Date</code> 객체가 아니라 날짜를 나타낸 문자열입니다. JavaScript는 <code>Date</code> 리터럴 구문이 없습니다.</p> + +<h2 id=".EC.83.9D.EC.84.B1" name=".EC.83.9D.EC.84.B1">구문</h2> + +<pre class="syntaxbox">new Date(); +new Date(<var>value</var>); +new Date(<var>dateString</var>); +new Date(<var>year</var>, <var>monthIndex</var>[, <var>day</var>[, <var>hour</var>[, <var>minutes</var>[, <var>seconds</var>[, <var>milliseconds</var>]]]]]); +</pre> + +<h3 id=".ED.8C.8C.EB.9D.BC.EB.AF.B8.ED.84.B0" name=".ED.8C.8C.EB.9D.BC.EB.AF.B8.ED.84.B0">매개변수</h3> + +<p><code>Date()</code> 생성자는 네 가지 형태로 사용할 수 있습니다.</p> + +<h4 id="매개변수_없음">매개변수 없음</h4> + +<p>매개변수를 제공하지 않으면, 현지 시간으로 생성 순간의 날짜와 시간을 나타내는 <code>Date</code> 객체를 생성합니다.</p> + +<h4 id="유닉스_타임스탬프">유닉스 타임스탬프</h4> + +<dl> + <dt><code>value</code></dt> + <dd><a href="http://pubs.opengroup.org/onlinepubs/9699919799/basedefs/V1_chap04.html#tag_04_16">유닉스 타임스탬프</a>, 즉 1970년 1월 1일 00:00:00 UTC(유닉스 시간)부터의 시간을 밀리초 단위로 표현하되 윤초는 무시한 정숫값. 대부분의 유닉스 타임스탬프 함수는 초 단위까지만 정확함을 유의하세요.</dd> + <dt> + <h4 id="타임스탬프_문자열">타임스탬프 문자열</h4> + </dt> + <dt><code>dateString</code></dt> + <dd>날짜를 표현하는 문자열값. {{jsxref("Date.parse()")}} 메서드가 인식할 수 있는 형식(<a href="http://tools.ietf.org/html/rfc2822#page-14">IETF 호환 RFC 2822 타임스탬프</a>와 <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15">ISO8601의 한 버전</a>)이어야 합니다 + <div class="note"><strong>참고</strong>: <code>Date</code> 생성자(와 <code>Date.parse</code>)를 사용해 날짜 문자열에서 시간을 알아내는건 하지 않는 것이 좋습니다. 브라우저 간 차이와 여러 비일관성이 존재하며 RFC 2822 규격 문자열의 지원은 관례일 뿐입니다. ISO 8601 규격 문자열은 시간 정보가 없을 때("1970-01-01" 등) 현지 시간이 아닌 UTC 기준으로 처리합니다.</div> + </dd> +</dl> + +<h4 id="개별_날짜_및_시간_구성_요소">개별 날짜 및 시간 구성 요소</h4> + +<p>적어도 연도와 월이 주어지면, 자신의 구성 요소(연, 월, 일, 시, 분, 초, 밀리초)를 모두 매개변수의 값에서 가져오는 <code>Date</code> 객체를 생성합니다. 누락한 요소에는 가장 낮은 값(<code>day</code>는 1, 나머지는 0)을 사용합니다.</p> + +<dl> + <dt><code>year</code></dt> + <dd>연도를 나타내는 정숫값. 0부터 99는 1900부터 1999로 처리합니다. {{anch("두 자리 연도는 1900년대로", "아래 예제")}}를 참고하세요.</dd> + <dt><code>monthIndex</code></dt> + <dd>월을 나타내는 정숫값. 0은 1월을 나타내고 11은 12월을 나타냅니다.</dd> + <dt><code>day</code> {{optional_inline}}</dt> + <dd>일을 나타내는 정숫값. 기본값은 1입니다.</dd> + <dt><code>hours</code> {{optional_inline}}</dt> + <dd>시를 나타내는 정숫값. 기본값은 0(자정)입니다.</dd> +</dl> + +<dl> + <dt><code>minutes</code> {{optional_inline}}</dt> + <dd>분을 나타내는 정숫값. 기본값은 0분입니다.</dd> + <dt><code>seconds</code> {{optional_inline}}</dt> + <dd>초를 나타내는 정숫값. 기본값은 0초입니다.</dd> + <dt><code>milliseconds</code> {{optional_inline}}</dt> + <dd>밀리초를 나타내는 정숫값. 기본값은 0밀리초입니다.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<h3 id="유닉스_시간과_타임스탬프">유닉스 시간과 타임스탬프</h3> + +<p>JavaScript 날짜는 1970년 1월 1일 자정 (UTC)로부터 지난 시간을 밀리초 단위로 나타낸 것입니다. 이 날짜와 시간을 합쳐 <strong>유닉스 시간</strong>이라고 부릅니다. 유닉스 시간은 컴퓨터로 날짜와 시간을 기록할 때 널리 사용하는 기준점입니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 시간과 날짜는 현시 시간으로 저장된다는 점을 기억하는게 중요합니다. 시간, 날짜, 아니면 각각의 구성 요소를 회수하는 기본 메서드도 현지 시간에서 동작합니다.</p> +</div> + +<p>하루는 86,400,000 밀리초입니다. 타임스탬프 기록에 사용하는 수의 크기를 고려했을 때, Date 객체는 유닉스 시간으로부터 약 ±100,000,000일 (1억일)을 기록할 수 있습니다. 따라서 293,742년이 오면 문제가 발생할 여지가 있습니다.</p> + +<h3 id="날짜_형식과_시간대_변환">날짜 형식과 시간대 변환</h3> + +<p>날짜를 얻는 방법과 시간대를 바꾸는 메서드는 여럿 있습니다. 그 중 특히 유용한 함수는 날짜 및 시간을 국제 표준 시간인 협정 표준시(UTC)로 반환하는 함수입니다. UTC는 그리니치 시간대라고도 불리는데, 기준 시간대가 영국의 런던과 인근의 그리니치를 지나는 경선이기 때문입니다. 사용자의 장치는 현지 시간을 제공합니다.</p> + +<p>{{jsxref("Date.getDay", "getDay()")}}와 {{jsxref("Date.setHours", "setHours()")}}처럼 현지 시간을 기준으로 한 구성요소 읽기 및 쓰기 메서드처럼, {{jsxref("Date.getDayUTC", "getUTCDay()")}} 와 {{jsxref("Date.setHoursUTC", "setUTCHours()")}}처럼 UTC를 기준으로 하는 읽기 및 쓰기 메서드도 존재합니다.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt>{{jsxref("Date.prototype")}}</dt> + <dd><code>Date</code> 객체에 추가 속성을 부여할 수 있습니다.</dd> + <dt><code>Date.length</code></dt> + <dd><code>Date.length</code>의 값은 7로, 생성자가 받을 수 있는 매개변수의 수입니다. 보통 유용하게 쓸 수 있는 값은 아닙니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("Date.now()")}}</dt> + <dd>1970년 1월 1일 00:00:00 UTC(유닉스 시간)부터 지난 시간을 밀리초 단위의 숫자 값으로 반환합니다. 윤초는 무시합니다.</dd> + <dt>{{jsxref("Date.parse()")}}</dt> + <dd>Parses a string representation of a date and returns the number of milliseconds since 1 January, 1970, 00:00:00, UTC. + <div class="note"><strong>Note:</strong> Parsing of strings with <code>Date.parse</code> is strongly discouraged due to browser differences and inconsistencies.</div> + </dd> + <dt>{{jsxref("Date.UTC()")}}</dt> + <dd>Accepts the same parameters as the longest form of the constructor (i.e. 2 to 7) and returns the number of milliseconds since January 1, 1970, 00:00:00 UTC, with leap seconds ignored.</dd> +</dl> + +<h2 id="Date_instances" name="Date_instances">JavaScript <code>Date</code> 인스턴스</h2> + +<p>All <code>Date</code> instances inherit from {{jsxref("Date.prototype")}}. The prototype object of the <code>Date</code> constructor can be modified to affect all <code>Date</code> instances.</p> + +<h3 id="Date.prototype_메서드"><code>Date.prototype</code> 메서드</h3> + +<div>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype', 'Methods')}}</div> + +<h2 id=".EC.98.88.EC.A0.9C" name=".EC.98.88.EC.A0.9C">예제</h2> + +<h3 id=".EC.98.88.EC.A0.9C:_.EB.82.A0.EC.A7.9C.EB.A5.BC_.EC.A7.80.EC.A0.95.ED.95.98.EB.8A.94_.EC.97.AC.EB.9F.AC.EA.B0.80.EC.A7.80_.EB.B0.A9.EB.B2.95" name=".EC.98.88.EC.A0.9C:_.EB.82.A0.EC.A7.9C.EB.A5.BC_.EC.A7.80.EC.A0.95.ED.95.98.EB.8A.94_.EC.97.AC.EB.9F.AC.EA.B0.80.EC.A7.80_.EB.B0.A9.EB.B2.95">날짜를 지정하는 여러가지 방법</h3> + +<p>아래 예제는 날짜를 지정하는 몇가지 방법을 보여줍니다:</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> parsing of date strings with the <code>Date</code> constructor (and <code>Date.parse</code>, they are equivalent) is strongly discouraged due to browser differences and inconsistencies.</p> +</div> + +<pre class="brush: js">var today = new Date(); +var birthday = new Date("December 17, 1995 03:24:00"); +var birthday = new Date(95,11,17); +var birthday = new Date(95,11,17,3,24,0); +</pre> + +<h3 id="두_자리_연도는_1900년대로">두 자리 연도는 1900년대로</h3> + +<p>In order to create and get dates between the years 0 and 99 the {{jsxref("Date.prototype.setFullYear()")}} and {{jsxref("Date.prototype.getFullYear()")}} methods should be used.</p> + +<pre class="brush: js">var date = new Date(98, 1); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT) + +// Deprecated method, 98 maps to 1998 here as well +date.setYear(98); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT) + +date.setFullYear(98); // Sat Feb 01 0098 00:00:00 GMT+0000 (BST) +</pre> + +<h3 id=".EC.98.88.EC.A0.9C:_.EA.B2.BD.EA.B3.BC.EC.8B.9C.EA.B0.84_.EA.B3.84.EC.82.B0" name=".EC.98.88.EC.A0.9C:_.EA.B2.BD.EA.B3.BC.EC.8B.9C.EA.B0.84_.EA.B3.84.EC.82.B0">경과시간 계산</h3> + +<p>The following examples show how to determine the elapsed time between two JavaScript dates in milliseconds.</p> + +<p>Due to the differing lengths of days (due to daylight saving changeover), months and years, expressing elapsed time in units greater than hours, minutes and seconds requires addressing a number of issues and should be thoroughly researched before being attempted.</p> + +<pre class="brush: js">// Date 객체 사용 +var start = Date.now(); + +// 시간이 오래 걸리는 작업을 여기 배치합니다 +doSomethingForALongTime(); +var end = Date.now(); +var elapsed = end - start; // 경과 시간, 밀리초. +</pre> + +<pre class="brush: js">// 내장 메서드 사용 +var start = new Date(); + +// 시간이 오래 걸리는 작업을 여기 배치합니다. +doSomethingForALongTime(); +var end = new Date(); +var elapsed = end.getTime() - start.getTime(); // 경과 시간, 밀리초. +</pre> + +<pre class="brush: js"><code>// to test a function and get back its return +function printElapsedTime(fTest) { + var nStartTime = Date.now(), + vReturn = fTest(), + nEndTime = Date.now(); + + console.log('Elapsed time: ' + String(nEndTime - nStartTime) + ' milliseconds'); + return vReturn; +} + +var yourFunctionReturn = printElapsedTime(yourFunction);</code></pre> + +<div class="blockIndicator note"><strong>Note:</strong> In browsers that support the {{domxref("window.performance", "Web Performance API", "", 1)}}'s high-resolution time feature, {{domxref("Performance.now()")}} can provide more reliable and precise measurements of elapsed time than {{jsxref("Date.now()")}}.</div> + +<h3 id="Get_the_number_of_seconds_since_Unix_Epoch">Get the number of seconds since Unix Epoch</h3> + +<pre class="brush: js">var seconds = Math.floor(Date.now() / 1000);</pre> + +<p>In this case it's important to return only an integer (so a simple division won't do), and also to only return actually elapsed seconds (that's why this code uses {{jsxref("Math.floor()")}} and not {{jsxref("Math.round()")}}).</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date-objects', 'Date')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date-objects', 'Date')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9', 'Date')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Date", 3)}}</p> diff --git a/files/ko/web/javascript/reference/global_objects/date/now/index.html b/files/ko/web/javascript/reference/global_objects/date/now/index.html new file mode 100644 index 0000000000..323df8ad45 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/now/index.html @@ -0,0 +1,119 @@ +--- +title: Date.now() +slug: Web/JavaScript/Reference/Global_Objects/Date/now +translation_of: Web/JavaScript/Reference/Global_Objects/Date/now +--- +<div>{{JSRef}}</div> + +<p><strong><code>Date.now()</code></strong> 메소드는 UTC 기준으로 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리 초를 반환합니다.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><code>var timeInMs = Date.now();</code></pre> + +<h3 id="인자">인자</h3> + +<p>없음</p> + +<h2 id="설명">설명</h2> + +<p>now() 메소드는 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리 초를 {{jsxref("Number")}} 형으로 반환합니다.</p> + +<p>now()는 {{jsxref("Date")}}의 정적 메소드이기 때문에, 항상 <code>Date.now() 처럼 사용하셔야 합니다.</code></p> + +<h2 id="Polyfill">Polyfill</h2> + +<p>이 메소든는 ECMA-262 5판에서 표준화되었습니다. 아직 이 메소드를 지원하도록 갱신되지 않은 엔진들은 이 메소드의 미지원에 대한 차선책으로 다음 코드를 활용하실 수 있습니다.</p> + +<pre class="brush: js">if (!Date.now) { + Date.now = function now() { + return new Date().getTime(); + }; +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.4.4', 'Date.now')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.now', 'Date.now')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.now', 'Date.now')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("5")}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("10.50")}}</td> + <td>{{CompatSafari("4")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Performance.now()")}} — provides timestamps with sub-millisecond resolution for use in measuring web page performance</li> + <li>{{domxref("console.time()")}} / {{domxref("console.timeEnd()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/parse/index.html b/files/ko/web/javascript/reference/global_objects/date/parse/index.html new file mode 100644 index 0000000000..57e8effa54 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/parse/index.html @@ -0,0 +1,231 @@ +--- +title: Date.parse() +slug: Web/JavaScript/Reference/Global_Objects/Date/parse +translation_of: Web/JavaScript/Reference/Global_Objects/Date/parse +--- +<div>{{JSRef}}</div> + +<p>Date.parse () 메서드는 날짜의 문자열 표현을 구문 분석하고 1970 년 1 월 1 일 00:00:00 UTC 이후의 밀리 초 수를 반환하거나 문자열이 인식되지 않거나 경우에 따라 잘못된 날짜 값을 포함하는 경우 NaN을 반환합니다. (예 : 2015-02-31).</p> + +<p>ES5까지는 Date.parse를 사용하지 않는 것이 좋습니다. 문자열 구문 분석은 전적으로 구현에 따라 다릅니다. 다른 호스트가 날짜 문자열을 구문 분석하는 방법에는 여전히 많은 차이점이 있으므로 날짜 문자열을 수동으로 구문 분석해야합니다 (다양한 형식을 수용하면 라이브러리가 도움이 될 수 있습니다).</p> + +<h2 id="Syntax">Syntax</h2> + +<p>Direct call:</p> + +<pre class="syntaxbox">Date.parse(<var>dateString</var>)</pre> + +<p>Implicit call:</p> + +<pre class="syntaxbox">new Date(<var>dateString</var>)</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>dateString</code></dt> + <dd>RFC2822 또는 ISO 8601 날짜를 나타내는 문자열 (다른 형식도 사용할 수 있지만 예기치 않은 결과 일 수 있음)</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>1970 년 1 월 1 일 00:00:00 UTC 이후 경과 된 밀리 초를 나타내는 숫자 및 주어진 문자열 표현을 파싱하여 얻은 날짜입니다. 인수가 유효한 날짜를 나타내지 않으면 {{jsxref ( "NaN")}}이 반환됩니다.</p> + +<h2 id="Description">Description</h2> + +<p>parse () 메서드는 날짜 문자열 (예 : "Dec 25, 1995")을 사용하고 1970 년 1 월 1 일 00:00:00 UTC 이후의 밀리 초 수를 반환합니다. 이 함수는 예를 들어 {{jsxref("Date.prototype.setTime()", "setTime()")}} 메서드 및 {{jsxref ( "Global_Objects / Date ","Date ")}} 객체를 반환합니다.</p> + +<p>주어진 시간을 나타내는 문자열이 주어지면 parse ()는 시간 값을 반환합니다. RFC2822 / IETF 날짜 구문 (RFC2822 섹션 3.3)을 받아들입니다. "Mon, 25 Dec 1995 13:30:00 GMT". 미국 대륙의 표준 시간대 약어를 이해하지만, 일반적으로 "Mon, 25 Dec 1995 13:30:00 +0430"(그리니치 자오선의 동쪽으로 4 시간 30 분)과 같이 시간대 오프셋을 사용하십시오.</p> + +<p>GMT와 UTC는 동등한 것으로 간주됩니다. 현지 시간대는 시간대 정보가없는 RFC2822 섹션 3.3 형식의 인수를 해석하는 데 사용됩니다.</p> + +<p>날짜 문자열 구문 분석의 차이로 인해 결과가 일관되지 않아 문자열을 수동으로 구문 분석하는 것이 좋습니다. 특히 "2015-10-12 12:00:00"과 같은 문자열을 NaN으로 구문 분석 할 수있는 다른 ECMAScript 구현, UTC 또는 현지 시간대.</p> + +<h3 id="ECMAScript_5_ISO-8601_format_support">ECMAScript 5 ISO-8601 format support</h3> + +<p>날짜 시간 문자열은 ISO 8601 형식 일 수 있습니다. 예를 들어, "2011-10-10"(날짜 만) 또는 "2011-10-10T14 : 48 : 00"(날짜 및 시간)을 전달하고 구문 분석 할 수 있습니다. 문자열이 ISO 8601 날짜 인 경우 UTC 시간대는 인수를 해석하는 데 사용됩니다. 문자열이 ISO 8601 형식의 날짜 및 시간이면 로컬로 처리됩니다.</p> + +<p>날짜 문자열 구문 분석 중에 시간대 지정자를 사용하여 인수를 해석하지만 반환되는 값은 1970 년 1 월 1 일 00:00:00 UTC와 인수 또는 NaN이 나타내는 시점 사이의 밀리 초입니다.</p> + +<p>parse ()는 {{jsxref ( "Date")}}의 정적 메서드이기 때문에 {{jsxref ( "Date")}} 인스턴스의 메서드가 아닌 Date.parse ()로 호출됩니다.</p> + +<h3 id="가정_된_시간대의_차이점">가정 된 시간대의 차이점</h3> + +<p>"March 7, 2014"이라는 날짜 문자열이 주어지면 parse ()는 현지 시간대를 사용하지만 "2014-03-07"과 같은 ISO 형식이 주어지면 UTC (ES5 및 ECMAScript 2015)의 시간대로 가정합니다. 따라서 {{jsxref ( "Date")}} 이러한 문자열을 사용하여 생성 된 객체는 시스템이 현지 표준 시간대 (UTC)로 설정되어 있지 않으면 지원되는 ECMAScript 버전에 따라 다른 순간을 나타낼 수 있습니다. 즉, 변환되는 문자열의 형식에 따라 동등하게 나타나는 두 개의 날짜 문자열이 서로 다른 두 개의 값을 가질 수 있습니다.</p> + +<h3 id="구현_특정_날짜_형식으로_폴백">구현 특정 날짜 형식으로 폴백</h3> + +<p>ECMAScript 사양은 다음과 같이 설명합니다. String이 표준 형식을 준수하지 않으면 함수는 구현 특정 휴리스틱 또는 구현 특정 파싱 알고리즘으로 폴백 할 수 있습니다. 인식 할 수없는 문자열 또는 ISO 형식의 문자열에 잘못된 요소 값이 포함 된 날짜로 인해 Date.parse ()가 {{jsxref ( "NaN")}}을 반환합니다.</p> + +<p>그러나 ECMA-262에 정의 된 ISO 형식으로 인식되지 않는 날짜 문자열의 잘못된 값은 제공된 브라우저 및 값에 따라 {{jsxref ( "NaN")}}이 될 수도 있고 그렇지 않을 수도 있습니다 (예 :</p> + +<pre class="brush: js">// Non-ISO string with invalid date values +new Date('23/25/2014'); +</pre> + +<p>Firefox 30에서는 2015 년 11 월 25 일, Safari 7에서는 유효하지 않은 날짜로 처리됩니다. 그러나 문자열이 ISO 형식 문자열로 인식되고 유효하지 않은 값을 포함하면 {{jsxref ( "NaN ")}} ES5 이상을 준수하는 모든 브라우저에서 :</p> + +<pre class="brush: js">// ISO string with invalid values +new Date('2014-25-23').toISOString(); +// returns "RangeError: invalid date" in all es5 compliant browsers +</pre> + +<p>SpiderMonkey의 구현 관련 추론은 jsdate.cpp에서 찾을 수 있습니다. 문자열 "10 06 2014"는 부적합한 ISO 형식의 예이므로 맞춤 루틴으로 되돌아갑니다. 파싱이 어떻게 작동하는지에 대한 대략적인 개요를 참조하십시오.</p> + +<pre class="brush: js">new Date('10 06 2014'); +</pre> + +<p>2014 년 10 월 6 일과 2014 년 6 월 10 일이 아닌 현지 날짜로 취급됩니다. 다른 예 :</p> + +<pre class="brush: js">new Date('foo-bar 2014').toString(); +// returns: "Invalid Date" + +Date.parse('foo-bar 2014'); +// returns: NaN +</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_Date.parse()">Using <code>Date.parse()</code></h3> + +<p>IPOdate가 기존의 {{jsxref ( "Date")}} 객체 인 경우 다음과 같이 1995 년 8 월 9 일 (현지 시간)으로 설정할 수 있습니다.</p> + +<pre class="brush: js">IPOdate.setTime(Date.parse('Aug 9, 1995'));</pre> + +<p>표준이 아닌 날짜 문자열을 파싱하는 몇 가지 다른 예는 다음과 같습니다.</p> + +<pre class="brush: js">Date.parse('Aug 9, 1995');</pre> + +<p>문자열이 표준 시간대를 지정하지 않고 ISO 형식이 아니므로 표준 시간대 GMT-0300의 807937200000과 다른 표준 시간대의 다른 값을 반환하므로 표준 시간대는 기본적으로 local입니다.</p> + +<pre class="brush: js">Date.parse('Wed, 09 Aug 1995 00:00:00 GMT');</pre> + +<p>GMT (UTC)가 제공되는 현지 시간대와 상관없이 807926400000을 반환합니다.</p> + +<pre class="brush: js">Date.parse('Wed, 09 Aug 1995 00:00:00');</pre> + +<p>인수에 표준 시간대 지정자가 없으므로 ISO 형식이 아니기 때문에 표준 시간대 GMT-0300에서 807937200000과 다른 표준 시간대의 다른 값을 반환하므로 로컬로 처리됩니다.</p> + +<pre class="brush: js">Date.parse('Thu, 01 Jan 1970 00:00:00 GMT');</pre> + +<p>현지 시간대와 상관없이 0을 반환합니다. GMT (UTC)가 제공됩니다.</p> + +<pre class="brush: js">Date.parse('Thu, 01 Jan 1970 00:00:00');</pre> + +<p>표준 시간대가 제공되지 않고 문자열이 ISO 형식이 아니기 때문에 표준 시간대 GMT-0400의 14400000과 다른 표준 시간대의 다른 값을 반환하므로 현지 표준 시간대가 사용됩니다.</p> + +<pre class="brush: js">Date.parse('Thu, 01 Jan 1970 00:00:00 GMT-0400');</pre> + +<p>현지 시간대와 관계없이 14400000을 반환합니다. GMT (UTC)가 제공됩니다.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.4.2', 'Date.parse')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>ISO 8601 format added.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.parse', 'Date.parse')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.parse', 'Date.parse')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>ISO 8601 format</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckodesktop("2.0")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>ISO 8601 format</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Compatibility_notes">Compatibility notes</h2> + +<ul> + <li>Firefox 49 {{geckoRelease(49)}} changed the parsing of 2-digit years to be aligned with the Google Chrome browser instead of Internet Explorer. Now, 2-digit years that are less than or equal to <code>50</code> are parsed as 21st century years. For example, <code>04/16/17</code>, previously parsed as April 16, 1917, will be April 16, 2017 now. To avoid any interoperability issues or ambiguous years, it is recommended to use the ISO 8601 format like "2017-04-16" ({{bug(1265136)}}).</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.UTC()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/prototype/index.html b/files/ko/web/javascript/reference/global_objects/date/prototype/index.html new file mode 100644 index 0000000000..7fe5dc9617 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/prototype/index.html @@ -0,0 +1,182 @@ +--- +title: Date.prototype +slug: Web/JavaScript/Reference/Global_Objects/Date/prototype +tags: + - Date + - JavaScript + - Property + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date +--- +<div>{{JSRef}}</div> + +<p><strong><code>Date.prototype</code></strong> 속성은 {{jsxref("Date")}} 생성자의 프로토타입을 나타냅니다.</p> + +<div>{{js_property_attributes(0, 0, 1)}}</div> + +<h2 id="설명">설명</h2> + +<p>JavaScript {{jsxref("Date")}} 인스턴스는 <code>Date.prototype</code>을 상속합니다. 생성자의 프로토타입을 변경해 모든 <code>Date</code> 인스턴스의 속성과 메서드를 수정할 수 있습니다.</p> + +<p>2000년대 달력과의 호환성을 위해 연도는 언제나 완전하게 네 자리 숫자로 작성해야 합니다. 즉 98 대신 1998이 올바른 작성법입니다. <code>Date</code>는 완전한 연도 설정에 도움이 될 {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}, {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}}, {{jsxref("Date.prototype.getUTCFullYear()", "getUTCFullYear()")}}, {{jsxref("Date.prototype.setUTCFullYear()", "setUTCFullYear()")}} 메서드를 가지고 있습니다.</p> + +<p>ECMAScript 6부터 <code>Date.prototype</code>은 {{jsxref("Date")}} 인스턴스가 아닌 평범한 객체입니다.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>Date.prototype.constructor</code></dt> + <dd>인스턴스 생성에 사용한 생성자를 반환합니다. 기본값은 {{jsxref("Date")}}입니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<h3 id="접근자">접근자</h3> + +<dl> + <dt>{{jsxref("Date.prototype.getDate()")}}</dt> + <dd>주어진 날짜의 일(1-31)을 현지 시간에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getDay()")}}</dt> + <dd>주어진 날짜의 요일(0-6)을 현지 시간에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getFullYear()")}}</dt> + <dd>주어진 날짜의 연도(4자리 수)를 현지 시간에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getHours()")}}</dt> + <dd>주어진 날짜의 시(0-23)를 현지 시간에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getMilliseconds()")}}</dt> + <dd>주어진 날짜의 밀리초(0-999)를 현지 시간에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getMinutes()")}}</dt> + <dd>주어진 날짜의 분(0-59)을 현지 시간에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getMonth()")}}</dt> + <dd>주어진 날짜의 월(0-11)을 현지 시간에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getSeconds()")}}</dt> + <dd>주어진 날짜의 초(0-59)를 현지 시간에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getTime()")}}</dt> + <dd>주어진 날짜와 1970년 1월 1일 0시 0분(UTC)의 차이를 밀리초로 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getTimezoneOffset()")}}</dt> + <dd>현재 로케일의 시간대 차이를 분으로 환산해 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getUTCDate()")}}</dt> + <dd>주어진 날짜의 일(1-31)을 UTC에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getUTCDay()")}}</dt> + <dd>주어진 날짜의 요일(0-6)을 UTC에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getUTCFullYear()")}}</dt> + <dd>주어진 날짜의 연도(4자리 수)를 UTC에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getUTCHours()")}}</dt> + <dd>주어진 날짜의 시(0-23)를 UTC에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</dt> + <dd>주어진 날짜의 밀리초(0-999)를 UTC에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getUTCMinutes()")}}</dt> + <dd>주어진 날짜의 분(0-59)을 UTC에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getUTCMonth()")}}</dt> + <dd>주어진 날짜의 월(0-11)을 UTC에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getUTCSeconds()")}}</dt> + <dd>주어진 날짜의 초(0-59)를 UTC에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getYear()")}} {{deprecated_inline}}</dt> + <dd>주어진 날짜의 연도(주로 두세자리 숫자)를 현지 시간에 맞춰 반환합니다. {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}를 사용하세요.</dd> +</dl> + +<h3 id="설정자">설정자</h3> + +<dl> + <dt>{{jsxref("Date.prototype.setDate()")}}</dt> + <dd>Sets the day of the month for a specified date according to local time.</dd> + <dt>{{jsxref("Date.prototype.setFullYear()")}}</dt> + <dd>Sets the full year (e.g. 4 digits for 4-digit years) for a specified date according to local time.</dd> + <dt>{{jsxref("Date.prototype.setHours()")}}</dt> + <dd>Sets the hours for a specified date according to local time.</dd> + <dt>{{jsxref("Date.prototype.setMilliseconds()")}}</dt> + <dd>Sets the milliseconds for a specified date according to local time.</dd> + <dt>{{jsxref("Date.prototype.setMinutes()")}}</dt> + <dd>Sets the minutes for a specified date according to local time.</dd> + <dt>{{jsxref("Date.prototype.setMonth()")}}</dt> + <dd>Sets the month for a specified date according to local time.</dd> + <dt>{{jsxref("Date.prototype.setSeconds()")}}</dt> + <dd>Sets the seconds for a specified date according to local time.</dd> + <dt>{{jsxref("Date.prototype.setTime()")}}</dt> + <dd>Sets the {{jsxref("Date")}} object to the time represented by a number of milliseconds since January 1, 1970, 00:00:00 UTC, allowing for negative numbers for times prior.</dd> + <dt>{{jsxref("Date.prototype.setUTCDate()")}}</dt> + <dd>Sets the day of the month for a specified date according to universal time.</dd> + <dt>{{jsxref("Date.prototype.setUTCFullYear()")}}</dt> + <dd>Sets the full year (e.g. 4 digits for 4-digit years) for a specified date according to universal time.</dd> + <dt>{{jsxref("Date.prototype.setUTCHours()")}}</dt> + <dd>Sets the hour for a specified date according to universal time.</dd> + <dt>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</dt> + <dd>Sets the milliseconds for a specified date according to universal time.</dd> + <dt>{{jsxref("Date.prototype.setUTCMinutes()")}}</dt> + <dd>Sets the minutes for a specified date according to universal time.</dd> + <dt>{{jsxref("Date.prototype.setUTCMonth()")}}</dt> + <dd>Sets the month for a specified date according to universal time.</dd> + <dt>{{jsxref("Date.prototype.setUTCSeconds()")}}</dt> + <dd>Sets the seconds for a specified date according to universal time.</dd> + <dt>{{jsxref("Date.prototype.setYear()")}} {{deprecated_inline}}</dt> + <dd>Sets the year (usually 2-3 digits) for a specified date according to local time. Use {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}} instead.</dd> +</dl> + +<h3 id="변환_접근자">변환 접근자</h3> + +<dl> + <dt>{{jsxref("Date.prototype.toDateString()")}}</dt> + <dd>Returns the "date" portion of the {{jsxref("Date")}} as a human-readable string like 'Thu Apr 12 2018'</dd> + <dt>{{jsxref("Date.prototype.toISOString()")}}</dt> + <dd>Converts a date to a string following the ISO 8601 Extended Format.</dd> + <dt>{{jsxref("Date.prototype.toJSON()")}}</dt> + <dd>Returns a string representing the {{jsxref("Date")}} using {{jsxref("Date.prototype.toISOString()", "toISOString()")}}. Intended for use by {{jsxref("JSON.stringify()")}}.</dd> + <dt>{{jsxref("Date.prototype.toGMTString()")}} {{deprecated_inline}}</dt> + <dd>Returns a string representing the {{jsxref("Date")}} based on the GMT (UT) time zone. Use {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}} instead.</dd> + <dt>{{jsxref("Date.prototype.toLocaleDateString()")}}</dt> + <dd>Returns a string with a locality sensitive representation of the date portion of this date based on system settings.</dd> + <dt>{{jsxref("Date.prototype.toLocaleFormat()")}} {{non-standard_inline}}</dt> + <dd>Converts a date to a string, using a format string.</dd> + <dt>{{jsxref("Date.prototype.toLocaleString()")}}</dt> + <dd>Returns a string with a locality sensitive representation of this date. Overrides the {{jsxref("Object.prototype.toLocaleString()")}} method.</dd> + <dt>{{jsxref("Date.prototype.toLocaleTimeString()")}}</dt> + <dd>Returns a string with a locality sensitive representation of the time portion of this date based on system settings.</dd> + <dt>{{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Returns a string representing the source for an equivalent {{jsxref("Date")}} object; you can use this value to create a new object. Overrides the {{jsxref("Object.prototype.toSource()")}} method.</dd> + <dt>{{jsxref("Date.prototype.toString()")}}</dt> + <dd>Returns a string representing the specified {{jsxref("Date")}} object. Overrides the {{jsxref("Object.prototype.toString()")}} method.</dd> + <dt>{{jsxref("Date.prototype.toTimeString()")}}</dt> + <dd>Returns the "time" portion of the {{jsxref("Date")}} as a human-readable string.</dd> + <dt>{{jsxref("Date.prototype.toUTCString()")}}</dt> + <dd>Converts a date to a string using the UTC timezone.</dd> + <dt>{{jsxref("Date.prototype.valueOf()")}}</dt> + <dd>Returns the primitive value of a {{jsxref("Date")}} object. Overrides the {{jsxref("Object.prototype.valueOf()")}} method.</dd> +</dl> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5', 'Date.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Date.prototype")}}</p> diff --git a/files/ko/web/javascript/reference/global_objects/date/setdate/index.html b/files/ko/web/javascript/reference/global_objects/date/setdate/index.html new file mode 100644 index 0000000000..17f2b8aa02 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/setdate/index.html @@ -0,0 +1,127 @@ +--- +title: Date.prototype.setDate() +slug: Web/JavaScript/Reference/Global_Objects/Date/setDate +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setDate +--- +<div>{{JSRef}}</div> + +<p><strong>setDate()</strong> 메서드는 현재 설정된 월의 시작 부분을 기준으로 {{jsxref ( "Date")}} 객체의 날짜를 설정합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setDate(<var>dayValue</var>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>dayValue</code></dt> + <dd>월의 일을 나타내는 정수입니다.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>1970 년 1 월 1 일 00:00:00 UTC와 주어진 날짜 사이의 밀리 초 ({{jsxref ( "Date")}} 개체도 변경됩니다).</p> + +<h2 id="Description">Description</h2> + +<p>dayValue가 해당 월의 날짜 값 범위를 벗어나면 setDate ()는 그에 따라 {{jsxref ( "Date")}} 객체를 업데이트합니다. 예를 들어, dayValue에 0이 제공되면 날짜는 이전 달의 마지막 날로 설정됩니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_setDate()">Using <code>setDate()</code></h3> + +<pre class="brush: js">var theBigDay = new Date(1962, 6, 7); // 1962-07-07 +theBigDay.setDate(24); // 1962-07-24 +theBigDay.setDate(32); // 1962-08-01 +theBigDay.setDate(22); // 1962-08-22</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.36', 'Date.prototype.setDate')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getDate()")}}</li> + <li>{{jsxref("Date.prototype.setUTCDate()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/setfullyear/index.html b/files/ko/web/javascript/reference/global_objects/date/setfullyear/index.html new file mode 100644 index 0000000000..f9faaca856 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/setfullyear/index.html @@ -0,0 +1,133 @@ +--- +title: Date.prototype.setFullYear() +slug: Web/JavaScript/Reference/Global_Objects/Date/setFullYear +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setFullYear +--- +<div>{{JSRef}}</div> + +<p><strong>setFullYear()</strong> 메서드는 현지 시간에 따라 지정된 날짜의 전체 연도를 설정합니다. 새로운 타임 스탬프를 반환합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setFullYear(<var>yearValue</var>[, <var>monthValue</var>[, <var>dayValue</var>]])</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>yearValue</code></dt> + <dd>연도의 숫자 값을 지정하는 정수입니다 (예 : 1995).</dd> + <dt><code>monthValue</code></dt> + <dd>선택 과목. 1 월에서 12 월까지의 월을 나타내는 0에서 11 사이의 정수입니다.</dd> + <dt><code>dayValue</code></dt> + <dd>선택 과목. 한 달의 날짜를 나타내는 1 - 31 사이의 정수입니다. dayValue 매개 변수를 지정하는 경우 monthValue도 지정해야합니다.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자입니다.</p> + +<h2 id="Description">Description</h2> + +<p>monthValue 및 dayValue 매개 변수를 지정하지 않으면 {{jsxref ("Date.prototype.getMonth()", "getMonth()")}} 및 {{jsxref("Date.prototype.getDate)","getDate()")}} 메소드가 사용됩니다.</p> + +<p>지정한 매개 변수가 예상 범위를 벗어나면 setFullYear ()가 다른 매개 변수와 {{jsxref ( "Date")}} 객체의 날짜 정보를 그에 따라 업데이트하려고 시도합니다. 예를 들어, monthValue에 15를 지정하면 연도가 1 (yearValue + 1)만큼 증가하고 3은 해당 월에 사용됩니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_setFullYear()">Using <code>setFullYear()</code></h3> + +<pre class="brush: js">var theBigDay = new Date(); +theBigDay.setFullYear(1997); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.40', 'Date.prototype.setFullYear')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setUTCFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setYear()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/sethours/index.html b/files/ko/web/javascript/reference/global_objects/date/sethours/index.html new file mode 100644 index 0000000000..cbc1d4ff32 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/sethours/index.html @@ -0,0 +1,138 @@ +--- +title: Date.prototype.setHours() +slug: Web/JavaScript/Reference/Global_Objects/Date/setHours +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setHours +--- +<div>{{JSRef}}</div> + +<p>setHours () 메서드는 현지 시간에 따라 지정된 날짜의 시간을 설정하고 1970 년 1 월 1 일 00:00:00 UTC 이후 업데이트 된 {{jsxref ( "Date")}}에 의해 표시되는 시간 (밀리 초)을 반환합니다. 예.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setHours(<var>hoursValue</var>[, <var>minutesValue</var>[, <var>secondsValue</var>[, <var>msValue</var>]]])</code></pre> + +<h3 id="Versions_prior_to_JavaScript_1.3">Versions prior to JavaScript 1.3</h3> + +<pre class="syntaxbox"><code><var>dateObj</var>.setHours(<var>hoursValue</var>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>hoursValue</code></dt> + <dd>시를 나타내는 0에서 23 사이의 정수입니다.</dd> + <dt><code>minutesValue</code></dt> + <dd>선택 과목. 분을 나타내는 0에서 59 사이의 정수입니다.</dd> + <dt><code>secondsValue</code></dt> + <dd>선택 과목. 초를 나타내는 0에서 59 사이의 정수입니다. secondsValue 매개 변수를 지정하면 minutesValue도 지정해야합니다.</dd> + <dt><code>msValue</code></dt> + <dd>선택 과목. 밀리 초를 나타내는 0에서 999 사이의 숫자입니다. msValue 매개 변수를 지정하는 경우 minutesValue 및 secondsValue도 지정해야합니다.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자입니다.</p> + +<h2 id="Description">Description</h2> + +<p>minutesValue, secondsValue 및 msValue 매개 변수를 지정하지 않으면 {{jsxref("Date.prototype.getMinutes()", "getMinutes()")}}에서 반환 된 값, {{jsxref("Date.prototype.getSeconds()","getSeconds()")}} 및 {{jsxref("Date.prototype.getMilliseconds()","getMilliseconds()")}} 메서드가 사용됩니다.</p> + +<p>지정한 매개 변수가 예상 범위를 벗어나면 setHours ()는 그에 따라 {{jsxref ("Date")}} 객체의 날짜 정보를 업데이트하려고 시도합니다. 예를 들어 secondsValue에 100을 사용하면 분은 1 (minutesValue + 1)만큼 증가하고 40은 초 단위로 사용됩니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_setHours()">Using <code>setHours()</code></h3> + +<pre class="brush:js">var theBigDay = new Date(); +theBigDay.setHours(7); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.34', 'Date.prototype.setHours')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getHours()")}}</li> + <li>{{jsxref("Date.prototype.setUTCHours()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/setmilliseconds/index.html b/files/ko/web/javascript/reference/global_objects/date/setmilliseconds/index.html new file mode 100644 index 0000000000..d0904ae69e --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/setmilliseconds/index.html @@ -0,0 +1,126 @@ +--- +title: Date.prototype.setMilliseconds() +slug: Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds +--- +<div>{{JSRef}}</div> + +<p>setMilliseconds () 메서드는 현지 시간에 따라 지정된 날짜의 밀리 초를 설정합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setMilliseconds(<var>millisecondsValue</var>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>millisecondsValue</code></dt> + <dd>밀리 초를 나타내는 0에서 999 사이의 숫자입니다.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자입니다.</p> + +<h2 id="Description">Description</h2> + +<p>예상되는 범위를 벗어난 숫자를 지정하면 {{jsxref ( "Date")}} 객체의 날짜 정보가 그에 따라 업데이트됩니다. 예를 들어, 1005를 지정하면 초 수가 1 씩 증가하고 5는 밀리 초 단위로 사용됩니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_setMilliseconds()">Using <code>setMilliseconds()</code></h3> + +<pre class="brush: js">var theBigDay = new Date(); +theBigDay.setMilliseconds(100); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.28', 'Date.prototype.setMilliseconds')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getMilliseconds()")}}</li> + <li>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/setminutes/index.html b/files/ko/web/javascript/reference/global_objects/date/setminutes/index.html new file mode 100644 index 0000000000..296923aa47 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/setminutes/index.html @@ -0,0 +1,136 @@ +--- +title: Date.prototype.setMinutes() +slug: Web/JavaScript/Reference/Global_Objects/Date/setMinutes +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMinutes +--- +<div>{{JSRef}}</div> + +<p>setMinutes () 메서드는 현지 시간에 따라 지정된 날짜의 분을 설정합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setMinutes(<var>minutesValue</var>[, <var>secondsValue</var>[, <var>msValue</var>]])</code></pre> + +<h3 id="Versions_prior_to_JavaScript_1.3">Versions prior to JavaScript 1.3</h3> + +<pre class="syntaxbox"><code><var>dateObj</var>.setMinutes(<var>minutesValue</var>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>minutesValue</code></dt> + <dd>분을 나타내는 0에서 59 사이의 정수입니다.</dd> + <dt><code>secondsValue</code></dt> + <dd>선택 과목. 초를 나타내는 0에서 59 사이의 정수입니다. secondsValue 매개 변수를 지정하면 minutesValue도 지정해야합니다.</dd> + <dt><code>msValue</code></dt> + <dd>선택 과목. 밀리 초를 나타내는 0에서 999 사이의 숫자입니다. msValue 매개 변수를 지정하는 경우 minutesValue 및 secondsValue도 지정해야합니다.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자입니다.</p> + +<h2 id="Description">Description</h2> + +<p>secondsValue 및 msValue 매개 변수를 지정하지 않으면 {{jsxref("Date.prototype.getSeconds()", "getSeconds()")}} 및 {{jsxref ("Date.prototype.getMilliseconds ","getMilliseconds() ")}} 메소드가 사용됩니다.</p> + +<p>지정한 매개 변수가 예상 범위를 벗어나면 setMinutes ()는 그에 따라 {{jsxref("Date")}} 객체의 날짜 정보를 업데이트하려고 시도합니다. 예를 들어 secondsValue에 100을 사용하면 분은 1 (minutesValue + 1)만큼 증가하고 40은 초 단위로 사용됩니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_setMinutes()">Using <code>setMinutes()</code></h3> + +<pre class="brush: js">var theBigDay = new Date(); +theBigDay.setMinutes(45); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.32', 'Date.prototype.setMinutes')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getMinutes()")}}</li> + <li>{{jsxref("Date.prototype.setUTCMinutes()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/setmonth/index.html b/files/ko/web/javascript/reference/global_objects/date/setmonth/index.html new file mode 100644 index 0000000000..bd954f83e9 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/setmonth/index.html @@ -0,0 +1,147 @@ +--- +title: Date.prototype.setMonth() +slug: Web/JavaScript/Reference/Global_Objects/Date/setMonth +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMonth +--- +<div>{{JSRef}}</div> + +<p>setMonth () 메서드는 현재 설정된 연도에 따라 지정된 날짜의 월을 설정합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setMonth(<var>monthValue</var>[, <var>dayValue</var>])</code></pre> + +<h3 id="Versions_prior_to_JavaScript_1.3">Versions prior to JavaScript 1.3</h3> + +<pre class="syntaxbox"><code><var>dateObj</var>.setMonth(<var>monthValue</var>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>monthValue</code></dt> + <dd>1 월에서 12 월까지의 월을 나타내는 0에서 11 사이의 정수입니다.</dd> + <dt><code>dayValue</code></dt> + <dd>선택 과목. 한 달의 날짜를 나타내는 1에서 31 사이의 정수입니다.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자입니다.</p> + +<h2 id="Description">Description</h2> + +<p>dayValue 매개 변수를 지정하지 않으면 {{jsxref("Date.prototype.getDate()", "getDate()")}} 메서드에서 반환 된 값이 사용됩니다.</p> + +<p>지정한 매개 변수가 예상 범위를 벗어나면 setMonth ()는 그에 따라 {{jsxref("Date")}} 객체의 날짜 정보를 업데이트하려고 시도합니다. 예를 들어 monthValue에 15를 사용하면 연도가 1 씩 증가하고 3은 월에 사용됩니다.</p> + +<p>현재 날짜가이 메서드의 동작에 영향을 미칩니다. 개념적으로 새로운 날짜를 반환하기 위해 매개 변수로 지정된 새 달의 첫 번째 날에 해당 월의 현재 날짜로 지정된 일 수를 추가합니다. 예를 들어 현재 값이 2016 년 8 월 31 일인 경우 setMonth를 1로 설정하면 2016 년 3 월 2 일에 반환됩니다. 이는 2016 년 2 월에 29 일이 있었기 때문입니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_setMonth()">Using <code>setMonth()</code></h3> + +<pre class="brush: js">var theBigDay = new Date(); +theBigDay.setMonth(6); + +//Watch out for end of month transitions +var endOfMonth = new Date(2016, 7, 31); +endOfMonth.setMonth(1); +console.log(endOfMonth); //Wed Mar 02 2016 00:00:00 + + +</pre> + +<p> </p> + +<p> </p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.38', 'Date.prototype.setMonth')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getMonth()")}}</li> + <li>{{jsxref("Date.prototype.setUTCMonth()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/setseconds/index.html b/files/ko/web/javascript/reference/global_objects/date/setseconds/index.html new file mode 100644 index 0000000000..3b3ea09ead --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/setseconds/index.html @@ -0,0 +1,134 @@ +--- +title: Date.prototype.setSeconds() +slug: Web/JavaScript/Reference/Global_Objects/Date/setSeconds +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setSeconds +--- +<div>{{JSRef}}</div> + +<p>setSeconds () 메서드는 현지 시간에 따라 지정된 날짜의 초를 설정합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setSeconds(<var>secondsValue</var>[, <var>msValue</var>])</code></pre> + +<h3 id="Versions_prior_to_JavaScript_1.3">Versions prior to JavaScript 1.3</h3> + +<pre class="syntaxbox"><code><var>dateObj</var>.setSeconds(<var>secondsValue</var>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>secondsValue</code></dt> + <dd>초를 나타내는 0에서 59 사이의 정수입니다.</dd> + <dt><code>msValue</code></dt> + <dd>선택 과목. 밀리 초를 나타내는 0에서 999 사이의 숫자입니다.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자입니다.</p> + +<h2 id="Description">Description</h2> + +<p>msValue 매개 변수를 지정하지 않으면 {{jsxref("Date.prototype.getMilliseconds()", "getMilliseconds()")}} 메서드에서 반환 된 값이 사용됩니다.</p> + +<p>지정한 매개 변수가 예상 범위를 벗어나면 setSeconds ()는 {{jsxref("Date")}} 객체의 날짜 정보를 그에 따라 업데이트하려고 시도합니다. 예를 들어, secondsValue에 100을 사용하면 {{jsxref("Date")}} 객체에 저장된 분이 1 씩 증가하고 40 초 동안 사용됩니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_setSeconds()">Using <code>setSeconds()</code></h3> + +<pre class="brush: js">var theBigDay = new Date(); +theBigDay.setSeconds(30); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.30', 'Date.prototype.setSeconds')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getSeconds()")}}</li> + <li>{{jsxref("Date.prototype.setUTCSeconds()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/settime/index.html b/files/ko/web/javascript/reference/global_objects/date/settime/index.html new file mode 100644 index 0000000000..e47d43720a --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/settime/index.html @@ -0,0 +1,127 @@ +--- +title: Date.prototype.setTime() +slug: Web/JavaScript/Reference/Global_Objects/Date/setTime +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setTime +--- +<div>{{JSRef}}</div> + +<p>setTime () 메서드는 {{jsxref ( "Date")}} 객체를 1970 년 1 월 1 일 00:00:00 UTC부터 밀리 초 단위로 나타내는 시간으로 설정합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setTime(<var>timeValue</var>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>timeValue</code></dt> + <dd>1970 년 1 월 1 일 00:00:00 UTC 이후의 밀리 초 수를 나타내는 정수입니다.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 (사실상 인수의 값) 사이의 밀리 초 수입니다.</p> + +<h2 id="Description">Description</h2> + +<p>setTime () 메서드를 사용하면 다른 {{jsxref ( "Date")}} 객체에 날짜와 시간을 지정할 수 있습니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_setTime()">Using <code>setTime()</code></h3> + +<pre class="brush: js">var theBigDay = new Date('July 1, 1999'); +var sameAsBigDay = new Date(); +sameAsBigDay.setTime(theBigDay.getTime()); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.27', 'Date.prototype.setTime')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.settime', 'Date.prototype.setTime')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.settime', 'Date.prototype.setTime')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getTime()")}}</li> + <li>{{jsxref("Date.prototype.setUTCHours()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/setutcdate/index.html b/files/ko/web/javascript/reference/global_objects/date/setutcdate/index.html new file mode 100644 index 0000000000..28c1ef3835 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/setutcdate/index.html @@ -0,0 +1,126 @@ +--- +title: Date.prototype.setUTCDate() +slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCDate +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCDate +--- +<div>{{JSRef}}</div> + +<p><strong>setUTCDate()</strong> 메서드는 표준시에 따라 지정된 날짜의 날짜를 설정합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setUTCDate(<var>dayValue</var>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>dayValue</code></dt> + <dd>한 달의 날짜를 나타내는 1에서 31 사이의 정수입니다.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자입니다.</p> + +<h2 id="Description">Description</h2> + +<p>지정한 매개 변수가 예상 범위를 벗어난 경우 setUTCDate ()는 그에 따라 {{jsxref ( "Date")}} 객체의 날짜 정보를 업데이트하려고 시도합니다. 예를 들어, dayValue에 40을 사용하고 {{jsxref ( "Date")}} 객체에 저장된 달이 6 월이면 일이 10으로 변경되고 월이 7 월로 증가합니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_setUTCDate()">Using <code>setUTCDate()</code></h3> + +<pre class="brush: js">var theBigDay = new Date(); +theBigDay.setUTCDate(20); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.37', 'Date.prototype.setUTCDate')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCDate()")}}</li> + <li>{{jsxref("Date.prototype.setDate()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/setutcfullyear/index.html b/files/ko/web/javascript/reference/global_objects/date/setutcfullyear/index.html new file mode 100644 index 0000000000..8410c68faa --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/setutcfullyear/index.html @@ -0,0 +1,132 @@ +--- +title: Date.prototype.setUTCFullYear() +slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear +--- +<div>{{JSRef}}</div> + +<p><strong>setUTCFullYear()</strong> 메서드는 지정된 날짜의 전체 연도를 표준시에 따라 설정합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setUTCFullYear(<var>yearValue</var>[, <var>monthValue</var>[, <var>dayValue</var>]])</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>yearValue</code></dt> + <dd>연도의 숫자 값을 지정하는 정수입니다 (예 : 1995).</dd> + <dt><code>monthValue</code></dt> + <dd>선택 과목. 1 월에서 12 월까지의 월을 나타내는 0에서 11 사이의 정수입니다.</dd> + <dt><code>dayValue</code></dt> + <dd>선택 과목. 한 달의 날짜를 나타내는 1 - 31 사이의 정수입니다. dayValue 매개 변수를 지정하는 경우 monthValue도 지정해야합니다.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자입니다.</p> + +<h2 id="Description">Description</h2> + +<p>monthValue 및 dayValue 매개 변수를 지정하지 않으면 {{jsxref ( "Date.prototype.getUTCMonth ()", "getUTCMonth()")}} 및 {{jsxref("Date.prototype.getUTCDate)","getUTCDate()")}} 메소드가 사용됩니다.</p> + +<p>지정한 매개 변수가 예상 범위를 벗어난 경우 setUTCFullYear ()는 다른 매개 변수와 {{jsxref("Date")}} 객체의 날짜 정보를 그에 따라 업데이트하려고 시도합니다. 예를 들어, monthValue에 15를 지정하면 연도가 1 (yearValue + 1)만큼 증가하고 3은 해당 월에 사용됩니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_setUTCFullYear()">Using <code>setUTCFullYear()</code></h3> + +<pre class="brush: js">var theBigDay = new Date(); +theBigDay.setUTCFullYear(1997); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.41', 'Date.prototype.setUTCFullYear')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setFullYear()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/setutchours/index.html b/files/ko/web/javascript/reference/global_objects/date/setutchours/index.html new file mode 100644 index 0000000000..dae2e10373 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/setutchours/index.html @@ -0,0 +1,134 @@ +--- +title: Date.prototype.setUTCHours() +slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCHours +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCHours +--- +<div>{{JSRef}}</div> + +<p>setUTCHours () 메서드는 표준시에 따라 지정된 날짜의 시간을 설정하고 1970 년 1 월 1 일 00:00:00 UTC 이후 업데이트 된 {{jsxref ( "Date")}}에 의해 표시되는 시간 (밀리 초)을 반환합니다. 예.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setUTCHours(<var>hoursValue</var>[, <var>minutesValue</var>[, <var>secondsValue</var>[, <var>msValue</var>]]])</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>hoursValue</code></dt> + <dd>시를 나타내는 0에서 23 사이의 정수입니다.</dd> + <dt><code>minutesValue</code></dt> + <dd>선택 과목. 분을 나타내는 0에서 59 사이의 정수입니다.</dd> + <dt><code>secondsValue</code></dt> + <dd>선택 과목. 초를 나타내는 0에서 59 사이의 정수입니다. secondsValue 매개 변수를 지정하면 minutesValue도 지정해야합니다.</dd> + <dt><code>msValue</code></dt> + <dd>선택 과목. 밀리 초를 나타내는 0에서 999 사이의 숫자입니다. msValue 매개 변수를 지정하는 경우 minutesValue 및 secondsValue도 지정해야합니다.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자입니다.</p> + +<h2 id="Description">Description</h2> + +<p>minutesValue, secondsValue 및 msValue 매개 변수를 지정하지 않으면 {{jsxref ( "Date.prototype.getUTCMinutes()", "getUTCMinutes()")}}, {{jsxref("Date.prototype .getUTCSeconds() ","getUTCSeconds()")}} 및 {{jsxref("Date.prototype.getUTCMilliseconds() ","getUTCMilliseconds()")}} 메소드가 사용됩니다.</p> + +<p>지정한 매개 변수가 예상 범위를 벗어나면 setUTCHours ()는 그에 따라 {{jsxref("Date")}} 객체의 날짜 정보를 업데이트하려고 시도합니다. 예를 들어 secondsValue에 100을 사용하면 분은 1 (minutesValue + 1)만큼 증가하고 40은 초 단위로 사용됩니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_setUTCHours()">Using <code>setUTCHours()</code></h3> + +<pre class="brush: js">var theBigDay = new Date(); +theBigDay.setUTCHours(8); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.35', 'Date.prototype.setUTCHours')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCHours()")}}</li> + <li>{{jsxref("Date.prototype.setHours()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html b/files/ko/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html new file mode 100644 index 0000000000..8f93cc7875 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html @@ -0,0 +1,126 @@ +--- +title: Date.prototype.setUTCMilliseconds() +slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds +--- +<div>{{JSRef}}</div> + +<p><strong>setUTCMilliseconds()</strong> 메서드는 표준시에 따라 지정된 날짜의 밀리 초를 설정합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setUTCMilliseconds(<var>millisecondsValue</var>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>millisecondsValue</code></dt> + <dd>밀리 초를 나타내는 0에서 999 사이의 숫자입니다.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자입니다.</p> + +<h2 id="Description">Description</h2> + +<p>지정한 매개 변수가 예상 범위를 벗어난 경우 setUTCMilliseconds ()는 그에 따라 {{jsxref ( "Date")}} 객체의 날짜 정보를 업데이트하려고 시도합니다. 예를 들어 millisecondsValue에 1100을 사용하면 {{jsxref ( "Date")}} 객체에 저장된 초가 1 씩 증가하고 100은 밀리 초 단위로 사용됩니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_setUTCMilliseconds()">Using <code>setUTCMilliseconds()</code></h3> + +<pre class="brush: js">var theBigDay = new Date(); +theBigDay.setUTCMilliseconds(500); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.29', 'Date.prototype.setUTCMilliseconds')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</li> + <li>{{jsxref("Date.prototype.setMilliseconds()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/setutcminutes/index.html b/files/ko/web/javascript/reference/global_objects/date/setutcminutes/index.html new file mode 100644 index 0000000000..c39b343935 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/setutcminutes/index.html @@ -0,0 +1,132 @@ +--- +title: Date.prototype.setUTCMinutes() +slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes +--- +<div>{{JSRef}}</div> + +<p><strong>setUTCMinutes()</strong> 메서드는 표준시에 따라 지정된 날짜의 분을 설정합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setUTCMinutes(<var>minutesValue</var>[, <var>secondsValue</var>[, <var>msValue</var>]])</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>minutesValue</code></dt> + <dd>분을 나타내는 0에서 59 사이의 정수입니다.</dd> + <dt><code>secondsValue</code></dt> + <dd>선택 과목. 초를 나타내는 0에서 59 사이의 정수입니다. secondsValue 매개 변수를 지정하면 minutesValue도 지정해야합니다.</dd> + <dt><code>msValue</code></dt> + <dd>선택 과목. 밀리 초를 나타내는 0에서 999 사이의 숫자입니다. msValue 매개 변수를 지정하는 경우 minutesValue 및 secondsValue도 지정해야합니다.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자입니다.</p> + +<h2 id="Description">Description</h2> + +<p>secondsValue 및 msValue 매개 변수를 지정하지 않으면 {{jsxref ( "Date.prototype.getUTCSeconds()", "getUTCSeconds()")}} 및 {{jsxref ("Date.prototype.getUTCMilliseconds","getUTCMilliseconds()")}} 메소드가 사용됩니다.</p> + +<p>지정한 매개 변수가 예상 범위를 벗어나면 setUTCMinutes ()는 그에 따라 {{jsxref("Date")}} 객체의 날짜 정보를 업데이트하려고 시도합니다. 예를 들어 secondsValue에 100을 사용하면 분은 1 (minutesValue + 1)만큼 증가하고 40은 초 단위로 사용됩니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_setUTCMinutes()">Using <code>setUTCMinutes()</code></h3> + +<pre class="brush: js">var theBigDay = new Date(); +theBigDay.setUTCMinutes(43); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.33', 'Date.prototype.setUTCMinutes')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCMinutes()")}}</li> + <li>{{jsxref("Date.prototype.setMinutes()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/setutcmonth/index.html b/files/ko/web/javascript/reference/global_objects/date/setutcmonth/index.html new file mode 100644 index 0000000000..266112be92 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/setutcmonth/index.html @@ -0,0 +1,130 @@ +--- +title: Date.prototype.setUTCMonth() +slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth +--- +<div>{{JSRef}}</div> + +<p>setUTCMonth () 메서드는 표준시에 따라 지정된 날짜의 월을 설정합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setUTCMonth(<var>monthValue</var>[, <var>dayValue</var>])</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>monthValue</code></dt> + <dd>1 월에서 12 월까지의 월을 나타내는 0에서 11 사이의 정수입니다.</dd> + <dt><code>dayValue</code></dt> + <dd>선택 과목. 한 달의 날짜를 나타내는 1에서 31 사이의 정수입니다.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자입니다.</p> + +<h2 id="Description">Description</h2> + +<p>dayValue 매개 변수를 지정하지 않으면 {{jsxref("Date.prototype.getUTCDate()", "getUTCDate()")}} 메서드에서 반환 된 값이 사용됩니다.</p> + +<p>지정한 매개 변수가 예상 범위를 벗어난 경우 setUTCMonth()는 그에 따라 {{jsxref("Date")}} 객체의 날짜 정보를 업데이트하려고 시도합니다. 예를 들어 monthValue에 15를 사용하면 연도가 1 씩 증가하고 3은 월에 사용됩니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_setUTCMonth()">Using <code>setUTCMonth()</code></h3> + +<pre class="brush: js">var theBigDay = new Date(); +theBigDay.setUTCMonth(11); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.39', 'Date.prototype.setUTCMonth')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCMonth()")}}</li> + <li>{{jsxref("Date.prototype.setMonth()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/setutcseconds/index.html b/files/ko/web/javascript/reference/global_objects/date/setutcseconds/index.html new file mode 100644 index 0000000000..f4d5609444 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/setutcseconds/index.html @@ -0,0 +1,130 @@ +--- +title: Date.prototype.setUTCSeconds() +slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds +--- +<div>{{JSRef}}</div> + +<p><strong>setUTCSeconds()</strong> 메서드는 표준시에 따라 지정된 날짜의 초를 설정합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setUTCSeconds(<var>secondsValue</var>[, <var>msValue</var>])</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>secondsValue</code></dt> + <dd>초를 나타내는 0에서 59 사이의 정수입니다.</dd> + <dt><code>msValue</code></dt> + <dd>선택 과목. 밀리 초를 나타내는 0에서 999 사이의 숫자입니다.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자입니다.</p> + +<h2 id="Description">Description</h2> + +<p>msValue 매개 변수를 지정하지 않으면 {{jsxref("Date.prototype.getUTCMilliseconds()", "getUTCMilliseconds()")}} 메서드에서 반환 된 값이 사용됩니다.</p> + +<p>지정한 매개 변수가 예상 범위를 벗어나면 setUTCSeconds()가 그에 따라 {{jsxref("Date")}} 객체의 날짜 정보를 업데이트하려고 시도합니다. 예를 들어, secondsValue에 100을 사용하면 {{jsxref("Date")}} 객체에 저장된 분이 1 씩 증가하고 40 초 동안 사용됩니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_setUTCSeconds()">Using <code>setUTCSeconds()</code></h3> + +<pre class="brush: js">var theBigDay = new Date(); +theBigDay.setUTCSeconds(20); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.31', 'Date.prototype.setUTCSeconds')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCSeconds()")}}</li> + <li>{{jsxref("Date.prototype.setSeconds()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/todatestring/index.html b/files/ko/web/javascript/reference/global_objects/date/todatestring/index.html new file mode 100644 index 0000000000..1ded363e99 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/todatestring/index.html @@ -0,0 +1,82 @@ +--- +title: Date.prototype.toDateString() +slug: Web/JavaScript/Reference/Global_Objects/Date/toDateString +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toDateString +--- +<div>{{JSRef}}</div> + +<p><code><strong>toDateString()</strong></code> 메서드는 미국 영어로 사람이 읽을 수있는 형태로 {{jsxref("Date")}} 객체의 날짜 부분을 반환합니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/date-todatestring.html")}}</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.toDateString()</code></pre> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 {{jsxref ( "Date")}} 객체의 날짜 부분을 사람이 읽을 수있는 형태로 미국 영어로 나타내는 문자열입니다.</p> + +<h2 id="설명">설명</h2> + +<p>{{jsxref ( "Date")}} 인스턴스는 특정 시점을 참조합니다. {{jsxref ( "Date.prototype.toString ()", "toString ()")}}을 호출하면 사람이 읽을 수있는 형식의 미국식 영어로 된 날짜가 반환됩니다. SpiderMonkey에서는 날짜 부분 (일, 월, 연도)과 시간 부분 (시, 분, 초 및 시간대)으로 구성됩니다. 때로는 날짜 부분의 문자열을 얻는 것이 바람직합니다. 이러한 일은 toDateString () 메서드를 사용하여 수행 할 수 있습니다.</p> + +<p>toDateString () 메서드는 ECMA-262를 구현하는 호환 엔진이 {{jsxref ( "Date.prototype.toString ()", "toString ()")}} 날짜 ")}} 객체를 사용할 수 있습니다. 형식은 구현에 따라 다르며 간단한 문자열 분할 방법은 여러 엔진에서 일관된 결과를 생성하지 않을 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="A_basic_usage_of_toDateString()">A basic usage of <code>toDateString()</code></h3> + +<pre class="brush: js">var d = new Date(1993, 6, 28, 14, 39, 7); + +console.log(d.toString()); // logs Wed Jul 28 1993 14:39:07 GMT-0600 (PDT) +console.log(d.toDateString()); // logs Wed Jul 28 1993 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.3', 'Date.prototype.toDateString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.todatestring', 'Date.prototype.toDateString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.todatestring', 'Date.prototype.toDateString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.Date.toDateString")}}</p> + +<div> </div> + +<div id="compat-mobile"> </div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li> + <li>{{jsxref("Date.prototype.toTimeString()")}}</li> + <li>{{jsxref("Date.prototype.toString()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/toisostring/index.html b/files/ko/web/javascript/reference/global_objects/date/toisostring/index.html new file mode 100644 index 0000000000..a9743f04d6 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/toisostring/index.html @@ -0,0 +1,107 @@ +--- +title: Date.prototype.toISOString() +slug: Web/JavaScript/Reference/Global_Objects/Date/toISOString +tags: + - Date + - JavaScript + - Method + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toISOString +--- +<div>{{JSRef}}</div> + +<p><strong><code>toISOString()</code></strong> 메서드는 단순화한 확장 ISO 형식(<a href="http://en.wikipedia.org/wiki/ISO_8601">ISO 8601</a>)의 문자열을 반환합니다. 반환값은 언제나 24글자 또는 27글자(각각 <strong><code>YYYY-MM-DDTHH:mm:ss.sssZ</code></strong> 또는 <strong><code>±YYYYYY-MM-DDTHH:mm:ss.sssZ</code></strong>)입니다. 시간대는 언제나 UTC이며 접미어 "<code>Z</code>"로 표현합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-toisostring.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.toISOString()</code></pre> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 날짜를 국제표준시 기준 <a href="http://en.wikipedia.org/wiki/ISO_8601">ISO 8601</a> 형식으로 표현한 문자열.</p> + +<h2 id="예제">예제</h2> + +<h3 id="toISOString()_사용하기"><code>toISOString()</code> 사용하기</h3> + +<p>아래 예제는 비표준 문자열의 분석을 포함하고 있어 비 Mozilla 브라우저에서는 올바르게 작동하지 않을 수 있습니다.</p> + +<pre class="brush: js">const today = new Date('05 October 2011 14:48 UTC'); + +console.log(today.toISOString()); // Returns 2011-10-05T14:48:00.000Z</pre> + +<h2 id="폴리필">폴리필</h2> + +<p><code>toISOString</code>은 ECMA-262 제5판에 표준으로 자리잡았습니다. 아직 지원하지 않는 환경에서는 다음 코드를 추가해 대체할 수 있습니다.</p> + +<pre class="brush: js">if (!Date.prototype.toISOString) { + (function() { + + function pad(number) { + if (number < 10) { + return '0' + number; + } + return number; + } + + Date.prototype.toISOString = function() { + return this.getUTCFullYear() + + '-' + pad(this.getUTCMonth() + 1) + + '-' + pad(this.getUTCDate()) + + 'T' + pad(this.getUTCHours()) + + ':' + pad(this.getUTCMinutes()) + + ':' + pad(this.getUTCSeconds()) + + '.' + (this.getUTCMilliseconds() / 1000).toFixed(3).slice(2, 5) + + 'Z'; + }; + + }()); +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.43', 'Date.prototype.toISOString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.8.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Date.toISOString")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li> + <li>{{jsxref("Date.prototype.toTimeString()")}}</li> + <li>{{jsxref("Date.prototype.toUTCString()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/tojson/index.html b/files/ko/web/javascript/reference/global_objects/date/tojson/index.html new file mode 100644 index 0000000000..5f069e3417 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/tojson/index.html @@ -0,0 +1,81 @@ +--- +title: Date.prototype.toJSON() +slug: Web/JavaScript/Reference/Global_Objects/Date/toJSON +tags: + - Date + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toJSON +--- +<div>{{JSRef}}</div> + +<p><strong><code>toJSON()</code></strong> 메서드는 {{jsxref("Date")}} 객체의 문자열 표현을 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-tojson.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.toJSON()</code></pre> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 날짜의 문자열 표현.</p> + +<h2 id="설명">설명</h2> + +<p>{{jsxref("Date")}} 인스턴스는 시간의 특정 지점을 가리킵니다. <code>toJSON()</code>을 호출하면 {{jsxref("Date.prototype.toISOString()", "toISOString()")}} 사용해 그 인스턴스가 가리키는 시간의 문자열 표현을 반환합니다. <code>toJSON()</code>은 <code>Date</code> 값을 {{Glossary("JSON")}}으로 직렬화할 때 유용하게 사용할 수 있도록 만들어졌습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="toJSON()_사용하기"><code>toJSON()</code> 사용하기</h3> + +<pre class="brush:js">const jsonDate = (new Date()).toJSON(); +const backToDate = new Date(jsonDate); + +console.log(jsonDate); //2015-10-26T07:46:36.611Z +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.44', 'Date.prototype.toJSON')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Date.toJSON")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li> + <li>{{jsxref("Date.prototype.toTimeString()")}}</li> + <li>{{jsxref("Date.prototype.toUTCString()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/tostring/index.html b/files/ko/web/javascript/reference/global_objects/date/tostring/index.html new file mode 100644 index 0000000000..5adaaf4f84 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/tostring/index.html @@ -0,0 +1,125 @@ +--- +title: Date.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Date/toString +tags: + - Date + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toString +--- +<div>{{JSRef}}</div> + +<p> <strong><code>toString()</code></strong> 메서드는 {{jsxref("Date")}} 객체의 시간을 문자열로 반환합니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/date-tostring.html")}}</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>dateObj</var>.toString()</pre> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 날짜를 나타내는 문자열.</p> + +<h2 id="설명">설명</h2> + +<p>{{jsxref("Date")}} 객체는 <code>toString()</code> 메서드를 {{jsxref("Object.prototype")}}이 아닌 {{jsxref("Date.prototype")}}에서 상속받습니다. <code>Date.prototype.toString()</code>의 반환값은 ECMA-262에 명시되어있으며 다음과 같이 요약할 수 있습니다.</p> + +<ul> + <li>요일: 세 글자 영어 요일명. 예: "Sat"</li> + <li>공백</li> + <li>월: 세 글자 영어 월 이름. 예: "Sep"</li> + <li>공백</li> + <li>일: 두 글자 숫자. 예: "01"</li> + <li>공백</li> + <li>연: 네 글자 숫자. 예: "2018"</li> + <li>공백</li> + <li>시: 두 글자 숫자. 예: "14"</li> + <li>콜론</li> + <li>분: 두 글자 숫자. 예: "53"</li> + <li>콜론</li> + <li>초: 두 글자 숫자. 예: "26"</li> + <li>공백</li> + <li>문자열 "GMT"</li> + <li>시간대 차이의 부호. + <ul> + <li>0 이상일 경우 "+"</li> + <li>0 미만일 경우 "-"</li> + </ul> + </li> + <li>두 글자 숫자로 표현한 시 차이. 예: "14"</li> + <li>두 글자 숫자로 표현한 분 차이. 예: "00"</li> + <li>선택사항: 다음으로 구성한 시간대의 이름. + <ul> + <li>공백</li> + <li>여는 소괄호</li> + <li>구현마다 다를 수 있는 시간대 이름. 약어와 전체 이름 둘 다 가능. 예: "Korea Standard Time", "한국 표준시" 또는 "KST"</li> + <li>닫는 소괄호</li> + </ul> + </li> +</ul> + +<p>예: "Sat Sep 01 2018 14:53:26 GMT+0900 (KST)"</p> + +<p>ECMAScript 2018(제9판) 전까지 <code>toString()</code>의 반환 형식은 구현에 따라 다를 수 있었습니다. 따라서 특정 형식에 의존하지 않아야 합니다.</p> + +<p><code>toString()</code> 메서드는 날짜를 문자열로 표현해야 할 때 자동으로 쓰입니다. <code>console.log(new Date())</code>와 <code>const today = 'Today is ' + new Date()</code> 등의 경우를 예로 들 수 있습니다.</p> + +<p><code>toString()</code>은 제네릭 메서드로 <code>this</code>의 값이 {{jsxref("Date")}}일 필요는 없습니다. 그러나 내부적으로 <code>[[TimeValue]]</code> 속성이 필요한데, 이는 JavaScript로는 설정할 수 없어 결국 사용이 <code>Date</code> 인스턴스로 제한됩니다. <code>Date</code> 외의 다른 객체에서 호출하면 {{jsxref("TypeError")}}가 발생합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="toString()_사용"><code>toString()</code> 사용</h3> + +<pre class="brush: js"><code>var x = new Date(); +var myVar = x.toString(); // assigns a string value to myVar in the same format as: + // Mon Sep 08 1998 14:36:22 GMT+0900 (KST)</code></pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.2', 'Date.prototype.toLocaleTimeString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.tostring', 'Date.prototype.toString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.tostring', 'Date.prototype.toString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Date.toString")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> + <li>{{jsxref("Date.prototype.toDateString()")}}</li> + <li>{{jsxref("Date.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Date.prototype.toTimeString()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/utc/index.html b/files/ko/web/javascript/reference/global_objects/date/utc/index.html new file mode 100644 index 0000000000..f340c4d44a --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/utc/index.html @@ -0,0 +1,139 @@ +--- +title: Date.UTC() +slug: Web/JavaScript/Reference/Global_Objects/Date/UTC +tags: + - Date + - JavaScript + - Method + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/UTC +--- +<div>{{JSRef}}</div> + +<p><strong><code>Date.UTC()</code></strong> 메서드는 {{jsxref("Date")}} 생성자와 비슷한 매개변수를 받지만, 모두 UTC로 취급합니다. 반환 값은 1970년 1월 1일 00:00:00 UTC부터 매개변수가 나타내는 시간의 차이를 밀리초로 나타낸 수입니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-utc.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<p><strong>ECMAScript 2017 이상:</strong></p> + +<pre class="syntaxbox">Date.UTC(<var>year[</var>, <var>month</var>[, <var>day</var>[, <var>hour</var>[, <var>minute</var>[, <var>second</var>[, <var>millisecond</var>]]]]])</pre> + +<p><strong>ECMAScript 2016 이하:</strong> (<code>month</code> 필수)</p> + +<pre class="syntaxbox">Date.UTC(<var>year</var>, <var>month</var>[, <var>day</var>[, <var>hour</var>[, <var>minute</var>[, <var>second</var>[, <var>millisecond</var>]]]]])</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>year</code></dt> + <dd>네 자리 연도.</dd> + <dt><code>month</code></dt> + <dd>월을 나타내는 0(1월)에서 11(12월) 사이의 정수. ECMAScript 2016까지는 필수 매개변수였으나, ECMA2017부터는 선택사항입니다.</dd> + <dt><code>day</code> {{optional_inline}}</dt> + <dd>일을 나타내는 1에서 31 사이의 정수. 기본값은 1입니다.</dd> + <dt><code>hour</code> {{optional_inline}}</dt> + <dd>시를 나타내는 0에서 23 사이의 정수. 기본값은 0입니다.</dd> + <dt><code>minute</code> {{optional_inline}}</dt> + <dd>분을 나타내는 0에서 59 사이의 정수. 기본값은 0입니다.</dd> + <dt><code>second</code> {{optional_inline}}</dt> + <dd>초를 나타내는 0에서 59 사이의 정수. 기본값은 0입니다.</dd> + <dt><code>millisecond</code> {{optional_inline}}</dt> + <dd>밀리초를 나타내는 0에서 999 사이의 정수. 기본값은 0입니다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 날짜와 1970년 1월 1일 00:00:00 UTC의 차이를 밀리초로 나타낸 숫자.</p> + +<h2 id="설명">설명</h2> + +<p><code>Date.UTC()</code>는 날짜 및 시간을 받고, 1970년 1월 1일 00:00:00 UTC와의 차이를 밀리초 수로 나타내 반환합니다.</p> + +<p>0에서 99 사이의 연도는 20세기<code>(1900 + year)</code>로 취급합니다. 즉 95를 입력할 경우 1995로 취급합니다.</p> + +<p><code>Date.UTC()</code> 메서드는 {{jsxref("Date")}} 생성자와 다른 점이 두 가지 있습니다.</p> + +<ul> + <li><code>Date.UTC()</code>는 현지 시간 대신 국제 표준시(UTC)를 사용합니다.</li> + <li><code>Date.UTC()</code>는 {{jsxref("Date")}} 객체를 만드는 대신 시간 값을 숫자로 반환합니다.</li> +</ul> + +<p>주어진 매개변수가 통상적인 범위를 벗어나면 <code>Date.UTC()</code> 메서드는 다른 매개변수 값을 조절해 계산합니다. 예를 들어, 월 값으로 15를 사용하면 연도가 1 증가(<code>year + 1</code>)하고, 월 계산에는 3을 대신 사용합니다.</p> + +<p><code>Date.UTC()</code>는 {{jsxref("Date")}}의 정적 메서드이므로, 사용자가 생성한 {{jsxref("Date")}} 인스턴스에서 호출하지 않고 <code>Date.UTC()</code> 형태로 사용합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Date.UTC()_사용하기"><code>Date.UTC()</code> 사용하기</h3> + +<p>다음 예제는 현지 시간 대신 UTC를 사용하여 {{jsxref("Date")}} 객체를 생성합니다.</p> + +<pre class="brush:js">var utcDate = new Date(Date.UTC(96, 11, 1, 0, 0, 0)); +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.utc', 'Date.UTC')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.utc', 'Date.UTC')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.4.3', 'Date.UTC')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Date.UTC")}}</p> + +<h2 id="호환성_참고사항">호환성 참고사항</h2> + +<h3 id="매개변수를_두_개_미만_제공하는_경우">매개변수를 두 개 미만 제공하는 경우</h3> + +<p>Date.UTC()가 두 개 미만의 매개변수를 받은 경우, ECMAScript 2017은 {{jsxref("NaN")}}을 반환할 것을 요구합니다. 이를 지원하지 않던 엔진은 업데이트됐습니다. ({{bug(1050755)}}, <a href="https://github.com/tc39/ecma262/pull/642">ecma-262 #642</a>를 참고하세요)</p> + +<pre class="brush: js">Date.UTC(); +Date.UTC(1); + +// Safari: NaN +// Chrome/Opera/V8: NaN + +// Firefox <54: non-NaN +// Firefox 54+: NaN + +// IE: non-NaN +// Edge: NaN</pre> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Date.parse()")}}</li> + <li>{{jsxref("Date")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/date/valueof/index.html b/files/ko/web/javascript/reference/global_objects/date/valueof/index.html new file mode 100644 index 0000000000..778321f74e --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/date/valueof/index.html @@ -0,0 +1,79 @@ +--- +title: Date.prototype.valueOf() +slug: Web/JavaScript/Reference/Global_Objects/Date/valueOf +translation_of: Web/JavaScript/Reference/Global_Objects/Date/valueOf +--- +<div>{{JSRef}}</div> + +<p><strong><code>valueOf()</code></strong> 함수는 {{jsxref("Date")}} 객체의 원시값을 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-valueof.html")}}</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.valueOf()</code></pre> + +<h3 id="Return_value">Return value</h3> + +<p>반환되는 milliseconds 값은 1 January 1970 00:00:00 UTC 와 주어진 일시 사이의 값입니다.</p> + +<h2 id="Description">Description</h2> + +<p><code>valueOf()</code> 함수는 01 January, 1970 UTC 이후의 milliseconds 단위의 자연수 타입인 {{jsxref("Date")}} 객체의 원시값을 반환합니다.</p> + +<p>이 함수는 {{jsxref("Date.prototype.getTime()")}} 함수와 동일한 결과값을 반환합니다.</p> + +<p>이 함수는 사용자 코드에 명시된 것이 아닌, JavaScript 자체에 포함되어 있습니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_valueOf()">Using <code>valueOf()</code></h3> + +<pre class="brush: js">var x = new Date(56, 6, 17); +var myVar = x.valueOf(); // myVar에 -424713600000를 할당합니다. +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>최초 정의. JavaScript 1.1에서 구현</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.8', 'Date.prototype.valueOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Date.valueOf")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Object.prototype.valueOf()")}}</li> + <li>{{jsxref("Date.prototype.getTime()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/decodeuri/index.html b/files/ko/web/javascript/reference/global_objects/decodeuri/index.html new file mode 100644 index 0000000000..bb29400506 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/decodeuri/index.html @@ -0,0 +1,101 @@ +--- +title: decodeURI() +slug: Web/JavaScript/Reference/Global_Objects/decodeURI +tags: + - 자바스크립트 +translation_of: Web/JavaScript/Reference/Global_Objects/decodeURI +--- +<div>{{jsSidebar("Objects")}}</div> + +<p><code><strong>decodeURI()</strong></code> 함수는 {{jsxref("encodeURI")}}이나 비슷한 루틴으로 사전에 만들어진 URI(Uniform Resource Identifier, 인터넷식별자) 를 해독합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-decodeuri.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code>decodeURI(<em>encodedURI</em>)</code></pre> + +<h3 id="파라미터">파라미터</h3> + +<dl> + <dt><code>encodedURI</code></dt> + <dd>완전하고 암호화된 인터넷식별자(URI)</dd> +</dl> + +<h3 id="리턴_값">리턴 값</h3> + +<p>주어진 암호화된 URI의 암호화되지 않은 버전을 나타내는 새 문자열을 반환합니다.</p> + +<h3 id="예외">예외</h3> + +<p><code><em>encodedURI</em></code>에 유효하지 않은 문자열이 포함된 경우 {{jsxref("URIError")}} ("malformed URI sequence") 예외를 던집니다.</p> + +<h2 id="설명">설명</h2> + +<p><span id="result_box" lang="ko"><span>암호화된 URI의 각 이스케이프 시퀀스(확장문자열)를 자신을 나타내는 문자로 바꾸지만 {{jsxref ( "encodeURI")}}에서 도입할 수 없었던 이스케이프 시퀀스는 해독하지 않습니다.</span> <span>"#"문자는 이스케이프 시퀀스에서 해독되지 않습니다.</span></span></p> + +<h2 id="예제">예제</h2> + +<h3 id="Decoding_a_Cyrillic_URL">Decoding a Cyrillic URL</h3> + +<pre class="brush: js">decodeURI('https://developer.mozilla.org/ru/docs/JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B'); +// "https://developer.mozilla.org/ru/docs/JavaScript_шеллы" +</pre> + +<h3 id="Catching_errors">Catching errors</h3> + +<pre>try { + var a = decodeURI('%E0%A4%A'); +} catch(e) { + console.error(e); +} + +// URIError: malformed URI sequence</pre> + +<h2 id="사양">사양</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.3.1', 'decodeURI')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-decodeuri-encodeduri', 'decodeURI')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-decodeuri-encodeduri', 'decodeURI')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.decodeURI")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("decodeURIComponent")}}</li> + <li>{{jsxref("encodeURI")}}</li> + <li>{{jsxref("encodeURIComponent")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/decodeuricomponent/index.html b/files/ko/web/javascript/reference/global_objects/decodeuricomponent/index.html new file mode 100644 index 0000000000..d263252cbf --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/decodeuricomponent/index.html @@ -0,0 +1,92 @@ +--- +title: decodeURIComponent() +slug: Web/JavaScript/Reference/Global_Objects/decodeURIComponent +tags: + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/decodeURIComponent +--- +<div>{{jsSidebar("Objects")}}</div> + +<p><code><strong>decodeURIComponent()</strong></code> 함수는 {{jsxref("encodeURIComponent")}} 나 비슷한 방법으로 생성된 Uniform Resource Identifier(URI) 컴포넌트를 해독합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-decodeuricomponent.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code>decodeURIComponent(<em>encodedURI</em>)</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>encodedURI</code></dt> + <dd>암호화된 Uniform Resource Identifier(URI) 컴포넌트.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>이스케이프되지 않은 특정 글자들 중 새로운 문자열.</p> + +<h3 id="예외">예외</h3> + +<p><span id="result_box" lang="ko"><span>잘못 사용되었을 경우 {{jsxref ( "URIError")}} ( "</span></span> malformed URI sequence <span lang="ko"><span>") 예외를 발생시킵니다.</span></span></p> + +<h2 id="설명">설명</h2> + +<p>암호화된 URI 컴포넌트에서 각각의 이스케이프 시퀀스(확장 문자열)를 자신을 나타내는 문자로 바꿉니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="키릴문자_URL_컴포넌트의_복호화">키릴문자 URL 컴포넌트의 복호화</h3> + +<pre class="brush: js">decodeURIComponent("JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B"); +// "JavaScript_шеллы" +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.3.2', 'decodeURIComponent')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.decodeURIComponent")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("decodeURI")}}</li> + <li>{{jsxref("encodeURI")}}</li> + <li>{{jsxref("encodeURIComponent")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/encodeuri/index.html b/files/ko/web/javascript/reference/global_objects/encodeuri/index.html new file mode 100644 index 0000000000..c5dff2ed37 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/encodeuri/index.html @@ -0,0 +1,111 @@ +--- +title: encodeURI() +slug: Web/JavaScript/Reference/Global_Objects/encodeURI +tags: + - JavaScript + - Reference + - URI + - URL +translation_of: Web/JavaScript/Reference/Global_Objects/encodeURI +--- +<div>{{jsSidebar("Objects")}}</div> + +<p><span class="seoSummary"><code><strong>encodeURI()</strong></code> 함수는 {{glossary("URI")}}의 특정한 문자를 UTF-8로 인코딩해 하나, 둘, 셋, 혹은 네 개의 연속된 이스케이프 문자로 나타냅니다.</span> (두 개의 대리 문자로 이루어진 문자만 이스케이프 문자 네 개로 변환됩니다.)</p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-encodeuri.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code>encodeURI(<em>URI</em>)</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>URI</code></dt> + <dd>완전한 URI.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 문자열을 URI로서 인코딩한 새로운 문자열.</p> + +<h2 id="설명">설명</h2> + +<p><span id="result_box" lang="ko"><span><code>encodeURI()</code> 함수는 URI에서 특별한 뜻을 가진 문자(예약 문자)는 인코딩 하지 않습니다. 아래 예제는 "URI 도식"이 포함할 수 있는 모든 부분을 담고 있습니다. 일부 문자가 어떤 방식으로 특별한 의미를 주입하고 있는지 잘 살펴보세요.</span></span></p> + +<pre>http://username:password@www.example.com:80/path/to/file.php?foo=316&bar=this+has+spaces#anchor</pre> + +<p><span id="result_box" lang="ko"><span>따라서 <code>encodeURI()</code>는 완전한 URI를 형성하는데 필요한 문자는 인코딩 <strong>하지 않습니다</strong>.</span> <span>또한, 예약된 목적을 가지지는 않지만 URI가 그대로 포함할 수 있는 몇 가지 문자("비예약 표식")도 인코딩 <strong>하지 않습니다</strong>. (<a href="https://www.ietf.org/rfc/rfc2396.txt">RFC 2396</a>을 참고하세요)</span></span></p> + +<p><code>encodeURI()</code> 는 다음 문자를 <strong>제외</strong>한 문자를 이스케이프 합니다.</p> + +<pre><strong><code>이스케이프 하지 않는 문자</code></strong>: + + A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #<code> +</code> +</pre> + +<p><code>encodeURI()</code>와 {{jsxref("encodeURIComponent", "encodeURIComponent()")}}의 차이는 다음과 같습니다.</p> + +<pre class="brush: js">var set1 = ";,/?:@&=+$#"; // 예약 문자 +var set2 = "-_.!~*'()"; // 비예약 표식 +var set3 = "ABC abc 123"; // 알파벳 및 숫자, 공백 + +console.log(encodeURI(set1)); // ;,/?:@&=+$# +console.log(encodeURI(set2)); // -_.!~*'() +console.log(encodeURI(set3)); // ABC%20abc%20123 (공백은 %20으로 인코딩) + +console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24%23 +console.log(encodeURIComponent(set2)); // -_.!~*'() +console.log(encodeURIComponent(set3)); // ABC%20abc%20123 (공백은 %20으로 인코딩) + +</pre> + +<p><code>encodeURI()</code> 혼자서는 {{domxref("XMLHttpRequest")}} 등이 사용할, 적합한 HTTP {{httpmethod("GET")}}과 {{httpmethod("POST")}} 요청을 구성할 수 없습니다. <code>GET</code>과 <code>POST</code>에서 특별한 문자로 취급하는 <code>"&"</code>, <code>"+"</code>, <code>"="</code>를 인코딩 하지 않기 때문입니다. 그러나 <code>encodeURIComponent()</code>는 저 세 문자도 인코딩 대상에 포함합니다.</p> + +<p><span id="result_box" lang="ko"><span>상위-하위 쌍을 이루지 않은 단일 대리 문자를 인코딩 시도하면 {{jsxref("URIError")}}가 발생합니다.</span></span></p> + +<pre class="brush: js">// high-low pair ok +console.log(encodeURIComponent('\uD800\uDFFF')); + +// lone high surrogate throws "URIError: malformed URI sequence" +console.log(encodeURIComponent('\uD800')); + +// lone low surrogate throws "URIError: malformed URI sequence" +console.log(encodeURIComponent('\uDFFF')); +</pre> + +<p>또한, URL의 보다 최신 RFC인 <a href="http://tools.ietf.org/html/rfc3986">RFC3986</a>을 따르고자 한다면, 대괄호가 {{glossary("IPv6")}} 지원을 위해 추가로 예약됨에 따라 <code>encodeURI()</code>가 인코딩하지 않으므로 URL을 생성할 때 주의해야 합니다. 다음 예시 코드가 도움이 될 수도 있습니다.</p> + +<pre class="brush: js">function fixedEncodeURI(str) { + return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']'); +}</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-encodeuri-uri', 'encodeURI')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.encodeURI")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("decodeURI")}}</li> + <li>{{jsxref("encodeURIComponent")}}</li> + <li>{{jsxref("decodeURIComponent")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/encodeuricomponent/index.html b/files/ko/web/javascript/reference/global_objects/encodeuricomponent/index.html new file mode 100644 index 0000000000..191f66b198 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/encodeuricomponent/index.html @@ -0,0 +1,148 @@ +--- +title: encodeURIComponent() +slug: Web/JavaScript/Reference/Global_Objects/encodeURIComponent +tags: + - JavaScript + - Reference + - URI +translation_of: Web/JavaScript/Reference/Global_Objects/encodeURIComponent +--- +<div>{{jsSidebar("Objects")}}</div> + +<p><span class="seoSummary"><code><strong>encodeURIComponent()</strong></code> 함수는 {{glossary("URI")}}의 특정한 문자를 UTF-8로 인코딩해 하나, 둘, 셋, 혹은 네 개의 연속된 이스케이프 문자로 나타냅니다.</span> (두 개의 대리 문자로 이루어진 문자만 이스케이프 문자 네 개로 변환됩니다.)</p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-encodeuricomponent.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">encodeURIComponent(<em>str</em>);</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>str</code></dt> + <dd>URI 구성요소.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 문자열을 URI 구성요소로서 인코딩한 새로운 문자열.</p> + +<h2 id="설명">설명</h2> + +<p><code>encodeURIComponent()</code>는 다음 문자를 <strong>제외</strong>한 문자를 이스케이프 합니다.</p> + +<pre><strong><code>N</code>ot Escaped</strong>: + + A-Z a-z 0-9 <code>-</code> <code>_</code> <code>.</code> <code>!</code> <code>~</code> <code>*</code> <code>'</code> <code>(</code> <code>) +</code> +</pre> + +<p><code>encodeURIComponent()</code>와 {{jsxref("encodeURI", "encodeURI()")}}의 차이는 다음과 같습니다.</p> + +<pre class="brush: js">var set1 = ";,/?:@&=+$"; // Reserved Characters +var set2 = "-_.!~*'()"; // Unescaped Characters +var set3 = "#"; // Number Sign +var set4 = "ABC abc 123"; // Alphanumeric Characters + Space + +console.log(encodeURI(set1)); // ;,/?:@&=+$ +console.log(encodeURI(set2)); // -_.!~*'() +console.log(encodeURI(set3)); // # +console.log(encodeURI(set4)); // ABC%20abc%20123 (the space gets encoded as %20) + +console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24 +console.log(encodeURIComponent(set2)); // -_.!~*'() +console.log(encodeURIComponent(set3)); // %23 +console.log(encodeURIComponent(set4)); // ABC%20abc%20123 (the space gets encoded as %20) +</pre> + +<p><span id="result_box" lang="ko"><span>상위-하위 쌍을 이루지 않은 단일 대리 문자를 인코딩 시도하면 {{jsxref("URIError")}}가 발생합니다.</span></span></p> + +<pre class="brush: js">// high-low pair ok +console.log(encodeURIComponent('\uD800\uDFFF')); + +// lone high surrogate throws "URIError: malformed URI sequence" +console.log(encodeURIComponent('\uD800')); + +// lone low surrogate throws "URIError: malformed URI sequence" +console.log(encodeURIComponent('\uDFFF')); +</pre> + +<p><code>encodeURIComponent()</code>를 사용해, 서버에 {{HTTPMethod("POST")}}로 요청할 양식 필드를 인코딩 하세요. 입력 중 의도치 않게 생성될 수 있는 HTML 특수 개체 등의 <code>"&"</code> 문자를 처리할 수 있습니다.</p> + +<p>예를 들어 사용자가 입력한 <code>"Jack & Jill"</code>은 <code>"Jack &amp; Jill"</code>로 인코딩 됩니다. <code>encodeURIComponent()</code>를 사용하지 않았다면 서버가 앰퍼샌드를 새로운 필드의 시작으로 인식할 수 있으므로 데이터의 무결성을 해칠 수 있습니다.</p> + +<p><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#application/x-www-form-urlencoded-encoding-algorithm"><code>application/x-www-form-urlencoded</code></a>의 스페이스는 <code>"+"</code>로 치환되어야 하므로, <code>encodeURIComponent()</code>의 결과에 추가로 <code>"%20"</code>을 <code>"+"</code>로 바꾸세요.</p> + +<p>비록 URI의 구분자로서 형식화된 사용처는 없지만, 그럼에도 <code>!</code>, <code>'</code>, <code>(</code>, <code>)</code>, <code>*</code>을 추가로 예약하는 <a class="external" href="http://tools.ietf.org/html/rfc3986">RFC 3986</a>을 엄격하게 따르려면 아래의 코드를 사용해보세요.</p> + +<pre class="brush: js">function fixedEncodeURIComponent(str) { + return encodeURIComponent(str).replace(/[!'()*]/g, function(c) { + return '%' + c.charCodeAt(0).toString(16); + }); +} +</pre> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 UTF-8 {{HTTPHeader("Content-Disposition")}} 과{{HTTPHeader("Link")}} 서버 응답 헤더에서 (UTF-8 파일 이름 등의 이유로) 필요한 문자 인코딩 방법을 보입니다.</p> + +<pre class="brush: js">var fileName = 'my file(2).txt'; +var header = "Content-Disposition: attachment; filename*=UTF-8''" + + encodeRFC5987ValueChars(fileName); + +console.log(header); +// logs "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt" + + +function encodeRFC5987ValueChars(str) { + return encodeURIComponent(str). + // Note that although RFC3986 reserves "!", RFC5987 does not, + // so we do not need to escape it + replace(/['()]/g, escape). // i.e., %27 %28 %29 + replace(/\*/g, '%2A'). + // The following are not required for percent-encoding per RFC5987, + // so we can allow for a little better readability over the wire: |`^ + replace(/%(?:7C|60|5E)/g, unescape); +} + +// here is an alternative to the above function +function encodeRFC5987ValueChars2(str) { + return encodeURIComponent(str). + // Note that although RFC3986 reserves "!", RFC5987 does not, + // so we do not need to escape it + replace(/['()*]/g, c => "%" + c.charCodeAt(0).toString(16)). // i.e., %27 %28 %29 %2a (Note that valid encoding of "*" is %2A + // which necessitates calling toUpperCase() to properly encode) + // The following are not required for percent-encoding per RFC5987, + // so we can allow for a little better readability over the wire: |`^ + replace(/%(7C|60|5E)/g, (str, hex) => String.fromCharCode(parseInt(hex, 16))); +}</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.encodeURIComponent")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("decodeURI")}}</li> + <li>{{jsxref("encodeURI")}}</li> + <li>{{jsxref("decodeURIComponent")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/error/index.html b/files/ko/web/javascript/reference/global_objects/error/index.html new file mode 100644 index 0000000000..986cb5afa0 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/error/index.html @@ -0,0 +1,240 @@ +--- +title: Error +slug: Web/JavaScript/Reference/Global_Objects/Error +tags: + - Error + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Error +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><strong><code>Error</code></strong> 생성자는 오류 객체를 생성합니다.</span> <code>Error</code> 객체의 인스턴스는 런타임 오류가 발생했을 때 던져집니다. <code>Error</code> 객체를 사용자 지정 예외의 기반 객체로 사용할 수도 있습니다.</p> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="syntaxbox">new Error([<em>message</em>[, <em>fileName</em>[, <em>lineNumber</em>]]])</pre> + +<h3 id="Parameters" name="Parameters">매개변수</h3> + +<dl> + <dt><code>message</code> {{optional_inline}}</dt> + <dd>사람이 읽을 수 있는, 오류에 대한 설명.</dd> + <dt><code>fileName</code> {{optional_inline}} {{non-standard_inline}}</dt> + <dd>생성할 <code>Error</code> 객체의 <code>fileName</code> 속성 값. 기본값은 <code>Error</code> 생성자를 호출한 코드를 포함하고 있는 파일의 이름입니다.</dd> + <dt><code>lineNumber</code> {{optional_inline}} {{non-standard_inline}}</dt> + <dd>생성할 <code>Error</code> 객체의 <code>lineNumber</code> 속성 값. 기본값은 <code>Error</code> 생성자 호출을 포함한 줄 번호입니다.</dd> +</dl> + +<h2 id="Description" name="Description">설명</h2> + +<p>런타임 오류는 새로운 <code>Error</code> 객체를 생성하고 던집니다.</p> + +<p>이 페이지는 <code>Error</code> 오브젝트 자체와, 생성자 함수로서의 사용처를 다룹니다. <code>Error</code> 인스턴스가 상속하는 속성과 메서드는 {{jsxref("Error.prototype")}}을 참고하세요.</p> + +<h3 id="함수로_사용">함수로 사용</h3> + +<p><code>Error</code>를 {{jsxref("Operators/new", "new")}} 없이 함수로 사용하면 <code>Error</code> 객체를 반환합니다. 즉 <code>Error</code>를 직접 호출해도 인스턴스를 만드는 것과 동일한 결과를 얻을 수 있습니다.</p> + +<pre class="brush: js">// 이렇게 호출하는 것과 +const x = Error('I was created using a function call!'); +// 이렇게 사용하는게 동일 +const y = new Error('I was constructed via the "new" keyword!'); +</pre> + +<h3 id="Error_types" name="Error_types">오류 유형</h3> + +<p>JavaScript에는 일반적인 <code>Error</code> 생성자 외에도 7개의 중요 오류 생성자가 존재합니다. 클라이언트측 예외에 대해서는 <a href="/ko/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#예외처리문">제어 흐름과 에러 처리</a>를 참고하세요.</p> + +<dl> + <dt>{{jsxref("EvalError")}}</dt> + <dd>전역 함수 {{jsxref("eval", "eval()")}}에서 발생하는 오류의 인스턴스를 생성합니다.</dd> + <dt>{{jsxref("InternalError")}} {{non-standard_inline}}</dt> + <dd>JavaScript 엔진의 내부에서 오류가 발생했음을 나타내는 오류 인스턴스를 생성합니다.</dd> + <dt>{{jsxref("RangeError")}}</dt> + <dd>숫자 변수나 매개변수가 유효한 범위를 벗어났음을 나타내는 오류 인스턴스를 생성합니다.</dd> + <dt>{{jsxref("ReferenceError")}}</dt> + <dd>잘못된 참조를 했음을 나타내는 오류 인스턴스를 생성합니다.</dd> + <dt>{{jsxref("SyntaxError")}}</dt> + <dd>{{jsxref("eval", "eval()")}}이 코드를 분석하는 중 잘못된 구문을 만났음을 나타내는 오류 인스턴스를 생성합니다.</dd> + <dt>{{jsxref("TypeError")}}</dt> + <dd>변수나 매개변수가 유효한 자료형이 아님을 나타내는 오류 인스턴스를 생성합니다.</dd> + <dt>{{jsxref("URIError")}}</dt> + <dd>{{jsxref("encodeURI", "encodeURI()")}}나 {{jsxref("decodeURI", "decodeURl()")}} 함수에 부적절한 매개변수를 제공했을 때 발생하는 오류의 인스턴스를 생성합니다.</dd> +</dl> + +<h2 id="Properties" name="Properties">속성</h2> + +<dl> + <dt>{{jsxref("Error.prototype")}}</dt> + <dd><code>Error</code> 인스턴스에 속성을 추가할 수 있습니다.</dd> +</dl> + +<h2 id="Methods" name="Methods">메서드</h2> + +<p>전역 <code>Error</code> 객체는 자신의 메서드를 가지지 않습니다. 그러나 프로토타입 체인을 통해 일부 메서드를 상속받습니다.</p> + +<h2 id="Error_instances" name="Error_instances"><code>Error</code> 인스턴스</h2> + +<div>{{page('ko/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype', '설명')}}</div> + +<h3 id="속성">속성</h3> + +<div>{{page('ko/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype', '속성')}}</div> + +<h3 id="메서드">메서드</h3> + +<div>{{page('ko/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype', '메서드')}}</div> + +<h2 id="Examples" name="Examples">예제</h2> + +<h3 id="Example:_Throwing_a_generic_error" name="Example:_Throwing_a_generic_error">일반적인 오류 던지기</h3> + +<p><code>Error</code> 객체를 생성한 후엔 대개 {{jsxref("Statements/throw", "throw")}} 키워드를 이용해 던집니다. {{jsxref("Statements/try...catch", "try...catch")}} 구문을 이용하여 오류를 처리할 수 있습니다.</p> + +<pre class="brush: js">try { + throw new Error("이런!"); +} catch (e) { + alert(e.name + ": " + e.message); +} +</pre> + +<h3 id="Example:_Handling_a_specific_error" name="Example:_Handling_a_specific_error">특정 오류 처리하기</h3> + +<p><span class="comment">this should probably be removed</span>오류의 {{jsxref("Object.prototype.constructor", "constructor")}} 속성을 판별해 특정 오류에 대해서만 처리를 할 수 있습니다. 현대적인 JavaScript 엔진의 코드를 작성한다면 {{jsxref("Operators/instanceof", "instanceof")}} 키워드를 이용할 수도 있습니다.</p> + +<pre class="brush: js">try { + foo.bar(); +} catch (e) { + if (e instanceof EvalError) { + alert(e.name + ": " + e.message); + } else if (e instanceof RangeError) { + alert(e.name + ": " + e.message); + } + // ... etc +} +</pre> + +<h3 id="사용자_정의_에러_타입">사용자 정의 에러 타입</h3> + +<p><code>throw new MyError()</code> 이후 <code>instanceof MyError</code>로 직접 만든 오류를 판별할 수 있도록 <code>Error</code>의 파생 오류 정의를 고려해보세요. 더 깔끔하고 일관적인 오류 처리 코드를 작성할 수 있습니다. StackOverflow의 <a href="http://stackoverflow.com/questions/1382107/whats-a-good-way-to-extend-error-in-javascript">"What's a good way to extend Error in JavaScript?"</a>를 방문해 심도 있는 논의를 읽어보세요.</p> + +<h4 id="ES6_사용자_정의_오류_클래스">ES6 사용자 정의 오류 클래스</h4> + +<div class="warning"> +<p>Babel 버전 7 미만으로 사용자 정의 오류 클래스를 처리하려면 {{jsxref("Object.defineProperty()")}} 메서드를 사용해 정의해야만 합니다. 그렇지 않으면 오래된 Babel 및 다른 트랜스파일러가 <a href="https://github.com/loganfsmyth/babel-plugin-transform-builtin-extend">추가 설정</a> 없이 코드를 처리할 수 없습니다.</p> +</div> + +<div class="note"> +<p>ES2015 클래스를 사용할 때, 일부 브라우저는 <code>CustomError</code> 생성자를 스택 트레이스에 포함합니다.</p> +</div> + +<pre class="brush: js">class CustomError extends Error { + constructor(foo = 'bar', ...params) { + // Pass remaining arguments (including vendor specific ones) to parent constructor + super(...params); + + // Maintains proper stack trace for where our error was thrown (only available on V8) + if (Error.captureStackTrace) { + Error.captureStackTrace(this, CustomError); + } + + // Custom debugging information + this.foo = foo; + this.date = new Date(); + } +} + +try { + throw new CustomError('baz', 'bazMessage'); +} catch(e){ + console.log(e.foo); //baz + console.log(e.message); //bazMessage + console.log(e.stack); //stacktrace +}</pre> + +<h4 id="ES5_사용자_정의_오류_객체">ES5 사용자 정의 오류 객체</h4> + +<div class="warning"> +<p>프로토타입 선언을 사용하면 모든 브라우저가 <code>CustomError</code> 생성자를 스택 트레이스에 포함합니다.</p> +</div> + +<pre class="brush: js">function CustomError(foo, message, fileName, lineNumber) { + var instance = new Error(message, fileName, lineNumber); + instance.foo = foo; + Object.setPrototypeOf(instance, Object.getPrototypeOf(this)); + if (Error.captureStackTrace) { + Error.captureStackTrace(instance, CustomError); + } + return instance; +} + +CustomError.prototype = Object.create(Error.prototype, { + constructor: { + value: Error, + enumerable: false, + writable: true, + configurable: true + } +}); + +if (Object.setPrototypeOf){ + Object.setPrototypeOf(CustomError, Error); +} else { + CustomError.__proto__ = Error; +} + + +try { + throw new CustomError('baz', 'bazMessage'); +} catch(e){ + console.log(e.foo); //baz + console.log(e.message) ;//bazMessage +} +</pre> + +<h2 id="See_also" name="See_also">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11', 'Error')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-error-objects', 'Error')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-error-objects', 'Error')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Error")}}</p> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Statements/throw", "throw")}}</li> + <li>{{jsxref("Statements/try...catch", "try...catch")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/error/name/index.html b/files/ko/web/javascript/reference/global_objects/error/name/index.html new file mode 100644 index 0000000000..bca8a4937f --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/error/name/index.html @@ -0,0 +1,72 @@ +--- +title: Error.prototype.name +slug: Web/JavaScript/Reference/Global_Objects/Error/name +translation_of: Web/JavaScript/Reference/Global_Objects/Error/name +--- +<div>{{JSRef}}</div> + +<div><strong><code>name</code> </strong>프로퍼티는 에러 타입을 설명하기 위한 이름을 나타냅니다. 초기값은 "Error"입니다.</div> + +<h2 id="설명">설명</h2> + +<p>{{jsxref("Error")}} 인스턴스는 주어진 이름인 "Error"를 기본 값으로 갖습니다. name 프로퍼티는 {{jsxref("Error.prototype.message", "message")}}와 함께 {{jsxref("Error.prototype.toString()")}}에서 사용되며 해당 에러를 문자열로 표현합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="사용자_정의_에러_발생시키기">사용자 정의 에러 발생시키기</h3> + +<pre class="brush: js">var e = new Error('Malformed input'); // e.name은 'Error' + +e.name = 'ParseError'; +throw e; +// e.toString()은 'ParseError: Malformed input'을 반환합니다 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.4.2', 'Error.prototype.name')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-error.prototype.name', 'Error.prototype.name')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-error.prototype.name', 'Error.prototype.name')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> +<div> +<div class="hidden">이 페이지의 호환성 테이블은 구조화된 데이터로부터 생성됩니다. 해당 데이터를 개선하고 싶다면 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>을 체크아웃하고 저희에게 풀 리퀘스트를 보내주십시오.</div> + +<p>{{Compat("javascript.builtins.Error.name")}}</p> +</div> +</div> + +<h2 id="참고">참고</h2> + +<ul> + <li>{{jsxref("Error.prototype.message")}}</li> + <li>{{jsxref("Error.prototype.toString()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/eval/index.html b/files/ko/web/javascript/reference/global_objects/eval/index.html new file mode 100644 index 0000000000..000c8b2228 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/eval/index.html @@ -0,0 +1,285 @@ +--- +title: eval() +slug: Web/JavaScript/Reference/Global_Objects/eval +tags: + - JavaScript + - Method + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/eval +--- +<div>{{jsSidebar("Objects")}}</div> + +<div class="blockIndicator warning"> +<p><strong>주의:</strong> 문자열로부터 <code><strong>eval()</strong></code>을 실행하는 것은 엄청나게 위험합니다. <code><strong>eval()</strong></code>을 사용하면 해커가 위험한 코드를 사용할 수 있습니다. 아래에 <a href="#eval을 절대 사용하지 말 것!">eval을 절대 사용하지 말 것!</a>을 확인하세요.</p> +</div> + +<p><code><strong>eval()</strong></code>은 문자로 표현된 JavaScript 코드를 실행하는 함수입니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-eval.html")}}</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate"><code>eval(<em>string</em>)</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>string</code></dt> + <dd>자바스크립트 표현식, 명령문, 또는 연속되는 다수의 명령문을 나타내는 문자열. 표현식은 이미 존재하는 객체의 변수나 속성을 포함할 수 있습니다.</dd> +</dl> + +<h3 id="반환값">반환값</h3> + +<p>주어진 코드를 평가하여 얻은 값. 값이 없다면 {{jsxref("undefined")}}를 반환합니다.</p> + +<h2 id="설명">설명</h2> + +<p><code>eval()</code>은 전역 객체의 함수 속성입니다.</p> + +<p><code>eval()</code>의 인자는 문자열입니다. 인자가 표현식을 나타낸다면 <code>eval()</code>은 표현식을 평가합니다. 인자가 하나 이상의 JavaScript 명령문을 나타낸다면 모두 실행합니다. 연산식을 계산하기 위해 <code>eval()</code>을 호출하지 마세요. 자바스크립트는 연산식을 알아서 계산합니다.</p> + +<p>문자열로 연산식을 구성하면 나중에 <code>eval()</code>로 계산할 수 있습니다. <code>x</code> 라는 변수가 있다고 가정하면 <code>x</code>가 포함된 연산식을 문자열로, 예를 들어 "<code>3 * x + 2</code>"로 나타내고 나중에 <code>eval()</code>을 호출해서 계산을 연기할 수 있습니다.</p> + +<p><code>eval()</code>의 인자가 문자열이 아니면 <code>eval()</code>은 인자를 그대로 반환합니다. 다음 예시에서, <code>String</code> 생성자가 명시된 경우 문자열을 계산하는 대신 <code>String</code> 객체를 반환합니다.</p> + +<pre class="brush:js notranslate">eval(new String("2 + 2")); // "2 + 2"를 포함한 String 객체를 반환 +eval("2 + 2"); // 4를 반환 +</pre> + +<p><code>toString()</code>을 사용하는 일반적인 방식으로 제약을 피할 수 있습니다.</p> + +<pre class="brush:js notranslate">var expression = new String("2 + 2"); +eval(expression.toString()); // 4를 반환 +</pre> + +<p><code>eval</code>을 직접 호출하지 않고 참조를 통해 <em>간접적으로</em> 사용한다면 <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-10.4.2">ECMAScript 5부터는</a> 지역 범위가 아니라 전역 범위에서 동작합니다. 예를 들어 <code>eval()</code>로 함수를 선언하면 전역 함수가 되고, 실행되는 코드는 실행되는 위치의 지역 범위에 접근할 수 없습니다.</p> + +<pre class="notranslate"><code>function test() { + var x = 2, y = 4; + console.log(eval('x + y')); // 직접 호출, 지역 범위 사용, 결과값은 6 + var geval = eval; // eval을 전역 범위로 호출하는 것과 같음 + console.log(geval('x + y')); // 간접 호출, 전역 범위 사용, `x`가 정의되지 않았으므로 ReferenceError 발생 + (0, eval)('x + y'); // 다른 방식으로 간접 호출 +}</code></pre> + +<h2 id="eval을_절대_사용하지_말_것!"><a name="dont-use-it"><code>eval</code>을 절대 사용하지 말 것!</a></h2> + +<p><code>eval()</code>은 인자로 받은 코드를 caller의 권한으로 수행하는 위험한 함수입니다. 악의적인 영향을 받았을 수 있는 문자열을 <code>eval()</code>로 실행한다면, 당신의 웹페이지나 확장 프로그램의 권한으로 사용자의 기기에서 악의적인 코드를 수행하는 결과를 초래할 수 있습니다. 또한, 제3자 코드가 <code>eval()</code>이 호출된 위치의 스코프를 볼 수 있으며, 이를 이용해 비슷한 함수인 {{jsxref("Global_Objects/Function", "Function")}}으로는 실현할 수 없는 공격이 가능합니다.</p> + +<p>또한 최신 JS 엔진에서 여러 코드 구조를 최적화하는 것과 달리 <code>eval()</code>은 JS 인터프리터를 사용해야 하기 때문에 다른 대안들보다 느립니다.</p> + +<p>추가로, 최신 JavaScript 인터프리터는 자바스크립트를 기계 코드로 변환합니다. 즉, 변수명의 개념이 완전히 없어집니다. 그러나 <code>eval</code>을 사용하면 브라우저는 기계 코드에 해당 변수가 있는지 확인하고 값을 대입하기 위해 길고 무거운 변수명 검색을 수행해야 합니다. 또한 <code>eval()</code>을 통해 자료형 변경 등 변수에 변화가 일어날 수 있으며, 브라우저는 이에 대응하기 위해 기계 코드를 재작성해야 합니다. 그러나, (다행히) <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function">window.Function</a>이라는 <code> eval</code>보다 훨씬 나은 대안이 있습니다. <code>eval()</code>을 사용하는 코드를 <code>Function()</code>으로 바꾸는 방법에 대해서는 아래를 참조하세요.</p> + +<p><code>eval</code>을 사용하는 나쁜 코드:</p> + +<pre class="brush:js notranslate">function looseJsonParse(obj){ + return eval(obj); +} +console.log(looseJsonParse( + "{a:(4-1), b:function(){}, c:new Date()}" +)) +</pre> + +<p><code>eval</code>이 없는 코드:</p> + +<pre class="brush:js notranslate">function looseJsonParse(obj){ + return Function('"use strict";return (' + obj + ')')(); +} +console.log(looseJsonParse( + "{a:(4-1), b:function(){}, c:new Date()}" +)) +</pre> + +<p>위의 두 코드는 얼핏 보면 같은 방식으로 실행되는 것처럼 보이지만, <code>eval</code>이 있는 코드가 훨씬 느립니다. 평가되는 객체의 <code>c: new Date()</code>를 주목하세요. <code>eval</code>이 없는 함수의 경우 이 객체는 전역 범위에서 평가되기 때문에 브라우저에서는 <code>Date</code>를 같은 이름의 지역 변수가 아니라 <code>window.Date</code>로 취급할 수 있습니다. 그러나 <code>eval()</code>을 사용하는 코드에서는 아래와 같은 경우도 존재할 수 있기 때문에 <code>Date</code>를 이렇게 취급할 수 없습니다.</p> + +<pre class="brush:js notranslate">function Date(n){ + return ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"][n%7 || 0]; +} +function looseJsonParse(obj){ + return eval(obj); +} +console.log(looseJsonParse( + "{a:(4-1), b:function(){}, c:new Date()}" +)) +</pre> + +<p>그러므로 <code>eval()</code>이 있는 코드의 경우 브라우저는 <code>Date()</code>라는 지역 변수의 존재를 확인하기 위해 무거운 변수명 탐색을 수행해야 하며, 이는 <code>Function()</code>과 비교하면 매우 느립니다.</p> + +<p>만약 위의 상황에서 실제로 새로 선언한 <code>Date</code> 함수를 <code>Function()</code>에서 실행해야 하는 상황을 생각해 봅시다. 이렇게 되면 <code>eval()</code>로 돌아가야 할까요? 물론 아닙니다. 아래의 접근을 시도해 보세요.</p> + +<pre class="brush:js notranslate">function Date(n){ + return ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"][n%7 || 0]; +} +function runCodeWithDateFunction(obj){ + return Function('"use strict";return (' + obj + ')')()( + Date + ); +} +console.log(runCodeWithDateFunction( + "function(Date){ return Date(5) }" +)) +</pre> + +<p>위 코드는 삼중 중첩 함수를 사용하기 때문에 매우 비효율적으로 보일 수 있지만, 이 방법의 이점을 우선 살펴봅시다.</p> + +<p>1. <code>runCodeWithDateFunction</code>에 문자열로 전달된 코드를 최소화<sup>minify</sup>할 수 있다.</p> + +<p>2. Function call overhead is minimal, making the far smaller code size well worth the benefit</p> + +<p>3. <code>Function()</code>은 <code>"use strict";</code>를 사용함으로써 코드의 성능을 최적화할 수 있다.</p> + +<p>4. <code>eval()</code>을 사용하지 않으므로 실행 속도가 훨씬 빠르다.</p> + +<p>마지막으로 코드 최소화의 측면에서 살펴보면, 위와 같이 <code>Function()</code>을 사용했을 때는 아래의 최소화된 코드와 같이 함수의 인자 이름 역시 짧게 줄일 수 있으므로 runCodeWithDateFunction에 전달하는 코드 문자열을 더욱 효율적으로 줄일 수 있습니다.</p> + +<pre class="brush:js notranslate">console.log(Function('"use strict";return(function(a){return a(5)})')()(function(a){ +return"Monday Tuesday Wednesday Thursday Friday Saturday Sunday".split(" ")[a%7||0]}));</pre> + +<p>자주 쓰이는 용례에 대해서는 <code>eval()</code>이나 <code>Function()</code>보다 안전하고 빠른 대안도 존재합니다.</p> + +<h3 id="객체의_속성에_접근하기">객체의 속성에 접근하기</h3> + +<p>속성명으로 속성을 찾는 데 <code>eval()</code>을 사용해서는 안 됩니다. 다음 예제와 같이 코드를 실행하기 전까지는 접근할 속성을 알 수 없는 상황을 생각해 봅시다. 이 상황은 <code>eval</code>로 처리할 수 있습니다.</p> + +<pre class="brush:js notranslate">var obj = { a: 20, b: 30 }; +var propname = getPropName(); // "a" 또는 "b"를 반환 + +eval( "var result = obj." + propname ); +</pre> + +<p>그러나 여기에서 <code>eval()</code>을 쓸 필요가 없고, 지양되어야 합니다. 그 대신 훨씬 빠르고 안전한 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors" title="JavaScript/Reference/Operators/Member_Operators">속성 접근자</a>를 사용하여야 합니다.</p> + +<pre class="brush:js notranslate">var obj = { a: 20, b: 30 }; +var propname = getPropName(); // "a" 또는 "b"를 반환 +var result = obj[ propname ]; // obj[ "a" ]는 obj.a와 동일함 +</pre> + +<p>이 방법으로 더 깊은 속성에도 접근할 수 있습니다. <code>eval()</code>을 사용한다면 다음과 같을 것입니다.</p> + +<pre class="notranslate"><code>var obj = {a: {b: {c: 0}}}; +var propPath = getPropPath(); // "a.b.c"를 반환한다고 가정 + +eval( 'var result = obj.' + propPath );</code></pre> + +<p>여기서 <code>eval()</code>의 사용을 피하려면 속성 경로를 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/String/split">split</a></code>한 다음 순서대로 접근할 수도 있습니다.</p> + +<pre class="notranslate"><code>function getDescendantProp(obj, desc) { + var arr = desc.split('.'); + while (arr.length) { + obj = obj[arr.shift()]; + } + return obj; +} + +var obj = {a: {b: {c: 0}}}; +var propPath = getPropPath(); // "a.b.c"를 반환한다고 가정 +var result = getDescendantProp(obj, propPath);</code></pre> + +<p>속성에 값을 대입하는 것도 비슷하게 할 수 있습니다.</p> + +<pre class="notranslate"><code>function setDescendantProp(obj, desc, value) { + var arr = desc.split('.'); + while (arr.length > 1) { + obj = obj[arr.shift()]; + } + return obj[arr[0]] = value; +} + +var obj = {a: {b: {c: 0}}}; +var propPath = getPropPath(); // "a.b.c"를 반환한다고 가정 +var result = setDescendantProp(obj, propPath, 1); // test.a.b.c의 값은 1로 지정됨</code> +</pre> + +<h3 id="단편적인_코드_수행_대신_함수_사용하기">단편적인 코드 수행 대신 함수 사용하기</h3> + +<p>JavaScript의 <a href="http://en.wikipedia.org/wiki/First-class_function">함수는 1급 객체</a>이므로 다른 API에 함수를 인자로 전달할 수도 있고, 변수나 객체의 속성으로 대입할 수도 있습니다. 다수의 DOM API는 이 점을 염두에 두고 설계되므로, 다음과 같이 코드를 짜야 합니다.</p> + +<pre class="brush: js notranslate">// setTimeout(" ... ", 1000) 대신에 +setTimeout(function() { ... }, 1000); + +// elt.setAttribute("onclick", "...") 대신에 +elt.addEventListener("click", function() { ... } , false); </pre> + +<p>또한 <a href="/en-US/docs/Web/JavaScript/Closures" title="JavaScript/Guide/Closures">클로저</a>를 이용해 문자열을 합치는 등의 연산 없이 매개변수화된 함수를 생성할 수 있습니다.</p> + +<h3 id="JSON_파싱_문자열을_JavaScript_객체로_변환">JSON 파싱 (문자열을 JavaScript 객체로 변환)</h3> + +<p><code>eval()</code>을 호출하려는 문자열에 코드가 아니라 데이터가 포함되어 있다면(예를 들어 <code>"[1, 2, 3]"</code>과 같은 배열), 대신 JavaScript의 문법 일부를 이용해 문자열로 데이터를 표현할 수 있는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON" title="JSON">JSON</a>을 사용하는 것을 고려해 보세요. <a href="/en-US/docs/Downloading_JSON_and_JavaScript_in_extensions" title="Downloading_JSON_and_JavaScript_in_extensions">Downloading JSON and JavaScript in extensions</a>도 참고해 보세요.</p> + +<p>JSON 문법은 JavaScript 문법에 비해 제약이 있기 때문에, 유효한 JavaScript 리터럴이 JSON으로 변환되지 않는 경우도 있습니다. 예를 들어, JSON에서는 배열이나 객체를 콤마로 끝낼 수 없고, 객체 리터럴에서 속성명(키)은 반드시 따옴표로 감싸야 합니다. 나중에 JSON으로 파싱할 문자열을 생성할 때는 JSON 직렬 변환기<sup>JSON serializer</sup>를 사용하여야 합니다.</p> + +<h3 id="코드_대신_데이터_전달하기">코드 대신 데이터 전달하기</h3> + +<p>예를 들어, 웹 페이지의 내용을 추출하는 확장 프로그램은 JavaScript 코드 대신 <a href="/ko/docs/XPath" title="XPath">XPath</a>에 스크랩 규칙을 정의할 수 있습니다.</p> + +<h3 id="제한된_권한으로_코드_실행하기">제한된 권한으로 코드 실행하기</h3> + +<p>제3자 코드를 실행해야 할 때는 제한된 권한으로 실행하는 것을 고려해야 합니다. 이는 주로 확장 프로그램이나 XUL 어플리케이션에 적용되며, 이때 <a href="/en-US/docs/Components.utils.evalInSandbox" title="Components.utils.evalInSandbox">Components.utils.evalInSandbox</a>를 사용할 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="eval_사용하기"><code>eval</code> 사용하기</h3> + +<p>아래 코드에서 <code>eval()</code>를 포함하는 문장은 모두 42를 반환합니다. 전자는 문자열 "<code>x + y + 1</code>"을, 후자는 문자열 "<code>42</code>"를 평가합니다.</p> + +<pre class="brush:js notranslate">var x = 2; +var y = 39; +var z = "42"; +eval("x + y + 1"); // 42를 반환 +eval(z); // 42를 반환 +</pre> + +<h3 id="eval을_사용해서_JavaScript_코드_문자열_평가하기"><code>eval</code>을 사용해서 JavaScript 코드 문자열 평가하기</h3> + +<p>다음 예제에서는 <code>eval()</code>을 사용하여 <code>str</code> 문자열을 평가합니다. 이 문자열은 <code>x</code>가 5이면 로그를 출력한 다음 <code>z</code>에 42를 할당하고, 그렇지 않으면 <code>z</code>에 0 을 할당하는 JavaScript 코드입니다. 두 번째 문장이 실행되면, <code>eval()</code>은 이 문장의 집합을 수행하고, <code>z</code>에 할당된 값을 반환합니다.</p> + +<pre class="brush:js notranslate">var x = 5; +var str = "if (x == 5) {console.log('z is 42'); z = 42;} else z = 0; "; + +console.log("z is ", eval(str));</pre> + +<p>여러 값을 정의할 경우 마지막 값을 반환합니다.</p> + +<pre class="notranslate"><code>var x = 5; +var str = "if (x == 5) {console.log('z is 42'); z = 42; x = 420; } else z = 0;"; + +console.log('x is ', eval(str)); // z는 42, x는 420</code></pre> + +<h3 id="마지막_표현식이_수행된다">마지막 표현식이 수행된다</h3> + +<p><code>eval()</code> 은 마지막 표현식의 평가값을 반환합니다.</p> + +<pre class="brush:js notranslate">var str = "if ( a ) { 1+1; } else { 1+2; }"; +var a = true; +var b = eval(str); // 2를 반환 + +console.log("b is : " + b); + +a = false; +b = eval(str); // 3을 반환 + +console.log("b is : " + b);</pre> + +<h3 id="함수_정의_문자열로서의_eval_은_앞뒤를_와_로_감싸야_한다">함수 정의 문자열로서의 <code>eval</code> 은 앞뒤를 "("와 ")"로 감싸야 한다</h3> + +<pre class="brush:js notranslate">var fctStr1 = "function a() {}" +var fctStr2 = "(function a() {})" +var fct1 = eval(fctStr1) // undefined를 반환 +var fct2 = eval(fctStr2) // 함수를 반환 +</pre> + +<h2 id="sect1"></h2> + +<h2 id="브라우저_호환성"><span style="">브라우저 호환성</span></h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("javascript.builtins.eval")}}</p> + +<h2 id="참고">참고</h2> + +<ul> + <li>{{jsxref("Global_Objects/uneval", "uneval()")}}</li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#Using_eval()_in_content_scripts">WebExtensions: Using eval in content scripts</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/evalerror/index.html b/files/ko/web/javascript/reference/global_objects/evalerror/index.html new file mode 100644 index 0000000000..4c8fcf38dd --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/evalerror/index.html @@ -0,0 +1,112 @@ +--- +title: EvalError +slug: Web/JavaScript/Reference/Global_Objects/EvalError +tags: + - Error + - EvalError + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/EvalError +--- +<div>{{JSRef}}</div> + +<p><strong><code>EvalError</code></strong> 객체는 전역 {{jsxref("Global_Objects/eval", "eval()")}} 함수에 관한 오류를 나타냅니다. 이 예외는 JavaScript에 의해 더 이상 발생하지 않지만 <code>EvalError</code> 객체는 하위 호환성을 위해 남아있습니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code>new EvalError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>message</code> {{optional_inline}}</dt> + <dd>인간이 읽을 수 있는 오류 설명.</dd> + <dt><code>fileName</code> {{optional_inline}} {{non-standard_inline}}</dt> + <dd>예외의 원인이 된 코드를 포함하는 파일의 이름.</dd> + <dt><code>lineNumber</code> {{optional_inline}} {{non-standard_inline}}</dt> + <dd>예외를 발생시킨 코드의 행 번호.</dd> +</dl> + +<h2 id="속성">속성</h2> + +<dl> + <dt>{{jsxref("EvalError.prototype")}}</dt> + <dd>EvalError 객체에 속성을 추가할 수 있습니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<p>전역 EvalError에는 자체 메서드가 없지만 프로토 타입 체인을 통해 일부 메서드를 상속받습니다.</p> + +<h2 id="EvalError_인스턴스"><code>EvalError</code> 인스턴스</h2> + +<h3 id="Properties">Properties</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/EvalError/prototype', 'Properties')}}</div> + +<h3 id="Methods">Methods</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/EvalError/prototype', 'Methods')}}</div> + +<h2 id="예제">예제</h2> + +<p><code>EvalError</code>는 현재 ECMAScript 사양에서 사용되지 않으므로 런타임에 의해 throw되지 않습니다. 그러나 개체 자체는 이전 버전의 사양과의 하위 호환성을 유지합니다.</p> + +<h3 id="Creating_an_EvalError">Creating an <code>EvalError</code></h3> + +<pre class="brush: js">try { + throw new EvalError('Hello', 'someFile.js', 10); +} catch (e) { + console.log(e instanceof EvalError); // true + console.log(e.message); // "Hello" + console.log(e.name); // "EvalError" + console.log(e.fileName); // "someFile.js" + console.log(e.lineNumber); // 10 + console.log(e.columnNumber); // 0 + console.log(e.stack); // "@Scratchpad/2:2:9\n" +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.6.1', 'EvalError')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Not used in this specification. Present for backward compatibility.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Not used in this specification. Present for backward compatibility.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("javascript.builtins.EvalError")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("EvalError.prototype")}}</li> + <li>{{jsxref("Global_Objects/eval", "eval()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/function/apply/index.html b/files/ko/web/javascript/reference/global_objects/function/apply/index.html new file mode 100644 index 0000000000..1e59ed07f7 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/function/apply/index.html @@ -0,0 +1,236 @@ +--- +title: Function.prototype.apply() +slug: Web/JavaScript/Reference/Global_Objects/Function/apply +tags: + - Function + - JavaScript + - Method + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply +--- +<div>{{JSRef}}</div> + +<p><strong><code>apply()</code></strong> 메서드는 주어진 <code>this</code> 값과 배열 (또는 <a href="/en-US/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Working_with_Array-like_objects">유사 배열 객체</a>) 로 제공되는 <code>arguments</code> 로 함수를 호출합니다.</p> + +<div class="note"> +<p><strong>참고:</strong> 이 함수의 구문은 거의 {{jsxref("Function.call", "call()")}} 구문과 유사합니다. 근본적인 차이점은 <code>call()</code> 은 함수에 전달될 <strong>인수 리스트</strong>를 받는데 비해, <code>apply()</code> 는 <strong>인수들의 단일 배열</strong>을 받는다는 점입니다.</p> +</div> + +<p>{{EmbedInteractiveExample("pages/js/function-apply.html")}}</p> + +<div class="hidden"> +<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>func</var>.apply(<var>thisArg, </var>[<var>argsArray</var>])</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>thisArg</code></dt> + <dd>옵션. <code>func</code> 를 호출하는데 제공될 <code>this</code> 의 값. <code>this</code> 는 메소드에 의해 실제로 보여지는 값이 아닐 수 있음을 유의합니다. 메소드가 {{jsxref("Strict_mode", "non-strict mode", "", 1)}} 코드의 함수일 경우, {{jsxref("null")}} 과 {{jsxref("undefined")}} 가 전역 객체로 대체되며, 기본 값은 제한됩니다.</dd> + <dt><code>argsArray</code></dt> + <dd>옵션. <em><code>func</code></em> 이 호출되어야 하는 인수를 지정하는 유사 배열 객체, 함수에 제공된 인수가 없을 경우 {{jsxref("null")}} 또는 {{jsxref("undefined")}}. ECMAScript 5 의 시작으로 이러한 인수들은 배열 대신 제네릭 유사 배열 객체로 사용될 수 있습니다. 아래의 {{anch("Browser_compatibility", "브라우저 호환성")}} 정보를 보세요.</dd> +</dl> + +<h3 id="반환값">반환값</h3> + +<p>지정한 <strong><code>this</code></strong> 값과 인수들로 호출한 함수의 결과.</p> + +<h2 id="Description" name="Description">설명</h2> + +<p>이미 존재하는 함수를 호출할 때 다른 <code>this</code> 객체를 할당할 수 있습니다. <code>this</code> 는 현재 객체, 호출하는 객체를 참조합니다. <code>apply</code> 를 사용해, 새로운 객체마다 메소드를 재작성할 필요없이 한 번만 작성해 다른 객체에 상속시킬 수 있습니다.</p> + +<p><code>apply</code> 는 지원되는 인수의 타입만 제외하면 {{jsxref("Function.call", "call()")}} 과 매우 유사합니다. 인수(파라미터)의 리스트 대신 인수들의 배열을 사용할 수 있습니다. 또한 <code>apply</code> 를 사용해, 배열 리터럴이나 (예, <em>func</em>.apply(this, ['eat', 'bananas']), {{jsxref("Array")}} 객체 (예, <em>func</em>.apply(this, new Array('eat', 'bananas'))) 를 사용할 수 있습니다.</p> + + + +<p><code>argsArray</code> 파라미터를 위한 {{jsxref("Functions/arguments", "arguments")}} 를 사용할 수도 있습니다. <code>arguments</code> 는 함수의 지역 변수입니다. 이는 호출된 객체의 지정되지 않은 모든 인수에 대해 사용할 수 있습니다. 따라서, <code>apply</code> 메소드를 사용할 때 호출된 객체의 인수를 알 필요가 없습니다. <code>arguments</code> 를 사용해 모든 인수들을 호출된 객체로 전달할 수 있습니다. 그럼 호출된 객체는 그 인수들을 처리할 수 있게 됩니다.</p> + + + +<p>ECMAScript 5번 째 판의 시작으로, 모든 유사 배열 객체 타입을 사용할 수 있으며, 실제로 이는 프로퍼티 <code>length</code> 와 범위 <code>(0..length-1)</code> 내의 정수 프로퍼티를 갖는 다는 것을 의미합니다. 예를 들면, 이제 {{domxref("NodeList")}} 또는 <code>{ 'length': 2, '0': 'eat', '1': 'bananas' }</code> 와 같은 커스텀 객체를 사용할 수 있습니다.</p> + +<div class="blockIndicator note">Chrome 14와 Internet Explorer 9를 포함한 대부분의 브라우저는 아직 유사배열객체를 apply에 사용할 수 없으며 오류가 출력됩니다.</div> + +<h2 id="Examples" name="Examples">예제</h2> + +<h3 id="Example_Using_apply_to_chain_constructors" name="Example:_Using_apply_to_chain_constructors">배열에 배열을 붙이기 위해 <code>apply</code> 사용하기</h3> + +<p><code>push</code> 를 사용하여 요소를 배열에 추가 할 수 있습니다. <code>push</code> 는 가변 인수를 허용하기 때문에 여러 요소를 동시에 추가 할 수 있습니다. 그러나 <code>push</code> 에 배열을 전달하면 요소를 개별적으로 추가하는 대신 실제로 해당 배열을 단일 요소로 추가하므로 결국 배열 내부에 배열로 끝납니다. 그것이 우리가 원하는 것이 아니라면? 이 경우 <code>concat</code> 은 우리가 원하는 동작을 하지만 실제로는 기존 배열에 추가되지 않고 새 배열을 만들어 반환 합니다. 그러나 우리는 기존 배열에 추가하고 싶었습니다 ... 그럼 이제 어쩌죠? 루프를 작성 할까요? 분명히 아니죠?</p> + +<p>방법은 <code>apply</code> !</p> + +<pre class="brush: js">var array = ['a', 'b']; +var elements = [0, 1, 2]; +array.push.apply(array, elements); +console.info(array); // ["a", "b", 0, 1, 2] +</pre> + +<h3 id="apply_와_내장함수_사용"><code>apply</code> 와 내장함수 사용</h3> + +<p><code>apply</code> 를 보다 효과적으로 이용하면 일부 내장 함수는 어떤 작업에 대해서는 배열과 루프없이 쉽게 처리됩니다. 다음 예제에서는 배열에서 최대값과 최소값을 구하기 위해 <code>Math.max</code>/<code>Math.min</code> 함수를 이용하고 있습니다.</p> + +<pre class="brush: js">// min/max number in an array +var numbers = [5, 6, 2, 3, 7]; + +// using Math.min/Math.max apply +var max = Math.max.apply(null, numbers); +// 이는 Math.max(numbers[0], ...) 또는 Math.max(5, 6, ...) +// 와 거의 같음 + +var min = Math.min.apply(null, numbers); + +// vs. simple loop based algorithm +max = -Infinity, min = +Infinity; + +for (var i = 0; i < numbers.length; i++) { + if (numbers[i] > max) { + max = numbers[i]; + } + if (numbers[i] < min) { + min = numbers[i]; + } +} +</pre> + +<p>하지만 이러한 방식으로 <code>apply</code> 를 사용하는 경우 주의해야 합니다. JavaScript 엔진의 인수 길이 제한을 초과하는 위험성에 대해 이해할 필요가 있습니다. 함수에 너무 많은(대략 몇 만개 이상) 인수를 줄 때의 상황은 엔진마다 다른데(예를 들어 JavaScriptCore의 경우 <a href="https://bugs.webkit.org/show_bug.cgi?id=80797">인수의 개수 제한은 65536</a>), 상한이 특별히 정해져 있지 않기 때문입니다. 어떤 엔진은 예외를 던집니다. 더 심한 경우는 실제 함수에 인수를 전달했음에도 불구하고 참조할 수 있는 인수의 수를 제한하고 있는 경우도 있습니다(이러한 엔진에 대해 더 자세히 설명하면, 그 엔진이 arguments의 상한을 4개로 했다고 하면[실제 상한은 물론 더 위일 것입니다], 위 예제 코드의 전체 배열이 아니라 <code>5, 6, 2, 3</code> 만 <code>apply</code> 에 전달되어 온 것처럼 작동합니다).</p> + +<p>만약 사용하는 배열 변수의 수가 수만을 초과하는 경우에는 복합적인 전략을 강구해야할 것입니다:한 번에 전달할 배열을 분할하여 사용하기:</p> + +<pre class="brush: js">function minOfArray(arr) { + var min = Infinity; + var QUANTUM = 32768; + + for (var i = 0, len = arr.length; i < len; i += QUANTUM) { + var submin = Math.min.apply(null, + arr.slice(i, Math.min(i + QUANTUM, len))); + min = Math.min(submin, min); + } + + return min; +} + +var min = minOfArray([5, 6, 2, 3, 7]); + +</pre> + + + +<h3 id="생성자_체이닝을_위한_apply_사용">생성자 체이닝을 위한 <code>apply</code> 사용</h3> + +<p>Java 와 유사하게, 객체를 위한 {{jsxref("Operators/new", "constructors", "", 1)}} 체이닝을 위해 <code>apply</code> 를 사용할 수 있습니다. 다음 예제에서 인수 리스트 대신 생성자로 유사 배열 객체를 사용할 수 있게 해주는 <code>construct</code> 라는 전역 {{jsxref("Function")}} 메소드를 생성할 것입니다. </p> + +<pre><code>Function.prototype.construct = function(aArgs) { + var oNew = Object.create(this.prototype); + this.apply(oNew, aArgs); + return oNew; +};</code></pre> + +<div class="blockIndicator note"> +<p><strong>알림:</strong> 위에서 사용된 <code>Object.create()</code> 메소드는 상대적으로 새로운 것입니다. 대안으로, 다음 접근법 중 하나를 고려하세요.</p> + +<p>{{jsxref("Object/__proto__", "Object.__proto__")}} 사용</p> + +<pre><code>Function.prototype.construct = function (aArgs) { + var oNew = {}; + oNew.__proto__ = this.prototype; + this.apply(oNew, aArgs); + return oNew; +};</code></pre> + +<p><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Closures">클로져</a> 사용:</p> + +<pre><code>Function.prototype.construct = function(aArgs) { + var fConstructor = this, fNewConstr = function() { + fConstructor.apply(this, aArgs); + }; + fNewConstr.prototype = fConstructor.prototype; + return new fNewConstr(); +};</code></pre> + +<p>{{jsxref("Function")}} 생성자 사용</p> + +<pre><code>Function.prototype.construct = function (aArgs) { + var fNewConstr = new Function(""); + fNewConstr.prototype = this.prototype; + var oNew = new fNewConstr(); + this.apply(oNew, aArgs); + return oNew; +};</code></pre> +</div> + +<p>사용 예제</p> + +<pre><code>function MyConstructor() { + for (var nProp = 0; nProp < arguments.length; nProp++) { + this['property' + nProp] = arguments[nProp]; + } +} + +var myArray = [4, 'Hello world!', false]; +var myInstance = MyConstructor.construct(myArray); + +console.log(myInstance.property1); // logs 'Hello world!' +console.log(myInstance instanceof MyConstructor); // logs 'true' +console.log(myInstance.constructor); // logs 'MyConstructor'</code></pre> + +<p><strong>알림:</strong> 네이티브가 아닌 <code>Function.construct</code> 메소드는 {{jsxref("Date")}} 와 같은 일부 네이티브 생성자와 동작하지 않을 것입니다. 그런 경우, {{jsxref("Function.prototype.bind")}} 메소드를 사용해야 합니다. 예를 들어, 다음과 같은 배열이 있다고 할 때, {{jsxref("Global_Objects/Date", "Date")}} 생성자: <code>[2012, 11, 4]</code> 와 함께 사용되려면 다음과 같이 작성해야 합니다: <code>new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()</code>. 이는 가장 좋은 방법이 아니며, 어떤 상용 환경에서도 사용되지 않을 수 있습니다.</p> + + + +<h2 id="명세">명세</h2> + +<table> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>초기 정의. JavaScript 1.3 에 구현됨.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.4.3', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("javascript.builtins.Function.apply")}}</p> + + + +<h2 id="함께_보기">함께 보기</h2> + +<ul> + <li>{{jsxref("Functions/arguments", "arguments")}} 객체</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Functions", "Functions and function scope", "", 1)}}</li> + <li>{{jsxref("Reflect.apply()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/function/arguments/index.html b/files/ko/web/javascript/reference/global_objects/function/arguments/index.html new file mode 100644 index 0000000000..9a498f2468 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/function/arguments/index.html @@ -0,0 +1,60 @@ +--- +title: Function.arguments +slug: Web/JavaScript/Reference/Global_Objects/Function/arguments +translation_of: Web/JavaScript/Reference/Global_Objects/Function/arguments +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p><code><strong><em>function</em>.arguments</strong></code> 속성은 함수로 부터 넘겨 받은 arguments에 해당하는 배열과 같은 객체이다. 간단하게 {{jsxref("Functions/arguments", "arguments")}}를 대신 사용하자. 이 속성은 strict mode에서 <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-addrestrictedfunctionproperties">꼬리 호출 최적화</a> 때문에 금지 된다.</p> + +<h2 id="설명">설명</h2> + +<p><code><em>function</em>.arguments</code> 문법은 deprecated 되었다. 함수 내 에서 사용 가능한 객체{{jsxref("Functions/arguments", "arguments")}}에 접근하는 추천되는 방법은 단순히 {{jsxref("Functions/arguments", "arguments")}}변수로 참조하는 것이다.</p> + +<p>반복문의 경우, 함수 <code>f</code> 가 여러번 호출 스택에 나타나면, <code>f.arguments</code>의 값은 함수의 가장 최근 호출 arguments를 나타낸다.</p> + +<p>arguments의 값은 함수 실행 과정에서 특별한 호출이 없다면 일반적으로 null 이다 (즉, 함수가 호출은 되었으나 반환되지 않음).</p> + +<h2 id="예제">예제</h2> + +<h3 id="arguments_object를_사용한_예시">arguments object를 사용한 예시</h3> + +<pre class="brush: js">function f(n) { g(n - 1); } + +function g(n) { + console.log('before: ' + g.arguments[0]); + if (n > 0) { f(n); } + console.log('after: ' + g.arguments[0]); +} + +f(2); + +console.log('returned: ' + g.arguments); + +// Output + +// before: 1 +// before: 0 +// after: 0 +// after: 1 +// returned: null +</pre> + +<h2 id="Specifications">Specifications</h2> + +<p><code><em>function</em>.arguments</code>는 표준이 아니다. ECMAScript 3에서 {{jsxref("Functions/arguments", "arguments")}}를 참조하기 때문에 deprecated 되었다.</p> + +<h2 id="Browser_호환성">Browser 호환성</h2> + +<div> +<div class="hidden">이 페이지에 있는 호환성 테이블은 구조화된 데이터로 생성 되었습니다. 이 데이터에 기여를 하기 원하시면, 이 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 페이지를 확인 하시고 Pull Request를 보내주시기 바랍니다.</div> + +<p>{{Compat("javascript.builtins.Function.arguments")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Functions/arguments", "arguments")}} 객체</li> + <li>{{jsxref("Functions", "Functions and function scope", "", 1)}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/function/bind/index.html b/files/ko/web/javascript/reference/global_objects/function/bind/index.html new file mode 100644 index 0000000000..6a39852239 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/function/bind/index.html @@ -0,0 +1,296 @@ +--- +title: Function.prototype.bind() +slug: Web/JavaScript/Reference/Global_Objects/Function/bind +tags: + - ECMAScript 2015 + - Function + - JavaScript + - Method + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind +--- +<div>{{JSRef}}</div> + +<p><code><strong>bind()</strong></code> 메소드가 호출되면 새로운 함수를 생성합니다. 받게되는 첫 인자의 value로는 <code>this</code> 키워드를 설정하고, 이어지는 인자들은 바인드된 함수의 인수에 제공됩니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/function-bind.html", "taller")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>func</var>.bind(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>thisArg</code></dt> + <dd>바인딩<span style="font-size: 13.3333px;"> </span>함수가 대상 함수(target function)의 <code>this</code>에 전달하는 값입니다. 바인딩 함수를 {{jsxref("Operators/new", "new")}} 연산자로 생성한 경우 무시됩니다. <code>bind</code>를 사용하여 <code>setTimeout</code> 내에 콜백 함수를 만들 때, <code>thisArg</code>로 전달된 원시 값은 객체로 변환됩니다. <code>bind</code>할 인수(argument)가 제공되지 않으면 실행 스코프 내의 <code>this</code>는 새로운 함수의 <code>thisArg</code>로 처리됩니다.</dd> + <dt><code>arg1, arg2, ...</code></dt> + <dd>대상 함수의 인수 앞에 사용될 인수.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>지정한 <code>this</code> 값 및 초기 인수를 사용하여 변경한 원본 함수의 복제본.</p> + +<h2 id="설명">설명</h2> + +<p><code>bind()</code> 함수는 새로운 바인딩한 함수를 만듭니다. 바인딩한 함수는 원본 함수 객체를 감싸는 함수로, ECMAScript 2015에서 말하는 특이 함수 객체<sup>exotic function object</sup>입니다. 바인딩한 함수를 호출하면 일반적으로 래핑된 함수가 호출 됩니다.</p> + +<p>바인딩한 함수는 다음과 같은 내부 속성을 가지고 있습니다.</p> + +<ul> + <li><code><strong>[[BoundTargetFunction]]</strong></code> - 바인딩으로 감싼(wrapped) 원본 함수 객체.</li> + <li><code><strong>[[BoundThis]]</strong></code> - 감싸진 함수를 호출했을 때 항상 전달되는 값.</li> + <li><code><strong>[[BoundArguments]]</strong></code> - 감싸진 함수가 호출될 때 첫 번째 인수로 사용되는 값들의 목록.</li> + <li><code><strong>[[Call]]</strong></code> - 이 객체와 관련된 코드 실행. 함수 호출 식을 통해 호출됨. 내부 메소드의 인수는 this 값 및 호출 식으로 함수에 전달되는 인수를 포함하는 목록입니다.</li> +</ul> + +<p>바인딩된 함수가 호출될 때 <code>[[BoundTargetFunction]]</code>의 내부 메소드 <code>[[Call]]</code>을 호출합니다. <code>[[Call]]</code> 은 <code>Call(<em>boundThis</em>, <em>args</em>)</code>와 같은 인자를 가집니다. 이 때, <code><em>boundThis</em></code>는 <code>[[BoundThis]]</code>이고, <code><em>args</em></code>는 함수가 호출될 때 전달되어 따라오는 <code>[[BoundArguments]]</code> 입니다.</p> + +<p>바인딩된 함수는 {{jsxref("Operators/new", "new")}} 연산자를 사용하여 생성될 수도 있습니다: 그렇게 하면 대상 함수가 마치 대신 생성된 것처럼 행동합니다. 제공된 <code>this</code> 값은 무시됩니다, 앞에 붙인(prepend) 인수는 에뮬레이트된 함수에 제공되지만.</p> + +<h2 id="예제">예제</h2> + +<h3 id="바인딩된_함수_생성">바인딩된 함수 생성</h3> + +<p><code>bind()</code>의 가장 간단한 사용법은 호출 방법과 관계없이 특정 <code>this</code> 값으로 호출되는 함수를 만드는 겁니다. 초보 JavaScript 프로그래머로서 흔한 실수는 객체로부터 메소드를 추출한 뒤 그 함수를 호출할때, 원본 객체가 그 함수의 <code>this</code>로 사용될 것이라 기대하는 겁니다(예시 : 콜백 기반 코드에서 해당 메소드 사용). 그러나 특별한 조치가 없으면, 대부분의 경우 원본 객체는 손실됩니다. 원본 객체가 바인딩 되는 함수를 생성하면, 이러한 문제를 깔끔하게 해결할 수 있습니다.</p> + +<pre class="brush: js">this.x = 9; +var module = { + x: 81, + getX: function() { return this.x; } +}; + +module.getX(); // 81 + +var retrieveX = module.getX; +retrieveX(); +// 9 반환 - 함수가 전역 스코프에서 호출됐음 + +// module과 바인딩된 'this'가 있는 새로운 함수 생성 +// 신입 프로그래머는 전역 변수 x와 +// module의 속성 x를 혼동할 수 있음 +var boundGetX = retrieveX.bind(module); +boundGetX(); // 81 +</pre> + +<h3 id="부분_적용_함수">부분 적용 함수</h3> + +<p><code>bind()</code>의 다음으로 간단한 사용법은 미리 지정된 초기 인수가 있는 함수를 만드는 겁니다. 지정될 초기 인수가 있다면 제공된 <code>this</code> 값을 따르고, 바인딩 된 함수에 전달되어 바인딩 된 함수가 호출될 때마다 대상 함수의 인수 앞에 삽입됩니다.</p> + +<pre><code>function list() { + return Array.prototype.slice.call(arguments); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] + +// 선행될 인수를 설정하여 함수를 생성합니다. +var leadingThirtysevenList = list.bind(null, 37); + +var list2 = leadingThirtysevenList(); // [37] + +var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3] + + +function addArguments(arg1, arg2) { + return arg1 + arg2 +} + +var result1 = addArguments(1, 2); // 3 + +// 첫 번째 인수를 지정하여 함수를 생성합니다. +var addThirtySeven = addArguments.bind(null, 37); + +var result2 = addThirtySeven(5); // 37 + 5 = 42 + +// 두 번째 인수는 무시됩니다. +var result3 = addThirtySeven(5, 10); // 37 + 5 = 42</code> +</pre> + +<h3 id="setTimeout과_함께_사용"><code>setTimeout</code>과 함께 사용</h3> + +<p>{{domxref("window.setTimeout()")}} 내에서 기본으로, <code>this</code> 키워드는 {{ domxref("window") }} (또는 <code>global</code>) 객체로 설정됩니다. 클래스 인스턴스를 참조하는 <code>this</code>를 필요로 하는 클래스 메소드로 작업하는 경우, 명시해서 <code>this</code>를 콜백 함수에 바인딩할 수 있습니다, 인스턴스를 유지하기 위해.</p> + +<pre class="brush: js">function LateBloomer() { + this.petalCount = Math.ceil(Math.random() * 12) + 1; +} + +// 1초 지체 후 bloom 선언 +LateBloomer.prototype.bloom = function() { + window.setTimeout(this.declare.bind(this), 1000); +}; + +LateBloomer.prototype.declare = function() { + console.log('I am a beautiful flower with ' + + this.petalCount + ' petals!'); +}; + +var flower = new LateBloomer(); +flower.bloom(); +// 1초 뒤, 'declare' 메소드 유발</pre> + +<h3 id="생성자로_쓰이는_바인딩된_함수">생성자로 쓰이는 바인딩된 함수</h3> + +<div class="warning"> +<p><strong>경고:</strong> 이 부분은 JavaScript 능력을 보이고 <code>bind()</code> 메소드의 일부 극단 상황(edge case)을 기록합니다. 아래 보이는 메소드는 일을 하는 가장 좋은 방법은 아니며 아마도 상용 환경에서 전혀 사용되지 않을 겁니다.</p> +</div> + +<p>바인딩된 함수는 자동으로 대상 함수에 의해 생성되는 새로운 인스턴스를 생성하는 {{jsxref("Operators/new", "new")}} 연산자와 함께 쓰기에 적합합니다. 바인딩된 함수가 값을 생성하는 데 쓰이는 경우, 제공된 <code>this</code>는 무시됩니다. 그러나, 제공된 인수는 여전히 생성자 호출에 (인수부) 앞에 붙습니다:</p> + +<pre class="brush: js">function Point(x, y) { + this.x = x; + this.y = y; +} + +Point.prototype.toString = function() { + return this.x + ',' + this.y; +}; + +var p = new Point(1, 2); +p.toString(); // '1,2' + +// 아래 폴리필에서는 지원되지 않음, + +// 원 bind와는 잘 작동: + +var YAxisPoint = Point.bind(null, 0/*x*/); + + +var emptyObj = {}; +var YAxisPoint = Point.bind(emptyObj, 0/*x*/); + +var axisPoint = new YAxisPoint(5); +axisPoint.toString(); // '0,5' + +axisPoint instanceof Point; // true +axisPoint instanceof YAxisPoint; // true +new Point(17, 42) instanceof YAxisPoint; // true +</pre> + +<p>{{jsxref("Operators/new", "new")}}와 함께 쓰기 위한 바인딩된 함수를 만들기 위해 특별한 일을 할 필요가 없음을 주의하세요. 그 결과 분명히 호출되는 바인딩된 함수를 만들기 위해 특별히 아무것도 할 필요가 없습니다, 오히려 {{jsxref("Operators/new", "new")}}를 사용해서만 호출되는 바인딩된 함수를 요구하는 경우에도.</p> + +<pre class="brush: js">// 예는 JavaScript 콘솔에서 직접 실행될 수 있음 +// ...위에서부터 이어짐 + +// 여전히 일반 함수로서 호출될 수 있음 +// (보통 이를 원하지 않더라도) +YAxisPoint(13); + +emptyObj.x + ',' + emptyObj.y; +// > '0,13' +</pre> + +<p>오로지 {{jsxref("Operators/new", "new")}}를 사용하거나 호출해서만 바인딩된 함수의 사용을 지원하고 싶은 경우, 대상 함수는 그 제한을 강제해야 합니다.</p> + +<h3 id="바로_가기_생성">바로 가기 생성</h3> + +<p><code>bind()</code>는 특정 <code>this</code> 값을 필요로 하는 함수의 바로 가기(shortcut)를 만들고 싶은 경우에도 도움이 됩니다.</p> + +<p>가령, 배열 같은 객체를 실제 배열로 변환하는 데 사용하고 싶은 {{jsxref("Array.prototype.slice")}}를 취하세요. 이와 같은 바로 가기를 만들 수 있습니다:</p> + +<pre class="brush: js">var slice = Array.prototype.slice; + +// ... + +slice.apply(arguments); +</pre> + +<p><code>bind()</code>로, 이는 단순화될 수 있습니다. 다음 조각 코드에서, <code>slice</code>는 {{jsxref("Function.prototype")}}의 {{jsxref("Function.prototype.apply()", "apply()")}} 함수에 바인딩된 함수입니다, <code>this</code> 값을 {{jsxref("Array.prototype")}}의 {{jsxref("Array.prototype.slice()", "slice()")}} 함수로 설정한 채. 이는 추가 <code>apply()</code> 호출은 삭제될 수 있음을 뜻합니다:</p> + +<pre class="brush: js">// 이전 예에서 "slice"와 같음 +var unboundSlice = Array.prototype.slice; +var slice = Function.prototype.apply.bind(unboundSlice); + +// ... + +slice(arguments); +</pre> + +<h2 id="폴리필">폴리필</h2> + +<p><code>bind</code> 함수는 ECMA-262 제5판에 추가되었습니다; 그러하기에 모든 브라우저에 없을 수 있습니다. 스크립트 시작 부분에 다음 코드를 삽입함으로써 이 문제를 부분적으로 해결할수 있으며, bind() 지원하지 않는 구현에서도 대부분의 기능을 사용할 수 있습니다.</p> + +<pre class="brush: js">if (!Function.prototype.bind) { + Function.prototype.bind = function(oThis) { + if (typeof this !== 'function') { + // ECMAScript 5 내부 IsCallable 함수와 + // 가능한 가장 가까운 것 + throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable'); + } + + var aArgs = Array.prototype.slice.call(arguments, 1), + fToBind = this, + fNOP = function() {}, + fBound = function() { + return fToBind.apply(this instanceof fNOP + ? this + : oThis, + aArgs.concat(Array.prototype.slice.call(arguments))); + }; + + if (this.prototype) { + // Function.prototype은 prototype 속성이 없음 + fNOP.prototype = this.prototype; + } + fBound.prototype = new fNOP(); + + return fBound; + }; +} +</pre> + +<p>이 알고리즘과 스펙화된 알고리즘 간 많은 차이(충분히 다른 차이가 있을 수 있습니다, 이 목록은 정말 철저히 하지 않았기에) 중 일부는 다음입니다:</p> + +<ul> + <li>부분 구현은 {{jsxref("Array.prototype.slice()")}}, {{jsxref("Array.prototype.concat()")}}, {{jsxref("Function.prototype.call()")}} 및 {{jsxref("Function.prototype.apply()")}}, 원래 값을 갖는 내장 메소드에 의존합니다.</li> + <li>부분 구현은 불변(immutable) "poison pill" {{jsxref("Function.caller", "caller")}} 및 get, set 또는 삭제 시 {{jsxref("Global_Objects/TypeError", "TypeError")}}가 발생하는 <code>arguments</code> 속성이 없는 함수를 만듭니다. (이는 구현이 {{jsxref("Object.defineProperty")}}를 지원하는 경우 추가 또는 구현이 {{jsxref("Object.defineGetter", "__defineGetter__")}} 및 {{jsxref("Object.defineSetter", "__defineSetter__")}} 메소드를 지원하는 경우 [삭제 시 오류 발생(throw-on-delete) 동작(behavior) 없이] 부분 구현될 수 있습니다.)</li> + <li>부분 구현은 <code>prototype</code> 속성이 있는 함수를 만듭니다. (고유 바인딩된 함수는 없습니다.)</li> + <li>부분 구현은 {{jsxref("Function.length", "length")}} 속성이 ECMA-262에 의해 부여된(mandated) 그것과 일치하지 않는 바인딩된 함수를 만듭니다: 길이 0인 함수를 만듭니다, 반면에 전체 구현은 대상 함수의 길이 및 미리 지정된 인수의 수에 따라 0이 아닌 길이를 반환할 수 있습니다.</li> +</ul> + +<p>이 부분 구현을 쓰기로 고른 경우, <strong>동작이 ECMA-262 제5판을 벗어난 경우에 의존하지 않아야 합니다!</strong> 그러나 주의 약간(과 아마도 특정 요구에 맞추기 위한 추가 수정)으로, 이 부분 구현은 <code>bind()</code>가 스펙에 따라 널리 구현될 때까지 적당한 다리가 될 수 있습니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.4.5', 'Function.prototype.bind')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>초기 정의. JavaScript 1.8.5에서 구현됨.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("javascript.builtins.Function.bind")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Function.prototype.apply()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Functions", "함수", "", 1)}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/function/call/index.html b/files/ko/web/javascript/reference/global_objects/function/call/index.html new file mode 100644 index 0000000000..a92a7ab931 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/function/call/index.html @@ -0,0 +1,197 @@ +--- +title: Function.prototype.call() +slug: Web/JavaScript/Reference/Global_Objects/Function/call +tags: + - Function + - JavaScript + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Function/call +--- +<div>{{JSRef}}</div> + +<p><code><strong>call()</strong></code> 메소드는 주어진 <code>this</code> 값 및 각각 전달된 인수와 함께 함수를 호출합니다.</p> + +<div class="blockIndicator note"> +<p><strong>주의:</strong> 이 함수 구문은 {{jsxref("Function.prototype.apply", "apply()")}}와 거의 동일하지만, <code>call()</code>은 <strong>인수 목록</strong>을, 반면에 <code>apply()</code>는 <strong>인수 배열 하나</strong>를 받는다는 점이 중요한 차이점입니다.</p> +</div> + +<p>{{EmbedInteractiveExample("pages/js/function-call.html")}}</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>func</var>.call(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>thisArg</code></dt> + <dd><em><code>func</code></em> 호출에 제공되는 <code>this</code>의 값.</dd> +</dl> + +<div class="blockIndicator note"> +<dl> + <dd></dd> + <dd> + <p><code>this</code>는 메소드에 의해 보이는 실제값이 아닐 수 있음을 주의하세요: 메소드가 {{jsxref("Functions_and_function_scope/Strict_mode", "비엄격 모드", "", 1)}} 코드 내 함수인 경우, {{jsxref("Global_Objects/null", "null")}} 및 {{jsxref("Global_Objects/undefined", "undefined")}}는 전역 객체로 대체되고 원시값은 객체로 변환됩니다.</p> + </dd> +</dl> +</div> + +<p><code>arg1, arg2, ...</code></p> + +<dl> + <dd>객체를 위한 인수.</dd> +</dl> + +<h3 id="반환값Return_Value">반환값(Return Value)</h3> + +<p><code>this</code> 와 arguments 를 매개로 호출된 함수의 반환값</p> + +<h2 id="설명">설명</h2> + +<p><code>call()</code>은 이미 할당되어있는 다른 객체의 함수/메소드를 호출하는 해당 객체에 재할당할때 사용됩니다. <code>this</code>는 현재 객체(호출하는 객체)를 참조합니다. 메소드를 한번 작성하면 새 객체를 위한 메소드를 재작성할 필요 없이 <code>call()</code>을 이용해 다른 객체에 상속할 수 있습니다.</p> + +<h2 id="예">예</h2> + +<h3 id="객체의_생성자_연결에_call_사용">객체의 생성자 연결에 <code>call</code> 사용</h3> + +<p>Java와 비슷하게, 객체의 생성자 연결(chain)에 <code>call</code>을 사용할 수 있습니다. 다음 예에서, <code>Product</code> 객체의 생성자는 <code>name</code> 및 <code>price</code> 를 매개변수로 정의됩니다. 다른 두 함수 <code>Food</code> 및 <code>Toy</code>는 <code>this</code> 및 <code>name</code>과 <code>price</code>를 전달하는 <code>Product</code>를 호출합니다. <code>Product</code>는 <code>name</code> 및 <code>price</code> 속성을 초기화하고, 특수한 두 함수(Food 및 Toy)는 <code>category</code>를 정의합니다.</p> + +<pre class="brush: js">function Product(name, price) { + this.name = name; + this.price = price; + + if (price < 0) { + throw RangeError('Cannot create product ' + + this.name + ' with a negative price'); + } +} + +function Food(name, price) { + Product.call(this, name, price); + this.category = 'food'; +} + +function Toy(name, price) { + Product.call(this, name, price); + this.category = 'toy'; +} + +var cheese = new Food('feta', 5); +var fun = new Toy('robot', 40); +</pre> + +<h3 id="익명_함수_호출에_call_사용">익명 함수 호출에 <code>call</code> 사용</h3> + +<p>이 예제에서는 익명 함수를 만들고 배열 내 모든 객체에서 이를 호출하기 위해 <code>call</code>을 사용합니다. 여기서 익명 함수의 주목적은 배열 내 객체의 정확한 인덱스를 출력할 수 있는 모든 객체에 print 함수를 추가하는 것 입니다.</p> + +<div class="blockIndicator note"> +<p><code>this</code> 값으로 객체 전달이 반드시 필요하지는 않지만, 해당 예제에서는 설명의 목적으로 사용했습니다. </p> +</div> + +<pre class="brush: js">var animals = [ + { species: 'Lion', name: 'King' }, + { species: 'Whale', name: 'Fail' } +]; + +for (var i = 0; i < animals.length; i++) { + (function(i) { + this.print = function() { + console.log('#' + i + ' ' + this.species + + ': ' + this.name); + } + this.print(); + }).call(animals[i], i); +} +</pre> + +<h3 id="함수_호출_및_this를_위한_문맥_지정에_call_사용">함수 호출 및 '<code>this</code>'를 위한 문맥 지정에 <code>call</code> 사용</h3> + +<p>아래 예제에서, <code>greet</code>을 호출하면 <code>this</code> 값은 객체 <code>obj</code>에 바인딩됩니다.</p> + +<pre class="brush: js">function greet() { + var reply = [this.animal, 'typically sleep between', this.sleepDuration].join(' '); + console.log(reply); +} + +var obj = { + animal: 'cats', sleepDuration: '12 and 16 hours' +}; + +greet.call(obj); // cats typically sleep between 12 and 16 hours +</pre> + +<h3 id="첫번째_인수_지정_없이_함수_호출에_call_사용">첫번째 인수 지정 없이 함수 호출에 <code>call</code> 사용</h3> + +<p>아래 예제에서, <code>display</code> 함수에 첫번째 인수를 전달하지 않고 호출합니다. 첫번째 인수를 전달하지 않으면, <code>this</code>의 값은 전역 객체에 바인딩됩니다.</p> + +<pre class="brush: js">var sData = 'Wisen'; +function display(){ + console.log('sData value is %s ', this.sData); +} + +display.call(); // sData value is Wisen +</pre> + +<div class="blockIndicator note"> +<p><strong> 주의:</strong> 엄격 모드(strict mode)에서, <code>this</code> 는 <code>undefined</code>값을 가집니다. See below.</p> +</div> + +<pre>'use strict'; + +var sData = 'Wisen'; + +function display() { + console.log('sData value is %s ', this.sData); +} + +display.call(); // Cannot read the property of 'sData' of undefined +</pre> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>초기 정의. JavaScript 1.3에서 구현됨.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.4.4', 'Function.prototype.call')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function.prototype.call', 'Function.prototype.call')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.call', 'Function.prototype.call')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.Function.call")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li> + <h2 id="jsxrefFunction.prototype.bind">{{jsxref("Function.prototype.bind()")}}</h2> + </li> + <li>{{jsxref("Function.prototype.apply()")}}</li> + <li> + <p><a href="/ko/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">객체 지향 JavaScript 소개</a></p> + </li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/function/index.html b/files/ko/web/javascript/reference/global_objects/function/index.html new file mode 100644 index 0000000000..5d7dde941a --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/function/index.html @@ -0,0 +1,167 @@ +--- +title: Function +slug: Web/JavaScript/Reference/Global_Objects/Function +tags: + - Constructor + - Function + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/Function +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><strong><code>Function</code> 생성자</strong>는 새 <code>Function</code> 객체를 만듭니다.</span> 이 생성자를 직접 호출하여 동적으로 함수를 생성할 수도 있으나, 보안 문제 및 {{jsxref("eval")}}과 유사한(그러나 훨씬 덜 심각한) 성능 문제가 발생할 수 있습니다. 하지만 <code>eval</code>과 달리, <code>Function</code> 생성자는 전역 범위로 한정된 함수만 생성합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/function-constructor.html")}}</div> + + + +<p>모든 JavaScript 함수는 사실 <code>Function</code> 객체입니다. 이는 <code>(function(){}).constructor === Function</code>이 참을 반환하는 것에서 알 수 있습니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code>new Function ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>형식 인수 이름으로 사용할 이름. 각 이름은 유효한 JavaScript {{glossary("identifier", "식별자")}}거나, 쉼표로 구분한 유효한 식별자 목록이어야 합니다. 즉, "<code>x</code>", "<code>theValue</code>", "<code>x,theValue</code>"등의 값을 사용할 수 있습니다.</dd> + <dt><code>functionBody</code></dt> + <dd>함수 정의를 구성하는 JavaScript 문을 담은 문자열.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p><code>Function</code> 생성자로 생성한 <code>Function</code> 객체는 함수를 생성할 때 구문 분석을 수행합니다. 반면, {{jsxref("Operators/function", "함수 표현식", "", 1)}}이나 {{jsxref("Statements/function", "함수 선언문", "", 1)}}으로 함수를 정의하고 코드 내에서 호출한 경우 나머지 코드와 함께 구문 분석되므로, <code>Function</code> 생성자가 더 비효율적입니다.</p> + +<p>함수로 전달되는 모든 인수는 생성될 함수의 매개 변수 식별자 이름으로 전달되는 순서대로 처리됩니다.</p> + +<p>(<code>new</code> 연산자를 사용하지 않고) 함수로써 <code>Function</code> 생성자를 호출하는 것은 생성자로 호출하는 것과 같습니다. 하지만, new 연산자가 제거됨으로써 코드의 크기를 약간(4 바이트 더 작게) 줄일 수 있으므로 <code>Function</code>에 대해서는 <code>new</code> 연산자를 사용하지 않는 것이 좋습니다.</p> + +<h2 id="Function의_속성과_메서드"><code>Function</code>의 속성과 메서드</h2> + +<p>전역 <code>Function</code> 객체는 자신만의 메서드 또는 속성이 없습니다. 그러나, 그 자체로 함수이기에 {{jsxref("Function.prototype")}}에서 프로토타입 체인을 통해 일부 메서드 및 속성을 상속받습니다.</p> + +<h2 id="Function_프로토타입_객체"><code>Function</code> 프로토타입 객체</h2> + +<h3 id="속성">속성</h3> + +<div> +<dl> + <dt>{{jsxref("Function.arguments")}} {{deprecated_inline}}</dt> + <dd>함수에 전달되는 인수(argument)에 해당하는 배열. 이는 {{jsxref("Function")}}의 속성으로 사라지므로(deprecated), 대신 함수 내에서 이용 가능한 {{jsxref("Functions/arguments", "arguments")}} 객체를 사용하세요.</dd> + <dt><s class="obsoleteElement">{{jsxref("Function.arity")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">함수에 의해 기대되는 인수의 수를 지정하기 위해 사용됐으나 제거되었습니다. 대신 {{jsxref("Function.length", "length")}} 속성을 사용하세요.</s></dd> + <dt>{{jsxref("Function.caller")}} {{non-standard_inline}}</dt> + <dd>현재 실행 중인 함수를 호출한 함수를 지정합니다.</dd> + <dt>{{jsxref("Function.length")}}</dt> + <dd>함수에 의해 기대되는 인수의 수를 지정합니다.</dd> + <dt>{{jsxref("Function.name")}}</dt> + <dd>함수명.</dd> + <dt>{{jsxref("Function.displayName")}} {{non-standard_inline}}</dt> + <dd>함수의 표시명.</dd> + <dt><code>Function.prototype.constructor</code></dt> + <dd>객체의 프로토타입을 만드는 함수를 지정합니다. 자세한 사항은 {{jsxref("Object.prototype.constructor")}} 참조.</dd> +</dl> +</div> + +<h3 id="메서드">메서드</h3> + +<div> +<dl> + <dt>{{jsxref("Function.prototype.apply()")}}</dt> + <dd>함수를 호출하고 <em>this</em>를 제공된 값으로 설정합니다, 인수는 {{jsxref("Array")}} 객체로 전달될 수 있습니다.</dd> + <dt>{{jsxref("Function.prototype.bind()")}}</dt> + <dd>호출될 때 <em>this</em>를 제공된 값으로 설정하는 새로운 함수를 만듭니다, 새로운 함수가 호출됐을 때 주어진 순서로 모두 제공되는 선행 인수와 함께.</dd> + <dt>{{jsxref("Function.prototype.call()")}}</dt> + <dd>함수를 호출(실행)하고 <em>this</em>를 제공된 값으로 설정합니다, 인수는 그대로 전달될 수 있습니다.</dd> + <dt>{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}</dt> + <dd>함수가 <a href="/ko/docs/Web/JavaScript/Guide/Iterators_and_Generators" title="generator">생성기</a>인 경우 <code>true</code>를 반환합니다; 그렇지 않으면 <code>false</code>를 반환합니다.</dd> + <dt>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>함수의 소스 코드를 나타내는 문자열을 반환합니다. {{jsxref("Object.prototype.toSource")}} 메서드를 재정의(override)합니다.</dd> + <dt>{{jsxref("Function.prototype.toString()")}}</dt> + <dd>함수의 소스 코드를 나타내는 문자열을 반환합니다. {{jsxref("Object.prototype.toString")}} 메서드를 재정의합니다.</dd> +</dl> +</div> + +<h2 id="Function_인스턴스"><code>Function</code> 인스턴스</h2> + +<p><code>Function</code> 인스턴스는 {{jsxref("Function.prototype")}}에서 메서드 및 속성을 상속받습니다. 모든 생성자와 마찬가지로, 생성자의 프로토타입 객체를 바꿈으로써 모든 <code>Function</code> 인스턴스에 변화를 줄 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Function_생성자에_인수_지정하기"><code>Function</code> 생성자에 인수 지정하기</h3> + +<p>다음 코드는 인수 두 개를 갖는 <code>Function</code> 객체를 생성합니다.</p> + +<pre class="brush: js">// 예제는 JavaScript 콘솔에서 직접 실행하실 수 있습니다 + +// 두 개의 인수를 가지고 그 둘의 합을 반환하는 함수 생성 +var adder = new Function('a', 'b', 'return a + b'); + +// 함수 호출 +adder(2, 6); +// > 8 +</pre> + +<p>인수 "<code>a</code>" 및 "<code>b</code>"는 함수 몸통(body)의 "<code>return a + b</code>"에 사용되는 형식 인수명입니다.</p> + +<h3 id="Function_생성자와_함수_선언의_차이">Function 생성자와 함수 선언의 차이</h3> + +<p><code>Function</code> 생성자로 만들어지는 함수는 생성 컨텍스트에 대한 클로저(closure)를 생성하지 않습니다; 이들 함수는 항상 전역 범위에서 생성됩니다. 함수가 실행될 때, 자신의 지역 변수와 전역 변수에만 접근할 수 있으며 <code>Function</code> 생성자가 호출된 그 범위의 변수에는 접근할 수 없습니다. 이 점이 함수 표현식 코드에서 {{jsxref("eval")}}을 사용하는 것과 다른 점입니다.</p> + +<pre class="brush: js">var x = 10; + +function createFunction1() { + var x = 20; + return new Function('return x;'); // 여기서 |x|는 전역 범위에 있는 |x|를 참조함. +} + +function createFunction2() { + var x = 20; + function f() { + return x; // 여기서 |x|는 위의 지역에 있는 |x|를 참조함. + } + return f; +} + +var f1 = createFunction1(); +console.log(f1()); // 10 +var f2 = createFunction2(); +console.log(f2()); // 20 +</pre> + +<p>위 코드는 브라우저에서는 정상 동작하지만, {{glossary("Node.js")}}에서는 <code>x</code>를 찾을 수 없어, <code>f1()</code>이 <code>ReferenceError</code>를 생성합니다. 이는 Node.js의 최상위 스크립트 범위가 전역이 아닌 모듈이므로, <code>x</code>도 모듈 범위에 종속되기 때문입니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Functions", "Functions and function scope")}}</li> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("AsyncFunction")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/function/length/index.html b/files/ko/web/javascript/reference/global_objects/function/length/index.html new file mode 100644 index 0000000000..f9e6b30adf --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/function/length/index.html @@ -0,0 +1,80 @@ +--- +title: Function.length +slug: Web/JavaScript/Reference/Global_Objects/Function/length +tags: + - Function + - JavaScript + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Function/length +--- +<div>{{JSRef}}</div> + +<p><code><strong>length</strong></code> 속성은 함수가 기대하는 인수의 수를 나타냅니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/function-length.html")}}</p> + +<div>{{js_property_attributes(0,0,1)}}</div> + +<h2 id="설명">설명</h2> + +<p><code>length</code>는 함수 객체의 속성으로, 함수가 얼마나 많은 인수를 기대하는지 나타냅니다, 즉 형식 매개변수의 수. 이 수는 {{jsxref("rest_parameters", "나머지 매개변수", "", 1)}}를 포함하지 않습니다. 그에 반해, {{jsxref("Functions/arguments/length", "arguments.length")}}는 함수에 지역(local)이고 실제로 함수에 전달된 인수의 수를 제공합니다.</p> + +<h3 id="Function_생성자의_데이터_속성"><code>Function</code> 생성자의 데이터 속성</h3> + +<p>{{jsxref("Function")}} 생성자는 그 자체로 {{jsxref("Function")}} 객체입니다. 그 <code>length</code> 데이터 속성은 값이 1입니다. 속성의 attribute: 쓰기가능(Writable): <code>false</code>, 열거가능(Enumerable): <code>false</code>, 설정가능(Configurable): <code>true</code>.</p> + +<h3 id="Function_프로토타입_객체의_속성"><code>Function</code> 프로토타입 객체의 속성</h3> + +<p>{{jsxref("Function")}} 프로토타입 객체의 length 속성은 값이 0입니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">console.log(Function.length); /* 1 */ + +console.log((function() {}).length); /* 0 */ +console.log((function(a) {}).length); /* 1 */ +console.log((function(a, b) {}).length); /* 2 등. */ +console.log((function(...args) {}).length); /* 0, 나머지 매개변수는 계산되지 않음 */ +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>초기 정의. JavaScript 1.1에서 구현됨.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.5.1', 'Function.length')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-instances-length', 'Function.length')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>이 속성의 설정가능(<code>configurable</code>) attribute은 이제 <code>true</code>임.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-instances-length', 'Function.length')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.Function.length")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/function/name/index.html b/files/ko/web/javascript/reference/global_objects/function/name/index.html new file mode 100644 index 0000000000..ce2d665b73 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/function/name/index.html @@ -0,0 +1,191 @@ +--- +title: Function.name +slug: Web/JavaScript/Reference/Global_Objects/Function/name +tags: + - ECMAScript6 + - Function + - JavaScript + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Function/name +--- +<div>{{JSRef}}</div> + +<p><code><strong><em>function</em>.name</strong></code> 속성(property)은 함수 이름을 반환합니다.</p> + +<div>{{js_property_attributes(0,0,1)}}</div> + +<p>비표준, ES6 이전 구현에서는 설정가능(<code>configurable</code>) attribute도 <code>false</code>였음을 주의하세요.</p> + +<h2 id="설명">설명</h2> + +<p><code>name</code> 속성은 함수 이름 또는 (ES6 구현 이전) 익명(anonymous) 함수에 대해서는 빈 문자열을 반환합니다:</p> + +<pre class="brush: js">function doSomething() {} + +console.log(doSomething.name); // logs "doSomething" +</pre> + +<p><code>new Function(...)</code> 또는 그냥 <code>Function(...)</code> 구문으로 생성된 함수는 <code>name</code> 속성을 빈 문자열로 설정합니다. 다음 예에서는 익명 함수가 생성되므로 <code>name</code>은 빈 문자열을 반환합니다:</p> + +<pre class="brush: js">var f = function() {}; +var object = { + someMethod: function() {} +}; + +console.log(f.name == ''); // true +console.log(object.someMethod.name == ''); // 역시 true +</pre> + +<p>ES6 함수를 구현한 브라우저는 익명 함수 이름을 그 구문상 위치로부터 추측할 수 있습니다. 예를 들어:</p> + +<pre class="brush: js">var f = function() {}; +console.log(f.name); // "f"</pre> + +<p>{{jsxref("Operators/Function", "function 식", "", 1)}}에서 이름으로 함수를 정의할 수 있습니다:</p> + +<pre class="brush: js">var object = { + someMethod: function object_someMethod() {} +}; +console.log(object.someMethod.name); // logs "object_someMethod" + +try { object_someMethod } catch(e) { console.log(e); } +// ReferenceError: object_someMethod가 정의되지 않음 +</pre> + +<p>함수 이름은 바꿀 수 없습니다, 이 속성은 읽기 전용입니다:</p> + +<pre class="brush: js">var object = { + // 익명 + someMethod: function() {} +}; + +object.someMethod.name = 'someMethod'; +console.log(object.someMethod.name); // 빈 문자열, someMethod는 익명 +</pre> + +<p>그러나 바꾸려면, {{jsxref("Object.defineProperty()")}}를 사용할 수 있습니다.</p> + +<h2 id="예">예</h2> + +<p>객체의 'class'를 확인하기 위해 <code>obj.constructor.name</code>을 사용할 수 있습니다:</p> + +<pre class="brush: js">function a() {} + +var b = new a(); + +console.log(b.constructor.name); // logs "a" +</pre> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-name', 'name')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-name', 'name')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(33.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Configurable: true</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatGeckoDesktop(38)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Inferred names on anonymous functions</td> + <td>{{CompatChrome(51.0)}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Configurable: true</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(38)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Inferred names on anonymous functions</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(51.0)}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(51.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] {{bug(883377)}} 참조.</p> diff --git a/files/ko/web/javascript/reference/global_objects/function/tosource/index.html b/files/ko/web/javascript/reference/global_objects/function/tosource/index.html new file mode 100644 index 0000000000..dcfbdf49e6 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/function/tosource/index.html @@ -0,0 +1,71 @@ +--- +title: Function.prototype.toSource() +slug: Web/JavaScript/Reference/Global_Objects/Function/toSource +tags: + - JavaScript + - 메소드 + - 함수 +translation_of: Web/JavaScript/Reference/Global_Objects/Function/toSource +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p><code><strong>toSource()</strong></code> 메소드는 객체의 소스 코드를 나타내는 스트링을 반환합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>function</var>.toSource(); +</pre> + +<h3 id="반환_값">반환 값</h3> + +<p>객체의 소스 코드를 나타내는 스트링.</p> + +<h2 id="설명">설명</h2> + +<p><code>toSource</code> 메소드는 다음 값들을 반환합니다.</p> + +<ul> + <li>내장 {{jsxref("Function")}} 객체에 대한 <code>toSource()</code> 는 소스 코드 사용이 불가함을 나타내는 다음 스트링을 반환합니다. + + <pre class="brush: js">function Function() { + [native code] +} +</pre> + </li> + <li>커스텀 함수에 대한 <code>toSource()</code> 는 객체를 정의하는 JavaScript 코드를 스트링으로 반환합니다.</li> + <li> + <pre class="brush: js">// 예시: +function hello() { + console.log("Hello, World!"); +} + +hello.toSource(); +</pre> + </li> + <li> + <pre class="brush: js">// 결과: +"function hello() { + console.log(\"Hello, World!\"); +}"</pre> + </li> +</ul> + +<p>이 메소드는 보통 JavaScript 에 의해 내부적으로 호출되며 코드에서 명시적으로 사용되지 않습니다. 디버깅할 때 객체의 컨텐츠를 검사하기 위해 <code>toSource</code> 를 호출해보실 수 있습니다.</p> + +<h2 id="명세">명세</h2> + +<p>어떠한 표준의 일부도 아닙니다. JavaScript 1.3 에서 구현되었습니다.</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function.toSource")}}</p> +</div> + +<h2 id="함께_보기">함께 보기</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/generator/index.html b/files/ko/web/javascript/reference/global_objects/generator/index.html new file mode 100644 index 0000000000..d29b282355 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/generator/index.html @@ -0,0 +1,186 @@ +--- +title: Generator +slug: Web/JavaScript/Reference/Global_Objects/Generator +tags: + - ECMAScript 2015 + - Generator + - JavaScript + - Legacy Generator + - Legacy Iterator + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Generator +--- +<div>{{JSRef}}</div> + +<p><code><strong>Generator</strong></code> 객체는 {{jsxref("Statements/function*", "generator function", "", 1)}} 으로부터 반환된 값이며 <a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">반복자와 반복자 프로토콜</a>을 준수합니다.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox">function* gen() { + yield 1; + yield 2; + yield 3; +} + +var g = gen(); // "Generator { }"</pre> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("Generator.prototype.next()")}}</dt> + <dd>{{jsxref("Operators/yield", "yield")}} 표현을 통해 yield된 값을 반환합니다.</dd> + <dt>{{jsxref("Generator.prototype.return()")}}</dt> + <dd>주어진 값을 반환하고 생성기를 종료합니다.</dd> + <dt>{{jsxref("Generator.prototype.throw()")}}</dt> + <dd>생성기로 에러를 throw합니다.</dd> +</dl> + +<h2 id="예시">예시</h2> + +<h3 id="무한_반복자">무한 반복자</h3> + +<pre class="brush: js">function* idMaker(){ + var index = 0; + while(true) + yield index++; +} + +var gen = idMaker(); // "Generator { }" + +console.log(gen.next().value); // 0 +console.log(gen.next().value); // 1 +console.log(gen.next().value); // 2 +// ...</pre> + +<h2 id="오래된_Generator_객체">오래된 Generator 객체</h2> + +<p>Firefox (SpiderMonkey)는 <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7</a>에서 이전 버전의 생성기도 구현 했습니다.이 버전에서는 함수 선언에서 별표 (*)가 필요하지 않습니다 (함수 본문에서 <code>yield</code> 키워드 만 사용). 그러나 오래된 생성기는 더 이상 사용되지 않습니다. 사용하지 마십시오. 곧 제거 될 것입니다 ({{bug(1083482)}}).</p> + +<h3 id="오래된_Generator_메서드들">오래된 Generator 메서드들</h3> + +<dl> + <dt><code>Generator.prototype.next() </code>{{non-standard_inline}}</dt> + <dd>{{jsxref("Operators/yield", "yield")}} 표현을 통해 yield된 값을 반환합니다. ES2015 Generator 객체의 <code>next()</code> 에 해당합니다.</dd> + <dt><code>Generator.prototype.close()</code> {{non-standard_inline}}</dt> + <dd>Generator를 닫고, <code>next()가 호출되면 </code>{{jsxref("StopIteration")}} 에러를 던집니다. ES2015 Generator 객체의 <code>return()</code> 에 해당합니다.</dd> + <dt><code>Generator.prototype.send()</code> {{non-standard_inline}}</dt> + <dd>Generator에 값을 전달하기 위해 사용 합니다. 이 값은 {{jsxref("Operators/yield", "yield")}} 표현식에서 반환되고, 다음 {{jsxref("Operators/yield", "yield")}} 표현식으로 부터 yield된 값을 반환합니다. <code>send(x)</code>는 ES2015 Generator 객체의 <code>next(x)에 해당합니다</code>.</dd> + <dt><strong><code>Generator.</code></strong><code>prototype.</code><strong><code>throw()</code> </strong> {{non-standard_inline}}</dt> + <dd>Generator 로 에러를 throw합니다. ES2015 Generator 객체의 <code>throw()</code> 에 해당합니다.</dd> +</dl> + +<h3 id="오래된_Generator_예제">오래된 Generator 예제</h3> + +<pre class="brush: js">function* fibonacci() { + var a = yield 1; + yield a * 2; +} + +var it = fibonacci(); +console.log(it); // "Generator { }" +console.log(it.next()); // 1 +console.log(it.send(10)); // 20 +console.log(it.close()); // undefined +console.log(it.next()); // throws StopIteration (as the generator is now closed)</pre> + +<h2 id="명세">명세</h2> + +<table class=" standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-generator-objects', 'Generator objects')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generator-objects', 'Generator objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(39.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(39.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(39.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<h2 id="같이_보기">같이 보기</h2> + +<h3 id="오래된_Generator">오래된 Generator</h3> + +<ul> + <li>{{jsxref("Statements/Legacy_generator_function", "The legacy generator function", "", 1)}}</li> + <li>{{jsxref("Operators/Legacy_generator_function", "The legacy generator function expression", "", 1)}}</li> + <li>{{jsxref("StopIteration")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol">The legacy Iterator protocol</a></li> +</ul> + +<h3 id="ES2015_Generator">ES2015 Generator</h3> + +<ul> + <li>{{jsxref("Functions", "Functions", "", 1)}}</li> + <li>{{jsxref("Statements/function", "function")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function*", "function*")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/generator/next/index.html b/files/ko/web/javascript/reference/global_objects/generator/next/index.html new file mode 100644 index 0000000000..7f041f9d9b --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/generator/next/index.html @@ -0,0 +1,153 @@ +--- +title: Generator.prototype.next() +slug: Web/JavaScript/Reference/Global_Objects/Generator/next +translation_of: Web/JavaScript/Reference/Global_Objects/Generator/next +--- +<div>{{JSRef}}</div> + +<p> <code><strong>next</strong></code><strong><code>()</code></strong> 메소드는 <code>done</code>과 <code>value</code> <code>프로퍼티를 가진 객체를 반환한다</code>. 또한 <code><strong>next</strong></code><strong><code>()</code> </strong><code>메소드를 호출할 때 매개변수를 제공하여 그 값을 generator에 전달할 수 있다.</code></p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><code><var>gen</var>.next(value)</code></pre> + +<h3 id="매개_변수">매개 변수</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Generator에 전달할 값</dd> +</dl> + +<h3 id="반환값">반환값</h3> + +<p>두 개의 프로퍼티를 가진 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">객체</a></code>:</p> + +<ul> + <li><code>done</code> (boolean) + + <ul> + <li>Iterator(반복자)가 마지막 반복 작업을 마쳤을 경우 <code>true</code>. 만약 iterator(반복자)에 <em>return 값</em>이 있다면 <code>value</code>의 값으로 지정된다.</li> + <li>Iterator(반복자)의 작업이 남아있을 경우 <code>false</code>. Iterator(반복자)에 <code>done</code> 프로퍼티 자체를 특정짓지 않은 것과 동일하다.</li> + </ul> + </li> + <li><code>value</code> - Iterator(반복자)으로부터 반환되는 모든 자바스크립트 값이며 <code>done</code>이 <code>true</code>일 경우 생략될 수 있다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="next()_사용하기"><code>next()</code> 사용하기</h3> + +<p>아래의 예시는 간단한 generator와 <code>next</code> 메소드를 통해서 반환되는 객체이다:</p> + +<pre class="brush: js">function* gen() { + yield 1; + yield 2; + yield 3; +} + +var g = gen(); // "Generator { }" +g.next(); // "Object { value: 1, done: false }" +g.next(); // "Object { value: 2, done: false }" +g.next(); // "Object { value: 3, done: false }" +g.next(); // "Object { value: undefined, done: true }" +</pre> + +<h3 id="Generator에_값_전달하기">Generator에 값 전달하기</h3> + +<p>이 예시에서는 <code>next</code>가 값과 함께 호출되었다. 첫 번째 호출이 아무것도 출력하지 않은 것은 Generator가 아직 아무런 값도 <code>yield</code> 하지않았기 때문이다. (두 번째 호출과 함께 전달된 정수 2는 Generator 내부의 <code>yield</code> 키워드에 전달되어 <code>value</code>로 할당되었고 <code>console.log</code>로 출력되었다)</p> + +<pre class="brush: js">function* gen() { + while(true) { + var value = yield null; + console.log(value); + } +} + +var g = gen(); +g.next(1); +// "{ value: null, done: false }" +g.next(2); +// "{ value: null, done: false }" +// 2 +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-generator.prototype.next', 'Generator.prototype.next')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generator.prototype.next', 'Generator.prototype.next')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(26)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(26)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">function*</a></code></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterators and generators</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/generator/return/index.html b/files/ko/web/javascript/reference/global_objects/generator/return/index.html new file mode 100644 index 0000000000..0c2f9b929d --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/generator/return/index.html @@ -0,0 +1,132 @@ +--- +title: Generator.prototype.return() +slug: Web/JavaScript/Reference/Global_Objects/Generator/return +translation_of: Web/JavaScript/Reference/Global_Objects/Generator/return +--- +<div>{{JSRef}}</div> + +<p><code><strong>return()</strong></code> 메소드는 제공된 값을 반환하고 Generator를 종료시킨다.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><code><var>gen</var>.return(value)</code></pre> + +<h3 id="매개_변수">매개 변수</h3> + +<dl> + <dt><code>value</code></dt> + <dd>반환될 값.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>이 함수의 호출과 함께 주어진 인수 값을 반환한다.</p> + +<h2 id="예시">예시</h2> + +<h3 id="return()_사용"><code>return()</code> 사용</h3> + +<p>아래의 예시는 간단한 Generator와 <code>return</code> 메소드를 보여준다.</p> + +<pre class="brush: js">function* gen() { + yield 1; + yield 2; + yield 3; +} + +var g = gen(); + +g.next(); // { value: 1, done: false } +g.return("foo"); // { value: "foo", done: true } +g.next(); // { value: undefined, done: true } +</pre> + +<h2 id="참고사항">참고사항:</h2> + +<p>만약 <code>done</code>이 <code>true</code>이면 반환되는 객체의 <code>value</code> 프로퍼티의 값은 <code>undefined</code>이다. (<code>return</code>(값)은 <code>next</code>()와 동일)</p> + +<pre>function* gen() {yield 1;} +var g = gen(); +console.log(g.next());//{ value: 1, done: false } +console.log(g.next());//{ value: undefined, done: true } +console.log(g.return(1)); //{ value: undefined, done: true }</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-generator.prototype.return', 'Generator.prototype.return')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generator.prototype.return', 'Generator.prototype.return')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(38)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(38)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">function*</a></code></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/generator/throw/index.html b/files/ko/web/javascript/reference/global_objects/generator/throw/index.html new file mode 100644 index 0000000000..534eefe0f6 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/generator/throw/index.html @@ -0,0 +1,99 @@ +--- +title: Generator.prototype.throw() +slug: Web/JavaScript/Reference/Global_Objects/Generator/throw +tags: + - ECMAScript 2015 + - Generator + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Generator/throw +--- +<div>{{JSRef}}</div> + +<p><code><strong>throw()</strong></code> 메서드는 Generator의 실행을 재개시키고 Generator 함수의 실행 문맥 속으로 error를 주입한다. <code>done</code>과 <code>value</code> 프로퍼티를 가진 객체를 반환한다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>gen</var>.throw(exception)</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>exception</code></dt> + <dd>Generator 함수의 실행 문맥 속으로 주입할 예외. 디버깅의 목적이라면 <code>instanceof</code> {{jsxref("Error")}} 인 것이 유용하다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>두 개의 프로퍼티를 가진 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">객체</a></code></p> + +<ul> + <li><code>done</code> (boolean) + + <ul> + <li>Iterator(반복자)가 마지막 반복 작업을 마쳤을 경우 <code>true</code>. 만약 iterator(반복자)에 <em>return 값</em>이 있다면 <code>value</code>의 값으로 지정된다.</li> + <li>Iterator(반복자)의 작업이 남아있을 경우 <code>false</code>. Iterator(반복자)에 <code>done</code> 프로퍼티 자체를 특정짓지 않은 것과 동일하다.</li> + </ul> + </li> + <li><code>value</code> - Iterator(반복자)으로부터 반환되는 모든 자바스크립트 값이며 <code>done</code>이 <code>true</code>일 경우 생략될 수 있다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="throw()_사용하기"><code>throw()</code> 사용하기</h3> + +<p>다음의 예시는 간단한 Generator 함수와 throw 메소드를 통해서 주입된 에러를 보여준다. 에러는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code>블록을 통해서 핸들링 할 수 있다.</p> + +<pre class="brush: js">function* gen() { + while(true) { + try { + yield 42; + } catch(e) { + console.log("Error caught!"); + } + } +} + +var g = gen(); +g.next(); +// { value: 42, done: false } +g.throw(new Error("Something went wrong")); +// "Error caught!" +// { value: 42, done: false } +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Generator.throw")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><code><a href="/ko/docs/Web/JavaScript/Reference/Statements/function*">function*</a></code></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/generatorfunction/index.html b/files/ko/web/javascript/reference/global_objects/generatorfunction/index.html new file mode 100644 index 0000000000..73ee12769d --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/generatorfunction/index.html @@ -0,0 +1,112 @@ +--- +title: GeneratorFunction +slug: Web/JavaScript/Reference/Global_Objects/GeneratorFunction +tags: + - Constructor + - ECMAScript 2015 + - Iterator + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction +--- +<div>{{JSRef}}</div> + +<p><strong><code>GeneratorFunction</code> 생성자</strong>는 새로운 {{jsxref("Statements/function*", "generator function")}} 객체를 생성한다. JavaScript 에서 모든 generator function 은 실제로 <code>GeneratorFunction</code> object 이다.</p> + +<p>주의할 점은, <code>GeneratorFunction</code> 이 전역 객체(global object)가 아니란 점이다. GeneratorFunction은 다음의 코드를 실행해서 얻을 수 있다.</p> + +<pre class="brush: js">Object.getPrototypeOf(function*(){}).constructor +</pre> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>new GeneratorFunction ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>이 함수에서 공식적인 argument 이름들로 사용되는 이름들이다. 각각은 유효한 Javascript 식별자이거나 쉼표로 구분된 문자열 리스트에 해당되는 문자열이어야 한다; for example "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd> + <dt><code>functionBody</code></dt> + <dd>함수 정의를 구성하는 JavaScript 문이 포함된 문자열.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p><code>GeneratorFunction</code> 생성자로 생성된 {{jsxref("Statements/function*", "generator function")}} 객체는 그 함수가 생성될 때 분석한다. 이러한 함수들이 나머지 코드들과 함께 분석되기 때문에, {{jsxref("Statements/function*", "function* expression")}}으로 generator function을 선언하고 코드 내에서 호출하는 것보다 덜 효율적입니다.</p> + +<p>그 함수로 전달된 모든 arguments는 생성될 함수 안에서 파라미터의 식별자 이름으로 그것들이 전달된 순서대로 처리된다.</p> + +<div class="note"> +<p><strong>Note:</strong> {{jsxref("Statements/function*", "generator function")}} created with the <code>GeneratorFunction</code> constructor do not create closures to their creation contexts; they always are created in the global scope. When running them, they will only be able to access their own local variables and global ones, not the ones from the scope in which the <code>GeneratorFunction</code> constructor was called. This is different from using {{jsxref("Global_Objects/eval", "eval")}} with code for a generator function expression.</p> +</div> + +<p>new 없이 <code>GeneratorFunction</code> 생성자를 함수처럼 사용하는 것은 생성자처럼 사용하는 것과 동일한 효과를 갖는다.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code><strong>GeneratorFunction.length</strong></code></dt> + <dd><code>GeneratorFunction</code> 생성자의 length 속성으로 1 값을 갖는다.</dd> + <dt>{{jsxref("GeneratorFunction.prototype")}}</dt> + <dd>모든 generator function objects 에 속성의 추가를 허용한다.</dd> +</dl> + +<h2 id="GeneratorFunction_prototype_object"><code>GeneratorFunction</code> prototype object</h2> + +<h3 id="Properties_2">Properties</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype', 'Properties')}}</div> + +<h2 id="GeneratorFunction_instances"><code>GeneratorFunction</code> instances</h2> + +<p><code>GeneratorFunction</code> 인스턴스는 {{jsxref("GeneratorFunction.prototype")}} 으로부터 속성과 메서드를 상속한다. 다른 모든 생성자들처럼, 생성자의 prototype object 를 변경함으로써 모든 <code>GeneratorFunction</code> instance 에 변화를 줄 수 있다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="GeneratorFunction_생성자로_generator_function_생성하기">GeneratorFunction 생성자로 generator function 생성하기</h3> + +<pre class="brush: js">var GeneratorFunction = Object.getPrototypeOf(function*(){}).constructor +var g = new GeneratorFunction("a", "yield a * 2"); +var iterator = g(10); +console.log(iterator.next().value); // 20 +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-generatorfunction-objects', 'GeneratorFunction')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generatorfunction-objects', 'GeneratorFunction')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.GeneratorFunction")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Statements/function*", "function* function")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Global_Objects/Function", "Function")}}</li> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope", "", 1)}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/globalthis/index.html b/files/ko/web/javascript/reference/global_objects/globalthis/index.html new file mode 100644 index 0000000000..df3323a00b --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/globalthis/index.html @@ -0,0 +1,89 @@ +--- +title: globalThis +slug: Web/JavaScript/Reference/Global_Objects/globalThis +tags: + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/globalThis +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>전역 <code><strong>globalThis</strong></code> 속성은 전역 <code>this</code> 값을 가진 전역 객체를 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-globalthis.html")}}</div> + + + +<p>{{JS_Property_Attributes(1, 0, 1)}}</p> + +<h2 id="설명">설명</h2> + +<p>역사적으로, 서로 다른 JavaScript 환경의 전역 범위에 접근하는건 서로 다른 구문을 필요로 했습니다. 웹에서는 {{domxref("Window.window", "window")}}, {{domxref("Window.self", "self")}}, {{domxref("Window.frames", "frames")}}를 사용할 수 있지만, <a href="/ko/docs/Web/API/Worker">Web Workers</a>에서는 <code>self</code>만 동작합니다. Node.js에서는 아무것도 쓸 수 없고, 대신 <code>global</code>을 사용해야 합니다.<br> + 비엄격 모드에서의 함수 내부에서 <code>this</code>를 사용할 수도 있겠지만, 모듈이나 엄격 모드의 함수에서는 {{jsxref("undefined")}}를 가리키는 문제가 있습니다.<code> Function('return this')()</code>를 사용하는 방법도 존재하지만, 브라우저의 {{glossary("CSP")}} 등으로 {{jsxref("eval", "eval()")}}을 사용할 수 없는 환경에선 {{jsxref("Function")}}도 이렇게 사용할 수 없습니다.</p> + +<p><code>globalThis</code> 속성은 환경에 무관하게 전역 <code>this</code> 값, 즉 전역 객체에 접근하는 표준 방법을 제공합니다. <code>window</code>, <code>self</code> 등 비슷한 속성과는 다르게 브라우저/비 브라우저 맥락 모두에서의 동작을 보장합니다. 따라서 코드를 구동하는 환경을 모르더라도 전역 객체에 일관적으로 접근할 수 있습니다.</p> + +<h3 id="HTML과_WindowProxy">HTML과 WindowProxy</h3> + +<p>많은 JavaScript 엔진에서 <code>globalThis</code>는 실제 전역 객체를 가리킬 것이나, 웹 브라우저는 {{htmlelement("iframe")}}과 교차 창 보안 문제로 인하여 전역 객체를 감싼 {{jsxref("Proxy")}}를 대신 가리키고, 실제 객체에는 직접 접근할 수 없습니다. 일반적인 사용에는 차이가 없다고 봐도 무방하지만, 알아두는 것이 중요합니다.</p> + +<h3 id="이름">이름</h3> + +<p><code>self</code>와 <code>global</code>처럼, 다른 인기있던 제안은 기존 코드와의 호환성 문제를 우려해 제외됐습니다. <a href="https://github.com/tc39/proposal-global/blob/master/NAMING.md">언어 제안서의 "NAMING" 문서</a>를 방문해 더 자세한 정보를 읽어보세요.</p> + +<h2 id="예제">예제</h2> + +<h3 id="환경별_전역_접근">환경별 전역 접근</h3> + +<p><code>globalThis</code> 없이 현재 환경의 전역 객체를 가져오는 방법 중 유일하게 믿을만한 방법은 <code>Function('return this')()</code> 입니다. 그러나 일부 환경에서는 <a href="/ko/docs/Web/HTTP/CSP">CSP</a> 위반에 걸리는 코드이므로, <a href="https://github.com/paulmillr/es6-shim">es6-shim</a>은 대신 다음 검사를 수행합니다.</p> + +<pre class="brush: js notranslate">var getGlobal = function () { + if (typeof self !== 'undefined') { return self; } + if (typeof window !== 'undefined') { return window; } + if (typeof global !== 'undefined') { return global; } + throw new Error('unable to locate global object'); +}; + +var globals = getGlobal(); + +if (typeof globals.setTimeout !== 'function') { + // no setTimeout in this environment! +} +</pre> + +<p><code>globalThis</code>를 사용할 수 있으면 환경별 전역 객체 검사는 더 이상 필요하지 않습니다.</p> + +<pre class="brush: js notranslate">if (typeof globalThis.setTimeout !== 'function') { + // no setTimeout in this environment! +}</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName("ESDraft", "#sec-globalthis", "globalThis")}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.globalThis")}}</p> + +<h3 id="구현_진척도">구현 진척도</h3> + +<p>본 기능은 아직 안정적인 크로스 브라우징에 도달하지 못했으므로, 매일 업데이트되는 아래 표에서 브라우저별 구현 상황을 확인할 수 있습니다. 이 데이터는 각 브라우저 JavaScript 엔진의 나이틀리 빌드 또는 최신 릴리즈판에서, JavaScript 표준 테스트인 <a href="https://github.com/tc39/test262">Test262</a>의 관련 항목을 시험해 생성합니다.</p> + +<p>{{EmbedTest262ReportResultsTable("globalThis")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Operators/this", "this")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/index.html b/files/ko/web/javascript/reference/global_objects/index.html new file mode 100644 index 0000000000..b0741e8fe2 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/index.html @@ -0,0 +1,204 @@ +--- +title: 표준 내장 객체 +slug: Web/JavaScript/Reference/Global_Objects +tags: + - JavaScript + - Overview + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>이 장은 JavaScript의 모든 표준 내장 객체와 그 메서드 및 속성을 나열합니다.</p> + +<p>표준 내장 객체와 전역 객체를 헷갈리지 않도록 주의하세요. 표준 내장 객체는 <strong>전역 범위의 여러 객체</strong>를 일컫습니다. 전역 객체는 엄격 모드를 사용하지 않을 땐 전역 범위에서 {{jsxref("Operators/this", "this")}}, 지원하는 환경에선 {{jsxref("globalThis")}}를 사용해 접근할 수 있는 객체입니다. 사실 전역 범위는 <strong>전역 객체와 전역 객체가 상속한 속성</strong>으로 이루어집니다.</p> + +<p>전역 범위의 나머지 객체는 <a href="/ko/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">사용자 스크립트가 생성</a>하거나, 호스트 응용 프로그램이 제공합니다. 브라우저 맥락에서 사용 가능한 호스트 객체는 <a href="/ko/docs/Web/API">API 참고서</a>에서 읽을 수 있습니다. <a href="/ko/docs/DOM/DOM_Reference">DOM</a> 및 코어 <a href="/ko/docs/Web/JavaScript">JavaScript</a>의 차이에 관한 자세한 정보는 <a href="/ko/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript 기술 개요</a>를 참고하세요.</p> + +<h2 id="항목별_표준_객체">항목별 표준 객체</h2> + +<h3 id="값_속성">값 속성</h3> + +<p>아래 전역 속성은 간단한 값을 반환하며 속성이나 메서드를 가지고 있지 않습니다.</p> + +<ul> + <li>{{jsxref("Infinity")}}</li> + <li>{{jsxref("NaN")}}</li> + <li>{{jsxref("undefined")}}</li> + <li>{{jsxref("null")}} 리터럴</li> + <li>{{jsxref("globalThis")}}</li> +</ul> + +<h3 id="함수_속성">함수 속성</h3> + +<p>객체에 붙지 않고 전역으로 호출하는 함수로, 반환 값을 호출자에게 바로 반환합니다.</p> + +<div class="twocolumns"> +<ul> + <li>{{JSxRef("Global_Objects/eval", "eval()")}}</li> + <li>{{Non-Standard_Inline}} {{JSxRef("Global_Objects/uneval", "uneval()")}} </li> + <li>{{JSxRef("Global_Objects/isFinite", "isFinite()")}}</li> + <li>{{JSxRef("Global_Objects/isNaN", "isNaN()")}}</li> + <li>{{JSxRef("Global_Objects/parseFloat", "parseFloat()")}}</li> + <li>{{JSxRef("Global_Objects/parseInt", "parseInt()")}}</li> + <li>{{JSxRef("Global_Objects/encodeURI", "encodeURI()")}}</li> + <li>{{JSxRef("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li> + <li>{{JSxRef("Global_Objects/decodeURI", "decodeURI()")}}</li> + <li>{{JSxRef("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li> + <li><strong>Deprecated</strong> + <ul> + <li>{{deprecated_inline}} {{JSxRef("Global_Objects/escape", "escape()")}} </li> + <li>{{deprecated_inline}} {{JSxRef("Global_Objects/unescape", "unescape()")}} </li> + </ul> + </li> +</ul> +</div> + +<h3 id="기초_객체">기초 객체</h3> + +<p>다른 모든 객체의 기반이 되는 기초이자 기본 객체입니다. 일반 객체, 함수, 오류를 나타내는 객체를 포함합니다.</p> + +<ul> + <li>{{jsxref("Object")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Boolean")}}</li> + <li>{{jsxref("Symbol")}}</li> +</ul> + +<h4 id="오류_객체">오류 객체</h4> + +<p>오류 객체는 기초 객체의 특별한 유형으로, 기본적인 {{jsxref("Error")}} 객체와 함께 특정 용도에 최적화된 오류 형태도 포함합니다.</p> + +<div class="twocolumns"> +<ul> + <li>{{JSxRef("Error")}}</li> + <li>{{Experimental_Inline}} {{JSxRef("AggregateError")}} </li> + <li>{{JSxRef("EvalError")}}</li> + <li>{{JSxRef("InternalError")}} </li> + <li>{{JSxRef("RangeError")}}</li> + <li>{{JSxRef("ReferenceError")}}</li> + <li>{{JSxRef("SyntaxError")}}</li> + <li>{{JSxRef("TypeError")}}</li> + <li>{{JSxRef("URIError")}}</li> +</ul> +</div> + +<h3 id="숫자_및_날짜">숫자 및 날짜</h3> + +<p>숫자, 날짜, 수학 계산을 나타내는 기본 객체입니다.</p> + +<ul> + <li>{{jsxref("Number")}}</li> + <li>{{jsxref("BigInt")}}</li> + <li>{{jsxref("Math")}}</li> + <li>{{jsxref("Date")}}</li> +</ul> + +<h3 id="텍스트_처리">텍스트 처리</h3> + +<p>문자열을 나타내는 객체로 문자열을 조작할 방법도 제공합니다.</p> + +<ul> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("RegExp")}}</li> +</ul> + +<h3 id="인덱스_콜렉션">인덱스 콜렉션</h3> + +<p>인덱스 값으로 정렬된 데이터의 콜렉션을 나타냅니다. 배열(형식배열 포함)과 배열형 객체를 포함합니다.</p> + +<div class="twocolumns"> +<ul> + <li>{{JSxRef("Array")}}</li> + <li>{{JSxRef("Int8Array")}}</li> + <li>{{JSxRef("Uint8Array")}}</li> + <li>{{JSxRef("Uint8ClampedArray")}}</li> + <li>{{JSxRef("Int16Array")}}</li> + <li>{{JSxRef("Uint16Array")}}</li> + <li>{{JSxRef("Int32Array")}}</li> + <li>{{JSxRef("Uint32Array")}}</li> + <li>{{JSxRef("Float32Array")}}</li> + <li>{{JSxRef("Float64Array")}}</li> + <li>{{JSxRef("BigInt64Array")}}</li> + <li>{{JSxRef("BigUint64Array")}}</li> +</ul> +</div> + +<h3 id="키_콜렉션">키 콜렉션</h3> + +<p>키를 사용하는 콜렉션을 나타냅니다. {{jsxref("Map")}}, {{jsxref("Set")}} 등 순회 가능한 콜렉션은 요소를 삽입 순서대로 순회할 수 있습니다.</p> + +<ul> + <li>{{jsxref("Map")}}</li> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("WeakMap")}}</li> + <li>{{jsxref("WeakSet")}}</li> +</ul> + +<h3 id="구조화된_데이터">구조화된 데이터</h3> + +<p>구조화된 데이터 버퍼 및 JavaScript Object Notation(JSON)을 사용하여 작성한 데이터를 나타내고 상호작용합니다.</p> + +<ul> + <li>{{jsxref("ArrayBuffer")}}</li> + <li>{{jsxref("SharedArrayBuffer")}}</li> + <li>{{jsxref("Atomics")}}</li> + <li>{{jsxref("DataView")}}</li> + <li>{{jsxref("JSON")}}</li> +</ul> + +<h3 id="제어_추상화_객체">제어 추상화 객체</h3> + +<p>제어 추상화는 코드 구조화에 도움을 줍니다. 특히, 비동기 코드를 (예를 들어) 깊게 중첩된 콜백 함수 없이 작성할 수 있습니다.</p> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Generator")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{jsxref("AsyncFunction")}}</li> +</ul> + +<h3 id="리플렉션">리플렉션</h3> + +<ul> + <li>{{jsxref("Reflect")}}</li> + <li>{{jsxref("Proxy")}}</li> +</ul> + +<h3 id="국제화">국제화</h3> + +<p>ECMAScript 코어에 추가된 언어 구분 기능입니다.</p> + +<div class="twocolumns"> +<ul> + <li>{{JSxRef("Intl")}}</li> + <li>{{JSxRef("Global_Objects/Collator", "Intl.Collator")}}</li> + <li>{{JSxRef("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{JSxRef("Global_Objects/ListFormat", "Intl.ListFormat")}}</li> + <li>{{JSxRef("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</li> + <li>{{JSxRef("Global_Objects/PluralRules", "Intl.PluralRules")}}</li> + <li>{{JSxRef("Global_Objects/RelativeTimeFormat", "Intl.RelativeTimeFormat")}}</li> + <li>{{JSxRef("Global_Objects/Locale", "Intl.Locale")}}</li> +</ul> +</div> + +<h3 id="WebAssembly">WebAssembly</h3> + +<div class="twocolumns"> +<ul> + <li>{{JSxRef("WebAssembly")}}</li> + <li>{{JSxRef("WebAssembly.Module")}}</li> + <li>{{JSxRef("WebAssembly.Instance")}}</li> + <li>{{JSxRef("WebAssembly.Memory")}}</li> + <li>{{JSxRef("WebAssembly.Table")}}</li> + <li>{{JSxRef("WebAssembly.CompileError")}}</li> + <li>{{JSxRef("WebAssembly.LinkError")}}</li> + <li>{{JSxRef("WebAssembly.RuntimeError")}}</li> +</ul> +</div> + +<h3 id="기타">기타</h3> + +<ul> + <li>{{JSxRef("Functions/arguments", "arguments")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/infinity/index.html b/files/ko/web/javascript/reference/global_objects/infinity/index.html new file mode 100644 index 0000000000..6305621f65 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/infinity/index.html @@ -0,0 +1,65 @@ +--- +title: Infinity +slug: Web/JavaScript/Reference/Global_Objects/Infinity +tags: + - JavaScript + - Property + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Infinity +--- +<div>{{jsSidebar("Objects")}}</div> + +<p><code><strong>Infinity</strong></code> 전역 속성은 무한대를 나타내는 숫자값입니다.</p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-infinity.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="설명">설명</h2> + +<p><code>Infinity</code>는 전역 객체의 속성입니다. 즉, 전역 스코프의 변수입니다.</p> + +<p><code>Infinity</code>의 초기값은 {{jsxref("Number.POSITIVE_INFINITY")}}입니다. <code>Infinity</code>(양의 무한대)는 다른 어떤 수보다 더 큽니다.</p> + +<p>수학적인 무한대와는 일부 차이점이 있습니다. {{jsxref("Number.POSITIVE_INFINITY")}} 문서에서 더 알아보세요.</p> + +<p><code>Infinity</code>는 ECMAScript 5 명세에 따라 읽기 전용입니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: js notranslate">console.log(Infinity); /* Infinity */ +console.log(Infinity + 1); /* Infinity */ +console.log(Math.pow(10,1000)); /* Infinity */ +console.log(Math.log(0)); /* -Infinity */ +console.log(1 / Infinity); /* 0 */ +console.log(1 / 0); /* Infinity */ +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Infinity")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li> + <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li> + <li>{{jsxref("Number.isFinite")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/internalerror/index.html b/files/ko/web/javascript/reference/global_objects/internalerror/index.html new file mode 100644 index 0000000000..e6e5769902 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/internalerror/index.html @@ -0,0 +1,120 @@ +--- +title: InternalError +slug: Web/JavaScript/Reference/Global_Objects/InternalError +translation_of: Web/JavaScript/Reference/Global_Objects/InternalError +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p><strong><code>InternalError </code></strong>객체는 JavaScript 엔진 내부에서 발생한 에러를 나타냅니다. 예를 들면, <strong>"InternalError</strong>: too much recursion"라는 에러가 있으며, 이것은 "내부 에러: 너무 많은 재귀 호출" 상황이 발생했을 때 나타납니다. </p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">new InternalError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</pre> + +<h3 id="파라메터">파라메터</h3> + +<dl> + <dt><code>message</code></dt> + <dd>선택적 파라메터. 에러에 대한 설명.</dd> + <dt><code>fileName</code> {{non-standard_inline}}</dt> + <dd>선택적 파라메터. 예외(Exception)가 발생한 코드를 포함하고 있는 파일 명.</dd> + <dt><code>lineNumber</code> {{non-standard_inline}}</dt> + <dd>선택적 파라메터. 예외(Exception)이 발생한 코드의 라인 넘버.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p><code>InternalError</code> 는 JavaScript 엔진에서 내부 에러가 발생할 때마다 던져집니다.</p> + +<p>다음의 에러 예시 들의 경우는 일반적으로 어떤 값이 너무 큰 경우 입니다.</p> + +<ul> + <li>"too many switch cases", (swich case의 수가 너무 많음.)</li> + <li>"too many parentheses in regular expression", (정규표현식에 너무 많은 괄호가 있음.)</li> + <li>"array initializer too large", (배열 초기화 값이 너무 큼.)</li> + <li>"too much recursion". (너무 많은 재귀 호출.)</li> +</ul> + +<h2 id="속성">속성</h2> + +<dl> + <dt>{{jsxref("InternalError.prototype")}}</dt> + <dd><code>InternalError</code> 객체에 속성을 추가하도록 해줍니다.</dd> +</dl> + +<h2 id="메소드">메소드</h2> + +<p>전역(global)의 <code>InternalError</code> 는 고유의 함수를 가지고 있지 않지만, 몇 가지의 메소드를 프로토타입 체인으로부터 상속받습니다.</p> + +<h2 id="InternalError_인스턴스"><code>InternalError</code> 인스턴스</h2> + +<h3 id="속성_2">속성</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/InternalError/prototype', 'Properties')}}</div> + +<h3 id="메소드_2">메소드</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/InternalError/prototype', 'Methods')}}</div> + +<h2 id="스펙">스펙</h2> + +<p>Not part of any specifications.</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("InternalError.prototype")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/internalerror/prototype/index.html b/files/ko/web/javascript/reference/global_objects/internalerror/prototype/index.html new file mode 100644 index 0000000000..e854c2073a --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/internalerror/prototype/index.html @@ -0,0 +1,100 @@ +--- +title: InternalError.prototype +slug: Web/JavaScript/Reference/Global_Objects/InternalError/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/InternalError +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p><code><strong>InternalError.prototype </strong></code>속성은 {{jsxref("InternalError")}} 생성자의 프로토타입을 나타냅니다.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="설명">설명</h2> + +<p>모든 {{jsxref("InternalError")}} 인스턴스는 <code>InternalError.prototype</code> 으로부터 상속받습니다. 프로토타입은 모든 인스턴스에 속성이나 메소드를 추가하거나 하는 데에 사용할 수 있습니다.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>InternalError.prototype.constructor</code></dt> + <dd>인스턴스의 프로토타입을 생성하는 함수를 명시합니다. </dd> + <dt>{{jsxref("Error.prototype.message", "InternalError.prototype.message")}}</dt> + <dd>에러 메시지. {{jsxref("Error")}} 로부터 상속받습니다. </dd> + <dt>{{jsxref("Error.prototype.name", "InternalError.prototype.name")}}</dt> + <dd>에러명. {{jsxref("Error")}} 로부터 상속받습니다.</dd> + <dt>{{jsxref("Error.prototype.fileName", "InternalError.prototype.fileName")}}</dt> + <dd>에러를 발생시킨 파일의 경로. {{jsxref("Error")}} 로부터 상속받습니다.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "InternalError.prototype.lineNumber")}}</dt> + <dd>에러를 발생시킨 파일의 라인 넘버. {{jsxref("Error")}} 로부터 상속받습니다.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "InternalError.prototype.columnNumber")}}</dt> + <dd>에러를 발생 시킨 라인의 컬럼 넘버. {{jsxref("Error")}} 로부터 상속받습니다.</dd> + <dt>{{jsxref("Error.prototype.stack", "InternalError.prototype.stack")}}</dt> + <dd>스택 트레이스. {{jsxref("Error")}} 로부터 상속받습니다. </dd> +</dl> + +<h2 id="메소드">메소드</h2> + +<p>비록 {{jsxref("InternalError")}}의 프로토타입 객체는 고유의 메소드를 가지고 있지는 않습니다. 하지만, {{jsxref("InternalError")}} 인스턴스는 프로토타입 체인을 통해 몇 가지의 메소드를 상속 받습니다.</p> + +<h2 id="스펙">스펙</h2> + +<p>Not part of any specifications.</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/index.html b/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/index.html new file mode 100644 index 0000000000..0758e1332b --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/index.html @@ -0,0 +1,303 @@ +--- +title: Intl.DateTimeFormat +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat +tags: + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><strong><code>Intl.DateTimeFormat</code></strong>은 언어에 맞는 날짜 및 시간 서식을 지원하는 객체의 생성자입니다.</span> <code>dateStyle</code>과 <code>timeStyle</code> 옵션을 통해 날짜와 시간 형식을 빠르게 맞출 수 있고, 더 자세한 조정을 위한 다른 옵션도 존재합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">new Intl.DateTimeFormat([<var>locales</var>[, <var>options</var>]]) +Intl.DateTimeFormat.call(<var>this</var>[, <var>locales</var>[, <var>options</var>]])</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>locales</code> {{optional_inline}}</dt> + <dd> + <p><a href="https://ko.wikipedia.org/wiki/IETF_%EC%96%B8%EC%96%B4_%ED%83%9C%EA%B7%B8">BCP 47</a> 언어 태그를 포함하는 문자열이나 문자열의 배열. 로케일 매개변수의 일반적인 형식 및 해석은 {{jsxref("Intl", "<code>Intl</code> 문서", "#Locale_identification_and_negotiation", 1)}}를 참고하세요. 다음의 유니코드 확장 키를 사용할 수 있습니다.</p> + + <dl> + <dt><code>nu</code></dt> + <dd>사용할 기수법. <code>"arab"</code>, <code>"arabext"</code>, <code>"bali"</code>, <code>"beng"</code>, <code>"deva"</code>, <code>"fullwide"</code>, <code>"gujr"</code>, <code>"guru"</code>, <code>"hanidec"</code>, <code>"khmr"</code>, <code>"knda"</code>, <code>"laoo"</code>, <code>"latn"</code>, <code>"limb"</code>, <code>"mlym"</code>, <code>"mong"</code>, <code>"mymr"</code>, <code>"orya"</code>, <code>"tamldec"</code>, <code>"telu"</code>, <code>"thai"</code>, <code>"tibt"</code> 등을 사용할 수 있습니다.</dd> + <dt><code>ca</code></dt> + <dd>역법. <code>"buddhist"</code>, <code>"chinese"</code>, <code>"coptic"</code>, <code>"ethioaa"</code>, <code>"ethiopic"</code>, <code>"gregory"</code>, <code>"hebrew"</code>, <code>"indian"</code>, <code>"islamic"</code>, <code>"islamicc"</code>, <code>"iso8601"</code>, <code>"japanese"</code>, <code>"persian"</code>, <code>"roc"</code> 등을 사용할 수 있습니다.</dd> + <dt><code>hc</code></dt> + <dd>시간 사이클. <code>"h11"</code>, <code>"h12"</code>, <code>"h23"</code>, <code>"h24"</code> 등을 사용할 수 있습니다.</dd> + </dl> + </dd> + <dt><code>options</code> {{optional_inline}}</dt> + <dd> + <p>다음 속성을 포함하는 객체.</p> + + <dl> + <dt><code>dateStyle</code></dt> + <dd><code>format()</code>을 호출했을 때 사용할 날짜 서식. 가능한 값은 다음을 포함합니다. + <ul> + <li><code>"full"</code></li> + <li><code>"long"</code></li> + <li><code>"medium"</code></li> + <li><code>"short"</code></li> + </ul> + </dd> + <dt><code>timeStyle</code></dt> + <dd><code>format()</code>을 호출했을 때 사용할 시간 서식. 가능한 값은 다음을 포함합니다. + <ul> + <li><code>"full"</code></li> + <li><code>"long"</code></li> + <li><code>"medium"</code></li> + <li><code>"short"</code></li> + </ul> + </dd> + <dt><code>localeMatcher</code></dt> + <dd>사용할 로케일 매칭 알고리즘. 가능한 값은 <code>"lookup"</code>과 <code>"best fit"</code>이고, 기본값은 <code>"best fit"</code>입니다. 자세한 정보는 {{jsxref("Intl", "<code>Intl</code> 문서", "#로케일_조정", 1)}}를 참고하세요.</dd> + <dt><code>timeZone</code></dt> + <dd>사용할 시간대. 구현체가 반드시 인식해야 하는 유일한 값은 <code>"UTC"</code>입니다. 기본값은 런타임의 기본 시간대입니다. 구현체에 따라 "<code>Asia/Shanghai</code>", "<code>Asia/Kolkata</code>", "<code>America/New_York</code>" 등 <a href="https://www.iana.org/time-zones">IANA 시간대 데이터베이스</a>의 시간대 이름을 인식할 수도 있습니다.</dd> + <dt><code>hour12</code></dt> + <dd>24시간제 대신 12시간제를 사용할지 여부. 가능한 값은 <code>true</code> 와 <code>false</code>이고, 기본값은 로케일에 따라 다릅니다. 이 옵션을 지정하면 <code>hc</code> 언어 태그와 <code>hourCycle</code> 옵션을 모두 무시합니다.</dd> + <dt><code>hourCycle</code></dt> + <dd>사용할 시간제. 가능한 값은 <code>"h11"</code>, <code>"h12"</code>, <code>"h23"</code>, <code>"h24"</code>입니다. 이 옵션을 지정하면 <code>hc</code> 언어 태그를 무시합니다. <code>hour12</code> 옵션을 지정한 경우 그 값이 우선순위를 가집니다.</dd> + <dt><code>formatMatcher</code></dt> + <dd>사용할 서식 매칭 알고리즘. 가능한 값은 <code>"basic"</code>과 <code>"best fit"</code>이고, 기본값은 <code>"best fit"</code>입니다. 아래의 단락에서 이 속성의 자세한 정보를 확인하세요.</dd> + </dl> + + <p>이후의 속성은 서식을 적용한 출력 결과가 사용할 날짜 및 시간 구성요소를 나타냅니다. 구현체는 적어도 아래의 부분집합을 지원해야 합니다.</p> + + <ul> + <li><code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code>, <code>hour</code>, <code>minute</code>, <code>second</code></li> + <li><code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code></li> + <li><code>year</code>, <code>month</code>, <code>day</code></li> + <li><code>year</code>, <code>month</code></li> + <li><code>month</code>, <code>day</code></li> + <li><code>hour</code>, <code>minute</code>, <code>second</code></li> + <li><code>hour</code>, <code>minute</code></li> + </ul> + + <p>구현체에 따라 다른 집합을 지원할 수도 있습니다. 서식 요청은 가능한 모든 부분집합 조합 중 최적으로 일치하는 집합으로 조정됩니다. 조정 알고리즘에는 <a href="http://www.ecma-international.org/ecma-402/1.0/#BasicFormatMatcher">명세에 완벽히 정의된 <code>basic</code> 알고리즘</a>과, 구현체에 따라 다른 <code>best-fit</code> 알고리즘 두 종류가 있으며 <code>formatMatcher</code> 속성의 값이 어느 쪽을 사용할지 결정합니다.</p> + + <dl> + <dt><code>weekday</code></dt> + <dd>요일. 가능한 값은 다음과 같습니다. + <ul> + <li>"<code>long</code>" (<code>금요일</code>, <code>Thursday</code> 등)</li> + <li>"<code>short</code>" (<code>(금)</code>, <code>Thu</code> 등)</li> + <li>"<code>narrow</code>" (<code>(금)</code>, <code>T</code> 등). 일부 로케일에서는 두 개의 요일이 같은 값을 스타일을 가질 수 있습니다. (예: <code>Thursday</code>와 <code>Tuesday</code> 둘 다 <code>T</code>)</li> + </ul> + </dd> + <dt><code>era</code></dt> + <dd>시대. 가능한 값은 다음과 같습니다. + <ul> + <li>"<code>long</code>" (<code>서기</code>, <code>Anno Domini</code> 등)</li> + <li>"<code>short</code>" (<code>AD</code> 등)</li> + <li>"<code>narrow</code>" (<code>A</code>, <code>AD</code> 등)</li> + </ul> + </dd> + <dt><code>year</code></dt> + <dd>연도. 가능한 값은 다음과 같습니다. + <ul> + <li>"<code>numeric</code>" (<code>2019년</code>, <code>2019</code> 등)</li> + <li>"<code>2-digit</code>" (<code>19년</code>, <code>19</code> 등)</li> + </ul> + </dd> + <dt><code>month</code></dt> + <dd>월. 가능한 값은 다음과 같습니다. + <ul> + <li>"<code>numeric</code>" (<code>3</code> 등)</li> + <li>"<code>2-digit</code>" (<code>03</code> 등)</li> + <li>"<code>long</code>" (<code>3월</code>, <code>March</code> 등)</li> + <li>"<code>short</code>" (<code>Mar</code> 등)</li> + <li>"<code>narrow</code>" (<code>M</code> 등). 일부 로케일에서는 두 개의 요일이 같은 값을 스타일을 가질 수 있습니다. (예: <code>March</code>와 <code>May</code> 둘 다 <code>M</code>)</li> + </ul> + </dd> + <dt><code>day</code></dt> + <dd>일. 가능한 값은 다음과 같습니다. + <ul> + <li>"<code>numeric</code>" (<code>1</code> 등)</li> + <li>"<code>2-digit</code>" (<code>01</code> 등)</li> + </ul> + </dd> + <dt><code>hour</code></dt> + <dd>시. 가능한 값은 <code>"numeric"</code>, <code>"2-digit"</code>입니다.</dd> + <dt><code>minute</code></dt> + <dd>분. 가능한 값은 <code>"numeric"</code>, <code>"2-digit"</code>입니다.</dd> + <dt><code>second</code></dt> + <dd>초. 가능한 값은 <code>"numeric"</code>, <code>"2-digit"</code>입니다.</dd> + <dt><code>timeZoneName</code></dt> + <dd>시간대 이름. 가능한 값은 다음과 같습니다. + <ul> + <li>"<code>long</code>" (<code>한국 표준시</code>, <code>British Summer Time</code>등)</li> + <li>"<code>short</code>" (<code>GMT+9</code> 등)</li> + </ul> + </dd> + </dl> + + <p class="noinclude">각 구성요소 속성의 기본값은 {{jsxref("undefined")}}입니다. 그러나 모든 속성이 {{jsxref("undefined")}}일 경우, <code>year</code>, <code>month</code>, <code>day</code>는 <code>"numeric"</code>으로 취급합니다.</p> + </dd> +</dl> + +<h2 id="설명">설명</h2> + +<h3 id="속성">속성</h3> + +<dl> + <dt>{{jsxref("DateTimeFormat.prototype", "Intl.DateTimeFormat.prototype")}}</dt> + <dd>모든 인스턴스에 속성을 추가할 수 있습니다.</dd> +</dl> + +<h3 id="메서드">메서드</h3> + +<dl> + <dt>{{jsxref("DateTimeFormat.supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}}</dt> + <dd>주어진 로케일 목록 중, 런타임이 지원하는 항목을 배열로 반환합니다.</dd> +</dl> + +<h2 id="DateTimeFormat_인스턴스"><code>DateTimeFormat</code> 인스턴스</h2> + +<h3 id="속성_2">속성</h3> + +<p><code>DateTimeFormat</code> 인스턴스는 프로토타입의 다음 속성을 상속합니다.</p> + +<div>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype', '속성')}}</div> + +<h3 id="메서드_2">메서드</h3> + +<p><code>DateTimeFormat</code> 인스턴스는 프로토타입의 다음 메서드를 상속합니다.</p> + +<div>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype', '메서드')}}</div> + +<h2 id="예제">예제</h2> + +<h3 id="DateTimeFormat_사용하기"><code>DateTimeFormat</code> 사용하기</h3> + +<p>로케일을 지정하지 않고 사용하면 기본 로케일 및 기본 옵션 서식을 적용한 문자열을 반환합니다.</p> + +<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); + +// 매개변수 없이 toLocaleString() 호출한 결과는 +// 구현체, 기본 로케일, 기본 시간대에 다라 달라짐 +console.log(new Intl.DateTimeFormat().format(date)); +// → ko-KR 로케일(언어)와 Asia/Seoul 시간대(UTC+0900)에서 "2012. 12. 20." +</pre> + +<h3 id="locales_사용하기"><code>locales</code> 사용하기</h3> + +<p>다음 예제는 지역화된 숫자 서식의 예시를 보입니다. 어플리케이션의 사용자 인터페이스 언어에 맞는 서식을 적용하려면 <code>locales</code> 매개변수로 적절한 언어(와, 필요한 경우 대체 언어)를 제공하는걸 잊지 마세요.</p> + +<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); + +// 아래 결과는 모두 Asia/Seoul 시간대를 사용한 결과 (UTC+0900, 한국 표준시) + +// 한국어에서 날짜 표기는 연월일 순서 +console.log(new Intl.DateTimeFormat('ko-KR').format(date)); +// → "2012. 12. 20." + +// 미국 영어에서 날짜 표기는 월일년 순서 +console.log(new Intl.DateTimeFormat('en-US').format(date)); +// → "12/20/2012" + +// 영국 영어에서 날짜 표기는 일월년 순서 +console.log(new Intl.DateTimeFormat('en-GB').format(date)); +// → "20/12/2012" + +// 대부분의 아랍어 국가에서는 진짜 아라비아 숫자 사용 +console.log(new Intl.DateTimeFormat('ar-EG').format(date)); +// → "٢٠/١٢/٢٠١٢" + +// 일본어의 경우 어플리케이션에 연호를 사용해야 할 수도 있음 +// 2012년은 헤이세이 24년 +console.log(new Intl.DateTimeFormat('ja-JP-u-ca-japanese').format(date)); +// → "24/12/20" + +// 발리어와 같이 지원되지 않을 수도 있는 언어를 지정할 때는 +// 다음과 같이 대체 언어를 지정할 수 있음. 아래의 경우 대체 언어는 인도어 +console.log(new Intl.DateTimeFormat(['ban', 'id']).format(date)); +// → "20/12/2012" +</pre> + +<h3 id="options_사용하기"><code>options</code> 사용하기</h3> + +<p><code>options</code> 매개변수를 지정해 날짜와 시간 서식 결과를 원하는 형태로 바꿀 수 있습니다.</p> + +<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); + +// 긴 날짜 서식에 더해 요일 요청 +var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; +console.log(new Intl.DateTimeFormat('de-DE', options).format(date)); +// → "Donnerstag, 20. Dezember 2012" + +// 어플리케이션이 GMT를 사용해야 하고, 그 점을 명시해야 할 때 +options.timeZone = 'UTC'; +options.timeZoneName = 'short'; +console.log(new Intl.DateTimeFormat('en-US', options).format(date)); +// → "Thursday, December 20, 2012, GMT" + +// 좀 더 자세한 설정이 필요하면 +options = { + hour: 'numeric', minute: 'numeric', second: 'numeric', + timeZone: 'Australia/Sydney', + timeZoneName: 'short' +}; +console.log(new Intl.DateTimeFormat('en-AU', options).format(date)); +// → "2:00:00 pm AEDT" + +// 미국에서도 24시간제가 필요할 때 +options = { + year: 'numeric', month: 'numeric', day: 'numeric', + hour: 'numeric', minute: 'numeric', second: 'numeric', + hour12: false, + timeZone: 'America/Los_Angeles' +}; +console.log(new Intl.DateTimeFormat('en-US', options).format(date)); +// → "12/19/2012, 19:00:00" +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES Int 1.0', '#sec-12.1', 'Intl.DateTimeFormat')}}</td> + <td>{{Spec2('ES Int 1.0')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES Int 2.0', '#sec-12.1', 'Intl.DateTimeFormat')}}</td> + <td>{{Spec2('ES Int 2.0')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#datetimeformat-objects', 'Intl.DateTimeFormat')}}</td> + <td>{{Spec2('ES Int Draft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Intl.DateTimeFormat")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<div>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl', '같이_보기')}}</div> diff --git a/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html b/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html new file mode 100644 index 0000000000..1990621642 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html @@ -0,0 +1,86 @@ +--- +title: Intl.DateTimeFormat.prototype +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype +tags: + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Property + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat +--- +<div>{{JSRef}}</div> + +<p><strong><code>Intl.DateTimeFormat.prototype</code></strong> 속성은 {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} 생성자의 프로토타입을 나타냅니다.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="설명">설명</h2> + +<p><code>Intl.DateTimeFormat</code> 인스턴스에 대한 설명은 {{jsxref("DateTimeFormat")}} 문서를 참고하세요.</p> + +<p>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} 인스턴스는 <code>Intl.DateTimeFormat.prototype</code>을 상속합니다. 프로토타입 객체를 변경하면 모든 {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} 인스턴스가 영향을 받습니다.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>Intl.DateTimeFormat.prototype.constructor</code></dt> + <dd>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}에 대한 참조입니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format()")}}</dt> + <dd>주어진 날짜에 {{jsxref("DateTimeFormat")}} 객체의 로케일과 서식 설정을 적용해 반환합니다.</dd> +</dl> + +<dl> + <dt>{{jsxref("DateTimeFormat.formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}</dt> + <dd>서식을 적용한 날짜 문자열의 각 부분을 객체로 표현해서 {{jsxref("Array")}}로 반환합니다. 반환 값은 로케일별 커스텀 서식에 사용할 수 있습니다.</dd> + <dt>{{jsxref("DateTimeFormat.resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}</dt> + <dd>객체 인스턴스 생성 때 주어진 로케일과 서식 설정이 어떻게 반영되었나 나타내는 새로운 객체를 반환합니다.</dd> +</dl> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES Int 1.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}</td> + <td>{{Spec2('ES Int 1.0')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES Int 2.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}</td> + <td>{{Spec2('ES Int 2.0')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype', 'Intl.DateTimeFormat.prototype')}}</td> + <td>{{Spec2('ES Int Draft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.prototype")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/intl/index.html b/files/ko/web/javascript/reference/global_objects/intl/index.html new file mode 100644 index 0000000000..569fb94b80 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/intl/index.html @@ -0,0 +1,134 @@ +--- +title: Intl +slug: Web/JavaScript/Reference/Global_Objects/Intl +tags: + - Internationalization + - Intl + - JavaScript + - Reference + - 국제화 +translation_of: Web/JavaScript/Reference/Global_Objects/Intl +--- +<div>{{JSRef}}</div> + +<p><strong><code>Intl</code></strong> 객체는 각 언어에 맞는 문자비교, 숫자, 시간, 날짜비교를 제공하는, ECMAScript 국제화 API를 위한 이름공간입니다. {{jsxref("Collator")}}, {{jsxref("NumberFormat")}}, {{jsxref("DateTimeFormat")}}는 <code>Intl</code> 객체의 속성을 위한 생성자입니다. 이 페이지는 일반적인 국제화의 기능을 수행하는 객체의 생성자들과 언어를 구분하는 함수들 뿐만 아니라 이러한 속성들에 대해서도 다루고 있습니다.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt>{{jsxref("Collator", "Intl.Collator")}}</dt> + <dd>콜레이터 생성자입니다. 콜레이터 객체는 각 언어에 맞는 문자열 비교를 가능하게 해줍니다.</dd> + <dt>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</dt> + <dd>각 언어에 맞는 시간과 날짜 서식을 적용할 수 있는 객체의 생성자입니다.</dd> + <dt>{{jsxref("ListFormat", "Intl.ListFormat")}}</dt> + <dd>각 언어에 맞는 목록 서식을 적용할 수 있는 객체의 생성자입니다.</dd> + <dt>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</dt> + <dd>각 언어에 맞는 숫자 서식을 적용할 수 있는 객체의 생성자입니다.</dd> + <dt>{{jsxref("PluralRules", "Intl.PluralRules")}}</dt> + <dd>각 언어에 맞는 복수형 규칙 및 단수 복수 구분 서식을 적용할 수 있는 객체의 생성자입니다.</dd> + <dt>{{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}</dt> + <dd>각 언어에 맞는 상대 시간 서식을 적용할 수 있는 객체의 생성자입니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("Intl.getCanonicalLocales()")}}</dt> + <dd>표준 로케일 이름 목록을 반환합니다.</dd> +</dl> + +<h2 id="로케일_식별과_조정">로케일 식별과 조정</h2> + +<p>The internationalization constructors as well as several language sensitive methods of other constructors (listed under {{anch("See_also", "See also")}}) use a common pattern for identifying locales and determing the one they will actually use: they all accept <code>locales</code> and <code>options</code> arguments, and negotiate the requested locale(s) against the locales they support using an algorithm specified in the <code>options.localeMatcher</code> property.</p> + +<h3 id="locales_매개변수"><code>locales</code> 매개변수</h3> + +<p>The <code>locales</code> argument must be either a string holding a <a href="http://tools.ietf.org/html/rfc5646">BCP 47 language tag</a>, or an array of such language tags. If the <code>locales</code> argument is not provided or is undefined, the runtime's default locale is used.</p> + +<p>A BCP 47 language tag identifies a language or locale (the difference between the two is fuzzy). In their most common form it can contain, in this order: a language code, a script code, and a country code, all separated by hyphens. Examples:</p> + +<ul> + <li><code>"hi"</code>: Hindi.</li> + <li><code>"de-AT"</code>: German as used in Austria.</li> + <li><code>"zh-Hans-CN"</code>: Chinese written in simplified characters as used in China.</li> +</ul> + +<p>The subtags identifying languages, scripts, countries (regions), and (rarely used) variants in BCP 47 language tags can be found in the <a href="http://www.iana.org/assignments/language-subtag-registry">IANA Language Subtag Registry</a>.</p> + +<p>BCP 47 also allows for extensions, and one of them matters to the JavaScript internationalization functions: the <code>"u"</code> (Unicode) extension. It can be used to request a customization of the locale-specific behavior of a {{jsxref("Collator")}}, {{jsxref("NumberFormat")}}, or {{jsxref("DateTimeFormat")}} object. Examples:</p> + +<ul> + <li><code>"de-DE-u-co-phonebk"</code>: Use the phonebook variant of the German sort order, which expands umlauted vowels to character pairs: ä → ae, ö → oe, ü → ue.</li> + <li><code>"th-TH-u-nu-thai"</code>: Use Thai digits (๐, ๑, ๒, ๓, ๔, ๕, ๖, ๗, ๘, ๙) in number formatting.</li> + <li><code>"ja-JP-u-ca-japanese"</code>: Use the Japanese calendar in date and time formatting, so that 2013 is expressed as the year 25 of the Heisei period, or 平成25.</li> +</ul> + +<h3 id="로케일_조정">로케일 조정</h3> + +<p>The <code>locales</code> argument, after stripping off all Unicode extensions, is interpreted as a prioritized request from the application. The runtime compares it against the locales it has available and picks the best one available. Two matching algorithms exist: the <code>"lookup"</code> matcher follows the Lookup algorithm specified in <a href="http://tools.ietf.org/html/rfc4647#section-3.4">BCP 47</a>; the <code>"best fit"</code> matcher lets the runtime provide a locale that's at least, but possibly more, suited for the request than the result of the Lookup algorithm. If the application doesn't provide a <code>locales</code> argument, or the runtime doesn't have a locale that matches the request, then the runtime's default locale is used. The matcher can be selected using a property of the <code>options</code> argument (see below).</p> + +<p>If the selected language tag had a Unicode extension substring, that extension is now used to customize the constructed object or the behavior of the function. Each constructor or function supports only a subset of the keys defined for the Unicode extension, and the supported values often depend on the language tag. For example, the <code>"co"</code> key (collation) is only supported by {{jsxref("Collator")}}, and its <code>"phonebk"</code> value is only supported for German.</p> + +<h3 id="options_매개변수"><code>options</code> 매개변수</h3> + +<p>The <code>options</code> argument must be an object with properties that vary between constructors and functions. If the <code>options</code> argument is not provided or is undefined, default values are used for all properties.</p> + +<p>One property is supported by all language sensitive constructors and functions: The <code>localeMatcher</code> property, whose value must be a string <code>"lookup"</code> or <code>"best fit"</code> and which selects one of the locale matching algorithms described above.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES Int 1.0', '#sec-8', 'Intl')}}</td> + <td>{{Spec2('ES Int 1.0')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES Int 2.0', '#sec-8', 'Intl')}}</td> + <td>{{Spec2('ES Int 2.0')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#intl-object', 'Intl')}}</td> + <td>{{Spec2('ES Int Draft')}}</td> + <td>Added Intl.getCanonicalLocales in the 4th edition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Intl")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>소개글: <a href="http://norbertlindenberg.com/2012/12/ecmascript-internationalization-api/index.html">The ECMAScript Internationalization API</a></li> + <li>생성자 + <ul> + <li>{{jsxref("Collator", "Intl.Collator")}}</li> + <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{jsxref("ListFormat", "Intl.ListFormat")}}</li> + <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li> + <li>{{jsxref("PluralRules", "Intl.PluralRules")}}</li> + <li>{{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}</li> + </ul> + </li> + <li>메서드 + <ul> + <li>{{jsxref("String.prototype.localeCompare()")}}</li> + <li>{{jsxref("Number.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Date.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li> + <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li> + </ul> + </li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/intl/locale/index.html b/files/ko/web/javascript/reference/global_objects/intl/locale/index.html new file mode 100644 index 0000000000..a768a8bb5d --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/intl/locale/index.html @@ -0,0 +1,77 @@ +--- +title: Intl.Locale +slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale +tags: + - Internationalization + - Intl + - JavaScript + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">The <strong><code>Intl.Locale</code></strong> constructor is a standard built-in property of the Intl object that represents a Unicode locale identifier.</span></p> + +<p>{{EmbedInteractiveExample("pages/js/intl-locale.html")}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">new Intl.Locale(<var>tag</var> [, <var>options</var>])</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>tag</code></dt> + <dd>The Unicode locale identifier string.</dd> + <dt><code>options</code></dt> + <dd>An object that contains configuration for the Locale. Keys are Unicode locale tags, values are valid Unicode tag values.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>The <code><strong>Intl.Locale</strong></code> object was created to allow for easier manipulation of Unicode locales. Unicode represents locales with a string, called a <em>locale identifier</em>. The locale identifier consists of a <em>language identifier</em> and <em>extension tags</em>. Language identifiers are the core of the locale, consisting of <em>language</em>, <em>script</em>, and <em>region subtags</em>. Additional information about the locale is stored in the optional <em>extension tags</em>. Extension tags hold information about locale aspects such as calendar type, clock type, and numbering system type.</p> + +<p>Traditionally, the Intl API used strings to represent locales, just as Unicode does. This is a simple and lightweight solution that works well. Adding a Locale class, however, adds ease of parsing and manipulating the language, script, and region, as well as extension tags.</p> + +<p><span style="">The Intl.Locale object has the following properties and methods:</span></p> + +<h3 id="Properties">Properties</h3> + +<dl> + <dt>{{jsxref("Locale.prototype", "Intl.Locale.prototype")}}</dt> + <dd>The prototype object for the <code>Locale</code> constructor.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td><a href="https://tc39.github.io/proposal-intl-locale/#locale-objects">Intl.Locale proposal</a></td> + <td>Stage 3</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Intl.Locale")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li> <a href="https://github.com/zbraniecki/Intl.js/tree/intllocale">The Intl.Locale Polyfill</a></li> + <li><a href="https://www.unicode.org/reports/tr35/#Canonical_Unicode_Locale_Identifiers">Unicode locale identifiers spec</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/intl/locale/language/index.html b/files/ko/web/javascript/reference/global_objects/intl/locale/language/index.html new file mode 100644 index 0000000000..195b2a06a0 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/intl/locale/language/index.html @@ -0,0 +1,62 @@ +--- +title: Intl.Locale.prototype.language +slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/language +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/language +--- +<div>{{JSRef}}</div> + +<div></div> + +<p><span class="seoSummary"><strong><code>Intl.Locale.prototype.language</code></strong> 속성은 locale과 관련된 언어를 반환하는 접근자 속성입니다.</span></p> + +<h2 id="Description">Description</h2> + +<p>언어는 locale의 핵심 기능 중 하나입니다. 유니 코드 사양은 locale의 언어 식별자를 언어와 지역으로 함께 취급합니다 (예를 들어 영국 영어와 미국 영어 등의 방언과 변형을 구별하기 위해). {{jsxref("Locale", "Locale")}}의 language 속성은 로캘의 언어 하위 태그를 엄격하게 반환합니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="locale_식별자_문자열_인수에서_언어_설정">locale 식별자 문자열 인수에서 언어 설정</h3> + +<p>유효한 유니 코드 locale 식별자가 되려면 문자열이 언어 하위 태그로 시작해야합니다. {{jsxref("Locale", "Locale")}} 생성자에 대한 주요 인수는 유효한 유니 코드 locale 식별자여야하므로 생성자가 사용될 때마다 언어 하위 태그가있는 식별자를 전달해야합니다.</p> + +<pre class="brush: js">let langStr = new Intl.Locale("en-Latn-US"); + +console.log(langStr.language); // Prints "en"</pre> + +<h3 id="configuration_객체로_언어_오버라이딩_하기">configuration 객체로 언어 오버라이딩 하기</h3> + +<p>언어 하위 태그를 지정해야하지만 {{jsxref("Locale", "Locale")}} 생성자는 언어 하위 태그를 재정의 할 수있는 구성 개체를 사용합니다.</p> + +<pre class="brush: js">let langObj = new Intl.Locale("en-Latn-US", {language: "es"}); + +console.log(langObj.language); // Prints "es"</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.language">Intl.Locale.prototype.language proposal</a></td> + <td>Stage 3</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + +{{Compat("javascript.builtins.Intl.Locale.language")}}</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Locale", "Locale")}}</li> + <li><a href="https://www.unicode.org/reports/tr35/#unicode_language_subtag_validity">Unicode language subtag specification</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/intl/numberformat/index.html b/files/ko/web/javascript/reference/global_objects/intl/numberformat/index.html new file mode 100644 index 0000000000..6d306a0c77 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/intl/numberformat/index.html @@ -0,0 +1,198 @@ +--- +title: Intl.NumberFormat +slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat +tags: + - Internationalization + - Intl + - JavaScript + - NumberFormat + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat +--- +<div>{{JSRef}}</div> + +<p><strong><code>Intl.NumberFormat</code></strong>은 언어에 맞는 숫자 서식을 지원하는 객체의 생성자입니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/intl-numberformat.html")}}</div> + +<p class="hidden">상호작용 가능한 예제의 소스는 GitHub 리포지토리에 보관되어 있습니다. 상호작용 예제 프로젝트에 기여하고 싶으시다면, <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>를 클론한 후 풀 리퀘스트를 보내주세요.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">new Intl.NumberFormat([<var>locales</var>[, <var>options</var>]]) +Intl.NumberFormat.call(<var>this</var>[, <var>locales</var>[, <var>options</var>]]) +</pre> + +<h3 id="매개_변수">매개 변수</h3> + +<dl> + <dt><code>locales</code> {{optional_inline}}</dt> + <dd> + <p><a href="https://ko.wikipedia.org/wiki/IETF_%EC%96%B8%EC%96%B4_%ED%83%9C%EA%B7%B8">BCP 47</a> 언어 태그를 포함하는 문자열이나 문자열의 배열. 로케일 매개변수의 일반적인 형식 및 해석은 {{jsxref("Intl", "<code>Intl</code> 문서", "#Locale_identification_and_negotiation", 1)}}를 참고하세요. 다음의 Unicode 확장 키를 사용할 수 있습니다.</p> + + <dl> + <dt><code>nu</code></dt> + <dd>사용할 기수법. <code>"arab"</code>, <code>"arabext"</code>, <code>"bali"</code>, <code>"beng"</code>, <code>"deva"</code>, <code>"fullwide"</code>, <code>"gujr"</code>, <code>"guru"</code>, <code>"hanidec"</code>, <code>"khmr"</code>, <code>"knda"</code>, <code>"laoo"</code>, <code>"latn"</code>, <code>"limb"</code>, <code>"mlym"</code>, <code>"mong"</code>, <code>"mymr"</code>, <code>"orya"</code>, <code>"tamldec"</code>, <code>"telu"</code>, <code>"thai"</code>, <code>"tibt"</code> 등을 사용할 수 있습니다.</dd> + </dl> + </dd> + <dt><code>options</code> {{optional_inline}}</dt> + <dd> + <p>다음 속성을 포함하는 객체.</p> + + <dl> + <dt><code>localeMatcher</code></dt> + <dd>사용할 로케일 매칭 알고리즘. 가능한 값은 <code>"lookup"</code>과 <code>"best fit"</code>이고, 기본값은 <code>"best fit"</code>입니다. 자세한 정보는 {{jsxref("Intl", "<code>Intl</code> 문서", "#로케일_조정", 1)}}를 참고하세요.</dd> + <dt><code>style</code></dt> + <dd>사용할 서식 스타일. 가능한 값은 평문 숫자 <code>"decimal"</code>, 통화 서식 <code>"currency"</code>, 백분율 서식 <code>"percent"</code>입니다. 기본값은 <code>"decimal"</code>입니다.</dd> + <dt><code>currency</code></dt> + <dd>통화 서식에 사용할 통화입니다. 가능한 값은 <a href="https://ko.wikipedia.org/wiki/ISO_4217">ISO 4217 통화 코드</a>로 대한민국 원화 <code>"KRW"</code>, 미국 달러화 <code>"USD"</code>, 유럽 유로화 <code>"EUR"</code> 등을 포함합니다. <a href="http://www.currency-iso.org/en/home/tables/table-a1.html">현재 통화 및 펀드 코드 목록</a>을 참고하세요. 기본값은 없습니다. <code>style</code> 값을 <code>"currency"</code>로 지정했다면, <code>currency</code> 값도 반드시 지정해야 합니다.</dd> + <dt><code>currencyDisplay</code></dt> + <dd>통화 서식에서 통화를 표시하는 방법. 가능한 값은 €와 같이 현지 통화 기호를 사용하는 <code>"symbol"</code>, ISO 통화 코드를 사용하는 <code>"code"</code>, <code>"dollar"</code> 등 현지 통화 이름을 사용하는 <code>"name"</code>이 있습니다. 기본 값은 <code>"symbol"</code>입니다.</dd> + <dt><code>useGrouping</code></dt> + <dd>천 단위 구분자 혹은 천/라크/크로르 단위 구분자의 삽입 여부. 가능한 값은 <code>true</code>와 <code>false</code>입니다. 기본 값은 <code>true</code>입니다.</dd> + </dl> + + <p>아래 속성은 두 가지 그룹으로 나뉩니다. <code>minimumIntegerDigits</code>, <code>minimumFractionDigits</code>, <code>maximumFractionDigits</code>가 첫 번째 그룹이고, <code>minimumSignificantDigits</code>와 <code>maximumSignificantDigits</code>가 두 번째 그룹으로, 두 번째 그룹 중 하나라도 지정하면 첫 번째 그룹은 모두 무시합니다.</p> + + <dl> + <dt><code>minimumIntegerDigits</code></dt> + <dd>정수부의 최소 자릿수. 가능한 값은 1부터 21까지의 수로, 기본값은 1입니다.</dd> + <dt><code>minimumFractionDigits</code></dt> + <dd>소수부의 최소 자릿수. 가능한 값은 0부터 20까지의 수로, 평문 숫자와 백분율 서식의 기본값은 0입니다. 통화 서식의 기본값은 <a href="http://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 통화 코드 목록</a>이 제공하는 보조 단위의 자릿수에 따라 다릅니다. (목록에 정보가 없을 경우 2)</dd> + <dt><code>maximumFractionDigits</code></dt> + <dd>소수부의 최대 자릿수. 가능한 값은 0부터 20까지의 수로, 평문 숫자 서식의 기본값은 <code>minimumFractionDigits</code>와 3 중 더 큰 값입니다. 통화 서식의 기본값은 <code>minimumFractionDigits</code>와, <a href="http://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 통화 코드 목록</a>이 제공하는 보조 단위의 자릿수(목록에 정보가 없을 경우 2) 중 더 큰 값입니다. 백분율 서식의 기본값은 <code>minimumFractionDigits</code>와 0 중 더 큰 값입니다.</dd> + <dt><code>minimumSignificantDigits</code></dt> + <dd>유효숫자의 최소 수. 가능한 값은 1부터 21까지의 수로, 기본값은 1입니다.</dd> + <dt><code>maximumSignificantDigits</code></dt> + <dd>유효숫자의 최대 수. 가능한 값은 1부터 21까지의 수로, 기본값은 21입니다.</dd> + </dl> + </dd> +</dl> + +<h2 id="설명">설명</h2> + +<h3 id="속성">속성</h3> + +<dl> + <dt>{{jsxref("NumberFormat.prototype", "Intl.NumberFormat.prototype")}}</dt> + <dd>모든 인스턴스에 속성을 추가할 수 있습니다.</dd> +</dl> + +<h3 id="메서드">메서드</h3> + +<dl> + <dt>{{jsxref("NumberFormat.supportedLocalesOf", "Intl.NumberFormat.supportedLocalesOf()")}}</dt> + <dd>주어진 로케일 목록 중, 런타임이 지원하는 항목을 배열로 반환합니다.</dd> +</dl> + +<h2 id="NumberFormat_인스턴스"><code>NumberFormat</code> 인스턴스</h2> + +<h3 id="속성_2">속성</h3> + +<p><code>NumberFormat</code> 인스턴스는 프로토타입의 다음 속성을 상속합니다.</p> + +<div>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype', '속성')}}</div> + +<h3 id="메서드_2">메서드</h3> + +<p><code>NumberFormat</code> 인스턴스는 프로토타입의 다음 메서드를 상속합니다.</p> + +<div>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype', '메서드')}}</div> + +<h2 id="예제">예제</h2> + +<h3 id="기본적인_사용_방법">기본적인 사용 방법</h3> + +<p>로케일을 지정하지 않고 사용하면 기본 로케일 및 기본 옵션 서식을 적용한 문자열을 반환합니다.</p> + +<pre class="brush: js">var number = 3500; + +console.log(new Intl.NumberFormat().format(number)); +// → 한국 로케일의 경우 '3,500' 표시 +</pre> + +<h3 id="locales_사용하기"><code>locales</code> 사용하기</h3> + +<p>다음 예제는 지역화된 숫자 서식의 예시를 보입니다. 어플리케이션의 사용자 인터페이스 언어에 맞는 서식을 적용하려면 <code>locales</code> 매개변수로 적절한 언어(와, 필요한 경우 대체 언어)를 제공하는걸 잊지 마세요.</p> + +<pre class="brush: js">var number = 123456.789; + +// 독일은 소수점 구분자로 쉼표를 사용하고 천 단위 구분자로 마침표를 사용 +console.log(new Intl.NumberFormat('de-DE').format(number)); +// → 123.456,789 + +// 대부분의 아랍어 사용 국가에서는 실제 아라비아 숫자를 사용 +console.log(new Intl.NumberFormat('ar-EG').format(number)); +// → ١٢٣٤٥٦٫٧٨٩ + +// 인도는 천, 라크(십만), 크로르(천만) 단위에 구분자 사용 +console.log(new Intl.NumberFormat('en-IN').format(number)); +// → 1,23,456.789 + +// nu 확장 키로 기수법 지정 (아래 예시는 중국식 숫자 표기) +console.log(new Intl.NumberFormat('zh-Hans-CN-u-nu-hanidec').format(number)); +// → 一二三,四五六.七八九 + +// 발리어와 같이 지원되지 않을 수도 있는 언어를 지정할 때는 +// 다음과 같이 대체 언어를 지정할 수 있음. 아래의 경우 대체 언어는 인도어 +console.log(new Intl.NumberFormat(['ban', 'id']).format(number)); +// → 123.456,789 +</pre> + +<h3 id="options_사용"><code>options</code> 사용</h3> + +<p><code>options</code> 매개변수를 지정해 결과를 원하는 형태로 바꿀 수 있습니다.</p> + +<pre class="brush: js">var number = 123456.789; + +// 통화 서식 +console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number)); +// → 123.456,79 € + +// 한국 원화는 보조 통화 단위를 사용하지 않음 +console.log(new Intl.NumberFormat('ko-KR', { style: 'currency', currency: 'KRW' }).format(number)); +// → ₩123,457 + +// 유효숫자를 세 개로 제한 +console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number)); +// → 1,23,000 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES Int 1.0', '#sec-11.1', 'Intl.NumberFormat')}}</td> + <td>{{Spec2('ES Int 1.0')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ES Int 2.0', '#sec-11.1', 'Intl.NumberFormat')}}</td> + <td>{{Spec2('ES Int 2.0')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#numberformat-objects', 'Intl.NumberFormat')}}</td> + <td>{{Spec2('ES Int Draft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Intl.NumberFormat")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<div>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl', '같이_보기')}}</div> diff --git a/files/ko/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html b/files/ko/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html new file mode 100644 index 0000000000..19b0b8e0e6 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html @@ -0,0 +1,85 @@ +--- +title: Intl.NumberFormat.prototype +slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype +tags: + - Internationalization + - Intl + - JavaScript + - NumberFormat + - Property + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat +--- +<div>{{JSRef}}</div> + +<p><strong><code>Intl.NumberFormat.prototype</code></strong> 속성은 {{jsxref("NumberFormat", "Intl.NumberFormat")}} 생성자의 프로토타입을 나타냅니다.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="설명">설명</h2> + +<p><code>Intl.NumberFormat</code> 인스턴스에 대한 설명은 {{jsxref("NumberFormat")}} 문서를 참고하세요.</p> + +<p>{{jsxref("NumberFormat", "Intl.NumberFormat")}} 인스턴스는 <code>Intl.NumberFormat.prototype</code>을 상속합니다. 프로토타입 객체를 변형하면 모든 {{jsxref("NumberFormat", "Intl.NumberFormat")}} 인스턴스가 영향을 받습니다.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>Intl.NumberFormat.prototype.constructor</code></dt> + <dd><code>Intl.NumberFormat</code>에 대한 참조입니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("NumberFormat.format", "Intl.NumberFormat.prototype.format()")}}</dt> + <dd>주어진 숫자에 {{jsxref("NumberFormat")}} 객체의 로케일과 서식 설정을 적용해 반환합니다.</dd> +</dl> + +<dl> + <dt>{{jsxref("NumberFormat.formatToParts", "Intl.NumberFormat.prototype.formatToParts()")}}</dt> + <dd>서식을 적용한 숫자의 각 부분을 객체로 표현해서 {{jsxref("Array")}}로 반환합니다. 반환 값은 로케일별 커스텀 서식에 사용할 수 있습니다.</dd> + <dt>{{jsxref("NumberFormat.resolvedOptions", "Intl.NumberFormat.prototype.resolvedOptions()")}}</dt> + <dd>객체 인스턴스 생성 때 주어진 로케일과 콜레이션 설정이 어떻게 반영되었나 나타내는 새로운 객체를 반환합니다.</dd> +</dl> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES Int 1.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}</td> + <td>{{Spec2('ES Int 1.0')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES Int 2.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}</td> + <td>{{Spec2('ES Int 2.0')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype', 'Intl.NumberFormat.prototype')}}</td> + <td>{{Spec2('ES Int Draft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Intl.NumberFormat.prototype")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/isfinite/index.html b/files/ko/web/javascript/reference/global_objects/isfinite/index.html new file mode 100644 index 0000000000..834389e2f7 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/isfinite/index.html @@ -0,0 +1,84 @@ +--- +title: isFinite() +slug: Web/JavaScript/Reference/Global_Objects/isFinite +tags: + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/isFinite +--- +<div>{{jsSidebar("Objects")}}</div> + +<p><code><strong>isFinite()</strong></code> 전역 함수는 주어진 값이 유한수인지 판별합니다. 필요한 경우 매개변수를 먼저 숫자로 변환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-isfinite.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate">isFinite(<em>testValue</em>)</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>testValue</code></dt> + <dd>유한한지 판별할 값.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p><code>testValue</code>가 양 또는 음의 {{jsxref("Infinity")}}, {{jsxref("NaN")}}, 또는 {{jsxref("undefined")}}면 <code>false</code>, 아니면 <code>true</code>.</p> + +<h2 id="설명">설명</h2> + +<p><code>isFinite()</code>은 최상위 함수로 어떤 객체와도 연결되지 않았습니다.</p> + +<p>숫자가 유한수인지 판별하기 위해 <code>isFinite()</code>을 사용할 수 있습니다. <code>isFinite()</code>은 주어진 수를 검사해 그 값이 <code>NaN</code>, 양의 무한대, 또는 음의 무한대이면 <code>false</code>를 반환합니다. 그렇지 않으면 <code>true</code>를 반환합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="isFinite_사용하기"><code>isFinite()</code> 사용하기</h3> + +<pre class="brush: js notranslate">isFinite(Infinity); // false +isFinite(NaN); // false +isFinite(-Infinity); // false + +isFinite(0); // true +isFinite(2e64); // true +isFinite(910); // true + +isFinite(null); // true, would've been false with the + // more robust Number.isFinite(null) + +isFinite('0'); // true, would've been false with the + // more robust Number.isFinite("0")</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-isfinite-number', 'isFinite')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.isFinite")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Number.isFinite()")}}</li> + <li>{{jsxref("Number.NaN()")}}</li> + <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li> + <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/isnan/index.html b/files/ko/web/javascript/reference/global_objects/isnan/index.html new file mode 100644 index 0000000000..f0b2f12a31 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/isnan/index.html @@ -0,0 +1,190 @@ +--- +title: isNaN() +slug: Web/JavaScript/Reference/Global_Objects/isNaN +tags: + - JavaScript + - Method + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/isNaN +--- +<div>{{jsSidebar("Objects")}}</div> + +<p><code><strong>isNaN()</strong></code> 함수는 어떤 값이 {{jsxref("NaN")}}인지 판별합니다. <code>isNaN</code> 함수는 몇몇 {{anch("일반적이지 않은 규칙")}}을 가지고 있으므로, ECMAScript 2015에서 추가한 {{jsxref("Number.isNaN()")}}으로 바꾸는 편이 좋을 수도 있습니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/globalprops-isnan.html")}}</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code>isNaN(<em>value</em>)</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>value</code></dt> + <dd>테스트되는 값.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 값이 {{jsxref("NaN")}}이면 <code>true</code>, 아니면 <code>false</code>.</p> + +<h2 id="설명">설명</h2> + +<h3 id="isNaN_함수의_필요성"><code>isNaN</code> 함수의 필요성</h3> + +<p>JavaScript의 다른 모든 값과 달리, {{jsxref("NaN")}}은 같음 연산(<code>==</code>, <code>===</code>)을 사용해 판별할 수 없습니다. <code>NaN == NaN</code>, <code>NaN === NaN</code>이기 때문입니다. 그래서 <code>NaN</code>을 판별하는 함수가 필요합니다.</p> + +<h3 id="NaN_값의_기원"><code>NaN</code> 값의 기원</h3> + +<p><code>NaN</code> 값은 산술 연산이 <strong>정의되지 않은</strong> 결과 또는 <strong>표현할 수 없는</strong> 결과를 도출하면 생성되며, 반드시 오버플로 조건을 나타내는 것은 아닙니다. 숫자가 아닌 값의 변환을 시도했으나 알맞은 원시 숫자 값이 없는 경우의 결과도 <code>NaN</code>입니다.</p> + +<p>예를 들어 0을 0으로 나누면 <code>NaN</code>이지만, 다른 수를 0으로 나누면 그렇지 않습니다.</p> + +<h3 id="혼란스러운_특별_케이스_행동"><a id="special-behavior" name="special-behavior"></a>혼란스러운 특별 케이스 행동</h3> + +<p><code>isNaN</code> 함수 스펙의 아주 초기 버전 이후로, 숫자 아닌 인수를 위한 행동이 혼란스럽습니다. <code>isNaN</code> 함수의 인수가 <a href="http://es5.github.com/#x8.5" title="http://es5.github.com/#x8.5">Number</a> 형이 아닌 경우, 그 값은 먼저 숫자로 강제됩니다. 결과값은 그 뒤에 {{jsxref("NaN")}}인지 결정하기 위해 테스트됩니다. 따라서 숫자 형으로 강제된 결과 유효한 비 NaN 숫자값(특히 강제될 때 숫자값이 0 또는 1을 주는 빈 문자열 및 불린 원시형)이 되는 비 숫자의 경우, "false" 반환값은 예기치 않을 수 있습니다; 예를 들어 빈 문자열은 분명히 "not a number"입니다. 혼란(confusion)은 용어 "not a number"가 IEEE-754 부동 소수점 값으로 표현된 숫자에 특정 의미가 있다는 사실에서 생깁니다. 함수는 "이 값이, 숫자값으로 강제되는 경우, IEEE-754 'Not A Number' 값인가?"라는 질문에 답하는 것으로 해석되어야 합니다.</p> + +<p>ECMAScript (ES2015) 최근 버전은 {{jsxref("Number.isNaN()")}} 함수를 포함합니다. <code>Number.isNaN(x)</code>는 <code>x</code>가 <code>NaN</code>인지 아닌지 테스트하는 믿을 수 있는 방법이 됩니다. 그러나 <code>Number.isNaN</code>으로도, <code>NaN</code>의 의미는 정확한 숫자 의미로 남아있고 단순히 "not a number"는 아닙니다. 그 대신에, <code>Number.isNaN</code>이 없을 경우에, 식 <code>(x != x)</code>은 변수 <code>x</code>가 <code>NaN</code>인지 아닌지 테스트하는 더 믿을 수 있는 방법입니다, 그 결과는 <code>isNaN</code>을 믿을 수 없게 하는 오탐(false positive)의 대상이 아니기에.</p> + +<p>당신은 isNaN을 다음과 같이 생각할 수 있습니다:</p> + +<pre class="brush: js">isNaN = function(value) { + Number.isNaN(Number(value)); +}</pre> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">isNaN(NaN); // 참 +isNaN(undefined); // 참 +isNaN({}); // 참 + +isNaN(true); // 거짓 +isNaN(null); // 거짓 +isNaN(37); // 거짓 + +// 문자열 +isNaN("37"); // 거짓: "37"은 NaN이 아닌 숫자 37로 변환됩니다 +isNaN("37.37"); // 거짓: "37.37"은 NaN이 아닌 숫자 37.37로 변환됩니다 +isNaN("123ABC"); // 참: parseInt("123ABC")는 123이지만 Number("123ABC")는 NaN입니다 +isNaN(""); // 거짓: 빈 문자열은 NaN이 아닌 0으로 변환됩니다 +isNaN(" "); // 거짓: 공백이 있는 문자열은 NaN이 아닌 0으로 변환됩니다 + +// dates +isNaN(new Date()); // 거짓 +isNaN(new Date().toString()); // 참 + +// 이것이 허위 양성이고 isNaN이 완전히 신뢰할 수 없는 이유이다. +isNaN("blabla") // 참: "blabla"는 숫자로 변환됩니다. + // 이것을 숫자롯 parsing 하는 것을 실패하고 NaN을 반환한다. +</pre> + +<h3 id="유용한_특별_케이스_행동">유용한 특별 케이스 행동</h3> + +<p><code>isNaN()</code>을 고려한 더 용도 중심 방법이 있습니다: <code>isNaN(x)</code>가 <code>false</code>를 반환하면, 그 식이 <code>NaN</code>을 반환하게 하지 않고 산술 식에 <code>x</code>를 쓸 수 있습니다. <code>true</code>를 반환하는 경우, <code>x</code>는 모든 산술 식이 <code>NaN</code>을 반환하게 합니다. 이는 JavaScript에서, <code>isNaN(x) == true</code>가 <code>NaN</code>을 반환하는 <code>x - 0</code>과 동일함(JavaScript에서 <code>x - 0 == NaN</code>가 항상 거짓을 반환하여 그것을 테스트할 수 없지만)을 뜻합니다. 실제로, <code>isNaN(x)</code>, <code>isNaN(x - 0)</code>, <code>isNaN(Number(x))</code>, <code>Number.isNaN(x - 0)</code> 및 <code>Number.isNaN(Number(x))</code>는 항상 같은 값을 반환하며 JavaScript에서 <code>isNaN(x)</code>는 그저 이러한 각각의 조건(terms)을 표현하는 가장 짧은 형태입니다.</p> + +<p>예를 들어 함수에 인수가 산술 처리 가능한(숫자 "처럼" 쓸 수 있는)지를 테스트하기 위해 사용할 수 있습니다, 그렇지 않은 경우 기본 값 또는 다른 무언가를 제공해야 합니다. 이런 식으로 문맥에 따라 암시적인 값 변환을 제공하는 JavaScript의 다양성(versatility) 전체를 이용케 하는 함수를 가질 수 있습니다.</p> + +<h2 id="예시">예시</h2> + +<pre class="brush: js">function increment(x) { + if (isNaN(x)) x = 0; + return x + 1; +}; + +// Number.isNaN()과 같은 효과: +function increment(x) { + if (Number.isNaN(Number(x))) x = 0; + return x + 1; +}; + +// 함수의 인수 x에 대해 다음 경우에, +// isNaN(x)는 항상 거짓, x가 실제 숫자가 아닐지라도 +// 하지만 산술 식에 그대로 +// 사용될 수 있습니다 +increment(""); // 1: ""는 0으로 변환됩니다 +increment(new String()); // 1: 빈 문자열을 나타내는 String 객체는 0으로 변환됩니다 +increment([]); // 1: []는 0으로 변환됩니다 +increment(new Array()); // 1: 빈 배열을 나타내는 Array 객체는 0으로 변환됩니다 +increment("0"); // 1: "0"은 0으로 변환됩니다 +increment("1"); // 2: "1"은 1로 변환됩니다 +increment("0.1"); // 1.1: "0.1"은 0.1로 변환됩니다 +increment("Infinity"); // Infinity: "Infinity"는 Infinity로 변환됩니다 +increment(null); // 1: null은 0으로 변환됩니다 +increment(false); // 1: false는 0으로 변환됩니다 +increment(true); // 2: true는 1로 변환됩니다 +increment(new Date()); // 밀리초로 현재 date/time + 1을 반환합니다 + +// 함수의 인수 x에 대해 다음 경우에, +// isNaN(x)는 항상 거짓이고 x는 실제로 숫자입니다 +increment(-1); // 0 +increment(-0.1); // 0.9 +increment(0); // 1 +increment(1); // 2 +increment(2); // 3 +// ... 등등 ... +increment(Infinity); // Infinity + +// 함수의 인수 x에 대해 다음 경우에, +// isNaN(x)는 항상 참이고 x는 실제로 숫자가 아닙니다, +// 따라서 함수는 인수를 0으로 대체하고 1을 반환합니다 +increment(String); // 1 +increment(Array); // 1 +increment("blabla"); // 1 +increment("-blabla"); // 1 +increment(0/0); // 1 +increment("0/0"); // 1 +increment(Infinity/Infinity); // 1 +increment(NaN); // 1 +increment(undefined); // 1 +increment(); // 1 + +// isNaN(x)는 항상 isNaN(Number(x))과 같지만, +// x의 존재는 여기서 필수입니다! +isNaN(x) == isNaN(Number(x)) // x == undefined 포함 x의 어떤 값도 참, + // isNaN(undefined) == true 및 Number(undefined)가 NaN을 반환하기에, + // 하지만 ... +isNaN() == isNaN(Number()) // 거짓, isNaN() == true 및 Number() == 0 때문에 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.2.4', 'isNaN')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-isnan-number', 'isNaN')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-isnan-number', 'isNaN')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div id="compat-mobile">{{Compat("javascript.builtins.isNaN")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("NaN")}}</li> + <li>{{jsxref("Number.isNaN()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/json/index.html b/files/ko/web/javascript/reference/global_objects/json/index.html new file mode 100644 index 0000000000..ef21cfc534 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/json/index.html @@ -0,0 +1,122 @@ +--- +title: JSON +slug: Web/JavaScript/Reference/Global_Objects/JSON +tags: + - JSON + - JavaScript + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/JSON +--- +<div>{{JSRef}}</div> + +<p><strong><code>JSON</code></strong> 객체는 <a class="external" href="http://json.org/">JavaScript Object Notation</a>({{glossary("JSON")}})을 분석하거나 값을 JSON으로 변환하는 메서드를 가지고 있습니다. <code>JSON</code>을 직접 호출하거나 인스턴스를 생성할 수 없으며, 두 개의 메서드를 제외하면 자신만의 흥미로운 기능은 없습니다.</p> + +<h2 id="JavaScript와_JSON의_차이">JavaScript와 JSON의 차이</h2> + +<p>JSON은 객체, 배열, 숫자, 문자열, 불리언과 {{jsxref("null")}}을 직렬화하기 위한 구문으로, JavaScript 구문에 기반을 두고 있지만 분명한 차이점을 가지고 있습니다. 즉, 어떤 JavaScript는 JSON이 아닙니다.</p> + +<dl> + <dt>객체와 배열</dt> + <dd>속성의 이름은 반드시 큰따옴표로 표시된 문자열이어야 합니다. <a href="/ko/docs/Web/JavaScript/Reference/Trailing_commas">후행 쉼표</a>는 허용하지 않습니다.</dd> + <dt>숫자</dt> + <dd>선행 0은 허용하지 않습니다. 소숫점 뒤에는 적어도 한 자릿수가 뒤따라야 합니다. {{jsxref("NaN")}}과 {{jsxref("Infinity")}}는 지원하지 않습니다.</dd> + <dt>모든 JSON 텍스트는 유효한 JavaScript 표현식...</dt> + <dd>...이지만,<a href="https://github.com/tc39/proposal-json-superset"> 모든 JSON 텍스트를 올바른 ECMA-262로 만드는 제안</a>을 구현한 JavaScript 엔진에서만 그러합니다. 다른 엔진에서는, U+2028 LINE SEPARATOR와 U+2029 PARAGRAPH SEPARATOR를 JSON에서 스트링 리터럴과 속성의 키로 사용할 수 있지만, JavaScript 문자열 리터럴에서 사용하면 {{jsxref("SyntaxError")}}가 발생합니다.</dd> +</dl> + +<p>{{jsxref("JSON.parse()")}}로 JSON 문자열을 분석하고 {{jsxref("eval")}}이 JavaScript 문자열로 실행하는 다음 예시를 참고하세요.</p> + +<pre class="brush: js">const code = '"\u2028\u2029"' +JSON.parse(code) // 모든 엔진에서 "\u2028\u2029"로 평가 +eval(code) // 오래된 엔진에서 SyntaxError +</pre> + +<p>다른 차이점으로는 문자열의 작은따옴표 금지와, 주석 및 {{jsxref("undefined")}} 미지원이 있습니다. JSON에 기반한, 보다 사람 친화적인 설정 형식을 원하면 Babel 컴파일러가 사용하는 <a href="https://json5.org/">JSON5</a>가 있고, 좀 더 많이 쓰이는 <a href="https://ko.wikipedia.org/wiki/YAML">YAML</a>도 있습니다.</p> + +<h2 id="전체_JSON_구문">전체 JSON 구문</h2> + +<pre><var>JSON</var> = <strong>null</strong> + <em>or</em> <strong>true</strong> <em>or</em> <strong>false</strong> + <em>or</em> <var>JSONNumber</var> + <em>or</em> <var>JSONString</var> + <em>or</em> <var>JSONObject</var> + <em>or</em> <var>JSONArray</var> + +<var>JSONNumber</var> = <strong>-</strong> <var>PositiveNumber</var> + <em>or</em> <var>PositiveNumber</var> +<var>PositiveNumber</var> = DecimalNumber + <em>or</em> <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var> + <em>or</em> <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var> <var>ExponentPart</var> + <em>or</em> <var>DecimalNumber</var> <var>ExponentPart</var> +<var>DecimalNumber</var> = <strong>0</strong> + <em>or</em> <var>OneToNine</var> <var>Digits</var> +<var>ExponentPart</var> = <strong>e</strong> <var>Exponent</var> + <em>or</em> <strong>E</strong> <var>Exponent</var> +<var>Exponent</var> = <var>Digits</var> + <em>or</em> <strong>+</strong> <var>Digits</var> + <em>or</em> <strong>-</strong> <var>Digits</var> +<var>Digits</var> = <var>Digit</var> + <em>or</em> <var>Digits</var> <var>Digit</var> +<var>Digit</var> = <strong>0</strong> through <strong>9</strong> +<var>OneToNine</var> = <strong>1</strong> through <strong>9</strong> + +<var>JSONString</var> = <strong>""</strong> + <em>or</em> <strong>"</strong> <var>StringCharacters</var> <strong>"</strong> +<var>StringCharacters</var> = <var>StringCharacter</var> + <em>or</em> <var>StringCharacters</var> <var>StringCharacter</var> +<var>StringCharacter</var> = any character + <em>except</em> <strong>"</strong> <em>or</em> <strong>\</strong> <em>or</em> U+0000 through U+001F + <em>or</em> <var>EscapeSequence</var> +<var>EscapeSequence</var> = <strong>\"</strong> <em>or</em> <strong>\/</strong> <em>or</em> <strong>\\</strong> <em>or</em> <strong>\b</strong> <em>or</em> <strong>\f</strong> <em>or</em> <strong>\n</strong> <em>or</em> <strong>\r</strong> <em>or</em> <strong>\t</strong> + <em>or</em> <strong>\u</strong> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var> +<var>HexDigit</var> = <strong>0</strong> through <strong>9</strong> + <em>or</em> <strong>A</strong> through <strong>F</strong> + <em>or</em> <strong>a</strong> through <strong>f</strong> + +<var>JSONObject</var> = <strong>{</strong> <strong>}</strong> + <em>or</em> <strong>{</strong> <var>Members</var> <strong>}</strong> +<var>Members</var> = <var>JSONString</var> <strong>:</strong> <var>JSON</var> + <em>or</em> <var>Members</var> <strong>,</strong> <var>JSONString</var> <strong>:</strong> <var>JSON</var> + +<var>JSONArray</var> = <strong>[</strong> <strong>]</strong> + <em>or</em> <strong>[</strong> <var>ArrayElements</var> <strong>]</strong> +<var>ArrayElements</var> = <var>JSON</var> + <em>or</em> <var>ArrayElements</var> <strong>,</strong> <var>JSON</var> +</pre> + +<p>중요하지 않은 공백은 <code><var>JSONNumber</var></code>(숫자에는 공백이 없어야 함) 또는 <code><var>JSONString</var></code>(문자열에서 해당 문자로 해석되거나 오류를 일으킴) 내를 제외하고 어디에나 존재할 수 있습니다. 탭 문자(<a href="http://unicode-table.com/en/0009/">U+0009</a>), 캐리지 리턴(<a href="http://unicode-table.com/en/000D/">U+000D</a>), 라인 피드(<a href="http://unicode-table.com/en/000A/">U+000A</a>) 및 스페이스(<a href="http://unicode-table.com/en/0020/">U+0020</a>) 문자만이 유효한 공백 문자입니다.</p> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("JSON.parse()")}}</dt> + <dd>문자열을 JSON으로서 구문 분석하고, 선택적으로 분석 결과의 값과 속성을 변환해 반환합니다.</dd> + <dt>{{jsxref("JSON.stringify()")}}</dt> + <dd>주어진 값에 해당하는 JSON 문자열을 반환합니다. 선택 사항으로 특정 속성만 포함하거나 사용자 정의 방식으로 속성을 대체합니다.</dd> +</dl> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-json-object', 'JSON')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("javascript.builtins.JSON")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Date.prototype.toJSON()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/json/parse/index.html b/files/ko/web/javascript/reference/global_objects/json/parse/index.html new file mode 100644 index 0000000000..fa32b3711e --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/json/parse/index.html @@ -0,0 +1,123 @@ +--- +title: JSON.parse() +slug: Web/JavaScript/Reference/Global_Objects/JSON/parse +tags: + - ECMAScript 5 + - JSON + - JavaScript + - Method + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/JSON/parse +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><strong><code>JSON.parse()</code></strong> 메서드는 JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성합니다.</span> 선택적으로, <code>reviver</code> 함수를 인수로 전달할 경우, 결과를 반환하기 전에 변형할 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/json-parse.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">JSON.parse(<var>text</var>[, <var>reviver</var>])</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>text</code></dt> + <dd>JSON으로 변환할 문자열. JSON 구문은 {{jsxref("JSON")}} 객체의 설명을 참고하세요.</dd> + <dt><code>reviver</code> {{optional_inline}}</dt> + <dd>함수라면, 변환 결과를 반환하기 전에 이 인수에 전달해 변형함.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 JSON 문자열에 대응하는 {{jsxref("Object")}}.</p> + +<h3 id="예외">예외</h3> + +<p>변환할 문자열이 유효한 JSON이 아닐 경우 {{jsxref("SyntaxError")}}.</p> + +<h2 id="예제">예제</h2> + +<h3 id="JSON.parse()_사용하기"><code>JSON.parse()</code> 사용하기</h3> + +<pre class="brush: js">JSON.parse('{}'); // {} +JSON.parse('true'); // true +JSON.parse('"foo"'); // "foo" +JSON.parse('[1, 5, "false"]'); // [1, 5, "false"] +JSON.parse('null'); // null +</pre> + +<h3 id="reviver_매개변수_사용하기"><code>reviver</code> 매개변수 사용하기</h3> + +<p><code>reviver</code>가 주어지면 분석한 값을 반환하기 전에 변환합니다. 구체적으로는, 분석한 값과 그 모든 속성(가장 깊게 중첩된 속성부터 시작해 제일 바깥의 원래 값까지)을 각각 <code>reviver</code>에 전달합니다. <code>reviver</code>의 <code>this</code> 문맥은 분석한 값으로 설정되고, 속성 명(문자열)과 값을 인자로 전달받습니다. <code>reviver</code>가 {{jsxref("undefined")}}를 반환하거나 반환하지 않는다면, 예컨대 함수가 중간에 실패한다면 그 속성은 최종 결과에서 제외됩니다. 그 외에는 반환 값으로 속성의 값을 재설정합니다.</p> + +<p>만약 <code>reviver</code>가 일부 값만 변환하고 나머지는 건드리지 않는다면, 나머지 값을 그대로 반환하는걸 잊지 마세요. 그렇지 않으면 변환한 값 외에는 결과에서 모두 제외됩니다.</p> + +<pre class="brush: js">JSON.parse('{"p": 5}', (key, value) => + typeof value === 'number' + ? value * 2 // 숫자라면 2배 + : value // 나머진 그대로 +); + +// { p: 10 } + +JSON.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', (key, value) => { + console.log(key); // 현재 속성명 출력, 마지막은 빈 문자열("") + return value; // 변환하지 않고 그대로 반환 +}); + +// 1 +// 2 +// 4 +// 6 +// 5 +// 3 +// ""</pre> + +<h3 id="후행_쉼표_사용_불가">후행 쉼표 사용 불가</h3> + +<pre class="example-bad brush: js">// 둘 다 SyntaxError +JSON.parse('[1, 2, 3, 4, ]'); +JSON.parse('{"foo" : 1, }'); +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.12.2', 'JSON.parse')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.7.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-json.parse', 'JSON.parse')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-json.parse', 'JSON.parse')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.JSON.parse")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("JSON.stringify()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/json/stringify/index.html b/files/ko/web/javascript/reference/global_objects/json/stringify/index.html new file mode 100644 index 0000000000..12de82705b --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/json/stringify/index.html @@ -0,0 +1,230 @@ +--- +title: JSON.stringify() +slug: Web/JavaScript/Reference/Global_Objects/JSON/stringify +tags: + - JSON + - JavaScript + - Method + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/JSON/stringify +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><strong><code>JSON.stringify()</code></strong> 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환합니다.</span> 선택적으로, <code>replacer</code>를 함수로 전달할 경우 변환 전 값을 변형할 수 있고, 배열로 전달할 경우 지정한 속성만 결과에 포함합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/json-stringify.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate">JSON.stringify(<var>value</var>[, <var>replacer</var>[, <var>space</var>]])</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>value</code></dt> + <dd>JSON 문자열로 변환할 값.</dd> + <dt><code>replacer</code> {{optional_inline}}</dt> + <dd>문자열화 동작 방식을 변경하는 함수, 혹은 JSON 문자열에 포함될 값 객체의 속성들을 선택하기 위한 화이트리스트(whitelist)로 쓰이는 {{jsxref("String")}} 과 {{jsxref("Number")}} 객체들의 배열. 이 값이 null 이거나 제공되지 않으면, 객체의 모든 속성들이 JSON 문자열 결과에 포함된다.</dd> +</dl> + +<dl> + <dt><code>space</code> {{optional_inline}}</dt> + <dd>가독성을 목적으로 JSON 문자열 출력에 공백을 삽입하는데 사용되는 {{jsxref("String")}} 또는 {{jsxref("Number")}} 객체. 이것이 <code>Number</code> 라면, 공백으로 사용되는 스페이스(space)의 수를 나타낸다; 이 수가 10 보다 크면 10 으로 제한된다. 1 보다 작은 값은 스페이스가 사용되지 않는 것을 나타낸다. 이것이 <code>String</code> 이라면, 그 문자열(만약 길이가 10 보다 길다면, 첫번째 10 개의 문자)이 공백으로 사용된다. 이 매개 변수가 제공되지 않는다면(또는 null 이면), 공백이 사용되지 않는다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 값과 대응하는 JSON 문자열.</p> + +<h3 id="예외">예외</h3> + +<p>순환 참조를 발견할 경우 {{jsxref("TypeError")}}(<code>cyclic object value</code>).</p> + +<h2 id="설명">설명</h2> + +<p><code>JSON.stringify()</code>는 값을 JSON 표기법으로 변환한다.</p> + +<ul> + <li>배열이 아닌 객체의 속성들은 어떤 특정한 순서에 따라 문자열화 될 것이라고 보장되지 않는다. 같은 객체의 문자열화에 있어서 속성의 순서에 의존하지 않는다.</li> + <li>{{jsxref("Boolean")}}, {{jsxref("Number")}}, {{jsxref("String")}} 객체들은 문자열화 될 때 전통적인 변환 의미에 따라 연관된 기본형(primitive) 값으로 변환된다.</li> + <li>{{jsxref("undefined")}}, 함수, 심볼(symbol)은 변환될 때 생략되거나(객체 안에 있을 경우) {{jsxref("null")}} 로 변환된다(배열 안에 있을 경우).</li> + <li>심볼을 키로 가지는 속성들은 <code>replacer</code> 함수를 사용하더라도 완전히 무시된다.</li> + <li>열거 불가능한 속성들은 무시된다.</li> +</ul> + +<pre class="brush: js notranslate">JSON.stringify({}); // '{}' +JSON.stringify(true); // 'true' +JSON.stringify('foo'); // '"foo"' +JSON.stringify([1, 'false', false]); // '[1,"false",false]' +JSON.stringify({ x: 5 }); // '{"x":5}' + +JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)) +// '"2006-01-02T15:04:05.000Z"' + +JSON.stringify({ x: 5, y: 6 }); +// '{"x":5,"y":6}' or '{"y":6,"x":5}' +JSON.stringify([new Number(1), new String('false'), new Boolean(false)]); +// '[1,"false",false]' + +// Symbols: +JSON.stringify({ x: undefined, y: Object, z: Symbol('') }); +// '{}' +JSON.stringify({ [Symbol('foo')]: 'foo' }); +// '{}' +JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]); +// '{}' +JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) { + if (typeof k === 'symbol') { + return 'a symbol'; + } +}); +// '{}' + +// Non-enumerable properties: +JSON.stringify( Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) ); +// '{"y":"y"}' + +</pre> + +<h3 id="replacer_매개_변수"><code>replacer</code> 매개 변수</h3> + +<p><code>replacer</code> 매개변수는 함수 또는 배열이 될 수 있다. 함수일 때는 문자열화 될 key 와 value, 2개의 매개변수를 받는다. key 가 발견된 객체는 리플레이서의 <code>this</code> 매개변수로 제공된다. 맨 처음에는 문자열화될 그 객체를 나타내는 비어 있는 key와 함께 호출되고, 그 다음에는 문자열화될 그 객체나 배열의 각 속성에 대해 호출된다. 이것은 JSON 문자열에 추가되어야 하는 값을 반환해야한다:</p> + +<ul> + <li>{{jsxref("Number")}} 를 반환하면, JSON 문자열에 추가될 때 그 수를 나타내는 문자열이 그 속성의 값으로 사용된다.</li> + <li>{{jsxref("String")}} 을 반환하면, 그것이 JSON 문자열에 추가될 때 속성의 값으로 사용된다.</li> + <li>{{jsxref("Boolean")}} 을 반환하면, 그것이 JSON 문자열에 추가될 때 "true" 또는 "false" 이 속성의 값으로 사용된다.</li> + <li>다른 객체를 반환하면, 그 객체는 <code>replacer</code> 함수를 각각의 속성에 대해 호출하며 순환적으로 JSON 문자열로 문자열화된다. 그 객체가 함수인 경우에는 JSON 문자열에 아무것도 추가되지 않는다.</li> + <li><code>undefined</code> 를 반환하면, 그 속성은 JSON 문자열 결과에 포함되지 않는다.</li> +</ul> + +<div class="note"><strong>유의:</strong> <code>replacer</code> 함수를 배열로부터 값을 제거하기위해 사용할 수 없다. 만약 <code>undefined</code> 나 함수를 반환한다면 <code>null</code> 이 대신 사용될 것이다.</div> + +<h4 id="함수에_대한_예제">함수에 대한 예제</h4> + +<pre class="brush: js notranslate">function replacer(key, value) { + if (typeof value === "string") { + return undefined; + } + return value; +} + +var foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7}; +var jsonString = JSON.stringify(foo, replacer); +</pre> + +<p>JSON 문자열 결과는 <code>{"week":45,"month":7}</code> 이다.</p> + +<h4 id="배열에_대한_예제">배열에 대한 예제</h4> + +<p><code>replacer</code> 가 배열인 경우, 그 배열의 값은 JSON 문자열의 결과에 포함되는 속성의 이름을 나타낸다.</p> + +<pre class="brush: js notranslate">JSON.stringify(foo, ['week', 'month']); +// '{"week":45,"month":7}', 단지 "week" 와 "month" 속성을 포함한다 +</pre> + +<h3 id="space_매개_변수"><code>space</code> 매개 변수</h3> + +<p><code>space</code> 매개변수는 최종 문자열의 간격을 제어한다. 숫자일 경우 최대 10자 만큼의 공백 문자 크기로 들여쓰기되며, 문자열인 경우 해당 문자열 또는 처음 10자 만큼 들여쓰기 된다.</p> + +<pre class="brush: js notranslate">JSON.stringify({ a: 2 }, null, ' '); +// '{ +// "a": 2 +// }' +</pre> + +<p>'\t'를 사용하면 일반적으로 들여쓰기 된 코드스타일과 유사함.</p> + +<pre class="brush: js notranslate">JSON.stringify({ uno: 1, dos: 2 }, null, '\t'); +// returns the string: +// '{ +// "uno": 1, +// "dos": 2 +// }' +</pre> + +<h3 id="toJSON_작동"><code>toJSON()</code> 작동</h3> + +<p>If an object being stringified has a property named <code>toJSON</code> whose value is a function, then the <code>toJSON()</code> method customizes JSON stringification behavior: instead of the object being serialized, the value returned by the <code>toJSON()</code> method when called will be serialized. For example:</p> + +<pre class="brush: js notranslate">var obj = { + foo: 'foo', + toJSON: function() { + return 'bar'; + } +}; +JSON.stringify(obj); // '"bar"' +JSON.stringify({ x: obj }); // '{"x":"bar"}' +</pre> + +<h3 id="Example_of_using_JSON.stringify_with_localStorage">Example of using <code>JSON.stringify()</code> with <code>localStorage</code></h3> + +<p>In a case where you want to store an object created by your user and allowing it to be restored even after the browser has been closed, the following example is a model for the applicability of <code>JSON.stringify()</code>:</p> + +<div class="warning"> +<p>Functions are not a valid JSON data type so they will not work. However, they can be displayed if first converted to a string (e.g. in the replacer), via the function's toString method. Also, some objects like {{jsxref("Date")}} will be a string after {{jsxref("JSON.parse()")}}.</p> +</div> + +<pre class="brush: js notranslate">// Creating an example of JSON +var session = { + 'screens': [], + 'state': true +}; +session.screens.push({ 'name': 'screenA', 'width': 450, 'height': 250 }); +session.screens.push({ 'name': 'screenB', 'width': 650, 'height': 350 }); +session.screens.push({ 'name': 'screenC', 'width': 750, 'height': 120 }); +session.screens.push({ 'name': 'screenD', 'width': 250, 'height': 60 }); +session.screens.push({ 'name': 'screenE', 'width': 390, 'height': 120 }); +session.screens.push({ 'name': 'screenF', 'width': 1240, 'height': 650 }); + +// Converting the JSON string with JSON.stringify() +// then saving with localStorage in the name of session +localStorage.setItem('session', JSON.stringify(session)); + +// Example of how to transform the String generated through +// JSON.stringify() and saved in localStorage in JSON object again +var restoredSession = JSON.parse(localStorage.getItem('session')); + +// Now restoredSession variable contains the object that was saved +// in localStorage +console.log(restoredSession); +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.12.3', 'JSON.stringify')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.7.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-json.stringify', 'JSON.stringify')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-json.stringify', 'JSON.stringify')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.JSON.stringify")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("JSON.parse()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/map/@@tostringtag/index.html b/files/ko/web/javascript/reference/global_objects/map/@@tostringtag/index.html new file mode 100644 index 0000000000..7a1cd5002b --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/map/@@tostringtag/index.html @@ -0,0 +1,51 @@ +--- +title: 'Map.prototype[@@toStringTag]' +slug: Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag +translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag +--- +<div>{{JSRef}}</div> + +<p><strong><code>Map[@@toStringTag]</code></strong> 프로퍼티의 초기값은 "Map"입니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/map-prototype-@@tostringtag.html")}}</div> + + + +<div>{{js_property_attributes(0,0,1)}}</div> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox">Map[Symbol.toStringTag]</pre> + +<h2 id="예제">예제</h2> + +<pre class="brush:js">Object.prototype.toString.call(new Map()) // "[object Map]" +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-map.prototype-@@tostringtag', 'Map.prototype[@@toStringTag]')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype-@@tostringtag', 'Map.prototype[@@toStringTag]')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Map.@@toStringTag")}}</p> diff --git a/files/ko/web/javascript/reference/global_objects/map/clear/index.html b/files/ko/web/javascript/reference/global_objects/map/clear/index.html new file mode 100644 index 0000000000..fc63ff96d6 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/map/clear/index.html @@ -0,0 +1,75 @@ +--- +title: Map.prototype.clear() +slug: Web/JavaScript/Reference/Global_Objects/Map/clear +tags: + - ECMAScript 2015 + - JavaScript + - Map + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Map/clear +--- +<div>{{JSRef}}</div> + +<p><code><strong>clear()</strong></code> 메서드는 <code>Map</code> 객체의 모든 요소를 제거합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/map-prototype-clear.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><em>myMap</em>.clear(); +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="clear()_사용하기"><code>clear()</code> 사용하기</h3> + +<pre class="brush: js">var myMap = new Map(); +myMap.set('bar', 'baz'); +myMap.set(1, 'foo'); + +myMap.size; // 2 +myMap.has('bar'); // true + +myMap.clear(); + +myMap.size; // 0 +myMap.has('bar') // false +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Map.clear")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Map")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/map/delete/index.html b/files/ko/web/javascript/reference/global_objects/map/delete/index.html new file mode 100644 index 0000000000..41110a28a9 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/map/delete/index.html @@ -0,0 +1,79 @@ +--- +title: Map.prototype.delete() +slug: Web/JavaScript/Reference/Global_Objects/Map/delete +tags: + - ECMAScript 2015 + - JavaScript + - Map + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete +--- +<div>{{JSRef}}</div> + +<p><code><strong>delete()</strong></code> 메서드는 <code>Map</code> 객체에서 특정 요소를 제거합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/map-prototype-delete.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">myMap.delete(<em>key</em>);</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>key</code></dt> + <dd><code>Map</code> 객체에서 제거할 요소의 키.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>요소가 <code>Map</code> 객체에 존재해서 제거했을 경우 <code>true</code>, 존재하지 않았으면 <code>false</code>.</p> + +<h2 id="예제">예제</h2> + +<h3 id="delete()_사용하기"><code>delete()</code> 사용하기</h3> + +<pre class="brush: js">var myMap = new Map(); +myMap.set('bar', 'foo'); + +myMap.delete('bar'); // Returns true. Successfully removed. +myMap.has('bar'); // Returns false. The "bar" element is no longer present. +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Map.delete")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Map")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/map/entries/index.html b/files/ko/web/javascript/reference/global_objects/map/entries/index.html new file mode 100644 index 0000000000..54242f373b --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/map/entries/index.html @@ -0,0 +1,78 @@ +--- +title: Map.prototype.entries() +slug: Web/JavaScript/Reference/Global_Objects/Map/entries +tags: + - ECMAScript 2015 + - JavaScript + - Map + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Map/entries +--- +<div>{{JSRef}}</div> + +<p><code><strong>entries()</strong></code> 메서드는 <code>Map</code> 객체의 각 요소에 해당하는 <code>[키, 값]</code> 쌍을 <code>Map</code>에 등록한 순서대로 포함한 새로운 <strong><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterator</a></strong> 객체를 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/map-prototype-entries.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><em>myMap</em>.entries()</code></pre> + +<h3 id="반환_값">반환 값</h3> + +<p>A new {{jsxref("Map")}} iterator object.</p> + +<h2 id="예제">예제</h2> + +<h3 id="entries()_사용하기"><code>entries()</code> 사용하기</h3> + +<pre class="brush:js">var myMap = new Map(); +myMap.set('0', 'foo'); +myMap.set(1, 'bar'); +myMap.set({}, 'baz'); + +var mapIter = myMap.entries(); + +console.log(mapIter.next().value); // ["0", "foo"] +console.log(mapIter.next().value); // [1, "bar"] +console.log(mapIter.next().value); // [Object, "baz"] +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-map.prototype.entries', 'Map.prototype.entries')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.entries', 'Map.prototype.entries')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Map.entries")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Map.prototype.keys()")}}</li> + <li>{{jsxref("Map.prototype.values()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/map/foreach/index.html b/files/ko/web/javascript/reference/global_objects/map/foreach/index.html new file mode 100644 index 0000000000..48b96eb570 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/map/foreach/index.html @@ -0,0 +1,98 @@ +--- +title: Map.prototype.forEach() +slug: Web/JavaScript/Reference/Global_Objects/Map/forEach +translation_of: Web/JavaScript/Reference/Global_Objects/Map/forEach +--- +<div>{{JSRef}}</div> + +<p><code><strong>forEach()</strong></code><strong> </strong>메소드는 <code>Map</code> 오브젝트 내의 key/value 쌍의 개수 만큼 주어진 함수를 순서대로 실행합니다. </p> + +<div>{{EmbedInteractiveExample("pages/js/map-prototype-foreach.html")}}</div> + + + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><code><em>myMap</em>.forEach(<em>callback</em>[, <em>thisArg</em>])</code></pre> + +<h3 id="파라미터">파라미터</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>각각의 요소를 처리하기 위한 함수.</dd> + <dt><code>thisArg</code></dt> + <dd> <code>callback</code> 을 실행할때 <code>this</code> 로 사용되는 값.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="설명">설명</h2> + +<p><code>forEach</code> 메서드는 map의 각각의 키마다 주어진 <code>callback</code> 함수를 실행합니다. 삭제된 키에대해서는 호출되지 않습니다. 그러나, 값이 존재하지만 <code>undefined</code> 인 값에 대해서는 실행됩니다.</p> + +<p><code>callback</code> 은 <strong>3가지 인수</strong>로 호출됩니다.</p> + +<ul> + <li><strong>요소의 value</strong></li> + <li><strong>요소의 key</strong></li> + <li><strong><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">사용될 </span></font>Map</code> 객체</strong></li> +</ul> + +<p><code>thisArg</code> 파라미터가 <code>forEach</code> 에 제공되면, <code>this</code> 값으로 사용하기 위해 호출될때 <code>callback</code> 으로 넘겨집니다. 그렇지 않으면 <code>undefined</code> 값이 <code>this</code> 값으로 넘겨질 것입니다. 궁극적으로 <code>callback</code> 으로 보여지게 된 <code>this</code> 값은 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">함수에 의해 보여지는 this 를 결정하기 위한 일반적인 규칙에 따라 결정됩니다.</a></p> + +<p>각각의 value는 한번씩 사용됩니다. 다만 <code>forEach</code> 가 끝나기 전에 value가 삭제되거나 재추가 된 경우는 예외입니다. <code>callback</code> 은 사용되기 전에 삭제된 value에 의해 호출되지 않습니다. <code>forEach</code> 가 끝나기 전에 새롭게 추가된 value가 사용 됩니다.</p> + +<p><code>forEach</code> 는 <code>Map</code> 오브젝트 내에 있는 각각의 요소마다 <code>callback</code> 함수를 실행합니다; 깂을 반환하지 않습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Map_오브젝트의_내용을_출력"><code>Map</code> 오브젝트의 내용을 출력</h3> + +<p>아래의 코드는 <code>Map</code> 오브젝트 내의 각각 요소들을 행별로 출력합니다:</p> + +<pre class="brush:js">function logMapElements(value, key, map) { + console.log(`map.get('${key}') = ${value}`); +} +new Map([['foo', 3], ['bar', {}], ['baz', undefined]]).forEach(logMapElements); +// logs: +// "map.get('foo') = 3" +// "map.get('bar') = [object Object]" +// "map.get('baz') = undefined" +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Map.forEach")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Set.prototype.forEach()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/map/get/index.html b/files/ko/web/javascript/reference/global_objects/map/get/index.html new file mode 100644 index 0000000000..835c8c3e6e --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/map/get/index.html @@ -0,0 +1,80 @@ +--- +title: Map.prototype.get() +slug: Web/JavaScript/Reference/Global_Objects/Map/get +tags: + - ECMAScript 2015 + - JavaScript + - Map + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Map/get +--- +<div>{{JSRef}}</div> + +<p><code><strong>get()</strong></code> 메서드는 <code>Map</code> 객체에서 지정한 요소를 회수합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/map-prototype-get.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><em>myMap</em>.get(<em>key</em>);</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>key</code></dt> + <dd><code>Map</code> 객체에서 회수할 요소의 키.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 키와 연결된 요소. 그런 요소가 없으면 {{jsxref("undefined")}}.</p> + +<h2 id="예제">예제</h2> + +<h3 id="get_사용하기"><code>get</code> 사용하기</h3> + +<pre class="brush: js">var myMap = new Map(); +myMap.set('bar', 'foo'); + +myMap.get('bar'); // "foo" 반환. +myMap.get('baz'); // undefined 반환. +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-map.prototype.get', 'Map.prototype.get')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.get', 'Map.prototype.get')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Map.get")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Map")}}</li> + <li>{{jsxref("Map.prototype.set()")}}</li> + <li>{{jsxref("Map.prototype.has()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/map/has/index.html b/files/ko/web/javascript/reference/global_objects/map/has/index.html new file mode 100644 index 0000000000..60c5c03dfb --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/map/has/index.html @@ -0,0 +1,81 @@ +--- +title: Map.prototype.has() +slug: Web/JavaScript/Reference/Global_Objects/Map/has +tags: + - ECMAScript 2015 + - JavaScript + - Map + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Map/has +--- +<div>{{JSRef}}</div> + +<p><code><strong>has()</strong></code> 메서드는 주어진 키를 가진 요소가 <code>Map</code>에 존재하는지를 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/map-prototype-has.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><em>myMap</em>.has(<em>key</em>);</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>key</code></dt> + <dd>존재 여부를 판별할 키값.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 키를 가진 요소가 있으면 <code>true</code>, 아니면 <code>false</code>.</p> + +<h2 id="예제">예제</h2> + +<h3 id="has()_사용하기"><code>has()</code> 사용하기</h3> + +<pre class="brush: js">var myMap = new Map(); +myMap.set('bar', "foo"); + +myMap.has('bar'); // returns true +myMap.has('baz'); // returns false +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-map.prototype.has', 'Map.prototype.has')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.has', 'Map.prototype.has')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Map.has")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Map")}}</li> + <li>{{jsxref("Map.prototype.set()")}}</li> + <li>{{jsxref("Map.prototype.get()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/map/index.html b/files/ko/web/javascript/reference/global_objects/map/index.html new file mode 100644 index 0000000000..f8b29bdf6e --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/map/index.html @@ -0,0 +1,244 @@ +--- +title: Map +slug: Web/JavaScript/Reference/Global_Objects/Map +tags: + - ECMAScript 2015 + - JavaScript + - Map + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Map +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><strong><code>Map</code> </strong>객체는 키-값 쌍을 저장하며 각 쌍의 삽입 순서도 기억하는 콜렉션입니다.</span> 아무 값(객체와 {{Glossary("Primitive", "원시 값")}})이라도 키와 값으로 사용할 수 있습니다.</p> + +<h2 id="설명">설명</h2> + +<p><code>Map</code> 객체는 요소의 삽입 순서대로 원소를 순회합니다. {{jsxref("Statements/for...of", "for...of")}} 반복문은 각 순회에서 <code>[key, value]</code>로 이루어진 배열을 반환합니다.</p> + +<h3 id="키_동일성">키 동일성</h3> + +<ul> + <li>키 동일성은 <a href="/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness#등가0_같음"><code>sameValueZero</code></a> 알고리즘에 기반합니다.</li> + <li><code>NaN !== NaN</code>이지만, 그럼에도 <code>NaN</code>은 <code>NaN</code>과 일치한다고 간주하며, 다른 모든 값은 <code>===</code> 연산자의 결과를 따릅니다.</li> + <li>현 ECMAScript 명세는 <code>-0</code>과 <code>+0</code>을 같은 값으로 처리하지만 초기 명세에서는 그렇지 않았습니다. {{anch("브라우저 호환성")}}의 "<em>Key equality for -0 and 0</em>"을 참고하세요.</li> +</ul> + +<h3 id="jsxrefObject와_Map_비교">{{jsxref("Object")}}와 <code>Map</code> 비교</h3> + +<p>{{jsxref("Object")}}는 값에 키를 할당할 수 있고, 그 키로 값을 얻을 수 있고, 키를 삭제할 수 있으며 어떤 키에 값이 존재하는지 확인할 수 있다는 점에서 <code>Map</code>과 유사합니다. 이런 이유에 더해, 이전에는 내장된 대체제가 없었기 때문에, <code>Object</code>를 <code>Map</code> 대신 사용하곤 했습니다.</p> + +<p>그러나 어떤 상황에선, <code>Map</code>을 선호해야 할 몇 가지 중요한 차이점이 있습니다.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row"></th> + <th scope="col"><code>Map</code></th> + <th scope="col"><code>Object</code></th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">의도치 않은 키</th> + <td><code>Map</code>은 명시적으로 제공한 키 외에는 어떤 키도 가지지 않습니다.</td> + <td> + <p><code>Object</code>는 프로토타입을 가지므로 기본 키가 존재할 수 있습니다. 주의하지 않으면 직접 제공한 키와 충돌할 수도 있습니다.</p> + + <div class="blockIndicator note"> + <p><strong>참고:</strong> ES5부터, 프로토타입으로 인한 키 충돌은 {{jsxref("Object.create", "Object.create(null)")}}로 해결할 수 있지만, 실제로 쓰이는 경우는 적습니다.</p> + </div> + </td> + </tr> + <tr> + <th scope="row">키 자료형</th> + <td><code>Map</code>의 키는 함수, 객체 등을 포함한 모든 값이 가능합니다.</td> + <td><code>Object</code>의 키는 반드시 {{jsxref("String")}} 또는 {{jsxref("Symbol")}}이어야 합니다.</td> + </tr> + <tr> + <th scope="row">키 순서</th> + <td> + <p><code>Map</code>의 키는 정렬됩니다. 따라서 <code>Map</code>의 순회는 삽입순으로 이뤄집니다.</p> + </td> + <td> + <p><code>Object</code>의 키는 정렬되지 않습니다.</p> + + <div class="blockIndicator note"> + <p><strong>참고:</strong> ECMAScript 201 이후로, 객체도 문자열과 <code>Symbol</code> 키의 생성 순서를 유지합니다. ECMEScript 2015 명세를 준수하는 JavaScript 엔진에서 문자열 키만 가진 객체를 순회하면 삽입 순을 따라갑니다.</p> + </div> + </td> + </tr> + <tr> + <th scope="row">크기</th> + <td><code>Map</code>의 항목 수는 {{jsxref("Map.prototype.size", "size")}} 속성을 통해 쉽게 알아낼 수 있습니다.</td> + <td><code>Object</code>의 항목 수는 직접 알아내야 합니다.</td> + </tr> + <tr> + <th scope="row">순회</th> + <td><code>Map</code>은 <a href="/ko/docs/Web/JavaScript/Reference/Iteration_protocols">순회 가능</a>하므로, 바로 순회할 수 있습니다.</td> + <td><code>Object</code>를 순회하려면 먼저 모든 키를 알아낸 후, 그 키의 배열을 순회해야 합니다.</td> + </tr> + <tr> + <th scope="row">성능</th> + <td>잦은 키-값 쌍의 추가와 제거에서 더 좋은 성능을 보입니다.</td> + <td>잦은 키-값 쌍의 추가와 제거를 위한 최적화가 없습니다.</td> + </tr> + </tbody> +</table> + +<h2 id="생성자">생성자</h2> + +<dl> + <dt>{{jsxref("Map.Map", "Map()")}}</dt> + <dd>새로운 <code>Map</code> 객체를 생성합니다.</dd> +</dl> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>Map.length</code></dt> + <dd>값이 0인 속성입니다.<br> + 요소의 수는 {{jsxref("Map.prototype.size")}}로 알아낼 수 있습니다.</dd> + <dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt> + <dd>파생 객체를 생성하는데 사용하는 생성자 함수입니다.</dd> + <dt>{{jsxref("Map.prototype")}}</dt> + <dd><code>Map</code> 생성자의 프로토타입을 나타냅니다. 모든 <code>Map</code> 인스턴스에 속성을 추가할 수 있습니다.</dd> +</dl> + +<h2 id="Map_인스턴스"><code>Map</code> 인스턴스</h2> + +<p>모든 <code>Map</code> 인스턴스는 {{jsxref("Map.prototype")}}을 상속합니다.</p> + +<h3 id="속성_2">속성</h3> + +<p>{{page('ko/Web/JavaScript/Reference/Global_Objects/Map/prototype','Properties')}}</p> + +<h3 id="메서드">메서드</h3> + +<p>{{page('ko/Web/JavaScript/Reference/Global_Objects/Map/prototype','Methods')}}</p> + +<h2 id="예제">예제</h2> + +<h3 id="Map_객체_사용하기"><code>Map</code> 객체 사용하기</h3> + +<pre class="brush: js">let myMap = new Map() + +let keyString = '문자열' +let keyObj = {} +let keyFunc = function() {} + +// 값 설정 +myMap.set(keyString, "'문자열'과 관련된 값") +myMap.set(keyObj, 'keyObj와 관련된 값') +myMap.set(keyFunc, 'keyFunc와 관련된 값') + +myMap.size // 3 + +// getting the values +myMap.get(keyString) // "'문자열'과 관련된 값" +myMap.get(keyObj) // "keyObj와 관련된 값" +myMap.get(keyFunc) // "keyFunc와 관련된 값" + +myMap.get('문자열') // "'문자열'과 관련된 값" + // keyString === '문자열'이기 때문 +myMap.get({}) // undefined, keyObj !== {} +myMap.get(function() {}) // undefined, keyFunc !== function () {}</pre> + +<h3 id="Map의_키로_NaN_사용하기"><code>Map</code>의 키로 <code>NaN</code> 사용하기</h3> + +<p>{{jsxref("NaN")}}도 키로서 사용할 수 있습니다. 모든 <code>NaN</code>은 자기 자신과 동일하지 않지만(<code>NaN !== NaN</code>), <code>NaN</code>을 서로 구분할 수도 없기 때문에 아래 예제도 잘 동작합니다.</p> + +<pre class="brush: js">let myMap = new Map() +myMap.set(NaN, 'not a number') + +myMap.get(NaN) +// "not a number" + +let otherNaN = Number('foo') +myMap.get(otherNaN) +// "not a number"</pre> + +<h3 id="for..of로_Map_순회하기"><code>for..of</code><font face="Open Sans, arial, sans-serif">로 </font><code>Map</code> 순회하기</h3> + +<p><code>Map</code>은 <code>for..of</code> 반복문을 사용해 순회할 수 있습니다.</p> + +<pre class="brush: js">let myMap = new Map() +myMap.set(0, 'zero') +myMap.set(1, 'one') + +for (let [key, value] of myMap) { + console.log(key + ' = ' + value) +} +// 0 = zero +// 1 = one + +for (let key of myMap.keys()) { + console.log(key) +} +// 0 +// 1 + +for (let value of myMap.values()) { + console.log(value) +} +// zero +// one + +for (let [key, value] of myMap.entries()) { + console.log(key + ' = ' + value) +} +// 0 = zero +// 1 = one</pre> + +<h3 id="forEach로_Map_순회하기"><code>forEach()</code>로 <code>Map</code> 순회하기</h3> + +<p><code>Map</code>은 {{jsxref("Map.prototype.forEach", "forEach()")}} 메서드로 순회할 수 있습니다.</p> + +<pre class="brush: js">myMap.forEach(function(value, key) { + console.log(key + ' = ' + value) +}) +// 0 = zero +// 1 = one</pre> + +<h3 id="Array_객체와의_관계"><code>Array</code> 객체와의 관계</h3> + +<pre class="brush: js">let kvArray = [['key1', 'value1'], ['key2', 'value2']] + +// Use the regular Map constructor to transform a 2D key-value Array into a map +let myMap = new Map(kvArray) + +myMap.get('key1') // returns "value1" + +// Use Array.from() to transform a map into a 2D key-value Array +console.log(Array.from(myMap)) // Will show you exactly the same Array as kvArray + +// A succinct way to do the same, using the spread syntax +console.log([...myMap]) + +// Or use the keys() or values() iterators, and convert them to an array +console.log(Array.from(myMap.keys())) // ["key1", "key2"]</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.Map")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("WeakMap")}}</li> + <li>{{jsxref("WeakSet")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/map/map/index.html b/files/ko/web/javascript/reference/global_objects/map/map/index.html new file mode 100644 index 0000000000..012772eec5 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/map/map/index.html @@ -0,0 +1,60 @@ +--- +title: Map() 생성자 +slug: Web/JavaScript/Reference/Global_Objects/Map/Map +tags: + - Constructor + - JavaScript + - Map + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Map/Map +--- +<div>{{JSRef}}</div> + +<p><strong><code>Map()</code> 생성자</strong>는 {{jsxref("Map")}} 객체를 생성합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">new Map([<var>iterable</var>])</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code><var>iterable</var></code></dt> + <dd>요소가 키-값 쌍인, {{jsxref("Array")}} 또는 다른 순회 가능한 객체(예: <code>[[1, 'one'], [2, 'two']]</code>). 각 키-값 쌍은 새로운 <code>Map</code>에 포함됩니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">let myMap = new Map([ + [1, 'one'], + [2, 'two'], + [3, 'three'], +]) +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map-constructor', 'Map constructor')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Map.Map")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("WeakMap")}}</li> + <li>{{jsxref("WeakSet")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/map/prototype/index.html b/files/ko/web/javascript/reference/global_objects/map/prototype/index.html new file mode 100644 index 0000000000..633d2c785e --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/map/prototype/index.html @@ -0,0 +1,86 @@ +--- +title: Map.prototype +slug: Web/JavaScript/Reference/Global_Objects/Map/prototype +tags: + - ECMAScript 2015 + - JavaScript + - Map + - Property + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Map +--- +<div>{{JSRef}}</div> + +<p><code><strong>Map</strong></code><strong><code>.prototype</code></strong> property는 {{jsxref("Map")}}의 프로토 타입을 나타낸다.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Description">Description</h2> + +<p>{{jsxref("Map")}} instance는 {{jsxref("Map.prototype")}}를 상속한다. Constructor의 프로토타입에 property와 method를 추가함으로써 모든 <code>Map</code> 인스턴스에서 사용 가능하게끔 만들 수 있다.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code>Map.prototype.constructor</code></dt> + <dd>인스턴스의 프로토타입을 만드는 함수를 반환한다. 이것 {{jsxref("Map")}} 함수의 기본 값이다.</dd> + <dt>{{jsxref("Map.prototype.size")}}</dt> + <dd><code>Map</code> 객체에 들어있는 key/value pair의 수를 반환한다.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("Map.prototype.clear()")}}</dt> + <dd><code>Map</code> 객체의 모든 key/value pair를 제거한다.</dd> + <dt>{{jsxref("Map.delete", "Map.prototype.delete(key)")}}</dt> + <dd>주어진 키(Key)와 해당되는 값(Value)를 제거하고 제거하기 전에 <code>Map.prototype.has(key)가 반환했던 값을 반환한다.</code> 그 후의 <code>Map.prototype.has(key)<font face="Open Sans, arial, sans-serif">는 </font></code><code>false를 반환한다.</code></dd> + <dt>{{jsxref("Map.prototype.entries()")}}</dt> + <dd><code>Map</code> 객체 안의 모든 요소들을 <strong><code>[key, value] 형태의 </code>array </strong>로 집어넣은 순서대로 가지고 있는 <code>Iterator 객체를 반환한다.</code></dd> + <dt>{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}</dt> + <dd><code>Map</code> 객체 안에 존재하는 각각의 key/value pair에 집어넣은 순서대로 callbackFn을 부른다. 만약 thisArg 매개변수가 제공되면, 이것이 각 callback의 this 값으로 사용된다.</dd> + <dt>{{jsxref("Map.get", "Map.prototype.get(key)")}}</dt> + <dd>주어진 키(Key)에 해당되는 값(value)을 반환하고, 만약 없으면 <code>undefined를 반환한다.</code></dd> + <dt>{{jsxref("Map.has", "Map.prototype.has(key)")}}</dt> + <dd><code>Map 객체 안에 주어진 </code>key/value pair가 있는지 검사하고 Boolean 값을 반환한다.</dd> + <dt>{{jsxref("Map.prototype.keys()")}}</dt> + <dd><code>Map</code> 객체 안의 모든 <strong>키(Key)</strong>들을 집어넣은 순서대로 가지고 있는 <code>Iterator 객체를 반환한다.</code></dd> + <dt>{{jsxref("Map.set", "Map.prototype.set(key, value)")}}</dt> + <dd><code>Map 객체에 주어진 키</code>(Key)에 값(Value)를 집어넣고, <code>Map 객체를 반환한다.</code></dd> + <dt>{{jsxref("Map.prototype.values()")}}</dt> + <dd><code>Map</code> 객체 안의 모든 <strong>값</strong><strong>(Value)</strong>들을 집어넣은 순서대로 가지고 있는 <code>Iterator 객체를 반환한다.</code></dd> + <dt>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</dt> + <dd><code>Map</code> 객체 안의 모든 요소들을 <strong><code>[key, value] 형태의 </code>array </strong>로 집어넣은 순서대로 가지고 있는 <code>Iterator 객체를 반환한다.</code></dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-map.prototype', 'Map.prototype')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Compat("javascript.builtins.Map.prototype")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Set.prototype")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/map/set/index.html b/files/ko/web/javascript/reference/global_objects/map/set/index.html new file mode 100644 index 0000000000..a6c5afb140 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/map/set/index.html @@ -0,0 +1,96 @@ +--- +title: Map.prototype.set() +slug: Web/JavaScript/Reference/Global_Objects/Map/set +tags: + - ECMAScript 2015 + - JavaScript + - Map + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Map/set +--- +<div>{{JSRef}}</div> + +<p><code><strong>set()</strong></code> 메서드는 Map 객체에서 주어진 키를 가진 요소를 추가하고, 키의 요소가 이미 있다면 대체합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/map-prototype-set.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><em>myMap</em>.set(<em>key</em>, <em>value</em>);</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>key</code></dt> + <dd><code>Map</code>에 추가하거나 변경할 요소의 키.</dd> + <dt><code>value</code></dt> + <dd><code>Map</code>에 추가하거나 변경할 요소의 값.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>호출한 <code>Map</code> 객체.</p> + +<h2 id="예제">예제</h2> + +<h3 id="set()_사용하기"><code>set()</code> 사용하기</h3> + +<pre class="brush: js">var myMap = new Map(); + +// Add new elements to the map +myMap.set('bar', 'foo'); +myMap.set(1, 'foobar'); + +// Update an element in the map +myMap.set('bar', 'baz'); +</pre> + +<h3 id="set()_체이닝"><code>set()</code> 체이닝</h3> + +<p><code>set()</code>이 같은 <code>Map</code>을 반환하므로 메서드를 여러 번 연속해서 호출할 수 있습니다.</p> + +<pre class="brush: js">// Add new elements to the map with chaining. +myMap.set('bar', 'foo') + .set(1, 'foobar') + .set(2, 'baz'); +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-map.prototype.set', 'Map.prototype.set')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.set', 'Map.prototype.set')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Map.set")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Map")}}</li> + <li>{{jsxref("Map.prototype.get()")}}</li> + <li>{{jsxref("Map.prototype.has()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/map/size/index.html b/files/ko/web/javascript/reference/global_objects/map/size/index.html new file mode 100644 index 0000000000..371d8b3110 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/map/size/index.html @@ -0,0 +1,62 @@ +--- +title: Map.prototype.size +slug: Web/JavaScript/Reference/Global_Objects/Map/size +translation_of: Web/JavaScript/Reference/Global_Objects/Map/size +--- +<div>{{JSRef}}</div> + +<p><code><strong>size</strong></code> 접근자 프로퍼티는 {{jsxref("Map")}} 객체의 요소 갯수를 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/map-prototype-size.html")}}</div> + + + +<h2 id="설명">설명</h2> + +<p><code>size</code> 값은 얼마나 많은 엔트리를 <code>Map</code> 객체가 가지고 있는지를 표현합니다. <code>size</code> 를 설정할 수 있는 접근자 함수는 <code>undefined</code> 입니다. 당신은 이 프로퍼티를 변경할 수 없습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Using_size">Using <code>size</code></h3> + +<pre class="brush:js">var myMap = new Map(); +myMap.set('a', 'alpha'); +myMap.set('b', 'beta'); +myMap.set('g', 'gamma'); + +myMap.size // 3 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-get-map.prototype.size', 'Map.prototype.size')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-get-map.prototype.size', 'Map.prototype.size')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Map.size")}}</p> + +<h2 id="더_보기">더 보기</h2> + +<ul> + <li>{{jsxref("Map")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/math/abs/index.html b/files/ko/web/javascript/reference/global_objects/math/abs/index.html new file mode 100644 index 0000000000..c66172647d --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/abs/index.html @@ -0,0 +1,104 @@ +--- +title: Math.abs() +slug: Web/JavaScript/Reference/Global_Objects/Math/abs +tags: + - JavaScript + - Math + - Method + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/abs +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><strong><code>Math.abs()</code></strong> 함수는 주어진 숫자의 절대값을 반환합니다.</span> 즉,</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.abs</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mrow><mo stretchy="false">|</mo><mi>x</mi><mo stretchy="false">|</mo></mrow><mo>=</mo><mrow><mo>{</mo><mtable columnalign="left left"><mtr><mtd><mi>x</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>></mo><mn>0</mn></mtd></mtr><mtr><mtd><mi>0</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>=</mo><mn>0</mn></mtd></mtr><mtr><mtd><mo>-</mo><mi>x</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo><</mo><mn>0</mn></mtd></mtr></mtable></mrow></mrow><annotation encoding="TeX">{\mathtt{\operatorname{Math.abs}(x)}} = {|x|} = \begin{cases} x & \text{if} \quad x \geq 0 \\ -x & \text{if} \quad x < 0 \end{cases} </annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-abs.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Math.abs(<var>x</var>)</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>x</code></dt> + <dd>숫자.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 숫자의 절대값.</p> + +<h2 id="설명">설명</h2> + +<p><code>abs()</code>는 <code>Math</code>의 정적 메서드이므로, 사용자가 생성한 <code>Math</code> 객체의 메서드로 호출할 수 없고 항상 <code>Math.abs()</code>를 사용해야 합니다. (<code>Math</code>는 생성자가 아닙니다)</p> + +<h2 id="예제">예제</h2> + +<h3 id="Math.abs()의_작동_방식"><code>Math.abs()</code>의 작동 방식</h3> + +<p>빈 객체, 하나 이상의 요소를 가진 배열, 숫자가 아닌 문자열, {{jsxref("undefined")}}나 빈 매개변수를 받으면 {{jsxref("NaN")}}을 반환합니다. {{jsxref("null")}}, 빈 문자열이나 빈 배열을 제공하면 0을 반환합니다.</p> + +<pre class="brush: js" dir="rtl">Math.abs('-1'); // 1 +Math.abs(-2); // 2 +Math.abs(null); // 0 +Math.abs(''); // 0 +Math.abs([]); // 0 +Math.abs([2]); // 2 +Math.abs([1,2]); // NaN +Math.abs({}); // NaN +Math.abs('string'); // NaN +Math.abs(); // NaN +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.1', 'Math.abs')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.abs', 'Math.abs')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.abs', 'Math.abs')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Math.abs")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Math.ceil()")}}</li> + <li>{{jsxref("Math.floor()")}}</li> + <li>{{jsxref("Math.round()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li>{{jsxref("Math.trunc()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/math/acos/index.html b/files/ko/web/javascript/reference/global_objects/math/acos/index.html new file mode 100644 index 0000000000..83cc67d786 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/acos/index.html @@ -0,0 +1,103 @@ +--- +title: Math.acos() +slug: Web/JavaScript/Reference/Global_Objects/Math/acos +tags: + - JavaScript + - Math + - Method + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/acos +--- +<div>{{JSRef}}</div> + +<p><strong><code>Math.acos()</code></strong> 함수는 주어진 수의 아크코사인 값을 숫자(라디안)로 반환합니다. 즉,</p> + +<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mo stretchy="false">[</mo><mrow><mo>-</mo><mn>1</mn></mrow><mo>;</mo><mn>1</mn><mo stretchy="false">]</mo><mo>,</mo><mspace width="thickmathspace"></mspace><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.acos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arccos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> the unique </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mo stretchy="false">[</mo><mn>0</mn><mo>;</mo><mi>π</mi><mo stretchy="false">]</mo><mspace width="thinmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">cos</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.acos}(x)} = \arccos(x) = \text{ the unique } \; y \in [0; \pi] \, \text{such that} \; \cos(y) = x</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-acos.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code>Math.acos(<var>x</var>)</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>x</code></dt> + <dd>각도를 나타내는 라디안.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>-1과 1 사이의 값이 주어진 경우, 그 값의 아크코사인. 아닐 경우 {{jsxref("NaN")}}</p> + +<h2 id="설명">설명</h2> + +<p>The <code>Math.acos()</code> method returns a numeric value between 0 and π radians for <code>x</code> between -1 and 1. If the value of <code>x</code> is outside this range, it returns {{jsxref("NaN")}}.</p> + +<p>Because <code>acos()</code> is a static method of <code>Math</code>, you always use it as <code>Math.acos()</code>, rather than as a method of a <code>Math</code> object you created (<code>Math</code> is not a constructor).</p> + +<h2 id="예제">예제</h2> + +<h3 id="Using_Math.acos()">Using <code>Math.acos()</code></h3> + +<pre class="brush: js">Math.acos(-2); // NaN +Math.acos(-1); // 3.141592653589793 +Math.acos(0); // 1.5707963267948966 +Math.acos(0.5); // 1.0471975511965979 +Math.acos(1); // 0 +Math.acos(2); // NaN +</pre> + +<p>For values less than -1 or greater than 1, <code>Math.acos()</code> returns {{jsxref("NaN")}}.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.2', 'Math.acos')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.acos', 'Math.acos')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.acos', 'Math.acos')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Math.acos")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Math.asin()")}}</li> + <li>{{jsxref("Math.atan()")}}</li> + <li>{{jsxref("Math.atan2()")}}</li> + <li>{{jsxref("Math.cos()")}}</li> + <li>{{jsxref("Math.sin()")}}</li> + <li>{{jsxref("Math.tan()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/math/cbrt/index.html b/files/ko/web/javascript/reference/global_objects/math/cbrt/index.html new file mode 100644 index 0000000000..20a5f3ee3a --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/cbrt/index.html @@ -0,0 +1,98 @@ +--- +title: Math.cbrt() +slug: Web/JavaScript/Reference/Global_Objects/Math/cbrt +tags: + - JavaScript + - Math + - Method + - Reference + - 세제곱근 +translation_of: Web/JavaScript/Reference/Global_Objects/Math/cbrt +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><strong><code>Math.cbrt()</code></strong> 함수는 주어진 수의 세제곱근을 반환합니다.</span> 즉,</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mi>M</mi><mi>a</mi><mi>t</mi><mi>h</mi><mo>.</mo><mi>c</mi><mi>b</mi><mi>r</mi><mi>t</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mroot><mi>x</mi><mn>3</mn></mroot><mo>=</mo><mtext>the unique</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><msup><mi>y</mi><mn>3</mn></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{Math.cbrt(x)} = \sqrt[3]{x} = \text{the unique} \; y \; \text{such that} \; y^3 = x</annotation></semantics></math></p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code>Math.cbrt(<var>x</var>)</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>x</code></dt> + <dd>숫자.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 수의 세제곱근.</p> + +<h2 id="설명">설명</h2> + +<p><code>cbrt()</code>는 <code>Math</code>의 정적 메서드이므로, 사용자가 생성한 <code>Math</code> 객체의 메서드로 호출할 수 없고 항상 <code>Math.cbrt()</code>를 사용해야 합니다. (<code>Math</code>는 생성자가 아닙니다)</p> + +<h2 id="예제">예제</h2> + +<h3 id="Math.cbrt()_사용하기"><code>Math.cbrt()</code> 사용하기</h3> + +<pre class="brush: js">Math.cbrt(NaN); // NaN +Math.cbrt(-1); // -1 +Math.cbrt(-0); // -0 +Math.cbrt(-Infinity); // -Infinity +Math.cbrt(0); // 0 +Math.cbrt(1); // 1 +Math.cbrt(Infinity); // Infinity +Math.cbrt(null); // 0 +Math.cbrt(2); // 1.2599210498948734 +</pre> + +<h2 id="폴리필">폴리필</h2> + +<p>모든 <math><semantics><mrow><mi>x</mi><mo>≥</mo><mn>0</mn></mrow><annotation encoding="TeX">x \geq 0</annotation></semantics></math>에서 <math><semantics><mrow><mroot><mi>x</mi><mn>3</mn></mroot><mo>=</mo><msup><mi>x</mi><mrow><mn>1</mn><mo>/</mo><mn>3</mn></mrow></msup></mrow><annotation encoding="TeX">\sqrt[3]{x} = x^{1/3}</annotation></semantics></math> 이므로, <code>Math.cbrt()</code>는 다음 함수로 폴리필할 수 있습니다.</p> + +<pre class="brush: js">if (!Math.cbrt) { + Math.cbrt = (function(pow) { + return function cbrt(){ + // ensure negative numbers remain negative: + return x < 0 ? -pow(-x, 1/3) : pow(x, 1/3); + }; + })(Math.pow); // localize Math.pow to increase efficiency +}</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.cbrt', 'Math.cbrt')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.cbrt', 'Math.cbrt')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Math.cbrt")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Math.pow()")}}</li> + <li>{{jsxref("Math.sqrt()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/math/ceil/index.html b/files/ko/web/javascript/reference/global_objects/math/ceil/index.html new file mode 100644 index 0000000000..ee5998fa83 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/ceil/index.html @@ -0,0 +1,209 @@ +--- +title: Math.ceil() +slug: Web/JavaScript/Reference/Global_Objects/Math/ceil +translation_of: Web/JavaScript/Reference/Global_Objects/Math/ceil +--- +<div>{{JSRef}}</div> + +<div>Math.ceil() 함수는 주어진 숫자보다 크거나 같은 숫자 중 가장 작은 숫자를 integer 로 반환합니다.</div> + +<div> </div> + +<h2 id="Syntax_(문법)">Syntax (문법)</h2> + +<pre class="syntaxbox"><code>Math.ceil(<var>x</var>)</code></pre> + +<h3 id="Parameters_(매개변수)">Parameters (매개변수)</h3> + +<dl> + <dt><code>x</code></dt> + <dd>숫자</dd> +</dl> + +<h3 id="Return_value_(반환값)">Return value (반환값)</h3> + +<p>주어진 숫자보다 크거나 같은 숫자 중 가장 작은 숫자</p> + +<h2 id="Description_(설명)">Description (설명)</h2> + +<p>ceil() 은 Math 의 정적 메소드이므로, 사용자가 생성하는 Math 객체의 메소드처럼 사용하지 않고, 언제나 Math.ceil() 의 형태로 사용 합니다. (Math 는 생성자가 아님)</p> + +<h2 id="Examples_(예제)">Examples (예제)</h2> + +<h3 id="Math.ceil()_사용_예">Math.ceil() 사용 예</h3> + +<p>다음은 Math.ceil() 의 사용 예입니다.</p> + +<pre class="brush: js">Math.ceil(.95); // 1 +Math.ceil(4); // 4 +Math.ceil(7.004); // 8 +Math.ceil(-0.95); // -0 +Math.ceil(-4); // -4 +Math.ceil(-7.004); // -7 +</pre> + +<h3 id="소수점_처리">소수점 처리</h3> + +<pre class="brush: js">// Closure +(function() { + /** + * Decimal adjustment of a number. + * + * @param {String} type The type of adjustment. + * @param {Number} value The number. + * @param {Integer} exp The exponent (the 10 logarithm of the adjustment base). + * @returns {Number} The adjusted value. + */ + function decimalAdjust(type, value, exp) { + // If the exp is undefined or zero... + if (typeof exp === 'undefined' || +exp === 0) { + return Math[type](value); + } + value = +value; + exp = +exp; + // If the value is not a number or the exp is not an integer... + if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) { + return NaN; + } + // Shift + value = value.toString().split('e'); + value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp))); + // Shift back + value = value.toString().split('e'); + return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp)); + } + + // Decimal round + if (!Math.round10) { + Math.round10 = function(value, exp) { + return decimalAdjust('round', value, exp); + }; + } + // Decimal floor + if (!Math.floor10) { + Math.floor10 = function(value, exp) { + return decimalAdjust('floor', value, exp); + }; + } + // Decimal ceil + if (!Math.ceil10) { + Math.ceil10 = function(value, exp) { + return decimalAdjust('ceil', value, exp); + }; + } +})(); + +// Round +Math.round10(55.55, -1); // 55.6 +Math.round10(55.549, -1); // 55.5 +Math.round10(55, 1); // 60 +Math.round10(54.9, 1); // 50 +Math.round10(-55.55, -1); // -55.5 +Math.round10(-55.551, -1); // -55.6 +Math.round10(-55, 1); // -50 +Math.round10(-55.1, 1); // -60 +// Floor +Math.floor10(55.59, -1); // 55.5 +Math.floor10(59, 1); // 50 +Math.floor10(-55.51, -1); // -55.6 +Math.floor10(-51, 1); // -60 +// Ceil +Math.ceil10(55.51, -1); // 55.6 +Math.ceil10(51, 1); // 60 +Math.ceil10(-55.59, -1); // -55.5 +Math.ceil10(-59, 1); // -50 +</pre> + +<h2 id="Specifications_(사용법)">Specifications (사용법)</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.6', 'Math.ceil')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.ceil', 'Math.ceil')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.ceil', 'Math.ceil')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility_(브라우저_호환성)">Browser compatibility (브라우저 호환성)</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also_(추가_참조)">See also (추가 참조)</h2> + +<ul> + <li>{{jsxref("Math.abs()")}}</li> + <li>{{jsxref("Math.floor()")}}</li> + <li>{{jsxref("Math.round()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li>{{jsxref("Math.trunc()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/math/e/index.html b/files/ko/web/javascript/reference/global_objects/math/e/index.html new file mode 100644 index 0000000000..d2d4060bed --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/e/index.html @@ -0,0 +1,84 @@ +--- +title: Math.E +slug: Web/JavaScript/Reference/Global_Objects/Math/E +tags: + - JavaScript + - Math + - Property + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/E +--- +<div>{{JSRef}}</div> + +<p><strong><code>Math.E</code></strong> 속성은 자연로그의 밑 값 e를 나타내며 약 2.718의 값을 가집니다.</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.E</mi></mstyle><mo>=</mo><mi>e</mi><mo>≈</mo><mn>2.718</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.E}} = e \approx 2.718</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-e.html")}}</div> + + + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="설명">설명</h2> + +<p><code>E</code>는 <code>Math</code>의 정적 속성이므로, 사용자가 생성한 <code>Math</code> 객체의 속성으로 접근할 수 없고 항상 <code>Math.E</code>를 사용해야 합니다. (<code>Math</code>는 생성자가 아닙니다)</p> + +<h2 id="예제">예제</h2> + +<h3 id="Math.E_사용하기"><code>Math.E</code> 사용하기</h3> + +<p>다음 함수는 e 값을 반환합니다.</p> + +<pre class="brush: js">function getNapier() { + return Math.E; +} + +getNapier(); // 2.718281828459045 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.1.1', 'Math.E')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.e', 'Math.E')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.e', 'Math.E')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Math.E")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log1p()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/math/exp/index.html b/files/ko/web/javascript/reference/global_objects/math/exp/index.html new file mode 100644 index 0000000000..c00f391045 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/exp/index.html @@ -0,0 +1,90 @@ +--- +title: Math.exp() +slug: Web/JavaScript/Reference/Global_Objects/Math/exp +translation_of: Web/JavaScript/Reference/Global_Objects/Math/exp +--- +<div>{{JSRef}}</div> + +<p> <strong><code>Math.exp()</code></strong>함수는 <code>x</code>를 인수로 하는 <code>e<sup>x</sup></code> 값을 반환합니다. 그리고 <code>e</code>는 {{jsxref("Math.E", "오일러 상수(또는 네이피어 상수)", "", 1)}}는 자연 로그의 밑입니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/math-exp.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code>Math.exp(<var>x</var>)</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>x</code></dt> + <dd>숫자</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p><code>e</code>는 {{jsxref("Math.E", "오일러 상수", "", 1)}}이고 <code>x</code>는 인수인 <code>e<sup>x</sup></code>값</p> + +<h2 id="Description">Description</h2> + +<p><code>exp()</code>는 <code>Math</code>의 정적 메소드이기 때문에 새로 작성한 <code>Math</code> 오브젝트 대신에 항상 <code>Math.exp()</code>의 형태로 써야 합니다. (<code>Math</code>는 생성자가 아닙니다.)</p> + +<h2 id="예시">예시</h2> + +<h3 id="Math.exp_사용_예"> <code>Math.exp()</code> 사용 예</h3> + +<pre class="brush: js">Math.exp(-1); // 0.36787944117144233 +Math.exp(0); // 1 +Math.exp(1); // 2.718281828459045 +</pre> + +<h2 id="설명">설명</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">설명</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>최초의 정의. JavaScript 1.0.에서 첫 시행.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.8', 'Math.exp')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.exp', 'Math.exp')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.exp', 'Math.exp')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.exp")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Math.E")}}</li> + <li>{{jsxref("Math.expm1()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log10()")}}</li> + <li>{{jsxref("Math.log1p()")}}</li> + <li>{{jsxref("Math.log2()")}}</li> + <li>{{jsxref("Math.pow()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/math/floor/index.html b/files/ko/web/javascript/reference/global_objects/math/floor/index.html new file mode 100644 index 0000000000..cd749b07c8 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/floor/index.html @@ -0,0 +1,171 @@ +--- +title: Math.floor() +slug: Web/JavaScript/Reference/Global_Objects/Math/floor +tags: + - JavaScript + - Math + - Method + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/floor +--- +<div>{{JSRef}}</div> + +<p><strong><code>Math.floor()</code></strong> 함수는 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/math-floor.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Math.floor(<var>x</var>)</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>x</code></dt> + <dd>숫자.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 수 이하의 가장 큰 정수.</p> + +<h2 id="설명">설명</h2> + +<p><code>floor()</code>는 <code>Math</code>의 정적 메서드이므로, 사용자가 생성한 <code>Math</code> 객체의 메서드로 호출할 수 없고 항상 <code>Math.floor()</code>를 사용해야 합니다. (<code>Math</code>는 생성자가 아닙니다)</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: <code>Math.floor(null)</code>은 {{jsxref("NaN")}} 대신 0을 반환합니다.</p> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="Math.floor()_사용하기"><code>Math.floor()</code> 사용하기</h3> + +<pre class="brush: js">Math.floor( 45.95); // 45 +Math.floor( 45.05); // 45 +Math.floor( 4 ); // 4 +Math.floor(-45.05); // -46 +Math.floor(-45.95); // -46 +</pre> + +<h3 id="십진수_조절">십진수 조절</h3> + +<pre class="brush: js">// Closure +(function() { + /** + * Decimal adjustment of a number. + * + * @param {String} type The type of adjustment. + * @param {Number} value The number. + * @param {Integer} exp The exponent (the 10 logarithm of the adjustment base). + * @returns {Number} The adjusted value. + */ + function decimalAdjust(type, value, exp) { + // If the exp is undefined or zero... + if (typeof exp === 'undefined' || +exp === 0) { + return Math[type](value); + } + value = +value; + exp = +exp; + // If the value is not a number or the exp is not an integer... + if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) { + return NaN; + } + // Shift + value = value.toString().split('e'); + value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp))); + // Shift back + value = value.toString().split('e'); + return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp)); + } + + // Decimal round + if (!Math.round10) { + Math.round10 = function(value, exp) { + return decimalAdjust('round', value, exp); + }; + } + // Decimal floor + if (!Math.floor10) { + Math.floor10 = function(value, exp) { + return decimalAdjust('floor', value, exp); + }; + } + // Decimal ceil + if (!Math.ceil10) { + Math.ceil10 = function(value, exp) { + return decimalAdjust('ceil', value, exp); + }; + } +})(); + +// Round +Math.round10(55.55, -1); // 55.6 +Math.round10(55.549, -1); // 55.5 +Math.round10(55, 1); // 60 +Math.round10(54.9, 1); // 50 +Math.round10(-55.55, -1); // -55.5 +Math.round10(-55.551, -1); // -55.6 +Math.round10(-55, 1); // -50 +Math.round10(-55.1, 1); // -60 +// Floor +Math.floor10(55.59, -1); // 55.5 +Math.floor10(59, 1); // 50 +Math.floor10(-55.51, -1); // -55.6 +Math.floor10(-51, 1); // -60 +// Ceil +Math.ceil10(55.51, -1); // 55.6 +Math.ceil10(51, 1); // 60 +Math.ceil10(-55.59, -1); // -55.5 +Math.ceil10(-59, 1); // -50 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.9', 'Math.floor')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.floor', 'Math.floor')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.floor', 'Math.floor')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Math.floor")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Math.abs()")}}</li> + <li>{{jsxref("Math.ceil()")}}</li> + <li>{{jsxref("Math.round()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li>{{jsxref("Math.trunc()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/math/fround/index.html b/files/ko/web/javascript/reference/global_objects/math/fround/index.html new file mode 100644 index 0000000000..6fd328a2db --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/fround/index.html @@ -0,0 +1,130 @@ +--- +title: Math.fround() +slug: Web/JavaScript/Reference/Global_Objects/Math/fround +tags: + - JavaScript + - Math + - Method + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/fround +--- +<div>{{JSRef}}</div> + +<p><strong><code>Math.fround()</code></strong> 함수는 <a class="external" href="https://en.wikipedia.org/wiki/Single-precision_floating-point_format" title="link to the wikipedia page on single-precision floating-point format">single precision</a> 포맷으로 표현할 수 있는 실수들 중에서 가장 가까운 숫자를 리턴합니다.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><code>Math.fround(<var>x</var>)</code></pre> + +<h3 id="파라메터">파라메터</h3> + +<dl> + <dt><code>x</code></dt> + <dd>숫자.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p><code>fround()</code> 가 <code>Math</code> 객체의 정적 메소드이기 때문에, 반드시 <code>Math.fround()</code> 같은 형태로 사용해야 합니다. <code>Math</code> 객체를 직접 만들어서 호출하는 방식으로 사용하지 않습니다 (<code>Math</code> 는 생성자가 아닙니다).</p> + +<h2 id="예제">예제</h2> + +<h3 id="Math.fround()_사용법"><code>Math.fround() 사용법</code></h3> + +<pre class="brush: js">Math.fround(0); // 0 +Math.fround(1); // 1 +Math.fround(1.337); // 1.3370000123977661 +Math.fround(1.5); // 1.5 +Math.fround(NaN); // NaN +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>만약 {{jsxref("Float32Array")}} 가 지원된다면, Math.fround() 를 다음 함수로 흉내낼 수 있습니다.</p> + +<pre class="brush: js">Math.fround = Math.fround || (function (array) { + return function(x) { + return array[0] = x, array[0]; + }; +})(Float32Array(1)); +</pre> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.fround', 'Math.fround')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.fround', 'Math.fround')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("38")}}</td> + <td>{{CompatGeckoDesktop("26")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("25")}}</td> + <td>{{CompatSafari("7.1")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Math.round()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/math/imul/index.html b/files/ko/web/javascript/reference/global_objects/math/imul/index.html new file mode 100644 index 0000000000..e5f7a919ab --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/imul/index.html @@ -0,0 +1,130 @@ +--- +title: Math.imul() +slug: Web/JavaScript/Reference/Global_Objects/Math/imul +tags: + - JavaScript + - Math + - Method + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/imul +--- +<div>{{JSRef}}</div> + +<p><strong><code>Math.imul()</code></strong> 함수는 C 언어와 같은 양식으로 2개 파라메터의 32-bit 곱셈 결과를 리턴합니다.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><code>Math.imul(<var>a</var>, <var>b</var>)</code></pre> + +<h3 id="파라메터">파라메터</h3> + +<dl> + <dt><code>a</code></dt> + <dd>첫 번째 숫자.</dd> + <dt><code>b</code></dt> + <dd>두 번째 숫자.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p><code>Math.imul()</code> 를 쓰면 C 언어와 같은 양식의 빠른 32-bit 정수 곱셈이 가능합니다. 이 기능은 <a href="http://en.wikipedia.org/wiki/Emscripten">Emscripten</a> 같은 프로젝트에 유용합니다. <code>imul()</code> 이 <code>Math </code> 객체의 정적 메소드이기 때문에, <code>Math 객체를 직접 만들어서 사용하지 않고 (Math 는 생성자가 아닙니다), Math.imul()</code> 같은 형태로 사용합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Math.imul()_사용법"><code>Math.imul() 사용법</code></h3> + +<pre class="brush: js">Math.imul(2, 4); // 8 +Math.imul(-1, 8); // -8 +Math.imul(-2, -2); // 4 +Math.imul(0xffffffff, 5); // -5 +Math.imul(0xfffffffe, 5); // -10 +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>다음과 같은 함수로 Math.imul() 을 흉내낼 수 있습니다.</p> + +<pre class="brush: js">Math.imul = Math.imul || function(a, b) { + var ah = (a >>> 16) & 0xffff; + var al = a & 0xffff; + var bh = (b >>> 16) & 0xffff; + var bl = b & 0xffff; + // the shift by 0 fixes the sign on the high part + // the final |0 converts the unsigned value into a signed value + return ((al * bl) + (((ah * bl + al * bh) << 16) >>> 0)|0); +}; +</pre> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.imul', 'Math.imul')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.imul', 'Math.imul')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("28")}}</td> + <td>{{CompatGeckoDesktop("20")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera("16")}}</td> + <td>{{CompatSafari("7")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("20")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>7</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ko/web/javascript/reference/global_objects/math/index.html b/files/ko/web/javascript/reference/global_objects/math/index.html new file mode 100644 index 0000000000..3ce1a0638c --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/index.html @@ -0,0 +1,155 @@ +--- +title: Math +slug: Web/JavaScript/Reference/Global_Objects/Math +tags: + - JavaScript + - Math + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><strong><code>Math</code></strong>는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체입니다.</span> 함수 객체가 아닙니다.</p> + +<p><code>Math</code>는 {{jsxref("Number")}} 자료형만 지원하며 {{jsxref("BigInt")}}와는 사용할 수 없습니다.</p> + +<h2 id="설명">설명</h2> + +<p>다른 전역 객체와 달리 <code>Math</code>는 생성자가 아닙니다. <code>Math</code>의 모든 속성과 메서드는 정적입니다. 파이 상수는 <code>Math.PI</code>로 참조할 수 있고, 사인 함수는 매개변수 <code>x</code>에 대해 <code>Math.sin(x)</code>와 같이 호출할 수 있습니다. 상수는 JavaScript에서 가능한 최대 실수 정밀도로 정의되어 있습니다.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt>{{jsxref("Math.E")}}</dt> + <dd> + <p>오일러의 상수이며 자연로그의 밑. 약 <code>2.718</code>.</p> + </dd> + <dt>{{jsxref("Math.LN2")}}</dt> + <dd> + <p><code>2</code>의 자연로그. 약 <code>0.693</code>.</p> + </dd> + <dt>{{jsxref("Math.LN10")}}</dt> + <dd><code>10</code>의 자연로그. 약 <code>2.303</code>.</dd> + <dt>{{jsxref("Math.LOG2E")}}</dt> + <dd>밑이 <code>2</code>인 로그 E. 약 <code>1.443</code>.</dd> + <dt>{{jsxref("Math.LOG10E")}}</dt> + <dd>밑이 <code>10</code>인 로그 E. 약 <code>0.434</code>.</dd> + <dt>{{jsxref("Math.PI")}}</dt> + <dd>원의 둘레와 지름의 비율. 약 <code>3.14159</code>.</dd> + <dt>{{jsxref("Math.SQRT1_2")}}</dt> + <dd>½의 제곱근. 약 <code>0.707</code>.</dd> + <dt>{{jsxref("Math.SQRT2")}}</dt> + <dd><code>2</code>의 제곱근. 약 <code>1.414</code>.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<div class="note"> +<p><strong>참고:</strong> 삼각 함수(<code>sin()</code>, <code>cos()</code>, <code>tan()</code>, <code>asin()</code>, <code>acos()</code>, <code>atan()</code>, <code>atan2()</code>)는 매개변수와 반환값 모두 호도법(라디안)을 사용합니다.</p> + +<p>라디안 값을 각도 값으로 변환하려면 <code>(Math.PI / 180)</code>으로 나누세요. 반대로 각도 값에 곱하면 라디안 값이 됩니다.</p> +</div> + +<div class="note"> +<p><strong>참고:</strong> 많은 수의 <code>Math</code> 함수 정확도는 구현에 따라 다를 수 있습니다. 즉, 각 브라우저의 결과가 다를 수 있으며, 서로 같은 JS 엔진이라도 운영체제나 아키텍쳐에 따라서 불일치하는 값을 반환할 수 있습니다.</p> +</div> + +<dl> + <dt>{{jsxref("Global_Objects/Math/abs", "Math.abs(x)")}}</dt> + <dd>숫자의 절댓값을 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/acos", "Math.acos(x)")}}</dt> + <dd>숫자의 아크코사인 값을 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/acosh", "Math.acosh(x)")}} </dt> + <dd>숫자의 쌍곡아크코사인 값을 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/asin", "Math.asin(x)")}}</dt> + <dd>숫자의 아크사인 값을 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/asinh", "Math.asinh(x)")}} </dt> + <dd>숫자의 쌍곡아크사인 값을 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/atan", "Math.atan(x)")}}</dt> + <dd>숫자의 아크탄젠트 값을 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/atanh", "Math.atanh(x)")}} </dt> + <dd>숫자의 쌍곡아크탄젠트 값을 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/atan2", "Math.atan2(y, x)")}}</dt> + <dd>인수 몫의 아크탄젠트 값을 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/cbrt", "Math.cbrt(x)")}} </dt> + <dd>숫자의 세제곱근을 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/ceil", "Math.ceil(x)")}}</dt> + <dd>인수보다 크거나 같은 수 중에서 가장 작은 정수를 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/clz32", "Math.clz32(x)")}} </dt> + <dd>주어진 32비트 정수의 선행 0 개수를 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/cos", "Math.cos(x)")}}</dt> + <dd>숫자의 코사인 값을 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/cosh", "Math.cosh(x)")}} </dt> + <dd>숫자의 쌍곡코사인 값을 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/exp", "Math.exp(x)")}}</dt> + <dd>E<sup>x</sup> 를 반환합니다. <var>x</var>는 인수이며 E 는 오일러 상수(<code>2.718</code>...) 또는 자연로그의 밑입니다.</dd> + <dt>{{jsxref("Global_Objects/Math/expm1", "Math.expm1(x)")}} </dt> + <dd><code>exp(x)</code>에서 <code>1</code>을 뺀 값을 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/floor", "Math.floor(x)")}}</dt> + <dd>인수보다 작거나 같은 수 중에서 가장 큰 정수를 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/fround", "Math.fround(x)")}} </dt> + <dd>인수의 가장 가까운 단일 정밀도 표현을 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/hypot", "Math.hypot([x[, y[, …]]])")}} </dt> + <dd>인수의 제곱합의 제곱근을 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/imul", "Math.imul(x, y)")}} </dt> + <dd>두 32비트 정수의 곱을 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/log", "Math.log(x)")}}</dt> + <dd>숫자의 자연로그(log<sub>e</sub> 또는 ln) 값을 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/log1p", "Math.log1p(x)")}} </dt> + <dd>숫자 <code>x</code>에 대해 <code>1 + x</code>의 자연로그(log<sub>e</sub> 또는 ln) 값을 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/log10", "Math.log10(x)")}} </dt> + <dd>숫자의 밑이 10인 로그를 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/log2", "Math.log2(x)")}} </dt> + <dd>숫자의 밑이 2인 로그를 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/max", "Math.max([x[, y[, …]]])")}}</dt> + <dd>0개 이상의 인수에서 제일 큰 수를 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/min", "Math.min([x[, y[, …]]])")}}</dt> + <dd>0개 이상의 인수에서 제일 작은 수를 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/pow", "Math.pow(x, y)")}}</dt> + <dd>x의 y 제곱을 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/random", "Math.random()")}}</dt> + <dd>0과 1 사이의 난수를 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/round", "Math.round(x)")}}</dt> + <dd>숫자에서 가장 가까운 정수를 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/sign", "Math.sign(x)")}} </dt> + <dd>x의 양의 수인지 음의 수인지 나타내는 부호를 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/sin", "Math.sin(x)")}}</dt> + <dd>숫자의 사인 값을 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/sinh", "Math.sinh(x)")}} </dt> + <dd>숫자의 쌍곡사인 값을 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/sqrt", "Math.sqrt(x)")}}</dt> + <dd>숫자의 제곱근을 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/tan", "Math.tan(x)")}}</dt> + <dd>숫자의 탄젠트 값을 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/tanh", "Math.tanh(x)")}} </dt> + <dd>숫자의 쌍곡탄젠트 값을 반환합니다.</dd> + <dt><code>Math.toSource()</code> {{non-standard_inline}}</dt> + <dd>문자열 <code>"Math"</code>를 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/Math/trunc", "Math.trunc(x)")}} </dt> + <dd>숫자의 정수 부분을 반환합니다.</dd> +</dl> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math-object', 'Math')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Number")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/math/ln10/index.html b/files/ko/web/javascript/reference/global_objects/math/ln10/index.html new file mode 100644 index 0000000000..57ab837e50 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/ln10/index.html @@ -0,0 +1,84 @@ +--- +title: Math.LN10 +slug: Web/JavaScript/Reference/Global_Objects/Math/LN10 +tags: + - JavaScript + - Math + - Property + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN10 +--- +<div>{{JSRef}}</div> + +<p><strong><code>Math.LN10</code></strong> 속성은 10의 자연로그 값, 약 2.302의 값을 가집니다.</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LN10</mi></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>10</mn><mo stretchy="false">)</mo><mo>≈</mo><mn>2.302</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LN10}} = \ln(10) \approx 2.302</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-ln10.html")}}</div> + + + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="설명">설명</h2> + +<p><code>LN10</code>은 <code>Math</code>의 정적 속성이므로, 사용자가 생성한 <code>Math</code> 객체의 속성으로 접근할 수 없고 항상 <code>Math.LN10</code>을 사용해야 합니다. (<code>Math</code>는 생성자가 아닙니다)</p> + +<h2 id="예제">예제</h2> + +<h3 id="Math.LN10_사용하기"><code>Math.LN10</code> 사용하기</h3> + +<p>다음 함수는 10의 자연 로그 값을 반환합니다.</p> + +<pre class="brush:js">function getNatLog10() { + return Math.LN10; +} + +getNatLog10(); // 2.302585092994046 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.1.2', 'Math.LN10')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.ln10', 'Math.LN10')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.ln10', 'Math.LN10')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.LN10")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log10()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/math/ln2/index.html b/files/ko/web/javascript/reference/global_objects/math/ln2/index.html new file mode 100644 index 0000000000..202558fd59 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/ln2/index.html @@ -0,0 +1,86 @@ +--- +title: Math.LN2 +slug: Web/JavaScript/Reference/Global_Objects/Math/LN2 +tags: + - JavaScript + - Math + - Property + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN2 +--- +<div>{{JSRef}}</div> + +<p>The <strong><code>Math.LN2</code></strong> property represents the natural logarithm of 2, approximately 0.693:</p> + +<p><strong><code>Math.LN2</code></strong> 속성은 2의 자연로그 값, 약 0.693의 값을 가집니다.</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LN2</mi></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>2</mn><mo stretchy="false">)</mo><mo>≈</mo><mn>0.693</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LN2}} = \ln(2) \approx 0.693</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-ln2.html")}}</div> + + + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="설명">설명</h2> + +<p><code>LN2</code>는 <code>Math</code>의 정적 속성이므로, 사용자가 생성한 <code>Math</code> 객체의 속성으로 접근할 수 없고 항상 <code>Math.LN2</code>를 사용해야 합니다. (<code>Math</code>는 생성자가 아닙니다)</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Math.LN2_사용하기"><code>Math.LN2</code> 사용하기</h3> + +<p>다음 함수는 2의 자연 로그 값을 반환합니다.</p> + +<pre class="brush:js">function getNatLog2() { + return Math.LN2; +} + +getNatLog2(); // 0.6931471805599453 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.1.3', 'Math.LN2')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.ln2', 'Math.LN2')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.ln2', 'Math.LN2')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.LN2")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log2()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/math/log/index.html b/files/ko/web/javascript/reference/global_objects/math/log/index.html new file mode 100644 index 0000000000..a343fa27a6 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/log/index.html @@ -0,0 +1,104 @@ +--- +title: Math.log() +slug: Web/JavaScript/Reference/Global_Objects/Math/log +translation_of: Web/JavaScript/Reference/Global_Objects/Math/log +--- +<div>{{JSRef}}</div> + +<p><strong><code>Math.log()</code></strong> 함수는 자연 로가리즘은 ({{jsxref("Math.E", "e")}} 를 기초) 의 수를 계산합니다, 이건 다음의</p> + +<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>></mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>the unique</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><msup><mi>e</mi><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x > 0, \mathtt{\operatorname{Math.log}(x)} = \ln(x) = \text{고유값} \; y \; \text{같이} \; e^y = x</annotation></semantics></math></p> + +<p>자바스크립트 <strong><code>Math.log()</code> </strong>함수는 <em>ln(x)</em> 수학적으로 같습니다.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><code>Math.log(<var>x</var>)</code></pre> + +<h3 id="인자">인자</h3> + +<dl> + <dt><code>x</code></dt> + <dd>실수값.</dd> +</dl> + +<h3 id="반환값">반환값</h3> + +<p>자연 로가리즘은 ({{jsxref("Math.E", "e")}} 를 기초) 실수값으로 줍니다. 마이너스 실수값, {{jsxref("NaN")}} 계산됩니다.</p> + +<h2 id="설명">설명</h2> + +<p>만일 값 <code>x</code> 가 마이너스라면, 항상 다음값이 계산됩니다 {{jsxref("NaN")}}.</p> + +<p><code>왜그렇냐면 </code> <code>Math의 log() 가 정적 메서드이기 때문</code>,에 매번 다음처럼 <code>Math.log() 써야합니다</code> (생성자로 초기화된 <code>Math</code> 개체가 아니기 때문입니다).</p> + +<p>자연로그 2 나 10, 상수로쓸때 {{jsxref("Math.LN2")}} or {{jsxref("Math.LN10")}} . 로가리즘 기초값 2 나 10, 쓸때는 {{jsxref("Math.log2()")}} 혹은 {{jsxref("Math.log10()")}} . 로가리즘 다른 기초값은 Math.log(x) / Math.log(기초값) 처럼 예제참고; 미리계산하여 1 / Math.log(기초값) 할 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Math.log()_사용"><code>Math.log() 사용</code></h3> + +<pre class="brush: js">Math.log(-1); // NaN, 정의범위 초과 +Math.log(0); // -Infinity, 무한 +Math.log(1); // 0 +Math.log(10); // 2.302585092994046 +</pre> + +<h3 id="Math.log()_다른_기초값_사용"><code>Math.log()</code> 다른 기초값 사용</h3> + +<p>이 함수는 로가리즘 <code>y 에 대한것으로</code> 기초값 <code>x</code> (ie. <math><semantics><mrow><msub><mo>log</mo><mi>x</mi></msub><mi>y</mi></mrow><annotation encoding="TeX">\log_x y</annotation></semantics></math>): 입니다</p> + +<pre class="brush: js">function getBaseLog(x, y) { + return Math.log(y) / Math.log(x); +} +</pre> + +<p>다음을 실행하면 <code>getBaseLog(10, 1000)</code> 다음 <code>2.9999999999999996 계산되는데</code> 적당히 반올림하니다, 거의 3 에 가깝습니다.</p> + +<h2 id="명세서">명세서</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.10', 'Math.log')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.log', 'Math.log')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.log', 'Math.log')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.log")}}</p> + +<h2 id="같이보기">같이보기</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log1p()")}}</li> + <li>{{jsxref("Math.log10()")}}</li> + <li>{{jsxref("Math.log2()")}}</li> + <li>{{jsxref("Math.pow()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/math/log10e/index.html b/files/ko/web/javascript/reference/global_objects/math/log10e/index.html new file mode 100644 index 0000000000..bb864c8aa3 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/log10e/index.html @@ -0,0 +1,84 @@ +--- +title: Math.LOG10E +slug: Web/JavaScript/Reference/Global_Objects/Math/LOG10E +tags: + - JavaScript + - Math + - Property + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG10E +--- +<div>{{JSRef}}</div> + +<p><strong><code>Math.LOG10E</code></strong> 속성은 e의 로그 10 값, 약 0.434의 값을 가집니다.</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LOG10E</mi></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>10</mn></msub><mo stretchy="false">(</mo><mi>e</mi><mo stretchy="false">)</mo><mo>≈</mo><mn>0.434</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LOG10E}} = \log_10(e) \approx 0.434</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-log10e.html")}}</div> + + + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="설명">설명</h2> + +<p><code>LOG10E</code>는 <code>Math</code>의 정적 속성이므로, 사용자가 생성한 <code>Math</code> 객체의 속성으로 접근할 수 없고 항상 <code>Math.LOG10E</code>를 사용해야 합니다. (<code>Math</code>는 생성자가 아닙니다)</p> + +<h2 id="예제">예제</h2> + +<h3 id="Math.LOG10E_사용하기"><code>Math.LOG10E</code> 사용하기</h3> + +<p>다음 함수는 e의 로그 10 값을 반환합니다.</p> + +<pre class="brush:js">function getLog10e() { + return Math.LOG10E; +} + +getLog10e(); // 0.4342944819032518 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.1.5', 'Math.LOG10E')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.log10e', 'Math.LOG10E')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.log10e', 'Math.LOG10E')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Math.LOG10E")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log10()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/math/log2/index.html b/files/ko/web/javascript/reference/global_objects/math/log2/index.html new file mode 100644 index 0000000000..7cfd72531c --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/log2/index.html @@ -0,0 +1,96 @@ +--- +title: Math.log2() +slug: Web/JavaScript/Reference/Global_Objects/Math/log2 +translation_of: Web/JavaScript/Reference/Global_Objects/Math/log2 +--- +<div>{{JSRef}}</div> + +<p> <strong><code>Math.log2()</code></strong> 함수는 숫자를 log<sub>2</sub>(숫자)로 반환합니다.</p> + +<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>></mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log2</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>2</mn></msub><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>the unique</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><msup><mn>2</mn><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x > 0, \mathtt{\operatorname{Math.log2}(x)} = \log_2(x) = \text{the unique} \; y \; \text{such that} \; 2^y = x</annotation></semantics></math></p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><code>Math.log2(<var>x</var>)</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>x</code></dt> + <dd>숫자.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 숫자는 log<sub>2</sub>(숫자)로 계산합니다. 만약 숫자가 음수라면 {{jsxref("NaN")}}를 반환합니다.</p> + +<h2 id="설명">설명</h2> + +<p>만약 <code>x</code> 의 값이 0보다 작다면(음수) 값은 항상 {{jsxref("NaN")}}로 반환합니다.</p> + +<p><code>log<sub>2</sub>()</code>는 <code>Math</code>의 정적 메서드이므로 만든 <code>Math</code> 객체의 메서드가 아니라 항상 <code>Math.log2()</code>함수를 사용해야합니다. (<code>Math</code>는 생성자가 없습니다.)</p> + +<p>이 함수는 Math.log(x) / Math.log(2)와 같습니다.</p> + +<p>따라서 log<sub>2</sub>(e)는 {{jsxref("Math.LOG2E")}}와 같습니다. </p> + +<p>그리고 위 함수는 1 / {{jsxref("Math.LN2")}}과 같습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Math.log2()"><code>Math.log2()</code></h3> + +<pre class="brush: js">Math.log2(3); // 1.584962500721156 +Math.log2(2); // 1 +Math.log2(1); // 0 +Math.log2(0); // -Infinity +Math.log2(-2); // NaN +Math.log2(1024); // 10 +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>This Polyfill emulates the <code>Math.log2</code> function. Note that it returns imprecise values on some inputs (like 1 << 29), wrap into {{jsxref("Math.round()")}} if working with bit masks.</p> + +<pre class="brush: js">Math.log2 = Math.log2 || function(x) { + return Math.log(x) * Math.LOG2E; +}; +</pre> + +<h2 id="표준">표준</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">표준</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-math.log2', 'Math.log2')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.log2', 'Math.log2')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.log2")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log10()")}}</li> + <li>{{jsxref("Math.log1p()")}}</li> + <li>{{jsxref("Math.pow()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/math/log2e/index.html b/files/ko/web/javascript/reference/global_objects/math/log2e/index.html new file mode 100644 index 0000000000..244224df3d --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/log2e/index.html @@ -0,0 +1,84 @@ +--- +title: Math.LOG2E +slug: Web/JavaScript/Reference/Global_Objects/Math/LOG2E +tags: + - JavaScript + - Math + - Property + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG2E +--- +<div>{{JSRef}}</div> + +<p><strong><code>Math.LOG2E</code></strong> 속성은 e의 로그 2 값, 약 1.442의 값을 가집니다.</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LOG2E</mi></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>2</mn></msub><mo stretchy="false">(</mo><mi>e</mi><mo stretchy="false">)</mo><mo>≈</mo><mn>1.442</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LOG2E}} = \log_2(e) \approx 1.442</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-log2e.html")}}</div> + + + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="설명">설명</h2> + +<p><code>LOG2E</code>는 <code>Math</code>의 정적 속성이므로, 사용자가 생성한 <code>Math</code> 객체의 속성으로 접근할 수 없고 항상 <code>Math.LOG2E</code>를 사용해야 합니다. (<code>Math</code>는 생성자가 아닙니다)</p> + +<h2 id="설명_2">설명</h2> + +<h3 id="Math.LOG2E_사용하기"><code>Math.LOG2E</code> 사용하기</h3> + +<p>다음 함수는 e의 로그 2 값을 반환합니다.</p> + +<pre class="brush: js">function getLog2e() { + return Math.LOG2E; +} + +getLog2e(); // 1.4426950408889634 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.1.4', 'Math.LOG2E')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.log2e', 'Math.LOG2E')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.log2e', 'Math.LOG2E')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Math.LOG2E")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log2()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/math/max/index.html b/files/ko/web/javascript/reference/global_objects/math/max/index.html new file mode 100644 index 0000000000..e315e5027b --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/max/index.html @@ -0,0 +1,110 @@ +--- +title: Math.max() +slug: Web/JavaScript/Reference/Global_Objects/Math/max +tags: + - Math + - 메소드 + - 자바스크립트 + - 참조 +translation_of: Web/JavaScript/Reference/Global_Objects/Math/max +--- +<div>{{JSRef}}</div> + +<p><strong>Math.max()</strong>함수는 입력값으로 받은 0개 이상의 숫자 중 가장 큰 숫자를 반환합니다.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox notranslate"><code>Math.max([<var>값1</var>[, <var>값2</var>[, ...]]])</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>값1, 값2, ...</code></dt> + <dd>숫자들.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>입력된 숫자 중 가장 큰 숫자를 반환합니다. 만약 인수 중 하나라도 숫자로 변환하지 못한다면 {{jsxref("NaN")}}로 반환합니다.</p> + +<h2 id="설명">설명</h2> + +<p>max ()는 Math의 정적 메서드이기 때문에 만든 Math 개체의 메서드가 아닌 항상 Math.max ()로 사용해야합니다. (Math는 생성자가 아닙니다).</p> + +<p>만약 아무 요소도 주어지지 않았다면 {{jsxref("-Infinity")}}로 반환합니다.</p> + +<p>만약 한 개 이상의 요소가 숫자로 변환되지 않는다면 {{jsxref("NaN")}}로 반환됩니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Math.max함수_사용하기"><code>Math.max()함수 사용하기</code></h3> + +<pre class="brush: js notranslate">Math.max(10, 20); // 20 +Math.max(-10, -20); // -10 +Math.max(-10, 20); // 20 +</pre> + +<p>다음 함수는 {{jsxref ( "Function.prototype.apply ()")}}을 사용하여 숫자 배열에서 최대 요소를 찾습니다. getMaxOfArray ([1, 2, 3])는 Math.max (1, 2, 3)와 동일하지만 프로그래밍 방식으로 생성 된 모든 크기의 배열에서 getMaxOfArray ()를 사용할 수 있습니다.</p> + +<pre class="brush: js notranslate">function getMaxOfArray(numArray) { + return Math.max.apply(null, numArray); +} +</pre> + +<p>{{jsxref("Array.prototype.reduce", "Array.reduce()")}} 이 함수 또한 배열의 각 값을 비교하여 가장 큰 숫자를 얻을 수 있습니다.</p> + +<pre class="brush: js notranslate">var arr = [1,2,3]; +var max = arr.reduce(function(a, b) { + return Math.max(a, b); +}); +</pre> + +<p>또한 {{jsxref("Operators/Spread_operator", "spread operator")}}이 함수를 사용하면 배열의 숫자들 중 가장 큰 숫자를 쉽게 얻을 수 있습니다.</p> + +<pre class="brush: js notranslate">var arr = [1, 2, 3]; +var max = Math.max(...arr); +</pre> + +<h2 id="표준">표준</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">표준</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.11', 'Math.max')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.max', 'Math.max')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.max', 'Math.max')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.max")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Math.min()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/math/min/index.html b/files/ko/web/javascript/reference/global_objects/math/min/index.html new file mode 100644 index 0000000000..7bf84ee57c --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/min/index.html @@ -0,0 +1,103 @@ +--- +title: Math.min() +slug: Web/JavaScript/Reference/Global_Objects/Math/min +translation_of: Web/JavaScript/Reference/Global_Objects/Math/min +--- +<div>{{JSRef}}</div> + +<p><strong><code>Math.min()</code></strong> 함수는 주어진 숫자들 중 가장 작은 값을 반환합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>Math.min([<var>value1</var>[, <var>value2</var>[, ...]]])</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>value1, value2, ...</code></dt> + <dd>숫자형</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>주어진 숫자들 중 가장 작은 값. 만약 적어도 1개 이상의 인자값이 숫자형으로 변환이 불가능 한 경우 이 함수는 {{jsxref("NaN")}} 를 반환 합니다.</p> + +<h2 id="Description">Description</h2> + +<p><code>min()</code> 함수는 <code>Math</code> 의 정적 메소드 이므로, 사용자가 생성한 <code>Math</code> 객체의 메소드로 호출하는 것이 아닌 항상 <code>Math.min()</code> 으로 호출되어야 합니다. (<code>Math</code> 는 생성자가 아닙니다).</p> + +<p>만약 주어진 인자값이 없을 경우, {{jsxref("Infinity")}} 가 반환됩니다.</p> + +<p>만약 적어도 1개 이상의 인자값이 숫자형으로 변환이 불가능 한 경우, {{jsxref("NaN")}} 가 반환됩니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_Math.min()">Using <code>Math.min()</code></h3> + +<p>아래 수식은 <code>x</code> 와<code>y</code> 중 작은 값을 찾아 <code>z</code> 에 할당 합니다. </p> + +<pre class="brush: js">var x = 10, y = -20; +var z = Math.min(x, y); +</pre> + +<h3 id="Clipping_a_value_with_Math.min()">Clipping a value with <code>Math.min()</code></h3> + +<p><code>Math.min()</code> 함수는 때때로 값 제한, 즉 항상 기준 보다 작거나 같은 값으로 제한하는 용도로 사용됩니다. 예를 들면,</p> + +<pre class="brush: js">var x = f(foo); + +if (x > boundary) { + x = boundary; +} +</pre> + +<p> 위 코드는 다음과 같이 쓸 수 있습니다.</p> + +<pre class="brush: js">var x = Math.min(f(foo), boundary); +</pre> + +<p>{{jsxref("Math.max()")}} 함수 또한 같은 방식으로 기준보다 크거나 같은 값으로 제한하는 용도로 사용할 수 있습니다.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.12', 'Math.min')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.min', 'Math.min')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.min', 'Math.min')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.min")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Math.max()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/math/pi/index.html b/files/ko/web/javascript/reference/global_objects/math/pi/index.html new file mode 100644 index 0000000000..8223a68df6 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/pi/index.html @@ -0,0 +1,82 @@ +--- +title: Math.PI +slug: Web/JavaScript/Reference/Global_Objects/Math/PI +tags: + - JavaScript + - Math + - Property + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/PI +--- +<div>{{JSRef}}</div> + +<p><strong><code>Math.PI</code></strong> 속성은 원의 둘레와 지름의 비율, 약 3.14159의 값을 가집니다.</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.PI</mi></mstyle><mo>=</mo><mi>π</mi><mo>≈</mo><mn>3.14159</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.PI}} = \pi \approx 3.14159</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-pi.html")}}</div> + + + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="설명">설명</h2> + +<p><code>PI</code>는 <code>Math</code>의 정적 속성이므로, 사용자가 생성한 <code>Math</code> 객체의 속성으로 접근할 수 없고 항상 <code>Math.PI</code>를 사용해야 합니다. (<code>Math</code>는 생성자가 아닙니다)</p> + +<h2 id="예제">예제</h2> + +<h3 id="Math.PI_사용하기"><code>Math.PI</code> 사용하기</h3> + +<p>다음 함수는 <code>Math.PI</code>를 사용해 주어진 원의 반지름에서 둘레를 계산합니다.</p> + +<pre class="brush: js">function calculateCircumference(radius) { + return Math.PI * (radius + radius); +} + +calculateCircumference(1); // 6.283185307179586 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">사양</th> + <th scope="col">등급</th> + <th scope="col">주석</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.1.6', 'Math.PI')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.pi', 'Math.PI')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.pi', 'Math.PI')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Math.PI")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Math")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/math/random/index.html b/files/ko/web/javascript/reference/global_objects/math/random/index.html new file mode 100644 index 0000000000..9ce02207de --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/random/index.html @@ -0,0 +1,106 @@ +--- +title: Math.random() +slug: Web/JavaScript/Reference/Global_Objects/Math/random +translation_of: Web/JavaScript/Reference/Global_Objects/Math/random +--- +<div>{{JSRef}}</div> + +<p><strong><code>Math.random()</code></strong> 함수는 0 이상 1 미만의 구간에서 근사적으로 균일한(approximately uniform) 부동소숫점 의사난수를 반환하며, 이 값은 사용자가 원하는 범위로 변형할 수 있다. 난수 생성 알고리즘에 사용되는 초기값은 구현체가 선택하며, 사용자가 선택하거나 초기화할 수 없다.</p> + +<div class="note"> +<p><code>Math.random()</code>은 암호학적으로 안전한 난수를 <strong>제공하지 않으므로</strong>, 보안과 관련된 어떤 것에도 이 함수를 사용해서는 안 된다. 그 대신 Web Crypto API의 {{domxref("RandomSource.getRandomValues()", "window.crypto.getRandomValues()")}} 메소드를 이용하여야 한다.</p> +</div> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><code>Math.random()</code> +</pre> + +<h3 id="반환_값">반환 값</h3> + +<p>0 이상 1 미만의 부동소숫점 의사 난수.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Math.random_사용"><code>Math.random()</code> 사용</h3> + +<p>JavaScript의 수(number)는 가까운 짝수로 반올림되는(round-to-nearest-even behavior) IEEE 754 부동소수점 실수이므로, 아래 함수들(<code>Math.random()</code> 자체에 대한 사항은 제외)에 명시된 범위는 정확하지 않음을 유의하라. 지나치게 큰 범위(2<sup>53</sup> 이상)를 선택할 경우, <em>매우</em> 드문 경우 원래 포함되어서는 안 될 최댓값이 포함되는 경우가 있다.</p> + +<h3 id="0_이상_1_미만의_난수_생성하기">0 이상 1 미만의 난수 생성하기</h3> + +<pre class="brush: js">function getRandom() { + return Math.random(); +} +</pre> + +<h3 id="두_값_사이의_난수_생성하기">두 값 사이의 난수 생성하기</h3> + +<p>이 예제는 주어진 두 값 사이의 난수를 생성한다. 함수의 반환값은 <code>min</code>보다 크거나 같으며, <code>max</code>보다 작다.</p> + +<pre class="brush: js">function getRandomArbitrary(min, max) { + return Math.random() * (max - min) + min; +} +</pre> + +<h3 id="두_값_사이의_정수_난수_생성하기">두 값 사이의 정수 난수 생성하기</h3> + +<p>이 예제는 주어진 두 값 사이의 <u>정수인</u> 난수를 생성한다. 반환값은 <code>min</code>(단, <code>min</code>이 정수가 아니면 <code>min</code>보다 큰 최소의 정수)보다 크거나 같으며, <code>max</code>보다 작다.</p> + +<pre class="brush: js">function getRandomInt(min, max) { + min = Math.ceil(min); + max = Math.floor(max); + return Math.floor(Math.random() * (max - min)) + min; //최댓값은 제외, 최솟값은 포함 +} +</pre> + +<div class="note"> +<p>이 예제에서 <code>Math.round()</code>를 대신 사용하려고 할 수 있으나, 이렇게 하면 난수가 고르게 분포하지 않게 된다.</p> +</div> + +<h3 id="최댓값을_포함하는_정수_난수_생성하기">최댓값을 포함하는 정수 난수 생성하기</h3> + +<p>위의<code>getRandomInt()</code> 함수는 최솟값을 포함하지만, 최댓값은 포함하지 않는다. 최솟값과 최댓값을 모두 포함하는 결과가 필요할 경우, 아래의 <code>getRandomIntInclusive()</code> 함수를 사용할 수 있다.</p> + +<pre class="brush: js">function getRandomIntInclusive(min, max) { + min = Math.ceil(min); + max = Math.floor(max); + return Math.floor(Math.random() * (max - min + 1)) + min; //최댓값도 포함, 최솟값도 포함 +}</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>초기 정의. JavaScript 1.0 (유닉스 전용) / JavaScript 1.1 (모든 플랫폼).</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.14', 'Math.random')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.random', 'Math.random')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.random', 'Math.random')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.random")}}</p> diff --git a/files/ko/web/javascript/reference/global_objects/math/round/index.html b/files/ko/web/javascript/reference/global_objects/math/round/index.html new file mode 100644 index 0000000000..e163c4459e --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/round/index.html @@ -0,0 +1,92 @@ +--- +title: Math.round() +slug: Web/JavaScript/Reference/Global_Objects/Math/round +translation_of: Web/JavaScript/Reference/Global_Objects/Math/round +--- +<div>{{JSRef}}</div> + +<p><strong><code>Math.round()</code></strong> 함수는 입력값을 반올림한 수와 가장 가까운 정수 값을 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/math-round.html")}}</div> + + + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox">Math.round(<var>x</var>)</pre> + +<h3 id="매개_변수">매개 변수</h3> + +<dl> + <dt><code>x</code></dt> + <dd>수</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>입력값을 반올림한 값과 가장 가까운 정수를 의미합니다.</p> + +<h2 id="Description">Description</h2> + +<p>If the fractional portion of the argument is greater than 0.5, the argument is rounded to the integer with the next higher absolute value. If it is less than 0.5, the argument is rounded to the integer with the lower absolute value. If the fractional portion is exactly 0.5, the argument is rounded to the next integer in the direction of +∞. <strong>Note that this differs from many languages' <code>round()</code> functions, which often round this case to the next integer <em>away from zero</em></strong>, instead giving a different result in the case of negative numbers with a fractional part of exactly 0.5.</p> + +<p>Because <code>round()</code> is a static method of <code>Math</code>, you always use it as <code>Math.round()</code>, rather than as a method of a <code>Math</code> object you created (<code>Math</code> has no constructor).</p> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js">Math.round( 20.49); // 20 +Math.round( 20.5 ); // 21 +Math.round( 42 ); // 42 +Math.round(-20.5 ); // -20 +Math.round(-20.51); // -21 +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.15', 'Math.round')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.round', 'Math.round')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.round', 'Math.round')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.round")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Number.toPrecision()")}}</li> + <li>{{jsxref("Number.toFixed()")}}</li> + <li>{{jsxref("Math.abs()")}}</li> + <li>{{jsxref("Math.ceil()")}}</li> + <li>{{jsxref("Math.floor()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li>{{jsxref("Math.trunc()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/math/sign/index.html b/files/ko/web/javascript/reference/global_objects/math/sign/index.html new file mode 100644 index 0000000000..adb5f15354 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/sign/index.html @@ -0,0 +1,112 @@ +--- +title: Math.sign() +slug: Web/JavaScript/Reference/Global_Objects/Math/sign +tags: + - JavaScript + - Math + - 메소드 + - 참조 +translation_of: Web/JavaScript/Reference/Global_Objects/Math/sign +--- +<div>{{JSRef}}</div> + +<p><strong><code>Math.sign()</code></strong> 함수는 어떤 수의 부호를 반환합니다. 이것은 그 수가 양수, 음수 또는 0인지를 나나냅니다.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><code>Math.sign(<var>x</var>)</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>x</code></dt> + <dd>수치.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 인수의 부호를 나타내는 수치. 인수가 양수, 음수, 양수인 영 또는 음수인 영이면, 이 함수는 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">1</span></font>, <code>-1</code>, <code>0,</code> <code>-0</code>을 각각 반환합니다. 그렇지 않으면, {{jsxref("NaN")}} 이 반환됩니다.</p> + +<h2 id="설명">설명</h2> + +<p><code>sign()</code> 이<code>Math</code>의 정적 메소드이기 때문에 항상 <code>Math.sign()</code>으로 사용합니다. 사용자가 만든 <code>Math</code> 개체의 메소드로 가 아닙니다. (<code>Math</code> 는 생성자가 아닙니다).</p> + +<p>이 함수는 반환 값이 5 가지이며, <code>1</code>, <code>-1</code>, <code>0</code>, <code>-0</code>, <code>NaN 입니다.</code> 각각 "양수", "음수", "양의 영", "음의 영", {{jsxref("NaN")}} 입니다.</p> + +<p>이 함수에 전달된 인수는 묵시적으로 <code>수치</code> 로 변환됩니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Math.sign()을_사용하기"> <code>Math.sign()</code>을 사용하기</h3> + +<pre class="brush: js">Math.sign(3); // 1 +Math.sign(-3); // -1 +Math.sign('-3'); // -1 +Math.sign(0); // 0 +Math.sign(-0); // -0 +Math.sign(NaN); // NaN +Math.sign('foo'); // NaN +Math.sign(); // NaN +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">if (!Math.sign) { + Math.sign = function(x) { + // x 가 NaN 이면, 결과는 NaN 입니다. + // x 가 -0 이면, 결과는 -0 입니다. + // x 가 +0 이면, 결과는 +0 입니다. + // x 가 음수이면서 -0 이 아니면, 결과는 -1 입니다. + // x 가 양수이면서 +0 이 아니면, 결과는 +1 입니다. + return ((x > 0) - (x < 0)) || +x; + // A more aesthetical persuado-representation is shown below + // + // ( (x > 0) ? 0 : 1 ) // if x is negative then negative one + // + // else (because you cant be both - and +) + // ( (x < 0) ? 0 : -1 ) // if x is positive then positive one + // || // if x is 0, -0, or NaN, or not a number, + // +x // Then the result will be x, (or) if x is + // // not a number, then x converts to number + }; +} +</pre> + +<p>위의 polyfill에서는, <code>(x > 0) 또는 (x < 0)</code> 인 수치들을 만드는 데에 어떤 추가의 타입-강제하기도 필요하지 않은 것은 그 수치들을 서로에게서 빼는 것이 불린형에서 수치로의 형 변환을 강요하기 때문입니다.</p> + +<h2 id="규격명세">규격명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">규격명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.sign', 'Math.sign')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>최초의 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.sign', 'Math.sign')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">이 페이지에서 호환성 표는 구조화된 자료로부터 생성됩니다. 그 자료에 기여하시려면, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 를 확인하시고 저희에게 pull 요청을 보내십시오.</p> + +<p>{{Compat("javascript.builtins.Math.sign")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Math.abs()")}}</li> + <li>{{jsxref("Math.ceil()")}}</li> + <li>{{jsxref("Math.floor()")}}</li> + <li>{{jsxref("Math.round()")}}</li> + <li>{{jsxref("Math.trunc()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/math/sin/index.html b/files/ko/web/javascript/reference/global_objects/math/sin/index.html new file mode 100644 index 0000000000..1978d7f8e8 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/sin/index.html @@ -0,0 +1,97 @@ +--- +title: Math.sin() +slug: Web/JavaScript/Reference/Global_Objects/Math/sin +tags: + - 레퍼런스 + - 메소드 + - 수학 + - 자바스크립트 +translation_of: Web/JavaScript/Reference/Global_Objects/Math/sin +--- +<div>{{JSRef}}</div> + +<p> <strong><code>Math.sin()</code></strong> 함수는 숫자의 사인값을 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/math-sin.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>Math.sin(<var>x</var>)</code></pre> + +<h3 id="파라미터">파라미터</h3> + +<dl> + <dt><code>x</code></dt> + <dd>숫자 (라디안으로 주어짐).</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 숫자의 사인 값</p> + +<h2 id="설명">설명</h2> + +<p><code>Math.sin()</code> 메소드는 라디안으로 주어진 각도의 사인 값인 -1과 1 사이의 수를 반환합니다.</p> + +<p> <code>sin()</code> 은 <code>Math</code>의 스태틱 메소드이기 때문에, <code>Math</code> 오브젝트 의 메소드로 사용하지 말고 항상 <code>Math.sin()</code>로 사용해야합니다. (<code>Math</code> 는 생성자가 아닙니다).</p> + +<h2 id="예">예</h2> + +<h3 id="Using_Math.sin()">Using <code>Math.sin()</code></h3> + +<pre class="brush: js">Math.sin(0); // 0 +Math.sin(1); // 0.8414709848078965 + +Math.sin(Math.PI / 2); // 1 +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>최초 정의. JavaScript 1.0. 에서 구현됨</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.16', 'Math.sin')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.sin', 'Math.sin')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.sin', 'Math.sin')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.sin")}}</p> + +<h2 id="함께_보기">함께 보기</h2> + +<ul> + <li>{{jsxref("Math.acos()")}}</li> + <li>{{jsxref("Math.asin()")}}</li> + <li>{{jsxref("Math.atan()")}}</li> + <li>{{jsxref("Math.atan2()")}}</li> + <li>{{jsxref("Math.cos()")}}</li> + <li>{{jsxref("Math.tan()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/math/sinh/index.html b/files/ko/web/javascript/reference/global_objects/math/sinh/index.html new file mode 100644 index 0000000000..9a3bb3a6ab --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/sinh/index.html @@ -0,0 +1,96 @@ +--- +title: Math.sinh() +slug: Web/JavaScript/Reference/Global_Objects/Math/sinh +translation_of: Web/JavaScript/Reference/Global_Objects/Math/sinh +--- +<div>{{JSRef}}</div> + +<p><strong><code>Math.sinh()</code></strong> 함수(쌍곡선 함수)는 사인값을 반환합니다 이 값은 아래와같은 식을통해서 표현할 수 있습니다.{{jsxref("Math.E", "constant e", "", 1)}}:</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mo lspace="0em" rspace="thinmathspace">Math.sinh(x)</mo></mstyle><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>-</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mn>2</mn></mfrac></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.sinh(x)}} = \frac{e^x - e^{-x}}{2}</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-sinh.html")}}</div> + +<p class="hidden">이 대화식 예제의 소스는 GitHub Repository에 저장됩니다. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>Math.sinh(<var>x</var>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>x</code></dt> + <dd>숫자.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>사인값.</p> + +<h2 id="Description">Description</h2> + +<p><code>sinh()</code> 는 <code>Math</code> 의 정적 함수이기 때문에, 자바스크립트 어디든 <code>Math.sinh()</code> 를 사용할 수 있습니다, 따라서 <code>Math</code> 오브젝트를 생성해서는 안됩니다. (<code>Math</code> 는 constructor(생성자) 가 아닙니다.).</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Math.sinh_사용하기"><code>Math.sinh()</code> 사용하기</h3> + +<pre class="brush: js">Math.sinh(0); // 0 +Math.sinh(1); // 1.1752011936438014 +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>This can be emulated with the help of the {{jsxref("Math.exp()")}} function:</p> + +<pre class="brush: js">Math.sinh = Math.sinh || function(x) { + return (Math.exp(x) - Math.exp(-x)) / 2; +} +</pre> + +<p>or using only one call to the {{jsxref("Math.exp()")}} function:</p> + +<pre class="brush: js">Math.sinh = Math.sinh || function(x) { + var y = Math.exp(x); + return (y - 1 / y) / 2; +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-math.sinh', 'Math.sinh')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.sinh', 'Math.sinh')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.sinh")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Math.acosh()")}}</li> + <li>{{jsxref("Math.asinh()")}}</li> + <li>{{jsxref("Math.atanh()")}}</li> + <li>{{jsxref("Math.cosh()")}}</li> + <li>{{jsxref("Math.tanh()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/math/sqrt/index.html b/files/ko/web/javascript/reference/global_objects/math/sqrt/index.html new file mode 100644 index 0000000000..f03af42e6f --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/sqrt/index.html @@ -0,0 +1,90 @@ +--- +title: Math.sqrt() +slug: Web/JavaScript/Reference/Global_Objects/Math/sqrt +translation_of: Web/JavaScript/Reference/Global_Objects/Math/sqrt +--- +<div>{{JSRef}}</div> + +<p> <strong><code>Math.sqrt()</code></strong> 함수는 숫자의 제곱근을 반환합니다.</p> + +<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>≥</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mi>M</mi><mi>a</mi><mi>t</mi><mi>h</mi><mo>.</mo><mi>s</mi><mi>q</mi><mi>r</mi><mi>t</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msqrt><mi>x</mi></msqrt><mo>=</mo><mtext>the unique</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>≥</mo><mn>0</mn><mspace width="thickmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><msup><mi>y</mi><mn>2</mn></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \geq 0, \mathtt{Math.sqrt(x)} = \sqrt{x} = \text{the unique} \; y \geq 0 \; \text{such that} \; y^2 = x</annotation></semantics></math></p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><code>Math.sqrt(<var>x</var>)</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>x</code></dt> + <dd>숫자.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 숫자에 루트(<strong>√ </strong>)를 씌웁니다. 만약 숫자가 음수이면 {{jsxref("NaN")}}를 반환합니다.</p> + +<h2 id="설명">설명</h2> + +<p>만약 <code>x</code> 가 음수라면 <code>Math.sqrt()</code> 함수는 {{jsxref("NaN")}}를 반환합니다.</p> + +<p><code>sqrt()</code>는 <code>Math</code>의 정적 메서드 이므로 만든 <code>Math</code> 객체의 메서드가 아니라 항상 <code>Math.sqrt()</code>함수를 사용해야합니다. (<code>Math</code>는 생성자가 없습니다.)</p> + +<h2 id="예제">예제</h2> + +<h3 id="Math.sqrt()"> <code>Math.sqrt()</code></h3> + +<pre class="brush: js">Math.sqrt(9); // 3 +Math.sqrt(2); // 1.414213562373095 + +Math.sqrt(1); // 1 +Math.sqrt(0); // 0 +Math.sqrt(-1); // NaN +</pre> + +<h2 id="표준">표준</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">표준</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.17', 'Math.sqrt')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.sqrt', 'Math.sqrt')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.sqrt', 'Math.sqrt')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.sqrt")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Math.cbrt()")}}</li> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.pow()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/math/sqrt1_2/index.html b/files/ko/web/javascript/reference/global_objects/math/sqrt1_2/index.html new file mode 100644 index 0000000000..ee347e46eb --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/sqrt1_2/index.html @@ -0,0 +1,59 @@ +--- +title: Math.SQRT1_2 +slug: Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2 +translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2 +--- +<div>{{JSRef}}</div> + +<p><strong><code>Math.SQRT1_2</code></strong> 프로퍼티는 약 0.707의 값을 나타내는 루트 1/2을 나타냅니다:</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.SQRT1_2</mi></mstyle><mo>=</mo><msqrt><mfrac><mn>1</mn><mn>2</mn></mfrac></msqrt><mo>=</mo><mfrac><mn>1</mn><msqrt><mn>2</mn></msqrt></mfrac><mo>≈</mo><mn>0.707</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.SQRT1_2}} = \sqrt{\frac{1}{2}} = \frac{1}{\sqrt{2}} \approx 0.707</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-sqrt1_2.html", "shorter")}}</div> + +<p class="hidden">이 상호적인 예시의 소스는 깃헙에 저장되어 있습니다. 만약 상호적인 예시 프로젝트에 기여하고 싶으시다면, <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>를 클론한 후, 풀 리퀘스트를 보내주시기 바랍니다.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="설명">설명</h2> + +<p><code>SQRT1_2</code> 는 <code>Math</code>의 정적 프로퍼티이기 때문에, 당신이 생성한 <code>Math</code> 오브젝트의 프로퍼티보다는 항상 <code>Math.SQRT1_2</code>의 형태로 사용합니다 (<code>Math</code>는 컨스트럭터가 아닙니다).</p> + +<h2 id="예시">예시</h2> + +<h3 id="Math.SQRT1_2_의_사용"><code>Math.SQRT1_2</code> 의 사용</h3> + +<p>다음은 루트 1/2를 출력합니다:</p> + +<pre class="brush:js">function getRoot1_2() { + return Math.SQRT1_2; +} + +getRoot1_2(); // 0.7071067811865476 +</pre> + +<h2 id="사양">사양</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">사양</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden"><span>이 페이지의 호환성 표는 구조화된 데이터에서 생성됩니다.</span> 데이터에 기여하고 싶으시다면, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>을 확인하고 풀 리퀘스트를 보내 주시기 바랍니다.</p> + +<p>{{Compat("javascript.builtins.Math.SQRT1_2")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Math.pow()")}}</li> + <li>{{jsxref("Math.sqrt()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/math/sqrt2/index.html b/files/ko/web/javascript/reference/global_objects/math/sqrt2/index.html new file mode 100644 index 0000000000..1ad86df55b --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/sqrt2/index.html @@ -0,0 +1,74 @@ +--- +title: Math.SQRT2 +slug: Web/JavaScript/Reference/Global_Objects/Math/SQRT2 +translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT2 +--- +<div>{{JSRef}}</div> + +<p> <strong><code>Math.SQRT2</code></strong> 는 2의 제곱근을 나타내고 약 1.414 입니다:</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.SQRT2</mi></mstyle><mo>=</mo><msqrt><mn>2</mn></msqrt><mo>≈</mo><mn>1.414</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.SQRT2}} = \sqrt{2} \approx 1.414</annotation></semantics></math></p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="설명">설명</h2> + +<p> <code>SQRT2</code> 는 <code>Math</code>의 정적 메서드 이므로 만든 <code>Math</code> 객체의 메서드가 아니라 항상 <code>Math.SQRT2</code> 함수를 사용해야합니다. (<code>Math</code>는 생성자가 없습니다.)</p> + +<h2 id="예제">예제</h2> + +<h3 id="Math.SQRT2"><code>Math.SQRT2</code></h3> + +<p>이 함수는 2의 제곱근을 반환합니다.</p> + +<pre class="brush: js">function getRoot2() { + return Math.SQRT2; +} + +getRoot2(); // 1.4142135623730951 +</pre> + +<h2 id="표준">표준</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">표준</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.1.8', 'Math.SQRT2')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.sqrt2', 'Math.SQRT2')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.sqrt2', 'Math.SQRT2')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.SQRT2")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Math.pow()")}}</li> + <li>{{jsxref("Math.sqrt()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/math/tan/index.html b/files/ko/web/javascript/reference/global_objects/math/tan/index.html new file mode 100644 index 0000000000..64a1468020 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/tan/index.html @@ -0,0 +1,102 @@ +--- +title: Math.tan() +slug: Web/JavaScript/Reference/Global_Objects/Math/tan +tags: + - 레퍼런스 + - 메소드 + - 수학 + - 자바스크립트 +translation_of: Web/JavaScript/Reference/Global_Objects/Math/tan +--- +<div>{{JSRef}}</div> + +<p><strong><code>Math.tan()</code></strong> 함수는 탄젠트 값을 반환합니다</p> + +<div>{{EmbedInteractiveExample("pages/js/math-tan.html")}}</div> + + + +<h2 id="신텍스">신텍스</h2> + +<pre class="syntaxbox"><code>Math.tan(<var>x</var>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>x</code></dt> + <dd>라디안 각도 </dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 수의 탄젠트 값</p> + +<h2 id="설명">설명</h2> + +<p><code>Math.tan()</code> 메소드는 각도의 탄젠트 값을 수로 반환합니다.</p> + +<p><code>tan()</code>은 <code>Math</code>의 정적 메서드이므로 사용자가 만든 <code>Math</code> 객체의 메서드가 아닌 항상 <code>Math.tan()</code>으로 사용합니다 (<code>Math</code> 는 생성자가 아닙니다).</p> + +<h2 id="예">예</h2> + +<h3 id="Using_Math.tan()">Using <code>Math.tan()</code></h3> + +<pre class="brush: js">Math.tan(1); // 1.5574077246549023 +</pre> + +<p><code>Math.tan()</code>함수는 라디안 값으로 받지만 각도로 작업하는 것이 더 쉽기 때문에 다음 함수는 각도로 값을 받아서 라디안으로 변환하고 탄젠트를 반환합니다.</p> + +<pre class="brush: js">function getTanDeg(deg) { + var rad = deg * Math.PI/180; + return Math.tan(rad); +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.18', 'Math.tan')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.tan', 'Math.tan')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.tan', 'Math.tan')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.tan")}}</p> + +<h2 id="함께_보기">함께 보기</h2> + +<ul> + <li>{{jsxref("Math.acos()")}}</li> + <li>{{jsxref("Math.asin()")}}</li> + <li>{{jsxref("Math.atan()")}}</li> + <li>{{jsxref("Math.atan2()")}}</li> + <li>{{jsxref("Math.cos()")}}</li> + <li>{{jsxref("Math.sin()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/math/tanh/index.html b/files/ko/web/javascript/reference/global_objects/math/tanh/index.html new file mode 100644 index 0000000000..97055e165b --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/tanh/index.html @@ -0,0 +1,85 @@ +--- +title: Math.tanh() +slug: Web/JavaScript/Reference/Global_Objects/Math/tanh +tags: + - ECMAScript 2015 + - 레퍼런스 + - 메서드 + - 수학 + - 자바스크립트 +translation_of: Web/JavaScript/Reference/Global_Objects/Math/tanh +--- +<div>{{JSRef}}</div> + +<p><strong><code>Math.tanh()</code></strong> 함수는 쌍곡탄젠트 값을 반환합니다. 수식으로는 아래와 같습니다.</p> + +<p><math display="block"><semantics><mrow><mo lspace="0em" rspace="0em">tanh</mo><mi>x</mi><mo>=</mo><mfrac><mrow><mo lspace="0em" rspace="0em">sinh</mo><mi>x</mi></mrow><mrow><mo lspace="0em" rspace="0em">cosh</mo><mi>x</mi></mrow></mfrac><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>-</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>+</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow></mfrac><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>x</mi></mrow></msup><mo>-</mo><mn>1</mn></mrow><mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>x</mi></mrow></msup><mo>+</mo><mn>1</mn></mrow></mfrac></mrow><annotation encoding="TeX">\tanh x = \frac{\sinh x}{\cosh x} = \frac {e^x - e^{-x}} {e^x + e^{-x}} = \frac{e^{2x} - 1}{e^{2x}+1}</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-tanh.html")}}</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>Math.tanh(<var>x</var>)</code></pre> + +<h3 id="파라미터">파라미터</h3> + +<dl> + <dt><code>x</code></dt> + <dd>숫자.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 수의 쌍곡탄젠트 값</p> + +<h2 id="설명">설명</h2> + +<p><code>tanh()</code> 은 <code>Math</code>의 정적 메서드이므로 사용자가 만든 <code>Math</code> 객체의 메서드가 아닌 항상 <code>Math.tanh()</code> 으로 사용합니다 (<code>Math</code> 는 생성자가 아닙니다.).</p> + +<h2 id="예">예</h2> + +<h3 id="Using_Math.tanh">Using <code>Math.tanh()</code></h3> + +<pre class="brush: js">Math.tanh(0); // 0 +Math.tanh(Infinity); // 1 +Math.tanh(1); // 0.7615941559557649 +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>This can be emulated with the help of the {{jsxref("Math.exp()")}} function:</p> + +<pre class="brush: js">Math.tanh = Math.tanh || function(x){ + var a = Math.exp(+x), b = Math.exp(-x); + return a == Infinity ? 1 : b == Infinity ? -1 : (a - b) / (a + b); +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.tanh', 'Math.tanh')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.tanh")}}</p> + +<h2 id="함께_보기">함께 보기</h2> + +<ul> + <li>{{jsxref("Math.acosh()")}}</li> + <li>{{jsxref("Math.asinh()")}}</li> + <li>{{jsxref("Math.atanh()")}}</li> + <li>{{jsxref("Math.cosh()")}}</li> + <li>{{jsxref("Math.sinh()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/math/trunc/index.html b/files/ko/web/javascript/reference/global_objects/math/trunc/index.html new file mode 100644 index 0000000000..0f63fd1e58 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/math/trunc/index.html @@ -0,0 +1,96 @@ +--- +title: Math.trunc() +slug: Web/JavaScript/Reference/Global_Objects/Math/trunc +translation_of: Web/JavaScript/Reference/Global_Objects/Math/trunc +--- +<div>{{JSRef}}</div> + +<p><strong><code>Math.trunc()</code></strong> 함수는 주어진 값의 소수부분을 제거하고 숫자의 정수부분을 반환합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">Math.trunc(<var>x</var>) +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>x</code></dt> + <dd>숫자형</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>주어진 숫자의 정수부분</p> + +<h2 id="Description">Description</h2> + +<p>Math의 유사함수 3개 : {{jsxref("Math.floor()")}}, {{jsxref("Math.ceil()")}} and {{jsxref("Math.round()")}} 와는 다르게, <code>Math.trunc()</code> 함수는 주어진 값이 양수이건 음수이건 상관없이 소수점 이하 우측부분을 제거하는 매우 단순한 동작을 합니다.</p> + +<p>함수인자는 암묵적으로 number형으로 변환되어 메소드에 전달됩니다.</p> + +<p><code>trunc()</code> 함수는 Math의 정적 메소드이기 때문에 사용자가 생성한 <code>Math</code> 객체의 메소드로 호출하는 것이 아닌 항상 <code>Math.trunc()</code> 형태로 호출해야 합니다. (<code>Math</code> 는 생성자가 아닙니다).</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_Math.trunc()">Using <code>Math.trunc()</code></h3> + +<pre class="brush: js">Math.trunc(13.37); // 13 +Math.trunc(42.84); // 42 +Math.trunc(0.123); // 0 +Math.trunc(-0.123); // -0 +Math.trunc('-1.123'); // -1 +Math.trunc(NaN); // NaN +Math.trunc('foo'); // NaN +Math.trunc(); // NaN +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">Math.trunc = Math.trunc || function(x) { + if (isNaN(x)) { + return NaN; + } + if (x > 0) { + return Math.floor(x); + } + return Math.ceil(x); +};</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-math.trunc', 'Math.trunc')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.trunc', 'Math.trunc')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.trunc")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Math.abs()")}}</li> + <li>{{jsxref("Math.ceil()")}}</li> + <li>{{jsxref("Math.floor()")}}</li> + <li>{{jsxref("Math.round()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/nan/index.html b/files/ko/web/javascript/reference/global_objects/nan/index.html new file mode 100644 index 0000000000..4e6e3a8c42 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/nan/index.html @@ -0,0 +1,91 @@ +--- +title: NaN +slug: Web/JavaScript/Reference/Global_Objects/NaN +tags: + - JavaScript + - Property + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/NaN +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>전역 <code><strong>NaN</strong></code> 속성은 Not-A-Number(숫자가 아님)를 나타냅니다.</p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-nan.html")}}</div> + + + +<h2 id="Description" name="Description">설명</h2> + +<p><code>NaN</code>은 전역 객체의 속성입니다. 즉 전역 스코프의 변수입니다.</p> + +<p><code>NaN</code>의 초기값은 Not-A-Number(숫자가 아님)로, {{jsxref("Number.NaN")}}의 값과 같습니다. 최신 브라우저에서 <code style="font-style: normal;">NaN</code>은 설정 불가, 쓰기 불가 속성입니다. 그렇지 않다고 하더라도 덮어쓰는건 피하는게 좋습니다.</p> + +<p><code>NaN</code>을 반환하는 연산에는 다섯 가지 종류가 있습니다.</p> + +<ul> + <li>숫자로서 읽을 수 없음 (<code>parseInt("어쩌구")</code>, <code>Number(undefined)</code>)</li> + <li>결과가 허수인 수학 계산식 (<code>Math.sqrt(-1)</code>)</li> + <li>피연산자가 <code>NaN</code> (<code>7 ** NaN</code>)</li> + <li>정의할 수 없는 계산식 (<code>0 * Infinity</code>)</li> + <li>문자열을 포함하면서 덧셈이 아닌 계산식 (<code>"가" / 3</code>)</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="NaN_판별"><code>NaN</code> 판별</h3> + +<p><code>NaN</code>은 다른 모든 값과 비교(<code>==</code>, <code>!=</code>, <code>===</code>, <code>!==</code>)했을 때 같지 않으며, 다른 NaN과도 같지 않습니다. NaN의 판별은 {{jsxref("Number.isNaN()")}} 또는 {{jsxref("Global_Objects/isNaN", "isNaN()")}}을 사용하면 제일 분명하게 수행할 수 있습니다. 아니면, 오로지 NaN만이 자기자신과 비교했을 때 같지 않음을 이용할 수도 있습니다.</p> + +<pre class="brush: js notranslate">NaN === NaN; // false +Number.NaN === NaN; // false +isNaN(NaN); // true +isNaN(Number.NaN); // true + +function valueIsNaN(v) { return v !== v; } +valueIsNaN(1); // false +valueIsNaN(NaN); // true +valueIsNaN(Number.NaN); // true +</pre> + +<p>그러나 <code>isNaN()</code>과 <code>Number.isNaN()</code>의 차이를 주의해야 합니다. <code>isNaN</code>은 현재 값이 <code>NaN</code>이거나, 숫자로 변환했을 때 <code>NaN</code>이 되면 참을 반환하지만, <code>Number.isNaN</code>은 현재 값이 <code>NaN</code>이어야만 참을 반환합니다.</p> + +<pre class="brush: js notranslate">isNaN('hello world'); // true +Number.isNaN('hello world'); // false +</pre> + +<p>덧붙여서, 일부 배열 메서드는 NaN을 찾을 수 없습니다.</p> + +<pre class="brush: js notranslate">let arr = [2, 4, NaN, 12]; +arr.indexOf(NaN); // -1 (false) +arr.includes(NaN); // true +arr.findIndex(n => Number.isNaN(n)); // 2</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-nan', 'NaN')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.NaN")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Number.NaN")}}</li> + <li>{{jsxref("Number.isNaN()")}}</li> + <li>{{jsxref("isNaN", "isNaN()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/null/index.html b/files/ko/web/javascript/reference/global_objects/null/index.html new file mode 100644 index 0000000000..e69295c9f6 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/null/index.html @@ -0,0 +1,69 @@ +--- +title: 'null' +slug: Web/JavaScript/Reference/Global_Objects/null +tags: + - JavaScript + - Literal + - Primitive + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/null +--- +<div>{{jsSidebar("Objects")}}</div> + +<p><strong><code>null</code></strong>은 JavaScript의 {{Glossary("Primitive", "원시 값")}} 중 하나로, 어떤 값이 의도적으로 비어있음을 표현하며 불리언 연산에서는 {{glossary("falsy", "거짓")}}으로 취급합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-null.html")}}</div> + + + +<h2 id="설명">설명</h2> + +<p><code>null</code>은 리터럴로서, <code>null</code>로 작성할 수 있습니다. <code>null</code>은 {{jsxref("undefined")}}와 같은 전역 객체의 식별자가 아닙니다. 대신 식별되지 않은 상태를 나타내며 해당 변수가 어떠한 객체도 가리키고 있지 않음을 표시합니다. API에서는 대개 객체를 기대했지만, 어떤 적합한 객체도 존재하지 않을 때 반환합니다.</p> + +<pre class="brush: js">// 정의되지 않고 초기화된 적도 없는 foo +foo; //ReferenceError: foo is not defined + +// 존재하지만 값이나 자료형이 존재하지 않는 foo +var foo = null; +foo; //null +</pre> + +<h3 id="null과_undefined의_차이"><code>null</code>과 <code>undefined</code>의 차이</h3> + +<p><code>null</code> 또는 <code>undefined</code>를 검사할 때, <a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">동등 연산자(==)와 일치 연산자(===)의 차이</a>를 주의하세요. 동등 연산자는 자료형 변환을 수행합니다.</p> + +<pre class="brush: js">typeof null // "object" (하위호환 유지를 위해 "null"이 아님) +typeof undefined // "undefined" +null === undefined // false +null == undefined // true +null === null // true +null == null // true +!null // true +isNaN(1 + null) // false +isNaN(1 + undefined) // true</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-null-value', 'null value')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.null")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("undefined")}}</li> + <li>{{jsxref("NaN")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/number/epsilon/index.html b/files/ko/web/javascript/reference/global_objects/number/epsilon/index.html new file mode 100644 index 0000000000..730fd8ae87 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/number/epsilon/index.html @@ -0,0 +1,61 @@ +--- +title: Number.EPSILON +slug: Web/JavaScript/Reference/Global_Objects/Number/EPSILON +tags: + - ECMAScript6 + - JavaScript + - Number + - 속성 +translation_of: Web/JavaScript/Reference/Global_Objects/Number/EPSILON +--- +<div>{{JSRef}}</div> + +<p> <strong><code>Number.EPSILON</code></strong> 속성(property)은 {{jsxref("Number")}} 형으로 표현될 수 있는 1과 1보다 큰 값 중에서 가장 작은 값의, 차입니다.</p> + +<p>당신은 이 정적 속성에 접근하기 위하여 {{jsxref("Number")}} 객체를 생성할 필요가 없습니다. <code>Number.EPSILON</code>을 쓰면 됩니다.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="설명">설명</h2> + +<p>이 <code>EPSILON</code> 속성은 대략 <code>2.2204460492503130808472633361816E-16</code> 또는 <code>2<sup>-52</sup></code>의 값을 갖습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="동일성_확인하기">동일성 확인하기</h3> + +<pre class="brush: js">const x = 0.2, y = 0.3, z = 0.1; +let equal = (Math.abs(x - y + z) < Number.EPSILON); +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-number.epsilon', 'Number.EPSILON')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>최초로 정의됨.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.epsilon', 'Number.EPSILON')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.Number.EPSILON")}}</p> + +<h2 id="관련된_문서">관련된 문서</h2> + +<ul> + <li>이 속성을 가지고 있는 {{jsxref("Number")}} 객체</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/number/index.html b/files/ko/web/javascript/reference/global_objects/number/index.html new file mode 100644 index 0000000000..2a2592dcc8 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/number/index.html @@ -0,0 +1,177 @@ +--- +title: Number +slug: Web/JavaScript/Reference/Global_Objects/Number +tags: + - JavaScript + - Number + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number +--- +<div>{{JSRef}}</div> + +<p><strong><code>Number</code></strong> 객체는 숫자 값으로 작업할 수 있게 해주는 래퍼<sup>wrapper</sup> 객체입니다. <code>Number</code> 객체는 <strong><code>Number()</code> 생성자</strong>를 사용하여 만듭니다. 원시 숫자 자료형은 <strong><code>Number()</code> 함수</strong>를 사용해 생성합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">new Number(<em>value</em>); +var <em>a</em> = new Number('123'); // a === 123은 false +var <em>b</em> = Number('123'); // b === 123은 true +<em>a</em> instanceof Number; // true +<em>b</em> instanceof Number; // false</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>value</code></dt> + <dd>생성할 객체의 숫자 값.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p><code>Number</code> 객체의 주된 용도는 다음과 같습니다.</p> + +<ul> + <li>만약 인수를 숫자로 변환할 수 없으면 {{jsxref("NaN")}}을 리턴합니다.</li> + <li>생성자로써 사용하지 않으면({{jsxref("Operators/new", "new")}} 연산자를 사용하지 않으면) <code>Number</code>를 사용하여 형변환을 할 수 있습니다.</li> +</ul> + +<h2 id="속성">속성</h2> + +<dl> + <dt>{{jsxref("Number.EPSILON")}}</dt> + <dd>두 개의 표현 가능한 숫자 사이의 최소 간격.</dd> + <dt>{{jsxref("Number.MAX_SAFE_INTEGER")}}</dt> + <dd>JavaScript에서 안전한 최대 정수. (<code>2<sup>53</sup> - 1</code>)</dd> + <dt>{{jsxref("Number.MAX_VALUE")}}</dt> + <dd>표현 가능한 가장 큰 양수.</dd> + <dt>{{jsxref("Number.MIN_SAFE_INTEGER")}}</dt> + <dd>JavaScript에서 안전한 최소 정수. (<code>-(2<sup>53</sup> - 1)</code>)</dd> + <dt>{{jsxref("Number.MIN_VALUE")}}</dt> + <dd>표현 가능한 가장 작은 양수. 즉, 0보다 크지만 0에 가장 가까운 양수.</dd> + <dt>{{jsxref("Number.NaN")}}</dt> + <dd>"숫자가 아님"을 나타내는 특별한 값.</dd> + <dt>{{jsxref("Number.NEGATIVE_INFINITY")}}</dt> + <dd>음의 무한대를 나타내는 특수한 값. 오버플로우 시 반환됩니다.</dd> + <dt>{{jsxref("Number.POSITIVE_INFINITY")}}</dt> + <dd>양의 무한대를 나타내는 특수한 값. 오버플로우 시 반환됩니다.</dd> + <dt>{{jsxref("Number.prototype")}}</dt> + <dd><code>Number</code> 객체에 속성을 추가할 수 있습니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("Number.isNaN()")}}</dt> + <dd>주어진 값이 <code>NaN</code>인지 확인합니다.</dd> + <dt>{{jsxref("Number.isFinite()")}}</dt> + <dd>주어진 값이 유한수 인지 확인합니다.</dd> + <dt>{{jsxref("Number.isInteger()")}}</dt> + <dd>주어진 값이 정수인지 확인합니다.</dd> + <dt>{{jsxref("Number.isSafeInteger()")}}</dt> + <dd>주어진 값이 안전한 정수(<code>-(2<sup>53</sup> - 1)</code>과 <code>2<sup>53</sup> - 1</code> 사이의 정수)인지 확인합니다.</dd> + <dt><s class="obsoleteElement">{{jsxref("Number.toInteger()")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">전달 된 값을 평가하고 이를 정수(혹은 {{jsxref("Infinity", "Infinity")}})로 변환하는데 사용되지만, 제거되었습니다.</s></dd> + <dt>{{jsxref("Number.parseFloat()")}}</dt> + <dd>전역 객체 {{jsxref("parseFloat", "parseFloat()")}}와 동일한 값입니다.</dd> + <dt>{{jsxref("Number.parseInt()")}}</dt> + <dd>전역 객체 {{jsxref("parseInt", "parseInt()")}}와 동일한 값입니다.</dd> +</dl> + +<h2 id="Number_인스턴스"><code>Number</code> 인스턴스</h2> + +<p>모든 <code>Number</code> 인스턴스는 {{jsxref("Number.prototype")}}를 상속합니다. <code>Number</code> 생성자의 프로토타입 객체는 모든 <code>Number</code> 인스턴스에 영향을 미치도록 수정할 수 있습니다.</p> + +<h3 id="메서드_2">메서드</h3> + +<div>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/prototype', 'Methods')}}</div> + +<h2 id="예제">예제</h2> + +<h3 id="Number_객체를_사용해_숫자형_변수에_할당"><code>Number</code> 객체를 사용해 숫자형 변수에 할당</h3> + +<p>다음 예제에서는 <code>Number</code> 객체의 속성을 사용하여, 여러 숫자 변수에 값을 할당합니다:</p> + +<pre class="brush: js">var biggestNum = Number.MAX_VALUE; +var smallestNum = Number.MIN_VALUE; +var infiniteNum = Number.POSITIVE_INFINITY; +var negInfiniteNum = Number.NEGATIVE_INFINITY; +var notANum = Number.NaN; +</pre> + +<h3 id="Number의_정수_범위"><code>Number</code>의 정수 범위</h3> + +<p>다음 예제는 <code>Number</code> 객체가 표현할 수 있는 정수의 최소값과 최대값을 보여줍니다. (자세한 내용은 ECMAScript 표준, <em><a href="https://tc39.github.io/ecma262/#sec-ecmascript-language-types-number-type">6.1.6 The Number Type</a> 장을 참고하세요)</em></p> + +<pre class="brush: js">var biggestInt = 9007199254740992; +var smallestInt = -9007199254740992; +</pre> + +<p>JSON으로 직렬화한 데이터를 읽을 때, 위의 범위를 벗어나는 수는 JSON 분석기의 <code>Number</code> 형변환 시 손상될 수 있습니다. 이 때는 {{jsxref("String")}}을 대신 사용하는 것도 방법입니다.</p> + +<h3 id="Number를_사용해_Date_객체_숫자로_변환"><code>Number</code>를 사용해 <code>Date</code> 객체 숫자로 변환</h3> + +<p>다음 예제는 <code>Number</code>를 함수로 사용하여 {{jsxref("Date")}} 객체를 숫자 값으로 변환합니다.</p> + +<pre class="brush: js">var d = new Date('December 17, 1995 03:24:00'); +console.log(Number(d)); +</pre> + +<p><code>819199440000</code>가 기록됩니다.</p> + +<h3 id="숫자형_문자열에서_숫자로_변환">숫자형 문자열에서 숫자로 변환</h3> + +<pre class="brush: js">Number('123') // 123 +Number('12.3') // 12.3 +Number('123e-1') // 12.3 +Number('') // 0 +Number(null) // 0 +Number('0x11') // 17 +Number('0b11') // 3 +Number('0o11') // 9 +Number('foo') // NaN +Number('100a') // NaN</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.7', 'Number')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-number-objects', 'Number')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New methods and properties added: ({{jsxref("Number.EPSILON", "EPSILON")}}, {{jsxref("Number.isFinite", "isFinite")}}, {{jsxref("Number.isInteger", "isInteger")}}, {{jsxref("Number.isNaN", "isNaN")}}, {{jsxref("Number.parseFloat", "parseFloat")}}, {{jsxref("Number.parseInt", "parseInt")}})</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number-objects', 'Number')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> +<p>{{Compat("javascript.builtins.Number")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("NaN")}}</li> + <li>{{jsxref("Math")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/number/isfinite/index.html b/files/ko/web/javascript/reference/global_objects/number/isfinite/index.html new file mode 100644 index 0000000000..13c76c4d8d --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/number/isfinite/index.html @@ -0,0 +1,90 @@ +--- +title: Number.isFinite() +slug: Web/JavaScript/Reference/Global_Objects/Number/isFinite +tags: + - JavaScript + - Method + - Number + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number/isFinite +--- +<div>{{JSRef}}</div> + +<p><strong><code>Number.isFinite()</code></strong> 메서드는 주어진 값이 유한수인지 판별합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-isfinite.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Number.isFinite(<var>value</var>)</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>value</code></dt> + <dd>유한수인지 판별할 값.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>유한수 여부에 대한 {{jsxref("Boolean")}} 값.</p> + +<h2 id="설명">설명</h2> + +<p>전역 함수 {{jsxref("isFinite", "isFinite()")}}와 비교했을 때, <code>Number.isFinite()</code> 메서드는 매개변수를 숫자로 변환하지 않습니다. 즉 값이 숫자이며 동시에 유한수일 때만 <code>true</code>를 반환합니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">Number.isFinite(Infinity); // false +Number.isFinite(NaN); // false +Number.isFinite(-Infinity); // false + +Number.isFinite(0); // true +Number.isFinite(2e64); // true + +Number.isFinite('0'); // false + // 전역함수 isFinite('0')라면 true +Number.isFinite(null); // false + // 전역함수 isFinite(null)라면 true +</pre> + +<h2 id="폴리필">폴리필</h2> + +<pre class="brush: js">if (Number.isFinite === undefined) Number.isFinite = function(value) { + return typeof value === 'number' && isFinite(value); +}</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-number.isfinite', 'Number.isInteger')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.isfinite', 'Number.isInteger')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("javascript.builtins.Number.isFinite")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>메서드가 속한 {{jsxref("Number")}} 객체.</li> + <li>전역 함수 {{jsxref("isFinite")}}.</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/number/isinteger/index.html b/files/ko/web/javascript/reference/global_objects/number/isinteger/index.html new file mode 100644 index 0000000000..c2be9f56f1 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/number/isinteger/index.html @@ -0,0 +1,96 @@ +--- +title: Number.isInteger() +slug: Web/JavaScript/Reference/Global_Objects/Number/isInteger +tags: + - JavaScript + - Method + - Number + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number/isInteger +--- +<div>{{JSRef}}</div> + +<p><strong><code>Number.isInteger()</code> </strong>메서드는 주어진 값이 정수인지 판별합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-isinteger.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Number.isInteger(v<var>alue</var>)</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>value</code></dt> + <dd>정수인지 확인하려는 값.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 값의 정수 여부를 나타내는 {{jsxref("Boolean")}}.</p> + +<h2 id="설명">설명</h2> + +<p>매개변수의 값이 정수면 <code>true</code>를, 아니면 <code>false</code>를 반환합니다. 값이 {{jsxref("NaN")}}이거나 {{jsxref("Infinity")}}여도 <code>false</code>를 반환합니다.</p> + +<h2 id="예제">예제</h2> + +<pre>Number.isInteger(0); // true +Number.isInteger(1); // true +Number.isInteger(-100000); // true +Number.isInteger(99999999999999999999999); // true + +Number.isInteger(0.1); // false +Number.isInteger(Math.PI); // false + +Number.isInteger(NaN); // false +Number.isInteger(Infinity); // false +Number.isInteger(-Infinity); // false +Number.isInteger('10'); // false +Number.isInteger(true); // false +Number.isInteger(false); // false +Number.isInteger([1]); // false +</pre> + +<h2 id="폴리필">폴리필</h2> + +<pre class="brush: js">Number.isInteger = Number.isInteger || function(value) { + return typeof value === "number" && + isFinite(value) && + Math.floor(value) === value; +}; +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-number.isinteger', 'Number.isInteger')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.isinteger', 'Number.isInteger')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("javascript.builtins.Number.isInteger")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>메서드가 속한 {{jsxref("Number")}} 객체.</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/number/isnan/index.html b/files/ko/web/javascript/reference/global_objects/number/isnan/index.html new file mode 100644 index 0000000000..ff5ae793de --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/number/isnan/index.html @@ -0,0 +1,100 @@ +--- +title: Number.isNaN() +slug: Web/JavaScript/Reference/Global_Objects/Number/isNaN +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Number + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number/isNaN +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><strong><code>Number.isNaN()</code></strong> 메서드는 주어진 값이 {{jsxref("NaN")}}인지 판별합니다.</span> 기존부터 존재한 전역 {{jsxref("isNaN", "isNaN()")}} 함수의 더 엄격한 버전입니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-isnan.html", "taller")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Number.isNaN(v<var>alue</var>)</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>value</code></dt> + <dd>{{jsxref("NaN")}}인지 판별할 값.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 값의 유형이 {{jsxref("Number")}}이고 값이 {{jsxref("NaN")}}이면 <code>true</code>, 아니면 <code>false</code>.</p> + +<h2 id="설명">설명</h2> + +<p>{{jsxref("NaN")}}이 <code>NaN</code>인지 계산할 때, 두 동일 연산자 <code>==</code>과 <code>===</code> 모두 <code>false</code>로 평가되므로 값의 <code>NaN</code> 여부를 알아내려면 <code>Number.isNaN()</code>이 필요합니다. 이 상황은 다른 모든 JavaScript와 다른 특별한 경우입니다.</p> + +<p>전역 {{jsxref("isNaN", "isNaN()")}} 함수와 달리, <code>Number.isNaN()</code>은 강제로 매개변수를 숫자로 변환하는 문제를 겪지 않습니다. 이는 이제 보통{{jsxref("NaN")}}으로 변환됐을 값이 안전하게 전달되지만, 실제로는 {{jsxref("NaN")}}과 같은 값이 아님을 의미합니다. 이는 또한 오직 숫자형이고 또한 {{jsxref("NaN")}}인 값만이 <code>true</code>를 반환함을 뜻합니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">Number.isNaN(NaN); // true +Number.isNaN(Number.NaN); // true +Number.isNaN(0 / 0) // true + +// 예를 들면 이들은 global isNaN()으로는 true가 됐을 것임 +Number.isNaN("NaN"); // false +Number.isNaN(undefined); // false +Number.isNaN({}); // false +Number.isNaN("blabla"); // false + +// 모두 +Number.isNaN(true); +Number.isNaN(null); +Number.isNaN(37); +Number.isNaN("37"); +Number.isNaN("37.37"); +Number.isNaN(""); +Number.isNaN(" "); +</pre> + +<h2 id="폴리필">폴리필</h2> + +<pre class="brush: js">Number.isNaN = Number.isNaN || function(value) { + return value !== value; +}</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-number.isnan', 'Number.isnan')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.isnan', 'Number.isnan')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.Number.isNaN")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Number")}}</li> + <li>{{jsxref("isNaN", "isNaN()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/number/issafeinteger/index.html b/files/ko/web/javascript/reference/global_objects/number/issafeinteger/index.html new file mode 100644 index 0000000000..8c1af0e54d --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/number/issafeinteger/index.html @@ -0,0 +1,100 @@ +--- +title: Number.isSafeInteger() +slug: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Number + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger +--- +<div>{{JSRef}}</div> + +<p><strong><code>Number.isSafeInteger()</code></strong> 메서드는 전달된 값이 안전한 정숫값인지 확인합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-issafeinteger.html")}}</div> + + + +<p>안전한 정숫값이란 다음과 같습니다.</p> + +<ul> + <li>IEEE-754 배정도수 형태로 정확히 표현될 수 있는 수이고</li> + <li>IEEE-754 표현에 맞게 반올림하는 다른 정수의 결과가 아닌 IEEE-754 표현.</li> +</ul> + +<p>예를 들어, <code>2<sup>53</sup> - 1</code>은 안전한 정수입니다. 이 정수는 정확히 표현될 수 있으며, IEEE-754 반올림 모드에서 다른 정숫값이 이 값을 반올림하지 않습니다. 반면에, <code>2<sup>53</sup></code> 는 안전하지 않은 정수입니다. 이 정수는 정확히 IEEE-754로 표현될 수 있지만, 정수 <code>2<sup>53</sup> + 1</code>은 IEEE-754로 직접 표현될 수 없으며 가까운 수로 반올림하는 것과 0으로 반올림하는 것으로 <code>2<sup>53 </sup></code>을 반올림합니다.</p> + +<p>안전한 정숫값은 <code>-(2<sup>53</sup> - 1)</code> 부터 <code>2<sup>53</sup> - 1</code> 사이의 모든 정수값으로 구성됩니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Number.isSafeInteger(<var>testValue</var>) +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>testValue</code></dt> + <dd>안전한 정수인지 확인할 값.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 값이 안전한 정숫값인지 나타내는 {{jsxref("Boolean")}}.</p> + +<h2 id="예시">예시</h2> + +<pre class="brush: js">Number.isSafeInteger(3); // true +Number.isSafeInteger(Math.pow(2, 53)); // false +Number.isSafeInteger(Math.pow(2, 53) - 1); // true +Number.isSafeInteger(NaN); // false +Number.isSafeInteger(Infinity); // false +Number.isSafeInteger('3'); // false +Number.isSafeInteger(3.1); // false +Number.isSafeInteger(3.0); // true +</pre> + +<h2 id="폴리필">폴리필</h2> + +<pre class="brush: js">Number.isSafeInteger = Number.isSafeInteger || function (value) { + return Number.isInteger(value) && Math.abs(value) <= Number.MAX_SAFE_INTEGER; +}; +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-number.issafeinteger', 'Number.isSafeInteger')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.issafeinteger', 'Number.isSafeInteger')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Number.isSafeInteger")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>메서드가 속한 {{jsxref("Number")}} 객체.</li> + <li>{{jsxref("Number.MIN_SAFE_INTEGER")}}</li> + <li>{{jsxref("Number.MAX_SAFE_INTEGER")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/number/max_safe_integer/index.html b/files/ko/web/javascript/reference/global_objects/number/max_safe_integer/index.html new file mode 100644 index 0000000000..c8b4d679d0 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/number/max_safe_integer/index.html @@ -0,0 +1,76 @@ +--- +title: Number.MAX_SAFE_INTEGER +slug: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER +tags: + - ECMAScript 2015 + - JavaScript + - Number + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER +--- +<div>{{JSRef}}</div> + +<p><strong><code>Number.MAX_SAFE_INTEGER</code></strong> 상수는 JavaScript에서 안전한 최대 정수값을 나타냅니다. (<code>2<sup>53</sup> - 1</code>).</p> + +<div>{{EmbedInteractiveExample("pages/js/number-maxsafeinteger.html")}}</div> + + + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="설명">설명</h2> + +<p><code>MAX_SAFE_INTEGER</code> 상수는 <code>9007199254740991</code>(9,007,199,254,740,991 또는 약 9000조)의 값을 갖고 있습니다. 이 값의 이유는 JavaScript가 <a href="http://en.wikipedia.org/wiki/IEEE_floating_point">IEEE 754</a>에 기술된 <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">배정밀도 부동소숫점 형식 숫자체계</a>를 사용하기 때문으로, 이로 인해 <code>-(2<sup>53</sup> - 1)</code>과 <code>2<sup>53</sup> - 1</code> 사이의 수만 안전하게 표현할 수 있습니다.</p> + +<p>여기서의 안전함이란 정수를 정확하고 올바르게 비교할 수 있음을 의미합니다. 예를 들어 <code>Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2</code>는 참으로 평가되며 이는 수학적으로 올바르지 않습니다. 더 자세한 내용은 {{jsxref("Number.isSafeInteger()")}}를 참고하세요.</p> + +<p><code>MAX_SAFE_INTEGER</code>는 {{jsxref("Number")}}의 정적 속성이기 때문에, 직접 생성한 {{jsxref("Number")}} 객체의 속성이 아니라 <code>Number.MAX_SAFE_INTEGER</code> 형식으로 사용해야 합니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">Number.MAX_SAFE_INTEGER // 9007199254740991 +Number.MAX_SAFE_INTEGER * Number.EPSILON // 2 because in floating points, the value is actually the decimal trailing "1" + // except for in subnormal precision cases such as zero +</pre> + +<h2 id="폴리필">폴리필</h2> + +<pre class="brush: js"><code>if (!Number.MAX_SAFE_INTEGER) { + Number.MAX_SAFE_INTEGER = Math.pow(2, 53) - 1; // 9007199254740991 +}</code></pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-number.max_safe_integer', 'Number.MAX_SAFE_INTEGER')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.max_safe_integer', 'Number.MAX_SAFE_INTEGER')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Number.MAX_SAFE_INTEGER")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Number.MIN_SAFE_INTEGER")}}</li> + <li>{{jsxref("Number.isSafeInteger()")}}</li> + <li>{{jsxref("BigInt")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/number/max_value/index.html b/files/ko/web/javascript/reference/global_objects/number/max_value/index.html new file mode 100644 index 0000000000..c80ae8f84a --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/number/max_value/index.html @@ -0,0 +1,81 @@ +--- +title: Number.MAX_VALUE +slug: Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE +tags: + - JavaScript + - Number + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE +--- +<div>{{JSRef}}</div> + +<p><strong><code>Number.MAX_VALUE</code></strong> 속성은 JavaScript가 표현할 수 있는 제일 큰 양의 숫자 값을 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-maxvalue.html")}}</div> + + + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="설명">설명</h2> + +<p><code>MAX_VALUE</code>의 값은 약 <code>1.79E+308</code>, 2<sup>1024</sup>입니다. <code>MAX_VALUE</code>보다 큰 값은 {{jsxref("Infinity")}}로 표현됩니다.</p> + +<p><code>MAX_VALUE</code>는 {{jsxref("Number")}}의 정적 속성이기 때문에, 직접 생성한 {{jsxref("Number")}} 객체의 속성이 아니라 <code>Number.MAX_VALUE</code> 형식으로 사용해야 합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="MAX_VALUE_사용하기"><code>MAX_VALUE</code> 사용하기</h3> + +<p>다음 코드는 두 개의 수를 곱합니다. 만약 결과가 <code>MAX_VALUE</code> 이하면 <code>func1</code>을 호출하고, 그렇지 않으면 <code>func2</code>를 호출합니다.</p> + +<pre class="brush: js">if (num1 * num2 <= Number.MAX_VALUE) { + func1(); +} else { + func2(); +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.7.3.2', 'Number.MAX_VALUE')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-number.max_value', 'Number.MAX_VALUE')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.max_value', 'Number.MAX_VALUE')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Number.MAX_VALUE")}}</p> + +<h2 id="참고">참고</h2> + +<ul> + <li>{{jsxref("Number.MIN_VALUE")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/number/min_safe_integer/index.html b/files/ko/web/javascript/reference/global_objects/number/min_safe_integer/index.html new file mode 100644 index 0000000000..67efd0e681 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/number/min_safe_integer/index.html @@ -0,0 +1,66 @@ +--- +title: Number.MIN_SAFE_INTEGER +slug: Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER +tags: + - ECMAScript 2015 + - JavaScript + - Number + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER +--- +<div>{{JSRef}}</div> + +<p><strong><code>Number.MIN_SAFE_INTEGER</code></strong> 상수는 JavaScript에서 안전한 최소 정수값을 나타냅니다. (<code>-(2<sup>53</sup> - 1)</code>)</p> + +<div>{{EmbedInteractiveExample("pages/js/number-min-safe-integer.html")}}</div> + + + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="설명">설명</h2> + +<p><code>MIN_SAFE_INTEGER</code> 상수는 <code>-9007199254740991</code>(-9,007,199,254,740,991 또는 약 -9000조)의 값을 갖고 있습니다. 이 값의 이유는 JavaScript가 <a href="http://en.wikipedia.org/wiki/IEEE_floating_point">IEEE 754</a>에 기술된 <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">배정밀도 부동소숫점 형식 숫자체계</a>를 사용하기 때문으로, 이로 인해 <code>-(2<sup>53</sup> - 1)</code>과 <code>2<sup>53</sup> - 1</code> 사이의 수만 안전하게 표현할 수 있습니다.</p> + +<p><code>MIN_SAFE_INTEGER</code>는 {{jsxref("Number")}}의 정적 속성이기 때문에, 직접 생성한 {{jsxref("Number")}} 객체의 속성이 아니라 <code>Number.MIN_SAFE_INTEGER</code> 형식으로 사용해야 합니다.</p> + +<h2 id="설명_2">설명</h2> + +<pre class="brush: js">Number.MIN_SAFE_INTEGER // -9007199254740991 +-(Math.pow(2, 53) - 1) // -9007199254740991 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-number.min_safe_integer', 'Number.MIN_SAFE_INTEGER')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.min_safe_integer', 'Number.MIN_SAFE_INTEGER')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Number.MIN_SAFE_INTEGER")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Number.MAX_SAFE_INTEGER")}}</li> + <li>{{jsxref("Number.isSafeInteger()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/number/min_value/index.html b/files/ko/web/javascript/reference/global_objects/number/min_value/index.html new file mode 100644 index 0000000000..66b4985942 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/number/min_value/index.html @@ -0,0 +1,84 @@ +--- +title: Number.MIN_VALUE +slug: Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE +tags: + - JavaScript + - Number + - Property + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE +--- +<div>{{JSRef}}</div> + +<p><strong><code>Number.MIN_VALUE</code></strong> 속성은 JavaScript가 표현할 수 있는 제일 작은 양의 숫자 값을 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-min-value.html")}}</div> + + + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="설명">설명</h2> + +<p><code>MIN_VALUE</code> 속성은 JavaScript에서 표현할 수 있는, 0에 가장 가깝지만 음수는 아닌 수입니다.</p> + +<p><code>MIN_VALUE</code>의 값은 약 <code>5e-324</code>입니다. <code>MIN_VALUE</code>보다 작은 값("언더플로우 값")은 0으로 변환됩니다.</p> + +<p><code>MIN_VALUE</code>는 {{jsxref("Number")}}의 정적 속성이기 때문에, 직접 생성한 {{jsxref("Number")}} 객체의 속성이 아니라 <code>Number.MIN_VALUE</code> 형식으로 사용해야 합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="MIN_VALUE_사용하기"><code>MIN_VALUE</code> 사용하기</h3> + +<p>다음 코드는 숫자를 두 개의 수를 받아 나누기 연산을 합니다. 만약 결과가 <code>MIN_VALUE</code> 보다 크거나 같으면 <code>func1</code> 함수를 호출하고, 그렇지 않으면 <code>func2</code> 함수를 호출합니다.</p> + +<pre class="brush: js">if (num1 / num2 >= Number.MIN_VALUE) { + func1(); +} else { + func2(); +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.7.3.3', 'Number.MIN_VALUE')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-number.min_value', 'Number.MIN_VALUE')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.min_value', 'Number.MIN_VALUE')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Number.MIN_VALUE")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Number.MAX_VALUE")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/number/nan/index.html b/files/ko/web/javascript/reference/global_objects/number/nan/index.html new file mode 100644 index 0000000000..348820c376 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/number/nan/index.html @@ -0,0 +1,62 @@ +--- +title: Number.NaN +slug: Web/JavaScript/Reference/Global_Objects/Number/NaN +tags: + - JavaScript + - Number + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Number/NaN +--- +<div>{{JSRef}}</div> + +<p><strong><code>Number.NaN</code></strong> 속성은 Not-A-Number(숫자가 아님)를 나타냅니다. {{jsxref("NaN")}}과 같습니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/number-nan.html")}}<br> + 정적 속성이므로 접근하기 위해 {{jsxref("Number")}} 객체를 생성할 필요는 없습니다. (<code>Number.NaN</code> 사용)</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>초기 정의. JavaScript 1.1에서 구현됨.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.7.3.4', 'Number.NaN')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-number.nan', 'Number.NaN')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.nan', 'Number.NaN')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("javascript.builtins.Number.NaN")}}</div> + +<div id="compat-desktop"> </div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>전역 {{jsxref("NaN")}} 객체.</li> + <li>본 속성이 속한 {{jsxref("Number")}} 객체.</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/number/negative_infinity/index.html b/files/ko/web/javascript/reference/global_objects/number/negative_infinity/index.html new file mode 100644 index 0000000000..d6567e687e --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/number/negative_infinity/index.html @@ -0,0 +1,82 @@ +--- +title: Number.NEGATIVE_INFINITY +slug: Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY +tags: + - JavaScript + - Number + - Property + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY +--- +<div>{{JSRef}}</div> + +<p><strong><code>Number.NEGATIVE_INFINITY</code></strong> 속성은 음의 무한대를 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-negative-infinity.html")}}</div> + + + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="설명">설명</h2> + +<p><code>Number.NEGATIVE_INFINITY</code>의 값은 전역 객체 {{jsxref("Infinity")}} 속성의 부호를 바꾼 값과 동일합니다.</p> + +<p><code>NEGATIVE_INFINITY</code>는 수학에서의 무한대와 약간 다릅니다.</p> + +<ul> + <li>{{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}를 포함한 아무 양의 수와 <code>NEGATIVE_INFINITY</code>를 곱한 결과는 <code>NEGATIVE_INFINITY</code>입니다.</li> + <li><code>NEGATIVE_INFINITY</code>를 포함한 아무 음의 수와 <code>NEGATIVE_INFINITY</code>를 곱한 결과는 {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}입니다.</li> + <li>아무 양의 수를 <code>NEGATIVE_INFINITY</code>로 나눈 결과는 음의 부호를 가진 0입니다.</li> + <li>아무 음의 수를 <code>NEGATIVE_INFINITY</code>로 나눈 결과는 0입니다.</li> + <li>0을 <code>NEGATIVE_INFINITY</code>로 나눈 결과는 {{jsxref("NaN")}}입니다.</li> + <li>{{jsxref("NaN")}}에 <code>NEGATIVE_INFINITY</code>를 곱한 결과는 {{jsxref("NaN")}}입니다.</li> + <li><code>NEGATIVE_INFINITY</code>를, <code>NEGATIVE_INFINITY</code>를 제외한 아무 음의 수로 나눈 결과는 {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}입니다.</li> + <li><code>NEGATIVE_INFINITY</code>를, {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}를 제외한 아무 양의 수로 나눈 결과는 <code>NEGATIVE_INFINITY</code>입니다.</li> + <li><code>NEGATIVE_INFINITY</code>를 <code>NEGATIVE_INFINITY</code> 또는 {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}로 나눈 결과는 {{jsxref("NaN")}}입니다.</li> +</ul> + +<p><code>Number.NEGATIVE_INFINITY</code>를 사용해 성공 시 유한수를 반환하는 식의 결과를 판별할 수 있습니다. 그러나 이런 경우 {{jsxref("isFinite", "isFinite()")}}를 사용하는 편이 더 적합합니다.</p> + +<p><code>NEGATIVE_INFINITY</code>는 {{jsxref("Number")}}의 정적 속성이기 때문에, 직접 생성한 {{jsxref("Number")}} 객체의 속성이 아니라 <code>Number.NEGATIVE_INFINITY</code>의 형식으로 사용해야 합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="NEGATIVE_INFINITY_사용하기"><code>NEGATIVE_INFINITY</code> 사용하기</h3> + +<p>다음 코드에서 <code>smallNumber</code>는 JavaScript의 최솟값보다 작은 값을 할당받습니다. {{jsxref("Statements/if...else", "if")}} 문이 실행되면, <code>smallNumber</code>의 값이 <code>-Infinity</code>이므로 <code>smallNumber</code>는 계산에 좀 더 적합한 값을 다시 할당합니다.</p> + +<pre class="brush: js notranslate">var smallNumber = (-Number.MAX_VALUE) * 2; + +if (smallNumber === Number.NEGATIVE_INFINITY) { + smallNumber = returnFinite(); +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Number.NEGATIVE_INFINITY")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li> + <li>{{jsxref("Number.isFinite()")}}</li> + <li>{{jsxref("Infinity")}}</li> + <li>{{jsxref("isFinite", "isFinite()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/number/parsefloat/index.html b/files/ko/web/javascript/reference/global_objects/number/parsefloat/index.html new file mode 100644 index 0000000000..763c28a42d --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/number/parsefloat/index.html @@ -0,0 +1,79 @@ +--- +title: Number.parseFloat() +slug: Web/JavaScript/Reference/Global_Objects/Number/parseFloat +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Number +translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseFloat +--- +<div>{{JSRef}}</div> + +<p><strong><code>Number.parseFloat()</code></strong> 메서드는 문자열을 분석해 부동소수점 실수로 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-parsefloat.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Number.parseFloat(<var>string</var>)</pre> + +<h3 id="매개변수">매개변수</h3> + +<p>{{page("ko/docs/Web/JavaScript/Reference/Global_Objects/parseFloat", "매개변수")}}</p> + +<h3 id="반환_값">반환 값</h3> + +<p>{{page("ko/docs/Web/JavaScript/Reference/Global_Objects/parseFloat", "반환 값")}}</p> + +<h2 id="설명">설명</h2> + +<p><code>Number.parseFloat()</code> 메서드는 전역 {{jsxref("parseFloat", "parseFloat()")}} 함수와 같은 기능을 가지고 있습니다.</p> + +<pre>Number.parseFloat === parseFloat; // true</pre> + +<p><code>Number.parseFloat()는</code> ECMAScript 2015에서 전역 범위의 모듈화를 위해 추가됐습니다. 상세한 정보와 예제는 {{jsxref("parseFloat", "parseFloat()")}}를 참고하세요.</p> + +<h2 id="폴리필">폴리필</h2> + +<pre class="brush: js">if (Number.parseFloat === undefined) { + Number.parseFloat = parseFloat; +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-number.parsefloat', 'Number.parseFloat')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.parsefloat', 'Number.parseFloat')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<div>{{Compat("javascript.builtins.Number.parseFloat")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>메서드가 속한 {{jsxref("Number")}} 객체.</li> + <li>전역 {{jsxref("parseFloat", "parseFloat()")}} 메서드.</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/number/parseint/index.html b/files/ko/web/javascript/reference/global_objects/number/parseint/index.html new file mode 100644 index 0000000000..0b0a052016 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/number/parseint/index.html @@ -0,0 +1,78 @@ +--- +title: Number.parseInt() +slug: Web/JavaScript/Reference/Global_Objects/Number/parseInt +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Number + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseInt +--- +<div>{{JSRef}}</div> + +<p><strong><code>Number.parseInt()</code></strong> 메서드는 문자열을 분석하고 특정 진수를 사용한 정수로 변환해 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-parseint.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Number.parseInt(<var>string,</var>[ <var>radix</var>]) +</pre> + +<h3 id="매개변수">매개변수</h3> + +<div>{{page("ko/docs/Web/JavaScript/Reference/Global_Objects/parseInt", "매개변수")}}</div> + +<h3 id="반환_값">반환 값</h3> + +<p>{{page("ko/docs/Web/JavaScript/Reference/Global_Objects/parseInt", "반환 값")}}</p> + +<h2 id="설명">설명</h2> + +<p><code>Number.parseInt()</code> 메서드는 전역 {{jsxref("parseInt", "parseInt()")}} 함수와 같은 기능을 가지고 있습니다.</p> + +<pre class="brush: js">Number.parseInt === parseInt; // true</pre> + +<p><code>Number.parseInt()</code>는 ECMAScript 2015에서 전역 범위의 모듈화를 위해 추가됐습니다. 상세한 정보와 예제는 {{jsxref("parseInt", "parseInt()")}}를 참고하세요.</p> + +<h2 id="폴리필">폴리필</h2> + +<pre class="brush: js">if (Number.parseInt === undefined) { + Number.parseInt = window.parseInt; +}</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-number.parseint', 'Number.parseInt')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.parseint', 'Number.parseInt')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("javascript.builtins.Number.parseInt")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>메서드가 속한 {{jsxref("Number")}} 객체.</li> + <li>전역 {{jsxref("parseInt", "parseInt()")}} 메서드.</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/number/positive_infinity/index.html b/files/ko/web/javascript/reference/global_objects/number/positive_infinity/index.html new file mode 100644 index 0000000000..b1012fcdbf --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/number/positive_infinity/index.html @@ -0,0 +1,82 @@ +--- +title: Number.POSITIVE_INFINITY +slug: Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY +tags: + - JavaScript + - Number + - Property + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY +--- +<div>{{JSRef}}</div> + +<p><strong><code>Number.POSITIVE_INFINITY</code></strong> 속성은 양의 무한대를 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-positive-infinity.html")}}</div> + + + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="설명">설명</h2> + +<p><code>Number.POSITIVE_INFINITY</code>의 값은 전역 객체 {{jsxref("Infinity")}} 속성의 값과 동일합니다.</p> + +<p><code>POSITIVE_INFINITY</code>는 수학에서의 무한대와 약간 다릅니다.</p> + +<ul> + <li><code>POSITIVIE_INFINITY</code>를 포함한 아무 양의 수와 <code>POSITIVE_INFINITY</code>를 곱한 결과는 <code>POSITIVE_INFINITY</code>입니다.</li> + <li>{{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}를 포함한 아무 음의 수와 <code>POSITIVE_INFINITY</code>를 곱한 결과는 {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}입니다.</li> + <li>아무 양의 수를 <code>POSITIVE_INFINITY</code>로 나눈 결과는 0입니다.</li> + <li>아무 음의 수를 <code>POSITIVE_INFINITY</code>로 나눈 결과는 음의 부호를 가진 0입니다.</li> + <li>0을 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">POSITIVE_INFINITY</span></font>로 나눈 결과는 {{jsxref("NaN")}}입니다.</li> + <li>{{jsxref("NaN")}}에 <code>POSITIVE_INFINITY</code>를 곱한 결과는 {{jsxref("NaN")}}입니다.</li> + <li><code>POSITIVE_INFINITY</code>를, {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}를 제외한 아무 음의 수로 나눈 결과는 {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}입니다.</li> + <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">POSITIVE_INFINITY<code>를</code></span></font>, <code>POSITIVE_INFINITY</code>를 제외한 아무 양의 수로 나눈 결과는 <code>NEGATIVE_INFINITY</code>입니다.</li> + <li><code>POSITIVE_INFINITY</code>를 {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}} 또는 <code>POSITIVE_INFINITY</code>로 나눈 결과는 {{jsxref("NaN")}}입니다.</li> +</ul> + +<p><code>Number.POSITIVE_INFINITY</code>를 사용해 성공 시 유한수를 반환하는 식의 결과를 판별할 수 있습니다. 그러나 이런 경우 {{jsxref("isFinite", "isFinite()")}}를 사용하는 편이 더 적합합니다.</p> + +<p><code>POSITIVE_INFINITY</code>는 {{jsxref("Number")}}의 정적 속성이기 때문에, 직접 생성한 {{jsxref("Number")}} 객체의 속성이 아니라 <code>Number.POSITIVE_INFINITY</code>의 형식으로 사용해야 합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="POSITIVE_INFINITY_사용하기"><code>POSITIVE_INFINITY</code> 사용하기</h3> + +<p>다음 코드에서 <code>smallNumber</code>는 JavaScript의 최댓값보다 큰 값을 할당받습니다. {{jsxref("Statements/if...else", "if")}} 문이 실행되면, <code>bigNumber</code>의 값이 <code>Infinity</code>이므로 <code>bigNumber</code>는 계산에 좀 더 적합한 유한값을 다시 할당합니다.</p> + +<pre class="brush: js notranslate">var bigNumber = (Number.MAX_VALUE) * 2; + +if (bigNumber === Number.POSITIVE_INFINITY) { + bigNumber = returnFinite(); +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.positive_infinity', 'Number.POSITIVE_INFINITY')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Number.POSITIVE_INFINITY")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li> + <li>{{jsxref("Number.isFinite()")}}</li> + <li>{{jsxref("Infinity")}}</li> + <li>{{jsxref("isFinite", "isFinite()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/number/prototype/index.html b/files/ko/web/javascript/reference/global_objects/number/prototype/index.html new file mode 100644 index 0000000000..e9b3f20362 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/number/prototype/index.html @@ -0,0 +1,90 @@ +--- +title: Number.prototype +slug: Web/JavaScript/Reference/Global_Objects/Number/prototype +tags: + - JavaScript + - Number + - Property + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number +--- +<div>{{JSRef}}</div> + +<p><strong><code>Number.prototype</code></strong> 속성은 {{jsxref("Number")}} 생성자의 프로토타입을 나타냅니다.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="설명">설명</h2> + +<p>모든 {{jsxref("Number")}} 인스턴스는 <code>Number.prototype</code>을 상속합니다. {{jsxref("Number")}} 생성자의 프로토타입 객체는 모든 {{jsxref( "Number")}} 인스턴스에 영향을 미치도록 수정할 수 있습니다.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>Number.prototype.constructor</code></dt> + <dd>이 객체의 인스턴스를 생성한 함수를 반환합니다. 기본적으로 {{jsxref("Number")}} 객체 입니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("Number.prototype.toExponential()")}}</dt> + <dd>숫자의 지수표기법 표현을 문자열로 반환합니다.</dd> + <dt>{{jsxref("Number.prototype.toFixed()")}}</dt> + <dd>숫자의 고정소수점 표현을 문자열로 반환합니다.</dd> + <dt>{{jsxref("Number.prototype.toLocaleString()")}}</dt> + <dd>숫자의 표현을 특정 언어에 맞춘 형식의 문자열로 반환합니다. {{jsxref("Object.prototype.toLocaleString()")}} 메서드를 오버라이드 합니다.</dd> + <dt>{{jsxref("Number.prototype.toPrecision()")}}</dt> + <dd>지정한 정밀도로 숫자를 나타내는 문자열을 반환합니다. 고정소수점 혹은 지수표기법으로 표현합니다.</dd> + <dt>{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>지정한 {{jsxref("Number")}} 객체를 나타내는 객체 리터럴을 반환합니다. 이 값을 사용하여 새 객체를 만들 수 있습니다. {{jsxref("Object.prototype.toSource()")}} 메서드를 오버라이드 합니다.</dd> + <dt>{{jsxref("Number.prototype.toString()")}}</dt> + <dd>지정된 기수(기본 10진수)로 지정된 객체를 문자열로 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 오버라이드 합니다.</dd> + <dt>{{jsxref("Number.prototype.valueOf()")}}</dt> + <dd>지정한 객체의 기본 자료형(primitive) 값을 반환합니다. {{jsxref("Object.prototype.valueOf()")}} 메서드를 오버라이드 합니다.</dd> +</dl> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Number.prototype")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Number")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/number/toexponential/index.html b/files/ko/web/javascript/reference/global_objects/number/toexponential/index.html new file mode 100644 index 0000000000..cb24e88364 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/number/toexponential/index.html @@ -0,0 +1,108 @@ +--- +title: Number.prototype.toExponential() +slug: Web/JavaScript/Reference/Global_Objects/Number/toExponential +tags: + - JavaScript + - Method + - Number + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toExponential +--- +<div>{{JSRef}}</div> + +<p><strong><code>toExponential()</code></strong> 메서드는 숫자를 지수 표기법으로 표기해 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-toexponential.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>numObj</var>.toExponential([<var>fractionDigits</var>])</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>fractionDigits</code> {{optional_inline}}</dt> + <dd>소수점 이하로 표현할 자릿수입니다. 기본값은 주어진 값을 나타내는데 필요한 자릿수입니다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 {{jsxref("Number")}} 값을 숫자 한자리와 소수점, 소수점 이하 <code>fractionDigits</code> 자릿수만큼 반올림하여 지수 표기법으로 나타낸 문자열을 반환합니다.</p> + +<h3 id="예외">예외</h3> + +<dl> + <dt>{{jsxref("RangeError")}}</dt> + <dd><code>fractionDigits</code>가 너무 작거나 너무 크면 {{jsxref("RangeError")}} 에러가 발생합니다. <code>fractionDigits</code>가 0에서 20 사이의 값이면 {{jsxref("RangeError")}} 에러는 발생하지 않습니다. 구현에 따라 더 크거나 작은 값도 사용 할 수 있습니다.</dd> + <dt>{{jsxref("TypeError")}}</dt> + <dd>{{jsxref("Number")}}가 아닌 객체가 이 메서드를 실행시키면 {{jsxref("RangeError")}} 에러가 발생합니다.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p><code>fractionDigits</code> 매개변수를 생략하면, 기본적으로 주어진 값을 특정하기 위해 필요한 자릿수만큼이 소수점 이하 자릿수가 됩니다.</p> + +<p>지수나 소수점이 없는 숫자 리터럴에 <code>toExponential()</code> 메서드를 사용하려면, 점 앞에 공백을 두어 점이 소수점으로 해석되는 것을 막도록 합니다.</p> + +<p>주어진 값의 자릿수가 <code>fractionDigits</code> 매개변수보다 크다면, 주어진 값은 <code>fractionDigits</code>에 가까운 자릿수로 반올림되어 표현됩니다. {{jsxref("Number.prototype.toFixed", "toFixed()")}} 메서드의 반올림에 관한 설명이 <code>toExponential()</code> 메서드에도 마찬가지로 적용됩니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="toExponential_사용하기"><code>toExponential</code> 사용하기</h3> + +<pre class="brush: js">var numObj = 77.1234; + +console.log(numObj.toExponential()); // logs 7.71234e+1 +console.log(numObj.toExponential(4)); // logs 7.7123e+1 +console.log(numObj.toExponential(2)); // logs 7.71e+1 +console.log(77.1234.toExponential()); // logs 7.71234e+1 +console.log(77 .toExponential()); // logs 7.7e+1 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>초기 정의. JavaScript 1.5에서 구현됨.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.7.4.6', 'Number.prototype.toExponential')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Number.toExponential")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Number.prototype.toFixed()")}}</li> + <li>{{jsxref("Number.prototype.toPrecision()")}}</li> + <li>{{jsxref("Number.prototype.toString()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/number/tofixed/index.html b/files/ko/web/javascript/reference/global_objects/number/tofixed/index.html new file mode 100644 index 0000000000..cf383f2265 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/number/tofixed/index.html @@ -0,0 +1,109 @@ +--- +title: Number.prototype.toFixed() +slug: Web/JavaScript/Reference/Global_Objects/Number/toFixed +tags: + - JavaScript + - Method + - Number + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toFixed +--- +<div>{{JSRef}}</div> + +<p><code><strong>toFixed()</strong></code> 메서드는 숫자를 고정 소수점 표기법으로 표기해 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-tofixed.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>numObj</var>.toFixed([<var>digits</var>])</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>digits</code> {{optional_inline}}</dt> + <dd>소수점 뒤에 나타날 자릿수. 0 이상 20 이하의 값을 사용할 수 있으며, 구현체에 따라 더 넓은 범위의 값을 지원할 수도 있습니다. 값을 지정하지 않으면 0을 사용합니다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>고정 소수점 표기법을 사용하여 나타낸 수.</p> + +<h3 id="예외">예외</h3> + +<dl> + <dt>{{jsxref("RangeError")}}</dt> + <dd><code>digits</code>가 너무 작거나 너무 클 때. 값이 0과 100사이의 값이라면 {{jsxref("RangeError")}}를 유발하지 않습니다. 구현체에 따라 더 크거나 작은 값을 지원할 수 있습니다.</dd> + <dt>{{jsxref("TypeError")}}</dt> + <dd>{{jsxref("Number")}}가 아닌 객체에서 호출한 경우.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p><code>toFixed()</code>는 {{jsxref("Number")}} 객체를 주어진 <code>digits</code> 만큼의 소수점 이하 자리수를 정확하게 갖는 문자열 표현으로 반환합니다. 소수점 이하가 길면 숫자를 반올림하고, 짧아서 부족할 경우 뒤를 0으로 채울 수 있습니다. 메서드를 호출한 숫자의 크기가 1e+21보다 크다면 {{jsxref("Number.prototype.toString()")}}을 호출하여 받은 지수 표기법 결과를 대신 반환합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="toFixed()_사용하기"><code>toFixed()</code> 사용하기</h3> + +<pre class="brush: js">var numObj = 12345.6789; + +numObj.toFixed(); // Returns '12346': 반올림하며, 소수 부분을 남기지 않습니다. +numObj.toFixed(1); // Returns '12345.7': 반올림합니다. +numObj.toFixed(6); // Returns '12345.678900': 빈 공간을 0으로 채웁니다. +(1.23e+20).toFixed(2); // Returns '123000000000000000000.00' +(1.23e-10).toFixed(2); // Returns '0.00' +2.34.toFixed(1); // Returns '2.3' +2.35.toFixed(1); // Returns '2.4'. 이 경우에는 올림을 합니다. +-2.34.toFixed(1); // Returns -2.3 (연산자의 적용이 우선이기 때문에, 음수의 경우 문자열로 반환하지 않습니다...) +(-2.34).toFixed(1); // Returns '-2.3' (...괄호를 사용할 경우 문자열을 반환합니다.) +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.5.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.7.4.5', 'Number.prototype.toFixed')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Number.toFixed")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Number.prototype.toExponential()")}}</li> + <li>{{jsxref("Number.prototype.toPrecision()")}}</li> + <li>{{jsxref("Number.prototype.toString()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/number/toprecision/index.html b/files/ko/web/javascript/reference/global_objects/number/toprecision/index.html new file mode 100644 index 0000000000..83cf3017e3 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/number/toprecision/index.html @@ -0,0 +1,110 @@ +--- +title: Number.prototype.toPrecision() +slug: Web/JavaScript/Reference/Global_Objects/Number/toPrecision +tags: + - JavaScript + - Method + - Number + - Prototype + - toPrecision +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toPrecision +--- +<div>{{JSRef}}</div> + +<p><strong><code>toPrecision()</code></strong> 메서드는 {{jsxref("Number")}} 객체를 지정된 정밀도로 나타내는 문자열을 반환한다.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-toprecision.html")}}</div> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><var>numObj</var>.toPrecision([<var>precision</var>])</pre> + +<h3 id="파라미터">파라미터</h3> + +<dl> + <dt><code>precision</code></dt> + <dd>선택적 파라미터. 유효 자릿수를 지정하는 정수.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>고정 소수점 또는 지수 표기법의 {{jsxref("Number")}} 객체를 정밀 유효 숫자로 반올림 한 문자열입니다. <code>toPrecision()</code>에도 적용되는 {{jsxref("Number.prototype.toFixed()")}} 메서드에 대한 설명에서 반올림에 대한 설명을 참조하세요.</p> + +<p><code>precision(정밀도)</code> 인수가 생략되면 {{jsxref("Number.prototype.toString()")}}처럼 작동합니다. <code>precision(정밀도)</code> 인수가 정수가 아닌 값이면 가장 가까운 정수로 반올림됩니다.</p> + +<p> </p> + +<h3 id="예외">예외</h3> + +<dl> + <dt>{{jsxref("Global_Objects/RangeError", "RangeError")}}</dt> + <dd><code>precision(정밀도)</code>가 1에서 100 사이가 아닌 경우 {{jsxref("RangeError")}}가 발생합니다. 구현은 더 큰 값과 더 작은 값을 지원할 수 있습니다. ECMA-262는 최대 21 자리의 정밀도 만을 요구합니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<h3 id="toPrecision_사용"><code>toPrecision</code> 사용</h3> + +<pre class="brush: js">var numObj = 5.123456; + +console.log(numObj.toPrecision()); // logs '5.123456' +console.log(numObj.toPrecision(5)); // logs '5.1235' +console.log(numObj.toPrecision(2)); // logs '5.1' +console.log(numObj.toPrecision(1)); // logs '5' + +numObj = 0.000123 + +console.log(numObj.toPrecision()); // logs '0.000123' +console.log(numObj.toPrecision(5)); // logs '0.00012300' +console.log(numObj.toPrecision(2)); // logs '0.00012' +console.log(numObj.toPrecision(1)); // logs '0.0001' + +// 일부 상황에서는 지수 표기법이 반환 될 수 있습니다 +console.log((1234.5).toPrecision(2)); // logs '1.2e+3' +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.5.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.7.4.7', 'Number.prototype.toPrecision')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Number.toPrecision")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Number.prototype.toFixed()")}}</li> + <li>{{jsxref("Number.prototype.toExponential()")}}</li> + <li>{{jsxref("Number.prototype.toString()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/number/tostring/index.html b/files/ko/web/javascript/reference/global_objects/number/tostring/index.html new file mode 100644 index 0000000000..2c1366ad5b --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/number/tostring/index.html @@ -0,0 +1,112 @@ +--- +title: Number.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Number/toString +tags: + - JavaScript + - Method + - Number + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toString +--- +<div>{{JSRef}}</div> + +<p><strong><code>toString()</code> </strong>메서드는 특정한 {{jsxref("Number")}} 객체를 나타내는 문자열을 반환합니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/number-tostring.html")}}</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>numObj</var>.toString([<var>radix</var>])</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>radix</code> {{optional_inline}}</dt> + <dd>수의 값을 나타내기 위해 사용되기 위한 기준을 정하는 2와 36사이의 정수. (진수를 나타내는 기수의 값.)</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>{{jsxref("Number")}} 객체를 명시하는 문자열.</p> + +<h3 id="예외">예외</h3> + +<dl> + <dt>{{jsxref("RangeError")}}</dt> + <dd>만약 <code>toString()</code>에<code> 2</code>와<code> 36</code>의 사잇 값이 아닌 <code>radix</code>가 주어지면, {{jsxref("RangeError")}} 에러가 발생합니다.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>{{jsxref("Number")}} 객체는 {{jsxref("Object")}} 객체의 <code>toString() </code>메소드를 오버라이딩하며, {{jsxref("Object.prototype.toString()")}} 를 상속받지 않습니다. {{jsxref( "Number")}} 객체에서 <code>toString()</code> 메소드는 특정 진수로 객체를 표현한 문자열을 환원합니다.</p> + +<p><code>toString() </code>메소드는 메소드의 첫 번째 아규먼트를 파싱하여, 메소드는 특정 기수(radix)를 기준으로 한 진수 값의 문자열을 환원하기 위한 시도를 합니다. 진수를 나타내는 기수 값(radix) 이 10 이상의 값일 때는, 알파벳의 글자는 9보다 큰 수를 나타냅니다. 예를 들면, 16진수(base 16)는, 알파벳 f 까지 사용하여 표현됩니다.</p> + +<p>만약에 <code>radix</code>값 이 지정되지 않으면, 임의로 10진수로 가정하게 됩니다.</p> + +<p>또, <code>numObj</code>가 음수라면, - 부호는 유지됩니다. 이는 기수(radix) 값이 2일 경우에라도 적용됩니다. 리턴된 문자열은 - 부호가 앞에 있는 <code>numObj</code> 의 양의 2진수 표시이지, <code>numObj</code>의 두 개의 조합이 아니기 때문입니다.</p> + +<p><code>numObj</code> 가 정수가 아니면, 점(.) 부호는 소수 자리와 분리하기 위해 사용됩니다. </p> + +<h2 id="예제">예제</h2> + +<h3 id="toString_사용"><code>toString</code> 사용</h3> + +<pre class="brush: js">var count = 10; + +console.log(count.toString()); // displays '10' +console.log((17).toString()); // displays '17' +console.log((17.2).toString()); // displays '17.2' + +var x = 6; + +console.log(x.toString(2)); // displays '110' +console.log((254).toString(16)); // displays 'fe' + +console.log((-10).toString(2)); // displays '-1010' +console.log((-0xff).toString(2)); // displays '-11111111' +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>초기 정의. JavaScript 1.1에서 구현됨.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.7.4.2', 'Number.prototype.tostring')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-number.prototype.tostring', 'Number.prototype.tostring')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.prototype.tostring', 'Number.prototype.tostring')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.Number.toString")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Number.prototype.toFixed()")}}</li> + <li>{{jsxref("Number.prototype.toExponential()")}}</li> + <li>{{jsxref("Number.prototype.toPrecision()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/number/valueof/index.html b/files/ko/web/javascript/reference/global_objects/number/valueof/index.html new file mode 100644 index 0000000000..344fa96ca2 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/number/valueof/index.html @@ -0,0 +1,86 @@ +--- +title: Number.prototype.valueOf() +slug: Web/JavaScript/Reference/Global_Objects/Number/valueOf +tags: + - JavaScript + - Method + - Number + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number/valueOf +--- +<div>{{JSRef}}</div> + +<p><strong><code>valueOf()</code></strong> 메서드는 {{jsxref("Number")}} 객체가 감싼<sup>wrapped</sup> {{Glossary("primitive", "원시")}} 값을 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-valueof.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>numObj</var>.valueOf()</pre> + +<h3 id="반환_값">반환 값</h3> + +<p>{{jsxref("Number")}} 객체의 원시 값.</p> + +<h2 id="설명">설명</h2> + +<p><code>valueOf()</code> 메서드는 보통 JavaScript에 의해 내부적으로 호출되고, 웹 코드에서는 명시적으로 호출하지 않습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="valueOf_사용하기"><code>valueOf</code> 사용하기</h3> + +<pre class="brush: js">var numObj = new Number(10); +console.log(typeof numObj); // object + +var num = numObj.valueOf(); +console.log(num); // 10 +console.log(typeof num); // number +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.7.4.4', 'Number.prototype.valueOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Number.valueOf")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Number.prototype.toSource()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/__definegetter__/index.html b/files/ko/web/javascript/reference/global_objects/object/__definegetter__/index.html new file mode 100644 index 0000000000..2ded710fda --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/__definegetter__/index.html @@ -0,0 +1,99 @@ +--- +title: Object.prototype.__defineGetter__() +slug: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__ +translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__ +--- +<div>{{JSRef}}</div> + +<div class="warning"> +<p>이 기능은 object initializer 문법 혹은 {{jsxref("Object.defineProperty()")}} API를 사용한 getter 정의가 표준화됨으로써 비표준화되었습니다.<br> + 이 기능은 이제까지의 ECMAScript 사양에서만 사용되고 있습니다.<br> + 보다 좋은 방법이 있으므로, 이 메소드는 사용하지 말아야합니다.</p> +</div> + +<p><code><strong>__defineGetter__</strong></code> 메소드는 오브젝트의 프로퍼티와 함수를 바인드합니다.<br> + 프로퍼티의 값이 조회될 때 바인드된 함수가 호출됩니다.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><var>obj</var>.__defineGetter__(<var>prop</var>, <var>func</var>)</pre> + +<h3 id="인자">인자</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>함수와 바인드된 프로퍼티의 이름을 나타내는 문자열</dd> + <dt><code>func</code></dt> + <dd>프로퍼티 값이 조회되었을 때 호출되는 함수</dd> +</dl> + +<h3 id="리턴_값">리턴 값</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="Description">Description</h2> + +<p><code>__defineGetter__</code> 를 사용하여 기존 오브젝트의 {{jsxref("Operators/get", "getter", "", 1)}}를 사용할 수 있습니다.</p> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js">// Non-standard and deprecated way + +var o = {}; +o.__defineGetter__('gimmeFive', function() { return 5; }); +console.log(o.gimmeFive); // 5 + + +// Standard-compliant ways + +// Using the get operator +var o = { get gimmeFive() { return 5; } }; +console.log(o.gimmeFive); // 5 + +// Using Object.defineProperty +var o = {}; +Object.defineProperty(o, 'gimmeFive', { + get: function() { + return 5; + } +}); +console.log(o.gimmeFive); // 5 +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.__defineGetter__', 'Object.prototype.__defineGetter__()')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Included in the (normative) annex for additional ECMAScript legacy features for Web browsers (note that the specification codifies what is already in implementations).</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.defineGetter")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Object.prototype.__defineSetter__()")}}</li> + <li>{{jsxref("Operators/get", "get")}} operator</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.prototype.__lookupGetter__()")}}</li> + <li>{{jsxref("Object.prototype.__lookupSetter__()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">JS Guide: Defining Getters and Setters</a></li> + <li><a href="https://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/">[Blog Post] Deprecation of __defineGetter__ and __defineSetter__</a></li> + <li>{{bug(647423)}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/assign/index.html b/files/ko/web/javascript/reference/global_objects/object/assign/index.html new file mode 100644 index 0000000000..38b25d0bd8 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/assign/index.html @@ -0,0 +1,284 @@ +--- +title: Object.assign() +slug: Web/JavaScript/Reference/Global_Objects/Object/assign +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Object + - Reference + - polyfill + - 객체 + - 레퍼런스 + - 메소드 +translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign +--- +<div>{{JSRef}}</div> + +<p><strong><code>Object.assign()</code> </strong>메소드는 열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용합니다. 대상 객체를 반환합니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/object-assign.html")}}</p> + +<div class="hidden"> +<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Object.assign(<var>target</var>, ...<var>sources</var>)</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>target</code></dt> + <dd>대상 객체.</dd> + <dt><code>sources</code></dt> + <dd>하나 이상의 출처 객체.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>대상 객체.</p> + +<h2 id="설명">설명</h2> + +<p>동일한 키가 존재할 경우 대상 객체의 속성은 출처 객체의 속성으로 덮어쓰여집니다. 후에 출처의 속성은 이전의 출처의 속성과 유사하게 덮어씁니다.</p> + +<p><code>Object.assign()</code> 메소드는 열거할 수 있는 출처 객체의 속성만 대상 객체로 복사합니다. 이 메소드는 출처 객체의 <code>[[Get]]</code>, 대상 객체의 <code>[[Set]]</code> 을 사용하여 getter 와 setter 를 호출합니다. 따라서 이는 속성을 단순히 복사하거나 새롭게 정의하는 것이 아니라 할당하는 것입니다. 병합 출처가 getter 를 포함하는 경우 프로토타입으로 새로운 속성을 병합하는 것이 적절하지 않을 수 있습니다. 프로토타입으로 속성의 열거성을 포함한 속성의 정의를 복사하려면 대신 {{jsxref("Object.getOwnPropertyDescriptor()")}} 와 {{jsxref("Object.defineProperty()")}} 를 사용해야합니다.</p> + +<p>{{jsxref("String")}} 과 {{jsxref("Symbol")}} 속성 모두가 복사됩니다.</p> + +<p>에러가 발생할 수 있는 상황에서는(예, 프로퍼티가 쓰기 불가인 경우), {{jsxref("TypeError")}} 가 발생하며, 에러가 발생하기 전에 속성이 추가되었다면 <code>target</code> 객체는 변경될 수 있습니다.</p> + +<p><code>Object.assign()</code> 메소드는 {{jsxref("null")}} 또는 {{jsxref("undefined")}} 출처 값에 대해서는 오류를 던지지 않음을 유의하세요.</p> + +<h2 id="예시">예시</h2> + +<h3 id="객체_클로닝">객체 클로닝</h3> + +<pre class="brush: js">const obj = { a: 1 }; +const copy = Object.assign({}, obj); +console.log(copy); // { a: 1 } +</pre> + +<h3 id="Deep_Clone" name="Deep_Clone">깊은 클로닝에 대한 주의사항</h3> + +<p>깊은 클로닝에 대해서, <code>Object.assign()</code> 은 속성의 값을 복사하기때문에 다른 대안을 사용해야합니다. 출처 값이 객체에 대한 참조인 경우, 참조 값만을 복사합니다.</p> + +<pre class="brush: js">function test() { + 'use strict'; + + let obj1 = { a: 0 , b: { c: 0}}; + let obj2 = Object.assign({}, obj1); + console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} + + obj1.a = 1; + console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} + console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} + + obj2.a = 2; + console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} + console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}} + + obj2.b.c = 3; // obj1, obj2 모두에 영향을 줌 + console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}} + console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}} + + // 깊은 클론 + obj1 = { a: 0 , b: { c: 0}}; + let obj3 = JSON.parse(JSON.stringify(obj1)); + obj1.a = 4; + obj1.b.c = 4; + console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}} +} + +test();</pre> + +<h3 id="객체_병합">객체 병합</h3> + +<pre class="brush: js">const o1 = { a: 1 }; +const o2 = { b: 2 }; +const o3 = { c: 3 }; + +const obj = Object.assign(o1, o2, o3); +console.log(obj); // { a: 1, b: 2, c: 3 } +console.log(o1); // { a: 1, b: 2, c: 3 }, 대상 객체 자체가 변경됨.</pre> + +<h3 id="같은_속성을_가진_객체_병합">같은 속성을 가진 객체 병합</h3> + +<pre class="brush: js">const o1 = { a: 1, b: 1, c: 1 }; +const o2 = { b: 2, c: 2 }; +const o3 = { c: 3 }; + +const obj = Object.assign({}, o1, o2, o3); +console.log(obj); // { a: 1, b: 2, c: 3 }</pre> + +<p>속성은 파라미터 순서에서 더 뒤에 위치한 동일한 속성을 가진 다른 객체에 의해 덮어쓰입니다.</p> + +<h3 id="심볼형_속성_복사">심볼형 속성 복사</h3> + +<pre class="brush: js">const o1 = { a: 1 }; +const o2 = { [Symbol('foo')]: 2 }; + +const obj = Object.assign({}, o1, o2); +console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox) +Object.getOwnPropertySymbols(obj); // [Symbol(foo)] +</pre> + +<h3 id="프로토타입_체인의_속성과_열거_불가형_속성은_복사_불가">프로토타입 체인의 속성과 열거 불가형 속성은 복사 불가</h3> + +<pre class="brush: js">const obj = Object.create({ foo: 1 }, { // foo 는 obj 의 프로토타입 체인상에 있음. + bar: { + value: 2 // bar 는 열거 불가능한 속성임. + }, + baz: { + value: 3, + enumerable: true // baz 는 자체 열거형 속성임. + } +}); + +const copy = Object.assign({}, obj); +console.log(copy); // { baz: 3 } +</pre> + +<h3 id="원시_자료형은_객체로_래핑">원시 자료형은 객체로 래핑</h3> + +<pre class="brush: js">var v1 = 'abc'; +var v2 = true; +var v3 = 10; +var v4 = Symbol('foo'); + +var obj = Object.assign({}, v1, null, v2, undefined, v3, v4); +// 원시 자료형은 래핑되지만, null 과 undefined 는 무시됨. +// 스트링 래퍼만 자체 열거형 속성을 가짐을 유의. +console.log(obj); // { "0": "a", "1": "b", "2": "c" } +</pre> + +<h3 id="예외에_의해_진행중인_복사_작업_중단">예외에 의해 진행중인 복사 작업 중단</h3> + +<pre class="brush: js">var target = Object.defineProperty({}, 'foo', { + value: 1, + writable: false +}); // target.foo 는 읽기 전용 속성 + +Object.assign(target, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 }); +// TypeError: "foo" is read-only +// target.foo 에 할당할 때 예외 발생 + +console.log(target.bar); // 2, 첫 번째 출처 객체는 성공적으로 복사되었음. +console.log(target.foo2); // 3, 두 번째 출처 객체의 첫 번째 프로퍼티도 성공적으로 복사되었음. +console.log(target.foo); // 1, 여기에서 예외가 발생. +console.log(target.foo3); // undefined, assign 메소드가 종료되었음, foo3 은 복사되지 않음. +console.log(target.baz); // undefined, 세 번째 출처도 복사되지 않음. +</pre> + +<h3 id="접근자_복사">접근자 복사</h3> + +<pre class="brush: js">var obj = { + foo: 1, + get bar() { + return 2; + } +}; + +var copy = Object.assign({}, obj); +console.log(copy); +// { foo: 1, bar: 2 }, copy.bar 의 값은 obj.bar 의 getter 의 반환 값임. + +// 모든 descriptors 를 복사하는 할당 함수 +function completeAssign(target, ...sources) { + sources.forEach(source => { + let descriptors = Object.keys(source).reduce((descriptors, key) => { + descriptors[key] = Object.getOwnPropertyDescriptor(source, key); + return descriptors; + }, {}); + // 기본적으로, Object.assign 는 열거형 Symbol 도 복사함. + Object.getOwnPropertySymbols(source).forEach(sym => { + let descriptor = Object.getOwnPropertyDescriptor(source, sym); + if (descriptor.enumerable) { + descriptors[sym] = descriptor; + } + }); + Object.defineProperties(target, descriptors); + }); + return target; +} + +var copy = completeAssign({}, obj); +console.log(copy); +// { foo:1, get bar() { return 2 } } +</pre> + +<h2 id="폴리필">폴리필</h2> + +<p>ES5 에는 심볼이 없기 때문에 다음 {{Glossary("Polyfill","폴리필")}} 은 심볼 속성을 지원하지 않습니다.</p> + +<pre class="brush: js">if (typeof Object.assign != 'function') { + // Must be writable: true, enumerable: false, configurable: true + Object.defineProperty(Object, "assign", { + value: function assign(target, varArgs) { // .length of function is 2 + 'use strict'; + if (target == null) { // TypeError if undefined or null + throw new TypeError('Cannot convert undefined or null to object'); + } + + var to = Object(target); + + for (var index = 1; index < arguments.length; index++) { + var nextSource = arguments[index]; + + if (nextSource != null) { // Skip over if undefined or null + for (var nextKey in nextSource) { + // Avoid bugs when hasOwnProperty is shadowed + if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { + to[nextKey] = nextSource[nextKey]; + } + } + } + } + return to; + }, + writable: true, + configurable: true + }); +}</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.assign', 'Object.assign')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-object.assign', 'Object.assign')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>초기 정의.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("javascript.builtins.Object.assign")}}</p> + +<div id="compat-mobile"> </div> + +<h2 id="함께_보기">함께 보기</h2> + +<ul> + <li>{{jsxref("Object.defineProperties()")}}</li> + <li><a href="/ko/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">속성의 열거성과 소유권</a></li> + <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals">객체 리터럴에서의 Spread</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/constructor/index.html b/files/ko/web/javascript/reference/global_objects/object/constructor/index.html new file mode 100644 index 0000000000..0162140d9c --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/constructor/index.html @@ -0,0 +1,155 @@ +--- +title: Object.prototype.constructor +slug: Web/JavaScript/Reference/Global_Objects/Object/constructor +tags: + - JavaScript + - Object + - Property + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/constructor +--- +<div>{{JSRef}}</div> + +<p>인스턴스의 프로토타입을 만든 {{jsxref("Object")}} 함수의 참조를 반환합니다. 이 속성값은 함수 자체의 참조임을 주의하세요, 함수 이름을 포함하는 문자열이 아니라. 그 값은 <code>1</code>, <code>true</code> 및 <code>"test"</code>와 같은 원시(primitive) 값에 대해서만 읽기 전용입니다.</p> + +<h2 id="설명">설명</h2> + +<p>모든 객체는 자신의 <code>prototype</code>으로부터 <code>constructor</code> 속성을 상속합니다:</p> + +<pre>var o = {}; +o.constructor === Object; // true + +var o = new Object; +o.constructor === Object; // true + +var a = []; +a.constructor === Array; // true + +var a = new Array; +a.constructor === Array; // true + +var n = new Number(3); +n.constructor === Number; // true</pre> + +<h2 id="예제">예제</h2> + +<h3 id="객체의_생성자_표시하기">객체의 생성자 표시하기</h3> + +<p>다음 예는 프로토타입이 <code>Tree</code>인 그 형의 객체 <code>theTree</code>를 만듭니다. 그 다음 객체 <code>theTree</code>의 <code>constructor</code>를 표시합니다.</p> + +<pre class="brush: js">function Tree(name) { + this.name = name; +} + +var theTree = new Tree('Redwood'); +console.log('theTree.constructor is ' + theTree.constructor); +</pre> + +<p>이 예는 다음 출력을 표시합니다:</p> + +<pre class="brush: js">theTree.constructor is function Tree(name) { + this.name = name; +} +</pre> + +<h3 id="객체의_생성자_바꾸기">객체의 생성자 바꾸기</h3> + +<p>다음 예는 일반 객체의 constructor 값을 수정하는 법을 보입니다. <code>true</code>, <code>1</code> 및 <code>"test"</code>만이 원래 읽기 전용 생성자를 갖기에 영향을 받지 않습니다. 이 예는 객체의 <code>constructor</code> 속성에 의존하는 게 항상 안전하지는 않음을 보입니다.</p> + +<pre class="brush:js">function Type () {} + +var types = [ + new Array(), + [], + new Boolean(), + true, // 바뀌지 않음 + new Date(), + new Error(), + new Function(), + function () {}, + Math, + new Number(), + 1, // 바뀌지 않음 + new Object(), + {}, + new RegExp(), + /(?:)/, + new String(), + 'test' // 바뀌지 않음 +]; + +for (var i = 0; i < types.length; i++) { + types[i].constructor = Type; + types[i] = [types[i].constructor, types[i] instanceof Type, types[i].toString()]; +} + +console.log(types.join('\n')); +</pre> + +<p>이 예는 다음 출력을 표시합니다:</p> + +<pre class="brush: js">function Type() {},false, +function Type() {},false, +function Type() {},false,false +function Boolean() { + [native code] +},false,true +function Type() {},false,Mon Sep 01 2014 16:03:49 GMT+0600 +function Type() {},false,Error +function Type() {},false,function anonymous() { + +} +function Type() {},false,function () {} +function Type() {},false,[object Math] +function Type() {},false,0 +function Number() { + [native code] +},false,1 +function Type() {},false,[object Object] +function Type() {},false,[object Object] +function Type() {},false,/(?:)/ +function Type() {},false,/(?:)/ +function Type() {},false, +function String() { + [native code] +},false,test +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>초기 정의. JavaScript 1.1에서 구현됨.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.1', 'Object.prototype.constructor')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("javascript.builtins.Object.constructor")}}</div> + +<div id="compat-mobile"> </div> diff --git a/files/ko/web/javascript/reference/global_objects/object/create/index.html b/files/ko/web/javascript/reference/global_objects/object/create/index.html new file mode 100644 index 0000000000..87a672aace --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/create/index.html @@ -0,0 +1,271 @@ +--- +title: Object.create() +slug: Web/JavaScript/Reference/Global_Objects/Object/create +tags: + - ECMAScript5 + - JavaScript + - Method + - Object + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Object/create +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.create()</strong></code> 메서드는 지정된 프로토타입 객체 및 속성(property)을 갖는 새 객체를 만듭니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Object.create(<var>proto</var>[, <var>propertiesObject</var>])</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>proto</code></dt> + <dd>새로 만든 객체의 프로토타입이어야 할 객체.</dd> + <dt><code>propertiesObject</code></dt> + <dd>선택사항. 지정되고 {{jsxref("undefined")}}가 아니면, 자신의 속성(즉, 자체에 정의되어 그 프로토타입 체인에서 열거가능하지 <em>않은</em> 속성)이 열거가능한 객체는 해당 속성명으로 새로 만든 객체에 추가될 속성 설명자(descriptor)를 지정합니다. 이러한 속성은 {{jsxref("Object.defineProperties()")}}의 두 번째 인수에 해당합니다.</dd> +</dl> + +<h3 id="반환값">반환값</h3> + +<p>지정된 프로토타입 개체와 속성을 갖는 새로운 개체.</p> + +<h3 id="예외">예외</h3> + +<p><code>proto</code> 매개변수가 {{jsxref("null")}} 또는 객체가 아닌 경우 {{jsxref("TypeError")}} 예외가 발생(throw).</p> + +<h2 id="예">예</h2> + +<h3 id="Object.create()를_사용한_고전적인_상속방법"><code>Object.create()</code>를 사용한 고전적인 상속방법</h3> + +<p>아래는 고전적인 상속방법으로 사용된 <code>Object.create()</code> 사용 예입니다. 이는 단일 상속 용으로, JavaScript가 지원하는 전부입니다.</p> + +<pre class="brush: js">// Shape - 상위클래스 +function Shape() { + this.x = 0; + this.y = 0; +} + +// 상위클래스 메서드 +Shape.prototype.move = function(x, y) { + this.x += x; + this.y += y; + console.info('Shape moved.'); +}; + +// Rectangle - 하위클래스 +function Rectangle() { + Shape.call(this); // super 생성자 호출. +} + +// 하위클래스는 상위클래스를 확장 +Rectangle.prototype = Object.create(Shape.prototype); +Rectangle.prototype.constructor = Rectangle; + +var rect = new Rectangle(); + +console.log('Is rect an instance of Rectangle?', rect instanceof Rectangle); // true +console.log('Is rect an instance of Shape?', rect instanceof Shape); // true +rect.move(1, 1); // Outputs, 'Shape moved.' +</pre> + +<p>여러 객체에서 상속하고 싶은 경우엔 mixin이 사용가능합니다.</p> + +<pre class="brush: js">function MyClass() { + SuperClass.call(this); + OtherSuperClass.call(this); +} + +MyClass.prototype = Object.create(SuperClass.prototype); // 상속 +mixin(MyClass.prototype, OtherSuperClass.prototype); // mixin + +MyClass.prototype.myMethod = function() { + // 기능 수행 +}; +</pre> + +<p><code>mixin</code> 함수는 상위(super)클래스 프로토타입에서 하위(sub)클래스 프로토타입으로 함수를 복사하고, mixin 함수는 사용자에 의해 공급될 필요가 있습니다. mixin 같은 함수의 예는 <a href="https://api.jquery.com/jQuery.extend/">jQuery.extend()</a>입니다.</p> + +<h3 id="Object.create()와_함께_propertiesObject_인수_사용하기"><code>Object.create()<font face="Open Sans, Arial, sans-serif">와 함께 </font></code><code>propertiesObject</code> 인수 사용하기</h3> + +<pre class="brush: js">var o; + +// 프로토타입이 null인 객체 생성 +o = Object.create(null); + + +o = {}; +// 위는 아래와 같습니다: +o = Object.create(Object.prototype); + + +// 샘플 속성 두개를 갖는 객체를 만드는 예. +// (두 번째 매개변수는 키를 *속성 설명자*에 맵핑함을 주의하세요.) +o = Object.create(Object.prototype, { + // foo는 정규 '값 속성' + foo: { writable: true, configurable: true, value: 'hello' }, + // bar는 접근자(accessor, getter-및-setter) 속성 + bar: { + configurable: false, + get: function() { return 10; }, + set: function(value) { console.log('Setting `o.bar` to', value); } +/* ES5 접근자로 코드는 이렇게 할 수 있습니다 + get function() { return 10; }, + set function(value) { console.log('setting `o.bar` to', value); } */ + } +}); + + +function Constructor() {} +o = new Constructor(); +// 위는 아래와 같습니다: +o = Object.create(Constructor.prototype); +// 물론, 생성자 함수에 실제 초기화 코드가 있다면 +// Object.create()는 그것을 반영할 수 없습니다 + + +// 빈 새 객체가 프로토타입인 새 객체를 만들고 +// 값이 42인 단일 속성 'p' 추가. +o = Object.create({}, { p: { value: 42 } }); + +// 기본으로 writable, enumerable 또는 configurable 속성은 false: +o.p = 24; +o.p; +// 42 + +o.q = 12; +for (var prop in o) { + console.log(prop); +} +// 'q' + +delete o.p; +// false + +// ES3 속성을 지정하기 위해 +o2 = Object.create({}, { + p: { + value: 42, + writable: true, + enumerable: true, + configurable: true + } +}); +</pre> + +<h2 id="폴리필">폴리필</h2> + +<p>이 폴리필에서는 새 개체에 대한 프로토타입이 선택되었지만 두번째 인수가 없이 개체를 생성하는 사례를 보여줍니다.</p> + +<p><code>[[Prototype]]</code>에 <code>null</code> 을 설정하는 것이 실제 ES5 <code>Object.create</code>에서는 지원되지만, ECMAScript 5 보다 낮은 버전에서는 상속에 제한이 있기 때문에 이 폴리필에서는 지원할 수 없음에 주의하세요.</p> + +<pre class="brush: js">if (typeof Object.create != 'function') { + Object.create = (function(undefined) { + var Temp = function() {}; + return function (prototype, propertiesObject) { + if(prototype !== Object(prototype) && prototype !== null) { + throw TypeError('Argument must be an object, or null'); + } + Temp.prototype = prototype || {}; + if (propertiesObject !== undefined) { + Object.defineProperties(Temp.prototype, propertiesObject); + } + var result = new Temp(); + Temp.prototype = null; + // Object.create(null)인 경우 모방 + if(prototype === null) { + result.__proto__ = null; + } + return result; + }; + })(); +}</pre> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.5', 'Object.create')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>초기 정의. JavaScript 1.8.5에서 구현됨.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.create', 'Object.create')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.create', 'Object.create')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("5")}}</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("11.60")}}</td> + <td>{{CompatSafari("5")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatOperaMobile("11.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.defineProperties()")}}</li> + <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li> + <li>John Resig의 <a href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf()</a> 포스트</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/defineproperties/index.html b/files/ko/web/javascript/reference/global_objects/object/defineproperties/index.html new file mode 100644 index 0000000000..a0949f78f2 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/defineproperties/index.html @@ -0,0 +1,191 @@ +--- +title: Object.defineProperties() +slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperties +translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperties +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.defineProperties()</strong></code> 메서드는 객체에 새로운 속성을 정의하거나 기존의 속성을 수정하고, 그 객체를 반환한다.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-defineproperties.html")}}</div> + + + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><code>Object.defineProperties(<var>obj</var>, <var>props</var>)</code></pre> + +<h3 id="인자">인자</h3> + +<dl> + <dt><code><var>obj</var></code></dt> + <dd>속성을 정의하거나 수정할 객체.</dd> + <dt><code><var>props</var></code></dt> + <dd>정의하거나 수정할 속성의 이름을 키로, 그 속성을 서술하는 객체를 값으로 갖는 객체. <code>props</code>의 각 값은 데이터 서술자(data descriptor) 혹은 접근자 서술자(accessor descriptor) 중 하나여야 하며, 동시에 두 유형을 포함할 수 없다({{jsxref("Object.defineProperty()")}} 참조).</dd> + <dd>데이터 서술자와 접근자 서술자 모두 다음 키를 선택적으로 포함할 수 있다:</dd> + <dd> + <dl> + <dt><code>configurable</code></dt> + <dd><code>true</code>일 경우 이 속성 서술자의 형태를 변경하거나, 속성을 해당 객체에서 삭제할 수 있다.<br> + <strong>기본값은 <code>false</code>이다.</strong></dd> + <dt><code>enumerable</code></dt> + <dd><code>true</code>일 경우 해당 객체의 속성을 열거할 때 이 속성이 열거된다.<br> + <strong>기본값은 <code>false</code>이다.</strong></dd> + </dl> + + <p>데이터 서술자의 경우 다음 키를 추가로 포함할 수 있다:</p> + + <dl> + <dt><code>value</code></dt> + <dd>이 속성에 설정할 값. 올바른 자바스크립트 값(숫자, 객체, 함수 등)이면 무엇이든 설정할 수 있다.<br> + <strong>기본값은 {{jsxref("undefined")}}이다.</strong></dd> + <dt><code>writable</code></dt> + <dd><code>true</code>일 경우 이 속성에 설정된 값을 {{jsxref("Operators/Assignment_Operators", "할당 연산자", "", 1)}}로 수정할 수 있다.<br> + <strong>기본값은 <code>false</code>이다.</strong></dd> + </dl> + + <p>접근자 서술자의 경우 다음 키를 추가로 포함할 수 있다:</p> + + <dl> + <dt><code>get</code></dt> + <dd>해당 속성의 getter가 될 함수, 혹은 getter가 없을 경우 {{jsxref("undefined")}}. 이 함수의 반환값이 속성의 값으로 사용된다.<br> + <strong>기본값은 {{jsxref("undefined")}}이다.</strong></dd> + <dt><code>set</code></dt> + <dd>해당 속성의 setter가 될 함수, 혹은 setter가 없을 경우 {{jsxref("undefined")}}. 이 함수는 이 속성에 할당되는 새로운 값을 유일한 인자로 받는다.<br> + <strong>기본값은 {{jsxref("undefined")}}이다.</strong></dd> + </dl> + + <p>서술자가 <code>value</code>, <code>writable</code>, <code>get</code>, <code>set</code> 키를 모두 가지고 있지 않을 경우 데이터 서술자로 취급한다. 서술자가 <code>value</code>이나 <code>writable</code>과 <code>get</code>이나 <code>set</code> 키를 모두 가지고 있을 경우 예외가 발생한다.</p> + </dd> +</dl> + +<h3 id="반환값">반환값</h3> + +<p>함수에 넘겨주었던 객체.</p> + +<h2 id="설명">설명</h2> + +<p><code>Object.defineProperties</code>는 기본적으로 <code>props</code>의 모든 열거가능한 속성에 따라 객체 <code>obj</code>의 속성을 정의한다.</p> + +<h2 id="예시">예시</h2> + +<pre class="brush: js">var obj = {}; +Object.defineProperties(obj, { + 'property1': { + value: true, + writable: true + }, + 'property2': { + value: 'Hello', + writable: false + } + // 등등 +}); +</pre> + +<h2 id="폴리필">폴리필</h2> + +<p>모든 이름과 속성이 원래 값을 가리키는 깨끗한 실행 환경에서 <code>Object.defineProperties</code>는 다음 자바스크립트 재구현과 거의 완벽하게 똑같이(<code>isCallable</code>의 주석에 주목) 실행된다.</p> + +<pre class="brush: js;highlight:[8]">function defineProperties(obj, properties) { + function convertToDescriptor(desc) { + function hasProperty(obj, prop) { + return Object.prototype.hasOwnProperty.call(obj, prop); + } + + function isCallable(v) { + // NB: 함수가 아닌 값이 호출가능할 경우 필요할 시 수정할 것 + return typeof v === 'function'; + } + + if (typeof desc !== 'object' || desc === null) + throw new TypeError('bad desc'); + + var d = {}; + + if (hasProperty(desc, 'enumerable')) + d.enumerable = !!desc.enumerable; + if (hasProperty(desc, 'configurable')) + d.configurable = !!desc.configurable; + if (hasProperty(desc, 'value')) + d.value = desc.value; + if (hasProperty(desc, 'writable')) + d.writable = !!desc.writable; + if (hasProperty(desc, 'get')) { + var g = desc.get; + + if (!isCallable(g) && typeof g !== 'undefined') + throw new TypeError('bad get'); + d.get = g; + } + if (hasProperty(desc, 'set')) { + var s = desc.set; + if (!isCallable(s) && typeof s !== 'undefined') + throw new TypeError('bad set'); + d.set = s; + } + + if (('get' in d || 'set' in d) && ('value' in d || 'writable' in d)) + throw new TypeError('identity-confused descriptor'); + + return d; + } + + if (typeof obj !== 'object' || obj === null) + throw new TypeError('bad obj'); + + properties = Object(properties); + + var keys = Object.keys(properties); + var descs = []; + + for (var i = 0; i < keys.length; i++) + descs.push([keys[i], convertToDescriptor(properties[keys[i]])]); + + for (var i = 0; i < descs.length; i++) + Object.defineProperty(obj, descs[i][0], descs[i][1]); + + return obj; +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.7', 'Object.defineProperties')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>초기 정의. 자바스크립트 1.8.5에 구현됨</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.defineproperties', 'Object.defineProperties')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.defineproperties', 'Object.defineProperties')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_지원_현황">브라우저 지원 현황</h2> + + + +<p>{{Compat("javascript.builtins.Object.defineProperties")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.keys()")}}</li> + <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/defineproperty/index.html b/files/ko/web/javascript/reference/global_objects/object/defineproperty/index.html new file mode 100644 index 0000000000..0d4a803316 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/defineproperty/index.html @@ -0,0 +1,417 @@ +--- +title: Object.defineProperty() +slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperty +tags: + - ECMAScript 5 + - JavaScript + - Method + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperty +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.defineProperty()</strong></code> 정적 메서드는 객체에 직접 새로운 속성을 정의하거나 이미 존재하는 속성을 수정한 후, 그 객체를 반환합니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> <code>defineProperty</code>는 {{jsxref("Object")}} 인스턴스가 아니라 생성자에서 바로 호출해야 합니다.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/object-defineproperty.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code>Object.defineProperty(<var>obj</var>, <var>prop</var>, <var>descriptor</var>)</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>속성을 정의할 객체.</dd> + <dt><code>prop</code></dt> + <dd>새로 정의하거나 수정하려는 속성의 이름 또는 {{jsxref("Symbol")}}.</dd> + <dt><code>descriptor</code></dt> + <dd>새로 정의하거나 수정하려는 속성을 기술하는 객체.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 대상 <code>obj</code>.</p> + +<h2 id="설명">설명</h2> + +<p><code>defineProperty</code>는 객체의 속성을 정교하게 추가하거나 수정할 수 있습니다. 할당을 통해 속성을 추가하는 일반적인 방법을 사용하면 속성 열거<sup>enumeration</sup>({{jsxref("Statements/for...in", "for...in")}} 반복문이나 {{jsxref("Object.keys")}} 메서드)를 통해 노출되어 값을 변경하거나 {{jsxref("Operators/delete", "delete")}} 연산자로 삭제할 수 있습니다. <code>defineProperty</code>를 사용하면 이런 부분을 상세하게 조절할 수 있습니다. <code>Object.defineProperty()</code>로 추가한 속성은 기본적으로 불변합니다.</p> + +<p>속성 서술자<sup>property descriptors</sup>는 객체로 나타내며 데이터 서술자<sup>data descriptors</sup>와 접근자 서술자<sup>accessor descriptors</sup>의 두 가지 유형을 갖습니다. 데이터 서술자는 값을 가지는 속성으로, 덮어쓰거나 쓸 수 없습니다. 접근자 서술자는 접근자<sup>getter</sup>-설정자<sup>setter</sup> 한 쌍을 가지는 속성입니다. 서술자는 두 유형 중 하나여야 하며, 동시에 두 유형일 수는 없습니다.</p> + +<p>데이터 서술자와 접근자 서술자 모두 객체이며 다음과 같은 키를 공유합니다.</p> + +<dl> + <dt><code>configurable</code></dt> + <dd>이 속성의 값을 변경할 수 있고, 대상 객체에서 삭제할 수도 있다면 <code>true</code>.<br> + 기본값은<strong> </strong><code>false</code>.</dd> + <dt><code>enumerable</code></dt> + <dd>이 속성이 대상 객체의 속성 열거 시 노출된다면 <code>true</code>.<br> + 기본값은<strong> </strong><code>false</code>.</dd> +</dl> + +<p>데이터 서술자는 다음 키를 선택사항으로 가집니다.</p> + +<dl> + <dt><code>value</code></dt> + <dd>속성에 연관된 값. 아무 유효한 JavaScript 값(숫자, 객체, 함수 등)이나 가능합니다.<br> + 기본값은 {{jsxref("undefined")}}</dd> + <dt><code>writable</code></dt> + <dd>{{jsxref("Operators/Assignment_Operators", "할당 연산자", "", 1)}}로 속성의 값을 바꿀 수 있다면 <code>true</code>.<br> + 기본값은<strong> </strong><code>false</code>.</dd> +</dl> + +<p>접근자 서술자는 다음 키를 선택사항으로 가집니다.</p> + +<dl> + <dt><code>get</code></dt> + <dd>속성 접근자로 사용할 함수, 접근자가 없다면 {{jsxref("undefined")}}. 속성에 접근하면 이 함수를 매개변수 없이 호출하고, 그 반환값이 속성의 값이 됩니다. 이 때 <code>this</code> 값은 이 속성을 가진 객체(상속으로 인해 원래 정의한 객체가 아닐 수 있음)입니다.<br> + 기본값은 {{jsxref("undefined")}}.</dd> + <dt><code>set</code></dt> + <dd>속성 설정자로 사용할 함수, 설정자가 없다면 {{jsxref("undefined")}}. 속성에 값을 할당하면 이 함수를 하나의 매개변수(할당하려는 값)로 호출합니다. 이 때 <code>this</code> 값은 이 속성을 가진 객체입니다.<br> + 기본값은 {{jsxref("undefined")}}.</dd> +</dl> + +<p>서술자가 <code>value</code>, <code>writable</code>, <code>get</code>, <code>set</code> 키를 모두 지니고 있지 않으면 데이터 서술자로 간주합니다. 반면 <code>value</code> 또는 <code>writable</code>과 동시에 <code>get</code> 또는 <code>set</code> 키를 함께 가지고 있으면 오류가 발생합니다.</p> + +<p>각 설정값이 서술자 스스로의 속성일 필요는 없습니다. 따라서 서술자가 상속받은 값도 영향을 줍니다. 기본 설정값을 확실하게 보존하려면 {{jsxref("Object.prototype")}}을 먼저 동결하거나, 모든 속성을 명시적으로 지정하거나, {{jsxref("Object.create", "Object.create(null)")}}로 {{jsxref("null")}}을 가리키세요.</p> + +<pre class="brush: js">// __proto__ 사용 +var obj = {}; +var descriptor = Object.create(null); // 상속받은 속성 없음 +// 기본으로 열거 불가, 설정 불가, 변경 불가 +descriptor.value = 'static'; +Object.defineProperty(obj, 'key', descriptor); + +// 명시적 +Object.defineProperty(obj, 'key', { + enumerable: false, + configurable: false, + writable: false, + value: 'static' +}); + +// 같은 객체를 재활용하기 +function withValue(value) { + var d = withValue.d || ( + withValue.d = { + enumerable: false, + writable: false, + configurable: false, + value: null + } + ); + d.value = value; + return d; +} +Object.defineProperty(obj, 'key', withValue('static')); + +// Object.freeze가 존재하면 +// 속성의 추가/제거 방지 +// (value, get, set, enumerable, writable, configurable) +(Object.freeze || Object)(Object.prototype); +</pre> + +<h2 id="예제">예제</h2> + +<p>이진 플래그 형태로 <code>defineProperty</code>를 사용하는 예제는 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">additional examples</a>에 있습니다.</p> + +<h3 id="속성_생성하기">속성 생성하기</h3> + +<p><code>Object.defineProperty()</code>는 지정한 속성이 객체에 존재하지 않으면 주어진 서술자를 사용해 새로 생성합니다. 서술자의 일부 항목은 생략 가능하며, 생략한 항목은 기본값을 대신 사용합니다.</p> + +<pre class="brush: js">var o = {}; // 새로운 객체 생성 + +// 데이터 속성 서술자와 defineProperty로 +// 새로운 속성을 추가하는 예시 +Object.defineProperty(o, 'a', { + value: 37, + writable: true, + enumerable: true, + configurable: true +}); +// 'a' 속성이 o 객체에 존재하고 값은 37 + +// 접근자 속성 기술자와 defineProperty로 +// 새로운 속성을 추가하는 예시 +var bValue = 38; +Object.defineProperty(o, 'b', { + // ES2015 단축 메서드명 사용 + // 아래 코드와 같음 + // get: function() { return bValue; } + // set: function(newValue) { bValue = newValue; }, + get() { return bValue; }, + set(newValue) { bValue = newValue; }, + enumerable: true, + configurable: true +}); +o.b; // 38 +// 'b' 속성이 o 객체에 존재하고 값은 38 +// o.b를 재정의하지 않는 이상 +// o.b의 값은 항상 bValue와 동일함 + +// 두 가지를 혼용할 수 없음 +Object.defineProperty(o, 'conflict', { + value: 0x9f91102, + get: function() { return 0xdeadbeef; } +}); +// TypeError 발생 +// value는 데이터 서술자에만, +// get은 접근자 서술자에만 나타날 수 있음</pre> + +<h3 id="속성_수정하기">속성 수정하기</h3> + +<p><code>ObjectdefineProperty()</code>는 지정한 속성이 객체에 이미 존재하면 주어진 서술자와 객체의 기존 설정을 사용해 속성의 수정을 시도합니다. 기존 속성 서술자의 <code>configurable</code>이 <code>false</code>이면 속성이 "설정 불가능"하다고 말하고, 이 속성의 어떤 특성도 수정할 수 없습니다. 다만 쓰기 가능한 데이터 속성의 경우 값을 바꾸거나 <code>writable</code> 특성을 <code>true</code>에서 <code>false</code>로 바꾸는건 가능합니다. 속성이 설정 불가능한 경우 속성의 유형을 데이터에서 접근자, 또는 접근자에서 데이터로 바꿀 수 없습니다.</p> + +<p>설정 불가능한 속성의 특성을 바꾸려고 시도하면 {{jsxref("TypeError")}}가 발생합니다. 단, 기존 값과 신규 값이 같은 경우, 혹은 쓰기 가능한 속성의 <code>value</code>와 <code>writable</code>은 수정할 수 있습니다.</p> + +<h4 id="writable_특성"><code>writable</code> 특성</h4> + +<p>속성의 <code>writable</code> 특성이 <code>false</code>인 경우는 "쓰기 불가능"하여 다시 할당할 수 없습니다.</p> + +<pre class="brush: js">var o = {}; // 새로운 객체 생성 + +Object.defineProperty(o, 'a', { + value: 37, + writable: false +}); + +console.log(o.a); // 37 기록 +o.a = 25; // 오류 발생하지 않음 +// 엄격 모드에서는 값이 같더라도 +// 오류가 발생함 +console.log(o.a); // 37 기록, 할당하지 못했음 + +// 엄격 모드 +(function() { + 'use strict'; + var o = {}; + Object.defineProperty(o, 'b', { + value: 2, + writable: false + }); + o.b = 3; // TypeError: "b" is read-only + return o.b; // 윗줄이 없다면 2 반환 +}()); +</pre> + +<p>위의 예제가 보이듯, 비엄격 모드에서는 쓰기 불가능한 속성의 값에 쓰려고 시도하면 값이 바뀌지 않고, 오류도 발생하지도 않습니다.</p> + +<h4 id="Enumerable_속성">Enumerable 속성</h4> + +<p><code>enumerable</code>은 해당 속성이 {{jsxref("Statements/for...in", "for...in")}} 루프나 {{jsxref("Object.keys()")}} 에서 노출될지 말지를 정의한다.</p> + +<pre class="brush: js">var o = {}; +Object.defineProperty(o, 'a', { + value: 1, + enumerable: true +}); +Object.defineProperty(o, 'b', { + value: 2, + enumerable: false +}); +Object.defineProperty(o, 'c', { + value: 3 +}); // enumerable defaults to false +o.d = 4; // enumerable defaults to true + // when creating a property by setting it +Object.defineProperty(o, Symbol.for('e'), { + value: 5, + enumerable: true +}); +Object.defineProperty(o, Symbol.for('f'), { + value: 6, + enumerable: false +}); + +for (var i in o) { + console.log(i); +} +// logs 'a' and 'd' (in undefined order) + +Object.keys(o); // ['a', 'd'] + +o.propertyIsEnumerable('a'); // true +o.propertyIsEnumerable('b'); // false +o.propertyIsEnumerable('c'); // false +o.propertyIsEnumerable('d'); // true +o.propertyIsEnumerable(Symbol.for('e')); // true +o.propertyIsEnumerable(Symbol.for('f')); // false + +var p = { ...o } +p.a // 1 +p.b // undefined +p.c // undefined +p.d // 4 +p[Symbol.for('e')] // 5 +p[Symbol.for('f')] // undefined +</pre> + +<h4 id="Configurable_속성">Configurable 속성</h4> + +<p><code>configurable</code> 은 객체에서 해당키가 제거될 수 있는지와 (<code>writable</code>을 제외한)기술속성을 변경할 수 있는지에 대한 여부를 동시에 통제한다.</p> + +<pre class="brush: js">var o = {}; +Object.defineProperty(o, 'a', { + get() { return 1; }, + configurable: false +}); + +Object.defineProperty(o, 'a', { + configurable: true +}); // throws a TypeError +Object.defineProperty(o, 'a', { + enumerable: true +}); // throws a TypeError +Object.defineProperty(o, 'a', { + set() {} +}); // throws a TypeError (set was undefined previously) +Object.defineProperty(o, 'a', { + get() { return 1; } +}); // throws a TypeError +// (even though the new get does exactly the same thing) +Object.defineProperty(o, 'a', { + value: 12 +}); // throws a TypeError + +console.log(o.a); // logs 1 +delete o.a; // Nothing happens +console.log(o.a); // logs 1 +</pre> + +<p><font face="Courier New">o.a</font>의 <font face="Courier New">configurable</font> 가 <font face="Courier New">true</font>라면, 위의 예외는 발생하지 않고 속성은 마지막에 제거되었을 것이다.</p> + +<h3 id="속성에_기본값_추가하기">속성에 기본값 추가하기</h3> + +<p>속성을 정의할 때 기본값을 제공하는 방식은 중요하다. 간단히 점구문을 이용해 할당한 값과 <code>Object.defineProperty</code>를 사용한 경우는 꽤 다르다. 아래 예를 보자.</p> + +<pre class="brush: js">var o = {}; + +o.a = 1; +// 위의 표현은 아래와 같다: +Object.defineProperty(o, 'a', { + value: 1, + writable: true, + configurable: true, + enumerable: true +}); + + +// 만약 다음과 같이 표현한다면, +Object.defineProperty(o, 'a', { value: 1 }); +// 아래의 의미를 지니게 된다: +Object.defineProperty(o, 'a', { + value: 1, + writable: false, + configurable: false, + enumerable: false +}); +</pre> + +<h3 id="사용자_정의_Setters_와_Getters">사용자 정의 Setters 와 Getters</h3> + +<p>아래의 예는 어떻게 스스로 변화를 기록해두는 객체를 만드는지 보여준다. <code>temperature</code> 속성의 값을 바꾸면 <code>archive</code> 배열에도 로그가 쌓인다.</p> + +<pre class="brush: js">function Archiver() { + var temperature = null; + var archive = []; + + Object.defineProperty(this, 'temperature', { + get: function() { + console.log('get!'); + return temperature; + }, + set: function(value) { + temperature = value; + archive.push({ val: temperature }); + } + }); + + this.getArchive = function() { return archive; }; +} + +var arc = new Archiver(); +arc.temperature; // 'get!' +arc.temperature = 11; +arc.temperature = 13; +arc.getArchive(); // [{ val: 11 }, { val: 13 }] +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.6', 'Object.defineProperty')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.defineproperty', 'Object.defineProperty')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.defineproperty', 'Object.defineProperty')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Object.defineProperty")}}</p> + +<h2 id="호환성_참고사항">호환성 참고사항</h2> + +<h3 id="Redefining_the_length_property_of_an_Array_object">Redefining the <code>length</code> property of an <code>Array</code> object</h3> + +<p>It is possible to redefine the {{jsxref("Array.length", "length")}} property of arrays, subject to the usual redefinition restrictions. (The {{jsxref("Array.length", "length")}} property is initially non-configurable, non-enumerable, and writable. Thus on an unaltered array it is possible to change the {{jsxref("Array.length", "length")}} property's value, or to make it non-writable. It is not allowed to change its enumerability or configurability, or if it is non-writable to change its value or writability.) However, not all browsers permit this redefinition.</p> + +<p>Firefox 4 through 22 will throw a {{jsxref("Global_Objects/TypeError", "TypeError")}} on any attempt whatsoever (whether permitted or not) to redefine the {{jsxref("Array.length", "length")}} property of an array.</p> + +<p>Versions of Chrome which implement <code>Object.defineProperty()</code> in some circumstances ignore a length value different from the array's current {{jsxref("Array.length", "length")}} property. In some circumstances changing writability seems to silently not work (and not throw an exception). Also, relatedly, some array-mutating methods like {{jsxref("Array.prototype.push")}} don't respect a non-writable length.</p> + +<p>Versions of Safari which implement <code>Object.defineProperty()</code> ignore a <code>length</code> value different from the array's current {{jsxref("Array.length", "length")}} property, and attempts to change writability execute without error but do not actually change the property's writability.</p> + +<p>Only Internet Explorer 9 and later, and Firefox 23 and later, appear to fully and correctly implement redefinition of the {{jsxref("Array.length", "length")}} property of arrays. For now, don't rely on redefining the {{jsxref("Array.length", "length")}} property of an array to either work, or to work in a particular manner. And even when you <em>can</em> rely on it, <a href="http://whereswalden.com/2013/08/05/new-in-firefox-23-the-length-property-of-an-array-can-be-made-non-writable-but-you-shouldnt-do-it/">there's really no good reason to do so</a>.</p> + +<h3 id="Internet_Explorer_8_specific_notes">Internet Explorer 8 specific notes</h3> + +<p>Internet Explorer 8 implemented a <code>Object.defineProperty()</code> method that could <a class="external" href="http://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx">only be used on DOM objects</a>. A few things need to be noted:</p> + +<ul> + <li>Trying to use <code>Object.defineProperty()</code> on native objects throws an error.</li> + <li>Property attributes must be set to some values. <code>Configurable</code>, <code>enumerable</code> and <code>writable</code> attributes should all be set to <code>true</code> for data descriptor and <code>true</code> for <code>configurable</code>, <code>false</code> for <code>enumerable</code> for accessor descriptor.(?) Any attempt to provide other value(?) will result in an error being thrown.</li> + <li>Reconfiguring a property requires first deleting the property. If the property isn't deleted, it stays as it was before the reconfiguration attempt.</li> +</ul> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> + <li>{{jsxref("Object.defineProperties()")}}</li> + <li>{{jsxref("Object.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li> + <li>{{jsxref("Object.prototype.watch()")}}</li> + <li>{{jsxref("Object.prototype.unwatch()")}}</li> + <li>{{jsxref("Operators/get", "get")}}</li> + <li>{{jsxref("Operators/set", "set")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">Additional <code>Object.defineProperty</code> examples</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/entries/index.html b/files/ko/web/javascript/reference/global_objects/object/entries/index.html new file mode 100644 index 0000000000..3056d99d31 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/entries/index.html @@ -0,0 +1,145 @@ +--- +title: Object.entries() +slug: Web/JavaScript/Reference/Global_Objects/Object/entries +translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.entries()</strong></code> 메서드는 {{jsxref("Statements/for...in", "for...in")}}와 같은 순서로 주어진 객체 자체의 enumerable 속성 <code>[key, value]</code> 쌍의 배열을 반환합니다. (<code>for-in</code> 루프가 다른점은 프로토 타입 체인의 속성도 열거한다는 점입니다).</p> + +<p><code><strong>Object.entries()</strong></code> 에 의해 반환된 배열(array)의 순서는 객체가 정의된 방법과 관련이 없습니다. 배열 순서가 쓸 곳이 있다면, 다음과 같이 정렬을 먼저 하시는 것이 좋습니다 <code>Object.entries(obj).sort((a, b) => b[0].localeCompare(a[0]));</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-entries.html", "taller")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">Object.entries(<var>obj</var>)</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>객체 자체의 열거 가능한 문자열 키를 가진 속성 <code>[key, value]</code> 쌍이 반환되는 객체입니다.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>지정된 객체 자체의 열거 가능한 문자속성 <code>[key, value]</code> 쌍의 배열입니다.</p> + +<h2 id="Description">Description</h2> + +<p><code>Object.entries()</code>는 <code>object</code>에 직접있는 enumerable 속성 <code>[key, value]</code> 쌍에 해당하는 배열을 반환합니다. 속성의 순서는 개체의 속성 값을 수동으로 반복하여 주어진 순서와 동일합니다.</p> + +<h2 id="Polyfill">Polyfill</h2> + +<p>기본적으로 지원하지 않는 이전 환경에서 호환 가능한 <code>Object.entries</code> 지원을 추가하려면 <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a>에 Object.entries의 데모 구현을 찾을 수 있습니다 (IE에 대한 지원이 필요하지 않은 경우) , <a href="https://github.com/es-shims/Object.entries">es-shims/Object.entries</a> 저장소에있는 polyfill을 사용하거나 아래에 나열된 polyfill을 간단하게 배치 할 수 있습니다.</p> + +<pre class="brush: js notranslate">if (!Object.entries) + Object.entries = function( obj ){ + var ownProps = Object.keys( obj ), + i = ownProps.length, + resArray = new Array(i); // preallocate the Array + while (i--) + resArray[i] = [ownProps[i], obj[ownProps[i]]]; + + return resArray; + }; +</pre> + +<p>For the above polyfill code snippet, if you need support for IE < 9, then you will also need an Object.keys polyfill (such as the one found on the {{jsxref("Object.keys")}} page).</p> + +<p>위의 polyfill 코드 스 니펫의 경우 Internet Explorer (9버전 이전)를 지원해야하는 경우 Object.keys polyfill ( {{jsxref("Object.keys")}} 페이지에 있는 것과 같은)도 필요합니다.</p> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js notranslate">const obj = { foo: 'bar', baz: 42 }; +console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ] + +// array like object +const obj = { 0: 'a', 1: 'b', 2: 'c' }; +console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ] + +// array like object with random key ordering +const anObj = { 100: 'a', 2: 'b', 7: 'c' }; +console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ] + +// getFoo is property which isn't enumerable +const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } }); +myObj.foo = 'bar'; +console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ] + +// non-object argument will be coerced to an object +console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ] + +// returns an empty array for any primitive type, since primitives have no own properties +console.log(Object.entries(100)); // [ ] + +// iterate through key-value gracefully +const obj = { a: 5, b: 7, c: 9 }; +for (const [key, value] of Object.entries(obj)) { + console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" +} + +// Or, using array extras +Object.entries(obj).forEach(([key, value]) => { +console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" +}); +</pre> + +<h3 id="Converting_an_Object_to_a_Map">Converting an <code>Object</code> to a <code>Map</code></h3> + +<p>{{jsxref("Map", "new Map()")}} 생성자는 반복 가능한 항목을 허용합니다. <code>Object.entries</code>를 사용하면 {{jsxref("Object")}}에서 {{jsxref("Map")}}로 쉽게 변환 할 수 있습니다.</p> + + + +<pre class="brush: js notranslate">const obj = { foo: 'bar', baz: 42 }; +const map = new Map(Object.entries(obj)); +console.log(map); // Map { foo: "bar", baz: 42 } +</pre> + +<h3 id="Iterating_through_an_Object">Iterating through an <code>Object</code></h3> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring">Array Destructuring</a>을 사용하면 객체를 쉽게 반복 할 수 있습니다.</p> + +<pre class="brush: js notranslate">const obj = { foo: 'bar', baz: 42 }; +Object.entries(obj).forEach(([key, value]) => console.log(`${key}: ${value}`)); // "foo: bar", "baz: 42" +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.entries', 'Object.entries')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.entries")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Object.values()")}}</li> + <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Map.prototype.entries()")}}</li> + <li>{{jsxref("Map.prototype.keys()")}}</li> + <li>{{jsxref("Map.prototype.values()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/freeze/index.html b/files/ko/web/javascript/reference/global_objects/object/freeze/index.html new file mode 100644 index 0000000000..6eaca7b708 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/freeze/index.html @@ -0,0 +1,257 @@ +--- +title: Object.freeze() +slug: Web/JavaScript/Reference/Global_Objects/Object/freeze +tags: + - ECMAScript 5 + - JavaScript + - Method + - Object + - Reference + - 동결 + - 변경 + - 변경가능성 + - 불변 + - 불변성 + - 잠금 +translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><code><strong>Object.freeze()</strong></code> 메서드는 객체를 <strong>동결</strong>합니다. 동결된 객체는 더 이상 변경될 수 없습니다. 즉, 동결된 객체는 새로운 속성을 추가하거나 존재하는 속성을 제거하는 것을 방지하며 존재하는 속성의 불변성, 설정 가능성(configurability), 작성 가능성이 변경되는 것을 방지하고, 존재하는 속성의 값이 변경되는 것도 방지합니다.</span> 또한, 동결 객체는 그 프로토타입이 변경되는것도 방지합니다. <code>freeze()</code>는 전달된 동일한 객체를 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-freeze.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="syntaxbox">Object.freeze(<var>obj</var>)</pre> + +<h3 id="Parameters" name="Parameters">매개변수</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>동결할 객체.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>함수로 전달된 객체.</p> + +<h2 id="Description" name="Description">설명</h2> + +<p>동결 객체의 속성 집합에는 어떠한 것도 추가하거나 제거할 수 없으며, 그리 하려는 모든 시도는 조용히 넘어가거나, {{jsxref("TypeError")}} 예외가 발생하며 실패합니다. 예외 발생은 보통 {{jsxref("Strict_mode", "엄격 모드", "", 1)}}인 경우 발생하지만, 반드시 엄격 모드로만 제한되는 것은 아닙니다.</p> + +<p>동결 객체가 가진 데이터 속성에 대해선, 값을 변경할 수 없으며 설정 가능 여부와 쓰기 가능 여부 속성 모두 거짓이 됩니다. 접근자 속성(접근자와 설정자)도 동일하게 동작합니다(또한 값을 변경하고 있다는 환상을 줍니다). 수정되는 값이 객체이고 동결된 것이 아니라면 여전히 수정이 가능함을 유의하세요. 객체로써, 배열도 동결될 수 있습니다. 동결한 이후에는 그 엘리먼트를 변경할 수 없으며 배열에 어떠한 엘리먼트도 추가하거나 제거할 수 없습니다.</p> + +<p><code>freeze()</code>는 함수에 전달한 객체를 그대로 반환하며, 동결된 객체 사본을 생성하는 것이 아닙니다.</p> + +<h2 id="Examples" name="Examples">예제</h2> + +<h3 id="객체_동결하기">객체 동결하기</h3> + +<pre class="brush: js">var obj = { + prop: function() {}, + foo: 'bar' +}; + +// 동결 이전: 새 속성을 추가할 수 있고, +// 기존 속성을 변경하거나 제거할 수 있음 +obj.foo = 'baz'; +obj.lumpy = 'woof'; +delete obj.prop; + +// 동결 +var o = Object.freeze(obj); + +// 반환 값은 전달된 객체와 동일함. +o === obj; // true + +// 객체가 동결 상태가 됨. +Object.isFrozen(obj); // === true + +// 이제 모든 변경 시도는 실패함 +obj.foo = 'quux'; // 조용하게 아무것도 하지 않음 +// 조용하게 속성을 추가하지 않음 +obj.quaxxor = 'the friendly duck'; + +// 엄격 모드에서는 이러한 시도에 대해 TypeError 발생 +function fail(){ + 'use strict'; + obj.foo = 'sparky'; // TypeError 발생 + delete obj.foo; // TypeError 발생 + delete obj.quaxxor; // 'quaxxor' 속성은 추가된 적이 없으므로 true 반환 + obj.sparky = 'arf'; // TypeError 발생 +} + +fail(); + +// Object.defineProperty를 통한 변경 시도 +// 아래 두 구문 모두에서 TypeError 발생 +Object.defineProperty(obj, 'ohai', { value: 17 }); +Object.defineProperty(obj, 'foo', { value: 'eit' }); + +// 프로토타입을 변경하는 것 또한 불가함 +// 아래 두 구문 모두에서 TypeError 발생 +Object.setPrototype(obj, { x: 20 }); +obj.__proto__ = { x: 20 }; + +</pre> + +<h3 id="배열_동결">배열 동결</h3> + +<pre class="brush: js">let a = [0]; +Object.freeze(a); // 이제 배열을 수정할 수 없음. + +a[0]=1; // 조용하게 실패 +a.push(2); // 조용하게 실패 + +// 엄격 모드에서는 이런 시도에 대해 TypeError 발생 +function fail() { + "use strict" + a[0] = 1; + a.push(2); +} + +fail();</pre> + +<p>동결된 객체는 변경할 수 없습니다. 하지만, 꼭 그렇지만은 않습니다. 다음 예제는 동결된 객체가 변경될 수 있음을(얕은 동결) 보여줍니다.</p> + +<pre class="brush: js">obj = { + internal: {} +}; + +Object.freeze(obj); +obj.internal.a = 'aValue'; + +obj.internal.a // 'aValue' +</pre> + +<p>변경될 수 없는 객체가 되려면, 모든 참조 그래프(다른 객체로의 직간접적 참조)가 오로지 불변의 동결 객체만을 참조해야 합니다. 동결된 객체는 객체 내의 모든 상태(다른 객체로의 값과 참조)가 고정되기 때문에 불변하다고 합니다. 문자열, 숫자, 불리언 값은 언제나 불변하고, 함수와 배열은 객체임을 유의하세요.</p> + +<h4 id="얕은_동결이_무엇인가요">"얕은 동결"이 무엇인가요?</h4> + +<p><code>Object.freeze(object)</code> 호출의 결과는 <code>object</code> 스스로의 직속 속성에만 적용되며, <code>object</code>에 대해서만 속성 추가, 제거, 재할당 연산을 방지합니다. 만약 그 속성의 값이 객체라면, 그 객체는 동결되지 않으며 속성 추가, 제거, 재할당의 대상이 될 수 있습니다.</p> + +<pre class="brush: js">var employee = { + name: "Mayank", + designation: "Developer", + address: { + street: "Rohini", + city: "Delhi" + } +}; + +Object.freeze(employee); + +employee.name = "Dummy"; // 비엄격 모드에서 조용하게 실패 +employee.address.city = "Noida"; // 자식 객체의 속성은 수정 가능 + +console.log(employee.address.city) // 출력: "Noida" +</pre> + +<p>객체를 불변하게 만들려면, 각 객체 타입의 속성을 재귀적으로 동결해야합니다(깊은 동결). 객체가 그 참조 그래프에서 {{interwiki("wikipedia", "Cycle_(graph_theory)", "순환")}}을 포함하지 않는다는 것을 인지하고 있을 때, 디자인을 기반으로 상황에 따라 패턴을 적용해야하며, 그렇지 않을 경우 반복문이 무한히 실행될 수 있습니다. <code>deepFreeze()</code>에 대한 개선은 객체가 불변하게 되는 과정에 있을 때 <code>deepFreeze()</code>의 재귀적인 호출을 차단할 수 있도록 경로(예, 배열) 인자를 받는 내부 함수를 소유하는 것입니다. [window]와 같은, 동결되면 안되는 객체를 동결하는 것에 대한 위험은 여전히 남아 있습니다.</p> + +<pre class="brush: js">function deepFreeze(object) { + + // 객체에 정의된 속성명을 추출 + var propNames = Object.getOwnPropertyNames(object); + + // 스스로를 동결하기 전에 속성을 동결 + + for (let name of propNames) { + let value = object[name]; + + object[name] = value && typeof value === "object" ? + deepFreeze(value) : value; + } + + return Object.freeze(object); +} + +var obj2 = { + internal: { + a: null + } +}; + +deepFreeze(obj2); + +obj2.internal.a = 'anotherValue'; // 비엄격 모드에서 조용하게 실패 +obj2.internal.a; // null +</pre> + +<h2 id="Notes" name="Notes">사용 노트</h2> + +<p>ES5에서는, 이 메소드에 대한 인자가 객체(원시형)가 아닐 경우, {{jsxref("TypeError")}}가 발생합니다. ES2015에서는, 비객체 인자가 동결된 평범한 객체인것처럼 다루어져 반환됩니다.</p> + +<pre class="brush: js">> Object.freeze(1) +TypeError: 1 is not an object // ES5 code + +> Object.freeze(1) +1 // ES2015 code +</pre> + +<p>엘리먼트를 갖는 {{domxref("ArrayBufferView")}}는 메모리를 통한 뷰이므로 다른 가능한 문제를 유발 할 수 있어 {{jsxref("TypeError")}}가 발생합니다.</p> + +<pre class="brush: js">> Object.freeze(new Uint8Array(0)) // 엘리먼트가 없음 +Uint8Array [] + +> Object.freeze(new Uint8Array(1)) // 엘리먼트를 가짐 +TypeError: Cannot freeze array buffer views with elements + +> Object.freeze(new DataView(new ArrayBuffer(32))) // 엘리먼트가 없음 +DataView {} + +> Object.freeze(new Float64Array(new ArrayBuffer(64), 63, 0)) // 엘리먼트가 없음 +Float64Array [] + +> Object.freeze(new Float64Array(new ArrayBuffer(64), 32, 2)) // 엘리먼트를 가짐 +TypeError: Cannot freeze array buffer views with elements</pre> + +<p>세 가지 표준 속성(<code>buf.byteLength</code>, <code>buf.byteOffset</code>, <code>buf.buffer</code>)은 읽기 전용(이들은 {jsxref("ArrayBuffer")}} 또는 {{jsxref("SharedArrayBuffer")}}이므로)이므로, 이러한 속성에 대해 동결을 시도할 이유가 없음을 유의합니다.</p> + +<h3 id="Object.seal과의_비교"><code>Object.seal()</code>과의 비교</h3> + +<p>{{jsxref("Object.seal()")}}을 사용해 봉인된 객체는 존재하는 속성을 변경할 수 있습니다. <code>Object.freeze()</code>로 동결된 객체에서는 존재하는 속성이 불변입니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.9', 'Object.freeze')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>초기 정의. JavaScript 1.8.5에서 구현됨.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.freeze', 'Object.freeze')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.freeze', 'Object.freeze')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.Object.freeze")}}</p> + +<h2 id="함께_보기">함께 보기</h2> + +<ul> + <li>{{jsxref("Object.isFrozen()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/fromentries/index.html b/files/ko/web/javascript/reference/global_objects/object/fromentries/index.html new file mode 100644 index 0000000000..4d74fc326a --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/fromentries/index.html @@ -0,0 +1,98 @@ +--- +title: Object.fromEntries() +slug: Web/JavaScript/Reference/Global_Objects/Object/fromEntries +tags: + - JavaScript + - Method + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/fromEntries +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.fromEntries()</strong></code> 메서드는 키값 쌍의 목록을 객체로 바꿉니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-fromentries.html")}}</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Object.fromEntries(<var>iterable</var>);</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>iterable</code></dt> + <dd>반복 가능한 객체. 즉, {{jsxref("Array")}}, {{jsxref("Map")}} 또는 <a href="/ko/docs/Web/JavaScript/Reference/Iteration_protocols">반복 규약</a>을 구현한 기타 객체.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>속성의 키와 값을 반복 가능한 객체에서 가져온 새로운 객체.</p> + +<h2 id="설명">설명</h2> + +<p><code>Object.fromEntries()</code> 메서드는 키값 쌍 목록을 받고, 그 목록을 사용해 속성을 부여한 새로운 객체를 반환합니다. <code>iterable</code> 인자는 <code>@@iterator</code> 메서드를 구현하여 반복기 객체를 반환해야 하고, 그 반복기는 또 배열 형태의 객체로 요소 2개를 반환해야 합니다. 반환된 요소 중 첫 번째는 생성할 객체의 속성 키로, 두 번째는 속성 값으로 사용합니다.</p> + +<p><code>Object.fromEntries()</code>는{{jsxref("Object.entries()")}}의 역을 수행합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Map에서_Object로"><code>Map</code>에서 <code>Object</code>로</h3> + +<pre class="brush: js">const map = new Map([ ['foo', 'bar'], ['baz', 42] ]); +const obj = Object.fromEntries(map); +console.log(obj); // { foo: "bar", baz: 42 } +</pre> + +<h3 id="Array에서_Object로"><code>Array</code>에서 <code>Object</code>로</h3> + +<pre class="brush: js">const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]; +const obj = Object.fromEntries(arr); +console.log(obj); // { 0: "a", 1: "b", 2: "c" } +</pre> + +<h3 id="객체_변환">객체 변환</h3> + +<p><code>Object.fromEntries()</code>와 그 역인 {{jsxref("Object.entries()")}}, 그리고 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#메서드_2">배열 변형 메서드</a>를 통해 객체를 변환할 수 있습니다.</p> + +<pre class="brush: js">const object1 = { a: 1, b: 2, c: 3 }; + +const object2 = Object.fromEntries( + Object.entries(object1) + .map(([ key, val ]) => [ key, val * 2 ]) +); + +console.log(object2); +// { a: 2, b: 4, c: 6 }</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://tc39.github.io/proposal-object-from-entries/">https://tc39.github.io/proposal-object-from-entries</a></td> + <td>Stage 3</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.Object.fromEntries")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Object.entries()")}}</li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Object.values()")}}</li> + <li>{{jsxref("Map.prototype.entries()")}}</li> + <li>{{jsxref("Map.prototype.keys()")}}</li> + <li>{{jsxref("Map.prototype.values()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html b/files/ko/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html new file mode 100644 index 0000000000..c3be0cbaae --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html @@ -0,0 +1,126 @@ +--- +title: Object.getOwnPropertyDescriptor() +slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor +tags: + - ECMAScript5 + - JavaScript + - Method + - Object +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.getOwnPropertyDescriptor()</strong></code> 메서드는 주어진 객체 <dfn>자신의 속성</dfn>(즉, 객체에 직접 제공하는 속성, 객체의 프로토타입 체인을 따라 존재하는 덕택에 제공하는 게 아닌)에 대한 속성 설명자(descriptor)를 반환합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code>Object.getOwnPropertyDescriptor(<var>obj</var>, <var>prop</var>)</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>속성을 찾을 대상 객체.</dd> + <dt><code>prop</code></dt> + <dd>설명이 검색될 속성명.</dd> +</dl> + +<h3 id="반환값">반환값</h3> + +<p>객체에 존재하는 경우 주어진 속성의 속성 설명자, 없으면 {{jsxref("undefined")}}.</p> + +<h2 id="설명">설명</h2> + +<p>이 메서드는 정확한 속성 설명의 검사를 허용합니다. JavaScript에서 <dfn>속성</dfn>은 문자열 값인 이름과 속성 설명자로 구성됩니다. 속성 설명자 유형과 attribute에 관한 자세한 정보는 {{jsxref("Object.defineProperty()")}}에서 찾을 수 있습니다.</p> + +<p><dfn>속성 설명자</dfn>는 다음 attribute 중 일부의 기록입니다:</p> + +<dl> + <dt><code>value</code></dt> + <dd>속성과 관련된 값 (데이터 설명자만).</dd> + <dt><code><strong>writable</strong></code></dt> + <dd>속성과 관련된 값이 변경될 수 있는 경우에만 <code>true</code> (데이터 설명자만).</dd> + <dt><code>get</code></dt> + <dd>속성에 대해 getter로서 제공하는 함수 또는 getter가 없는 경우 {{jsxref("undefined")}} (접근자 설명자만).</dd> + <dt><code>set</code></dt> + <dd>속성에 대해 setter로서 제공하는 함수 또는 setter가 없는 경우 {{jsxref("undefined")}} (접근자 설명자만).</dd> + <dt><code>configurable</code></dt> + <dd>이 속성 설명자의 유형이 바뀔 수 있는 경우에만 그리고 속성이 해당 객체에서 삭제될 수 있는 경우 <code>true</code>.</dd> + <dt><code>enumerable</code></dt> + <dd>이 속성이 해당 객체의 속성 열거 중에 나타나는 경우에만 <code>true</code>.</dd> +</dl> + +<h2 id="예">예</h2> + +<pre class="brush: js">var o, d; + +o = { get foo() { return 17; } }; +d = Object.getOwnPropertyDescriptor(o, 'foo'); +// d는 { configurable: true, enumerable: true, get: /* getter 함수 */, set: undefined } + +o = { bar: 42 }; +d = Object.getOwnPropertyDescriptor(o, 'bar'); +// d는 { configurable: true, enumerable: true, value: 42, writable: true } + +o = {}; +Object.defineProperty(o, 'baz', { value: 8675309, writable: false, enumerable: false }); +d = Object.getOwnPropertyDescriptor(o, 'baz'); +// d는 { value: 8675309, writable: false, enumerable: false, configurable: false } +</pre> + +<h2 id="주의">주의</h2> + +<p>ES5에서, 이 메서드의 첫 번째 인수가 비객체(원시형)인 경우, 그러면 {{jsxref("TypeError")}}가 발생합니다. ES6에서, 비객체 첫 번째 인수는 먼저 객체로 강제됩니다.</p> + +<pre class="brush: js">Object.getOwnPropertyDescriptor("foo", 0); +// TypeError: "foo"는 객체가 아닙니다 // ES5 코드 + +Object.getOwnPropertyDescriptor("foo", 0); +// {configurable:false, enumerable:true, value:"f", writable:false} // ES6 코드 +</pre> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.3', 'Object.getOwnPropertyDescriptor')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>초기 정의. JavaScript 1.8.5에서 구현됨.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> +<div> + + +<p>{{Compat("javascript.builtins.Object.getOwnPropertyDescriptor")}}</p> +</div> +</div> + +<p> </p> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/getprototypeof/index.html b/files/ko/web/javascript/reference/global_objects/object/getprototypeof/index.html new file mode 100644 index 0000000000..12a65e24de --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/getprototypeof/index.html @@ -0,0 +1,134 @@ +--- +title: Object.getPrototypeOf() +slug: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf +tags: + - ECMAScript5 + - JavaScript + - Method + - Object +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.getPrototypeOf()</strong></code> 메서드는 지정된 객체의 프로토타입(가령 내부 <code>[[Prototype]]</code> 속성값)을 반환합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code>Object.getPrototypeOf(<var>obj</var>)</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>자신의 프로토타입이 반환되는 객체.</dd> +</dl> + +<h2 id="예">예</h2> + +<pre class="brush: js">var proto = {}; +var obj = Object.create(proto); +Object.getPrototypeOf(obj) === proto; // true +</pre> + +<h2 id="주의">주의</h2> + +<p>ES5에서, <code>obj</code> 매개변수가 객체가 아닌 경우 {{jsxref("TypeError")}} 예외가 발생합니다. ES6에서, 매개변수는 {{jsxref("Object")}}로 강제됩니다.</p> + +<pre class="brush: js">Object.getPrototypeOf("foo"); +// TypeError: "foo"는 객체가 아닙니다 (ES5 코드) +Object.getPrototypeOf("foo"); +// String.prototype (ES6 코드) +</pre> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.2', 'Object.getPrototypeOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.getprototypeof', 'Object.getProtoypeOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.getprototypeof', 'Object.getProtoypeOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("5")}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("12.10")}}</td> + <td>{{CompatSafari("5")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Opera_전용_주의사항">Opera 전용 주의사항</h2> + +<p>이전 Opera 버전이 <code>Object.getPrototypeOf()</code>를 아직 지원하지 않지만, Opera는 Opera 10.50 이후로 비표준 {{jsxref("Object.proto", "__proto__")}} 속성을 지원합니다.</p> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li> + <li>{{jsxref("Object.setPrototypeOf()")}}</li> + <li>{{jsxref("Object.prototype.__proto__")}}</li> + <li>John Resig의 <a class="external" href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf</a> 포스트</li> + <li>{{jsxref("Reflect.getPrototypeOf()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/hasownproperty/index.html b/files/ko/web/javascript/reference/global_objects/object/hasownproperty/index.html new file mode 100644 index 0000000000..40a544043c --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/hasownproperty/index.html @@ -0,0 +1,146 @@ +--- +title: Object.prototype.hasOwnProperty() +slug: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty +tags: + - JavaScript + - Method + - Object + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty +--- +<div>{{JSRef}}</div> + +<p><code><strong>hasOwnProperty()</strong></code> 메소드는 객체가 특정 프로퍼티를 가지고 있는지를 나타내는 불리언 값을 반환한다.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-hasownproperty.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>obj</var>.hasOwnProperty(<var>prop</var>)</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>테스트하려는 프로퍼티의 명칭</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>모든 객체는 <code>hasOwnProperty</code> 를 상속하는 {{jsxref("Object")}}의 자식이다. 이 메소드는 객체가 특정 프로퍼티를 자기만의 직접적인 프로퍼티로서 소유하고 있는지를 판단하는데 사용된다. {{jsxref("Operators/in", "in")}} 연산과는 다르게, 이 메소드는 객체의 프로토타입 체인을 확인하지는 않는다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="프로퍼티의_존재_여부를_테스트하기_위한_hasOwnProperty의_사용">프로퍼티의 존재 여부를 테스트하기 위한 <code>hasOwnProperty</code>의 사용</h3> + +<p>다음은 o 객체가 prop라는 명칭을 지닌 프로퍼티를 포함하는지를 판단하는 예제이다.</p> + +<pre class="brush: js">o = new Object(); +o.prop = 'exists'; + +function changeO() { + o.newprop = o.prop; + delete o.prop; +} + +o.hasOwnProperty('prop'); // returns true +changeO(); +o.hasOwnProperty('prop'); // returns false +</pre> + +<h3 id="직접_프로퍼티와_상속된_프로퍼티의_비교">직접 프로퍼티와 상속된 프로퍼티의 비교</h3> + +<p>다음은 직접 프로퍼티와 프로토타입 체인에서 상속된 프로퍼티 간의 차이점을 비교하는 예제이다.</p> + +<pre class="brush: js">o = new Object(); +o.prop = 'exists'; +o.hasOwnProperty('prop'); // returns true +o.hasOwnProperty('toString'); // returns false +o.hasOwnProperty('hasOwnProperty'); // returns false +</pre> + +<h3 id="객체의_프로퍼티들을_순환하기">객체의 프로퍼티들을 순환하기</h3> + +<p>The following example shows how to iterate over the properties of an object without executing on inherit properties. Note that the {{jsxref("Statements/for...in", "for...in")}} loop is already only iterating enumerable items, so one should not assume based on the lack of non-enumerable properties shown in the loop that <code>hasOwnProperty</code> itself is confined strictly to enumerable items (as with {{jsxref("Object.getOwnPropertyNames()")}}).</p> + +<pre class="brush: js">var buz = { + fog: 'stack' +}; + +for (var name in buz) { + if (buz.hasOwnProperty(name)) { + console.log('this is fog (' + name + ') for sure. Value: ' + buz[name]); + } + else { + console.log(name); // toString or something else + } +} +</pre> + +<h3 id="프로퍼티의_명칭으로서_hasOwnProperty_를_사용하기">프로퍼티의 명칭으로서 <code>hasOwnProperty </code>를 사용하기</h3> + +<p>자바스크립트는 프로퍼티 명칭으로서 <code>hasOwnProperty</code>를 보호하지 않습니다. 그러므로, 이 명칭을 사용하는 프로퍼티를 가지는 객체가 존재하려면, 올바른 결과들을 얻기 위해서는 외부 <code>hasOwnProperty</code> 를 사용해야합니다.</p> + +<pre class="brush: js">var foo = { + hasOwnProperty: function() { + return false; + }, + bar: 'Here be dragons' +}; + +foo.hasOwnProperty('bar'); // always returns false + +// Use another Object's hasOwnProperty and call it with 'this' set to foo +({}).hasOwnProperty.call(foo, 'bar'); // true + +// It's also possible to use the hasOwnProperty property from the Object prototype for this purpose +Object.prototype.hasOwnProperty.call(foo, 'bar'); // true +</pre> + +<p>Note that in the last case there are no newly created objects.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.5.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Object.hasOwnProperty")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Statements/for...in", "for...in")}}</li> + <li>{{jsxref("Operators/in", "in")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_Revisited">JavaScript Guide: Inheritance revisited</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/index.html b/files/ko/web/javascript/reference/global_objects/object/index.html new file mode 100644 index 0000000000..ce7e6c6603 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,177 @@ +--- +title: Object +slug: Web/JavaScript/Reference/Global_Objects/Object +tags: + - Constructor + - JavaScript + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object +--- +<div>{{JSRef}}</div> + +<p><strong><code>Object</code></strong> 생성자는 객체 래퍼(wrapper)를 생성합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">// 객체 초기자 또는 리터럴 +{ [ <var>nameValuePair1</var>[, <var>nameValuePair2</var>[, ...<var>nameValuePairN</var>] ] ] } + +// 생성자 +new Object([<var>value</var>])</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>nameValuePair1, nameValuePair2, ... nameValuePair<em>N</em></code></dt> + <dd>콜론으로 나뉘어져 있는 키(문자열)와 값(어떤 값이나 가능)의 쌍.</dd> + <dt><code>value</code></dt> + <dd>아무 값.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p><code>Object</code> 생성자는 주어진 값의 객체 래퍼를 생성합니다. 주어진 값이 {{jsxref("null")}}이거나 {{jsxref("undefined")}}면 빈 객체를 생성해 반환하고, 그렇지 않으면 값에 맞는 자료형의 객체를 반환합니다. 만약 값이 이미 객체이면 그 값을 그대로 반환합니다.</p> + +<p>생성자가 아닌 맥락에서 호출하면 <code>Object</code>는 <code>new Object()</code>와 동일하게 동작합니다.</p> + +<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer">객체 초기자(리터럴 구문)</a>도 참고하세요.</p> + +<h2 id="Object_생성자의_속성"><code>Object</code> 생성자의 속성</h2> + +<dl> + <dt><code>Object.length</code></dt> + <dd>1의 값을 가집니다.</dd> +</dl> + +<dl> + <dt>{{jsxref("Object.prototype")}}</dt> + <dd><code>Object</code> 형의 모든 객체에 속성을 추가할 수 있습니다.</dd> +</dl> + +<h2 id="Object_생성자의_메서드"><code>Object</code> 생성자의 메서드</h2> + +<dl> + <dt>{{jsxref("Object.assign()")}}</dt> + <dd>하나 이상의 원본 객체들로부터 모든 열거가능한 속성들을 대상 객체로 복사합니다.</dd> + <dt>{{jsxref("Object.create()")}}</dt> + <dd>주어진 프로토타입(prototype)의 객체와 속성들을 갖고 있는 새 객체를 생성합니다.</dd> + <dt>{{jsxref("Object.defineProperty()")}}</dt> + <dd>주어진 기술자(descriptor)에 의해 기술된(described) 이름붙은 속성을 객체에 추가합니다.</dd> + <dt>{{jsxref("Object.defineProperties()")}}</dt> + <dd>주어진 기술자들에 맞는 이름붙은 속성들을 객체에 추가합니다.</dd> + <dt>{{jsxref("Object.freeze()")}}</dt> + <dd>객체를 프리징(freeze)합니다. 즉, 다른 곳의 코드에서 객체의 속성을 지우거나 바꿀 수 없습니다.</dd> + <dt>{{jsxref("Object.getOwnPropertyDescriptor()")}}</dt> + <dd>객체의 이름붙은 속성의 기술자를 반환합니다.</dd> + <dt>{{jsxref("Object.getOwnPropertyNames()")}}</dt> + <dd>주어진 객체 <strong>자신만의</strong> 열거가능하거나 열거불가능한 속성들의 이름을 포함하는 배열(array)을 반환합니다.</dd> + <dt>{{jsxref("Object.getOwnPropertySymbols()")}}</dt> + <dd>주어진 객체에서 바로 찾을 수 있는 모든 심볼 속성을 배열로 반환합니다.</dd> + <dt>{{jsxref("Object.getPrototypeOf()")}}</dt> + <dd>명시된 객체의 프로토타입을 반환.</dd> + <dt>{{jsxref("Object.is()")}}</dt> + <dd>두 값이 같은지를 비교합니다. 모든 NaN 값은 같다고 처리됩니다.(다른 추상적 또는 엄격한 등호 비교에서는 다르게 처리됩니다)</dd> + <dt>{{jsxref("Object.isExtensible()")}}</dt> + <dd>객체의 확장이 가능한지 확인합니다.</dd> + <dt>{{jsxref("Object.isFrozen()")}}</dt> + <dd>객체가 프리징 되었는지 확인합니다.</dd> + <dt>{{jsxref("Object.isSealed()")}}</dt> + <dd>객체가 실링(seal) 되었는지 확인합니다.</dd> + <dt>{{jsxref("Object.keys()")}}</dt> + <dd>주어진 객체 <strong>자신의 </strong>열거가능한 속성들의 이름의 배열을 반환합니다.</dd> + <dt>{{jsxref("Object.preventExtensions()")}}</dt> + <dd>객체가 확장되는 것을 못하도록 합니다.</dd> + <dt>{{jsxref("Object.seal()")}}</dt> + <dd>다른 코드가 객체의 속성을 삭제하지 못하도록 합니다.</dd> + <dt>{{jsxref("Object.setPrototypeOf()")}}</dt> + <dd>프로토타입(즉, 내부의 <code>[[Prototype]]</code> 속성)을 설정합니다.</dd> +</dl> + +<dl> + <dt>{{jsxref("Object.values()")}}</dt> + <dd>주어진 객체의 열거가능한 모든 스트링 속성들의 값들을 포함하고 있는 배열을 반환합니다.</dd> +</dl> + +<h2 id="Object_instances" name="Object_instances"><code>Object</code> 인스턴스와 <code>Object</code> 프로토타입 객체</h2> + +<p>JavaScript에서 모든 객체들은 <code>Object</code>의 자손입니다. 모든 객체는 {{jsxref("Object.prototype")}}으로부터 메서드와 속성을 상속하는데, 나중에 덮어 쓸 수도 있습니다. 예를 들어, 다른 생성자의 프로토타입은 그 <code>constructor</code> 속성을 덮어쓰고 자신의 <code>toString()</code> 메소드들을 제공합니다. <code>Object</code> 프로토타입 객체에 대한 변경 내용은 그 변경 내용에 영향을 받는 속성들과 메소드들이 프로토타입 체인(chain)을 따라 더이상 무시되지 않는한, 모든 객체들로 전달됩니다.</p> + +<h3 id="속성">속성</h3> + +<div>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', '속성') }}</div> + +<h3 id="메서드">메서드</h3> + +<div>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', '메서드') }}</div> + +<h2 id="Examples" name="Examples">예제</h2> + +<h3 id="Example.3A_Using_Object_given_undefined_and_null_types" name="Example.3A_Using_Object_given_undefined_and_null_types"><code>undefined</code>와 <code>null</code>을 지정</h3> + +<p>다음 예제는 변수 <code>o</code>에 빈 <code>Object</code> 객체를 저장합니다.</p> + +<pre class="brush: js">var o = new Object(); +</pre> + +<pre class="brush: js">var o = new Object(undefined); +</pre> + +<pre class="brush: js">var o = new Object(null); +</pre> + +<h3 id="Object로_Boolean_객체_생성하기"><code>Object</code>로 <code>Boolean</code> 객체 생성하기</h3> + +<p>다음 예제는 변수 <code>o</code>에 {{jsxref("Boolean")}} 객체를 저장합니다.</p> + +<pre class="brush: js">// o = new Boolean(true)과 같음 +var o = new Object(true); +</pre> + +<pre class="brush: js">// o = new Boolean(false)과 같음 +var o = new Object(Boolean()); +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2', 'Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object-objects', 'Object')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Added Object.assign, Object.getOwnPropertySymbols, Object.setPrototypeOf, Object.is</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-objects', 'Object')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Added Object.entries, Object.values and Object.getOwnPropertyDescriptors.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Object")}}</p> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer">Object initializer</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/is/index.html b/files/ko/web/javascript/reference/global_objects/object/is/index.html new file mode 100644 index 0000000000..2ead91a88a --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/is/index.html @@ -0,0 +1,124 @@ +--- +title: Object.is() +slug: Web/JavaScript/Reference/Global_Objects/Object/is +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/is +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.is()</strong></code> 메서드는 두 값이 <a href="/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness">같은 값</a>인지 결정합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code>Object.is(<var>value1</var>, <var>value2</var>);</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>value1</code></dt> + <dd>비교할 첫 번째 값.</dd> + <dt><code>value2</code></dt> + <dd>비교할 두 번째 값.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>두 인수가 같은 값인지 여부를 나타내는 {{jsxref("Boolean")}}.</p> + +<h2 id="설명">설명</h2> + +<p><code>Object.is()</code>는 두 값이 <a href="/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness">같은 값</a>인지 결정합니다. 다음 중 하나를 만족하면 두 값은 같습니다.</p> + +<ul> + <li>둘 다 {{jsxref("undefined")}}</li> + <li>둘 다 {{jsxref("null")}}</li> + <li>둘 다 <code>true</code> 또는 둘 다 <code>false</code></li> + <li>둘 다 같은 문자에 같은 길이인 문자열</li> + <li>둘 다 같은 객체</li> + <li>둘 다 숫자이며 + <ul> + <li>둘 다 <code>+0</code></li> + <li>둘 다 <code>-0</code></li> + <li>둘 다 {{jsxref("NaN")}}</li> + <li>둘 다 0이나 {{jsxref("NaN")}}이 아니고 같은 값을 지님</li> + </ul> + </li> +</ul> + +<p>이는 {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}} 연산자에 따른 같음과 같지 <em>않습니다</em>. {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}} 연산자는 같음을 테스트하기 전에 양 쪽(이 같은 형이 아니라면)에 다양한 강제(coercion)를 적용하지만(<code>"" == false</code>가 <code>true</code>가 되는 그런 행동을 초래), <code>Object.is</code>는 어느 값도 강제하지 않습니다.</p> + +<p>이는 {{jsxref("Operators/Comparison_Operators", "===", "#Identity")}} 연산자에 따른 같음과도 같지 <em>않습니다</em>. {{jsxref("Operators/Comparison_Operators", "===", "#Identity")}} 연산자(와 {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}} 연산자 역시)는 숫자값 <code>-0</code>과 <code>+0</code>을 같게 {{jsxref("Number.NaN")}}은 {{jsxref("NaN")}}과 같지 않게 여깁니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">Object.is('foo', 'foo'); // true +Object.is(window, window); // true + +Object.is('foo', 'bar'); // false +Object.is([], []); // false + +var test = { a: 1 }; +Object.is(test, test); // true + +Object.is(null, null); // true + +// 특별한 경우 +Object.is(0, -0); // false +Object.is(-0, -0); // true +Object.is(NaN, 0/0); // true +</pre> + +<h2 id="폴리필">폴리필</h2> + +<pre class="brush: js">if (!Object.is) { + Object.is = function(x, y) { + // SameValue 알고리즘 + if (x === y) { // Steps 1-5, 7-10 + // Steps 6.b-6.e: +0 != -0 + return x !== 0 || 1 / x === 1 / y; + } else { + // Step 6.a: NaN == NaN + return x !== x && y !== y; + } + }; +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.is', 'Object.is')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.is', 'Object.is')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Object.is")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness">같음 비교 및 똑같음</a> — 똑같음 내장 기능 3가지 모두 비교</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/isextensible/index.html b/files/ko/web/javascript/reference/global_objects/object/isextensible/index.html new file mode 100644 index 0000000000..bfe247c6e8 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/isextensible/index.html @@ -0,0 +1,110 @@ +--- +title: Object.isExtensible() +slug: Web/JavaScript/Reference/Global_Objects/Object/isExtensible +tags: + - ECMAScript 5 + - JavaScript + - Method + - Object +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isExtensible +--- +<div>{{JSRef}}</div> + +<p><strong><code>Object.isExtensible()</code></strong> 메서드는 객체가 확장 가능한지(객체에 새 속성을 추가할 수 있는지 여부)를 결정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-isextensible.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code>Object.isExtensible(<var>obj</var>)</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>판별할 객체.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>객체의 확장 가능 여부를 나타내는 {{jsxref("Boolean")}}.</p> + +<h2 id="설명">설명</h2> + +<p>객체는 기본으로 확장 가능입니다: 새로운 속성이 추가될 수 있고 ({{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}} 속성을 지원하는 엔진에서는) 수정될 수 있습니다. 객체는 {{jsxref("Object.preventExtensions()")}}, {{jsxref("Object.seal()")}} 또는 {{jsxref("Object.freeze()")}}를 사용하여 확장 불가로 표시될 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">// 새로운 객체는 확장 가능입니다. +var empty = {}; +Object.isExtensible(empty); // === true + +// ...하지만 변경될 수 있습니다. +Object.preventExtensions(empty); +Object.isExtensible(empty); // === false + +// 봉인된 객체는 정의에 의해 확장 불가입니다. +var sealed = Object.seal({}); +Object.isExtensible(sealed); // === false + +// 동결된 객체 또한 정의에 의해 확장 불가입니다. +var frozen = Object.freeze({}); +Object.isExtensible(frozen); // === false +</pre> + +<h2 id="주의">주의</h2> + +<p>ES5에서, 이 메서드의 인수가 비객체(원시형)인 경우, 그러면 {{jsxref("TypeError")}}가 발생합니다. ES6에서, 비객체 인수는 확장 불가인 보통 객체처럼 다뤄집니다, 그저 <code>false</code>를 반환하는.</p> + +<pre class="brush: js">Object.isExtensible(1); +// TypeError: 1은 객체가 아닙니다 (ES5 코드) + +Object.isExtensible(1); +// false (ES6 코드) +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.13', 'Object.isExtensible')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>초기 정의. JavaScript 1.8.5에서 구현됨.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.isextensible', 'Object.isExtensible')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.isextensible', 'Object.isExtensible')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Object.isExtensible")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.isFrozen()")}}</li> + <li>{{jsxref("Reflect.isExtensible()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/isfrozen/index.html b/files/ko/web/javascript/reference/global_objects/object/isfrozen/index.html new file mode 100644 index 0000000000..0d8999fc4f --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/isfrozen/index.html @@ -0,0 +1,155 @@ +--- +title: Object.isFrozen() +slug: Web/JavaScript/Reference/Global_Objects/Object/isFrozen +tags: + - ECMAScript 5 + - JavaScript + - Method + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isFrozen +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.isFrozen()</strong></code>은 객체가 {{jsxref("Object.freeze()", "동결", "", 1)}}됐는지 판별합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-isfrozen.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code>Object.isFrozen(<var>obj</var>)</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>판별할 객체.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>객체의 동결 여부를 나타내는 {{jsxref("Boolean")}}.</p> + +<h2 id="설명">설명</h2> + +<p>객체는 {{jsxref("Object.isExtensible()", "확장 불가", "", 1)}}이며 모든 속성이 설정 불가 및 모든 데이터 속성(즉, getter 또는 setter 요소가 있는 접근자 속성이 아닌 속성)이 쓰기 불가인 경우에만 동결됩니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">// 새로운 객체는 확장 가능해서 동결되지 않습니다. +Object.isFrozen({}); // === false + +// 확장 불가인 빈 객체는 빈 채로 동결됩니다. +var vacuouslyFrozen = Object.preventExtensions({}); +Object.isFrozen(vacuouslyFrozen); // === true + +// 속성이 하나 있는 새 객체도 확장 가능하므로 동결되지 않습니다. +var oneProp = { p: 42 }; +Object.isFrozen(oneProp); // === false + +// 객체 확장을 막아도 여전히 동결되지 않습니다, +// 속성이 여전히 설정 가능(및 쓰기 가능)하기에. +Object.preventExtensions(oneProp); +Object.isFrozen(oneProp); // === false + +// ...그렇지만 그 속성 삭제는 객체를 빈 채로 동결되게 합니다. +delete oneProp.p; +Object.isFrozen(oneProp); // === true + +// 쓰기 불가지만 여전히 설정 가능한 속성이 있는 확장 불가 객체는 동결되지 않습니다. +var nonWritable = { e: 'plep' }; +Object.preventExtensions(nonWritable); +Object.defineProperty(nonWritable, 'e', { writable: false }); // 쓰기 불가로 함 +Object.isFrozen(nonWritable); // === false + +// 그 속성을 설정 불가로 바꾸면 객체를 동결되게 합니다. +Object.defineProperty(nonWritable, 'e', { configurable: false }); // 설정 불가로 함 +Object.isFrozen(nonWritable); // === true + +// 설정 불가지만 여전히 쓰기 가능 속성이 있는 확장 불가 객체도 동결되지 않습니다. +var nonConfigurable = { release: 'the kraken!' }; +Object.preventExtensions(nonConfigurable); +Object.defineProperty(nonConfigurable, 'release', { configurable: false }); +Object.isFrozen(nonConfigurable); // === false + +// 그 속성을 쓰기 불가로 바꾸면 객체를 동결되게 합니다. +Object.defineProperty(nonConfigurable, 'release', { writable: false }); +Object.isFrozen(nonConfigurable); // === true + +// 설정 가능 접근자 속성이 있는 확장 불가 객체는 동결되지 않습니다. +var accessor = { get food() { return 'yum'; } }; +Object.preventExtensions(accessor); +Object.isFrozen(accessor); // === false + +// ...하지만 그 속성을 설정 불가로 하면 동결됩니다. +Object.defineProperty(accessor, 'food', { configurable: false }); +Object.isFrozen(accessor); // === true + +// 하지만 동결되는 객체를 위한 가장 쉬운 방법은 객체에 Object.freeze가 호출된 경우입니다. +var frozen = { 1: 81 }; +Object.isFrozen(frozen); // === false +Object.freeze(frozen); +Object.isFrozen(frozen); // === true + +// 정의에 의해, 동결된 객체는 확장 불가입니다. +Object.isExtensible(frozen); // === false + +// 또한 정의에 의해, 동결된 객체는 봉인됩니다. +Object.isSealed(frozen); // === true +</pre> + +<h2 id="주의">주의</h2> + +<p>ES5에서, 이 메서드의 인수가 비객체(원시형)인 경우, 그러면 {{jsxref("TypeError")}}가 발생합니다. ES6에서, 비객체 인수는 마치 동결된 보통 객체였던 것처럼 취급됩니다, 그저 <code>true</code>를 반환하는.</p> + +<pre class="brush: js">Object.isFrozen(1); +// TypeError: 1은 객체가 아닙니다 (ES5 코드) + +Object.isFrozen(1); +// true (ES6 코드) +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.12', 'Object.isFrozen')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>초기 정의. JavaScript 1.8.5에서 구현됨.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.isfrozen', 'Object.isFrozen')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.isfrozen', 'Object.isFrozen')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Object.isFrozen")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/isprototypeof/index.html b/files/ko/web/javascript/reference/global_objects/object/isprototypeof/index.html new file mode 100644 index 0000000000..0e9de96b41 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/isprototypeof/index.html @@ -0,0 +1,111 @@ +--- +title: Object.prototype.isPrototypeOf() +slug: Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf +tags: + - JavaScript + - Method + - Object + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf +--- +<div>{{JSRef}}</div> + +<p><code><strong>isPrototypeOf()</strong></code> 메소드는 해당 객체가 다른 객체의 프로토타입 체인에 속한 객체인지 확인하기 위해 사용됩니다.</p> + +<div class="note"> +<p><strong>Note:</strong> <code>isPrototypeOf</code> 는 {{jsxref("Operators/instanceof", "instanceof")}} 연산자와 다릅니다. "<code>object instanceof AFunction</code>"표현식에서는 <code>object</code>의 프로토타입 체인을 AFunction 자체가 아니라 <code>AFunction.prototype에 대해 </code>확인을 합니다.</p> +</div> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="syntaxbox"><var>prototypeObj</var>.isPrototypeOf(<var>obj</var>)</pre> + +<h3 id="Parameters" name="Parameters">매개변수</h3> + +<dl> + <dt><code>object</code></dt> + <dd>프로토타입 체인을 가지고 있는 객체가 검색될 것 입니다.</dd> +</dl> + +<h2 id="Description" name="Description">설명</h2> + +<p><code>isPrototypeOf</code> 메소드는 또 다른 객체의 프로토타입 체인에 해당 객체가 존재하는지 여부를 확인할수 있습니다.</p> + +<p>예를들어, 다음의 프로토타입체인을 고려해봅시다.</p> + +<pre class="brush: js">function Fee() { + // ... +} + +function Fi() { + // ... +} +Fi.prototype = new Fee(); + +function Fo() { + // ... +} +Fo.prototype = new Fi(); + +function Fum() { + // ... +} +Fum.prototype = new Fo(); +</pre> + +<p>실행되고 나면 <strong>Fum</strong> 인스턴스의 프로토타입체인이 <strong>Fi</strong>의 프로토타입과 연결되어있는지를 확인할 필요가 있습니다. 다음과 같은 방법으로 확인할 수 있습니다:</p> + +<pre class="brush: js">var fum = new Fum(); +// ... + +if (Fi.prototype.isPrototypeOf(fum)) { + // do something safe +} +</pre> + +<p>이 메소드는 {{jsxref("Operators/instanceof", "instanceof")}} 연산자와 함께 특정 프로토타입으로부터 상속된 객체만 작동하게 하려는(예를 들어 특정 메소드나 속성이 객체에 있다는걸 보장하려는 때) 코드에서 특히 쓸모가 많다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>ECMAScript 3rd Edition.</td> + <td>Standard</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Object.isPrototypeOf")}}</p> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li>{{jsxref("Operators/instanceof", "instanceof")}}</li> + <li>{{jsxref("Object.getPrototypeOf()")}}</li> + <li> + <div><span style="font-size: 14px; line-height: 1.5;">{{jsxref("Object.setPrototypeOf()")}}</span></div> + </li> + <li>{{jsxref("Object.prototype.__proto__")}} </li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/issealed/index.html b/files/ko/web/javascript/reference/global_objects/object/issealed/index.html new file mode 100644 index 0000000000..38fc953828 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/issealed/index.html @@ -0,0 +1,128 @@ +--- +title: Object.isSealed() +slug: Web/JavaScript/Reference/Global_Objects/Object/isSealed +tags: + - ECMAScript 5 + - JavaScript + - Method + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isSealed +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.isSealed()</strong></code> 메서드는 객체가 봉인됐는지 판별합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-issealed.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code>Object.isSealed(<var>obj</var>)</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>판별할 객체.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>객체의 봉인 여부를 나타내는 {{jsxref("Boolean")}}.</p> + +<h2 id="설명">설명</h2> + +<p>객체가 봉인된 경우 <code>true</code>를 반환하고, 그렇지 않으면 <code>false</code>. 객체는 {{jsxref("Object.isExtensible", "확장 불가", "", 1)}}이고 모든 속성이 설정 불가이며 따라서 삭제할 수 없(지만 반드시 쓰기 불가일 필요는 없)는 경우 봉인됩니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">// 객체는 기본으로 봉인되지 않습니다. +var empty = {}; +Object.isSealed(empty); // === false + +// 빈 객체를 확장 불가하게 한 경우, 빈 채로 봉인됩니다. +Object.preventExtensions(empty); +Object.isSealed(empty); // === true + +// 비어 있지 않은 객체는 다릅니다, 그 속성이 모두 설정 불가가 아닌 한. +var hasProp = { fee: 'fie foe fum' }; +Object.preventExtensions(hasProp); +Object.isSealed(hasProp); // === false + +// 그러나 모두 설정 불가하게 하면 객체는 봉인됩니다. +Object.defineProperty(hasProp, 'fee', { configurable: false }); +Object.isSealed(hasProp); // === true + +// 객체를 봉인하는 가장 쉬운 방법은 물론 Object.seal 입니다. +var sealed = {}; +Object.seal(sealed); +Object.isSealed(sealed); // === true + +// 봉인된 객체는 정의에 의해 확장 불가입니다. +Object.isExtensible(sealed); // === false + +// 봉인된 객체는 동결될 수 있지만 꼭 그럴 필요는 없습니다. +Object.isFrozen(sealed); // === true (모든 속성도 쓰기 불가) + +var s2 = Object.seal({ p: 3 }); +Object.isFrozen(s2); // === false ('p'는 여전히 쓰기 가능) + +var s3 = Object.seal({ get p() { return 0; } }); +Object.isFrozen(s3); // === true (설정 가능성만이 접근자 속성에게 중요함) +</pre> + +<h2 id="주의">주의</h2> + +<p>ES5에서, 이 메서드의 인수가 비객체(원시형)인 경우, 그러면 {{jsxref("TypeError")}}가 발생합니다. ES6에서, 비객체 인수는 마치 봉인된 보통 객체였던 것처럼 취급됩니다, 그저 <code>true</code>를 반환하는.</p> + +<pre class="brush: js">Object.isSealed(1); +// TypeError: 1은 객체가 아닙니다 (ES5 코드) + +Object.isSealed(1); +// true (ES6 코드) +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.11', 'Object.isSealed')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>초기 정의. JavaScript 1.8.5에서 구현됨.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.issealed', 'Object.isSealed')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.issealed', 'Object.isSealed')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Object.isSealed")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.isFrozen()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/observe/index.html b/files/ko/web/javascript/reference/global_objects/object/observe/index.html new file mode 100644 index 0000000000..bf3b004d8c --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/observe/index.html @@ -0,0 +1,193 @@ +--- +title: Object.observe() +slug: Web/JavaScript/Reference/Global_Objects/Object/observe +tags: + - 감시 객체 +translation_of: Archive/Web/JavaScript/Object.observe +--- +<div>{{JSRef}}</div> + +<p><strong><code>Object.observe()</code></strong> 메소드는 객체의 변화를 비동기로 감시하는데에 사용된다. 이 메소드는 변화들이 발생한 순서대로 그 흐름을 제공한다.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><code>Object.observe(<var>obj</var>, <var>callback</var>[, <var>acceptList</var>])</code></pre> + +<h3 id="파라미터">파라미터</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>감시될 객체입니다.</dd> + <dt><code>callback</code></dt> + <dd><code>obj</code>의 변경이 일어났을 때마다 호출될 함수입니다. 다음과 같은 인자를 갖습니다. + <dl> + <dt><code>changes</code></dt> + <dd>변경 사항을 나타내는 객체의 배열입니다. 그 객체의 프로퍼티는 다음과 같습니다. + <ul> + <li><strong><code>name</code></strong>: 변경된 프로퍼티의 이름입니다.</li> + <li><strong><code>object</code></strong>: 변경이 일어난 뒤의 객체입니다.</li> + <li><strong><code>type</code></strong>: 변경의 종류를 의미하는 string입니다. <code>"add"</code>, <code>"update"</code>, <code>"delete"</code> 중 하나입니다.</li> + <li><strong><code>oldValue</code></strong>: 변경되기 이전의 값입니다. <code>"update"와</code> <code>"delete"</code> 타입에만 존재합니다.</li> + </ul> + </dd> + </dl> + </dd> + <dt><code>acceptList</code></dt> + <dd>감시할 변경의 종류를 의미하는 리스트입니다. 주어지지 않은 경우, 배열 <code>["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"]</code> 이 이용될 것입니다.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p><code>callback</code>은 <code>obj</code>에 변경이 있을 때마다 실행되며, 모든 변경 사항이 일어난 순서대로 담긴 배열이 전달됩니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Logging_all_six_different_types">Logging all six different types</h3> + +<pre class="brush: js">var obj = { + foo: 0, + bar: 1 +}; + +Object.observe(obj, function(changes) { + console.log(changes); +}); + +obj.baz = 2; +// [{name: 'baz', object: <obj>, type: 'add'}] + +obj.foo = 'hello'; +// [{name: 'foo', object: <obj>, type: 'update', oldValue: 0}] + +delete obj.baz; +// [{name: 'baz', object: <obj>, type: 'delete', oldValue: 2}] + +Object.defineProperty(obj, 'foo', {writable: false}); +// [{name: 'foo', object: <obj>, type: 'reconfigure'}] + +Object.setPrototypeOf(obj, {}); +// [{name: '__proto__', object: <obj>, type: 'setPrototype', oldValue: <prototype>}] + +Object.seal(obj); +// [ +// {name: 'foo', object: <obj>, type: 'reconfigure'}, +// {name: 'bar', object: <obj>, type: 'reconfigure'}, +// {object: <obj>, type: 'preventExtensions'} +// ] +</pre> + +<h3 id="데이터_바인딩">데이터 바인딩</h3> + +<pre class="brush: js">// A user model +var user = { + id: 0, + name: 'Brendan Eich', + title: 'Mr.' +}; + +// Create a greeting for the user +function updateGreeting() { + user.greeting = 'Hello, ' + user.title + ' ' + user.name + '!'; +} +updateGreeting(); + +Object.observe(user, function(changes) { + changes.forEach(function(change) { + // Any time name or title change, update the greeting + if (change.name === 'name' || change.name === 'title') { + updateGreeting(); + } + }); +}); +</pre> + +<h3 id="Custom_change_type">Custom change type</h3> + +<pre class="brush: js">// A point on a 2D plane +var point = {x: 0, y: 0, distance: 0}; + +function setPosition(pt, x, y) { + // Performing a custom change + Object.getNotifier(pt).performChange('reposition', function() { + var oldDistance = pt.distance; + pt.x = x; + pt.y = y; + pt.distance = Math.sqrt(x * x + y * y); + return {oldDistance: oldDistance}; + }); +} + +Object.observe(point, function(changes) { + console.log('Distance change: ' + (point.distance - changes[0].oldDistance)); +}, ['reposition']); + +setPosition(point, 3, 4); +// Distance change: 5 +</pre> + +<h2 id="Specifications">Specifications</h2> + +<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal for ECMAScript 7</a>.</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("36")}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatOpera("23")}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("36")}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatOpera("23")}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1]: See {{bug(800355)}}</p> + +<p>[2]: See relevant <a href="https://dev.modern.ie/platform/status/objectobserve/">MS Edge platform status entry</a></p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Object.unobserve()")}} {{experimental_inline}}</li> + <li>{{jsxref("Array.observe()")}} {{experimental_inline}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/preventextensions/index.html b/files/ko/web/javascript/reference/global_objects/object/preventextensions/index.html new file mode 100644 index 0000000000..b23c6f33e6 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/preventextensions/index.html @@ -0,0 +1,126 @@ +--- +title: Object.preventExtensions() +slug: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions +tags: + - ECMAScript 5 + - JavaScript + - Method + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.preventExtensions()</strong></code> 메서드는 새로운 속성이 이제까지 객체에 추가되는 것을 방지합니다 (즉 객체의 장래 확장을 막습니다).</p> + +<div>{{EmbedInteractiveExample("pages/js/object-preventextensions.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Object.preventExtensions(<var>obj</var>)</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>확장 불가로 해야 할 객체.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>객체는 새로운 속성이 추가될 수 있는 경우 확장 가능입니다. <code>Object.preventExtensions()</code>는 객체를 이제 확장 불가로 표시하므로 표시된 그 시점에 있던 것 이외의 속성을 갖지 않습니다. 보통 확장 불가인 객체의 속성은 여전히 <em>삭제될</em> 수 있음을 주의하세요. 확장 불가인 객체에 새로운 속성을 추가하려는 시도는 실패합니다, 조용히든 {{jsxref("TypeError")}}가 발생해서든 (가장 흔하나 오로지 {{jsxref("Functions_and_function_scope/Strict_mode", "엄격 모드", "", 1)}}인 경우에서만은 아님).</p> + +<p><code>Object.preventExtensions()</code>는 자신의 속성 추가만을 방지합니다. 속성은 여전히 객체의 프로토타입에 추가될 수 있습니다. 그러나, 객체에 <code>Object.preventExtensions()</code>를 호출하면 그 {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}} 속성의 확장 또한 막습니다.</p> + +<p>ECMAScript 5에서 확장 가능 객체를 확장 불가로 바꾸는 법이 있더라도, 반대로 하는 법은 없습니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">// Object.preventExtensions는 확장 불가된 객체를 반환합니다. +var obj = {}; +var obj2 = Object.preventExtensions(obj); +obj === obj2; // true + +// 객체는 기본으로 확장 가능입니다. +var empty = {}; +Object.isExtensible(empty); // === true + +// ...하지만 바뀔 수 있습니다. +Object.preventExtensions(empty); +Object.isExtensible(empty); // === false + +// Object.defineProperty는 확장 불가 객체에 새 속성을 추가할 때 오류가 발생합니다. +var nonExtensible = { removable: true }; +Object.preventExtensions(nonExtensible); +Object.defineProperty(nonExtensible, 'new', { value: 8675309 }); // TypeError 발생 + +// 엄격 모드에서, 확장 불가 객체에 새 속성을 추가하려는 시도는 TypeError가 발생합니다. +function fail() { + 'use strict'; + nonExtensible.newProperty = 'FAIL'; // TypeError 발생 +} +fail(); + +// 확장 (__proto__(는 사라집니다. 대신 Object.getPrototypeOf를 쓰세요)를 +// 지원하는 엔진에서만 동작합니다): +// 확장 불가 객체의 프로토타입은 불변합니다. +var fixed = Object.preventExtensions({}); +fixed.__proto__ = { oh: 'hai' }; // TypeError 발생 +</pre> + +<h2 id="참고">참고</h2> + +<p>ES5에서, 이 메서드의 인수가 비객체(원시형)인 경우, 그러면 {{jsxref("TypeError")}}가 발생합니다. ES6에서, 비객체 인수는 마치 확장 불가인 보통 객체였던 것처럼 취급됩니다, 그저 자신을 반환하는.</p> + +<pre class="brush: js">Object.preventExtensions(1); +// TypeError: 1은 객체가 아닙니다 (ES5 코드) + +Object.preventExtensions(1); +// 1 (ES6 코드) +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.10', 'Object.preventExtensions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>초기 정의. JavaScript 1.8.5에서 구현됨.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.preventextensions', 'Object.preventExtensions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.preventextensions', 'Object.preventExtensions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Object.preventExtensions")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.isFrozen()")}}</li> + <li>{{jsxref("Reflect.preventExtensions()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/propertyisenumerable/index.html b/files/ko/web/javascript/reference/global_objects/object/propertyisenumerable/index.html new file mode 100644 index 0000000000..fde6780ffd --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/propertyisenumerable/index.html @@ -0,0 +1,146 @@ +--- +title: Object.prototype.propertyIsEnumerable() +slug: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable +tags: + - JavaScript + - Method + - Object + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable +--- +<div>{{JSRef}}</div> + +<p><code><strong>propertyIsEnumerable()</strong></code> 메서드는 특정 속성이 열거가능한지 여부를 나타내는 불리언 값을 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-propertyisenumerable.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>obj</var>.propertyIsEnumerable(<var>prop</var>)</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>테스트 할 속성의 이름.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>특정 속성이 열거가능한지 여부를 나타내는 {{jsxref("Boolean")}}.</p> + +<h2 id="설명">설명</h2> + +<p>모든 객체는 <code>propertyIsEnumerable</code> 메소드를 가지고 있습니다. 이 메소드는 프로토타입 체인을 통해 상속된 특성을 제외하고 개체에 지정된 속성을 {{jsxref("Statements/for...in", "for...in")}} 루프로 열거할 수 있는지 여부를 확인할 수 있습니다. 개체에 지정된 속성이 없으면 이 메소드는 <code>false</code>를 반환합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="A_basic_use_of_propertyIsEnumerable">A basic use of <code>propertyIsEnumerable</code></h3> + +<p>The following example shows the use of <code>propertyIsEnumerable</code> on objects and arrays:</p> + +<pre class="brush: js">var o = {}; +var a = []; +o.prop = 'is enumerable'; +a[0] = 'is enumerable'; + +o.propertyIsEnumerable('prop'); // returns true +a.propertyIsEnumerable(0); // returns true +</pre> + +<h3 id="User-defined_versus_built-in_objects">User-defined versus built-in objects</h3> + +<p>The following example demonstrates the enumerability of user-defined versus built-in properties:</p> + +<pre class="brush: js">var a = ['is enumerable']; + +a.propertyIsEnumerable(0); // returns true +a.propertyIsEnumerable('length'); // returns false + +Math.propertyIsEnumerable('random'); // returns false +this.propertyIsEnumerable('Math'); // returns false +</pre> + +<h3 id="Direct_versus_inherited_properties">Direct versus inherited properties</h3> + +<pre class="brush: js">var a = []; +a.propertyIsEnumerable('constructor'); // returns false + +function firstConstructor() { + this.property = 'is not enumerable'; +} + +firstConstructor.prototype.firstMethod = function() {}; + +function secondConstructor() { + this.method = function method() { return 'is enumerable'; }; +} + +secondConstructor.prototype = new firstConstructor; +secondConstructor.prototype.constructor = secondConstructor; + +var o = new secondConstructor(); +o.arbitraryProperty = 'is enumerable'; + +o.propertyIsEnumerable('arbitraryProperty'); // returns true +o.propertyIsEnumerable('method'); // returns true +o.propertyIsEnumerable('property'); // returns false + +o.property = 'is enumerable'; + +o.propertyIsEnumerable('property'); // returns true + +// These return false as they are on the prototype which +// propertyIsEnumerable does not consider (even though the last two +// are iteratable with for-in) +o.propertyIsEnumerable('prototype'); // returns false (as of JS 1.8.1/FF3.6) +o.propertyIsEnumerable('constructor'); // returns false +o.propertyIsEnumerable('firstMethod'); // returns false +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.7', 'Object.prototype.propertyIsEnumerable')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.Object.propertyIsEnumerable")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> + <li>{{jsxref("Statements/for...in", "for...in")}}</li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/prototype/index.html b/files/ko/web/javascript/reference/global_objects/object/prototype/index.html new file mode 100644 index 0000000000..4fdc17bc49 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/prototype/index.html @@ -0,0 +1,218 @@ +--- +title: Object.prototype +slug: Web/JavaScript/Reference/Global_Objects/Object/prototype +tags: + - JavaScript + - Object + - Property + - Reference + - 프로토타입 +translation_of: Web/JavaScript/Reference/Global_Objects/Object +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.prototype</strong></code> 속성은 {{jsxref("Object")}} 프로토타입(원형) 객체를<br> + 나타냅니다.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="설명">설명</h2> + +<p>JavaScript에서 거의 모든 객체는 {{jsxref("Object")}}의 인스턴스입니다. 일반적인 객체는 <code>Object.prototype</code> 에서 속성과 메서드를 상속받으며, 그 중 일부는 (오버라이드 등으로 인해) 숨겨질 수 있습니다. 그러나, 의도적으로 <code>Object</code>를 생성할 때 ({{jsxref("Object.create", "Object.create(null)")}} 처럼) 이를 피할 수도 있고, {{jsxref("Object.setPrototypeOf")}} 등을 통해 나중에 무효화할 수도 있습니다.</p> + +<p><code>Object</code> 프로토타입에 가하는 변경은 프로토타입 체인을 통해, 더 아래쪽 체인에서 덮어 쓴 경우가 아니라면 <strong>모든</strong> 객체에서 관측할 수 있습니다. 이는 객체를 확장하거나 행동을 바꿀 수 있는 매우 강력하면서도 위험한 방법을 제공합니다.</p> + + + +<h2 id="속성">속성</h2> + +<dl> + <dt>{{jsxref("Object.prototype.constructor")}}</dt> + <dd>객체의 프로토타입을 생성하는 함수를 지정합니다.</dd> + <dt>{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}</dt> + <dd>객체가 초기화될 때 프로토타입으로 사용된 객체를 가리킵니다.</dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.__noSuchMethod__")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">정의되지 않은 객체 멤버가 메소드로서 호출될 때 실행되는 함수를 정의하는 데 쓰였지만 제거되었습니다.</s></dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.count","Object.prototype.__count__")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">사용자 정의 객체 상에 직접 있는 열거가능 속성의 수를 반환하는 데 쓰였지만 제거되었습니다.</s></dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.parent","Object.prototype.__parent__")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">객체 문맥을 가리키는 데 쓰였지만 제거되었습니다.</s></dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>함수를 속성에 연결합니다, 접근했을 때 그 함수를 실행해 그 결과값을 반환하는.</dd> + <dt>{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>함수를 속성에 연결합니다, 설정했을 때 그 속성을 수정하는 함수를 실행하는.</dd> + <dt>{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>{{jsxref("Object.prototype.__defineGetter__()", "__defineGetter__()")}} 메소드에 의해 지정된 속성과 관련된 함수를 반환합니다.</dd> + <dt>{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>{{jsxref("Object.prototype.__defineSetter__()", "__defineSetter__()")}} 메소드에 의해 지정된 속성과 관련된 함수를 반환합니다.</dd> + <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt> + <dd>객체가 지정된 속성을 프로토타입 체인을 통해 상속되지 않은 그 객체의 직접 속성으로 포함하는지를 나타내는 boolean을 반환합니다.</dd> + <dt>{{jsxref("Object.prototype.isPrototypeOf()")}}</dt> + <dd>지정된 객체가 이 메소드가 호출된 객체의 프로토타입 체인 내에 있는지를 나타내는 boolean을 반환합니다.</dd> + <dt>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</dt> + <dd>내부 <a href="/ko/docs/Web/JavaScript/Data_structures#Properties">ECMAScript [[Enumerable]] attribute</a>가 설정된 경우를 나타내는 boolean을 반환합니다.</dd> + <dt>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>이 메소드가 호출된 객체를 나타내는 객체 리터럴의 출처를 포함하는 문자열을 반환합니다; 새로운 객체를 만들기 위해 이 값을 쓸 수 있습니다.</dd> + <dt>{{jsxref("Object.prototype.toLocaleString()")}}</dt> + <dd>{{jsxref("Object.toString", "toString()")}}을 호출합니다.</dd> + <dt>{{jsxref("Object.prototype.toString()")}}</dt> + <dd>객체의 문자열 표현을 반환합니다.</dd> + <dt>{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}</dt> + <dd>객체 속성에서 감시점을 제거합니다.</dd> + <dt>{{jsxref("Object.prototype.valueOf()")}}</dt> + <dd>지정된 객체의 원시값을 반환합니다.</dd> + <dt>{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}</dt> + <dd>객체 속성에 감시점을 추가합니다.</dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">지정된 객체의 문맥에서 JavaScript 코드 문자열을 평가하는 데 쓰였지만 제거되었습니다.</s></dd> +</dl> + +<h2 id="예제">예제</h2> + +<p><code>Object.prototype</code>의 기본 메서드를 변경할 때, 기존 조직의 앞 또는 후에 확장(extension) 을 포장하여 코드를 주입시키는 것을 고려하자. 예를 들어서, 이 (시험받지<br> + 않은) 코드는 내장된 로직 또는 어떤 다른 확장이 실행되기 전에 커스텀 로직을 전제조건적으로 실행시킬 것이다.</p> + +<p>함수가 호출되었을 때, 불러온 매개변수들은 배열과 같은 형태로 '변수' <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>에 보관된다. 예를 들어 myFn(a, b, c) 라는 함수를 부를 때, 이 함수 내부에 배열형태로 매개변수 (a, b, c) 를 담게 된다. prototype을 훅을 이용해 수정할 때, 함수에서 apply()를 호출하여 단순하게 this와 arguments(호출 상태)에 현재 동작을 전달하면 된다. 이 패턴은 Node.prototype, Function.prototype등 prototype에도 사용할 수 있다.</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> current <span class="operator token">=</span> Object<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>valueOf<span class="punctuation token">;</span> + +<span class="comment token">// 현재 설정한 "-prop-value" 속성은 cross-cutting 이고 </span> +<span class="comment token">// 항상 같은 prototype chain이 아니기 때문에, 이 Object.prototype을 바꾸고 싶다.</span> +Object<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>valueOf <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">hasOwnProperty</span><span class="punctuation token">(</span><span class="string token">'-prop-value'</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">[</span><span class="string token">'-prop-value'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + <span class="comment token">// 이 객체 내 속성(property)이 하나가 아니라면, 현재 동작을 재구성한 것으로부터 + // 기본 동작으로 되돌리자(복구). </span> + <span class="comment token">// apply 동작은 다른 언어에서의 "super"와 유사하다.</span> + <span class="comment token">// 비록 valueOf()가 매개변수를 받지못하더라도, 다른 훅에서 있을 것이다.</span> + <span class="keyword token">return</span> current<span class="punctuation token">.</span><span class="function token">apply</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">,</span> arguments<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span></code> +</pre> + +<p>JavaScript는 엄밀히 말해서 하위클래스(sub-class) 객체가 없기에, prototype은 객체 역할을 하는 특정 함수의 "기반 클래스" 객체를 만드는 유용한 차선책입니다. 예를 들어:</p> + +<pre class="brush: js notranslate">var Person = function() { + this.canTalk = true; +}; + +Person.prototype.greet = function() { + if (this.canTalk) { + console.log('Hi, I am ' + this.name); + } +}; + +var Employee = function(name, title) { + Person.call(this); + this.name = name; + this.title = title; +}; + +Employee.prototype = Object.create(Person.prototype); +Employee.prototype.constructor = Employee; + +Employee.prototype.greet = function() { + if (this.canTalk) { + console.log('Hi, I am ' + this.name + ', the ' + this.title); + } +}; + +var Customer = function(name) { + Person.call(this); + this.name = name; +}; + +Customer.prototype = Object.create(Person.prototype); +Customer.prototype.constructor = Customer; + +var Mime = function(name) { + Person.call(this); + this.name = name; + this.canTalk = false; +}; + +Mime.prototype = Object.create(Person.prototype); +Mime.prototype.constructor = Mime; + +var bob = new Employee('Bob', 'Builder'); +var joe = new Customer('Joe'); +var rg = new Employee('Red Green', 'Handyman'); +var mike = new Customer('Mike'); +var mime = new Mime('Mime'); + +bob.greet(); +// Hi, I am Bob, the Builder + +joe.greet(); +// Hi, I am Joe + +rg.greet(); +// Hi, I am Red Green, the Handyman + +mike.greet(); +// Hi, I am Mike + +mime.greet(); +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>초기 정의. JavaScript 1.0에서 구현됨.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype', 'Object.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.Object.prototype")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">객체지향 JavaScript 소개</a></li> +</ul> + +<div id="dicLayer" style=""> +<div id="dicLayerContents"><dicword style="user-select: text;">Even though valueOf() doesn't take arguments, some other hook may.</dicword><dicword style="user-select: text;"><dicimg id="play" style="background-image: url(chrome-extension://bmbdcffdhebhecemcchbkfnjlmdiiepe/play.gif);"></dicimg> <input>Eng<dicimg id="copy" style="background-image: url(chrome-extension://bmbdcffdhebhecemcchbkfnjlmdiiepe/copy.png);" title="copy"></dicimg></dicword><br> +<br> +<br> +<br> +valueOf ()가 인수를받지 않더라도 다른 후크가있을 수 있습니다.</div> + +<div id="dicLayerSub"></div> +</div> + +<div id="dicRawData" style="display: none;">{"mean":["take<br/><br/>[동사]\n\t\t ~ sth (with you) | ~ sth (to sb) | ~ (sb) sth\n\t\t \t\t(어떤 것을 한 곳에서 다른 곳으로) 가지고 가다[이동시키다]","though<br/><br/>[접속사]\n\t\t \t\t(비록) …이긴 하지만[…인데도/…일지라도]\n\n\t\t\t\t\t\t\t\t유의어 although","value<br/><br/>[명사]\n\t\t \t\t(경제적인) 가치\n\n\t\t 참조 market value, street value","other<br/><br/>[형용사, 대명사]\n\t\t \t\t(그 밖의) 다른; 다른 사람[것]\n\n\t\t 참조 another","may<br/><br/>[법조동사]\n\t\t \t\t(가능성을 나타내어) …일지도 모른다[…일 수도 있다]"],"word":"\n\t\t\t\t\t\ttake\n \t\t\t\n\t \t\n\t ","soundUrl":"https://dict-dn.pstatic.net/v?_lsu_sa_=3cd8f6567dcc35f67a9d216930e402fa1d2763157705ff3d60620d707b1d60814356971c64e54c7e792964a50a21103d6cc3ad8a5c30e6d7e9205e93c8517e38f8e5b191d1700b6773822766eee45672523cb75822e10196643a3baf5d3dabb04974f799e77e47c4f2db9476dbfb3e4bf612100b4fa8e918f972d80a449bc79c","phoneticSymbol":"[teɪk]"}</div> + +<div id="dicLayerLoader" style="top: 3322px; left: 514px;"></div> diff --git a/files/ko/web/javascript/reference/global_objects/object/seal/index.html b/files/ko/web/javascript/reference/global_objects/object/seal/index.html new file mode 100644 index 0000000000..c97f71c26d --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/seal/index.html @@ -0,0 +1,135 @@ +--- +title: Object.seal() +slug: Web/JavaScript/Reference/Global_Objects/Object/seal +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Object + - Reference + - 봉인 +translation_of: Web/JavaScript/Reference/Global_Objects/Object/seal +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.seal()</strong></code> 메서드는 객체를 밀봉합니다. 객체를 밀봉하면 그 객체에는 새로운 속성을 추가할 수 없고, 현재 존재하는 모든 속성을 설정 불가능 상태로 만들어줍니다. 하지만 쓰기 가능한 속성의 값은 밀봉 후에도 변경할 수 있습니다(역자 주 : 바로 이 점이 <code>Object.freeze()</code>와의 차이라고 할 수 있습니다).</p> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-seal.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="syntaxbox">Object.seal(<var>obj</var>)</pre> + +<h3 id="Parameters" name="Parameters">매개변수</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>봉인할 객체.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>봉인한 객체.</p> + +<h2 id="Description" name="Description">설명</h2> + +<p>객체는 기본적으로 확장이 가능(<span style="line-height: 16.7999992370605px;">{{jsxref("Object.isExtensible()", "extensible", "", 1)}}</span>)합니다. 즉, 새로운 속성을 추가할 수 있습니다. 하지만 객체를 밀봉하면 그 객체에 새로운 속성을 추가할 수 없게되고, 그 객체 내에 존재하는 모든 속성이 설정 불가능(non-configurable)해 집니다. 객체를 밀봉하면 객체의 속성을 고정된 불변의 상태로 만듭니다. 모든 속성을 설정 불가능한 상태로 만드는 것은 데이터 속성(data properties)을 접근자 속성(accessor properties)으로, 또는 접근자 속성을 데이터 속성으로 변경할 수 없게 만듭니다. 하지만 객체를 완전히 얼려서 데이터 속성의 값도 변경할 수 없게 만드는 <code>Object.freeze()</code>와 달리, <code><strong>Object.seal()</strong></code>은 객체를 밀봉한 후에도 그 객체의 데이터 속성의 값은 여전히 변경할 수 있게 해줍니다. 다만, 밀봉한 후에는 객체를 얼리는 것과 마찬가지로 속성의 추가/삭제나 데이터 속성과 접근자 속성 사이의 전환은 암묵적이든, 아니면 <span style="line-height: 16.7999992370605px;">{{jsxref("Strict_mode", "strict mode", "", 1)}} 에서와 같이 명시적으로 {{jsxref("Global_Objects/TypeError", "TypeError")}} 예외를 발생시키든 모두 실패로 끝납니다.</span></p> + +<p>프로토타입 체인은 밀봉 전이나 후나 달라지지 않습니다. 하지만 <span style="line-height: 16.7999992370605px;">{{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}} 속성은 함께 밀봉됩니다.</span></p> + +<h2 id="Examples" name="Examples">예제</h2> + +<pre class="brush: js">var obj = { + prop: function() {}, + foo: 'bar' +}; + +// 새 속성이 추가되고, 기존 속성은 변경되거나 제거될 수 있음 +obj.foo = 'baz'; +obj.lumpy = 'woof'; +delete obj.prop; + +var o = Object.seal(obj); + +assert(o === obj); +assert(Object.isSealed(obj) === true); + +// 밀봉한 객체의 속성값은 밀봉 전과 마찬가지로 변경할 수 있음 +obj.foo = 'quux'; +obj.foo // 'quux' 가 출력됨 + +// 데이터 속성과 접근자 속성 사이의 전환은 불가 +Object.defineProperty(obj, 'foo', { get: function() { return 'g'; } }); // TypeError 발생 + +// 속성값의 변경을 제외한 어떤 변경도 적용되지 않음 +obj.quaxxor = 'the friendly duck'; // 에러가 나지는 않지만 속성은 추가되지 않음 +delete obj.foo; // 에러가 나지는 않지만 속성이 삭제되지 않음 + +// strict mode 에서는 속성값의 변경을 제외한 모든 변경은 TypeError 발생 +function fail() { + 'use strict'; + delete obj.foo; // TypeError 발생 + obj.sparky = 'arf'; // TypeEror 발생 +} +fail(); + +// Object.defineProperty() 메서드를 이용한 속성의 추가도 TypeError 발생 +Object.defineProperty(obj, 'ohai', { value: 17 }); // TypeErorr 발생 +Object.defineProperty(obj, 'foo', { value: 'eit' }); // 속성값의 변경은 가능함 +</pre> + +<h2 id="Notes" name="Notes">참고</h2> + +<p>ES5에서는 <code><strong>Object.seal()</strong></code> 메서드의 인자가 객체가 아닐 때(즉, 원시형일 때)는 <span style="line-height: 16.7999992370605px;">{{jsxref("Global_Objects/TypeError", "TypeError")}}가 발생합니다. ES6에서는 원시형 인자도 밀봉된 객체라고 취급해서 {{jsxref("Global_Objects/TypeError", "TypeError")}}를 발생시키지 않고 원시형 인자를 그대로 반환합니다.</span></p> + +<pre class="brush: js">> Object.seal(1) +TypeError: 1 is not an object // ES5 code + +> Object.seal(1) +1 // ES6 code +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.8', 'Object.seal')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.seal', 'Object.seal')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.seal', 'Object.seal')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Object.seal")}}</p> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li>{{jsxref("Object.isSealed()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.isFrozen()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/setprototypeof/index.html b/files/ko/web/javascript/reference/global_objects/object/setprototypeof/index.html new file mode 100644 index 0000000000..332f857361 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/setprototypeof/index.html @@ -0,0 +1,242 @@ +--- +title: Object.setPrototypeOf() +slug: Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf +translation_of: Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf +--- +<p>{{JSRef}}</p> + +<p>Object.setPrototypeOf() 메소드는 지정된 객체의 프로토타입 (즉, 내부 [[Prototype]] 프로퍼티)을 다른 객체 또는 {{jsxref("null")}} 로 설정합니다.</p> + +<div class="warning"> +<p><strong>Warning:</strong> Changing the <code>[[Prototype]]</code> of an object is, by the nature of how modern JavaScript engines optimize property accesses, a very slow operation, in <strong><em>every</em></strong> browser and JavaScript engine. The effects on performance of altering inheritance are subtle and far-flung, and are not limited to simply the time spent in <code>obj.__proto__ = ...</code> statement, but may extend to <strong><em>any</em></strong> code that has access to <strong><em>any</em></strong> object whose <code>[[Prototype]]</code> has been altered. If you care about performance you should avoid setting the <code>[[Prototype]]</code> of an object. Instead, create a new object with the desired <code>[[Prototype]]</code> using {{jsxref("Object.create()")}}.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate"><code>Object.setPrototypeOf(<var>obj</var>, <var>prototype</var>);</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>프로토타입을 설정을 가지는 객체</dd> + <dt><code>prototype</code></dt> + <dd>객체의 새로운 프로토 타입 (객체 or {{jsxref("null")}}).</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>지정된 객체 </p> + +<h2 id="Description">Description</h2> + +<p>만일 프로토타입이 변경될 객체가 {{jsxref("Object.isExtensible()")}} 에 의해서 non-extensible 하다면, {{jsxref("TypeError")}} 예외처리를 해라. 만일 프로토타입 파라미터가 객체가 아니거나 {{jsxref("null")}} (i.e., number, string, boolean, {{jsxref("undefined")}}) 인 경우가 아니라면 어떠한 작업도 하지마라. 이 방법을 통해서 객제의 프로토타입이 새로운 값으로 변경될 것이다.</p> + +<p>Object.setPrototypeOf는 ECMAScript 2015 스펙으로 규정되어 있다. 해당 메소드는 일반적으로 객체의 프로토타입과 논쟁이 되는 {{jsxref("Object.prototype.__proto__")}} 프로퍼티를 설정하는 적절한 방법으로 고려된다. </p> + +<p>Examples</p> + +<pre class="brush: js notranslate">var dict = Object.setPrototypeOf({}, null); +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>예전 버전의 프로퍼티 {{jsxref("Object.prototype.__proto__")}} 를 사용한다면, 우리는 쉽게 Object.setPrototypeOf 가 쉽게 정의 할수 있다.</p> + +<pre class="brush: js notranslate">// Only works in Chrome and FireFox, does not work in IE: +Object.setPrototypeOf = Object.setPrototypeOf || function(obj, proto) { + obj.__proto__ = proto; + return obj; +} +</pre> + +<h2 id="Appending_Prototype_Chains">Appending Prototype Chains</h2> + +<p><code>Object.getPrototypeOf()</code> and {{jsxref("Object.proto", "Object.prototype.__proto__")}} 의 결합은 새로운 프로토타입 오브젝트에 전반적인 프로토타입 Chain을 설정하도록 할수 있다.</p> + +<pre class="brush: js notranslate">/** +*** Object.appendChain(@object, @prototype) +* +* Appends the first non-native prototype of a chain to a new prototype. +* Returns @object (if it was a primitive value it will transformed into an object). +* +*** Object.appendChain(@object [, "@arg_name_1", "@arg_name_2", "@arg_name_3", "..."], "@function_body") +*** Object.appendChain(@object [, "@arg_name_1, @arg_name_2, @arg_name_3, ..."], "@function_body") +* +* Appends the first non-native prototype of a chain to the native Function.prototype object, then appends a +* new Function(["@arg"(s)], "@function_body") to that chain. +* Returns the function. +* +**/ + +Object.appendChain = function(oChain, oProto) { + if (arguments.length < 2) { + throw new TypeError('Object.appendChain - Not enough arguments'); + } + if (typeof oProto !== 'object' && typeof oProto !== 'string') { + throw new TypeError('second argument to Object.appendChain must be an object or a string'); + } + + var oNewProto = oProto, + oReturn = o2nd = oLast = oChain instanceof this ? oChain : new oChain.constructor(oChain); + + for (var o1st = this.getPrototypeOf(o2nd); + o1st !== Object.prototype && o1st !== Function.prototype; + o1st = this.getPrototypeOf(o2nd) + ) { + o2nd = o1st; + } + + if (oProto.constructor === String) { + oNewProto = Function.prototype; + oReturn = Function.apply(null, Array.prototype.slice.call(arguments, 1)); + this.setPrototypeOf(oReturn, oLast); + } + + this.setPrototypeOf(o2nd, oNewProto); + return oReturn; +} +</pre> + +<h3 id="Usage">Usage</h3> + +<h4 id="First_example_프로토타입에_Chain_설정하기">First example: 프로토타입에 Chain 설정하기</h4> + +<pre class="brush: js notranslate">function Mammal() { + this.isMammal = 'yes'; +} + +function MammalSpecies(sMammalSpecies) { + this.species = sMammalSpecies; +} + +MammalSpecies.prototype = new Mammal(); +MammalSpecies.prototype.constructor = MammalSpecies; + +var oCat = new MammalSpecies('Felis'); + +console.log(oCat.isMammal); // 'yes' + +function Animal() { + this.breathing = 'yes'; +} + +Object.appendChain(oCat, new Animal()); + +console.log(oCat.breathing); // 'yes' +</pre> + +<h4 id="Second_example_객체_Constructor의_인스턴스에_존재하는_원래_값을_변경_및_해당_객체_프로토타입에_Chain_설정하기">Second example: 객체 Constructor의 인스턴스에 존재하는 원래 값을 변경 및 해당 객체 프로토타입에 Chain 설정하기</h4> + +<pre class="brush: js notranslate">function MySymbol() { + this.isSymbol = 'yes'; +} + +var nPrime = 17; + +console.log(typeof nPrime); // 'number' + +var oPrime = Object.appendChain(nPrime, new MySymbol()); + +console.log(oPrime); // '17' +console.log(oPrime.isSymbol); // 'yes' +console.log(typeof oPrime); // 'object' +</pre> + +<h4 id="Third_example_Function.prototype객체에_Chain을_설정하고_그_Chain에_새로운_함수를_설정하기">Third example: Function.prototype객체에 Chain을 설정하고 그 Chain에 새로운 함수를 설정하기</h4> + +<pre class="brush: js notranslate">function Person(sName) { + this.identity = sName; +} + +var george = Object.appendChain(new Person('George'), + 'console.log("Hello guys!!");'); + +console.log(george.identity); // 'George' +george(); // 'Hello guys!!' +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-object.setprototypeof', 'Object.setProtoypeOf')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.setprototypeof', 'Object.setProtoypeOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("34")}}</td> + <td>{{CompatGeckoDesktop("31")}}</td> + <td>{{CompatIE("11")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari("9")}}</td> + </tr> + </tbody> +</table> + + +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("31")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatSafari("9")}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Reflect.setPrototypeOf()")}}</li> + <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li> + <li>{{jsxref("Object.getPrototypeOf()")}}</li> + <li>{{jsxref("Object.prototype.__proto__")}} </li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/tolocalestring/index.html b/files/ko/web/javascript/reference/global_objects/object/tolocalestring/index.html new file mode 100644 index 0000000000..809daad824 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/tolocalestring/index.html @@ -0,0 +1,86 @@ +--- +title: Object.prototype.toLocaleString() +slug: Web/JavaScript/Reference/Global_Objects/Object/toLocaleString +tags: + - JavaScript + - Method + - Object + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/toLocaleString +--- +<div>{{JSRef}}</div> + +<p><code><strong>toLocaleString()</strong></code> 메서드는 객체로 된 문자열을 반환합니다. 이 메서드는 지역별로 다른 객체로 재정의되어 표시됩니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-tolocalestring.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>obj</var>.toLocaleString()</pre> + +<h3 id="반환_값">반환 값</h3> + +<p>객체를 나타내는 문자열.</p> + +<h2 id="설명">설명</h2> + +<p>{{jsxref("Object")}}의 <code>toLocaleString</code>은 {{jsxref("Object.toString", "toString()")}}을 호출 한 결과를 반환합니다.</p> + +<p>이 함수는 모든 객체가 사용할 수는 없지만 객체에 일반 <code>toLocaleString</code> 메소드를 제공하기 위해 제공됩니다. 아래 목록을 참조하십시오.</p> + +<h3 id="toLocaleString()을_재정의하는_객체"><code>toLocaleString()</code>을 재정의하는 객체</h3> + +<ul> + <li>{{jsxref("Array")}}: {{jsxref("Array.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Number")}}: {{jsxref("Number.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Date")}}: {{jsxref("Date.prototype.toLocaleString()")}}</li> +</ul> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.3', 'Object.prototype.toLocaleString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.toLocaleString")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/tostring/index.html b/files/ko/web/javascript/reference/global_objects/object/tostring/index.html new file mode 100644 index 0000000000..77e4284ff7 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/tostring/index.html @@ -0,0 +1,134 @@ +--- +title: Object.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Object/toString +tags: + - JavaScript + - Method + - Object + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/toString +--- +<div></div> + +<div>{{JSRef}}</div> + +<p>The <code><strong>toString()</strong></code> 은 문자열을 반환하는 object의 대표적인 방법이다</p> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-tostring.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>obj</var>.toString()</code></pre> + +<h2 id="Description">Description</h2> + +<p>모든 객체에는 객체가 텍스트 값으로 표시되거나 객체가 문자열이 예상되는 방식으로 참조 될 때 자동으로 호출되는 <code>toString()</code> 메서드가 있습니다. 기본적으로 <code>toString()</code> 메서드는 Object에서 비롯된 모든 객체에 상속됩니다. 이 메서드가 사용자 지정 개체에서 재정의되지 않으면 <code>toString()</code>은 "<code>[object type]</code>"을 반환합니다. 여기서 <code>type</code>은 object type입니다. 다음 코드는 이것을 설명합니다</p> + +<pre class="brush: js">var o = new Object(); +o.toString(); // returns [object Object] +</pre> + +<div class="note"> +<p><strong>Note:</strong> 자바스크립트 1.8.5부터 {{jsxref("null")}}의 <code>toString()</code>을 호출하는 경우 <code>[object <em>Null</em>]</code>을 반환하며, {{jsxref("undefined")}}는 <code>[object <em>Undefined</em>]</code>를 반환합니다. 이는 ECMAScript 제 5판과 후속 정오표에 정의되어 있습니다. See {{anch("toString으로_객체_클래스_검사", "toString으로_객체_클래스_검사")}}.</p> +</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="기본_toString_메소드_재정의">기본 <code>toString</code> 메소드 재정의</h3> + +<p>기본 <code>toString()</code> 메서드 대신에 호출될 함수를 정의할 수 있습니다. <code>toString()</code> 메서드는 인자를 취하지 않고 문자열을 반환합니다. 직접 생성한 <code>toString()</code> 메서드는 원하는 어떤 값이든 될 수 있지만 해당 객체에 대한 정보를 전달하고 있을 때 가장 유용할 것입니다.</p> + +<p>다음 코드는 <code>Dog</code> 객체 타입을 정의하고 <code>Dog</code> 타입을 따르는 <code>theDog</code>를 생성합니다:</p> + +<pre class="brush: js">function Dog(name, breed, color, sex) { + this.name = name; + this.breed = breed; + this.color = color; + this.sex = sex; +} + +theDog = new Dog('Gabby', 'Lab', 'chocolate', 'female'); +</pre> + +<p>커스텀 객체의 <code>toString()</code> 메서드를 호출하는 경우 {{jsxref("Object")}}로부터 상속받은 기본 값을 반환하게 됩니다:</p> + +<pre class="brush: js">theDog.toString(); // returns [object Object] +</pre> + +<p>다음 코드는 기본 <code>toString()</code> 메서드를 재정의하는 <code>dogToString()</code>을 생성하고 할당합니다. 이 함수는 객체의 name, breed, color, sex를 포함하는 문자열을 "<code>property = value;</code>"의 형태로 만들어냅니다.</p> + +<pre class="brush: js">Dog.prototype.toString = function dogToString() { + var ret = 'Dog ' + this.name + ' is a ' + this.sex + ' ' + this.color + ' ' + this.breed; + return ret; +} +</pre> + +<p>앞선 코드를 사용하면 문자열 컨텍스트에서 <code>theDog</code>가 사용될 때마다 자바스크립트는 자동으로 <code>dogToString() </code>함수를 호출하여 다음 문자열을 반환합니다:</p> + +<pre class="brush: js">"Dog Gabby is a female chocolate Lab" +</pre> + +<h3 id="toString으로_객체_클래스_검사"><code>toString()</code>으로 객체 클래스 검사</h3> + +<p><code>toString()</code>은 모든 객체에 사용되어 해당 객체의 클래스를 가져올 수 있습니다. Object.prototype.toString()을 모든 객체에 사용하기 위해서는 {{jsxref("Function.prototype.call()")}} 나 {{jsxref("Function.prototype.apply()")}}를 사용해서 검사하고자 하는 객체를 <code>thisArg</code>로 불리는 첫번째 파라미터로 넘겨야 합니다.</p> + +<pre class="brush: js">var toString = Object.prototype.toString; + +toString.call(new Date); // [object Date] +toString.call(new String); // [object String] +toString.call(Math); // [object Math] + +// Since JavaScript 1.8.5 +toString.call(undefined); // [object Undefined] +toString.call(null); // [object Null] +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.2', 'Object.prototype.toString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Call on {{jsxref("null")}} returns <code>[object <em>Null</em>]</code>, and {{jsxref("undefined")}} returns <code>[object <em>Undefined</em>]</code></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.tostring', 'Object.prototype.toString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.tostring', 'Object.prototype.toString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Object.toString")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> + <li>{{jsxref("Object.prototype.valueOf()")}}</li> + <li>{{jsxref("Number.prototype.toString()")}}</li> + <li>{{jsxref("Symbol.toPrimitive")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/valueof/index.html b/files/ko/web/javascript/reference/global_objects/object/valueof/index.html new file mode 100644 index 0000000000..7bef3bd48c --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/valueof/index.html @@ -0,0 +1,118 @@ +--- +title: Object.prototype.valueOf() +slug: Web/JavaScript/Reference/Global_Objects/Object/valueOf +tags: + - JavaScript + - Method + - Object + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/valueOf +--- +<div>{{JSRef}}</div> + +<p><code><strong>valueOf()</strong></code> 메서드는 특정 객체의 원시 값을 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-valueof.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate"><code><var>object</var>.valueOf()</code></pre> + +<h3 id="반환_값">반환 값</h3> + +<p>객체의 원시 값.</p> + +<div class="blockIndicator note"> +<p> <a href="https://wiki.developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators#단항_연산자">(단항) 더하기 기호</a> 는 가끔 <code>valueOf</code> 의 단축 표현으로 사용됩니다. 예를 들면, 다음과 같은 표현을 보세요. <code>+new Number()</code>. <a href="https://wiki.developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf#단항_더하기_사용하기">단항 더하기 사용하기</a>.도 참조 하세요.</p> +</div> + +<h2 id="설명">설명</h2> + +<p>JavaScript는 객체를 원시 값으로 변환할 때 <code>valueOf</code> 메서드를 호출합니다. 보통 원시 값을 필요로 할 때 알아서 사용하므로 직접 호출해야 하는 경우는 매우 드뭅니다.</p> + +<p>기본적으로 {{jsxref("Object")}}의 모든 후손 객체는 <code>valueOf</code>를 상속받습니다. 내장된 핵심 객체는 모두 <code>valueOf</code>를 재정의<sup>override</sup>해 적합한 값을 반환합니다. 어떤 객체가 원시 값을 가지고 있지 않다면, <code>valueOf</code>는 객체 스스로를 반환합니다.</p> + +<p>여러분의 코드에서 <code>valueOf</code>를 호출해 내장 객체를 원시 값으로 변환할 수 있습니다. 사용자 정의 객체를 만들 땐 <code>valueOf</code>를 재정의해 {{jsxref("Object")}}의 메서드 대신 다른 행동을 부여할 수도 있습니다.</p> + +<h3 id="사용자_정의_객체의_valueOf_오버라이딩">사용자 정의 객체의 valueOf 오버라이딩</h3> + +<p>기본 <code>valueOf</code> 메서드 대신 사용할 함수를 생성할 수 있습니다. 이 때 함수는 매개변수를 받지 않아야 합니다.</p> + +<p><code>MyNumberType</code>이라는 객체 형태가 존재하고, 이 객체의 <code>valueOf</code> 메서드를 만들고 싶다고 가정하겠습니다. 다음의 코드는 객체의 <code>valueOf</code> 메서드에 사용자 정의 함수를 할당합니다.</p> + +<pre class="brush: js notranslate">MyNumberType.prototype.valueOf = function() { return customPrimitiveValue; };</pre> + +<p>위의 코드가 활성화된 상태에서 어떤 <code>MyNumberType</code> 객체를 원시 값으로 표현해야 하면 JavaScript가 자동으로 저 함수를 실행합니다.</p> + +<p>이 객체의 <code>valueOf</code> 메서드는 보통 JavaScript가 호출하겠지만 다음처럼 직접 호출할 수도 있습니다.</p> + +<pre class="brush: js notranslate">myNumberType.valueOf()</pre> + +<div class="note"> +<p><strong>참고:</strong> 문자열 문맥에서 객체-문자열 변환은 {{jsxref("Object.toString", "toString()")}} 메서드를 사용하며, {{jsxref("String")}} 객체의 <code>valueOf</code>를 사용해 원시 문자열로 변환하는 것과는 다릅니다. 모든 객체는, 비록 결과가 "<code>[object type]</code>" 뿐이라도 문자열 변환 기능을 가지고 있습니다. 그러나 대다수의 객체는 숫자, 불리언, 함수 등으로 변환되지 않습니다.</p> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="커스텀_타입에_valueOf_사용하기">커스텀 타입에 valueOf 사용하기</h3> + +<pre class="brush: js notranslate">function MyNumberType(n) { + this.number = n; +} + +MyNumberType.prototype.valueOf = function() { + return this.number; +}; + +var myObj = new MyNumberType(4); +myObj + 3; // 7</pre> + +<h3 id="단항_더하기_사용하기"><a name="Details_of_unary_plus">단항 더하기 사용하기</a></h3> + +<pre class="notranslate">+"5" // 5 (string to number) ++"" // 0 (string to number) ++"1 + 2" // NaN (doesn't evaluate) ++new Date() // same as (new Date()).getTime() ++"foo" // NaN (string to number) ++{} // NaN ++[] // 0 (toString() returns an empty string list) ++[1] // 1 ++[1,2] // NaN ++new Set([1]) // NaN ++BigInt(1) // Uncaught TypeError: Cannot convert a BigInt value to a number ++undefined // NaN ++null // 0 ++true // 1 ++false // 0</pre> + +<h2 id="명세">명세</h2> + +<table> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}}</td> + </tr> + </tbody> +</table> + +<h2 id="라우저_호환성">라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Object.valueOf")}}</p> + +<h2 id="함께_보기">함께 보기</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> + <li>{{jsxref("parseInt", "parseInt()")}}</li> + <li>{{jsxref("Symbol.toPrimitive()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/values/index.html b/files/ko/web/javascript/reference/global_objects/object/values/index.html new file mode 100644 index 0000000000..af8f159a53 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/values/index.html @@ -0,0 +1,98 @@ +--- +title: Object.values() +slug: Web/JavaScript/Reference/Global_Objects/Object/values +translation_of: Web/JavaScript/Reference/Global_Objects/Object/values +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.values()</strong></code> 메소드는 전달된 파라미터 객체가 가지는 (열거 가능한) 속성의 값들로 이루어진 배열을 리턴합니다. 이 배열은 {{jsxref("Statements/for...in", "for...in")}} 구문과 동일한 순서를 가집니다. (for in 반복문은 프로토타입 체인 또한 열거한다는 점에서 차이가 있습니다.)</p> + +<div>{{EmbedInteractiveExample("pages/js/object-values.html")}}</div> + +<p class="hidden">샘플 소스는 GitHub에 저장되어 있습니다. 샘플 소스에 대해서 컨트리뷰트하고 싶다면, <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 프로젝트를 클론하고, 풀 리퀘스트를 보내주세요. </p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">Object.values(<var>obj</var>)</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>배열로 변환할 열거 가능한 속성을 가지는 객체</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>전달된 객체의 속성 값들을 포함하는 배열</p> + +<h2 id="Description">Description</h2> + +<p><code>Object.values()</code> 는 파라매터로 전달된 객체가 가지는 열거 가능한 속성의 값들로 구성된 배열을 반환합니다. 배열의 값들이 순서는 오브젝트의 속성을 for in 구문등으로 반복한 결과와 동일합니다. (참고로 for in 구문은 순서를 보장하지 않습니다)</p> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js">var obj = { foo: 'bar', baz: 42 }; +console.log(Object.values(obj)); // ['bar', 42] + +// 유사 배열 (숫자를 속성으로 사용하는 객체) +var obj = { 0: 'a', 1: 'b', 2: 'c' }; +console.log(Object.values(obj)); // ['a', 'b', 'c'] + +// 유사 배열의 경의 속성으로 사용한 숫자의 크기 순으로 정렬되어 반환됩니다. +var an_obj = { 100: 'a', 2: 'b', 7: 'c' }; +console.log(Object.values(an_obj)); // ['b', 'c', 'a'] + +// getFoo는 열거 가능한 속성이 아니라서 배열에 포함되지 않습니다. +var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } }); +my_obj.foo = 'bar'; +console.log(Object.values(my_obj)); // ['bar'] + +// 객체가 아닌 경우에는 객체로 강제로 변환되어 적용됩니다. +console.log(Object.values('foo')); // ['f', 'o', 'o'] +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>Object.values</code> 메소드는 구형 브라우저에서 지원하지 않습니다. 구형 브라우저와의 호환성을 고려하기 위해 폴리필을 찾아 볼 수 있습니다. <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> 혹은 <a href="https://github.com/es-shims/Object.values">es-shims/Object.values</a> 를 참조해보세요.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.values', 'Object.values')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES8', '#sec-object.values', 'Object.values')}}</td> + <td>{{Spec2('ES8')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.values")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Object.entries()")}}</li> + <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/parsefloat/index.html b/files/ko/web/javascript/reference/global_objects/parsefloat/index.html new file mode 100644 index 0000000000..bfc5b2d41e --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/parsefloat/index.html @@ -0,0 +1,120 @@ +--- +title: parseFloat() +slug: Web/JavaScript/Reference/Global_Objects/parseFloat +tags: + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/parseFloat +--- +<div>{{jsSidebar("Objects")}}</div> + +<p><code><strong>parseFloat()</strong></code> 함수는 문자열을 분석해 부동소수점 실수로 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-parsefloat.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">parseFloat(<em>value</em>)</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>value</code></dt> + <dd>변환할 값.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 값에서 분석한 부동소수점 수. 분석할 수 없으면 {{jsxref("NaN")}}.</p> + +<h2 id="설명">설명</h2> + +<p><code>parseFloat()</code>은 최상위 함수로 어떠한 객체와도 연결되어 있지 않습니다.</p> + +<p><code>parseFloat()</code>은 매개변수로 주어진 값 분석하고 부동소수점 수를 반환합니다. 기호(+, -), 숫자(0-9), 소수점 또는 지수 이외의 문자를 발견하면, 그 전까지의 결과만 반환하고 문제의 문자와 그 이후는 모두 무시합니다. 위치에 상관하지 않고, 그런 문자를 발견하면 {{jsxref("NaN")}}을 반환하는 더 엄격한 방법이 필요하면 {{jsxref("Number", "Number(value)")}}를 고려하세요.</p> + +<p>값이 문자열인데 첫 번째 문자를 숫자로 변환할 수 없는 경우 <code>parseFloat()</code>도 <code>NaN</code>을 반환합니다.</p> + +<p>수학적으로 <code>NaN</code>은 어떤 진법에도 속하지 않습니다. {{jsxref("isNaN", "isNaN()")}} 함수를 사용해 결과 값이 <code>NaN</code>인지 확인할 수 있습니다. <code>NaN</code>을 다른 값과의 수학 연산에 사용하면 그 결과도 언제나 <code>NaN</code>이 됩니다.</p> + +<p><code>parseFloat()</code>은 {{jsxref("Infinity")}}도 분석 및 반환할 수 있습니다. {{jsxref("isFinite", "isFinite()")}} 함수를 사용해 결과 값이 유한수(<code>Infinity</code>, <code>-Infinity</code>, <code>NaN</code>이 아닌 수)인지 알 수 있습니다.</p> + +<p><code>parseFloat()</code>은 <code>toString</code>이나 <code>valueOf</code> 메서드를 구현한 객체도 분석할 수 있습니다. 이 때의 결과는 객체의 <code>toString()</code>, <code>valueOf()</code>의 반환 값을 <code>parseFloat()</code>에 전달한 것과 동일합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="숫자를_반환하는_경우">숫자를 반환하는 경우</h3> + +<p>아래 예제는 모두 <code>3.14</code>를 반환합니다.</p> + +<pre class="brush: js">parseFloat(3.14); +parseFloat('3.14'); +parseFloat('314e-2'); +parseFloat('0.0314E+2'); +parseFloat('3.14와 숫자가 아닌 문자들'); + +var foo = Object.create(null); +foo.toString = function () { return "3.14"; }; +parseFloat(foo); + +var foo = Object.create(null); +foo.valueOf = function () { return "3.14"; }; +parseFloat(foo); +</pre> + +<h3 id="NaN을_반환하는_경우"><code>NaN</code>을 반환하는 경우</h3> + +<p>다음 예제는 {{jsxref("NaN")}}을 반환합니다.</p> + +<pre class="brush: js">parseFloat('FF2'); +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.2.3', 'parseFloat')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-parsefloat-string', 'parseFloat')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-parsefloat-string', 'parseFloat')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.parseFloat")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</li> + <li>{{jsxref("Number.parseFloat()")}}</li> + <li>{{jsxref("Number.parseInt()")}}</li> + <li>{{jsxref("Number.toFixed()")}}</li> + <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/parseint/index.html b/files/ko/web/javascript/reference/global_objects/parseint/index.html new file mode 100644 index 0000000000..0539e1ba53 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/parseint/index.html @@ -0,0 +1,220 @@ +--- +title: parseInt() +slug: Web/JavaScript/Reference/Global_Objects/parseInt +tags: + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/parseInt +--- +<div>{{jsSidebar("Objects")}}</div> + +<p><code><strong>parseInt()</strong></code> 함수는 문자열 인자를 구문분석하여 특정 진수(수의 진법 체계에 기준이 되는 값)의 정수를 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-parseint.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate">parseInt(<em>string</em>, <em>radix</em>);</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>string</code></dt> + <dd>분석할 값. 만약 <code>string</code>이 문자열이 아니면 문자열로 변환(<code><a href="http://www.ecma-international.org/ecma-262/6.0/#sec-tostring">ToString</a></code> 추상 연산을 사용)합니다. 문자열의 선행 공백은 무시합니다.</dd> +</dl> + +<dl> + <dt><code>radix</code>{{optional_inline}}</dt> + <dd><code>string</code>이 표현하는 정수를 나타내는 2와 36 사이의 진수(수의 진법 체계에 기준이 되는 값). 주의하세요-기본값이 10이 아닙니다!</dd> + <dt></dt> + <dt> + <div class="blockIndicator warning"> + <p><a href="#설명">아래의 설명</a>은 radix가 제공되지 않았을때 무엇이 발생하는지 상세하게 설명하고 있습니다.</p> + </div> + </dt> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 <code>string</code>로부터 분석한 정수.</p> + +<p>또는 아래의 경우에는 {{jsxref("NaN")}}을 반환합니다</p> + +<ul> + <li><code>radix</code>가 2보다 작거나 36보다 큰 경우</li> + <li>첫번째 non-whitespace 문자가 숫자로 변환되지 않는 경우</li> +</ul> + +<h2 id="설명_2"><a id="설명" name="설명">설명</a></h2> + +<p><code>parseInt</code> 함수는 첫 번째 인자를 문자열로 변환하고 파싱하고, 그 문자열을 파싱하여 정수나 <code>NaN</code>을 리턴합니다.</p> + +<p>만약 <code>NaN</code>이 아니면, 첫번째 인자를 특정 <code><var>radix</var></code>(진수) 값으로 표현한 정수가 반환됩니다. (예를 들면, <code><var>radix</var></code>가 <code>10</code>인 경우 십진수로 변환하며, <code>8</code>인 경우는 8진수로, <code>16</code>인 경우 16진수 등등으로 변환합니다.)</p> + +<p><code>radix </code>가 <code>10</code> 이상인 경우, <code>9</code>보다 큰 숫자들은 알파벳 문자로 나타내집니다. 예를 들면, 16 진수의 경우, A부터 F가 사용됩니다.</p> + +<p>만약 <code>parseInt</code> 함수가 특정 진수를 나타내는 숫자가 아닌 글자를 마주치게 되면, 이 글자와 계속되는 글자들은 전부 무시되며, 파싱된 정수값을 리턴합니다. <code>parseInt</code> 함수는 정수값으로 숫자를 잘라버립니다. 맨 앞의 공백과 그 뒤의 공백들은 허용됩니다.</p> + +<p>일부 숫자들은 문자열 표현에 e 문자를 사용하기 때문에(예: 6.022 × 10<sup>23</sup>의 경우 <code>6.022e23</code> ) 숫자를 자르기 위하여 <code>parseInt</code>를 사용하는 것은 매우 크거나 매우 작은 숫자에 사용하는 경우 예기치 않은 결과가 발생합니다. <code>parseInt</code>는 {{jsxref("Math.floor()")}}의 대체품으로 사용해서는 안 됩니다.</p> + +<p><code>parseInt</code>는 양수를 의미하는 <code>+ </code>기호와 음수를 나타내는 <code>-</code> 기호를 정확히 이해합니다(ECMAScript 1 이후). 공백이 제거된 후 구문 분석의 초기 단계로 수행됩니다. 기호를 찾을 수 없으면 알고리즘이 다음 단계로 이동하고, 그렇지 않으면 기호를 제거하고 문자열의 나머지 부분에서 숫자 파싱을 실행합니다.</p> + +<p>만약 <var>radix</var> 가 <code>undefined</code> 이거나 0이라면, (또는 없다면), JavaScript 는 아래와 같이 임의 처리합니다. :</p> + +<ol> + <li>인풋 값 <code>string</code> 이 "0x" 나 "0X"로 시작한다면, <var>radix</var> 는 16(16진)이며, 나머지 문자열은 파싱됩니다.</li> + <li>인풋 값 <code>string</code> 이 "0"으로 시작한다면, <var>radix</var> 는 8(8진)이거나, 10(십진)입니다. 정확히 이 선택된 radix 는 구현 의존적적입니다. ECMAScript 5 는 10(십진)이 사용되는 것을 명시하지만, 모든 브라우저가 아직 이렇게 되지 않습니다. 이러한 이유로 <strong>항상 <code>parseInt</code>를 사용할 때는 radix 값을 명시해야 합니다.</strong></li> + <li>인풋 값 <code>string</code> 이 다른 값으로 시작 된다면, radix 는 10(십진)입니다.</li> +</ol> + +<p>첫 번째 글자가 숫자로 변환될 수 없다면, <code>parseInt</code> 는 <code>NaN</code>을 리턴할 것입니다.</p> + +<p>연산의 경우, <code>NaN</code> 값은 어떠한 radix 숫자도 아닙니다. <code>parseInt</code> 값이 <code>NaN</code>인지 알아내기 위해 {{jsxref("isNaN")}} 함수를 호출할 수 있습니다. 만약 <code>NaN</code>이 산술 연산으로 넘겨진다면, 이 연산의 결과 또한 NaN이 될 것입니다.</p> + +<p>특정 진수의 스트링 리터럴로 숫자를 변환하는 것은 <code>intValue.toString(radix)</code>를 사용합니다.</p> + +<div class="blockIndicator warning"> +<p>{{jsxref("BigInt")}} 주의: <code>parseInt</code>는 {{jsxref("BigInt")}}를 {{jsxref("Number")}}으로 변환하여 정확성을 떨어뜨립니다. 이는 "n"을 포함한 숫자가 아닌 값은 삭제되기 때문입니다.</p> +</div> + +<h2 id="radix가_없는_8진_해석">radix가 없는 8진 해석</h2> + +<p>비록 ECMAScript 3 에서 권장되지 않고, ECMAScript 5 에서 금지되었지만, 많은 구현들은 <code>0</code>으로 시작하는 8진수 문자열을 해석합니다. 다음의 코드는 8진 결과를 가질 수도 있으며, 10진의 결과를 가질 수도 있습니다. <strong>항상 이러한 명확하지 않은 표현은 피하고 <code>radix</code>를 명시하도록 합니다.</strong></p> + +<pre class="brush: js notranslate">parseInt("0e0"); // 0 +parseInt("08"); // 0, '8' 은 8진수가 아니다. +</pre> + +<h3 id="ECMAScript_5는_8진수_해석을_삭제하였습니다.">ECMAScript 5는 8진수 해석을 삭제하였습니다.</h3> + +<p>ECMAScript 5의 <code>parseInt</code> 함수 스펙은 더 이상 <code>0</code> 으로 시작하는 8진수 값의 문자열을 다루는 구현을 허용하지 않습니다. ECMAScript 5는 다음을 발표했습니다. :</p> + +<p><code>parseInt</code> 함수는 특정 radix(진수)값에 따라 문자열 아규먼트 내용의 해석을 하고, 그 영향을 받은 정수 값을 생성합니다. 문자열 내에서 시작되는 부분에 위치한 공백은 무시됩니다. 만약 radix 값이 정의되지 않거나, <code>0</code>이라면, 이것은 10진수로 여겨집니다. <code>0x</code> 이나 <code>0X</code> 으로 시작되는 숫자 일 때는 16진수로 여겨집니다.</p> + +<p>ECMAScript 3 와의 차이는 8진수의 해석을 허용하고 있느냐의 차이입니다.</p> + +<p>많은 구현들이 2013부터 이 방식을 채택하고 있지 않아 왔습니다. 오래된 브라우저는 지원되어야 하기 때문에 <strong>항상 radix 값을 명시 해야합니다. </strong></p> + +<h2 id="더_엄격한_파싱_함수">더 엄격한 파싱 함수</h2> + +<p>가끔은 int 값을 파싱할 때 더 엄격한 방식을 이용하는 것이유용합니다. 정규 표현식이 도움이 될 것입니다. :</p> + +<pre class="brush: js notranslate">filterInt = function (value) { + if(/^(\-|\+)?([0-9]+|Infinity)$/.test(value)) + return Number(value); + return NaN; +} + +console.log(filterInt('421')); // 421 +console.log(filterInt('-421')); // -421 +console.log(filterInt('+421')); // 421 +console.log(filterInt('Infinity')); // Infinity +console.log(filterInt('421e+0')); // NaN +console.log(filterInt('421hop')); // NaN +console.log(filterInt('hop1.61803398875')); // NaN +console.log(filterInt('1.61803398875')); // NaN +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="parseInt_사용하기"><code>parseInt()</code> 사용하기</h3> + +<p>다음의 예제는 모두 <code>15</code>를 리턴합니다.</p> + +<pre class="brush: js notranslate">parseInt(" 0xF", 16); +parseInt(" F", 16); +parseInt("17", 8); +parseInt(021, 8); +parseInt("015", 10); // parseInt(015, 10); 13이 리턴될 것입니다. +parseInt(15.99, 10); +parseInt("15,123", 10); +parseInt("FXX123", 16); +parseInt("1111", 2); +parseInt("15*3", 10); +parseInt("15e2", 10); +parseInt("15px", 10); +parseInt("12", 13); +</pre> + +<p>다음의 예제는 모두 <code>NaN</code>을 리턴합니다.</p> + +<pre class="brush: js notranslate">parseInt("Hello", 8); // 전부 숫자가 아님. +parseInt("546", 2); // 숫자는 2진법 표현이 불가능함. +</pre> + +<p>다음의 예제는 모두 <code>-15</code>을 리턴합니다. :</p> + +<pre class="brush: js notranslate">parseInt("-F", 16); +parseInt("-0F", 16); +parseInt("-0XF", 16); +parseInt(-15.1, 10) +parseInt(" -17", 8); +parseInt(" -15", 10); +parseInt("-1111", 2); +parseInt("-15e1", 10); +parseInt("-12", 13); +</pre> + +<p>다음의 예제는 모두 <code>4</code>를 리턴합니다.</p> + +<pre class="notranslate">parseInt(4.7, 10) +parseInt(4.7 * 1e22, 10) // 매우 큰 숫자가 4가 됨 +parseInt(0.00000000000434, 10) // 매우 작은 숫자가 4가 됨 +</pre> + +<p>만약 숫자가 <code>1e+21</code>과 같거나 큰 경우, 또는 <code>1e-7</code>과 같거나 작은 경우, <code>1</code>을 리턴합니다.(radix가 <code>10</code>인 경우)</p> + +<pre class="notranslate">parseInt(0.0000001,10); +parseInt(0.000000123,10); +parseInt(1e-7,10); +parseInt(1000000000000000000000,10); +parseInt(123000000000000000000000,10); +parseInt(1e+21,10); +</pre> + +<p>다음의 예제는 모두 <strong><code>224</code></strong>를 리턴합니다.</p> + +<pre class="brush: js notranslate">parseInt("0e0", 16); +</pre> + +<p>{{jsxref("BigInt")}} 는 정확성을 잃습니다.</p> + +<pre class="notranslate">parseInt('900719925474099267n') +// 900719925474099300</pre> + +<p><code>parseInt</code> 는 숫자구분자와 같이 작동하지 않습니다.</p> + +<pre class="notranslate">parseInt('123_456') +// 123</pre> + +<h2 id="명세">명세</h2> + +<table> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-parseint-string-radix', 'parseInt')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div id="compat-mobile">{{Compat("javascript.builtins.parseInt")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</li> + <li>{{jsxref("Number.parseFloat()")}}</li> + <li>{{jsxref("Number.parseInt()")}}</li> + <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li> + <li>{{jsxref("Number.toString()")}}</li> + <li>{{jsxref("Object.valueOf")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/promise/all/index.html b/files/ko/web/javascript/reference/global_objects/promise/all/index.html new file mode 100644 index 0000000000..c8a458a665 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/promise/all/index.html @@ -0,0 +1,239 @@ +--- +title: Promise.all() +slug: Web/JavaScript/Reference/Global_Objects/Promise/all +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Promise +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all +--- +<div>{{JSRef}}</div> + +<p><code><strong>Promise.all()</strong></code> 메서드는 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 {{jsxref("Promise")}}를 반환합니다. 주어진 프로미스 중 하나가 거부하는 경우, 첫 번째로 거절한 프로미스의 이유를 사용해 자신도 거부합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/promise-all.html")}}</div> + +<p class="hidden">해당 예제의 소스 코드는 GitHub 리포지토리에 저장되어 있습니다. 인터랙티브 데모 프로젝트에 기여하고 싶다면 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 를 클론하고 pull request를 보내 주세요.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Promise.all(<var>iterable</var>); +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>iterable</code></dt> + <dd>{{jsxref("Array")}}와 같이 <a href="/ko/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">순회 가능</a>한(iterable) 객체.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<ul> + <li>매개변수로 주어진 순회 가능한 객체가 비어 있으면 <strong>이미 이행한</strong> {{jsxref("Promise")}}.</li> + <li>객체에 프로미스가 없으면, <strong>비동기적으로 이행하는</strong> {{jsxref("Promise")}}. 단, 구글 크롬 58은 <strong>이미 이행한</strong> 프로미스를 반환합니다.</li> + <li>그렇지 않은 경우, <strong>대기 중</strong>인 {{jsxref("Promise")}}. 결과로 반환하는 프로미스는 인자의 모든 프로미스가 이행하거나 어떤 프로미스가 거부할 때 (호출 스택이 비는 즉시) <strong>비동기적으로</strong> 이행/거부합니다. "<code>Promise.all</code>의 동기성/비동기성" 예제를 참고하세요. 반환하는 프로미스의 이행 값은 매개변수로 주어진 프로미스의 순서와 일치하며, 완료 순서에 영향을 받지 않습니다.</li> +</ul> + +<h2 id="설명">설명</h2> + +<p><code>Promise.all</code>은 여러 프로미스의 결과를 집계할 때 유용하게 사용할 수 있습니다.</p> + +<h3 id="이행">이행</h3> + +<p>반환한 프로미스의 이행 결과값은 (프로미스가 아닌 값을 포함하여) 매개변수로 주어진 순회 가능한 객체에 포함된 <strong>모든</strong> 값을 담은 배열입니다.</p> + +<ul> + <li>빈 객체를 전달한 경우, (동기적으로) 이미 이행한 프로미스를 반환합니다.</li> + <li>전달받은 모든 프로미스가 이미 이행되어 있거나 프로미스가 없는 경우, 비동기적으로 이행하는 프로미스를 반환합니다.</li> +</ul> + +<h3 id="거부">거부</h3> + +<p>주어진 프로미스 중 하나라도 거부하면, 다른 프로미스의 이행 여부에 상관없이 첫 번째 거부 이유를 사용해 거부합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Promise.all_사용하기"><code>Promise.all</code> 사용하기</h3> + +<p><code>Promise.all</code>은 배열 내 모든 값의 이행(또는 첫 번째 거부)을 기다립니다.</p> + +<pre class="brush: js">var p1 = Promise.resolve(3); +var p2 = 1337; +var p3 = new Promise((resolve, reject) => { + setTimeout(() => { + resolve("foo"); + }, 100); +}); + +Promise.all([p1, p2, p3]).then(values => { + console.log(values); // [3, 1337, "foo"] +});</pre> + +<p>순회 가능한 객체에 프로미스가 아닌 값이 들어있다면 무시하지만, 이행 시 결과 배열에는 포함합니다.</p> + +<pre class="brush: js">// 매개변수 배열이 빈 것과 동일하게 취급하므로 이행함 +var p = Promise.all([1,2,3]); +// 444로 이행하는 프로미스 하나만 제공한 것과 동일하게 취급하므로 이행함 +var p2 = Promise.all([1,2,3, Promise.resolve(444)]); +// 555로 거부하는 프로미스 하나만 제공한 것과 동일하게 취급하므로 거부함 +var p3 = Promise.all([1,2,3, Promise.reject(555)]); + +// setTimeout()을 사용해 스택이 빈 후에 출력할 수 있음 +setTimeout(function() { + console.log(p); + console.log(p2); + console.log(p3); +}); + +// 출력 +// Promise { <state>: "fulfilled", <value>: Array[3] } +// Promise { <state>: "fulfilled", <value>: Array[4] } +// Promise { <state>: "rejected", <reason>: 555 }</pre> + +<h3 id="Promise.all의_동기성비동기성"><code>Promise.all</code>의 동기성/비동기성</h3> + +<p>다음 예제는 <code>Promise.all</code>의 비동기성(주어진 인자가 빈 경우엔 동기성)을 보입니다.</p> + +<pre class="brush: js">// Promise.all을 최대한 빨리 완료시키기 위해 +// 이미 이행된 프로미스로 배열을 만들어 인자로 전달 +var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)]; + +var p = Promise.all(resolvedPromisesArray); +// 실행 즉시 p의 값을 기록 +console.log(p); + +// 호출 스택을 비운 다음 실행하기 위해 setTimeout을 사용 +setTimeout(function() { + console.log('the stack is now empty'); + console.log(p); +}); + +// 로그 출력 결과 (순서대로): +// Promise { <state>: "pending" } +// the stack is now empty +// Promise { <state>: "fulfilled", <value>: Array[2] } +</pre> + +<p><code>Promise.all()</code>이 거부하는 경우에도 동일한 일이 발생합니다:</p> + +<pre class="brush: js">var mixedPromisesArray = [Promise.resolve(33), Promise.reject(44)]; +var p = Promise.all(mixedPromisesArray); +console.log(p); +setTimeout(function() { + console.log('the stack is now empty'); + console.log(p); +}); + +// 출력 +// Promise { <state>: "pending" } +// the stack is now empty +// Promise { <state>: "rejected", <reason>: 44 } +</pre> + +<p>그러나, <code>Promise.all</code>은 주어진 순회 가능한 객체가 비어있는 경우에만 동기적으로 이행됩니다.</p> + +<pre class="brush: js">var p = Promise.all([]); // 즉시 이행함 +var p2 = Promise.all([1337, "hi"]); // 프로미스가 아닌 값은 무시하지만 비동기적으로 실행됨 +console.log(p); +console.log(p2); +setTimeout(function() { + console.log('the stack is now empty'); + console.log(p2); +}); + +// 출력 +// Promise { <state>: "fulfilled", <value>: Array[0] } +// Promise { <state>: "pending" } +// the stack is now empty +// Promise { <state>: "fulfilled", <value>: Array[2] } +</pre> + +<h3 id="Promise.all()_실패_우선성"><code>Promise.all()</code> 실패 우선성</h3> + +<p><code>Promise.all()</code>은 배열 내 요소 중 어느 하나라도 거부하면 즉시 거부합니다. 예를 들어, 일정 시간이 지난 이후 이행하는 네 개의 프로미스와, 즉시 거부하는 하나의 프로미스를 전달한다면 <code>Promise.all()</code>도 즉시 거부합니다.</p> + +<pre class="brush: js">var p1 = new Promise((resolve, reject) => { + setTimeout(() => resolve('하나'), 1000); +}); +var p2 = new Promise((resolve, reject) => { + setTimeout(() => resolve('둘'), 2000); +}); +var p3 = new Promise((resolve, reject) => { + setTimeout(() => resolve('셋'), 3000); +}); +var p4 = new Promise((resolve, reject) => { + setTimeout(() => resolve('넷'), 4000); +}); +var p5 = new Promise((resolve, reject) => { + reject(new Error('거부')); +}); + + +// .catch 사용: +Promise.all([p1, p2, p3, p4, p5]) +.then(values => { + console.log(values); +}) +.catch(error => { + console.log(error.message) +}); + +// 콘솔 출력값: +// "거부" +</pre> + +<p>발생할 수 있는 거부를 사전에 처리해 동작 방식을 바꿀 수 있습니다.</p> + +<pre class="brush: js">var p1 = new Promise((resolve, reject) => { + setTimeout(() => resolve('p1_지연_이행'), 1000); +}); + +var p2 = new Promise((resolve, reject) => { + reject(new Error('p2_즉시_거부')); +}); + +Promise.all([ + p1.catch(error => { return error }), + p2.catch(error => { return error }), +]).then(values => { + console.log(values[0]) // "p1_지연_이행" + console.log(values[1]) // "Error: p2_즉시_거부" +}) +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-promise.all', 'Promise.all')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition in an ECMA standard.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.all', 'Promise.all')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Promise.all")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.race()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/promise/allsettled/index.html b/files/ko/web/javascript/reference/global_objects/promise/allsettled/index.html new file mode 100644 index 0000000000..a063f29c7c --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/promise/allsettled/index.html @@ -0,0 +1,66 @@ +--- +title: Promise.allSettled() +slug: Web/JavaScript/Reference/Global_Objects/Promise/allSettled +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/allSettled +--- +<p>{{JSRef}}</p> + +<p><code><strong>Promise.allSettled()</strong></code> 메소드는 배열이나 별도의 나열 가능한 객체를 통해 나열된 Promise모음이 모두 이행하거나 거부했을 때에 대한 대응을 할 수 있는 Promise 객체를 반환한다.</p> + +<div>{{EmbedInteractiveExample("pages/js/promise-allsettled.html")}}</div> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><em>Promise</em>.allSettled(<em>iterable</em>);</pre> + +<h3 id="인자">인자</h3> + +<dl> + <dt><code>iterable</code></dt> + <dd><a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable</a> 객체로, 주로 배열({{jsxref("Array")}})을 사용하며, 이들의 요소들은 모두 <code>Promise</code> 객체.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p><strong>실행할</strong> {{jsxref("Promise")}} 객체로 <strong>비동기</strong> 방식으로 이행(Resolved) 및 거부(Rejected)된 결과의 모음을 담아 인자로 전달된다. 이 때 반환된 Promise 객체의 핸들러는 각 본래 Promise 객체가 담긴 배열을 전달할 것이다.</p> + +<p>각 출력 객체는 <code>status</code> 속성을 통해, <code>fulfilled</code>,상태로 전달되면 <code>value</code> 속성이 전달되고, <code>rejected</code> 상태로 전달 시 <code>reason</code> 속성으로 전달된다. 각 Promise가 어떻게 이행(또는 거부)됐는지 value 속성 및 reason 속성을 통해 알 수 있다.</p> + +<h2 id="문서_표준">문서 표준</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td><a href="https://tc39.es/proposal-promise-allSettled/#sec-promise.allsettled"><code>Promise.allSettled()</code> (TC39 Stage 4 Draft)</a></td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="지원_브라우저">지원 브라우저</h2> + +<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.Promise.allSettled")}}</p> + +<h3 id="구현_진행_상태">구현 진행 상태</h3> + +<p>The following table provides a daily implementation status for this feature, because this feature has not yet reached cross-browser stability. The data is generated by running the relevant feature tests in <a href="https://github.com/tc39/test262">Test262</a>, the standard test suite of JavaScript, in the nightly build, or latest release of each browser's JavaScript engine.</p> + +<div>{{EmbedTest262ReportResultsTable("Promise.allSettled")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/en-US/docs/Archive/Add-ons/Techniques/Promises">Promises</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Using promises</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with promises</a></li> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.all()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/promise/finally/index.html b/files/ko/web/javascript/reference/global_objects/promise/finally/index.html new file mode 100644 index 0000000000..c75d73ab06 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/promise/finally/index.html @@ -0,0 +1,100 @@ +--- +title: Promise.prototype.finally() +slug: Web/JavaScript/Reference/Global_Objects/Promise/finally +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/finally +--- +<div>{{JSRef}}</div> + +<p><code><strong>finally()</strong></code> 메소드는 {{jsxref("Promise")}} 객체를 반환합니다. Promise가 처리되면 충족되거나 거부되는지 여부에 관계없이 지정된 콜백 함수가 실행됩니다. 이것은 Promise가 성공적으로 수행 되었는지 거절되었는지에 관계없이 <code>Promise</code>가 처리 된 후에 코드가 무조건 한 번은 실행되는 것을 제공합니다.</p> + +<p>이것은 Promise의 {{jsxref("Promise.then", "then()")}}과 {{jsxref("Promise.catch", "catch()")}} 핸들러에서의 코드 중복을 피하게 합니다.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><var>p.finally(onFinally)</var>; + +p.finally(function() { + // settled (fulfilled or rejected) +}); +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>onFinally</code></dt> + <dd><code>Promise</code>가 처리된 후 {{jsxref("Function")}} 이 호출됩니다.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p><code>finally</code> 핸들러는 <code>onFinally</code> 라는 지정된 함수의 {{jsxref("Promise")}}가 반환됩니다.</p> + +<h2 id="설명">설명</h2> + +<p> </p> + +<p><code>finally()</code> 메서드는 결과에 관계없이 promise가 처리되면 무언가를 프로세싱 또는 정리를 수행하려는 경우에 유용합니다.</p> + +<p><code>finally()</code> 메서드는 <code>.then(onFinally, onFinally)</code> 를 호출하는 것과 매우 비슷하지만 몇 가지 차이점이 있습니다:</p> + +<p> </p> + +<ul> + <li>함수를 인라인으로 만들 때, 두 번 선언해야 하지 않고 한 번만 전달하거나 그것을 위한 변수를 만들 수 있습니다.</li> + <li><code>finally</code> 콜백은 어떠한 인수도 전달받지 않습니다, 왜냐하면 promise가 이행되었는지 또는 거부되었는지를 판단할 수 없기 때문입니다. promise의 왜 거부되었는지 또는 이행되었을때 반환되는 값이 필요하지 않거나 제공할 필요가 없을 때 활용합니다.</li> + <li>Promise.reject (3) .finally (() => {}) Promise.reject (3) .finally (() => {}) (약속 안 함) )는 3으로 거부됩니다.</li> + <li><code>Promise.resolve(2).then(() => {}, () => {})</code>(<code>undefined</code>로 해결될) 와 달리, <code>Promise.resolve(2).finally(() => {})</code> 는 값 <code>2</code>로 해결됩니다.</li> + <li>유사하게 <code>Promise.reject(3).then(() => {}, () => {})</code> (<code>undefined</code>로 거부될)와는 달리 <code>Promise.reject(3).finally(() => {})</code> 는 값 <code>3</code>로 거부됩니다.</li> +</ul> + +<div class="note"> +<p><strong>Note:</strong> <code>finally</code> 콜백에서 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5); font-size: 16px;">throw</span></font> (또는 거부된 promise를 반환)하면 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5); font-size: 16px;">throw()</span></font>를 호출 할 때 지정된 거부 이유로 새롭게 만들어진 promise를 반환합니다.</p> +</div> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">let isLoading = true; + +fetch(myRequest).then(function(response) { + var contentType = response.headers.get("content-type"); + if(contentType && contentType.includes("application/json")) { + return response.json(); + } + throw new TypeError("Oops, we haven't got JSON!"); + }) + .then(function(json) { /* process your JSON further */ }) + .catch(function(error) { console.log(error); }) + .finally(function() { isLoading = false; }); + +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td><a href="https://github.com/tc39/proposal-promise-finally">TC39 proposal</a></td> + <td>Stage 4</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.Promise.finally")}}</p> + +<h2 id="더보기">더보기</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.prototype.then()")}}</li> + <li>{{jsxref("Promise.prototype.catch()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/promise/index.html b/files/ko/web/javascript/reference/global_objects/promise/index.html new file mode 100644 index 0000000000..d3dbf076c5 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/promise/index.html @@ -0,0 +1,226 @@ +--- +title: Promise +slug: Web/JavaScript/Reference/Global_Objects/Promise +tags: + - ECMAScript 2015 + - JavaScript + - Promise + - Reference + - 프로미스 +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +--- +<div>{{JSRef}}</div> + +<p><strong><code>Promise</code></strong> 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.</p> + +<p>Promise의 작동 방식과 Promise 사용 방법에 대해 알아보려면 먼저 <a href="https://wiki.developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Using_promises">Promise 사용 방법</a>을 읽어 보십시오.</p> + +<h2 id="설명">설명</h2> + +<p><code>Promise</code>는 프로미스가 생성될 때 꼭 알 수 있지는 않은 값을 위한 대리자로, 비동기 연산이 종료된 이후의 결과값이나 실패 이유를 처리하기 위한 처리기를 연결할 수 있도록 합니다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하지는 않고, 대신 프로미스를 반환해서 미래의 어떤 시점에 결과를 제공합니다.</p> + +<p><code>Promise</code>는 다음 중 하나의 상태를 가집니다.</p> + +<ul> + <li>대기(<em>pending)</em>: 이행하거나 거부되지 않은 초기 상태.</li> + <li>이행(<em>fulfilled)</em>: 연산이 성공적으로 완료됨.</li> + <li>거부(<em>rejected)</em>: 연산이 실패함.</li> +</ul> + +<p>대기 중인 프로미스는 값과 함께 <em>이행할</em> 수도, 어떤 이유(오류)로 인해 <em>거부</em>될 수 있습니다. 이행이나 거부될 때, 프로미스에 연결한 처리기는 그 프로미스의 <code>then</code> 메서드에 의해 대기열에 오릅니다. 이미 이행했거나 거부된 프로미스에 연결한 처리기도 호출하므로, 비동기 연산과 처리기 연결 사이에 경합 조건<sup>race condition</sup>은 없습니다.</p> + +<p>{{jsxref("Promise.prototype.then()")}} 및 {{jsxref("Promise.prototype.catch()")}} 메서드의 반환 값은 다른 프로미스이므로, 서로 연결할 수 있습니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png"></p> + +<div class="note"> +<p><strong>혼동 주의:</strong> 느긋한 계산법 및 연산 연기를 위한 방법을 프로미스라고 부르는 다른 언어(예: Scheme)가 여럿 있습니다. 반면 JavaScript에서 프로미스는 콜백 함수를 연결할 수 있는 이미 진행 중인 프로세스를 나타냅니다. 표현식을 느긋하게 평가하려면 인수 없는 <a href="/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션">화살표 함수</a> <code>f = () => <em>expression</em></code>를 사용하고, <code>f()</code>를 사용해 평가하세요.</p> +</div> + +<div class="note"> +<p><strong>참고</strong>: 프로미스는 대기 중이지 않으며 이행 또는 거부됐을 때 처리(settled)됐다고 말합니다. 프로미스와 함께 쓰이는 단어 resolved는 프로미스가 다른 프로미스의 상태에 맞춰 처리됨, 또는 상태가 "잠김"되었다는 의미입니다. 용어에 관한 더 자세한 설명은 Domenic Denicola의 글 <a href="https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md" title="States and fates">States and fates</a>에서 볼 수 있습니다.</p> +</div> + +<h2 id="생성자">생성자</h2> + +<dl> + <dt>{{jsxref("Promise.Promise", "Promise()")}}</dt> + <dd>이미 프로미스를 지원하지 않는 함수를 감쌀 때 주로 사용합니다.</dd> +</dl> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>Promise.length</code></dt> + <dd>값이 언제나 1인 길이 속성입니다. (생성자 인수의 수)</dd> + <dt>{{jsxref("Promise.prototype")}}</dt> + <dd><code>Promise</code> 생성자의 프로토타입을 나타냅니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("Promise.all", "Promise.all(iterable)")}}</dt> + <dd><code>iterable</code> 내의 모든 프로미스가 이행한 뒤 이행하고, 어떤 프로미스가 거부하면 즉시 거부하는 프로미스를 반환합니다. 반환된 프로미스가 이행하는 경우 <code>iterable</code> 내의 프로미스가 결정한 값을 모은 배열이 이행 값입니다. 반환된 프로미스가 거부하는 경우 <code>iterable</code> 내의 거부한 프로미스의 이유를 그대로 사용합니다. 이 메서드는 여러 프로미스의 결과를 모을 때 유용합니다.</dd> + <dt>{{jsxref("Promise.race", "Promise.race(iterable)")}}</dt> + <dd><code>iterable</code> 내의 어떤 프로미스가 이행하거나 거부하는 즉시 스스로 이행하거나 거부하는 프로미스를 반환합니다. 이행 값이나 거부 이유는 원 프로미스의 값이나 이유를 그대로 사용합니다.</dd> +</dl> + +<dl> + <dt>{{jsxref("Promise.reject()")}}</dt> + <dd>주어진 이유로 거부하는 <code>Promise</code> 객체를 반환합니다.</dd> +</dl> + +<dl> + <dt>{{jsxref("Promise.resolve()")}}</dt> + <dd>주어진 값으로 이행하는 <code>Promise</code> 객체를 반환합니다. 값이 <code>then</code> 가능한 (즉, <code>then</code> 메서드가 있는) 경우, 반환된 프로미스는 <code>then</code> 메서드를 따라가고 마지막 상태를 취합니다. 그렇지 않은 경우 반환된 프로미스는 주어진 값으로 이행합니다. 어떤 값이 프로미스인지 아닌지 알 수 없는 경우, {{jsxref("Promise.resolve", "Promise.resolve(value)")}} 후 반환값을 프로미스로 처리할 수 있습니다.</dd> +</dl> + +<h2 id="Promise_프로토타입"><code>Promise</code> 프로토타입</h2> + +<h3 id="속성_2">속성</h3> + +<p>{{page('ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/prototype','속성')}}</p> + +<h3 id="메서드_2">메서드</h3> + +<p>{{page('ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/prototype','메서드')}}</p> + +<h2 id="예제">예제</h2> + +<h3 id="기본_예제">기본 예제</h3> + +<pre class="brush: js notranslate">let myFirstPromise = new Promise((resolve, reject) => { + // We call resolve(...) when what we were doing asynchronously was successful, and reject(...) when it failed. + // In this example, we use setTimeout(...) to simulate async code. + // In reality, you will probably be using something like XHR or an HTML5 API. + setTimeout(function(){ + resolve("Success!"); // Yay! Everything went well! + }, 250); +}); + +myFirstPromise.then((successMessage) => { + // successMessage is whatever we passed in the resolve(...) function above. + // It doesn't have to be a string, but if it is only a succeed message, it probably will be. + console.log("Yay! " + successMessage); +});</pre> + +<h3 id="고급_예제">고급 예제</h3> + +<div class="hidden"> +<pre class="brush: html notranslate"><button id="btn">프로미스 만들기!</button> +<div id="log"></div></pre> +</div> + +<p>다음의 작은 예제는 <code>Promise</code>의 동작 방식을 보여줍니다. <code>testPromise()</code> 함수는 {{HTMLElement("button")}}을 클릭할 때마다 호출되며, {{domxref("window.setTimeout()")}}을 사용해 1~3초의 무작위 간격 이후 프로미스 횟수(1부터 시작하는 숫자)로 이행하는 프로미스를 생성합니다. <code>Promise()</code> 생성자는 프로미스를 만드는 데 쓰입니다.</p> + +<p>프로미스 이행은 {{jsxref("Promise.prototype.then()","p1.then()")}}을 사용하는 이행 콜백 세트를 통해 단순히 로그에 남습니다. 약간의 로그를 통해, 함수의 동기 부분이 비동기적 프로미스의 완료와 어떻게 분리되어 있는지 확인할 수 있습니다.</p> + +<pre class="brush: js notranslate">'use strict'; +var promiseCount = 0; + +function testPromise() { + var thisPromiseCount = ++promiseCount; + + var log = document.getElementById('log'); + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') 시작 (<small>동기적 코드 시작</small>)<br/>'); + + // 새 프로미스 생성 - 프로미스의 생성 순서를 전달하겠다는 약속을 함 (3초 기다린 후) + var p1 = new Promise( + // 실행 함수는 프로미스를 이행(resolve)하거나 + // 거부(reject)할 수 있음 + function(resolve, reject) { + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') 프로미스 시작 (<small>비동기적 코드 시작</small>)<br/>'); + // setTimeout은 비동기적 코드를 만드는 예제에 불과 + window.setTimeout( + function() { + // 프로미스 이행 ! + resolve(thisPromiseCount); + }, Math.random() * 2000 + 1000); + } + ); + + // 프로미스를 이행했을 때 할 일은 then() 호출로 정의하고, + // 거부됐을 때 할 일은 catch() 호출로 정의 + p1.then( + // 이행 값 기록 + function(val) { + log.insertAdjacentHTML('beforeend', val + + ') 프로미스 이행 (<small>비동기적 코드 종료</small>)<br/>'); + }) + .catch( + // 거부 이유 기록 + function(reason) { + console.log('여기서 거부된 프로미스(' + reason + ')를 처리하세요.'); + }); + + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') 프로미스 생성 (<small>동기적 코드 종료</small>)<br/>'); +} +</pre> + +<div class="hidden"> +<pre class="brush: js notranslate">if ("Promise" in window) { + var btn = document.getElementById("btn"); + btn.addEventListener("click", testPromise); +} else { + log = document.getElementById('log'); + log.innerHTML = "Live example not available as your browser doesn't support the <code>Promise<code> interface."; +}</pre> +</div> + +<p>이 예제는 버튼을 클릭하면 실행됩니다. <code>Promise</code>를 지원하는 브라우저가 필요합니다. 짧은 시간 안에 버튼을 여러 번 클릭하여, 서로 다른 프로미스가 번갈아 이행되는 것을 볼 수도 있습니다.</p> + +<p>{{EmbedLiveSample("고급_예제", "500", "200")}}</p> + +<h2 id="XHR로_이미지_불러오기">XHR로 이미지 불러오기</h2> + +<p>이미지를 로드하기 위해 <code>Promise</code> 및 {{domxref("XMLHttpRequest")}}를 사용하는 또 다른 간단한 예는 MDN GitHub <a href="https://github.com/mdn/js-examples/tree/master/promises-test">js-examples</a> 저장소에서 이용할 수 있습니다. <a href="http://mdn.github.io/promises-test/">실제 예</a>를 볼 수도 있습니다. 각 단계에 주석이 붙어있어, 프로미스 및 XHR 구조를 차근차근 따라갈 수 있습니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise-objects', 'Promise')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>ECMA 표준에서 초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise-objects', 'Promise')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Promise")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Using_promises">프로미스 사용하기</a></li> + <li><a href="http://promisesaplus.com/">Promises/A+ 스펙</a></li> + <li><a href="https://medium.com/@ramsunvtech/promises-of-promise-part-1-53f769245a53">Venkatraman.R - JS Promise (Part 1, Basics)</a></li> + <li><a href="https://medium.com/@ramsunvtech/js-promise-part-2-q-js-when-js-and-rsvp-js-af596232525c#.dzlqh6ski">Venkatraman.R - JS Promise (Part 2 - Using Q.js, When.js and RSVP.js)</a></li> + <li><a href="https://tech.io/playgrounds/11107/tools-for-promises-unittesting/introduction">Venkatraman.R - Tools for Promises Unit Testing</a></li> + <li><a href="http://www.html5rocks.com/en/tutorials/es6/promises/">Jake Archibald: JavaScript Promises: There and Back Again</a></li> + <li><a href="http://de.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript">Domenic Denicola: Callbacks, Promises, and Coroutines – Asynchronous Programming Patterns in JavaScript</a></li> + <li><a href="http://www.mattgreer.org/articles/promises-in-wicked-detail/">Matt Greer: JavaScript Promises ... In Wicked Detail</a></li> + <li><a href="https://www.promisejs.org/">Forbes Lindesay: promisejs.org</a></li> + <li><a href="https://github.com/jakearchibald/es6-promise/">Promise polyfill</a></li> + <li><a href="https://www.udacity.com/course/javascript-promises--ud898">Udacity: JavaScript Promises</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/promise/promise/index.html b/files/ko/web/javascript/reference/global_objects/promise/promise/index.html new file mode 100644 index 0000000000..531b82dbca --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/promise/promise/index.html @@ -0,0 +1,78 @@ +--- +title: Promise() 생성자 +slug: Web/JavaScript/Reference/Global_Objects/Promise/Promise +tags: + - Constructor + - JavaScript + - Promise + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/Promise +--- +<div>{{JSRef}}</div> + +<p><strong><code>Promise</code></strong> 생성자는 주로 프로미스를 지원하지 않는 함수를 감쌀 때 사용합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/promise-constructor.html")}}</div> + +<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">new Promise(<var>executor</var>)</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>executor</code></dt> + <dd><code>resolve</code> 및 <code>reject</code> 인수를 전달할 실행 함수. 실행 함수는 프로미스 구현에 의해 <code>resolve</code>와 <code>reject</code> 함수를 받아 즉시 실행됩니다(실행 함수는 <code>Promise</code> 생성자가 생성한 객체를 반환하기도 전에 호출됩니다). <code>resolve</code> 및 <code>reject</code> 함수는 호출할 때 각각 프로미스를 이행하거나 거부합니다. 실행 함수는 보통 어떤 비동기 작업을 시작한 후 모든 작업을 끝내면 <code>resolve</code>를 호출해 프로미스를 이행하고, 오류가 발생한 경우 <code>reject</code>를 호출해 거부합니다. 실행 함수에서 오류를 던지면 프로미스는 거부됩니다. 실행 함수의 반환값은 무시됩니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<p><code>Promise</code> 객체는 <code>new</code> 키워드와 생성자를 사용해 만듭니다. 생성자는 매개변수로 "실행 함수"를 받습니다. 이 함수는 매개 변수로 두 가지 함수를 받아야 하는데, 첫 번째 함수(<code>resolve</code>)는 비동기 작업을 성공적으로 완료해 결과를 값으로 반환할 때 호출해야 하고, 두 번째 함수(<code>reject</code>)는 작업이 실패하여 오류의 원인을 반환할 때 호출하면 됩니다. 두 번째 함수는 주로 오류 객체를 받습니다.</p> + +<pre class="brush: js;">const myFirstPromise = new Promise((resolve, reject) => { + // do something asynchronous which eventually calls either: + // + // resolve(someValue) // fulfilled + // or + // reject("failure reason") // rejected +}); +</pre> + +<p>함수에 프로미스 기능을 추가하려면, 간단하게 프로미스를 반환하도록 하면 됩니다.</p> + +<pre class="brush: js;">function myAsyncFunction(url) { + return new Promise((resolve, reject) => { + const xhr = new XMLHttpRequest() + xhr.open("GET", url) + xhr.onload = () => resolve(xhr.responseText) + xhr.onerror = () => reject(xhr.statusText) + xhr.send() + }); +}</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise-constructor', 'Promise constructor')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Promise.Promise")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Guide/Using_promises">프로미스 사용하기</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/promise/prototype/index.html b/files/ko/web/javascript/reference/global_objects/promise/prototype/index.html new file mode 100644 index 0000000000..4569b4d26a --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/promise/prototype/index.html @@ -0,0 +1,71 @@ +--- +title: Promise.prototype +slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype +tags: + - JavaScript + - Promise + - Property + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +--- +<div>{{JSRef}}</div> + +<p><strong><code>Promise.prototype</code></strong> 속성은 {{jsxref("Promise")}} 생성자의 프로토타입을 나타냅니다.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="설명">설명</h2> + +<p>{{jsxref("Promise")}} 인스턴스는 {{jsxref("Promise.prototype")}}을 상속합니다. 모든 <code>Promise</code> 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있습니다.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>Promise.prototype.constructor</code></dt> + <dd>인스턴스의 프로토타입을 만드는 함수를 반환합니다. 기본값은 {{jsxref("Promise")}} 함수입니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("Promise.prototype.catch()")}}</dt> + <dd>프로미스(promise)에 거부 처리기 콜백을 추가하고 호출된 경우 콜백의 반환값 또는 프로미스가 대신 이행된 경우 그 원래 이행(fulfillment)값으로 결정하는(resolving) 새 프로미스를 반환합니다.</dd> + <dt>{{jsxref("Promise.prototype.then()")}}</dt> + <dd>프로미스에 이행 또는 거부 처리기를 추가하고 호출된 처리기의 반환값 또는 프로미스가 처리되지 않은 경우 그 원래 처리된(settled) 값으로 결정하는 새 프로미스를 반환합니다 (즉 관련 처리기 <code>onFulfilled</code> 또는 <code>onRejected</code>가 <code>undefined</code>인 경우).</dd> + <dt>{{jsxref("Promise.prototype.finally()")}}</dt> + <dd>Appends a handler to the promise, and returns a new promise which is resolved when the original promise is resolved. The handler is called when the promise is settled, whether fulfilled or rejected.</dd> +</dl> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.prototype', 'Promise.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Promise.prototype")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/promise/race/index.html b/files/ko/web/javascript/reference/global_objects/promise/race/index.html new file mode 100644 index 0000000000..0874d619dd --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/promise/race/index.html @@ -0,0 +1,187 @@ +--- +title: Promise.race() +slug: Web/JavaScript/Reference/Global_Objects/Promise/race +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Promise + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/race +--- +<div>{{JSRef}}</div> + +<p><code><strong>Promise.race()</strong></code> 메소드는 Promise 객체를 반환합니다. 이 프로미스 객체는 iterable 안에 있는 프로미스 중에 가장 먼저 완료된 것의 결과값으로 그대로 이행하거나 거부합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/promise-race.html")}}</div> + +<p class="hidden">해당 예제의 소스 코드는 GitHub 리포지토리에 저장되어 있습니다. 인터랙티브 데모 프로젝트에 기여하고 싶다면 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 를 클론하고 pull request를 보내 주세요.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Promise.race(<em>iterable</em>);</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>iterable</code></dt> + <dd>{{jsxref("Array")}}와 같은 iterable 객체. <a href="/ko/docs/Web/JavaScript/Reference/Iteration_protocols">iterable</a>을 참고하세요.</dd> +</dl> + +<h3 id="반환값">반환값</h3> + +<p>주어진 iterable에서 처음으로 이행하거나 거부한 프로미스의 값을 <strong>비동기적으로</strong> 전달받는 <strong>대기 중</strong>인 {{jsxref("Promise")}}.</p> + +<h2 id="설명">설명</h2> + +<p><code>race</code> 함수는 인자로 주어진 iterable의 프로미스 중 가장 먼저 완료(settle)되는 것과 같은 방식으로 완료(이행/거부)되고, 같은 결과값을 전달하는 <code>Promise</code>를 반환합니다.</p> + +<p>전달받은 iterable이 비어 있을 경우, 반환한 프로미스는 영원히 대기 상태가 됩니다.</p> + +<p>Iterable에 프로미스가 아닌 값이나 이미 완료된 프로미스가 포함되어 있을 경우, <code>Promise.race</code>는 전달받은 iterable에서 처음으로 등장하는 이러한 값을 결과값으로 이행합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Promise.race의_비동기성"><font face="consolas, Liberation Mono, courier, monospace"><code>Promise.race</code>의 비동기성</font></h3> + +<p>다음 예제에서 <code>Promise.race</code>의 비동기성을 확인할 수 있습니다.</p> + +<pre class="brush: js">// Promise.race를 최대한 빨리 완료시키기 위해 +// 이미 이행된 프로미스로 배열을 만들어 인자로 전달 +var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)]; + +var p = Promise.race(resolvedPromisesArray); +// 실행 즉시 p의 값을 기록 +console.log(p); + +// 호출 스택을 비운 다음 실행하기 위해 setTimeout을 사용 +setTimeout(function(){ + console.log('the stack is now empty'); + console.log(p); +}); + +// 로그 출력 결과 (순서대로): +// Promise { <state>: "pending" } +// the stack is now empty +// Promise { <state>: "fulfilled", <value>: 33 }</pre> + +<p>비어 있는 iterable을 전달하면 반환한 프로미스는 영원히 대기 상태가 됩니다.</p> + +<pre class="brush: js">var foreverPendingPromise = Promise.race([]); +console.log(foreverPendingPromise); +setTimeout(function(){ + console.log('the stack is now empty'); + console.log(foreverPendingPromise); +}); + +// 로그 출력 결과 (순서대로): +// Promise { <state>: "pending" } +// the stack is now empty +// Promise { <state>: "pending" } +</pre> + +<p>Iterable에 프로미스가 아닌 값이나 이미 완료된 프로미스가 포함되어 있을 경우, <code>Promise.race</code>는 전달받은 iterable에서 처음으로 등장하는 이러한 값을 결과값으로 이행합니다.</p> + +<pre class="brush: js">var foreverPendingPromise = Promise.race([]); +var alreadyFulfilledProm = Promise.resolve(666); + +var arr = [foreverPendingPromise, alreadyFulfilledProm, "프로미스 아님"]; +var arr2 = [foreverPendingPromise, "프로미스 아님", Promise.resolve(666)]; +var p = Promise.race(arr); +var p2 = Promise.race(arr2); + +console.log(p); +console.log(p2); +setTimeout(function(){ + console.log('the stack is now empty'); + console.log(p); + console.log(p2); +}); + +// 로그 출력 결과 (순서대로): +// Promise { <state>: "pending" } +// Promise { <state>: "pending" } +// the stack is now empty +// Promise { <state>: "fulfilled", <value>: 666 } +// Promise { <state>: "fulfilled", <value>: "프로미스 아님" } +</pre> + +<h3 id="setTimeout과_함께_Promise.race_사용_예"><code>setTimeout</code>과 함께 <code>Promise.race</code> 사용 예</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> p1 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Promise</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">resolve<span class="punctuation token">,</span> reject</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=></span> <span class="function token">resolve</span><span class="punctuation token">(</span><span class="string token">'하나'</span><span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="number token">500</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> p2 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Promise</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">resolve<span class="punctuation token">,</span> reject</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=></span> <span class="function token">resolve</span><span class="punctuation token">(</span><span class="string token">'둘'</span><span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="number token">100</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +Promise<span class="punctuation token">.</span><span class="function token">race</span><span class="punctuation token">(</span><span class="punctuation token">[</span>p1<span class="punctuation token">,</span> p2<span class="punctuation token">]</span><span class="punctuation token">)</span> +<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">value</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "둘"</span> + <span class="comment token">// 둘 다 이행하지만 p2가 더 빠르므로</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">var</span> p3 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Promise</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">resolve<span class="punctuation token">,</span> reject</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=></span> <span class="function token">resolve</span><span class="punctuation token">(</span><span class="string token">'셋'</span><span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="number token">100</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> p4 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Promise</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">resolve<span class="punctuation token">,</span> reject</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=></span> <span class="function token">reject</span><span class="punctuation token">(</span><span class="keyword token">new</span> <span class="class-name token">Error</span><span class="punctuation token">(</span><span class="string token">'넷'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="number token">500</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +Promise<span class="punctuation token">.</span><span class="function token">race</span><span class="punctuation token">(</span><span class="punctuation token">[</span>p3<span class="punctuation token">,</span> p4<span class="punctuation token">]</span><span class="punctuation token">)</span> +<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">value</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "셋"</span> + <span class="comment token">// p3이 더 빠르므로 이행함</span> +<span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">reason</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// 실행되지 않음</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">var</span> p5 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Promise</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">resolve<span class="punctuation token">,</span> reject</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=></span> <span class="function token">resolve</span><span class="punctuation token">(</span><span class="string token">'다섯'</span><span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="number token">500</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> p6 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Promise</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">resolve<span class="punctuation token">,</span> reject</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=></span> <span class="function token">reject</span><span class="punctuation token">(</span><span class="keyword token">new</span> <span class="class-name token">Error</span><span class="punctuation token">(</span><span class="string token">'여섯'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="number token">100</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +Promise<span class="punctuation token">.</span><span class="function token">race</span><span class="punctuation token">(</span><span class="punctuation token">[</span>p5<span class="punctuation token">,</span> p6<span class="punctuation token">]</span><span class="punctuation token">)</span> +<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">value</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// 실행되지 않음</span> +<span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">error</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>error<span class="punctuation token">.</span>message<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "여섯"</span> + <span class="comment token">// p6이 더 빠르므로 거부함</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.race', 'Promise.race')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>ECMA 표준에서 초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.race', 'Promise.race')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Promise.race")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.all()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/promise/reject/index.html b/files/ko/web/javascript/reference/global_objects/promise/reject/index.html new file mode 100644 index 0000000000..a376940d7e --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/promise/reject/index.html @@ -0,0 +1,81 @@ +--- +title: Promise.reject() +slug: Web/JavaScript/Reference/Global_Objects/Promise/reject +tags: + - ECMAScript6 + - JavaScript + - Method + - Promise +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/reject +--- +<div>{{JSRef}}</div> + +<p><code><strong>Promise.reject(reason)</strong></code> 메서드는 주어진 이유(reason)로 거부된 <code>Promise</code> 객체를 반환합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>Promise.reject(reason)</var>;</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt>reason</dt> + <dd>이 <code>Promise</code>를 거부한 이유.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>정적 <code>Promise.reject</code> 함수는 거부된 <code>Promise</code>를 반환합니다. 디버깅 목적 및 선택된 오류를 잡기 위해, <code>reason</code>을 <code>instanceof</code> {{jsxref("Error")}} 이게 하는데 유용합니다.</p> + +<h2 id="예">예</h2> + +<h3 id="정적_Promise.reject()_메서드_사용">정적 Promise.reject() 메서드 사용</h3> + +<pre class="brush: js">Promise.reject("Testing static reject").then(function(reason) { + // 호출되지 않음 +}, function(reason) { + console.log(reason); // "Testing static reject" +}); + +Promise.reject(new Error("fail")).then(function(error) { + // 호출되지 않음 +}, function(error) { + console.log(error); // Stacktrace +});</pre> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.reject', 'Promise.reject')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>ECMA 표준에서 초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.reject', 'Promise.reject')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Promise.reject")}}</p> + +<p> </p> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li><a href="https://github.com/petkaantonov/bluebird#error-handling">BlueBird Promise 라이브러리를 사용해 선택된 오류 잡기</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/promise/resolve/index.html b/files/ko/web/javascript/reference/global_objects/promise/resolve/index.html new file mode 100644 index 0000000000..64180ef2bf --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/promise/resolve/index.html @@ -0,0 +1,162 @@ +--- +title: Promise.resolve() +slug: Web/JavaScript/Reference/Global_Objects/Promise/resolve +tags: + - ECMAScript6 + - JavaScript + - Method + - Promise + - 레퍼런스 +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/resolve +--- +<div>{{JSRef}}</div> + +<p><code><strong>Promise.resolve(value)</strong></code> 메서드는 주어진 값으로 이행하는 {{jsxref("Promise.then")}} 객체를 반환합니다. 그 값이 프로미스인 경우, 해당 프로미스가 반환됩니다. 그 값이 thenable(예, {{jsxref("Promise.then", "\"then\" 메소드")}} 가 있음)인 경우, 반환된 프로미스는 그 thenable을 "따르며", 그 최종 상태를 취합니다. 그렇지 않으면 반환된 프로미스는 그 값으로 이행합니다. 이 함수는 프로미스형의 객체(무언가를 결정하는 프로미스를 결정하는 프로미스 등)의 중첩된 레이어를 단일 레이어로 펼칩니다.</p> + +<div class="blockIndicator warning"> +<p><strong>주의</strong>: 스스로를 결정하는 thenable 에서 <code>Promise.resolve</code> 를 호출하면 안됩니다. 이는 무한히 중첩된 프로미스를 펼치려고하므로 무한 재귀를 유발할 것입니다. Angular 에서 <code>async</code> Pipe 를 함께 사용한 <a href="https://stackblitz.com/edit/angular-promiseresovle-with-async-pipe?file=src/app/app.component.ts">예제</a>입니다. 자세한 내용은<a href="https://angular.io/guide/template-syntax#avoid-side-effects"> 여기</a>에서 확인하세요.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/promise-resolve.html")}}</div> + +<div class="hidden"> +<p>The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>Promise.resolve(value)</var>; +</pre> + +<h3 id="파라미터">파라미터</h3> + +<dl> + <dt>value</dt> + <dd>이 <code>Promise</code>에 의해 결정되는 인수. <code>Promise</code> 또는 이행할 thenable 일수도 있습니다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<dl> + <dd> + <p>주어진 값으로 이행된 {{jsxref("Promise")}} 또는 값이 promise 객체인 경우, 값으로 전달된 promise. </p> + </dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>정적 <code>Promise.resolve</code> 함수는 이행된 <code>Promise</code> 를 반환합니다.</p> + +<h2 id="예시">예시</h2> + +<h3 id="정적_Promise.resolve_메소드_사용">정적 <code>Promise.resolve</code> 메소드 사용</h3> + +<pre class="brush: js">Promise.resolve("Success").then(function(value) { + console.log(value); // "Success" +}, function(value) { + // 호출되지 않음 +}); +</pre> + +<h3 id="배열_이행">배열 이행</h3> + +<pre class="brush: js">var p = Promise.resolve([1,2,3]); +p.then(function(v) { + console.log(v[0]); // 1 +}); +</pre> + +<h3 id="또_다른_Promise_이행">또 다른 <code>Promise</code> 이행</h3> + +<pre class="brush: js">var original = Promise.resolve(33); +var cast = Promise.resolve(original); +cast.then(function(value) { + console.log('value: ' + value); +}); +<code>console.log('original === cast ? ' + (original === cast)); +</code> +<code>// 로그 순서: +// original === cast ? true +// value: 33</code> +</pre> + +<p>로그의 순서가 반대인 이유는 <code>then</code> 핸들러가 비동기로 호출되기 때문입니다. <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/then#then_%EB%A9%94%EC%84%9C%EB%93%9C_%EC%82%AC%EC%9A%A9">여기</a>에서 <code>then</code> 이 동작하는 방식에 대해 확인하세요.</p> + +<h3 id="thenable_이행_및_오류_발생">thenable 이행 및 오류 발생</h3> + +<pre class="brush: js">// thenable 객체 이행 +var p1 = Promise.resolve({ + then: function(onFulfill, onReject) { onFulfill("fulfilled!"); } +}); +console.log(p1 instanceof Promise) // true, 객체는 Promise 로 변환됨 + +p1.then(function(v) { + console.log(v); // "fulfilled!" + }, function(e) { + // 호출되지 않음 +}); + +// thenable 이 콜백 이전에 오류를 throw +// Promise 거부 +var thenable = { then: function(resolve) { + throw new TypeError("Throwing"); + resolve("Resolving"); +}}; + +var p2 = Promise.resolve(thenable); +p2.then(function(v) { + // 호출되지 않음 +}, function(e) { + console.log(e); // TypeError: Throwing +}); + +// thenable 이 콜백 이후에 오류를 throw +// Promise 이행 +var thenable = { then: function(resolve) { + resolve("Resolving"); + throw new TypeError("Throwing"); +}}; + +var p3 = Promise.resolve(thenable); +p3.then(function(v) { + console.log(v); // "Resolving" +}, function(e) { + // 호출되지 않음 +}); +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.resolve', 'Promise.resolve')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>ECMA 표준에서 초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.resolve', 'Promise.resolve')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden"> +<p>To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> +</div> + +<p>{{Compat("javascript.builtins.Promise.resolve")}}</p> + +<h2 id="함께_보기">함께 보기</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/promise/then/index.html b/files/ko/web/javascript/reference/global_objects/promise/then/index.html new file mode 100644 index 0000000000..b7f79eee9c --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/promise/then/index.html @@ -0,0 +1,308 @@ +--- +title: Promise.prototype.then() +slug: Web/JavaScript/Reference/Global_Objects/Promise/then +tags: + - ECMAScript6 + - JavaScript + - Method + - Promise + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then +--- +<div>{{JSRef}}</div> + +<p><code><strong>then()</strong></code> 메서드는 {{domxref("Promise")}}를 리턴하고 두 개의 콜백 함수를 인수로 받습니다. 하나는 <code>Promise</code>가 <strong>이행</strong>했을 때, 다른 하나는 <strong>거부</strong>했을 때를 위한 콜백 함수입니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/promise-then.html")}}</div> + +<p class="hidden">해당 예제의 소스 코드는 GitHub 리포지토리에 저장되어 있습니다. 인터랙티브 데모 프로젝트에 기여하고 싶다면 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 를 클론하고 pull request를 보내 주세요.</p> + +<div class="note"> +<p>매개변수 중 하나 이상을 생략했거나 함수가 아닌 값을 전달한 경우, <code>then</code>은 핸들러가 없는 것이 되지만 오류를 발생하지는 않습니다. <code>then</code> 바로 이전의 <code>Promise</code>가 <code>then</code>에 핸들러가 없는 상태로 완료(이행이나 거부)했을 경우, 추가 핸들러가 없는 <code>Promise</code>가 생성되며, 원래 <code>Promise</code>의 마지막 상태를 그대로 물려받습니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>p.then(onFulfilled, onRejected)</var>; + +p.then(function(value) { + // 이행 +}, function(reason) { + // 거부 +}); +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>onFulfilled</code></dt> + <dd><code>Promise</code>가 수행될 때 호출되는 {{jsxref("Function")}}으로, <strong>이행 값(fulfillment value)</strong> 하나를 인수로 받습니다.</dd> + <dt><code>onRejected</code></dt> + <dd><code>Promise</code>가 거부될 때 호출되는 {{jsxref("Function")}}으로, <strong>거부 이유(rejection reason)</strong> 하나를 인수로 받습니다.</dd> +</dl> + +<h3 id="반환값">반환값</h3> + +<p>{{jsxref("Promise")}}가 이행하거나 거부했을 때, 각각에 해당하는 핸들러 함수(<code style="font-style: normal; font-weight: normal;">onFulfilled</code>나 <code style="font-style: normal; font-weight: normal;">onRejected</code>)가 <strong>비동기적으로</strong> 실행됩니다. 핸들러 함수는 다음 규칙을 따라 실행됩니다.</p> + +<ul> + <li>함수가 값을 반환할 경우, <code>then</code>에서 반환한 프로미스는 그 반환값을 자신의 결과값으로 하여 이행합니다.</li> + <li>값을 반환하지 않을 경우, <code>then</code>에서 반환한 프로미스는 <code>undefined</code>를 결과값으로 하여 이행합니다.</li> + <li>오류가 발생할 경우, <code>then</code>에서 반환한 프로미스는 그 오류를 자신의 결과값으로 하여 거부합니다.</li> + <li>이미 이행한 프로미스를 반환할 경우, <code>then</code>에서 반환한 프로미스는 그 프로미스의 결과값을 자신의 결과값으로 하여 이행합니다.</li> + <li>이미 거부한 프로미스를 반환할 경우, <code>then</code>에서 반환한 프로미스는 그 프로미스의 결과값을 자신의 결과값으로 하여 거부합니다.</li> + <li><strong>대기 중</strong>인 프로미스를 반환할 경우, <code>then</code>에서 반환한 프로미스는 그 프로미스의 이행 여부와 결과값을 따릅니다.</li> +</ul> + +<p>다음 예제에서 <code>then</code> 메서드의 비동기성을 확인할 수 있습니다.</p> + +<pre class="brush: js">// 이행한 프로미스를 받으면 'then' 블록도 바로 실행되지만, +// 핸들러는 아래 console.log에서와 같이 비동기적으로 실행됨 +const resolvedProm = Promise.resolve(33); + +let thenProm = resolvedProm.then(value => { + console.log("이 부분은 호출 스택 이후에 실행됩니다. 전달받은 값이자 반환값은 " + value + "입니다."); + return value; +}); +// thenProm의 값을 즉시 기록 +console.log(thenProm); + +// setTimeout으로 함수 실행을 호출 스택이 빌 때까지 미룰 수 있음 +setTimeout(() => { + console.log(thenProm); +}); + + +// 로그 출력 결과 (순서대로): +// Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined} +// "이 부분은 호출 스택 이후에 실행됩니다. 전달받은 값이자 반환값은 33입니다." +// Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 33}</pre> + +<h2 id="설명">설명</h2> + +<p><code>then</code>과 {{jsxref("Promise.prototype.catch()")}} 메서드는 프로미스를 반환하기 때문에, 체이닝이 가능합니다. 이를 <em>합성</em>이라고도 합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="then_메서드_사용"><code>then</code> 메서드 사용</h3> + +<pre class="brush: js">var p1 = new Promise(function(resolve, reject) { + resolve("성공!"); + // 또는 + // reject("오류!"); +}); + +p1.then(function(value) { + console.log(value); // 성공! +}, function(reason) { + console.log(reason); // 오류! +}); +</pre> + +<h3 id="체이닝">체이닝</h3> + +<p><code>then</code> 메서드는 <code>Promise</code>를 리턴하기 때문에, 이어지는 <code>then</code> 호출들을 손쉽게 연결할 수 있습니다.</p> + +<p><code>then</code>에 핸들러로 전달된 함수가 프로미스를 반환할 경우, 이와 동등한 프로미스가 메서드 체인의 그다음 <code>then</code>에 노출됩니다. 아래 예제에서는 <code>setTimeout</code> 함수로 비동기 코드를 흉내냅니다.</p> + +<pre class="brush: js">Promise.resolve('foo') + // 1. "foo"를 받고 "bar"를 추가한 다음 그 값으로 이행하여 다음 then에 넘겨줌 + .then(function(string) { + return new Promise(function(resolve, reject) { + setTimeout(function() { + string += 'bar'; + resolve(string); + }, 1); + }); + }) + // 2. "foobar"를 받고 그대로 다음 then에 넘겨준 뒤, + // 나중에 콜백 함수에서 가공하고 콘솔에 출력 + .then(function(string) { + setTimeout(function() { + string += 'baz'; + console.log(string); + }, 1) + return string; + }) + // 3. 이 부분의 코드는 이전의 then 블록 안의 (가짜) 비동기 코드에서 + // 실제로 문자열을 가공하기 전에 실행됨 + .then(function(string) { + console.log("마지막 Then: 앗... 방금 then에서 프로미스 만들고 반환하는 걸 까먹어서 " + + "출력 순서가 좀 이상할지도 몰라요"); + + // 'baz' 부분은 setTimeout 함수로 비동기적으로 실행되기 때문에 + // 이곳의 string에는 아직 'baz' 부분이 없음 + console.log(string); + }); + +// 로그 출력 결과 (순서대로): +// 마지막 Then: 앗... 방금 then에서 프로미스 만들고 반환하는 걸 까먹어서 출력 순서가 좀 이상할지도 몰라요 +// foobar +// foobarbaz</pre> + +<p><code>then</code> 핸들러에서 값을 그대로 반환한 경우에는 <code>Promise.resolve(<핸들러에서 반환한 값>)</code>을 반환하는 것과 같습니다.</p> + +<pre class="brush: js">var p2 = new Promise(function(resolve, reject) { + resolve(1); +}); + +p2.then(function(value) { + console.log(value); // 1 + return value + 1; +}).then(function(value) { + console.log(value + ' - 동기적으로 짜도 돌아감'); +}); + +p2.then(function(value) { + console.log(value); // 1 +}); +</pre> + +<p>함수에서 오류가 발생하거나 거부한 프로미스를 반환한 경우 <code>then</code>에서는 거부한 프로미스를 반환합니다.</p> + +<pre class="brush: js">Promise.resolve() + .then(() => { + // .then()에서 거부한 프로미스를 반환함 + throw new Error('으악!'); + }) + .then(() => { + console.log('실행되지 않는 코드'); + }, error => { + console.error('onRejected 함수가 실행됨: ' + error.message); + });</pre> + +<p>이외의 모든 경우에는 곧 이행할(비동기적으로 실행되는) 프로미스를 반환합니다. 다음 예제에서는 바로 이전의 프로미스가 거부했음에도 첫 번째 <code>then</code>에서는 <code>42</code>의 값을 갖는 곧 이행할 프로미스를 반환합니다.</p> + +<pre class="brush: js">Promise.reject() + .then(() => 99, () => 42) // onRejected에서는 42를 곧 이행할 프로미스로 감싸서 반환함 + .then(solution => console.log(solution + '로 이행함')); // 42로 이행함</pre> + +<p>실제 개발 시에는 아래와 같이 거부한 프로미스를 <code>then</code>의 2단 핸들러보다는 <code>catch</code>를 사용해 처리하는 경우가 많습니다.</p> + +<pre class="brush: js">Promise.resolve() + .then(() => { + // .then()에서 거부한 프로미스를 반환함 + throw new Error('으악!'); + }) + .catch(error => { + console.error('onRejected 함수가 실행됨: ' + error.message); + }) + .then(() => { + console.log("처음 then의 프로미스가 거부했지만 그래도 이 코드는 실행됨"); + });</pre> + +<p><br> + 체이닝을 이용해 프로미스 기반 함수 위에 다른 프로미스 기반 함수를 구현할 수도 있습니다.</p> + +<pre class="brush: js">function fetch_current_data() { + // fetch() API는 프로미스를 반환합니다. 이 함수도 + // API가 비슷하지만, 이 함수의 프로미스는 + // 추가 작업을 거친 이후에 이행값을 반환합니다. + return fetch('current-data.json').then(response => { + if (response.headers.get('content-type') != 'application/json') { + throw new TypeError(); + } + var j = response.json(); + // j 가공하기 + return j; // fetch_current_data().then()을 통해 + // 이행값을 사용할 수 있음 + }); +} +</pre> + +<p><code>onFulfilled</code>가 프로미스를 반환할 경우, <code>then</code>의 반환값 역시 그 프로미스에 의해 이행/거부합니다.</p> + +<pre class="brush: js">function resolveLater(resolve, reject) { + setTimeout(function() { + resolve(10); + }, 1000); +} +function rejectLater(resolve, reject) { + setTimeout(function() { + reject(new Error('오류')); + }, 1000); +} + +var p1 = Promise.resolve('foo'); +var p2 = p1.then(function() { + // 1초 뒤에 10으로 이행할 프로미스 반환 + return new Promise(resolveLater); +}); +p2.then(function(v) { + console.log('이행', v); // "이행", 10 +}, function(e) { + // 실행되지 않음 + console.log('거부', e); +}); + +var p3 = p1.then(function() { + // 1초 뒤에 '오류'로 거부할 프로미스 반환 + return new Promise(rejectLater); +}); +p3.then(function(v) { + // 실행되지 않음 + console.log('이행', v); +}, function(e) { + console.log('거부', e); // "거부", '오류' +}); +</pre> + +<h3 id="domxref(window.setImmediate)의_프로미스_기반_폴리필">{{domxref("window.setImmediate")}}의 프로미스 기반 폴리필</h3> + +<p>{{jsxref("Function.prototype.bind()")}} <code>Reflect.apply</code> ({{jsxref("Reflect.apply()")}}) 메서드를 사용하여 (취소할 수 없는) setImmedate와 비슷한 함수를 생성합니다.</p> + +<pre class="brush: js">const nextTick = (() => { + const noop = () => {}; // literally + const nextTickPromise = () => Promise.resolve().then(noop); + + const rfab = Reflect.apply.bind; // (thisArg, fn, thisArg, [...args]) + const nextTick = (fn, ...args) => ( + fn !== undefined + ? Promise.resolve(args).then(rfab(null, fn, null)) + : nextTickPromise(), + undefined + ); + nextTick.ntp = nextTickPromise; + + return nextTick; +})(); +</pre> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.prototype.then', 'Promise.prototype.then')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>ECMA 표준에서 초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.prototype.then', 'Promise.prototype.then')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Promise.then")}}</p> + + + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.prototype.catch()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/proxy/handler/apply/index.html b/files/ko/web/javascript/reference/global_objects/proxy/handler/apply/index.html new file mode 100644 index 0000000000..b4928da1d8 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/proxy/handler/apply/index.html @@ -0,0 +1,154 @@ +--- +title: handler.apply() +slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply +tags: + - apply트랩 + - 트랩 + - 프록시 +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply +--- +<div>{{JSRef}}</div> + +<p><strong><code>handler.apply()</code></strong> 메소드는 함수호출 시를 위한 트랩(trap)이다.</p> + +<h2 id="문법">문법</h2> + +<pre class="brush: js">var p = new Proxy(target, { + apply: function(target, thisArg, argumentsList) { + } +}); +</pre> + +<h3 id="인자">인자</h3> + +<p>apply 메소드에는 다음과 같은 인자가 들어온다.. <code>this는 </code>handler를 가리킨다.</p> + +<dl> + <dt><code>target</code></dt> + <dd>대상이 되는 객체(함수)</dd> + <dt><code>thisArg</code></dt> + <dd>호출 시 바인딩 된 this</dd> + <dt><code>argumentsList</code></dt> + <dd>호출 시 전달된 인자목록.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p><code>apply</code> 메소드는 어떤 값이든 반환할 수 있다.</p> + +<h2 id="설명">설명</h2> + +<p><code><strong>handler.apply</strong></code> 메소드는 함수호출 시를 위한 트랩이다.</p> + +<h3 id="가로채기">가로채기</h3> + +<p>이 트랩은 다음과 같은 것들을 가로챌 수 있다:</p> + +<ul> + <li><code>proxy(...args)</code></li> + <li>{{jsxref("Function.prototype.apply()")}} 와 {{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Reflect.apply()")}}</li> +</ul> + +<h3 id="기본(불변)조건">기본(불변)조건</h3> + +<p><code>handler.apply</code> 메소드에 대한 특별히 지켜야 할 기본조건은 없다.</p> + +<h2 id="예제">예제</h2> + +<p>다음의 코드는 함수 호출 시에 트랩을 건다.</p> + +<pre class="brush: js">var p = new Proxy(function() {}, { + apply: function(target, thisArg, argumentsList) { + console.log('호출됨: ' + argumentsList.join(', ')); + return argumentsList[0] + argumentsList[1] + argumentsList[2]; + } +}); + +console.log(p(1, 2, 3)); // "호출됨: 1, 2, 3" + // 6 +</pre> + +<h2 id="관련_명세">관련 명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저별_호환성">브라우저별 호환성</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("18")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("18")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="관련_내용">관련 내용</h2> + +<ul> + <li>{{jsxref("Proxy")}}</li> + <li>{{jsxref("Proxy.handler", "handler")}}</li> + <li>{{jsxref("Function.prototype.apply")}}</li> + <li>{{jsxref("Function.prototype.call")}}</li> + <li>{{jsxref("Reflect.apply()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/proxy/handler/index.html b/files/ko/web/javascript/reference/global_objects/proxy/handler/index.html new file mode 100644 index 0000000000..9eebe33b2f --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/proxy/handler/index.html @@ -0,0 +1,81 @@ +--- +title: Proxy handler +slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler +tags: + - ECMAScript 2015 + - JavaScript + - Proxy +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy +--- +<div>{{JSRef}}</div> + +<p>The proxy's handler object is a placeholder object which contains traps for {{jsxref("Proxy", "proxies", "", 1)}}.</p> + +<h2 id="Methods">Methods</h2> + +<p>All traps are optional. If a trap has not been defined, the default behavior is to forward the operation to the target.</p> + +<dl> + <dt>{{jsxref("Global_Objects/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}</dt> + <dd>A trap for {{jsxref("Object.getPrototypeOf")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}</dt> + <dd>A trap for {{jsxref("Object.setPrototypeOf")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/isExtensible", "handler.isExtensible()")}}</dt> + <dd>A trap for {{jsxref("Object.isExtensible")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}</dt> + <dd>A trap for {{jsxref("Object.preventExtensions")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}</dt> + <dd>A trap for {{jsxref("Object.getOwnPropertyDescriptor")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty()")}}</dt> + <dd>A trap for {{jsxref("Object.defineProperty")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/has", "handler.has()")}}</dt> + <dd>A trap for the {{jsxref("Operators/in", "in")}} operator.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/get", "handler.get()")}}</dt> + <dd>A trap for getting property values.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/set", "handler.set()")}}</dt> + <dd>A trap for setting property values.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}</dt> + <dd>A trap for the {{jsxref("Operators/delete", "delete")}} operator.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/ownKeys", "handler.ownKeys()")}}</dt> + <dd>A trap for {{jsxref("Object.getOwnPropertyNames")}} and {{jsxref("Object.getOwnPropertySymbols")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/apply", "handler.apply()")}}</dt> + <dd>A trap for a function call.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/construct", "handler.construct()")}}</dt> + <dd>A trap for the {{jsxref("Operators/new", "new")}} operator.</dd> +</dl> + +<p>Some non-standard traps are <a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#Proxy">obsolete and have been removed</a>.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>The <code>enumerate</code> handler has been removed.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Proxy.handler")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Proxy")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/proxy/index.html b/files/ko/web/javascript/reference/global_objects/proxy/index.html new file mode 100644 index 0000000000..777b4648d0 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/proxy/index.html @@ -0,0 +1,394 @@ +--- +title: Proxy +slug: Web/JavaScript/Reference/Global_Objects/Proxy +tags: + - ECMAScript 2015 + - JavaScript + - Proxy + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy +--- +<div>{{JSRef}}</div> + +<p><code><strong>Proxy</strong></code> 객체는 기본적인 동작(속성 접근, 할당, 순회, 열거, 함수 호출 등)의 새로운 행동을 정의할 때 사용합니다.</p> + +<h2 id="용어">용어</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">handler</a></dt> + <dd>trap들을 가지고 있는 Placeholder 객체.</dd> + <dt>traps</dt> + <dd>프로퍼티에 접근할 수 있는 메소드. 운영체제에서 trap 이라는 컨셉과 유사하다.</dd> + <dt>target</dt> + <dd>proxy가 가상화하는 실제 객체. 이것은 proxy를 위한 backend 저장소로 사용된다. Invariants (semantics that remain unchanged) regarding object non-extensibility or non-configurable properties are verified against the target.</dd> +</dl> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">new Proxy(target, handler); +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>target</code></dt> + <dd>proxy와 함께 감싸진 target 객체 (native array, function, 다른 proxy을 포함한 객체)</dd> + <dt><code>handler</code></dt> + <dd>프로퍼티들이 function 인 객체이다. 동작이 수행될 때, handler는 proxy의 행동을 정의한다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("Proxy.revocable()")}}</dt> + <dd>폐기할 수 있는(revocable) Proxy 객체를 생성.</dd> +</dl> + +<h2 id="Methods_of_the_handler_object">Methods of the handler object</h2> + +<p>handler객체는 <code>Proxy를 위한 trap들을 포함하고 있는 </code>placeholder 객체이다.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler', 'Methods') }}</div> + +<h2 id="예제">예제</h2> + +<h3 id="Basic_example">Basic example</h3> + +<p>프로퍼티 이름이 객체에 없을때, 기본값을 숫자 37로 리턴받는 간단한 예제이다. 이것은 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/get"><code>get</code></a> handler 를 사용하였다. </p> + +<pre class="brush: js">var handler = { + get: function(target, name){ + return name in target? + target[name] : + 37; + } +}; + +var p = new Proxy({}, handler); +p.a = 1; +p.b = undefined; + +console.log(p.a, p.b); // 1, undefined +console.log('c' in p, p.c); // false, 37 +</pre> + +<h3 id="No-op_forwarding_proxy">No-op forwarding proxy</h3> + +<p>이 예제에서는, native JavaScript를 사용하겠다. proxy는 적용된 모든 동작으로 보낼 것이다.</p> + +<pre class="brush: js">var target = {}; +var p = new Proxy(target, {}); + +p.a = 37; // target으로 동작이 전달 + +console.log(target.a); // 37. 동작이 제대로 전달됨 +</pre> + +<h3 id="Validation_(검증)">Validation (검증)</h3> + +<p>Proxy에서, 객체에 전달된 값을 쉽게 검증할 수 있다. 이 예제는 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/set"><code>set</code></a> handler 를 사용하였다.</p> + +<pre class="brush: js">let validator = { + set: function(obj, prop, value) { + if (prop === 'age') { + if (!Number.isInteger(value)) { + throw new TypeError('The age is not an integer'); + } + if (value > 200) { + throw new RangeError('The age seems invalid'); + } + } + + // The default behavior to store the value + obj[prop] = value; + } +}; + +let person = new Proxy({}, validator); + +person.age = 100; +console.log(person.age); // 100 +person.age = 'young'; // Throws an exception +person.age = 300; // Throws an exception +</pre> + +<h3 id="Extending_constructor_(생성자_확장)">Extending constructor (생성자 확장)</h3> + +<p>function proxy는 쉽게 새로운 생성자와 함께 생성자를 확장할 수 있다. 이 예제에서는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/construct">construct</a> 와</code> <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply"><code>apply</code></a> handlers 를 사용하였다.</p> + +<pre class="brush: js">function extend(sup,base) { + var descriptor = Object.getOwnPropertyDescriptor( + base.prototype,"constructor" + ); + base.prototype = Object.create(sup.prototype); + var handler = { + construct: function(target, args) { + var obj = Object.create(base.prototype); + this.apply(target,obj,args); + return obj; + }, + apply: function(target, that, args) { + sup.apply(that,args); + base.apply(that,args); + } + }; + var proxy = new Proxy(base,handler); + descriptor.value = proxy; + Object.defineProperty(base.prototype, "constructor", descriptor); + return proxy; +} + +var Person = function(name){ + this.name = name; +}; + +var Boy = extend(Person, function(name, age) { + this.age = age; +}); + +Boy.prototype.sex = "M"; + +var Peter = new Boy("Peter", 13); +console.log(Peter.sex); // "M" +console.log(Peter.name); // "Peter" +console.log(Peter.age); // 13</pre> + +<h3 id="Manipulating_DOM_nodes_(DOM_nodes_조작)">Manipulating DOM nodes (DOM nodes 조작)</h3> + +<p>가끔씩, 두 개의 다른 element의 속성이나 클래스 이름을 바꾸고 싶을 것이다. 아래는 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/set"><code>set</code></a> handler 를 사용하였다.</p> + +<pre class="brush: js">let view = new Proxy({ + selected: null +}, +{ + set: function(obj, prop, newval) { + let oldval = obj[prop]; + + if (prop === 'selected') { + if (oldval) { + oldval.setAttribute('aria-selected', 'false'); + } + if (newval) { + newval.setAttribute('aria-selected', 'true'); + } + } + + // The default behavior to store the value + obj[prop] = newval; + } +}); + +let i1 = view.selected = document.getElementById('item-1'); +console.log(i1.getAttribute('aria-selected')); // 'true' + +let i2 = view.selected = document.getElementById('item-2'); +console.log(i1.getAttribute('aria-selected')); // 'false' +console.log(i2.getAttribute('aria-selected')); // 'true' +</pre> + +<h3 id="Value_correction_and_an_extra_property_(값_정정과_추가적인_property)">Value correction and an extra property (값 정정과 추가적인 property)</h3> + +<p><code>products</code> 라는 proxy 객체는 전달된 값을 평가하고, 필요할 때 배열로 변환한다. 이 객체는 <code>latestBrowser</code> 라는 추가적인 property를 지원하는데, getter와 setter 모두 지원한다. </p> + +<pre class="brush: js">let products = new Proxy({ + browsers: ['Internet Explorer', 'Netscape'] +}, +{ + get: function(obj, prop) { + // An extra property + if (prop === 'latestBrowser') { + return obj.browsers[obj.browsers.length - 1]; + } + + // The default behavior to return the value + return obj[prop]; + }, + set: function(obj, prop, value) { + // An extra property + if (prop === 'latestBrowser') { + obj.browsers.push(value); + return; + } + + // Convert the value if it is not an array + if (typeof value === 'string') { + value = [value]; + } + + // The default behavior to store the value + obj[prop] = value; + } +}); + +console.log(products.browsers); // ['Internet Explorer', 'Netscape'] +products.browsers = 'Firefox'; // pass a string (by mistake) +console.log(products.browsers); // ['Firefox'] <- no problem, the value is an array + +products.latestBrowser = 'Chrome'; +console.log(products.browsers); // ['Firefox', 'Chrome'] +console.log(products.latestBrowser); // 'Chrome' +</pre> + +<h3 id="Finding_an_array_item_object_by_its_property_(property로_배열의_객체를_찾기)">Finding an array item object by its property (property로 배열의 객체를 찾기)</h3> + +<p>proxy 는 유용한 특성을 가진 배열로 확장할 것이다. <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties">Object.defineProperties</a>를 사용하지 않고, </code>유연하게 property들을 유연하게 "정의"할 수 있다. 이 예제는 테이블의 cell을 이용해서 row(열)을 찾는데 적용할 수 있다. 이 경우, target은 <code><a href="/en-US/docs/DOM/table.rows">table.rows</a>가 될 것이다.</code></p> + +<pre class="brush: js">let products = new Proxy([ + { name: 'Firefox', type: 'browser' }, + { name: 'SeaMonkey', type: 'browser' }, + { name: 'Thunderbird', type: 'mailer' } +], +{ + get: function(obj, prop) { + // The default behavior to return the value; prop is usually an integer + if (prop in obj) { + return obj[prop]; + } + + // Get the number of products; an alias of products.length + if (prop === 'number') { + return obj.length; + } + + let result, types = {}; + + for (let product of obj) { + if (product.name === prop) { + result = product; + } + if (types[product.type]) { + types[product.type].push(product); + } else { + types[product.type] = [product]; + } + } + + // Get a product by name + if (result) { + return result; + } + + // Get products by type + if (prop in types) { + return types[prop]; + } + + // Get product types + if (prop === 'types') { + return Object.keys(types); + } + + return undefined; + } +}); + +console.log(products[0]); // { name: 'Firefox', type: 'browser' } +console.log(products['Firefox']); // { name: 'Firefox', type: 'browser' } +console.log(products['Chrome']); // undefined +console.log(products.browser); // [{ name: 'Firefox', type: 'browser' }, { name: 'SeaMonkey', type: 'browser' }] +console.log(products.types); // ['browser', 'mailer'] +console.log(products.number); // 3 +</pre> + +<h3 id="A_complete_traps_list_example_(완벽한_traps_리스트_예제)">A complete <code>traps</code> list example (완벽한 <code>traps</code> 리스트 예제)</h3> + +<p>이제 완벽한 traps 리스트를 생성하기 위해서, <em>non native</em> 객체를 프록시화 할 것이다. 이것은 특히, 다음과 같은 동작에 적합하다 : <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie/Simple_document.cookie_framework" title="https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support">the "little framework" published on the <code>document.cookie</code> page</a> 에 의해 생성된 <code>docCookies</code> 는 글로벌 객체</p> + +<pre class="brush: js">/* + var docCookies = ... get the "docCookies" object here: + https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support +*/ + +var docCookies = new Proxy(docCookies, { + get: function (oTarget, sKey) { + return oTarget[sKey] || oTarget.getItem(sKey) || undefined; + }, + set: function (oTarget, sKey, vValue) { + if (sKey in oTarget) { return false; } + return oTarget.setItem(sKey, vValue); + }, + deleteProperty: function (oTarget, sKey) { + if (sKey in oTarget) { return false; } + return oTarget.removeItem(sKey); + }, + enumerate: function (oTarget, sKey) { + return oTarget.keys(); + }, + ownKeys: function (oTarget, sKey) { + return oTarget.keys(); + }, + has: function (oTarget, sKey) { + return sKey in oTarget || oTarget.hasItem(sKey); + }, + defineProperty: function (oTarget, sKey, oDesc) { + if (oDesc && "value" in oDesc) { oTarget.setItem(sKey, oDesc.value); } + return oTarget; + }, + getOwnPropertyDescriptor: function (oTarget, sKey) { + var vValue = oTarget.getItem(sKey); + return vValue ? { + value: vValue, + writable: true, + enumerable: true, + configurable: false + } : undefined; + }, +}); + +/* Cookies test */ + +console.log(docCookies.my_cookie1 = "First value"); +console.log(docCookies.getItem("my_cookie1")); + +docCookies.setItem("my_cookie1", "Changed value"); +console.log(docCookies.my_cookie1);</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-proxy-objects', 'Proxy')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-proxy-objects', 'Proxy')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES2017', '#sec-proxy-objects', 'Proxy')}}</td> + <td>{{Spec2('ES2017')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-objects', 'Proxy')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.Proxy", 2)}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a class="external" href="https://www.youtube.com/watch?v=sClk6aB_CPk">"Proxies are awesome" Brendan Eich presentation at JSConf</a> (<a class="external" href="http://www.slideshare.net/BrendanEich/metaprog-5303821">slides</a>)</li> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proxies">ECMAScript Harmony Proxy proposal page</a> and <a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proxies_semantics">ECMAScript Harmony proxy semantics page</a></li> + <li><a class="external" href="http://soft.vub.ac.be/~tvcutsem/proxies/">Tutorial on proxies</a></li> + <li><a href="/en-US/docs/JavaScript/Old_Proxy_API" title="/en-US/docs/JavaScript/Old_Proxy_API">SpiderMonkey specific Old Proxy API</a></li> + <li>{{jsxref("Object.watch()")}} is a non-standard feature but has been supported in Gecko for a long time.</li> +</ul> + +<h2 id="라이센스_참고사항">라이센스 참고사항</h2> + +<p>Some content (text, examples) in this page has been copied or adapted from the <a class="external" href="http://wiki.ecmascript.org/doku.php">ECMAScript wiki</a> which content is licensed <a class="external" href="http://creativecommons.org/licenses/by-nc-sa/2.0/">CC 2.0 BY-NC-SA</a>.</p> diff --git a/files/ko/web/javascript/reference/global_objects/rangeerror/index.html b/files/ko/web/javascript/reference/global_objects/rangeerror/index.html new file mode 100644 index 0000000000..7413433c34 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/rangeerror/index.html @@ -0,0 +1,163 @@ +--- +title: RangeError +slug: Web/JavaScript/Reference/Global_Objects/RangeError +translation_of: Web/JavaScript/Reference/Global_Objects/RangeError +--- +<div>{{JSRef}}</div> + +<p><code><strong>RangeError</strong></code> 객체는 값이 집합에 없거나 허용되지 않은 값의 범위일 때 에러를 나타냅니다.</p> + +<h2 id="구문">구문 </h2> + +<pre class="syntaxbox"><code>new RangeError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre> + +<h3 id="파라메터">파라메터</h3> + +<dl> + <dt><code>message</code></dt> + <dd>선택적 파라메터. 에러에 대한 설명.</dd> + <dt><code>fileName</code> {{non-standard_inline}}</dt> + <dd>선택적 파라메터. 예외(exception)가 발생한 코드를 포함하고 있는 파일의 이름.</dd> + <dt><code>lineNumber</code> {{non-standard_inline}}</dt> + <dd>선택적 파라메터. 예외(exception)가 발생한 코드의 라인 넘버.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p><code>RangeError</code> 는 허용되지 않은 범위의 수를 포함한 아규먼트를 함수에 넘기려고 할 때 던져집니다. {{jsxref("Array")}} 생성자로 허용범위를 초과한 길이의 배열 생성을 시도하려 하거나, 적절하지 않은 값을 numeric method({{jsxref("Number.toExponential()")}}, {{jsxref("Number.toFixed()")}} 또는 {{jsxref("Number.toPrecision()")}})에 넘기려 할 때, 이 에러를 만날 수 있을 것입니다. </p> + +<h2 id="속성">속성</h2> + +<dl> + <dt>{{jsxref("RangeError.prototype")}}</dt> + <dd><code>RangeError</code> 객체에 속성을 추가하도록 해준다. </dd> +</dl> + +<h2 id="메소드">메소드</h2> + +<p>전역(global)의 <code>RangeError</code>는 자신의 메소드를 가지고 있지 않습니다. 하지만, 몇 가지의 메소드를 프로토타입 체인을 통해 상속받습니다.</p> + +<h2 id="RangeError_인스턴스"><code>RangeError</code> 인스턴스</h2> + +<h3 id="속성_2">속성</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype', 'Properties')}}</div> + +<h3 id="메소드_2">메소드</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype', 'Methods')}}</div> + +<h2 id="예">예</h2> + +<h3 id="RangeError_사용하기"><code>RangeError </code>사용하기</h3> + +<pre class="brush: js">var check = function(num) { + if (num < MIN || num > MAX) { + throw new RangeError('Parameter must be between ' + MIN + ' and ' + MAX); + } +}; + +try { + check(500); +} +catch (e) { + if (e instanceof RangeError) { + // Handle range error + } +} +</pre> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.6.2', 'RangeError')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("RangeError.prototype")}}</li> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Number.toExponential()")}}</li> + <li>{{jsxref("Number.toFixed()")}}</li> + <li>{{jsxref("Number.toPrecision()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/referenceerror/index.html b/files/ko/web/javascript/reference/global_objects/referenceerror/index.html new file mode 100644 index 0000000000..ed5fee8c48 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/referenceerror/index.html @@ -0,0 +1,129 @@ +--- +title: ReferenceError +slug: Web/JavaScript/Reference/Global_Objects/ReferenceError +translation_of: Web/JavaScript/Reference/Global_Objects/ReferenceError +--- +<div>{{JSRef}}</div> + +<div> +<p><code><strong>ReferenceError</strong></code> 객체는 존재하지 않는 변수를 참조했을 때 발생하는 에러를 나타냅니다.</p> +</div> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><code>new ReferenceError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre> + +<h3 id="파라미터">파라미터</h3> + +<dl> + <dt><code>message</code></dt> + <dd>선택사항. 에러에 대한 설명문</dd> + <dt><code>fileName</code> {{non-standard_inline}}</dt> + <dd>선택사항. 예외가 발생한 코드를 포함하는 파일의 이름</dd> + <dt><code>lineNumber</code> {{non-standard_inline}}</dt> + <dd>선택사항. 예외가 발생한 코드의 줄 번호</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p><strong><code>ReferenceError</code></strong>는 선언된 적이 없는 변수를 참조하려고 할 때 발생합니다.</p> + +<h2 id="프로퍼티">프로퍼티</h2> + +<dl> + <dt>{{jsxref("ReferenceError.prototype")}}</dt> + <dd>ReferenceError 객체에 프로퍼티를 추가할 수 있습니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<p>전역 ReferenceError는 메서드를 가지고 있지 않습니다. 그러나 상속 관계에서 프로토타입 체인을 통해 일부 메서드를 가질 수 있습니다.</p> + +<h2 id="ReferenceError_인스턴스"><code>ReferenceError</code> 인스턴스</h2> + +<h3 id="프로퍼티_2">프로퍼티</h3> + +<div>{{page('/ko-KR/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype', 'Properties')}}</div> + +<h3 id="메서드_2">메서드</h3> + +<div>{{page('/ko-KR/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype', 'Methods')}}</div> + +<h2 id="예제">예제</h2> + +<h3 id="ReferenceError_처리하기"><code>ReferenceError</code> 처리하기</h3> + +<pre class="brush: js">try { + var a = undefinedVariable; +} catch (e) { + console.log(e instanceof ReferenceError); // true + console.log(e.message); // "undefinedVariable is not defined" + console.log(e.name); // "ReferenceError" + console.log(e.fileName); // "Scratchpad/1" + console.log(e.lineNumber); // 2 + console.log(e.columnNumber); // 6 + console.log(e.stack); // "@Scratchpad/2:2:7\n" +} +</pre> + +<h3 id="ReferenceError_생성하기"><code>ReferenceError</code> 생성하기</h3> + +<pre class="brush: js">try { + throw new ReferenceError('Hello', 'someFile.js', 10); +} catch (e) { + console.log(e instanceof ReferenceError); // true + console.log(e.message); // "Hello" + console.log(e.name); // "ReferenceError" + console.log(e.fileName); // "someFile.js" + console.log(e.lineNumber); // 10 + console.log(e.columnNumber); // 0 + console.log(e.stack); // "@Scratchpad/2:2:9\n" +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.6.3', 'ReferenceError')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> +<div class="hidden">이 페이지의 호환성 테이블은 구조화된 데이터로부터 생성됩니다. 해당 데이터를 개선하고 싶다면 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>을 체크아웃하고 저희에게 풀 리퀘스트를 보내주십시오.</div> + +<p>{{Compat("javascript.builtins.ReferenceError")}}</p> +</div> + +<h2 id="참고">참고</h2> + +<ul> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("ReferenceError.prototype")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/reflect/apply/index.html b/files/ko/web/javascript/reference/global_objects/reflect/apply/index.html new file mode 100644 index 0000000000..a9146a0952 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/reflect/apply/index.html @@ -0,0 +1,93 @@ +--- +title: Reflect.apply() +slug: Web/JavaScript/Reference/Global_Objects/Reflect/apply +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Reference + - Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/apply +--- +<div>{{JSRef}}</div> + +<p><code><strong>Reflect</strong></code><strong><code>.apply()</code></strong> 정적 메서드는 대상 함수를 주어진 매개변수로 호출합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/reflect-apply.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Reflect.apply(<em>target</em>, <em>thisArgument</em>, <em>argumentsList</em>) +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>target</code></dt> + <dd>호출할 대상 함수.</dd> + <dt><code>thisArgument</code></dt> + <dd>호출에서 <code>target</code>의 <code>this</code>로 사용할 값.</dd> + <dt><code>argumentsList</code></dt> + <dd><code>target</code>을 호출할 때 매개변수로 전달할 배열형 객체.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 <code>this</code> 값과 매개변수로 대상 함수를 호출한 결과.</p> + +<h3 id="예외">예외</h3> + +<p><code>target</code>이 호출 가능한 객체가 아니면 {{jsxref("TypeError")}}.</p> + +<h2 id="설명">설명</h2> + +<p>ES5에서는 {{jsxref("Function.prototype.apply()")}} 메서드를 사용해, 함수를 호출할 때 <code>this</code> 값을 지정하거나 매개변수를 배열(또는 배열형 객체)에서 넘겨줄 수 있었습니다.</p> + +<pre class="brush: js">Function.prototype.apply.call(Math.floor, undefined, [1.75]);</pre> + +<p><code>Reflect.apply()</code> 메서드를 사용해 같은 작업을 더 쉽고 유려하게 수행할 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Reflect.apply_사용하기"><code>Reflect.apply()</code> 사용하기</h3> + +<pre class="brush: js">Reflect.apply(Math.floor, undefined, [1.75]); +// 1; + +Reflect.apply(String.fromCharCode, undefined, [104, 101, 108, 108, 111]); +// "hello" + +Reflect.apply(RegExp.prototype.exec, /ab/, ['confabulation']).index; +// 4 + +Reflect.apply(''.charAt, 'ponies', [3]); +// "i" +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-reflect.apply', 'Reflect.apply')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Reflect.apply")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Reflect")}}</li> + <li>{{jsxref("Function.prototype.apply()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/reflect/construct/index.html b/files/ko/web/javascript/reference/global_objects/reflect/construct/index.html new file mode 100644 index 0000000000..e98f3204de --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/reflect/construct/index.html @@ -0,0 +1,154 @@ +--- +title: Reflect.construct() +slug: Web/JavaScript/Reference/Global_Objects/Reflect/construct +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Reference + - Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/construct +--- +<div>{{JSRef}}</div> + +<p><code><strong>Reflect</strong></code><strong><code>.construct()</code></strong> 정적 메서드는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> 연산자</a>처럼 동작하는 함수입니다. <code>new target(...args)</code>를 호출하는 것과 같습니다. 추가 기능으로 다른 프로토타입을 지정할 수도 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/reflect-construct.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Reflect.construct(<em>target</em>, <em>argumentsList</em>[, <em>newTarget</em>]) +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>target</code></dt> + <dd>호출할 대상 함수.</dd> + <dt><code>argumentsList</code></dt> + <dd><code>target</code>의 매개변수로 전달할 배열형 객체.</dd> + <dt><code>newTarget</code> {{optional_inline}}</dt> + <dd>프로토타입으로 사용할 생성자. <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></code> 연산자도 확인하세요. <code>newTarget</code>이 주어지지 않았을 땐 <code>target</code>을 사용합니다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p><code>target</code>을 생성자로 하고 주어진 매개변수를 전달해 생성한 <code>target</code>(또는, 지정했다면 <code>newTarget</code>)의 새로운 인스턴스.</p> + +<h3 id="예외">예외</h3> + +<p><code>target</code> 또는 <code>newTarget</code>이 생성자가 아니면 {{jsxref("TypeError")}}.</p> + +<h2 id="설명">설명</h2> + +<p><code>Reflect.construct()</code>는 생성자를 가변 길이의 매개변수로 호출할 수 있습니다. (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> 연산자</a>와 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax">전개 구문</a>을 사용해도 가능합니다)</p> + +<pre class="brush: js">var obj = new Foo(...args); +var obj = Reflect.construct(Foo, args); +</pre> + +<h3 id="Reflect.construct()_vs_Object.create()"><code>Reflect.construct()</code> vs <code>Object.create()</code></h3> + +<p><code>Reflect</code>의 도입 이전에는 임의의 생성자와 프로토타입에 {{jsxref("Object.create()")}}를 사용해 객체를 생성할 수 있었습니다.</p> + +<pre class="brush: js">function OneClass() { + this.name = 'one'; +} + +function OtherClass() { + this.name = 'other'; +} + +// Calling this: +var obj1 = Reflect.construct(OneClass, args, OtherClass); + +// ...has the same result as this: +var obj2 = Object.create(OtherClass.prototype); +OneClass.apply(obj2, args); + +console.log(obj1.name); // 'one' +console.log(obj2.name); // 'one' + +console.log(obj1 instanceof OneClass); // false +console.log(obj2 instanceof OneClass); // false + +console.log(obj1 instanceof OtherClass); // true +console.log(obj2 instanceof OtherClass); // true +</pre> + +<p>그러나, 결과는 동일하더라도 과정에는 중요한 차이가 하나 존재합니다. <code>Object.create()</code>와 {{jsxref("Function.prototype.apply()")}}를 사용할 땐, 객체 생성에 <code>new</code> 키워드가 관여하지 않으므로 <code>new.target</code> 연산자가 <code>undefined</code>를 가리킵니다.</p> + +<p>반면 <code>Reflect.construct()</code>를 호출하면, <code>newTarget</code>이 존재하면 <code>new.target</code> 연산자가 <code>newTarget</code>을, 아니면 <code>target</code>을 가리킵니다.</p> + +<pre class="brush: js">function OneClass() { + console.log('OneClass'); + console.log(new.target); +} +function OtherClass() { + console.log('OtherClass'); + console.log(new.target); +} + +var obj1 = Reflect.construct(OneClass, args); +// Output: +// OneClass +// function OneClass { ... } + +var obj2 = Reflect.construct(OneClass, args, OtherClass); +// Output: +// OneClass +// function OtherClass { ... } + +var obj3 = Object.create(OtherClass.prototype); +OneClass.apply(obj3, args); +// Output: +// OneClass +// undefined +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="Reflect.construct()_사용하기"><code>Reflect.construct()</code> 사용하기</h3> + +<pre class="brush: js">var d = Reflect.construct(Date, [1776, 6, 4]); +d instanceof Date; // true +d.getFullYear(); // 1776 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-reflect.construct', 'Reflect.construct')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-reflect.construct', 'Reflect.construct')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Reflect.construct")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Reflect")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></code></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/reflect/defineproperty/index.html b/files/ko/web/javascript/reference/global_objects/reflect/defineproperty/index.html new file mode 100644 index 0000000000..a88d2bd722 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/reflect/defineproperty/index.html @@ -0,0 +1,100 @@ +--- +title: Reflect.defineProperty() +slug: Web/JavaScript/Reference/Global_Objects/Reflect/defineProperty +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Reference + - Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/defineProperty +--- +<div>{{JSRef}}</div> + +<p><code><strong>Reflect</strong></code><strong><code>.defineProperty()</code></strong> 정적 메서드는 {{jsxref("Object.defineProperty()")}}와 같은 동작을 하지만 {{jsxref("Boolean")}}을 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/reflect-defineproperty.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Reflect.defineProperty(<em>target</em>, <em>propertyKey</em>, <em>attributes</em>) +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>target</code></dt> + <dd>속성을 정의할 대상 객체.</dd> + <dt><code>propertyKey</code></dt> + <dd>정의하거나 수정할 속성의 이름.</dd> + <dt><code>attributes</code></dt> + <dd>정의하거나 수정하는 속성을 기술하는 객체.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>속성이 성공적으로 정의됐는지 나타내는 {{jsxref("Boolean")}}.</p> + +<h3 id="예외">예외</h3> + +<p><code>target</code>이 {{jsxref("Object")}}가 아니면 {{jsxref("TypeError")}}.</p> + +<h2 id="설명">설명</h2> + +<p><code>Reflect.defineProperty</code> 메서드는 객체에 속성을 정교하게 추가하거나 수정할 수 있습니다. 자세한 내용은 유사한 메서드인 {{jsxref("Object.defineProperty")}}를 참고하세요. <code>Object.defineProperty</code>는 성공 시 대상 객체를 반환하고 실패하면 {{jsxref("TypeError")}}를 던지지만, <code>Reflect.defineProperty</code>는 성공 여부를 나타내는 {{jsxref("Boolean")}}을 반환합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Reflect.defineProperty()_사용하기"><code>Reflect.defineProperty()</code> 사용하기</h3> + +<pre class="brush: js">var obj = {}; +Reflect.defineProperty(obj, 'x', {value: 7}); // true +obj.x; // 7 +</pre> + +<h3 id="속성_정의의_성공_여부_알아내기">속성 정의의 성공 여부 알아내기</h3> + +<p>{{jsxref("Object.defineProperty")}}는 성공 시 객체를 반환하고, 실패 시 {{jsxref("TypeError")}}를 던지므로 속성 정의 과정에 발생할 수 있는 오류를 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> 블록으로 잡아야 합니다. 반면 <code>Reflect.defineProperty</code>는 성공 여부를 나타내는 {{jsxref("Boolean")}}을 반환하므로, 간단하게 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/if...else">if...else</a></code> 블록만 사용하면 됩니다.</p> + +<pre class="brush: js">if (Reflect.defineProperty(target, property, attributes)) { + // 성공 +} else { + // 실패 +}</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-reflect.defineproperty', 'Reflect.defineProperty')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-reflect.defineproperty', 'Reflect.defineProperty')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Reflect.defineProperty")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Reflect")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/reflect/deleteproperty/index.html b/files/ko/web/javascript/reference/global_objects/reflect/deleteproperty/index.html new file mode 100644 index 0000000000..de3b8f8ed8 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/reflect/deleteproperty/index.html @@ -0,0 +1,98 @@ +--- +title: Reflect.deleteProperty() +slug: Web/JavaScript/Reference/Global_Objects/Reflect/deleteProperty +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Reference + - Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/deleteProperty +--- +<div>{{JSRef}}</div> + +<p><code><strong>Reflect</strong></code><strong><code>.deleteProperty()</code></strong> 정적 메서드는 속성을 제거할 수 있습니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/delete"><code>delete</code> 연산자</a>의 함수판이라고 할 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/reflect-deleteproperty.html", "taller")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Reflect.deleteProperty(<em>target</em>, <em>propertyKey</em>) +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>target</code></dt> + <dd>속성을 제거할 대상 객체.</dd> + <dt><code>propertyKey</code></dt> + <dd>제거할 속성의 이름.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>속성이 성공적으로 제거됐는지 나타내는 {{jsxref("Boolean")}}.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<p><code>target</code>이 {{jsxref("Object")}}가 아니면 {{jsxref("TypeError")}}.</p> + +<h2 id="설명">설명</h2> + +<p><code>Reflect.deleteProperty</code> 메서드는 객체의 속성을 제거할 수 있습니다. 반환값은 속성의 제거 성공 여부를 나타내는 {{jsxref("Boolean")}}입니다. 비엄격 모드의 <a href="/ko/docs/Web/JavaScript/Reference/Operators/delete"><code>delete</code> 연산자</a>와 거의 동일합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Reflect.deleteProperty()_사용하기"><code>Reflect.deleteProperty()</code> 사용하기</h3> + +<pre class="brush: js">var obj = { x: 1, y: 2 }; +Reflect.deleteProperty(obj, 'x'); // true +obj; // { y: 2 } + +var arr = [1, 2, 3, 4, 5]; +Reflect.deleteProperty(arr, '3'); // true +arr; // [1, 2, 3, , 5] + +// 주어진 속성이 존재하지 않으면 true 반환 +Reflect.deleteProperty({}, 'foo'); // true + +// 주어진 속성이 설정 불가능하면 false 반환 +Reflect.deleteProperty(Object.freeze({foo: 1}), 'foo'); // false +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-reflect.deleteproperty', 'Reflect.deleteProperty')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-reflect.deleteproperty', 'Reflect.deleteProperty')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Reflect.deleteProperty")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Reflect")}}</li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/delete"><code>delete</code> 연산자</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/reflect/get/index.html b/files/ko/web/javascript/reference/global_objects/reflect/get/index.html new file mode 100644 index 0000000000..2d5007b113 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/reflect/get/index.html @@ -0,0 +1,100 @@ +--- +title: Reflect.get() +slug: Web/JavaScript/Reference/Global_Objects/Reflect/get +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Reference + - Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/get +--- +<div>{{JSRef}}</div> + +<p><strong><code>Reflect.get()</code></strong> 정적 메서드는 객체의 속성을 가져오는 함수입니다. <code>target[propertyKey]</code>와 비슷합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/reflect-get.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Reflect.get(<em>target</em>, <em>propertyKey</em>[, <em>receiver</em>]) +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>target</code></dt> + <dd>속성을 가져올 대상 객체.</dd> + <dt><code>propertyKey</code></dt> + <dd>가져올 속성의 이름.</dd> + <dt><code>receiver</code> {{optional_inline}}</dt> + <dd>대상 속성이 접근자라면 <code>this</code>의 값으로 사용할 값. {{jsxref("Proxy")}}와 함께 사용하면, 대상을 상속하는 객체를 사용할 수 있습니다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>속성의 값.</p> + +<h3 id="예외">예외</h3> + +<p><code>target</code>이 {{jsxref("Object")}}가 아니면 {{jsxref("TypeError")}}.</p> + +<h2 id="설명">설명</h2> + +<p><code>Reflect.get</code> 메서드는 객체 속성의 값을 가져올 수 있습니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a>의 함수판이라고 할 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Reflect.get()_사용하기"><code>Reflect.get()</code> 사용하기</h3> + +<pre class="brush: js">// Object +var obj = { x: 1, y: 2 }; +Reflect.get(obj, 'x'); // 1 + +// Array +Reflect.get(['zero', 'one'], 1); // "one" + +// handler 매개변수와 Proxy +var x = {p: 1}; +var obj = new Proxy(x, { + get(t, k, r) { return k + 'bar'; } +}); +Reflect.get(obj, 'foo'); // "foobar" +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-reflect.get', 'Reflect.get')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-reflect.get', 'Reflect.get')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Reflect.get")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Reflect")}}</li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/reflect/getownpropertydescriptor/index.html b/files/ko/web/javascript/reference/global_objects/reflect/getownpropertydescriptor/index.html new file mode 100644 index 0000000000..273f5b7011 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/reflect/getownpropertydescriptor/index.html @@ -0,0 +1,103 @@ +--- +title: Reflect.getOwnPropertyDescriptor() +slug: Web/JavaScript/Reference/Global_Objects/Reflect/getOwnPropertyDescriptor +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Reference + - Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/getOwnPropertyDescriptor +--- +<div>{{JSRef}}</div> + +<p><code><strong>Reflect</strong></code><strong><code>.getOwnPropertyDescriptor()</code></strong> 정적 메서드는 객체에 주어진 속성이 존재하면, 해당 속성의 서술자를 반환합니다. {{jsxref("Object.getOwnPropertyDescriptor()")}}와 유사합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/reflect-getownpropertydescriptor.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Reflect.getOwnPropertyDescriptor(<em>target</em>, <em>propertyKey</em>) +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>target</code></dt> + <dd>속성을 탐색할 객체.</dd> + <dt><code>propertyKey</code></dt> + <dd>자체 속성 서술자를 가져올 속성의 이름.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>대상 속성이 객체에 존재하면, 그 속성의 서술자. 존재하지 않으면 {{jsxref("undefined")}}.</p> + +<h3 id="예제">예제</h3> + +<p><code>target</code>이 {{jsxref("Object")}}가 아니면 {{jsxref("TypeError")}}.</p> + +<h2 id="설명">설명</h2> + +<p><code>Reflect.getOwnPropertyDescriptor</code> 메서드는 객체 속성의 서술자를 반환합니다. 만약 존재하지 않는 속성이라면 {{jsxref("undefined")}}를 대신 반환합니다. {{jsxref("Object.getOwnPropertyDescriptor()")}}와의 유일한 차이는 객체가 아닌 대상의 처리 방법입니다.</p> + +<h2 id="예제_2">예제</h2> + +<h3 id="Reflect.getOwnPropertyDescriptor()_사용하기"><code>Reflect.getOwnPropertyDescriptor()</code> 사용하기</h3> + +<pre class="brush: js">Reflect.getOwnPropertyDescriptor({x: 'hello'}, 'x'); +// {value: "hello", writable: true, enumerable: true, configurable: true} + +Reflect.getOwnPropertyDescriptor({x: 'hello'}, 'y'); +// undefined + +Reflect.getOwnPropertyDescriptor([], 'length'); +// {value: 0, writable: true, enumerable: false, configurable: false} +</pre> + +<h3 id="Object.getOwnPropertyDescriptor()와의_차이점"><code>Object.getOwnPropertyDescriptor()</code>와의 차이점</h3> + +<p><code>Reflect.getOwnPropertyDescriptor()</code>의 첫 번째 매개변수가 객체가 아니고 {{glossary("Primitive", "원시값")}}이라면 {{jsxref("TypeError")}}가 발생합니다. 반면 {{jsxref("Object.getOwnPropertyDescriptor()")}}는 같은 상황에서 값을 우선 객체로 변환합니다.</p> + +<pre class="brush: js">Reflect.getOwnPropertyDescriptor('foo', 0); +// TypeError: "foo" is not non-null object + +Object.getOwnPropertyDescriptor('foo', 0); +// { value: "f", writable: false, enumerable: true, configurable: false }</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-reflect.getownpropertydescriptor', 'Reflect.getOwnPropertyDescriptor')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-reflect.getownpropertydescriptor', 'Reflect.getOwnPropertyDescriptor')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Reflect.getOwnPropertyDescriptor")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Reflect")}}</li> + <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/reflect/getprototypeof/index.html b/files/ko/web/javascript/reference/global_objects/reflect/getprototypeof/index.html new file mode 100644 index 0000000000..f0d2f2d19c --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/reflect/getprototypeof/index.html @@ -0,0 +1,104 @@ +--- +title: Reflect.getPrototypeOf() +slug: Web/JavaScript/Reference/Global_Objects/Reflect/getPrototypeOf +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Reference + - Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/getPrototypeOf +--- +<div>{{JSRef}}</div> + +<p><code><strong>Reflect</strong></code><strong><code>.getPrototypeOf()</code></strong> 정적 메서드는 주어진 객체의 프로토타입을 반환합니다. {{jsxref("Object.getPrototypeOf()")}}와 거의 동일합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/reflect-getprototypeof.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Reflect.getPrototypeOf(<em>target</em>) +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>target</code></dt> + <dd>프로토타입을 가져올 대상 객체.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 객체의 프로토타입. 상속한 속성이 없으면 {{jsxref("null")}}을 반환합니다.</p> + +<h3 id="예외">예외</h3> + +<p><code>target</code>이 {{jsxref("Object")}}가 아니면 {{jsxref("TypeError")}}.</p> + +<h2 id="설명">설명</h2> + +<p><code>Reflect.getPrototypeOf()</code> 메서드는 주어진 객체의 프로토타입(<code>[[Prototype]]</code> 내부 객체의 값 등)을 반환합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Reflect.getPrototypeOf()_사용하기"><code>Reflect.getPrototypeOf()</code> 사용하기</h3> + +<pre class="brush: js">Reflect.getPrototypeOf({}); // Object.prototype +Reflect.getPrototypeOf(Object.prototype); // null +Reflect.getPrototypeOf(Object.create(null)); // null +</pre> + +<h3 id="Object.getPrototypeOf()와_비교"><code>Object.getPrototypeOf()</code>와 비교</h3> + +<pre class="brush: js">// 객체에는 동일한 결과 +Object.getPrototypeOf({}); // Object.prototype +Reflect.getPrototypeOf({}); // Object.prototype + +// ES5에서는 비객체 대상에서 모두 오류 +Object.getPrototypeOf('foo'); // Throws TypeError +Reflect.getPrototypeOf('foo'); // Throws TypeError + +// ES2015에서는 Reflect만 오류, Object는 객체로 변환 +Object.getPrototypeOf('foo'); // String.prototype +Reflect.getPrototypeOf('foo'); // Throws TypeError + +// ES2015 Object 동작을 따라하려면 객체 변환과정 필요 +Reflect.getPrototypeOf(Object('foo')); // String.prototype +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-reflect.getprototypeof', 'Reflect.getPrototypeOf')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-reflect.getprototypeof', 'Reflect.getPrototypeOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Reflect.getPrototypeOf")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Reflect")}}</li> + <li>{{jsxref("Object.getPrototypeOf()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/reflect/has/index.html b/files/ko/web/javascript/reference/global_objects/reflect/has/index.html new file mode 100644 index 0000000000..363b4d0366 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/reflect/has/index.html @@ -0,0 +1,97 @@ +--- +title: Reflect.has() +slug: Web/JavaScript/Reference/Global_Objects/Reflect/has +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Reference + - Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/has +--- +<div>{{JSRef}}</div> + +<p><code><strong>Reflect</strong></code><strong><code>.has()</code></strong> 정적 메서드는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> 연산자</a>의 함수판입니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/reflect-has.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Reflect.has(<em>target</em>, <em>propertyKey</em>) +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>target</code></dt> + <dd>속성을 탐색할 객체.</dd> + <dt><code>propertyKey</code></dt> + <dd>탐색할 속성의 이름.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>객체가 속성을 가지고 있는지 나타내는 {{jsxref("Boolean")}}.</p> + +<h3 id="예외">예외</h3> + +<p><code>target</code>이 {{jsxref("Object")}}가 아니면 {{jsxref("TypeError")}}.</p> + +<h2 id="설명">설명</h2> + +<p><code>Reflect.has()</code> 메서드는 객체에 속성이 존재하는지 판별할 수 있습니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> 연산자</a>처럼 동작합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Reflect.has()_사용하기"><code>Reflect.has()</code> 사용하기</h3> + +<pre class="brush: js">Reflect.has({x: 0}, 'x'); // true +Reflect.has({x: 0}, 'y'); // false + +// 프로토타입 체인에 존재하는 속성도 true 반환 +Reflect.has({x: 0}, 'toString'); + +// .has() 처리기 메서드를 가진 Proxy +obj = new Proxy({}, { + has(t, k) { return k.startsWith('door'); } +}); +Reflect.has(obj, 'doorbell'); // true +Reflect.has(obj, 'dormitory'); // false +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-reflect.has', 'Reflect.has')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-reflect.has', 'Reflect.has')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Reflect.has")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Reflect")}}</li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> 연산자</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/reflect/index.html b/files/ko/web/javascript/reference/global_objects/reflect/index.html new file mode 100644 index 0000000000..728dcd74c3 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/reflect/index.html @@ -0,0 +1,106 @@ +--- +title: Reflect +slug: Web/JavaScript/Reference/Global_Objects/Reflect +tags: + - ECMAScript 2015 + - JavaScript + - Reference + - Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect +--- +<div>{{JSRef}}</div> + +<p><code><strong>Reflect</strong></code>는 중간에서 가로챌 수 있는 JavaScript 작업에 대한 메서드를 제공하는 내장 객체입니다. 메서드의 종류는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">프록시 처리기</a>와 동일합니다. <code>Reflect</code>는 함수 객체가 아니므로 생성자로 사용할 수 없습니다.</p> + +<h2 id="설명">설명</h2> + +<p>다른 대부분의 전역 객체와 다르게, <code>Reflect</code>는 생성자가 아닙니다. 따라서 함수처럼 호출하거나 <a href="/ko/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> 연산자</a>로 인스턴스를 만들 수 없습니다. {{jsxref("Math")}} 객체처럼, <code>Reflect</code>의 모든 속성과 메서드는 정적입니다.</p> + +<p><code>Reflect</code> 객체의 정적 메서드 이름은 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">프록시 처리기 메서드</a>의 이름과 같습니다.</p> + +<p>일부 메서드는 {{jsxref("Object")}}에도 존재하는 메서드이지만 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Reflect/Comparing_Reflect_and_Object_methods">약간의 차이</a>가 있습니다.</p> + +<h2 id="정적_메서드">정적 메서드</h2> + +<dl> + <dt>{{jsxref("Reflect.apply()")}}</dt> + <dd>대상 함수를 주어진 매개변수로 호출합니다. {{jsxref("Function.prototype.apply()")}}도 참고하세요.</dd> + <dt>{{jsxref("Reflect.construct()")}}</dt> + <dd>함수로 사용하는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> 연산자</a>입니다. <code>new target(...args)</code>을 호출하는 것과 같습니다. 다른 프로토타입을 지정하는 추가 기능도 가지고 있습니다.</dd> + <dt>{{jsxref("Reflect.defineProperty()")}}</dt> + <dd>{{jsxref("Object.defineProperty()")}}와 비슷합니다. {{jsxref("Boolean")}}을 반환합니다.</dd> + <dt>{{jsxref("Reflect.deleteProperty()")}}</dt> + <dd>함수로 사용하는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/delete"><code>delete</code> 연산자</a>입니다. <code>delete target[name]</code>을 호출하는 것과 같습니다.</dd> + <dt>{{jsxref("Reflect.get()")}}</dt> + <dd>대상 속성의 값을 반환하는 함수입니다.</dd> + <dt>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</dt> + <dd>{{jsxref("Object.getOwnPropertyDescriptor()")}}와 비슷합니다. 주어진 속성이 대상 객체에 존재하면, 그 속성의 서술자를 반환합니다. 그렇지 않으면 {{jsxref("undefined")}}를 반환합니다.</dd> + <dt>{{jsxref("Reflect.getPrototypeOf()")}}</dt> + <dd>{{jsxref("Object.getPrototypeOf()")}}와 같습니다.</dd> + <dt>{{jsxref("Reflect.has()")}}</dt> + <dd>함수로 사용하는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> 연산자</a>입니다. 자신의, 혹은 상속한 속성이 존재하는지 나타내는 {{jsxref("Boolean")}}을 반환합니다.</dd> + <dt>{{jsxref("Reflect.isExtensible()")}}</dt> + <dd>{{jsxref("Object.isExtensible()")}}과 같습니다.</dd> + <dt>{{jsxref("Reflect.ownKeys()")}}</dt> + <dd>대상 객체의 자체 키(상속하지 않은 키) 목록을 배열로 반환합니다.</dd> + <dt>{{jsxref("Reflect.preventExtensions()")}}</dt> + <dd>{{jsxref("Object.preventExtensions()")}}와 비슷합니다. {{jsxref("Boolean")}}을 반환합니다.</dd> + <dt>{{jsxref("Reflect.set()")}}</dt> + <dd>속성에 값을 할당하는 함수입니다. 할당 성공 여부를 나타내는 {{jsxref("Boolean")}}을 반환합니다.</dd> + <dt>{{jsxref("Reflect.setPrototypeOf()")}}</dt> + <dd>객체의 프로토타입을 지정하는 함수입니다. 지정 성공 여부를 나타내는 {{jsxref("Boolean")}}을 반환합니다.</dd> +</dl> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-reflect-object', 'Reflect')}}</td> + </tr> + </tbody> +</table> + +<h2 id="예제">예제</h2> + +<h3 id="객체가_특정_속성을_가지고_있는지_검사하기">객체가 특정 속성을 가지고 있는지 검사하기</h3> + +<pre class="brush: js notranslate">const duck = { + name: 'Maurice', + color: 'white', + greeting: function() { + console.log(`Quaaaack! My name is ${this.name}`); + } +} + +Reflect.has(duck, 'color'); +// true +Reflect.has(duck, 'haircut'); +// false</pre> + +<h3 id="객체_자체_키를_반환하기">객체 자체 키를 반환하기</h3> + +<pre class="brush: js notranslate">Reflect.ownKeys(duck); +// [ "name", "color", "greeting" ]</pre> + +<h3 id="객체에_새로운_속성_추가하기">객체에 새로운 속성 추가하기</h3> + +<pre class="brush: js notranslate">Reflect.set(duck, 'eyes', 'black'); +// returns "true" if successful +// "duck" now contains the property "eyes: 'black'"</pre> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Reflect")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Proxy")}} 전역 객체.</li> + <li>{{jsxref("Proxy.handler", "handler")}} 객체.</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/reflect/isextensible/index.html b/files/ko/web/javascript/reference/global_objects/reflect/isextensible/index.html new file mode 100644 index 0000000000..68d168eb65 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/reflect/isextensible/index.html @@ -0,0 +1,111 @@ +--- +title: Reflect.isExtensible() +slug: Web/JavaScript/Reference/Global_Objects/Reflect/isExtensible +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Reference + - Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/isExtensible +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><code><strong>Reflect</strong></code><strong><code>.isExtensible()</code></strong> 정적 메서드는 객체의 확장 가능 여부, 즉 속성을 추가할 수 있는지 판별합니다.</span> {{jsxref("Object.isExtensible()")}}과 유사하지만 {{anch("Object.isExtensible()과의 차이", "차이점")}}도 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/reflect-isextensible.html", "taller")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Reflect.isExtensible(<em>target</em>) +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>target</code></dt> + <dd>확장 가능 여부를 판별할 대상 객체.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>객체의 확장 가능 여부를 나타내는 {{jsxref("Boolean")}}.</p> + +<h3 id="예외">예외</h3> + +<p><code>target</code>이 {{jsxref("Object")}}가 아니면 {{jsxref("TypeError")}}.</p> + +<h2 id="설명">설명</h2> + +<p><code>Reflect.isExtensible()</code> 메서드는 {{jsxref("Object.isExtensible()")}}와 유사하게, 객체에 새로운 속성을 추가할 수 있는지 판별합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Reflect.isExtensible()_사용하기"><code>Reflect.isExtensible()</code> 사용하기</h3> + +<p>{{jsxref("Object.isExtensible()")}}도 참고하세요.</p> + +<pre class="brush: js">// 새로운 객체는 확장 가능 +var empty = {}; +Reflect.isExtensible(empty); // === true + +// ...하지만 바꿀 수 있음 +Reflect.preventExtensions(empty); +Reflect.isExtensible(empty); // === false + +// 봉인한 객체는 확장 불가능함 +var sealed = Object.seal({}); +Reflect.isExtensible(sealed); // === false + +// 동결한 객체도 확장 불가능함 +var frozen = Object.freeze({}); +Reflect.isExtensible(frozen); // === false +</pre> + +<h3 id="Object.isExtensible()과의_차이점"><code>Object.isExtensible()</code>과의 차이점</h3> + +<p><code>Reflect.isExtensible()</code>은 첫 번째 매개변수가 {{glossary("Primitive", "원시값")}}이면 {{jsxref("TypeError")}}를 던집니다. 반면 {{jsxref("Object.isExtensible()")}}은 우선 객체로 변환을 시도합니다.</p> + +<pre class="brush: js">Reflect.isExtensible(1); +// TypeError: 1 is not an object + +Object.isExtensible(1); +// false +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-reflect.isextensible', 'Reflect.isExtensible')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-reflect.isextensible', 'Reflect.isExtensible')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Reflect.isExtensible")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Reflect")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/reflect/ownkeys/index.html b/files/ko/web/javascript/reference/global_objects/reflect/ownkeys/index.html new file mode 100644 index 0000000000..41c350ca60 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/reflect/ownkeys/index.html @@ -0,0 +1,95 @@ +--- +title: Reflect.ownKeys() +slug: Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Reference + - Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys +--- +<div>{{JSRef}}</div> + +<p><code><strong>Reflect.ownKeys()</strong></code> 정적 메서드는 대상 객체의 자체 속성 키를 배열로 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/reflect-ownkeys.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Reflect.ownKeys(<em>target</em>) +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>target</code></dt> + <dd>자체 키를 가져올 대상 객체.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 객체의 자체 속성 키를 담은 {{jsxref("Array")}}.</p> + +<h3 id="예외">예외</h3> + +<p><code>target</code>이 {{jsxref("Object")}}가 아니면 {{jsxref("TypeError")}}.</p> + +<h2 id="설명">설명</h2> + +<p>The <code>Reflect.ownKeys()</code> 메서드는 대상 객체의 자체 속성 키를 배열로 반환합니다. 반환 값은 <code>{{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(target)", "", 1)}}.concat({{jsxref("Object.getOwnPropertySymbols", "Object.getOwnPropertySymbols(target)", "", 1)}})</code>와 동일합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Reflect.ownKeys()_사용하기"><code>Reflect.ownKeys()</code> 사용하기</h3> + +<pre class="brush: js">Reflect.ownKeys({z: 3, y: 2, x: 1}); // [ "z", "y", "x" ] +Reflect.ownKeys([]); // ["length"] + +var sym = Symbol.for('comet'); +var sym2 = Symbol.for('meteor'); +var obj = {[sym]: 0, 'str': 0, '773': 0, '0': 0, + [sym2]: 0, '-1': 0, '8': 0, 'second str': 0}; +Reflect.ownKeys(obj); +// [ "0", "8", "773", "str", "-1", "second str", Symbol(comet), Symbol(meteor) ] +// Indexes in numeric order, +// strings in insertion order, +// symbols in insertion order +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-reflect.ownkeys', 'Reflect.ownKeys')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-reflect.ownkeys', 'Reflect.ownKeys')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Reflect.ownKeys")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Reflect")}}</li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/reflect/preventextensions/index.html b/files/ko/web/javascript/reference/global_objects/reflect/preventextensions/index.html new file mode 100644 index 0000000000..364b46a5fa --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/reflect/preventextensions/index.html @@ -0,0 +1,103 @@ +--- +title: Reflect.preventExtensions() +slug: Web/JavaScript/Reference/Global_Objects/Reflect/preventExtensions +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Reference + - Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/preventExtensions +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><code><strong>Reflect.preventExtensions()</strong></code> 정적 메서드는 새로운 속성을 객체에 추가하지 못하도록 완전히 막습니다. 즉, 미래의 객체 확장을 막습니다.</span> {{jsxref("Object.preventExtensions()")}}와 유사하지만 {{anch("Object.preventExtensions()와의 차이점", "차이점")}}도 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/reflect-preventextensions.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Reflect.preventExtensions(<em>target</em>) +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>target</code></dt> + <dd>확장을 방지할 대상 객체.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>대상의 확장을 성공적으로 방지했는지 나타내는 {{jsxref("Boolean")}}.</p> + +<h3 id="예외">예외</h3> + +<p><code>target</code>이 {{jsxref("Object")}}가 아니면 {{jsxref("TypeError")}}.</p> + +<h2 id="설명">설명</h2> + +<p><code>Reflect.preventExtensions()</code> 메서드는 새로운 속성을 객체에 추가하지 못하도록 완전히 막습니다. 즉, 미래의 객체 확장을 막습니다. {{jsxref("Object.preventExtensions()")}}와 유사합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Reflect.preventExtensions()_사용하기"><code>Reflect.preventExtensions()</code> 사용하기</h3> + +<p>{{jsxref("Object.preventExtensions()")}}도 참고하세요.</p> + +<pre class="brush: js">// 객체는 기본적으로 확장 가능 +var empty = {}; +Reflect.isExtensible(empty); // === true + +// ...하지만 바꿀 수 있음 +Reflect.preventExtensions(empty); +Reflect.isExtensible(empty); // === false +</pre> + +<h3 id="Object.preventExtensions()와의_차이점"><code>Object.preventExtensions()</code>와의 차이점</h3> + +<p><code>Reflect.preventExtensions()</code>는 첫 번째 매개변수가 {{glossary("Primitive", "원시값")}}이면 {{jsxref("TypeError")}}를 던집니다. 반면 {{jsxref("Object.preventExtensions()")}}는 우선 객체로 변환을 시도합니다.</p> + +<pre class="brush: js">Reflect.preventExtensions(1); +// TypeError: 1 is not an object + +Object.preventExtensions(1); +// 1 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-reflect.preventextensions', 'Reflect.preventExtensions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-reflect.preventextensions', 'Reflect.preventExtensions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Reflect.preventExtensions")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Reflect")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/reflect/set/index.html b/files/ko/web/javascript/reference/global_objects/reflect/set/index.html new file mode 100644 index 0000000000..f3cfc3a532 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/reflect/set/index.html @@ -0,0 +1,108 @@ +--- +title: Reflect.set() +slug: Web/JavaScript/Reference/Global_Objects/Reflect/set +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Reference + - Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/set +--- +<div>{{JSRef}}</div> + +<p><code><strong>Reflect</strong></code><strong><code>.set()</code></strong> 정적 메서드는 객체 속성의 값을 설정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/reflect-set.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Reflect.set(<em>target</em>, <em>propertyKey</em>, <em>value</em>[, <em>receiver</em>]) +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>target</code></dt> + <dd>속성의 값을 설정할 대상 객체.</dd> + <dt><code>propertyKey</code></dt> + <dd>값을 설정할 속성의 이름.</dd> + <dt><code>value</code></dt> + <dd>설정할 값.</dd> + <dt><code>receiver</code> {{optional_inline}}</dt> + <dd>속성이 설정자일 경우, <code>this</code>로 사용할 값.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>값 설정의 성공 여부를 나타내는 {{jsxref("Boolean")}}.</p> + +<h3 id="예외">예외</h3> + +<p><code>target</code>이 {{jsxref("Object")}}가 아니면 {{jsxref("TypeError")}}.</p> + +<h2 id="설명">설명</h2> + +<p><code>Reflect.set()</code> 메서드는 객체 속성의 값을 설정할 수 있습니다. 속성 추가도 할 수 있으며, 함수라는 점을 제외하면 동작 방식은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a>와 같습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Reflect.set()_사용하기"><code>Reflect.set()</code> 사용하기</h3> + +<pre class="brush: js">// Object +var obj = {}; +Reflect.set(obj, 'prop', 'value'); // true +obj.prop; // "value" + +// Array +var arr = ['duck', 'duck', 'duck']; +Reflect.set(arr, 2, 'goose'); // true +arr[2]; // "goose" + +// 배열 자르기 +Reflect.set(arr, 'length', 1); // true +arr; // ["duck"]; + +// 매개변수를 하나만 제공하면 속성 키 이름은 문자열 "undefined", 값은 undefined +var obj = {}; +Reflect.set(obj); // true +Reflect.getOwnPropertyDescriptor(obj, 'undefined'); +// { value: undefined, writable: true, enumerable: true, configurable: true } +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-reflect.set', 'Reflect.set')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-reflect.set', 'Reflect.set')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Reflect.set")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Reflect")}}</li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/reflect/setprototypeof/index.html b/files/ko/web/javascript/reference/global_objects/reflect/setprototypeof/index.html new file mode 100644 index 0000000000..3e97b9b385 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/reflect/setprototypeof/index.html @@ -0,0 +1,88 @@ +--- +title: Reflect.setPrototypeOf() +slug: Web/JavaScript/Reference/Global_Objects/Reflect/setPrototypeOf +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Reference + - Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/setPrototypeOf +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><code><strong>Reflect</strong></code><strong><code>.setPrototypeOf()</code></strong> 정적 메서드는 주어진 객체의 프로토타입(내부 <code>[[Prototype]]</code> 속성)을 다른 객체나 {{jsxref("null")}}로 바꿉니다.</span> 반환 값을 제외하면 {{jsxref("Object.setPrototypeOf()")}} 메서드와 같습니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/reflect-setprototypeof.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">Reflect.setPrototypeOf(<em>target</em>, <em>prototype</em>) +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>target</code></dt> + <dd>프로토타입을 지정할 대상 객체.</dd> + <dt><code>prototype</code></dt> + <dd>대상 객체의 새로운 프로토타입. (객체 또는 {{jsxref("null")}}</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>프로토타입 설정 성공 여부를 나타내는 {{jsxref("Boolean")}}.</p> + +<h3 id="예외">예외</h3> + +<p><code>target</code>이 {{jsxref("Object")}}가 아니거나, <code>prototype</code>이 객체도 {{jsxref("null")}}도 아니면 {{jsxref("TypeError")}}.</p> + +<h2 id="설명">설명</h2> + +<p><code>Reflect.setPrototypeOf()</code> 메서드는 주어진 객체의 프로토타입(즉, 내부 <code>[[Prototype]]</code> 속성)을 변경합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Reflect.setPrototypeOf_사용하기"><code>Reflect.setPrototypeOf()</code> 사용하기</h3> + +<pre class="brush: js">Reflect.setPrototypeOf({}, Object.prototype); // true + +// It can change an object's [[Prototype]] to null. +Reflect.setPrototypeOf({}, null); // true + +// Returns false if target is not extensible. +Reflect.setPrototypeOf(Object.freeze({}), null); // false + +// Returns false if it cause a prototype chain cycle. +const target = {}; +const proto = Object.create(target); +Reflect.setPrototypeOf(target, proto); // false +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-reflect.setprototypeof', 'Reflect.setPrototypeOf')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Reflect.setPrototypeOf")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Reflect")}}</li> + <li>{{jsxref("Object.setPrototypeOf()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/regexp/exec/index.html b/files/ko/web/javascript/reference/global_objects/regexp/exec/index.html new file mode 100644 index 0000000000..4659688c51 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/regexp/exec/index.html @@ -0,0 +1,188 @@ +--- +title: RegExp.prototype.exec() +slug: Web/JavaScript/Reference/Global_Objects/RegExp/exec +tags: + - JavaScript + - Method + - Prototype + - Reference + - RegExp + - 정규 표현식 +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/exec +--- +<div>{{JSRef}}</div> + +<p><strong><code>exec()</code></strong> 메서드는 주어진 문자열에서 일치 탐색을 수행한 결과를 배열 혹은 {{jsxref("null")}}로 반환합니다.</p> + +<p>JavaScript {{jsxref("RegExp")}} 객체는 {{jsxref("RegExp.global", "global")}} 또는 {{jsxref("RegExp.sticky", "sticky")}} 플래그를 설정(<code>/foo/g</code>, <code>/foo/y</code> 등)한 경우 이전 일치의 인덱스를 저장하므로 <strong>상태를 가지고</strong>(stateful) 있습니다. 이를 내부적으로 사용하여, {{jsxref("String.prototype.match()")}}와는 다르게 (캡처 그룹을 포함한) 문자열 내의 일치 다수를 반복해 순회할 수 있습니다.</p> + +<p>(캡처 그룹을 포함한) 문자열 내의 다수 일치를 수행할 수 있는 보다 간편한 신규 메서드, {{jsxref("String.prototype.matchAll()")}}이 제안된 상태입니다.</p> + +<p>단순히 <code>true</code>/<code>false</code>가 필요한 경우 {{jsxref("RegExp.prototype.text()")}} 메서드 혹은 {{jsxref("String.prototype.search()")}}를 사용하세요.</p> + +<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-exec.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate"><var>regexObj</var>.exec(<var>str</var>)</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>str</code></dt> + <dd>정규 표현식 검색을 수행할 대상 문자열.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>정규 표현식이 일치하면, <code>exec()</code> 메서드는 배열(추가 속성 <code>index</code>와 <code>input</code> 포함, 아래 설명을 참고하세요)을 반환하고, 정규 표현식 객체의 {{jsxref("RegExp.lastIndex", "lastIndex")}} 속성을 업데이트합니다. 반환하는 배열은 일치한 텍스트를 첫 번째 원소로, 각각의 괄호 캡처 그룹을 이후 원소로 포함합니다.</p> + +<p>정규표현식 검색에 실패하면, <code>exec()</code> 메서드는 {{jsxref("null")}}을 반환하고 {{jsxref("RegExp.lastIndex", "lastIndex")}}를 <code>0</code>으로 설정합니다.</p> + +<h2 id="설명">설명</h2> + +<p>다음과 같은 예제를 고려해보세요.</p> + +<pre class="brush: js notranslate">// Match "quick brown" followed by "jumps", ignoring characters in between +// Remember "brown" and "jumps" +// Ignore case +let re = /quick\s(brown).+?(jumps)/ig; +let result = re.exec('The Quick Brown Fox Jumps Over The Lazy Dog');</pre> + +<p>다음의 표는 이 스크립트의 결과에 대해 보여줍니다.</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="row">객체</th> + <th scope="col">속성/인덱스</th> + <th scope="col">설명</th> + <th scope="col">예제</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="1" rowspan="4" scope="row" style="vertical-align: top;"><code>result</code></th> + <td><code>[0]</code></td> + <td>일치한 전체 문자.</td> + <td><code>"Quick Brown Fox Jumps"</code></td> + </tr> + <tr> + <td><code>[1], ...[<var>n</var>]</code></td> + <td> + <p>(존재하는 경우) 괄호로 감싼 부분문자열.</p> + + <p>괄호로 감싼 부분문자열 숫자의 제한은 없습니다.</p> + </td> + <td> + <p><code>result[1] === "Brown"</code></p> + + <p><code>result[2] === "Jumps"</code></p> + </td> + </tr> + <tr> + <td><code>index</code></td> + <td>일치가 문자열에서 위치하는 인덱스. (0 시작)</td> + <td><code>4</code></td> + </tr> + <tr> + <td><code>input</code></td> + <td>원본 문자열.</td> + <td><code>"The Quick Brown Fox Jumps Over The Lazy Dog"</code></td> + </tr> + <tr> + <th colspan="1" rowspan="5" scope="row" style="vertical-align: top;"><code>re</code></th> + <td><code>lastIndex</code></td> + <td> + <p>다음 일치를 시작할 인덱스.</p> + + <p><code>g</code>를 누락하면 항상 <code>0</code>입니다.</p> + </td> + <td><code>25</code></td> + </tr> + <tr> + <td><code>ignoreCase</code></td> + <td><code>i</code> 플래그로 대소문자를 무시했는지 여부.</td> + <td><code>true</code></td> + </tr> + <tr> + <td><code>global</code></td> + <td><code>g</code> 플래그로 전역 일치를 수행하는지 여부.</td> + <td><code>true</code></td> + </tr> + <tr> + <td><code>multiline</code></td> + <td><code>m</code> 플래그로 여러 줄에 걸친 탐색을 수행하는지 여부.</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>source</code></td> + <td>패턴 문자열.</td> + <td><code>"quick\s(brown).+?(jumps)"</code></td> + </tr> + </tbody> +</table> + +<h2 id="예제">예제</h2> + +<h3 id="Finding_successive_matches">Finding successive matches</h3> + +<p>If your regular expression uses the "<code>g</code>" flag, you can use the <code>exec()</code> method multiple times to find successive matches in the same string. When you do so, the search starts at the substring of <code>str</code> specified by the regular expression's {{jsxref("RegExp.lastIndex", "lastIndex")}} property ({{jsxref("RegExp.prototype.test()", "test()")}} will also advance the {{jsxref("RegExp.lastIndex", "lastIndex")}} property). For example, assume you have this script:</p> + +<pre class="brush: js notranslate">var myRe = /ab*/g; +var str = 'abbcdefabh'; +var myArray; +while ((myArray = myRe.exec(str)) !== null) { + var msg = 'Found ' + myArray[0] + '. '; + msg += 'Next match starts at ' + myRe.lastIndex; + console.log(msg); +} +</pre> + +<p>This script displays the following text:</p> + +<pre class="notranslate">Found abb. Next match starts at 3 +Found ab. Next match starts at 9 +</pre> + +<p>Note: Do not place the regular expression literal (or {{jsxref("RegExp")}} constructor) within the <code>while</code> condition or it will create an infinite loop if there is a match due to the {{jsxref("RegExp.lastIndex", "lastIndex")}} property being reset upon each iteration. Also be sure that the global flag is set or a loop will occur here also.</p> + +<h3 id="Using_exec_with_RegExp_literals">Using <code>exec()</code> with <code>RegExp</code> literals</h3> + +<p>You can also use <code>exec()</code> without creating a {{jsxref("RegExp")}} object:</p> + +<pre class="brush: js notranslate">var matches = /(hello \S+)/.exec('This is a hello world!'); +console.log(matches[1]); +</pre> + +<p>This will log a message containing 'hello world!'.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-regexp.prototype.exec', 'RegExp.exec')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("javascript.builtins.RegExp.exec")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a> chapter in the <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a></li> + <li>{{jsxref("RegExp")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/regexp/index.html b/files/ko/web/javascript/reference/global_objects/regexp/index.html new file mode 100644 index 0000000000..541d3585db --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/regexp/index.html @@ -0,0 +1,233 @@ +--- +title: RegExp +slug: Web/JavaScript/Reference/Global_Objects/RegExp +tags: + - Constructor + - JavaScript + - Reference + - RegExp + - 정규 표현식 + - 정규식 +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp +--- +<div>{{JSRef}}</div> + +<p><strong><code>RegExp</code></strong> 생성자는 패턴을 사용해 텍스트를 판별할 때 사용합니다.</p> + +<p>정규 표현식에 대한 소개는 <a href="/ko/docs/Web/JavaScript/Guide/Regular_Expressions">JavaScript 안내서의 정규 표현식 장</a>을 참고하세요.</p> + +<h2 id="설명">설명</h2> + +<h3 id="리터럴_표기법과_생성자">리터럴 표기법과 생성자</h3> + +<p><code>RegExp</code> 객체는 리터럴 표기법과 생성자로써 생성할 수 있습니다.</p> + +<ul> + <li><strong>리터럴 표기법</strong>의 매개변수는 두 빗금으로 감싸야 하며 따옴표를 사용하지 않습니다.</li> + <li><strong>생성자 함수</strong>의 매개변수는 빗금으로 감싸지 않으나 따옴표를 사용합니다.</li> +</ul> + +<p>다음의 세 표현식은 모두 같은 정규 표현식을 생성합니다.</p> + +<pre class="brush: js notranslate">/ab+c/i +new RegExp(/ab+c/, 'i') // 리터럴 +new RegExp('ab+c', 'i') // 생성자 +</pre> + +<p>리터럴 표기법은 표현식을 평가할 때 정규 표현식을 컴파일합니다. 정규 표현식이 변하지 않으면 리터럴 표기법을 사용하세요. 예를 들어, 반복문 안에서 사용할 정규 표현식을 리터럴 표기법으로 생성하면 정규 표현식을 매번 다시 컴파일하지 않습니다.</p> + +<p>정규 표현식 객체의 생성자(<code>new RegExp('ab+c')</code>)를 사용하면 정규 표현식이 런타임에 컴파일됩니다. 패턴이 변할 가능성이 있거나, 사용자 입력과 같이 알 수 없는 외부 소스에서 가져오는 정규 표현식의 경우 생성자 함수를 사용하세요.</p> + +<h3 id="생성자의_플래그">생성자의 플래그</h3> + +<p>ECMAScript 6부터는 <code>new RegExp(/ab+c/, 'i')</code>처럼, 첫 매개변수가 <code>RegExp</code>이면서 <code>flags</code>를 지정해도 {{jsxref("TypeError")}} (<code>"can't supply flags when constructing one RegExp from another"</code>)가 발생하지 않고, 매개변수로부터 새로운 정규 표현식을 생성합니다.</p> + +<p>생성자 함수를 사용할 경우 보통의 문자열 이스케이프 규칙(특수 문자를 문자열에 사용할 때 앞에 역빗금(<code>\</code>)을 붙이는 것)을 준수해야 합니다.</p> + +<p>예를 들어 다음 두 줄은 동일한 정규 표현식을 생성합니다.</p> + +<pre class="brush: js notranslate">let re = /\w+/ +let re = new RegExp('\\w+')</pre> + +<h3 id="Perl_형태의_RegExp_속성">Perl 형태의 <code>RegExp</code> 속성</h3> + +<p>일부 {{JSxRef("RegExp")}} 속성은 같은 값에 대해 긴 이름과 짧은 (Perl 형태의) 이름 모두 가지고 있습니다. (Perl은 JavaScript가 정규 표현식을 만들 때 참고한 프로그래밍 언어입니다.)<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#RegExp_Properties"> 사용하지 않는 <code>RegExp</code> 속성</a>을 참고하세요.</p> + +<h2 id="생성자">생성자</h2> + +<dl> + <dt>{{jsxref("RegExp/RegExp", "RegExp()")}}</dt> + <dd>새로운 <code>RegExp</code> 객체를 생성합니다.</dd> +</dl> + +<h2 id="정적_속성">정적 속성</h2> + +<dl> + <dt>{{jsxref("RegExp.@@species", "get RegExp[@@species]")}}</dt> + <dd>파생 객체를 생성할 때 사용하는 생성자입니다.</dd> + <dt>{{jsxref("RegExp.lastIndex")}}</dt> + <dd>다음 판별을 시작할 인덱스입니다.</dd> +</dl> + +<h2 id="인스턴스_속성">인스턴스 속성</h2> + +<dl> + <dt>{{JSxRef("RegExp.prototype.flags")}}</dt> + <dd><code>RegExp</code> 객체의 플래그를 담은 문자열입니다.</dd> + <dt>{{JSxRef("RegExp.prototype.dotAll")}}</dt> + <dd><code>.</code>이 줄 바꿈에 일치하는지 여부를 나타냅니다.</dd> + <dt>{{JSxRef("RegExp.prototype.global")}}</dt> + <dd>정규 표현식이 문자열 내에서 가능한 모든 경우에 일치하는지, 아니면 최초에 대해서만 일치하는지 나타냅니다.</dd> + <dt>{{JSxRef("RegExp.prototype.ignoreCase")}}</dt> + <dd>문자열의 대소문자를 구분하는지 나타냅니다.</dd> + <dt>{{JSxRef("RegExp.prototype.multiline")}}</dt> + <dd>여러 줄에 걸쳐 탐색할 것인지 나타냅니다.</dd> + <dt>{{JSxRef("RegExp.prototype.source")}}</dt> + <dd>패턴을 나타내는 문자열입니다.</dd> + <dt>{{JSxRef("RegExp.prototype.sticky")}}</dt> + <dd>검색이 접착(sticky)되어있는지 나타냅니다.</dd> + <dt>{{JSxRef("RegExp.prototype.unicode")}}</dt> + <dd>Unicode 기능의 활성화 여부입니다.</dd> +</dl> + +<h2 id="인스턴스_메서드">인스턴스 메서드</h2> + +<dl> + <dt>{{JSxRef("RegExp.prototype.compile()")}}</dt> + <dd>스크립트 실행 중 정규 표현식을 (다시) 컴파일합니다.</dd> + <dt>{{JSxRef("RegExp.prototype.exec()")}}</dt> + <dd>문자열 매개변수에 대해 검색을 실행합니다.</dd> + <dt>{{JSxRef("RegExp.prototype.test()")}}</dt> + <dd>문자열 매개변수에 대해 판별을 실행합니다.</dd> + <dt>{{JSxRef("RegExp.prototype.toString()")}}</dt> + <dd>객체의 문자열 표현을 반환합니다. {{JSxRef("Object.prototype.toString()")}} 메서드를 재정의합니다.</dd> + <dt>{{JSxRef("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}}</dt> + <dd>주어진 문자열에 대해 일치하는 결과를 반환합니다.</dd> + <dt>{{JSxRef("RegExp.prototype.@@matchAll()", "RegExp.prototype[@@matchAll]()")}}</dt> + <dd>주어진 문자열에 대해 일치하는 모든 결과를 반환합니다.</dd> + <dt>{{JSxRef("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}}</dt> + <dd>주어진 문자열 내의 일치를 새로운 문자열로 대치합니다.</dd> + <dt>{{JSxRef("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}}</dt> + <dd>주어진 문자열에 대해 일치하는 인덱스를 반환합니다.</dd> + <dt>{{JSxRef("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}}</dt> + <dd>주어진 문자열을 분할해 배열로 반환합니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<h3 id="정규_표현식을_사용해서_데이터_형식_바꾸기">정규 표현식을 사용해서 데이터 형식 바꾸기</h3> + +<p>다음 스크립트에서는 {{jsxref("String")}} 객체의 {{jsxref("String.prototype.replace()", "replace()")}} 메서드를 사용하여 <em>이름 성씨</em> 형태의 이름을 <em>성씨, 이름</em> 형태 바꿔 반환합니다.</p> + +<p>대치 문자열에는 <code>$1</code>과 <code>$2</code>를 사용하여 정규 표현식 패턴의 각 괄호에 일치한 결과를 받아옵니다.</p> + +<pre class="brush: js notranslate">let re = /(\w+)\s(\w+)/ +let str = 'John Smith' +let newstr = str.replace(re, '$2, $1') +console.log(newstr)</pre> + +<p>실행 결과는 <code>"Smith, John"</code>입니다.</p> + +<h3 id="정규_표현식을_사용해서_여러_가지_줄_바꿈_문자가_있는_문자열_나누기">정규 표현식을 사용해서 여러 가지 줄 바꿈 문자가 있는 문자열 나누기</h3> + +<p>기본 줄 바꿈 문자는 플랫폼(Unix, Windows 등)마다 다릅니다. 아래의 분할 스크립트는 모든 플랫폼의 줄 바꿈을 인식합니다.</p> + +<pre class="brush: js notranslate">let text = 'Some text\nAnd some more\r\nAnd yet\rThis is the end' +let lines = text.split(/\r\n|\r|\n/) +console.log(lines) // logs [ 'Some text', 'And some more', 'And yet', 'This is the end' ]</pre> + +<p>정규 표현식 패턴의 순서를 바꾸면 작동하지 않을 수 있습니다.</p> + +<h3 id="여러_줄에서_정규_표현식_사용하기">여러 줄에서 정규 표현식 사용하기</h3> + +<pre class="brush: js notranslate">let s = 'Please yes\nmake my day!' + +s.match(/yes.*day/); +// Returns null + +s.match(/yes[^]*day/); +// Returns ["yes\nmake my day"]</pre> + +<h3 id="접착_플래그와_함께_사용하기">접착 플래그와 함께 사용하기</h3> + +<p>{{JSxRef("Global_Objects/RegExp/sticky", "sticky")}} 플래그는 해당 정규 표현식이 접착 판별, 즉 {{jsxref("RegExp.prototype.lastIndex")}}에서 시작하는 일치만 확인하도록 할 수 있습니다.</p> + +<pre class="brush: js notranslate">let str = '#foo#' +let regex = /foo/y + +regex.lastIndex = 1 +regex.test(str) // true +regex.lastIndex = 5 +regex.test(str) // false (lastIndex is taken into account with sticky flag) +regex.lastIndex // 0 (reset after match failure)</pre> + +<h3 id="접착과_전역_플래그의_차이">접착과 전역 플래그의 차이</h3> + +<p>접착 플래그 <code>y</code>의 일치는 정확히 <code>lastIndex</code> 위치에서만 발생할 수 있으나, 전역 플래그 <code>g</code>의 경우 <code>lastIndex</code> 또는 그 이후에서도 발생할 수 있습니다.</p> + +<pre class="brush: js notranslate">re = /\d/y; +while (r = re.exec("123 456")) console.log(r, "AND re.lastIndex", re.lastIndex); + +// [ '1', index: 0, input: '123 456', groups: undefined ] AND re.lastIndex 1 +// [ '2', index: 1, input: '123 456', groups: undefined ] AND re.lastIndex 2 +// [ '3', index: 2, input: '123 456', groups: undefined ] AND re.lastIndex 3 +// ... and no more match.</pre> + +<p>전역 플래그 <code>g</code>를 사용했다면, 3개가 아니고 6개 숫자 모두 일치했을 것입니다.</p> + +<h3 id="정규_표현식과_Unicode_문자">정규 표현식과 Unicode 문자</h3> + +<p> <code>\w</code>와 <code>\W</code>는 <code>a</code>부터 <code>z</code>, <code>A</code>부터 <code>Z</code>, <code>0</code>부터 <code>9</code> <code>_</code> 등의 {{glossary("ASCII")}} 문자에만 일치합니다.</p> + +<p>러시아어나 히브리어와 같은 다른 언어의 문자까지 일치하려면 <code>\uhhhh</code>(이때 hhhh는 해당 문자의 16진법 Unicode 값) 문법을 사용하세요. 아래 예제에서는 문자열에서 Unicode 문자를 추출합니다.</p> + +<pre class="brush: js notranslate">let text = 'Образец text на русском языке' +let regex = /[\u0400-\u04FF]+/g + +let match = regex.exec(text) +console.log(match[0]) // logs 'Образец' +console.log(regex.lastIndex) // logs '7' + +let match2 = regex.exec(text) +console.log(match2[0]) // logs 'на' [did not log 'text'] +console.log(regex.lastIndex) // logs '15' + +// and so on</pre> + +<p><a href="/ko/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">유니코드 속성 이스케이프</a> 기능을 사용해 <code>\p{scx=Cyrl}</code>과 같은 간단한 구문으로 이 문제를 해결할 수 있습니다.</p> + +<h3 id="URL에서_서브도메인_추출하기">URL에서 서브도메인 추출하기</h3> + +<pre class="brush: js notranslate">let url = 'http://xxx.domain.com' +console.log(/[^.]+/.exec(url)[0].substr(7)) // logs 'xxx'</pre> + +<div class="blockIndicator note"> +<p>이 때는 정규표현식보단 <a href="/ko/docs/Web/API/URL_API">URL API</a>를 통해 브라우저에 내장된 URL 구문 분석기를 사용하는 것이 좋습니다.</p> +</div> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-regexp-regular-expression-objects', 'RegExp')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<div>{{Compat("javascript.builtins.RegExp")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Guide/Regular_Expressions">JavaScript 안내서의 정규 표현식 장</a></li> + <li>{{jsxref("String.prototype.match()")}}</li> + <li>{{jsxref("String.prototype.replace()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/regexp/n/index.html b/files/ko/web/javascript/reference/global_objects/regexp/n/index.html new file mode 100644 index 0000000000..5b6706cad2 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/regexp/n/index.html @@ -0,0 +1,66 @@ +--- +title: RegExp.$1-$9 +slug: Web/JavaScript/Reference/Global_Objects/RegExp/n +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/n +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>비표준 <strong>$1, $2, $3, $4, $5, $6, $7, $8, $9 </strong>속성들은 정적이며, 괄호로 묶인 하위 문자열 match들을 포함하는 정규 표현식의 읽기 전용 속성들입니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>RegExp</var>.$1 +RegExp.$2</code> +RegExp.$3 +RegExp.$4 +RegExp.$5 +RegExp.$6 +RegExp.$7 +RegExp.$8 +RegExp.$9 +</pre> + +<h2 id="Description">Description</h2> + +<p>$1, ..., $9 properties are static, they are not a property of an individual regular expression object. Instead, you always use them as <code>RegExp.$1</code>, ..., <code>RegExp.$9</code>.</p> + +<p>The values of these properties are read-only and modified whenever successful matches are made.</p> + +<p>The number of possible parenthesized substrings is unlimited, but the <code>RegExp</code> object can only hold the first nine. You can access all parenthesized substrings through the returned array's indexes.</p> + +<p>These properties can be used in the replacement text for the {{jsxref("String.replace")}} method. When used this way, do not prepend them with <code>RegExp</code>. The example below illustrates this. When parentheses are not included in the regular expression, the script interprets <code>$n</code>'s literally (where <code>n</code> is a positive integer).</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_n_with_String.replace">Using <code>$n</code> with <code>String.replace</code></h3> + +<p>아래의 script는 first last 포맷의 이름과 매치하기 위해 {{jsxref("String")}} 인스턴스의 {{jsxref("String.prototype.replace()", "replace()")}} 메소드를 사용하고 그것을 last, first 포맷으로 출력한다. 대체 텍스트에서, 이 script는 정규 표현식 패턴에서 매칭되는 괄호들에 해당하는 결과들을 나타내는 <code>$1</code> 과 <code>$2</code> 를 사용한다.</p> + +<pre class="brush: js">var re = /(\w+)\s(\w+)/; +var str = 'John Smith'; +str.replace(re, '$2, $1'); // "Smith, John" +RegExp.$1; // "John" +RegExp.$2; // "Smith" +</pre> + +<h2 id="Specifications">Specifications</h2> + +<p>Non-standard. Not part of any current specification.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.RegExp.n")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}</li> + <li>{{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&)")}}</li> + <li>{{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}</li> + <li>{{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}</li> + <li>{{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/regexp/regexp/index.html b/files/ko/web/javascript/reference/global_objects/regexp/regexp/index.html new file mode 100644 index 0000000000..387b5bceff --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/regexp/regexp/index.html @@ -0,0 +1,114 @@ +--- +title: RegExp() constructor +slug: Web/JavaScript/Reference/Global_Objects/RegExp/RegExp +tags: + - Constructor + - JavaScript + - Reference + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/RegExp +--- +<div>{{JSRef}}</div> + +<p><strong><code>RegExp</code></strong> 생성자는 패턴을 사용해 텍스트를 판별할 때 사용하는 정규 표현식 객체를 생성합니다.</p> + +<p>정규 표현식에 대한 소개는 <a href="/ko/docs/Web/JavaScript/Guide/Regular_Expressions">JavaScript 안내서의 정규 표현식 장</a>을 참고하세요.</p> + +<div>{{EmbedInteractiveExample("pages/js/regexp-constructor.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<p>리터럴, 생성자, 팩토리 표기법이 가능합니다.</p> + +<pre class="syntaxbox notranslate">/<var>pattern</var>/<var>flags</var> +new RegExp(<var>pattern</var>[, <var>flags</var>]) +RegExp(<var>pattern</var>[, <var>flags</var>]) +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code><var>pattern</var></code></dt> + <dd>정규 표현식을 나타내는 텍스트.</dd> + <dd>ES5부터는, 생성자 표기법에 한정하여 다른 <code>RegExp</code> 객체 혹은 리터럴을 사용할 수 있습니다. 패턴은 <a href="/ko/docs/Web/JavaScript/Guide/정규식#특수_문자_사용하기">특수 문자</a>를 포함할 수 있어서 일반적인 문자열 리터럴보다 더 넓은 범위의 값을 판별할 수 있습니다.</dd> + <dt><code><var>flags</var></code></dt> + <dd> + <p>정규 표현식에 추가할 플래그.</p> + + <p>정규 표현식 객체를 패턴으로 제공한 경우 <code><var>flags</var></code> 문자열은 제공한 객체의 플래그를 모두 대체하며 <code>lastIndex</code>를 <code>0</code>으로 초기화합니다. (ES2015 이후)</p> + + <p><code><var>flags</var></code>를 지정하지 않았으면서 정규 표현식 객체를 제공한 경우, 해당 객체의 플래그와 <code>lastIndex</code>를 복제합니다.</p> + + <p><code>flags</code>는 다음 문자를 조합하여 지정할 수 있습니다.</p> + + <dl> + <dt><code>g</code> (global, 전역 판별)</dt> + <dd>처음 일치에서 중단하지 않고, 문자열 전체를 판별합니다.</dd> + <dt><code>i</code> (ignore case, 대소문자 무시)</dt> + <dd><code>u</code> 플래그까지 활성화된 경우, Unicode 대소문자 폴딩을 사용합니다.</dd> + <dt><code>m</code> (multiline, 여러 줄)</dt> + <dd>시작과 끝 문자(<code>^</code>과 <code>$</code>)가 여러 줄에 걸쳐 동작합니다. 즉, 전체 입력 문자열의 맨 처음과 맨 끝 뿐만 아니라 (<code>\n</code>이나 <code>\r</code>로 구분되는) <u>각각의</u> 줄의 처음과 끝도 일치합니다.</dd> + <dt><code>s</code> ("dotAll")</dt> + <dd><code>.</code>이 줄 바꿈에도 일치합니다.</dd> + <dt><code>u</code> (unicode)</dt> + <dd><code><var>pattern</var></code>을 Unicode 코드 포인트 시퀀스로 처리합니다. (<a href="/ko/docs/Web/API/DOMString/Binary">이진 문자열</a> 참고)</dd> + <dt><code>y</code> (sticky, 접착)</dt> + <dd>이 정규 표현식의 <code>lastIndex</code> 속성에 명시된 인덱스에서만 판별하고, 이전/이후 인덱스에서 판별을 시도하지 않습니다.</dd> + </dl> + </dd> +</dl> + +<h2 id="예제">예제</h2> + +<h3 id="리터럴_표기법과_생성자">리터럴 표기법과 생성자</h3> + +<p><code>RegExp</code> 객체는 리터럴 표기법과 생성자로써 생성할 수 있습니다.</p> + +<ul> + <li><strong>리터럴 표기법</strong>의 매개변수는 두 빗금으로 감싸야 하며 따옴표를 사용하지 않습니다.</li> + <li><strong>생성자 함수</strong>의 매개변수는 빗금으로 감싸지 않으나 따옴표를 사용합니다.</li> +</ul> + +<p>다음의 세 표현식은 모두 같은 정규 표현식을 생성합니다.</p> + +<pre class="brush: js notranslate">/ab+c/i +new RegExp(/ab+c/, 'i') // 리터럴 +new RegExp('ab+c', 'i') // 생성자 +</pre> + +<p>리터럴 표기법은 표현식을 평가할 때 정규 표현식을 컴파일합니다. 정규 표현식이 변하지 않으면 리터럴 표기법을 사용하세요. 예를 들어, 반복문 안에서 사용할 정규 표현식을 리터럴 표기법으로 생성하면 정규 표현식을 매번 다시 컴파일하지 않습니다.</p> + +<p>정규 표현식 객체의 생성자(<code>new RegExp('ab+c')</code>)를 사용하면 정규 표현식이 런타임에 컴파일됩니다. 패턴이 변할 가능성이 있거나, 사용자 입력과 같이 알 수 없는 외부 소스에서 가져오는 정규 표현식의 경우 생성자 함수를 사용하세요.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-regexp-constructor', 'RegExp constructor')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("javascript.builtins.RegExp.RegExp")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Guide/Regular_Expressions">JavaScript 안내서의 정규 표현식 장</a></li> + <li>{{jsxref("String.prototype.match()")}}</li> + <li>{{jsxref("String.prototype.replace()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/regexp/test/index.html b/files/ko/web/javascript/reference/global_objects/regexp/test/index.html new file mode 100644 index 0000000000..07569e7eaf --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/regexp/test/index.html @@ -0,0 +1,129 @@ +--- +title: RegExp.prototype.test() +slug: Web/JavaScript/Reference/Global_Objects/RegExp/test +tags: + - JavaScript + - Method + - Prototype + - Reference + - RegExp + - 정규 표현식 + - 정규식 +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/test +--- +<div>{{JSRef}}</div> + +<p><strong><code>test()</code></strong> 메서드는 주어진 문자열이 정규 표현식을 만족하는지 판별하고, 그 여부를 <code>true</code> 또는 <code>false</code>로 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-test.html", "taller")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate"><var>regexObj</var>.test(<var>str</var>)</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code><var>str</var></code></dt> + <dd>정규 표현식 일치를 수행할 문자열.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 문자열 <code>str</code> 중 정규 표현식이 일치하는 부분이 있으면 <code>true</code>, 아니면, <code>false</code>.</p> + +<h2 id="설명">설명</h2> + +<p>패턴이 문자열 내에 존재하는지에 대한 여부를 알아보고자 할 때 <code>test()</code>를 사용하세요. 일치의 위치 인덱스, 또는 일치하지 않으면 <code>-1</code>을 반환하는 {{jsxref("String.prototype.search()")}}와 달리 <code>test()</code>는 불리언을 반환합니다.</p> + +<p>더 느리지만 더 많은 정보가 필요하면 {{jsxref("RegExp.prototype.exec()", "exec()")}} 메서드를 사용하세요. ({{jsxref("String.prototype.match()")}} 메서드와 비슷합니다.)</p> + +<p><code>exec()</code>처럼, <code>test()</code>도 전역 탐색 플래그를 제공한 정규 표현식에서 여러 번 호출하면 이전 일치 이후부터 탐색합니다. <code>exec()</code>와 <code>test()</code>를 혼용해 사용하는 경우에도 해당됩니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="test_사용하기"><code>test()</code> 사용하기</h3> + +<p>문자열의 맨 처음에 <code>"hello"</code>가 포함됐는지 알아보는 간단한 예제 코드입니다.</p> + +<pre class="brush: js notranslate">const str = 'hello world!'; +const result = /^hello/.test(str); + +console.log(result); // true +</pre> + +<p>다음은 일치 여부에 따라 다른 메시지를 기록하는 예제입니다.</p> + +<pre class="brush: js notranslate">function testInput(re, str) { + let midstring; + if (re.test(str)) { + midstring = 'contains'; + } else { + midstring = 'does not contain'; + } + console.log(`${str} ${midstring} ${re.source}`); +} +</pre> + +<h3 id="전역_플래그와_test">전역 플래그와 <code>test()</code></h3> + +<p>정규 표현식에 <a href="/ko/docs/Web/JavaScript/Guide/Regular_Expressions#플래그를_사용한_고급검색">전역 플래그</a>를 설정한 경우, <code>test()</code> 메서드는 정규 표현식의 {{jsxref("RegExp.lastIndex", "lastIndex")}}를 업데이트합니다. ({{jsxref("RegExp.prototype.exec()")}}도 <code>lastIndex</code> 속성을 업데이트합니다.)</p> + +<p><code>test(<var>str</var>)</code>을 또 호출하면 <code><var>str</var></code> 검색을 <code>lastIndex</code>부터 계속 진행합니다. <code>lastIndex</code> 속성은 매 번 <code>test()</code>가 <code>true</code>를 반환할 때마다 증가하게 됩니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> <code>test()</code>가 <code>true</code>를 반환하기만 하면 <code>lastIndex</code>는 초기화되지 않습니다. 심지어 이전과 다른 문자열을 매개변수로 제공해도 그렇습니다!</p> +</div> + +<p><code>test()</code>가 <code>false</code>를 반환할 땐 <code>lastIndex</code> 속성이 <code>0</code>으로 초기화됩니다.</p> + +<p>이 행동에 대한 예제가 다음 코드입니다.</p> + +<pre class="brush: js notranslate">const regex = /foo/g; // the "global" flag is set + +// regex.lastIndex is at 0 +regex.test('foo') // true + +// regex.lastIndex is now at 3 +regex.test('foo') // false + +// regex.lastIndex is at 0 +regex.test('barfoo') // true + +// regex.lastIndex is at 6 +regex.test('foobar') //false + +// regex.lastIndex is at 0 +// (...and so on) +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-regexp.prototype.test', 'RegExp.test')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.RegExp.test")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Guide/Regular_Expressions">JavaScript 안내서의 정규 표현식 장</a></li> + <li>{{jsxref("RegExp")}}</li> + <li>{{jsxref("RegExp.prototype")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/set/add/index.html b/files/ko/web/javascript/reference/global_objects/set/add/index.html new file mode 100644 index 0000000000..622b3d876c --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/set/add/index.html @@ -0,0 +1,83 @@ +--- +title: Set.prototype.add() +slug: Web/JavaScript/Reference/Global_Objects/Set/add +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Prototype + - Reference + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set/add +--- +<div>{{JSRef}}</div> + +<p><code><strong>add()</strong></code> 메서드는 <code>Set</code> 개체의 맨 뒤에 주어진 <code>value</code>의 새 요소를 추가합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/set-prototype-add.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><em>mySet</em>.add(<em>value</em>);</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>value</code></dt> + <dd><code>Set</code> 객체에 추가할 요소의 값.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p><code>Set</code> 객체.</p> + +<h2 id="예제">예제</h2> + +<h3 id="add_메서드_사용하기"><code>add</code> 메서드 사용하기</h3> + +<pre class="brush: js">var mySet = new Set(); + +mySet.add(1); +mySet.add(5).add('어떤 문자열'); // 계속 붙일 수 있음 + +console.log(mySet); +// Set [1, 5, "어떤 문자열"] +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-set.prototype.add', 'Set.prototype.add')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>최초 정의</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-set.prototype.add', 'Set.prototype.add')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">본 페이지의 호환성 표는 구조화된 데이터로부터 생성되었습니다. 만약 당신이 데이터에 기여를 원한다면 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>를 체크아웃하고 우리에게 pull request를 보내주세요.</div> + +<p>{{Compat("javascript.builtins.Set.add")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("Set.prototype.delete()")}}</li> + <li>{{jsxref("Set.prototype.has()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/set/clear/index.html b/files/ko/web/javascript/reference/global_objects/set/clear/index.html new file mode 100644 index 0000000000..3ecdb98895 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/set/clear/index.html @@ -0,0 +1,76 @@ +--- +title: Set.prototype.clear() +slug: Web/JavaScript/Reference/Global_Objects/Set/clear +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Prototype + - Reference + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set/clear +--- +<div>{{JSRef}}</div> + +<p><code><strong>clear()</strong></code> 메서드는 <code>Set</code> 객체를 비웁니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/set-prototype-clear.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><em>mySet</em>.clear(); +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="clear()_사용하기"><code>clear()</code> 사용하기</h3> + +<pre class="brush: js">var mySet = new Set(); +mySet.add(1); +mySet.add('foo'); + +mySet.size; // 2 +mySet.has('foo'); // true + +mySet.clear(); + +mySet.size; // 0 +mySet.has('bar') // false +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-set.prototype.clear', 'Set.prototype.clear')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-set.prototype.clear', 'Set.prototype.clear')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Set.clear")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("Set.prototype.delete()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/set/delete/index.html b/files/ko/web/javascript/reference/global_objects/set/delete/index.html new file mode 100644 index 0000000000..a138736b46 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/set/delete/index.html @@ -0,0 +1,98 @@ +--- +title: Set.prototype.delete() +slug: Web/JavaScript/Reference/Global_Objects/Set/delete +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Prototype + - Reference + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set/delete +--- +<div>{{JSRef}}</div> + +<p><code><strong>delete()</strong></code> 메서드는 지정한 요소를 <code>Set</code> 객체에서 제거합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/set-prototype-delete.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><em>mySet</em>.delete(<em>value</em>);</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>value</code></dt> + <dd><code>Set</code> 객체에서 제거할 요소의 값.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>요소를 제거했으면 <code>true</code>, 아니면 <code>false</code>.</p> + +<h2 id="예제">예제</h2> + +<h3 id="delete()_사용하기"><code>delete()</code> 사용하기</h3> + +<pre class="brush: js">var mySet = new Set(); +mySet.add('foo'); + +mySet.delete('bar'); // Returns false. No "bar" element found to be deleted. +mySet.delete('foo'); // Returns true. Successfully removed. + +mySet.has('foo'); // Returns false. The "foo" element is no longer present. +</pre> + +<p>다음 예제는 <code>Set</code>에서 객체를 제거하는 방법을 보입니다.</p> + +<pre class="brush: js">var setObj = new Set(); // Create a New Set. + +setObj.add({x: 10, y: 20}); // Add object in the set. + +setObj.add({x: 20, y: 30}); // Add object in the set. + +// Delete any point with `x > 10`. +setObj.forEach(function(point){ + if(point.x > 10){ + setObj.delete(point) + } +}) +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-set.prototype.delete', 'Set.prototype.delete')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-set.prototype.delete', 'Set.prototype.delete')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Set.delete")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("Set.prototype.clear()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/set/foreach/index.html b/files/ko/web/javascript/reference/global_objects/set/foreach/index.html new file mode 100644 index 0000000000..fbfa4963c5 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/set/foreach/index.html @@ -0,0 +1,117 @@ +--- +title: Set.prototype.forEach() +slug: Web/JavaScript/Reference/Global_Objects/Set/forEach +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Prototype + - Reference + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set/forEach +--- +<div>{{JSRef}}</div> + +<p><code><strong>forEach()</strong></code> 메서드는 주어진 함수를 <code>Set</code> 요소 각각에 대해 삽입 순서대로 실행합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/set-prototype-foreach.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><em>mySet</em>.forEach(<em>callback</em>[, <var>thisArg</var>]<code>)</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>각 요소에 대해 실행할 함수. 다음 세 가지 인수를 받습니다.</dd> + <dd> + <dl> + <dt><code>currentValue</code>, <code>currentKey</code></dt> + <dd>처리할 현재 요소. <code>Set</code>은 키를 갖지 않으므로 두 인수 모두에 값을 전달합니다.</dd> + <dt><code>set</code></dt> + <dd><code>forEach()</code>를 호출한 <code>Set</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code></dt> + <dd><code>callback</code>을 실행할 때 <code>this</code>로 사용할 값.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="설명">설명</h2> + +<p><code>forEach()</code> 메서드는 주어진 <code>callback</code>을 <code>Set</code>에 존재하는 요소에 대해 한 번씩 실행합니다. 삭제한 값에 대해선 실행하지 않습니다. 그러나 존재하되 값이 {{jsxref("undefined")}}인 경우엔 실행합니다.</p> + +<p><code>callback</code>은 다음 세 인수와 함께 호출됩니다.</p> + +<ul> + <li><strong>요소 값</strong></li> + <li><strong>요소 키</strong></li> + <li><strong>순회 중인 <code>Set</code> 객체</strong></li> +</ul> + +<p>그러나 <code>Set</code>은 키 값을 사용하지 않으므로, 처음 두 개의 매개변수 모두 <strong>요소 값</strong>을 받습니다. 이는 {{jsxref("Map.foreach", "Map")}}과 {{jsxref("Array.forEach","Array")}}에서 사용하는 <code>forEach()</code>와 동일한 형태를 유지하기 위해서입니다.</p> + +<p><code>thisArg</code> 매개변수를 <code>forEach()</code>에 제공한 경우 <code>callback</code>을 호출할 때 전달해 <code>this</code>의 값으로 쓰입니다. 전달하지 않으면 <code>undefined</code>를 사용하며, 최종 <code>this</code> 값은 {{jsxref("Operators/this", "함수의 <code>this</code>를 결정하는 평소 규칙", "", 0)}}을 따릅니다.</p> + +<p><code>forEach()</code>는 각각의 값을 한 번씩 방문하지만, 순회를 끝내기 전에 제거하고 다시 추가한 값은 예외입니다. 방문하기 전 제거한 값에 대해서는 <code>callback</code>을 호출하지 않습니다. <code>forEach()</code>가 끝나기 전 추가한 요소는 방문합니다.</p> + +<p><code>forEach()</code>는 <code>Set</code> 객체의 요소에 대해 <code>callback</code>을 실행만 하며 값을 반환하지는 않습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Set의_내용물_기록하기"><code>Set</code>의 내용물 기록하기</h3> + +<p>다음 코드는 <code>Set</code>의 요소 각각을 새로운 줄에 기록합니다.</p> + +<pre class="brush:js">function logSetElements(value1, value2, set) { + console.log('s[' + value1 + '] = ' + value2); +} + +new Set(['foo', 'bar', undefined]).forEach(logSetElements); + +// 콘솔 로그: +// "s[foo] = foo" +// "s[bar] = bar" +// "s[undefined] = undefined" +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-set.prototype.foreach', 'Set.prototype.forEach')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-set.prototype.foreach', 'Set.prototype.forEach')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Set.forEach")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Map.prototype.forEach()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/set/has/index.html b/files/ko/web/javascript/reference/global_objects/set/has/index.html new file mode 100644 index 0000000000..016da46cfd --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/set/has/index.html @@ -0,0 +1,93 @@ +--- +title: Set.prototype.has() +slug: Web/JavaScript/Reference/Global_Objects/Set/has +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Prototype + - Reference + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set/has +--- +<div>{{JSRef}}</div> + +<p><code><strong>has()</strong></code> 메서드는 <code>Set</code> 객체에 주어진 요소가 존재하는지 여부를 판별해 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/set-prototype-has.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><em>mySet</em>.has(<em>value</em>);</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>value</code></dt> + <dd><code>Set</code> 객체에서 존재 여부를 판별할 값.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p><code>Set</code> 객체에 값이 존재하면 <code>true</code>, 아니면 <code>false</code>.</p> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> 기술적으로, <code>has()</code>는 <a href="/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness#등가0_같음"><code>sameValueZero</code></a> 알고리즘을 사용해 요소의 존재 여부를 판별합니다.</p> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="has()_사용하기"><code>has()</code> 사용하기</h3> + +<pre class="brush: js">var mySet = new Set(); +mySet.add('foo'); + +mySet.has('foo'); // true +mySet.has('bar'); // false + +var set1 = new Set(); +var obj1 = {'key1': 1}; +set1.add(obj1); + +set1.has(obj1); // true +set1.has({'key1': 1}); // false, 형태만 같은 서로 다른 객체의 참조이기 때문 +set1.add({'key1': 1}); // set1의 요소가 2개로 늘어남 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-set.prototype.has', 'Set.prototype.has')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-set.prototype.has', 'Set.prototype.has')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Set.has")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("Set.prototype.add()")}}</li> + <li>{{jsxref("Set.prototype.delete()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/set/index.html b/files/ko/web/javascript/reference/global_objects/set/index.html new file mode 100644 index 0000000000..b8086f89bd --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/set/index.html @@ -0,0 +1,237 @@ +--- +title: Set +slug: Web/JavaScript/Reference/Global_Objects/Set +tags: + - ECMAScript 2015 + - Global Objects + - JavaScript + - Object + - Reference + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set +--- +<div>{{JSRef}}</div> + +<p><strong><code>Set</code></strong> 객체는 자료형에 관계 없이 {{Glossary("Primitive", "원시 값")}}과 객체 참조 모두 유일한 값을 저장할 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/set-prototype-constructor.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">new Set([<em>iterable</em>]);</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>iterable</code></dt> + <dd><a href="/ko/docs/Web/JavaScript/Reference/Statements/for...of">반복 가능한 객체</a>가 전달된 경우, 그 요소는 모두 새로운 <code>Set</code>에 추가됩니다. 만약 매개변수를 명시하지 않거나 <code>null</code>을 전달하면, 새로운 <code>Set</code>은 비어 있는 상태가 됩니다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>새로운 <code>Set</code> 객체.</p> + +<h2 id="설명">설명</h2> + +<p><code>Set</code> 객체는 값 콜렉션으로, 삽입 순서대로 요소를 순회할 수 있습니다. 하나의 <code>Set</code> 내 값은 한 번만 나타날 수 있습니다. 즉, 어떤 값은 그 <code>Set</code> 콜렉션 내에서 유일합니다.</p> + +<h3 id="값_같음">값 같음</h3> + +<p><code>Set</code> 내의 값은 유일해야 하기 때문에 값이 같은지 검사를 수행합니다. 이전 ECMAScript 명세에서는 검사 알고리즘이 <code>===</code> 연산자와는 다른 것이었습니다. 특히, <code>+0 === -0</code>이었지만 <code>Set</code>에서는 <code>+0</code>과 <code>-0</code>이 다른 값이었습니다. 그러나 이는 ECMAScript 2015 명세에서 변경되었습니다. {{anch("브라우저 호환성", "브라우저 호환성")}}의 "Key equality for -0 and 0"을 참고하세요.</p> + +<p>{{jsxref("NaN")}}과 {{jsxref("undefined")}}도 <code>Set</code>에 저장할 수 있습니다. 원래 <code>NaN !== NaN</code>이지만, <code>Set</code>에서 <code>NaN</code>은 <code>NaN</code>과 같은 것으로 간주됩니다.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>Set.length</code></dt> + <dd>값이 0인 속성입니다.</dd> + <dt>{{jsxref("Set.@@species", "get Set[@@species]")}}</dt> + <dd>파생 객체를 생성하는데 사용하는 생성자 함수입니다.</dd> + <dt>{{jsxref("Set.prototype")}}</dt> + <dd><code>Set</code> 생성자의 프로토타입을 나타냅니다. 모든 <code>Set</code> 객체에 속성을 추가할 수 있습니다.</dd> +</dl> + +<h2 id="Set_인스턴스"><code>Set</code> 인스턴스</h2> + +<p>모든 <code>Set</code> 인스턴스는 {{jsxref("Set.prototype")}}을 상속받습니다.</p> + +<h3 id="속성_2">속성</h3> + +<p>{{page('ko/docs/Web/JavaScript/Reference/Global_Objects/Set/prototype','속성')}}</p> + +<h3 id="메서드">메서드</h3> + +<p>{{page('ko/docs/Web/JavaScript/Reference/Global_Objects/Set/prototype','메서드')}}</p> + +<h2 id="예제">예제</h2> + +<h3 id="Set_객체_사용"><code>Set</code> 객체 사용</h3> + +<pre class="brush: js">var mySet = new Set(); + +mySet.add(1); // Set { 1 } +mySet.add(5); // Set { 1, 5 } +mySet.add(5); // Set { 1, 5 } +mySet.add('some text'); // Set { 1, 5, 'some text' } +var o = {a: 1, b: 2}; +mySet.add(o); + +mySet.add({a: 1, b: 2}); // o와 다른 객체를 참조하므로 괜찮음 + +mySet.has(1); // true +mySet.has(3); // false, 3은 set에 추가되지 않았음 +mySet.has(5); // true +mySet.has(Math.sqrt(25)); // true +mySet.has('Some Text'.toLowerCase()); // true +mySet.has(o); // true + +mySet.size; // 5 + +mySet.delete(5); // set에서 5를 제거함 +mySet.has(5); // false, 5가 제거되었음 + +mySet.size; // 4, 방금 값을 하나 제거했음 +console.log(mySet);// Set {1, "some text", Object {a: 1, b: 2}, Object {a: 1, b: 2}} +</pre> + +<h3 id="Set_반복">Set 반복</h3> + +<pre class="brush: js">// set 내 항목에 대해 반복 +// 순서대로 항목을 (콘솔에) 기록: 1, "some text", {"a": 1, "b": 2} +for (let item of mySet) console.log(item); + +// 순서대로 항목을 기록: 1, "some text", {"a": 1, "b": 2} +for (let item of mySet.keys()) console.log(item); + +// 순서대로 항목을 기록: 1, "some text", {"a": 1, "b": 2} +for (let item of mySet.values()) console.log(item); + +// 순서대로 항목을 기록: 1, "some text", {"a": 1, "b": 2} +// (여기서 key와 value는 같음) +for (let [key, value] of mySet.entries()) console.log(key); + +// Set 객체를 배열 객체로 변환 (<a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from">Array.from</a>으로) +var myArr = Array.from(mySet); // [1, "some text", {"a": 1, "b": 2}] + +// 다음도 HTML 문서에서 실행하는 경우 작동함 +mySet.add(document.body); +mySet.has(document.querySelector('body')); // true + +// Set과 Array 사이 변환 +mySet2 = new Set([1, 2, 3, 4]); +mySet2.size; // 4 +[...mySet2]; // [1, 2, 3, 4] + +// 교집합은 다음으로 흉내(simulate)낼 수 있음 +var intersection = new Set([...set1].filter(x => set2.has(x))); + +// 차집합은 다음으로 흉내낼 수 있음 +var difference = new Set([...set1].filter(x => !set2.has(x))); + +// forEach로 set 항목 반복 +mySet.forEach(function(value) { + console.log(value); +}); + +// 1 +// 2 +// 3 +// 4</pre> + +<h3 id="기본_집합_연산_구현">기본 집합 연산 구현</h3> + +<pre class="brush: js">Set.prototype.isSuperset = function(subset) { + for (var elem of subset) { + if (!this.has(elem)) { + return false; + } + } + return true; +} + +Set.prototype.union = function(setB) { + var union = new Set(this); + for (var elem of setB) { + union.add(elem); + } + return union; +} + +Set.prototype.intersection = function(setB) { + var intersection = new Set(); + for (var elem of setB) { + if (this.has(elem)) { + intersection.add(elem); + } + } + return intersection; +} + +Set.prototype.difference = function(setB) { + var difference = new Set(this); + for (var elem of setB) { + difference.delete(elem); + } + return difference; +} + +//Examples +var setA = new Set([1, 2, 3, 4]), + setB = new Set([2, 3]), + setC = new Set([3, 4, 5, 6]); + +setA.isSuperset(setB); // => true +setA.union(setC); // => Set [1, 2, 3, 4, 5, 6] +setA.intersection(setC); // => Set [3, 4] +setA.difference(setC); // => Set [1, 2]</pre> + +<h3 id="Array_객체와의_관계"><code>Array</code> 객체와의 관계</h3> + +<pre class="brush: js">var myArray = ['value1', 'value2', 'value3']; + +// Array를 Set으로 변환하기 위해서는 정규 Set 생성자 사용 +var mySet = new Set(myArray); + +mySet.has('value1'); // true 반환 + +// set을 Array로 변환하기 위해 전개 연산자 사용함. +console.log([...mySet]); // myArray와 정확히 같은 배열을 보여줌</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-set-objects', 'Set')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-set-objects', 'Set')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Set")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Map")}}</li> + <li>{{jsxref("WeakMap")}}</li> + <li>{{jsxref("WeakSet")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/set/prototype/index.html b/files/ko/web/javascript/reference/global_objects/set/prototype/index.html new file mode 100644 index 0000000000..ca6e568bed --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/set/prototype/index.html @@ -0,0 +1,86 @@ +--- +title: Set.prototype +slug: Web/JavaScript/Reference/Global_Objects/Set/prototype +tags: + - ECMAScript 2015 + - JavaScript + - Property + - Reference + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set +--- +<div>{{JSRef}}</div> + +<p><code><strong>Set.prototype</strong></code> 속성은 {{jsxref("Set")}} 생성자의 프로토타입을 나타냅니다.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="설명">설명</h2> + +<p>{{jsxref("Set")}} 인스턴스는 {{jsxref("Set.prototype")}}에서 상속합니다. 모든 <code>Set</code> 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있습니다.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>Set.prototype.constructor</code></dt> + <dd>인스턴스의 프로토타입을 만든 함수를 반환합니다. 이는 기본으로 {{jsxref("Set")}} 함수입니다.</dd> + <dt>{{jsxref("Set.prototype.size")}}</dt> + <dd><code>Set</code> 객체 내 값의 개수를 반환합니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("Set.add", "Set.prototype.add(value)")}}</dt> + <dd><code>Set</code> 객체에 주어진 값을 갖는 새로운 요소를 추가합니다. <code>Set</code> 객체를 반환합니다.</dd> + <dt>{{jsxref("Set.prototype.clear()")}}</dt> + <dd><code>Set</code> 객체에서 모든 요소를 제거합니다.</dd> + <dt>{{jsxref("Set.delete", "Set.prototype.delete(value)")}}</dt> + <dd><code>value</code>와 관련된 요소를 제거하고 <code>Set.prototype.has(value)</code>가 이전에 반환했던 값을 반환합니다. <code>Set.prototype.has(value)</code>는 그 뒤에 <code>false</code>를 반환합니다.</dd> + <dt>{{jsxref("Set.prototype.entries()")}}</dt> + <dd>삽입 순으로 <code>Set</code> 객체 내 각 값에 대한 <strong><code>[value, value]</code> 배열</strong>을 포함하는 새로운 <code>Iterator</code> 객체를 반환합니다. 이는 <code>Map</code> 객체와 비슷하게 유지되므로 여기서 각 항목은 그 <em>key</em>와 <em>value</em>에 대해 같은 값을 갖습니다.</dd> + <dt>{{jsxref("Set.forEach", "Set.prototype.forEach(callbackFn[, thisArg])")}}</dt> + <dd>삽입 순으로 <code>Set</code> 객체 내에 있는 각 값에 대해 한 번 <code>callbackFn</code>을 호출합니다. <code>thisArg</code> 매개변수가 <code>forEach</code>에 제공된 경우, 이는 각 콜백에 대해 <code>this</code> 값으로 사용됩니다.</dd> + <dt>{{jsxref("Set.has", "Set.prototype.has(value)")}}</dt> + <dd><code>Set</code> 객체 내 주어진 값을 갖는 요소가 있는지를 주장하는(asserting, 나타내는) boolean을 반환합니다.</dd> + <dt>{{jsxref("Set.prototype.keys()")}}</dt> + <dd><strong><code>values()</code></strong> 함수와 같은 함수로 삽입 순으로 <code>Set</code> 객체 내 각 요소에 대한 값을 포함하는 새로운 <code>Iterator</code> 객체를 반환합니다.</dd> + <dt>{{jsxref("Set.prototype.values()")}}</dt> + <dd>삽입 순으로 <code>Set</code> 객체 내 각 요소에 대한 <strong>값</strong>을 포함하는 새로운 <code>Iterator</code> 객체를 반환합니다.</dd> + <dt>{{jsxref("Set.prototype.@@iterator()", "Set.prototype[@@iterator]()")}}</dt> + <dd>삽입 순으로 <code>Set</code> 객체 내 각 요소에 대한 <strong>값</strong>을 포함하는 새로운 <code>Iterator</code> 객체를 반환합니다.</dd> +</dl> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-set.prototype', 'Set.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-set.prototype', 'Set.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Set.prototype")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Map.prototype")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/set/size/index.html b/files/ko/web/javascript/reference/global_objects/set/size/index.html new file mode 100644 index 0000000000..2f437bed4a --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/set/size/index.html @@ -0,0 +1,69 @@ +--- +title: Set.prototype.size +slug: Web/JavaScript/Reference/Global_Objects/Set/size +tags: + - ECMAScript 2015 + - JavaScript + - Property + - Prototype + - Reference + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set/size +--- +<div>{{JSRef}}</div> + +<p><code><strong>size</strong></code> 접근자 속성은 {{jsxref("Set")}} 객체의 원소 수를 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/set-prototype-size.html")}}</div> + + + +<h2 id="설명">설명</h2> + +<p><code>size</code>의 값은 <code>Set</code> 객체가 가진 원소의 수를 나타내는 정수입니다. <code>size</code> 값의 설정자는 {{jsxref("undefined")}}입니다. 즉 값을 직접 바꿀 수는 없습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="size_사용하기"><code>size</code> 사용하기</h3> + +<pre class="brush:js">var mySet = new Set(); +mySet.add(1); +mySet.add(5); +mySet.add('some text') + +mySet.size; // 3 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-get-set.prototype.size', 'Set.prototype.size')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-get-set.prototype.size', 'Set.prototype.size')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Set.size")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Set")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/set/values/index.html b/files/ko/web/javascript/reference/global_objects/set/values/index.html new file mode 100644 index 0000000000..37e019e3da --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/set/values/index.html @@ -0,0 +1,72 @@ +--- +title: Set.prototype.values() +slug: Web/JavaScript/Reference/Global_Objects/Set/values +translation_of: Web/JavaScript/Reference/Global_Objects/Set/values +--- +<div>{{JSRef}}</div> + +<p><code><strong>values()</strong></code> method는 <code>Set<font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> 객체에 요소가 삽입된 순서대로 각 요소의 값을 순환할 수 있는 </span></font></code><code>Iterator</code> 객체를 반환합니다.</p> + +<p>The <strong><code>keys()</code></strong> method is an alias for this method (for similarity with {{jsxref("Map")}} objects); it behaves exactly the same and returns <strong>values</strong> of <code>Set</code> elements.</p> + +<div>{{EmbedInteractiveExample("pages/js/set-prototype-values.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><em>mySet</em>.values(); +</code></pre> + +<h3 id="Return_value">Return value</h3> + +<p>A new <code><strong>Iterator</strong></code> object containing the values for each element in the given <code>Set</code>, in insertion order.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_values()">Using <code>values()</code></h3> + +<pre class="brush:js">var mySet = new Set(); +mySet.add('foo'); +mySet.add('bar'); +mySet.add('baz'); + +var setIter = mySet.values(); + +console.log(setIter.next().value); // "foo" +console.log(setIter.next().value); // "bar" +console.log(setIter.next().value); // "baz"</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-set.prototype.values', 'Set.prototype.values')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-set.prototype.values', 'Set.prototype.values')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Set.values")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Set.prototype.entries()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/sharedarraybuffer/index.html b/files/ko/web/javascript/reference/global_objects/sharedarraybuffer/index.html new file mode 100644 index 0000000000..9919adb447 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/sharedarraybuffer/index.html @@ -0,0 +1,137 @@ +--- +title: SharedArrayBuffer +slug: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer +tags: + - Constructor + - JavaScript + - Shared Memory + - SharedArrayBuffer + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer +--- +<div>{{JSRef}}</div> + +<p><strong><code>SharedArrayBuffer</code></strong> 객체는 제네릭, 고정된 길이의 원시 바이너리 데이터 버퍼를 표현하는데 사용됩니다. {{jsxref("ArrayBuffer")}} 객체와 유사하지만, 공유된 메모리상의 뷰를 생성하는데 사용될 수 있습니다. <code>ArrayBuffer</code> 와는 달리, <code>SharedArrayBuffer</code> 는 분리될 수 없습니다.</p> + +<div class="blockIndicator note"> +<p><a href="https://meltdownattack.com/">Spectre</a> 에대한 응답으로 2018년 1월 5일에 <code>SharedArrayBuffer</code> 는 모든 주요 브라우저에서 기본적으로 비활성화되어있음을 참고하세요. Chrome 은 사이트 격리 기능을 사용하여 Spectre 스타일 취약점으로부터 보호될 수 있는 플랫폼상의 <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=821270">v67 에서 이를 다시 활성화</a>하였습니다.</p> +</div> + +<p>{{EmbedInteractiveExample("pages/js/sharedarraybuffer-constructor.html")}}</p> + +<div class="hidden"> +<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">new SharedArrayBuffer(length) +</pre> + +<h3 id="파라미터">파라미터</h3> + +<dl> + <dt><code>length</code></dt> + <dd>생성할 array buffer 의 바이트 크기.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>크기가 지정된 새로운 <code>SharedArrayBuffer</code> 객체입니다. 컨텐츠는 0 으로 초기화됩니다.</p> + +<h2 id="설명">설명</h2> + +<h3 id="할당_및_메모리_공유">할당 및 메모리 공유</h3> + +<p>{{jsxref("SharedArrayBuffer")}} 객체를 사용해 메모리를 하나의 agent(agent 는 웹 페이지의 메인 프로그램 또는 웹 워커 중 하나입니다)와 다른 agent 에서 공유하기 위해, <code><a href="https://developer.mozilla.org/ko/docs/Web/API/Worker/postMessage">postMessage</a></code> 와 <a href="https://developer.mozilla.org/ko/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">structured cloning</a> 이 사용됩니다.</p> + +<p>Structured clone 알고리즘은 <code>SharedArrayBuffer</code> 와 <code>SharedArrayBuffer</code> 상에 맵핑된 <code>TypedArray</code> 를 받아들입니다. 이 두 경우에서, <code>SharedArrayBuffer</code> 객체는 수신자(receiver)에게 전달되어 수신 agent(예, {{jsxref("ArrayBuffer")}})의 새로운 비공개의 SharedArrayBuffer 객체를 생성합니다. 하지만, 두 <code>SharedArrayBuffer</code> 에 의해 참조되는 공유 데이터 블록은 같은 블록이며, 부수적인 효과로, 하나의 agent 가 다른 agent 에서 보이게 됩니다.</p> + +<pre class="brush: js">var sab = new SharedArrayBuffer(1024); +worker.postMessage(sab); +</pre> + +<h3 id="Atomic_operation_으로_공유_메모리_수정_및_동기화">Atomic operation 으로 공유 메모리 수정 및 동기화</h3> + +<p>공유 메모리는 워커나 메인 스레드에서 동시에 수정 및 생성할 수 있습니다. 시스템(CPU, OS, 브라우저)에따라 변경사항이 전체 컨텍스트로 전파될때까지 약간의 시간이 필요합니다. 동기화를 위해선, {{jsxref("Atomics", "atomic", "", 1)}} 연산이 필요합니다.</p> + +<h3 id="SharedArrayBuffer_객체를_사용할_수_있는_API"><code>SharedArrayBuffer</code> 객체를 사용할 수 있는 API</h3> + +<ul> + <li>{{domxref("WebGLRenderingContext.bufferData()")}}</li> + <li>{{domxref("WebGLRenderingContext.bufferSubData()")}}</li> + <li>{{domxref("WebGL2RenderingContext.getBufferSubData()")}}</li> +</ul> + +<h3 id="생성자는_new_연산자를_필요로_함">생성자는 <code>new</code> 연산자를 필요로 함</h3> + +<p><code>SharedArrayBuffer</code> 생성자는 생성될 때, {{jsxref("Operators/new", "new")}} 연산자를 필요로 합니다. <code>SharedArrayBuffer</code> 생성자를 new 없이 함수로써 호출하면, {{jsxref("TypeError")}} 를 일으킬 것 입니다.</p> + +<pre class="brush: js example-bad">var sab = SharedArrayBuffer(1024); +// TypeError: calling a builtin SharedArrayBuffer constructor +// without new is forbidden</pre> + +<pre class="brush: js example-good">var sab = new SharedArrayBuffer(1024);</pre> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>SharedArrayBuffer.length</code></dt> + <dd>값이 1인 <code>SharedArrayBuffer</code> 생성자의 length 속성입니다.</dd> + <dt>{{jsxref("SharedArrayBuffer.prototype")}}</dt> + <dd>모든 <code>SharedArrayBuffer</code> 객체에 프로퍼티 추가를 가능하게 해줍니다.</dd> +</dl> + +<h2 id="SharedArrayBuffer_prototype_객체"><code>SharedArrayBuffer</code> prototype 객체</h2> + +<p>모든 <code>SharedArrayBuffer</code> 인스턴스는 {{jsxref("SharedArrayBuffer.prototype")}} 를 상속합니다.</p> + +<h3 id="속성_2">속성</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype','Properties')}}</p> + +<h3 id="메소드">메소드</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype','Methods')}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-sharedarraybuffer-objects', 'SharedArrayBuffer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>ES2017 에서 초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ES8', '#sec-sharedarraybuffer-objects', 'SharedArrayBuffer')}}</td> + <td>{{Spec2('ES8')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.SharedArrayBuffer")}}</p> + +<h2 id="함께_보기">함께 보기</h2> + +<ul> + <li>{{jsxref("Atomics")}}</li> + <li>{{jsxref("ArrayBuffer")}}</li> + <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li> + <li><a href="https://developer.mozilla.org/ko/docs/Web/API/Web_Workers_API">Web Workers</a></li> + <li><a href="https://github.com/lars-t-hansen/parlib-simple">parlib-simple </a>– 동기화 및 작업 분리 추상화를 제공하는 간단한 라이브러리.</li> + <li><a href="https://github.com/tc39/ecmascript_sharedmem/blob/master/TUTORIAL.md">Shared Memory – 간단한 튜토리얼</a></li> + <li> + <p><a href="https://hacks.mozilla.org/2016/05/a-taste-of-javascripts-new-parallel-primitives/">A Taste of JavaScript’s New Parallel Primitives – Mozilla Hacks</a></p> + </li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/sharedarraybuffer/prototype/index.html b/files/ko/web/javascript/reference/global_objects/sharedarraybuffer/prototype/index.html new file mode 100644 index 0000000000..3499bc77ed --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/sharedarraybuffer/prototype/index.html @@ -0,0 +1,65 @@ +--- +title: SharedArrayBuffer.prototype +slug: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype +tags: + - JavaScript + - SharedArrayBuffer + - TypedArrays + - 공유 메모리 + - 속성 +translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer +--- +<div>{{JSRef}}</div> + +<p><strong><code>SharedArrayBuffer.prototype</code></strong> 속성은 {{jsxref("SharedArrayBuffer")}} 객체를위한 프로토타입을 나타냅니다.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="설명">설명</h2> + +<p><code>SharedArrayBuffer</code> 인스턴스는 <code>SharedArrayBuffer.prototype</code> 을 상속합니다. 모든 생성자와 마찬가지로, 생성자의 프로토타입 객체를 변경하여 모든 <code>SharedArrayBuffer</code> 인스턴스에 변화를 줄 수 있습니다.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt>SharedArrayBuffer.prototype.constructor</dt> + <dd>객체의 프로토타입을 생성하는 함수를 지정합니다. 초기 값은 <code>SharedArrayBuffer</code> 생성자에 내장된 표준입니다.</dd> + <dt>{{jsxref("SharedArrayBuffer.prototype.byteLength")}} {{readonlyInline}}</dt> + <dd>배열의 바이트 크기입니다. 배열이 생성되고 수정이 불가할 때 지정됩니다. <strong>읽기 전용입니다.</strong></dd> +</dl> + +<h2 id="메소드">메소드</h2> + +<dl> + <dt>{{jsxref("SharedArrayBuffer.slice", "SharedArrayBuffer.prototype.slice(begin, end)")}}</dt> + <dd><code>begin</code> 부터 <code>end</code> 까지의 모든 것을 포함하는 <code>SharedArrayBuffer</code> 바이트의 복사본을 컨텐츠로 갖는 새로운 <code>SharedArrayBuffer</code> 를 반환합니다. <code>begin</code> 또는 <code>end</code> 가 음수인 경우, 인덱스는 배열의 끝에서부터이고 반대인 경우 시작부터입니다.</dd> +</dl> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-sharedarraybuffer.prototype', 'SharedArrayBuffer.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>ES2017 에서 초기 정의.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.SharedArrayBuffer.prototype")}}</p> + +<h2 id="함께_보기">함께 보기</h2> + +<ul> + <li>{{jsxref("SharedArrayBuffer")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/charat/index.html b/files/ko/web/javascript/reference/global_objects/string/charat/index.html new file mode 100644 index 0000000000..a5a68c03be --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/charat/index.html @@ -0,0 +1,260 @@ +--- +title: String.prototype.charAt() +slug: Web/JavaScript/Reference/Global_Objects/String/charAt +tags: + - JavaScript + - Method + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/charAt +--- +<div>{{JSRef}}</div> + +<p><strong>charAt() </strong>함수는 문자열에서 특정 인덱스에 위치하는 유니코드 단일문자를 반환합니다. </p> + +<div>{{EmbedInteractiveExample("pages/js/string-charat.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>str</var>.charAt(<var>index</var>)</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<ul> + <li>0과 문자열의 길이 - 1 사이의 정수값. </li> + <li>인자를 생략하면 기본값으로 0를 설정되고 첫 문자를 반환한다. </li> +</ul> + +<dl> + <dt><code>index</code></dt> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<ul> + <li>지정된 인덱스에 해당하는 유니코드 단일문자를 반환한다.</li> + <li>만약 인덱스가 문자열 길이보다 큰 경우 빈 문자열 (예) " " 을 반환한다. </li> +</ul> + +<h2 id="설명">설명</h2> + +<p>문자열 내의 문자는 왼쪽에서 오른쪽으로 순번(인덱스)이 매겨집니다. 첫 번째 문자의 순번은 0, 그리고 <code>stringName</code> 이라는 이름을 가진 문자열의 마지막 문자 순번은 <code>stringName.length - 1 </code>입니다. <code>index</code>가 문자열 길이를 벗어나면 빈 문자열을 반환하게 됩니다.</p> + +<p><code>index</code>를 제공하지 않으면 기본값은 0입니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="문자열_내의_다른_위치에_있는_문자들을_출력하기">문자열 내의 다른 위치에 있는 문자들을 출력하기</h3> + +<p>아래 예제는 문자열 <code>"Brave new world"</code>의 다른 위치에 있는 문자들을 출력합니다.</p> + +<pre class="brush: js">var anyString = 'Brave new world'; +console.log("The character at index 0 is '" + anyString.charAt() + "'"); +// No index was provided, used 0 as default + +console.log("The character at index 0 is '" + anyString.charAt(0) + "'"); +console.log("The character at index 1 is '" + anyString.charAt(1) + "'"); +console.log("The character at index 2 is '" + anyString.charAt(2) + "'"); +console.log("The character at index 3 is '" + anyString.charAt(3) + "'"); +console.log("The character at index 4 is '" + anyString.charAt(4) + "'"); +console.log("The character at index 999 is '" + anyString.charAt(999) + "'"); +</pre> + +<p>프로그램의 실행 결과는 아래와 같습니다.</p> + +<pre class="brush: js">The character at index 0 is 'B' +The character at index 1 is 'r' +The character at index 2 is 'a' +The character at index 3 is 'v' +The character at index 4 is 'e' +The character at index 999 is '' +</pre> + +<h3 id="문자열_내의_모든_문자_얻기">문자열 내의 모든 문자 얻기</h3> + +<p>아래 예제는 문자열 전체를 순회하며 각 문자가 완전한지 확인하는 프로그램입니다. 심지어 <a href="https://ko.wikipedia.org/wiki/%EC%9C%A0%EB%8B%88%EC%BD%94%EB%93%9C_%ED%8F%89%EB%A9%B4">기본 다국어 평면(Basic Multilingual Plane)</a>에 포함되지 않은 문자들이 포함되어 있다고 하더라도 잘 동작합니다. </p> + +<pre class="brush: js">var str = 'A \uD87E\uDC04 Z'; // 기본 다국어 평면에 포함되지 않는 문자를 사용합니다. +for (var i = 0, chr; i < str.length; i++) { + if ((chr = getWholeChar(str, i)) === false) { + continue; + } + // Adapt this line at the top of each loop, passing in the whole string and + // the current iteration and returning a variable to represent the + // individual character + + console.log(chr); +} + +function getWholeChar(str, i) { + var code = str.charCodeAt(i); + + if (Number.isNaN(code)) { + return ''; // Position not found + } + if (code < 0xD800 || code > 0xDFFF) { + return str.charAt(i); + } + + // High surrogate (could change last hex to 0xDB7F to treat high private + // surrogates as single characters) + if (0xD800 <= code && code <= 0xDBFF) { + if (str.length <= (i + 1)) { + throw 'High surrogate without following low surrogate'; + } + var next = str.charCodeAt(i + 1); + if (0xDC00 > next || next > 0xDFFF) { + throw 'High surrogate without following low surrogate'; + } + return str.charAt(i) + str.charAt(i + 1); + } + // Low surrogate (0xDC00 <= code && code <= 0xDFFF) + if (i === 0) { + throw 'Low surrogate without preceding high surrogate'; + } + var prev = str.charCodeAt(i - 1); + + // (could change last hex to 0xDB7F to treat high private + // surrogates as single characters) + if (0xD800 > prev || prev > 0xDBFF) { + throw 'Low surrogate without preceding high surrogate'; + } + // We can pass over low surrogates now as the second component + // in a pair which we have already processed + return false; +} +</pre> + +<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">비구조화 할당</a>을 허용하는 ECMAScript 2016 환경에서는 아래 예제 코드가 더 간결하고, 문자가 <a href="https://ko.wikipedia.org/wiki/UTF-16">서러게이트 페어</a>가 되는 것을 허용할 때는 증가해야 하는 변수를 자동적으로 증가하기에 위의 코드보다 다소 더 유연합니다.</p> + +<pre class="brush: js">var str = 'A\uD87E\uDC04Z'; // We could also use a non-BMP character directly +for (var i = 0, chr; i < str.length; i++) { + [chr, i] = getWholeCharAndI(str, i); + // Adapt this line at the top of each loop, passing in the whole string and + // the current iteration and returning an array with the individual character + // and 'i' value (only changed if a surrogate pair) + + console.log(chr); +} + +function getWholeCharAndI(str, i) { + var code = str.charCodeAt(i); + + if (Number.isNaN(code)) { + return ''; // Position not found + } + if (code < 0xD800 || code > 0xDFFF) { + return [str.charAt(i), i]; // Normal character, keeping 'i' the same + } + + // High surrogate (could change last hex to 0xDB7F to treat high private + // surrogates as single characters) + if (0xD800 <= code && code <= 0xDBFF) { + if (str.length <= (i + 1)) { + throw 'High surrogate without following low surrogate'; + } + var next = str.charCodeAt(i + 1); + if (0xDC00 > next || next > 0xDFFF) { + throw 'High surrogate without following low surrogate'; + } + return [str.charAt(i) + str.charAt(i + 1), i + 1]; + } + // Low surrogate (0xDC00 <= code && code <= 0xDFFF) + if (i === 0) { + throw 'Low surrogate without preceding high surrogate'; + } + var prev = str.charCodeAt(i - 1); + + // (could change last hex to 0xDB7F to treat high private surrogates + // as single characters) + if (0xD800 > prev || prev > 0xDBFF) { + throw 'Low surrogate without preceding high surrogate'; + } + // Return the next character instead (and increment) + return [str.charAt(i + 1), i + 1]; +} +</pre> + +<h3 id="기본다국어평면(Basic-Multilingual-Plane)이_아닌_문자들을_지원하도록_charAt()_수정하기">기본다국어평면(Basic-Multilingual-Plane)이 아닌 문자들을 지원하도록 <code>charAt()</code> 수정하기</h3> + +<p>어떠한 non-BMP 문자들이 나타났는지 호출자가 알 필요가 없기 때문에 non-BMP 문자들을 지원하도록 하는데는 앞의 예제들이 더 자주 사용되지만, 인덱스로 문자를 선택하는데 있어서 문자열 내에 서로게이트 페어들이 하나의 문자들로 처리되길 원한다면, 아래 예제 코드를 사용하면 됩니다.</p> + +<pre class="brush: js">function fixedCharAt(str, idx) { + var ret = ''; + str += ''; + var end = str.length; + + var surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g; + while ((surrogatePairs.exec(str)) != null) { + var li = surrogatePairs.lastIndex; + if (li - 2 < idx) { + idx++; + } else { + break; + } + } + + if (idx >= end || idx < 0) { + return ''; + } + + ret += str.charAt(idx); + + if (/[\uD800-\uDBFF]/.test(ret) && /[\uDC00-\uDFFF]/.test(str.charAt(idx + 1))) { + // Go one further, since one of the "characters" is part of a surrogate pair + ret += str.charAt(idx + 1); + } + return ret; +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.4', 'String.prototype.charAt')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.charat', 'String.prototype.charAt')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.charat', 'String.prototype.charAt')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.String.charAt")}}</p> + +<h2 id="관련문서">관련문서</h2> + +<ul> + <li>{{jsxref("String.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("String.prototype.charCodeAt()")}}</li> + <li>{{jsxref("String.prototype.codePointAt()")}}</li> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("String.fromCodePoint()")}}</li> + <li><a href="https://mathiasbynens.be/notes/javascript-unicode">JavaScript has a Unicode problem – Mathias Bynens</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/charcodeat/index.html b/files/ko/web/javascript/reference/global_objects/string/charcodeat/index.html new file mode 100644 index 0000000000..9777130911 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/charcodeat/index.html @@ -0,0 +1,169 @@ +--- +title: String.prototype.charCodeAt() +slug: Web/JavaScript/Reference/Global_Objects/String/charCodeAt +tags: + - JavaScript + - Method + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/charCodeAt +--- +<div>{{JSRef}}</div> + +<p><strong><code>charCodeAt()</code></strong> 메서드는 주어진 인덱스에 대한 UTF-16 코드를 나타내는 0부터 65535 사이의 정수를 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-charcodeat.html")}}</div> + + + +<p>전체 코드 값을 원하신다면 {{jsxref("String.prototype.codePointAt()")}}을 사용하세요.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>str</var>.charCodeAt(<var>index</var>)</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>index</code></dt> + <dd>0 이상이고 문자열의 길이보다 작은 정수. 숫자가 아니라면 0을 기본값으로 사용함. </dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 인덱스 대한 문자에 대한 UTF-16 코드를 나타내는 숫자<br> + 범위 밖으로 넘어갔을 경우 {{jsxref("Global_Objects/NaN", "NaN")}}</p> + +<h2 id="설명">설명</h2> + +<p>Unicode code points range from 0 to 1114111 (0x10FFFF). The first 128 Unicode code points are a direct match of the ASCII character encoding. For information on Unicode, see the <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">JavaScript Guide</a>.</p> + +<p>Note that <code>charCodeAt()</code> will always return a value that is less than 65536. This is because the higher code points are represented by a pair of (lower valued) "surrogate" pseudo-characters which are used to comprise the real character. Because of this, in order to examine or reproduce the full character for individual characters of value 65536 and above, for such characters, it is necessary to retrieve not only <code>charCodeAt(i)</code>, but also <code>charCodeAt(i+1)</code> (as if examining/reproducing a string with two letters), or to use codePointAt(i) instead. See example 2 and 3 below.</p> + +<p><code>charCodeAt()</code> returns {{jsxref("Global_Objects/NaN", "NaN")}} if the given index is less than 0 or is equal to or greater than the length of the string.</p> + +<p>Backward compatibilty: In historic versions (like JavaScript 1.2) the <code>charCodeAt()</code> method returns a number indicating the ISO-Latin-1 codeset value of the character at the given index. The ISO-Latin-1 codeset ranges from 0 to 255. The first 0 to 127 are a direct match of the ASCII character set.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Using_charCodeAt()">Using <code>charCodeAt()</code></h3> + +<p>The following example returns 65, the Unicode value for A.</p> + +<pre class="brush: js">'ABC'.charCodeAt(0); // returns 65 +</pre> + +<h3 id="Fixing_charCodeAt()_to_handle_non-Basic-Multilingual-Plane_characters_if_their_presence_earlier_in_the_string_is_unknown">Fixing <code>charCodeAt()</code> to handle non-Basic-Multilingual-Plane characters if their presence earlier in the string is unknown</h3> + +<p>This version might be used in for loops and the like when it is unknown whether non-BMP characters exist before the specified index position.</p> + +<pre class="brush: js">function fixedCharCodeAt(str, idx) { + // ex. fixedCharCodeAt('\uD800\uDC00', 0); // 65536 + // ex. fixedCharCodeAt('\uD800\uDC00', 1); // false + idx = idx || 0; + var code = str.charCodeAt(idx); + var hi, low; + + // High surrogate (could change last hex to 0xDB7F to treat high + // private surrogates as single characters) + if (0xD800 <= code && code <= 0xDBFF) { + hi = code; + low = str.charCodeAt(idx + 1); + if (isNaN(low)) { + throw 'High surrogate not followed by low surrogate in fixedCharCodeAt()'; + } + return ((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000; + } + if (0xDC00 <= code && code <= 0xDFFF) { // Low surrogate + // We return false to allow loops to skip this iteration since should have + // already handled high surrogate above in the previous iteration + return false; + /*hi = str.charCodeAt(idx - 1); + low = code; + return ((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000;*/ + } + return code; +} +</pre> + +<h3 id="Fixing_charCodeAt()_to_handle_non-Basic-Multilingual-Plane_characters_if_their_presence_earlier_in_the_string_is_known">Fixing <code>charCodeAt()</code> to handle non-Basic-Multilingual-Plane characters if their presence earlier in the string is known</h3> + +<pre class="brush: js">function knownCharCodeAt(str, idx) { + str += ''; + var code, + end = str.length; + + var surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g; + while ((surrogatePairs.exec(str)) != null) { + var li = surrogatePairs.lastIndex; + if (li - 2 < idx) { + idx++; + } + else { + break; + } + } + + if (idx >= end || idx < 0) { + return NaN; + } + + code = str.charCodeAt(idx); + + var hi, low; + if (0xD800 <= code && code <= 0xDBFF) { + hi = code; + low = str.charCodeAt(idx + 1); + // Go one further, since one of the "characters" is part of a surrogate pair + return ((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000; + } + return code; +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.5', 'String.prototype.charCodeAt')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.charcodeat', 'String.prototype.charCodeAt')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.charcodeat', 'String.prototype.charCodeAt')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("javascript.builtins.String.charCodeAt")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("String.fromCharCode()")}}</li> + <li>{{jsxref("String.prototype.charAt()")}}</li> + <li>{{jsxref("String.fromCodePoint()")}}</li> + <li>{{jsxref("String.prototype.codePointAt()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/concat/index.html b/files/ko/web/javascript/reference/global_objects/string/concat/index.html new file mode 100644 index 0000000000..1d5b4f2cd6 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/concat/index.html @@ -0,0 +1,105 @@ +--- +title: String.prototype.concat() +slug: Web/JavaScript/Reference/Global_Objects/String/concat +tags: + - JavaScript + - Method + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/concat +--- +<div>{{JSRef}}</div> + +<p><strong><code>concat()</code></strong> 메서드는 매개변수로 전달된 모든 문자열을 호출 문자열에 붙인 새로운 문자열을 반환합니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/string-concat.html")}}</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>str</var>.concat(<var>string2</var>, <var>string3</var>[, ..., <var>stringN</var>])</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>string2...string<em>N</em></code></dt> + <dd>합칠 문자열.</dd> +</dl> + +<h3 id="반환값">반환값</h3> + +<p>주어진 문자열을 모두 붙인 새로운 문자열.</p> + +<h2 id="설명">설명</h2> + +<p><code>concat()</code> 함수는 호출 문자열에 문자열 인수를 이어 붙인 결과를 반환합니다. 원본 문자열과 결과 문자열의 변형은 서로에게 영향을 미치지 않습니다. 인수가 문자열이 아니면 계산 전에 문자열로 변환합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="concat_사용하기"><code>concat()</code> 사용하기</h3> + +<p>아래 예제에서는 문자열을 결합하여 새로운 문자열을 만듭니다.</p> + +<pre><code>var hello = 'Hello, '; +console.log(hello.concat('Kevin', '. Have a nice day.')); +/* Hello, Kevin. Have a nice day. */ + +var greetList = ['Hello', ' ', 'Venkat', '!']; +"".concat(...greetList); // "Hello Venkat!" + +"".concat({}); // [object Object] +"".concat([]); // "" +"".concat(null); // "null" +"".concat(true); // "true" +"".concat(4, 5); // "45"</code></pre> + +<h2 id="성능">성능</h2> + +<p><code>concat()</code> 메서드보다 {{jsxref("Operators/Assignment_Operators", "할당 연산자", "", 1)}} (<code>+</code>, <code>+=</code>)를 사용하는게 더 좋습니다. <a href="https://web.archive.org/web/20170404182053/https://jsperf.com/concat-vs-plus-vs-join">성능 테스트</a> 결과에 따르면 할당 연산자의 속도가 몇 배 빠릅니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.6', 'String.prototype.concat')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.concat', 'String.prototype.concat')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.concat', 'String.prototype.concat')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.String.concat")}}</p> + +<div></div> + +<div id="compat-mobile"></div> + +<h2 id="관련문서">관련문서</h2> + +<ul> + <li>{{jsxref("Array.prototype.concat()")}}</li> + <li>{{jsxref("Operators/Assignment_Operators", "Assignment operators", "", 1)}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/endswith/index.html b/files/ko/web/javascript/reference/global_objects/string/endswith/index.html new file mode 100644 index 0000000000..d78645e9f3 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/endswith/index.html @@ -0,0 +1,142 @@ +--- +title: String.prototype.endsWith() +slug: Web/JavaScript/Reference/Global_Objects/String/endsWith +translation_of: Web/JavaScript/Reference/Global_Objects/String/endsWith +--- +<div>{{JSRef}}</div> + +<p>The <strong><code>endsWith()</code></strong> 메서드를 사용하여 어떤 문자열에서 특정 문자열로 끝나는지를 확인할 수 있으며, 그 결과를 <code>true</code> 혹은 <code>false</code>로 반환한다. </p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><var>str</var>.endsWith(<var>searchString</var>[, <var>length</var>])</pre> + +<h3 id="파라미터들">파라미터들</h3> + +<dl> + <dt><code>searchString</code></dt> + <dd>이 문자열의 끝이 특정 문자열로 끝나는지를 찾기 원하는 문자열입니다.</dd> + <dt><code>length</code></dt> + <dd>옵션입니다. 찾고자 하는 문자열의 길이값이며, 기본값은 문자열 전체 길이입니다. 문자열의 길이값은 문자열 전체 길이 안에서만 존재하여야 합니다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>문자열의 끝이 주어진 문자열로 끝나면 <strong><code>true</code></strong>, 그렇지 않다면 <strong><code>false</code></strong></p> + +<h2 id="설명">설명</h2> + +<p>여러분은 이 메서드를 사용하여 어떤 문자열이 특정 문자열로 끝나는지를 확인할 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="endsWith_사용하기"><code>endsWith()</code> 사용하기</h3> + +<pre class="brush: js">var str = 'To be, or not to be, that is the question.'; + +console.log(str.endsWith('question.')); // true +console.log(str.endsWith('to be')); // false +console.log(str.endsWith('to be', 19)); // true +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>이 메서드는 ECMAScript 6 규격에 포함되었습니다만 아직까지는 모든 JavaScrpt가 이 기능을 지원하고 있지는 않습니다. 하지만 여러분은 <code>String.prototype.endsWith()</code> 메서드를 다음과 같이 쉽게 <a href="https://en.wikipedia.org/wiki/Polyfill">polyfill</a> 할 수 있습니다:</p> + +<pre class="brush: js">if (!String.prototype.endsWith) { + String.prototype.endsWith = function(searchString, position) { + var subjectString = this.toString(); + if (typeof position !== 'number' || !isFinite(position) || Math.floor(position) !== position || position > subjectString.length) { + position = subjectString.length; + } + position -= searchString.length; + var lastIndex = subjectString.indexOf(searchString, position); + return lastIndex !== -1 && lastIndex === position; + }; +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("41")}}</td> + <td>{{CompatGeckoDesktop("17")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatSafari("9")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("36")}}</td> + <td>{{CompatGeckoMobile("17")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="관련문서">관련문서</h2> + +<ul> + <li>{{jsxref("String.prototype.startsWith()")}}</li> + <li>{{jsxref("String.prototype.includes()")}}</li> + <li>{{jsxref("String.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.lastIndexOf()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/fromcharcode/index.html b/files/ko/web/javascript/reference/global_objects/string/fromcharcode/index.html new file mode 100644 index 0000000000..98b1627666 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/fromcharcode/index.html @@ -0,0 +1,101 @@ +--- +title: String.fromCharCode() +slug: Web/JavaScript/Reference/Global_Objects/String/fromCharCode +tags: + - JavaScript + - Method + - Reference + - String + - Unicode +translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCharCode +--- +<div>{{JSRef}}</div> + +<p><strong><code>String.fromCharCode()</code></strong> 메서드는 UTF-16 코드 유닛의 시퀀스로부터 문자열을 생성해 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-fromcharcode.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code>String.fromCharCode(<var>num1</var>[, ...[, <var>numN</var>]])</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>num1, ..., num<em>N</em></code></dt> + <dd>UTF-16 코드 유닛인 숫자 뭉치. 가능한 값의 범위는 0부터 65535(0xFFFF)까지입니다. 0xFFFF를 초과하는 값은 잘립니다. 유효성 검사는 하지 않습니다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 UTF-16 코드 유닛 N개로 이루어진 문자열.</p> + +<h2 id="설명">설명</h2> + +<p>이 메서드는 {{jsxref("String")}} 객체가 아닌 문자열을 반환합니다.</p> + +<p><code>fromCharCode()</code>는 {{jsxref("String")}}의 정적 메서드이기 때문에 <code>String.fromCharCode()</code>로 사용해야 합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="fromCharCode()_사용하기"><code>fromCharCode()</code> 사용하기</h3> + +<p>다음 예제는 문자열 <code>"ABC"</code>를 반환합니다..</p> + +<pre class="brush: js">String.fromCharCode(65, 66, 67); // "ABC" +String.fromCharCode(0x2014) // "—" +String.fromCharCode(0x12014) // 숫자 '1'은 무시해서 "—" +</pre> + +<h2 id="더_큰_값과_사용하기">더 큰 값과 사용하기</h2> + +<p>초기 JavaScript 표준화 과정에서 예상했던 것처럼, 대부분의 흔한 유니코드 값을 16비트 숫자로 표현할 수 있고, <code>fromCharCode()</code>가 많은 흔한 값에서 하나의 문자를 반환할 수 있지만, <strong>모든</strong> 유효한 유니코드 값(최대 21비트)을 처리하려면 <code>fromCharCode()</code>만으로는 부족합니다. 높은 코드 포인트의 문자는 써로게이트<sup>surrogate</sup> 값 두 개를 합쳐 하나의 문자를 표현하므로,{{jsxref("String.fromCodePoint()")}}(ES2015 표준) 메서드는 그러한 쌍을 높은 값의 문자로 변환할 수 있습니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.3.2', 'StringfromCharCode')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.fromcharcodes', 'String.fromCharCode')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.fromcharcodes', 'String.fromCharCode')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.String.fromCharCode")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("String.fromCodePoint()")}}</li> + <li>{{jsxref("String.prototype.charAt()")}}</li> + <li>{{jsxref("String.prototype.charCodeAt()")}}</li> + <li>{{jsxref("String.prototype.codePointAt()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/includes/index.html b/files/ko/web/javascript/reference/global_objects/string/includes/index.html new file mode 100644 index 0000000000..a3eb79ad16 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/includes/index.html @@ -0,0 +1,125 @@ +--- +title: String.prototype.includes() +slug: Web/JavaScript/Reference/Global_Objects/String/includes +tags: + - JavaScript + - Method + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/includes +--- +<div>{{JSRef}}</div> + +<p><strong><code>includes()</code></strong> 메서드는 하나의 문자열이 다른 문자열에 포함되어 있는지를 판별하고, 결과를 <code>true</code> 또는 <code>false</code> 로 반환합니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/string-includes.html")}}</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>str</var>.includes(<var>searchString</var>[, <var>position</var>])</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>searchString</code></dt> + <dd>이 문자열에서 찾을 다른 문자열.</dd> + <dt><code>position</code> {{optional_inline}}</dt> + <dd><code>searchString</code>을 찾기 시작할 위치. 기본값 0.</dd> +</dl> + +<h3 id="반환값">반환값</h3> + +<p>문자열을 찾아내면 <code>true</code>. 실패하면 <code>false</code>.</p> + +<h2 id="설명">설명</h2> + +<p><code>includes()</code> 메서드를 사용해 문자열 내에 찾고자 하는 다른 문자열이 있는지 확인할 수 있습니다.</p> + +<h3 id="대소문자_구분">대소문자 구분</h3> + +<p><code>includes()</code> 메서드는 대소문자를 구별합니다. 예를 들어 아래 코드는 <code>false</code>를 반환합니다.</p> + +<pre class="brush: js">'Blue Whale'.includes('blue'); // returns false +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="includes()_사용하기"><code>includes()</code> 사용하기</h3> + +<pre class="brush: js">var str = 'To be, or not to be, that is the question.'; + +console.log(str.includes('To be')); // true +console.log(str.includes('question')); // true +console.log(str.includes('nonexistent')); // false +console.log(str.includes('To be', 1)); // false +console.log(str.includes('TO BE')); // false +</pre> + +<h2 id="폴리필">폴리필</h2> + +<p>이 메서드는 ECMAScript 6 규격에 포함되었습니다만 아직까지는 모든 JavaScrpt가 이 기능을 지원하고 있지는 않습니다. 하지만 여러분은 이 메서드를 다음과 같이 쉽게 <a href="https://en.wikipedia.org/wiki/Polyfill">polyfill</a> 할 수 있습니다.</p> + +<pre class="brush: js">if (!String.prototype.includes) { + String.prototype.includes = function(search, start) { + 'use strict'; + if (typeof start !== 'number') { + start = 0; + } + + if (start + search.length > this.length) { + return false; + } else { + return this.indexOf(search, start) !== -1; + } + }; +} + +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.includes', 'String.prototype.includes')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.includes', 'String.prototype.includes')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("javascript.builtins.String.includes")}}</div> + +<h2 id="String.prototype.contains">String.prototype.contains</h2> + +<p>Firefox 18 - 39에서, <code>include()</code> 메서드의 이름은 <code>contains()</code>이었습니다. contains() 함수는 아래와 같은 이유로 {{bug(1102219)}}에서 <code>includes()</code>로 변경되었습니다:</p> + +<p>It's been <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=789036">reported</a> that some websites using MooTools 1.2 broke on Firefox 17. This version of MooTools checks whether <code>String.prototype.contains()</code> exists and, if it doesn't, MooTools adds its own function. With the introduction of this function in Firefox 17, the behavior of that check changed in a way that causes code based on MooTools' <code>String.prototype.contains()</code> implementation to break. As a result, the implementation was <a href="https://hg.mozilla.org/releases/mozilla-aurora/rev/086db97198a8">disabled</a> in Firefox 17 and <code>String.prototype.contains()</code> was available one version later, in Firefox 18, when <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=789036#c32">outreach to MooTools </a>was leading to the <a href="http://mootools.net/blog/2013/02/19/mootools-1-2-6-released">release of MooTools version 1.2.6</a>.</p> + +<p>MooTools 1.3 forces its own version of <code>String.prototype.contains()</code>, so websites relying on it should not break. However, you should note that <a href="http://mootools.net/core/docs/1.3.2/Types/String#String-method:-contains">MooTools 1.3 signature</a> and ECMAScript 6 signatures for this method differ (on the second argument). Later, <a href="https://github.com/mootools/mootools-core/blob/master/Docs/Types/String.md#note">MooTools 1.5+ changed the signature to match the ES6 standard.</a></p> + +<p>Firefox 48에서, <code>String.prototype.contains()</code>은 제거되었습니다. 오직 <code>String.prototype.includes()</code>만 사용할 수 있습니다.</p> + +<h2 id="관련문서">관련문서</h2> + +<ul> + <li>{{jsxref("Array.prototype.includes()")}} {{experimental_inline}}</li> + <li>{{jsxref("TypedArray.prototype.includes()")}} {{experimental_inline}}</li> + <li>{{jsxref("String.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("String.prototype.startsWith()")}}</li> + <li>{{jsxref("String.prototype.endsWith()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/index.html b/files/ko/web/javascript/reference/global_objects/string/index.html new file mode 100644 index 0000000000..68e9b021e5 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/index.html @@ -0,0 +1,298 @@ +--- +title: String +slug: Web/JavaScript/Reference/Global_Objects/String +tags: + - ECMAScript 2015 + - JavaScript + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String +--- +<div>{{JSRef}}</div> + +<p><strong><code>String</code></strong> 전역 객체는 문자열(문자의 나열)의 생성자입니다.</p> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<p>문자열 리터럴은 다음과 같은 형식을 사용합니다.</p> + +<pre class="syntaxbox">'string text' +"string text" +"中文 español Deutsch English देवनागरी العربية português বাংলা русский 日本語 norsk bokmål ਪੰਜਾਬੀ 한국어 தமிழ் עברית"</pre> + +<p>문자열은 <code>String</code> 전역 객체를 직접 사용하여 생성할 수 있습니다.</p> + +<pre class="syntaxbox">String(<em>thing</em>)</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>thing</code></dt> + <dd>문자열로 변환할 아무 값.</dd> + <dt> + <h3 id="템플릿_리터럴">템플릿 리터럴</h3> + </dt> +</dl> + +<p>ECMAScript 2015 이후, 문자열 리터럴은 소위 <a href="/ko/docs/Web/JavaScript/Reference/Template_literals">템플릿 리터럴</a>이 될 수 있습니다.</p> + +<pre class="language-html"><code class="language-html">`hello world` `hello! world!` `hello ${who}` tag `<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span><span class="punctuation token">></span></span>${who}<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span>`</code></pre> + +<h3 id="이스케이프_표현">이스케이프 표현</h3> + +<p>일반적인 출력 문자 외의 특수 문자는 이스케이프 표현을 사용해 적을 수 있습니다.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">코드</th> + <th scope="col">출력</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>\XXX</code></td> + <td>8진수 Latin-1 문자</td> + </tr> + <tr> + <td><code>\'</code></td> + <td>작은따옴표</td> + </tr> + <tr> + <td><code>\"</code></td> + <td>큰따옴표</td> + </tr> + <tr> + <td><code>\\</code></td> + <td>역슬래시</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>개행</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>캐리지 리턴</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>세로 탭</td> + </tr> + <tr> + <td><code>\t</code></td> + <td>탭</td> + </tr> + <tr> + <td><code>\b</code></td> + <td>백 스페이스</td> + </tr> + <tr> + <td><code>\f</code></td> + <td>폼 피드</td> + </tr> + <tr> + <td><code>\uXXXX</code></td> + <td>유니코드 코드포인트</td> + </tr> + <tr> + <td><code>\u{X}</code> ... <code>\u{XXXXXX}</code></td> + <td>유니코드 코드포인트 {{experimental_inline}}</td> + </tr> + <tr> + <td><code>\xXX</code></td> + <td>Latin-1 문자</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p>일부 다른 프로그래밍 언어와 달리, JavaScript는 작은따옴표와 큰따옴표 문자열을 구분하지 않습니다. 따라서 위의 이스케이프 문자는 작은따옴표나 큰따옴표에서 상관 없이 작동합니다.</p> +</div> + +<h3 id="긴_문자열_리터럴">긴 문자열 리터럴</h3> + +<p>작성한 코드가 매우 긴 문자열을 포함해야 하는 경우, 끝 없이 뻗어나가는 한 줄이나 편집기의 재량에 따라 자동으로 줄을 넘기는 대신 직접 여러 줄로 나누되 내용에는 영향을 주지 않고 싶을 때가 있을겁니다. 이런 상황에는 두 가지 방법을 사용할 수 있습니다.</p> + +<p>우선 다음과 같이 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#%EB%8D%94%ED%95%98%EA%B8%B0_()">+</a> 연산자를 사용할 수 있습니다.</p> + +<pre class="brush: js"><code>let longString = "여러 줄에 걸쳐 작성해야 할 정도로 " + + "긴 문자열인데 왜 한 줄에 다 적으면 안되냐면 " + + "코드를 읽기 힘들어지니까요.";</code></pre> + +<p>아니면 역슬래시 문자("\")를 각 줄의 맨 끝에 붙여 문자열이 이어진다는걸 표시할 수도 있습니다. 역슬래시 다음에 공백을 포함한 어떤 문자라도 붙으면 제대로 작동하지 않으므로 주의해야 합니다.</p> + +<pre class="brush: js"><code>let longString = "여러 줄에 걸쳐 작성해야 할 정도로 \ +긴 문자열인데 왜 한 줄에 다 적으면 안되냐면 \ +코드를 읽기 힘들어지니까요.";</code></pre> + +<p>두 예시 모두 동일한 문자열을 생성합니다.</p> + +<h2 id="Description" name="Description">설명</h2> + +<p>문자열은 텍스트 형태로 표현될 수있는 데이터를 보관하는 데 유용합니다. 문자열에서 가장 많이 사용되는 작업들은 문자열의 길이를 확인하는 ({{jsxref("String.length", "length")}}), 문자열을 생성하고 연결하는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/String_Operators" title="JavaScript/Reference/Operators/String_Operators">+ 와 += 문자열 연산자</a>, 서브문자열(substring)이 있는지 확인하고, 있으면 위치를 확인하는 {{jsxref("String.prototype.indexOf()", "indexOf()")}} 메서드, 서브문자열(substring)을 추출해내는 {{jsxref("String.prototype.substring()", "substring()")}} 메서드가 있습니다.</p> + +<h3 id="문자_접근">문자 접근</h3> + +<p>문자열에서 개개의 문자에 접근할 수 있는 방법은 두가지가 있습니다. 첫번째는 {{jsxref("String.prototype.charAt()", "charAt()")}} 메서드를 이용하는 것입니다:</p> + +<pre class="brush: js">return 'cat'.charAt(1); // returns "a" +</pre> + +<p>다른 방법(ECMAScript 5에서 소개하고 있는)은 문자열을 배열과 같은 오브젝트로 취급하여, 문자에 해당하는 숫자 인덱스를 사용하는 방법입니다 :</p> + +<pre class="brush: js">return 'cat'[1]; // returns "a" +</pre> + +<p>브라켓([ ]) 표기법을 사용하여 문자에 접근하는 경우 , 이러한 프로퍼티들에 새로운 값을 할당하거나 삭제할 수는 없습니다. 포함되어 있는 프로퍼티들은 작성할 수도, 수정할 수도 없습니다. (더 자세한 정보는 {{jsxref("Object.defineProperty()")}}를 참고 바랍니다 .)</p> + +<h3 id="Comparing_strings" name="Comparing_strings">문자열 비교</h3> + +<p>C 개발자는 문자열 비교를 위하여 <code><span style="font-family: courier new,andale mono,monospace;">strcmp()</span></code> 함수를 사용합니다. JavaScript에서는 단지 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" style="line-height: inherit;" title="JavaScript/Reference/Operators/Comparison_Operators">less-than와 greater-than 연산자</a>만을 사용하여 문자열을 비교할 수 있습니다<span style="line-height: inherit;"> </span><span style="line-height: inherit;">:</span></p> + +<pre class="brush: js">var a = "a"; +var b = "b"; +if (a < b) { // true + console.log(a + " is less than " + b); +} else if (a > b) { + console.log(a + " is greater than " + b); +} else { + console.log(a + " and " + b + " are equal."); +} +</pre> + +<p>비슷한 결과를 얻을 수 있는 방법으로 <span style="font-family: courier new,andale mono,monospace;">String</span> 인스턴스에서 상속된 {{jsxref("String.prototype.localeCompare()", "localeCompare()")}} 메서드를 사용할 수 있습니다.</p> + +<h3 id="문자열_원형과_String_객체의_차이">문자열 원형과 <code>String</code> 객체의 차이</h3> + +<div>JavaScript는 <code>String</code> 오브젝트와 원형의 문자열을 다르게 취급한다는 것에 주의해야 합니다. ({{jsxref("Boolean")}}과 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects" title="JavaScript/Reference/Global_Objects/">숫자</a>의 true도 마찬가지입니다.)</div> + +<div> </div> + +<p>문자열 리터럴(작은 따옴표 또는 큰 따옴표로 생성되는)과 생성자 없이(즉. {{jsxref("Operators/new", "new")}} 키워드를 사용하지 않고) <code>String</code>을 호출하여 반환된 문자열은 원형 문자열(primitive strings)입니다. JavaScript는 자동적으로 원형을 <code>String</code> 오브젝트로 변환하기 때문에, <code>String</code> 오브젝트 메서드를 사용하여 원형문자열을 생성할 수 있습니다. 문맥 안의 메서드에서 프로퍼티 조회 또는 원형의 문자열 호출이 발생하면, JavaScript는 자동으로 문자열 원형을 감싸고 프로퍼티 조회를 수행 하거나 메서드를 호출합니다.</p> + +<pre class="brush: js">var s_prim = "foo"; +var s_obj = new String(s_prim); + +console.log(typeof s_prim); // Logs "string" +console.log(typeof s_obj); // Logs "object" +</pre> + +<p>문자열 원형과 <code>String</code> 오브젝트는 {{jsxref("Global_Objects/eval", "eval()")}}을 사용할 때 다른 결과를 제공합니다. <code>eval</code>에 전달되는 문자열 원형들은 소스 코드 취급을 받습니다; <code>String</code> 오브젝트들은 다른 모든 오브젝트들과 마찬가지로 취급하며, 오브젝트를 반환합니다. 예를 들면:</p> + +<pre class="brush: js">var s1 = '2 + 2'; // creates a string primitive +var s2 = new String('2 + 2'); // creates a String object +console.log(eval(s1)); // returns the number 4 +console.log(eval(s2)); // returns the string "2 + 2" +</pre> + +<p>이러한 이유로, 비록 코드 상에서 원형 문자열을 사용하는 대신에 <code>String</code> 오브젝트를 사용하게 되면 코드가 손상될 수 있지만, 일반적인 개발자는 차이를 걱정할 필요는 없습니다.</p> + +<p><code>String</code><span style="line-height: inherit;"> 오프젝트는 언제든지 </span>{{jsxref("String.prototype.valueOf()", "valueOf()")}} <span style="line-height: inherit;"> 메서드로 원형에 대응하도록 전환할 수 있습니다.</span></p> + +<pre class="brush: js">console.log(eval(s2.valueOf())); // returns the number 4 +</pre> + +<h2 id="Properties" name="Properties">속성</h2> + +<dl> + <dt>{{jsxref("String.prototype")}}</dt> + <dd>String 오브젝트는 프로퍼티의 추가가 가능합니다.</dd> +</dl> + +<h2 id="Methods" name="Methods">메서드</h2> + +<dl> + <dt>{{jsxref("String.fromCharCode()")}}</dt> + <dd>지정된 유니코 값의 순서를 이용하여 만든 문자열을 반환합니다.</dd> + <dt>{{jsxref("String.fromCodePoint()")}} {{experimental_inline}}</dt> + <dd>지정된 코드 포인트 순서를 이용하여 만든 문자열을 반환합니다.</dd> + <dt>{{jsxref("String.raw()")}} {{experimental_inline}}</dt> + <dd>원형 템플릿 문자열(raw template string)에서 생성된 문자열을 반환합니다.</dd> +</dl> + +<h2 id="String_generic_메서드"><code>String</code> generic 메서드</h2> + +<div class="warning"> +<p><strong><code>String</code> generic들은 비표준으로, 가까운 미래에 사라질 것입니다.</strong> 아래에서 제공하고 있는 방식을 사용하지 않으면, 브라우저들간의 호환성은 기대하기 어렵습니다. </p> +</div> + +<p><code>String</code><span style="line-height: inherit;"> 인스턴스 메서드는 JavScript 1.6으로 Firefox에서(ECMAScript 표준에 속하지는 않지만) 어떤 오브젝트라도 String 메서드에 적용하여 String 오브젝트에서 사용가능합니다:</span></p> + +<pre class="brush: js">var num = 15; +console.log(String.replace(num, /5/, '2')); +</pre> + +<p class="brush: js">{{jsxref("Global_Objects/Array", "Generics", "#Array_generic_methods", 1)}}은<span style="line-height: inherit;"> </span>{{jsxref("Global_Objects/Array", "Array")}}<span style="line-height: inherit;"> 메서드에도 사용 가능합니다.</span></p> + +<h2 id="String_instances" name="String_instances"><code>String</code> 인스턴스</h2> + +<h3 id="속성">속성</h3> + +<p>{{ page('ko/docs/JavaScript/Reference/Global_Objects/String/prototype', 'Properties') }}</p> + +<h3 id="메서드">메서드</h3> + +<h4 id="HTML과_관계없는_메서드">HTML과 관계없는 메서드</h4> + +<p>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Methods_unrelated_to_HTML')}}</p> + +<h4 id="HTML_wrapper_methods">HTML wrapper methods</h4> + +<p>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'HTML_wrapper_methods')}}</p> + +<h2 id="예제">예제</h2> + +<h3 id="문자열_변환">문자열 변환</h3> + +<p>비록 일반적으로 toString() 함수를 많이 사용하고 있지만, {{jsxref("String.prototype.toString()", "toString()")}}의 "안전한" 대안으로 String을 사용할 수 있습니다. String은 {{jsxref("Global_Objects/null", "null")}}과 {{jsxref("Global_Objects/undefined", "undefined")}}에 대해서도 잘 동작합니다. 예를 들면: </p> + +<pre class="brush: js">var outputStrings = []; +for (var i = 0, n = inputValues.length; i < n; ++i) { + outputStrings.push(String(inputValues[i])); +} +</pre> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5', 'String')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string-objects', 'String')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string-objects', 'String')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.String",2)}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{domxref("DOMString")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString/Binary">Binary strings</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/indexof/index.html b/files/ko/web/javascript/reference/global_objects/string/indexof/index.html new file mode 100644 index 0000000000..3e12f74d51 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/indexof/index.html @@ -0,0 +1,159 @@ +--- +title: String.prototype.indexOf() +slug: Web/JavaScript/Reference/Global_Objects/String/indexOf +tags: + - JavaScript + - Method + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/indexOf +--- +<div>{{JSRef}}</div> + +<p><strong><code>indexOf()</code></strong> 메서드는 호출한 {{jsxref("String")}} 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다. 일치하는 값이 없으면 -1을 반환합니다. </p> + +<div>{{EmbedInteractiveExample("pages/js/string-indexof.html")}}</div> + + + +<div class="note"> +<p><strong>참고:</strong> {{jsxref("Array")}}에서는 {{jsxref("Array.prototype.indexOf()")}} 메서드가 같은 역할을 합니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>str</var>.indexOf(<var>searchValue</var>[, <var>fromIndex</var>])</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>searchValue</code></dt> + <dd>찾으려는 문자열. 아무 값도 주어지지 않으면 <a href="https://tc39.github.io/ecma262/#sec-tostring">문자열 <code>"undefined"</code>를 찾으려는 문자열로 사용</a>합니다.</dd> + <dt><code>fromIndex</code> {{optional_inline}}</dt> + <dd>문자열에서 찾기 시작하는 위치를 나타내는 인덱스 값입니다. 어떤 정수값이라도 가능합니다. 기본값은 0이며, 문자열 전체를 대상으로 찾게 됩니다. 만약 <code>fromIndex </code>값이 음의 정수이면 전체 문자열을 찾게 됩니다. 만약 <code>fromIndex >= str.length </code>이면, 검색하지 않고 바로 -1을 반환합니다. <code>searchValue</code>가 공백 문자열이 아니라면, <code>str.length</code>를 반환합니다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p><code>searchValue</code>의 첫 번째 등장 인덱스. 찾을 수 없으면 -1.</p> + +<h2 id="설명">설명</h2> + +<p>문자열 내에 있는 문자들은 왼쪽에서 오른쪽 방향으로 순번이 매겨집니다. 제일 처음 문자는 0번째 순번(index)이며, <code>stringName </code>문자열의 마지막 문자의 순번 <code>stringName.length -1</code> 입니다. </p> + +<pre class="brush: js">'Blue Whale'.indexOf('Blue'); // returns 0 +'Blue Whale'.indexOf('Blute'); // returns -1 +'Blue Whale'.indexOf('Whale', 0); // returns 5 +'Blue Whale'.indexOf('Whale', 5); // returns 5 +'Blue Whale'.indexOf('Whale', 7); // returns -1 +'Blue Whale'.indexOf(''); // returns 0 +'Blue Whale'.indexOf('', 9); // returns 9 +'Blue Whale'.indexOf('', 10); // returns 10 +'Blue Whale'.indexOf('', 11); // returns 10</pre> + +<p><code>indexOf()</code> 메서드는 대소문자를 구분합니다. 예를 들면, 아래 예제는 일치하는 문자열이 없으므로 <code>-1</code>을 반환합니다.</p> + +<pre class="brush: js">'Blue Whale'.indexOf('blue'); // returns -1 +</pre> + +<h3 id="존재_여부_확인">존재 여부 확인</h3> + +<p>'0'을 평가했을 때 <code>true</code>가 아니고, -1을 평가했을 때 <code>false</code>가 아닌 것에 주의해야 합니다. 따라서, 임의의 문자열에 특정 문자열이 있는지를 확인하는 올바른 방법은 다음과 같습니다.</p> + +<pre class="brush: js">'Blue Whale'.indexOf('Blue') !== -1; // true +'Blue Whale'.indexOf('Bloe') !== -1; // false +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="indexOf()_사용하기"><code>indexOf()</code> 사용하기</h3> + +<p>아래 예제는 <code>"Brave new world"</code> 문자열의 위치를 확인하기 위해 <code>indexOf()</code>와 {{jsxref("String.prototype.lastIndexOf()", "lastIndexOf()")}} 를 사용하고 있습니다.</p> + +<pre class="brush: js">var anyString = 'Brave new world'; + +console.log('The index of the first w from the beginning is ' + anyString.indexOf('w')); +// 첫번째 w 문자 위치는 8 +console.log('The index of the first w from the end is ' + anyString.lastIndexOf('w')); +// 마지막 w 문자 위치는 10 + +console.log('The index of "new" from the beginning is ' + anyString.indexOf('new')); +// 첫번째 new 문자열 위치는 6 +console.log('The index of "new" from the end is ' + anyString.lastIndexOf('new')); +// 마지막 new 문자열 위치는 6 +</pre> + +<h3 id="indexOf()와_대소문자_구분"><code>indexOf()</code>와 대소문자 구분</h3> + +<p>아래 예제에서는 2개의 문자열 변수를 정의하고 있습니다. 이 변수들 내에 있는 문자열들은 모두 같지만 두 번째 변수에 포함되어 있는 문자열은 대문자를 포함하고 있습니다. 첫 번째 {{domxref("console.log()")}} 메서드의 결과값은 19입니다. 하지만, 두 번째 <code>console.log()</code> 메서드의 결과값은 <code>-1</code>입니다. 왜냐하면, indexOf() 메서드는 대소문자를 구분하기 때문에 <code>myCapString</code>에서 "<code>cheddar</code>" 문자열을 찾을 수 없기 때문입니다. </p> + +<pre class="brush: js">var myString = 'brie, pepper jack, cheddar'; +var myCapString = 'Brie, Pepper Jack, Cheddar'; + +console.log('myString.indexOf("cheddar") is ' + myString.indexOf('cheddar')); +// 로그에 19를 출력합니다. +console.log('myCapString.indexOf("cheddar") is ' + myCapString.indexOf('cheddar')); +// 로그에 -1을 출력합니다. +</pre> + +<h3 id="indexOf()를_사용하여_문자열_내의_특정_문자_숫자_세기"><code>indexOf()</code>를 사용하여 문자열 내의 특정 문자 숫자 세기</h3> + +<p>아래 예제는 <code>str </code>문자열에서 <code>e </code>문자의 총 숫자를 확인하는 프로그램입니다:</p> + +<pre class="brush: js">var str = 'To be, or not to be, that is the question.'; +var count = 0; +var pos = str.indexOf('e'); //pos는 4의 값을 가집니다. + +while (pos !== -1) { + count++; + pos = str.indexOf('e', pos + 1); // 첫 번째 e 이후의 인덱스부터 e를 찾습니다. +} + +console.log(count); // 로그에 4를 출력합니다. +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.7', 'String.prototype.indexOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("javascript.builtins.String.indexOf")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("String.prototype.charAt()")}}</li> + <li>{{jsxref("String.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/lastindexof/index.html b/files/ko/web/javascript/reference/global_objects/string/lastindexof/index.html new file mode 100644 index 0000000000..d2244feee5 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/lastindexof/index.html @@ -0,0 +1,105 @@ +--- +title: String.prototype.lastIndexOf() +slug: Web/JavaScript/Reference/Global_Objects/String/lastIndexOf +tags: + - JavaScript + - Method + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/lastIndexOf +--- +<div>{{JSRef}}</div> + +<p><strong><code>lastIndexOf()</code></strong> 메서드는 주어진 값과 일치하는 부분을 <code>fromIndex</code>로부터 역순으로 탐색하여, 최초로 마주치는 인덱스를 반환합니다. 일치하는 부분을 찾을 수 없으면 <code>-1</code>을 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-lastindexof.html", "shorter")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate"><var>str</var>.lastIndexOf(<var>searchValue</var>[, <var>fromIndex</var>])</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>searchValue</code></dt> + <dd>탐색할 문자열. 빈 값을 제공할 경우 <code>fromIndex</code>를 반환합니다.</dd> + <dt><code>fromIndex</code> {{optional_inline}}</dt> + <dd>탐색의 시작점으로 사용할 인덱스. 기본값은 <code>+Infinity</code>입니다. <code>fromIndex >= str.length</code>인 경우 모든 문자열을 탐색합니다. <code>fromIndex < 0</code>인 경우엔 <code>0</code>을 지정한 것과 동일합니다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>문자열 내에서 searchValue가 마지막으로 등장하는 인덱스. 등장하지 않으면 <code>-1</code>.</p> + +<h2 id="설명">설명</h2> + +<p>문자열의 문자는 왼쪽에서 오른쪽으로 인덱스를 매깁니다. 첫 번째 문자의 인덱스는 <code>0</code>이며, 마지막 문자의 인덱스는 <code>str.length -1</code>입니다.</p> + +<pre class="brush: js notranslate">'canal'.lastIndexOf('a'); // 3 반환 +'canal'.lastIndexOf('a', 2); // 1 반환 +'canal'.lastIndexOf('a', 0); // -1 반환 +'canal'.lastIndexOf('x'); // -1 반환 +'canal'.lastIndexOf('c', -5); // 0 반환 +'canal'.lastIndexOf('c', 0); // 0 반환 +'canal'.lastIndexOf(''); // 5 반환 +'canal'.lastIndexOf('', 2); // 2 반환 +</pre> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> <code>'abab'.lastIndexOf('ab', 2)</code>는 0이 아니고 2를 반환합니다. <code>fromIndex</code>는 탐색의 시작점만 제한하기 때문입니다.</p> +</div> + +<h3 id="대소문자_구분">대소문자 구분</h3> + +<p><code>lastIndexOf()</code> 메서드는 대소문자를 구분합니다. 예를 들어, 아래 예제는 <code>-1</code>을 반환합니다.</p> + +<pre class="brush: js notranslate">'Blue Whale, Killer Whale'.lastIndexOf('blue'); // -1 반환 +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="indexOf와_lastIndexOf_사용하기"><code>indexOf()</code>와 <code>lastIndexOf()</code> 사용하기</h3> + +<p>아래 예제는 문자열 <code>"Brave new world"</code> 내에서 특정 값의 위치를 확인하기 위해 {{jsxref("String.prototype.indexOf()", "indexOf()")}}와 <code>lastIndexOf()</code>를 사용합니다.</p> + +<pre class="brush: js notranslate">let anyString = 'Brave new world'; + +console.log('시작점으로부터 처음 만나는 w의 위치는 ' + anyString.indexOf('w')); +// logs 8 +console.log('끝점으로부터 처음 만나는 w의 위치는 ' + anyString.lastIndexOf('w')); +// logs 10 +console.log('시작점으로부터 처음 만나는 "new"의 위치는 ' + anyString.indexOf('new')); +// logs 6 +console.log('끝점으로부터 처음 만나는 "new"의 위치는 ' + anyString.lastIndexOf('new')); +// logs 6 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.lastindexof', 'String.prototype.lastIndexOf')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("javascript.builtins.String.lastIndexOf")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("String.prototype.charAt()")}}</li> + <li>{{jsxref("String.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> + <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/length/index.html b/files/ko/web/javascript/reference/global_objects/string/length/index.html new file mode 100644 index 0000000000..697957aaf9 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/length/index.html @@ -0,0 +1,84 @@ +--- +title: String.length +slug: Web/JavaScript/Reference/Global_Objects/String/length +tags: + - JavaScript + - Property + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/length +--- +<div>{{JSRef}}</div> + +<p><strong><code>length</code></strong> 속성은 UTF-16 코드 유닛을 기준으로 문자열의 길이를 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-length.html")}}</div> + + + +<h2 id="설명">설명</h2> + +<p><code>length</code> 속성은 문자열 안의 코드 유닛 수를 반환합니다. JavaScript가 사용하는 문자열 형식인 {{interwiki("wikipedia", "UTF-16")}}은 대부분의 일반적인 문자를 표현하기 위해 하나의 16비트 코드 유닛을 사용합니다. 반면, 덜 쓰이는 문자를 표현하기 위해 2개의 코드 유닛을 사용해야 할 때도 있으므로 문자열 내에 있는 문자들의 실제 총 숫자가 <code>length</code> 속성이 반환하는 숫자와 일치하지 않을 수 있습니다.</p> + +<p>ECMAScript 2016 7판은 최대 길이를 <code>2^53 - 1</code>로 설정했습니다. 이전엔 명시된 최대 길이가 없었습니다.</p> + +<p>빈 문자열은 <code>length</code>가 0입니다.</p> + +<p>정적 속성 <code>String.length</code>는 1을 반환합니다. </p> + +<h2 id="예제">예제</h2> + +<h3 id="일반적인_사용법">일반적인 사용법</h3> + +<pre class="brush: js">var x = 'Mozilla'; +var empty = ''; + +console.log('Mozilla는 코드 유닛 ' + x.length + '개의 길이입니다.'); +/* "Mozilla는 코드 유닛 7개의 길이입니다." */ + +console.log('빈 문자열은 ' + empty.length + '의 길이를 가집니다.'); +/* "빈 문자열은 0의 길이를 가집니다." */ +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.5.1', 'String.prototype.length')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("javascript.builtins.String.length")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="http://developer.teradata.com/blog/jasonstrimpel/2011/11/javascript-string-length-and-internationalizing-web-applications">JavaScript <code>String.length</code> and Internationalizing Web Applications</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/localecompare/index.html b/files/ko/web/javascript/reference/global_objects/string/localecompare/index.html new file mode 100644 index 0000000000..9bd3b19236 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/localecompare/index.html @@ -0,0 +1,159 @@ +--- +title: String.prototype.localeCompare() +slug: Web/JavaScript/Reference/Global_Objects/String/localeCompare +translation_of: Web/JavaScript/Reference/Global_Objects/String/localeCompare +--- +<div>{{JSRef}}</div> + +<p>The <strong><code>localeCompare()</code></strong> 메서드는 기준 문자열과 비교했을 때 비교 대상 문자열이 정렬상 전에 오는지, 후에 오는지 혹은 같은 순서에 배치되는지를 알려주는 숫자를 리턴합니다.</p> + +<p>The new <code>locales</code> and <code>options</code> arguments let applications specify the language whose sort order should be used and customize the behavior of the function. In older implementations, which ignore the <code>locales</code> and <code>options</code> arguments, the locale and sort order used are entirely implementation dependent.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>referenceStr</var>.localeCompare(<var>compareString</var>[, <var>locales</var>[, <var>options</var>]])</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<p>Check the <a href="#Browser_compatibility">Browser compatibility</a> section to see which browsers support the <code>locales</code> and <code>options</code> arguments, and the <a href="#Checking_for_support_for_locales_and_options_arguments">Checking for support for <code>locales</code> and <code>options</code> arguments</a> for feature detection.</p> + +<dl> + <dt><code>compareString</code></dt> + <dd>The string against which the referring string is compared</dd> +</dl> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator', 'Parameters')}}</div> + +<h3 id="Return_value">Return value</h3> + +<p>A <strong>negative</strong> number if the reference string occurs before the compare string; <strong>positive</strong> if the reference string occurs after the compare string; <strong>0</strong> if they are equivalent.</p> + +<h2 id="Description">Description</h2> + +<p>Returns an integer indicating whether the <strong>referenceStr</strong> comes before, after or is equivalent to the <strong>compareStr</strong>.</p> + +<ul> + <li>Negative when the <strong>referenceStr</strong> occurs before <strong>compareStr</strong></li> + <li>Positive when the <strong>referenceStr</strong> occurs after <strong>compareStr</strong></li> + <li>Returns 0 if they are equivalent</li> +</ul> + +<p><strong>DO NOT rely on exact return values of -1 or 1. </strong>Negative and positive integer results vary between browsers (as well as between browser versions) because the W3C specification only mandates negative and positive values. Some browsers may return -2 or 2 or even some other negative or positive value.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_localeCompare()">Using <code>localeCompare()</code></h3> + +<pre class="brush: js">// The letter "a" is before "c" yielding a negative value +'a'.localeCompare('c'); // -2 or -1 (or some other negative value) + +// Alphabetically the word "check" comes after "against" yielding a positive value +'check'.localeCompare('against'); // 2 or 1 (or some other positive value) + +// "a" and "a" are equivalent yielding a neutral value of zero +'a'.localeCompare('a'); // 0 +</pre> + +<h3 id="Sort_an_array">Sort an array</h3> + +<p><code>localeCompare</code> enables a case-insensitive sort of an array.</p> + +<pre class="brush: js">var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu']; +items.sort((a, b) => a.localeCompare(b)); // ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé'] +</pre> + +<h3 id="Check_browser_support_for_extended_arguments">Check browser support for extended arguments</h3> + +<p>The <code>locales</code> and <code>options</code> arguments are not supported in all browsers yet. To check whether an implementation supports them, use the "i" argument (a requirement that illegal language tags are rejected) and look for a {{jsxref("RangeError")}} exception:</p> + +<pre class="brush: js">function localeCompareSupportsLocales() { + try { + 'foo'.localeCompare('bar', 'i'); + } catch (e) { + return e.name === 'RangeError'; + } + return false; +} +</pre> + +<h3 id="Using_locales">Using <code>locales</code></h3> + +<p>The results provided by <code>localeCompare()</code> vary between languages. In order to get the sort order of the language used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the <code>locales</code> argument:</p> + +<pre class="brush: js">console.log('ä'.localeCompare('z', 'de')); // a negative value: in German, ä sorts before z +console.log('ä'.localeCompare('z', 'sv')); // a positive value: in Swedish, ä sorts after z +</pre> + +<h3 id="Using_options">Using <code>options</code></h3> + +<p>The results provided by <code>localeCompare()</code> can be customized using the <code>options</code> argument:</p> + +<pre class="brush: js">// in German, ä has a as the base letter +console.log('ä'.localeCompare('a', 'de', { sensitivity: 'base' })); // 0 + +// in Swedish, ä and a are separate base letters +console.log('ä'.localeCompare('a', 'sv', { sensitivity: 'base' })); // a positive value +</pre> + +<h2 id="Performance">Performance</h2> + +<p>When comparing large numbers of strings, such as in sorting large arrays, it is better to create an {{jsxref("Global_Objects/Collator", "Intl.Collator")}} object and use the function provided by its {{jsxref("Collator.prototype.compare", "compare")}} property.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.9', 'String.prototype.localeCompare')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES Int 1.0', '#sec-13.1.1', 'String.prototype.localeCompare')}}</td> + <td>{{Spec2('ES Int 1.0')}}</td> + <td><code>locale</code> and <code>option</code> parameter definitions.</td> + </tr> + <tr> + <td>{{SpecName('ES Int 2.0', '#sec-13.1.1', 'String.prototype.localeCompare')}}</td> + <td>{{Spec2('ES Int 2.0')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sec-String.prototype.localeCompare', 'String.prototype.localeCompare')}}</td> + <td>{{Spec2('ES Int Draft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.String.localeCompare")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/match/index.html b/files/ko/web/javascript/reference/global_objects/string/match/index.html new file mode 100644 index 0000000000..e1031b8a0e --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/match/index.html @@ -0,0 +1,156 @@ +--- +title: String.prototype.match() +slug: Web/JavaScript/Reference/Global_Objects/String/match +translation_of: Web/JavaScript/Reference/Global_Objects/String/match +--- +<div>{{JSRef}}</div> + +<div></div> + +<p><strong><code>match()</code></strong> 메서드는 문자열이 정규식과 매치되는 부분을 검색합니다.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><var>str</var>.match(<var>regexp</var>)</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>regexp</code></dt> + <dd>정규식 개체입니다. RegExp가 아닌 객체 obj가 전달되면, <code>new RegExp(obj)</code>를 사용하여 암묵적으로 {{jsxref("RegExp")}}로 변환됩니다. 매개변수를 전달하지 않고 match()를 사용하면, 빈 문자열:[""]이 있는 {{jsxref("Array")}}가 반환됩니다.</dd> +</dl> + +<h3 id="결과_값">결과 값</h3> + +<p>문자열이 정규식과 일치하면, 일치하는 전체 문자열을 첫 번째 요소로 포함하는 {{jsxref("Array")}}를 반환한 다음 괄호 안에 캡처된 결과가 옵니다. 일치하는 것이 없으면 {{jsxref("null")}}이 반환됩니다.</p> + +<h2 id="설명">설명</h2> + +<p>정규식에 <code>g</code> 플래그가 포함되어있지 않으면, <code>str.match()</code> 는 {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}}와 같은 결과를 반환합니다. 반환된 {{jsxref("Array")}}는 원래 문자열의 값을 가지는 <code>input</code> 속성을 포함합니다. 그리고 문자열에서 제로 베이스의 인덱스를 나타내는 <code>index</code> 속성 또한 포함합니다.</p> + +<p>정규식에 <code>g</code> 플래그가 포함되어 있으면, 일치는 객체가 아닌 일치하는 하위 문자열을 포함하는 {{jsxref("Array")}}를 반환합니다. 캡처된 그룹은 반환되지 않습니다. 일치하는 것이 없으면 null이 반환됩니다.</p> + +<h3 id="이것도_보세요_RegExp_메서드">이것도 보세요: <code>RegExp</code> 메서드</h3> + +<ul> + <li>문자열이 정규표현식{{jsxref("RegExp")}}과 일치하는지 여부를 알아야할 때, {{jsxref("RegExp.prototype.test()", "RegExp.test()")}}을 이용해보세요.</li> + <li>일치하는 것 중 제일 첫번째 것만 알고싶을 때, {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}}을 대신에 사용하고 싶을겁니다.</li> + <li>캡처 그룹을 알고 싶고 전역 플래그가 셋팅되어 있다면, {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}}을 대신에 사용해야합니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="match()_사용하기"><code>match()</code> 사용하기</h3> + +<p>다음 예제에서는, <code>match()</code>를 사용하여 <code>'Chapter'</code> 라는 단어와 그에 이어지는 1 이상의 숫자, 그리고 그에 이어서 소숫점, 숫자 형태가 반복되는 문자열을 찾는다. 이 정규표현식은 i 플래그를 사용함으로써, 대소문자 구분 없이 찾고자 하는 문자열을 찾는다.</p> + +<pre class="brush: js">var str = 'For more information, see Chapter 3.4.5.1'; +var re = /see (chapter \d+(\.\d)*)/i; +var found = str.match(re); + +console.log(found); + +// logs [ 'see Chapter 3.4.5.1', +// 'Chapter 3.4.5.1', +// '.1', +// index: 22, +// input: 'For more information, see Chapter 3.4.5.1' ] + +// 'see Chapter 3.4.5.1'는 완전한 매치 상태임. +// 'Chapter 3.4.5.1'는 '(chapter \d+(\.\d)*)' 부분에 의해 발견된 것임. +// '.1' 는 '(\.\d)'를 통해 매치된 마지막 값임. +// 'index' 요소가 (22)라는 것은 0에서부터 셀 때 22번째 위치부터 완전 매치된 문자열이 나타남을 의미함. +// 'input' 요소는 입력된 원래 문자열을 나타냄.</pre> + +<h3 id="match()와_함께_글로벌(g)_및_대소문자_무시(i)_플래그_사용하기"><code>match()</code>와 함께 글로벌(g) 및 대/소문자 무시(i) 플래그 사용하기</h3> + +<p>다음 예제는 글로벌(g) 및 대/소문자 무시(i) 플래그를 사용하여 <code>match()</code>를 사용하는 방법을 보여준다. A부터 E 까지의 모든 문자와 a부터 e 까지의 모든 문자가 배열의 각 원소를 구성하는 형태로 반환된다.</p> + +<pre class="brush: js">var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'; +var regexp = /[A-E]/gi; +var matches_array = str.match(regexp); + +console.log(matches_array); +// ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e'] +</pre> + +<h3 id="매개변수_없이_match()_사용하기">매개변수 없이 <code>match()</code> 사용하기</h3> + +<pre class="brush: js">var str = "Nothing will come of nothing."; + +str.match(); // returns [""]</pre> + +<h3 id="정규표현식이_아닌_객체를_매개변수로_사용하기">정규표현식이 아닌 객체를 매개변수로 사용하기</h3> + +<p>매개변수가 문자열이나 숫자(Number)이면, 해당 매개변수는 내부적으로 new RegExp(obj)를 사용하여 {{jsxref("RegExp")}}로 변환된다. 만약 매개변수가 플러스 기호와 이어지는 숫자형이라면, RegExp() 매서드는 플러스 기호를 무시한다. </p> + +<pre class="brush: js">var str1 = "NaN means not a number. Infinity contains -Infinity and +Infinity in JavaScript.", + str2 = "My grandfather is 65 years old and My grandmother is 63 years old.", + str3 = "The contract was declared null and void."; +str1.match("number"); // "number"는 문자열임. ["number"]를 반환함. +str1.match(NaN); // NaN 타입은 숫자형임. ["NaN"]을 반환함. +str1.match(Infinity); // Infinity 타입은 숫자형임. ["Infinity"]를 반환함. +str1.match(+Infinity); // ["Infinity"]를 반환함. +str1.match(-Infinity); // ["-Infinity"]를 반환함. +str2.match(65); // ["65"]를 반환함 +str2.match(+65); // 플러스 기호가 붙은 숫자형. ["65"]를 반환함. +str3.match(null); // ["null"]을 반환함.</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.10', 'String.prototype.match')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.match', 'String.prototype.match')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.match', 'String.prototype.match')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">이 페이지의 호환성 표는 구조화된 데이터를 기반으로 작성하였습니다. 데이터를 제공하고 싶으시다면, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>를 체크하시고, 풀 리퀘스트를 보내주시기 바랍니다.</p> + +<p>{{Compat("javascript.builtins.String.match")}}</p> + +<h2 id="Firefox-specific_notes">Firefox-specific notes</h2> + +<ul> +</ul> + +<ul> + <li><code>flags</code> was a non standard second argument only available in Gecko : <var>str</var>.match(<var>regexp, flags</var>)</li> + <li>Starting with Gecko 27 {{geckoRelease(27)}}, this method has been adjusted to conform with the ECMAScript specification. When <code>match()</code> is called with a global regular expression, the {{jsxref("RegExp.lastIndex")}} property (if specified) will be reset to <code>0</code> ({{bug(501739)}}).</li> + <li>Starting with Gecko 39 {{geckoRelease(39)}}, the non-standard <code>flags</code> argument is deprecated and throws a console warning ({{bug(1142351)}}).</li> + <li>Starting with Gecko 47 {{geckoRelease(47)}}, the non-standard <code>flags</code> argument is no longer supported in non-release builds and will soon be removed entirely ({{bug(1245801)}}).</li> + <li>Starting with Gecko 49 {{geckoRelease(49)}}, the non-standard <code>flags</code> argument is no longer supported ({{bug(1108382)}}).</li> +</ul> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("RegExp")}}</li> + <li>{{jsxref("RegExp.prototype.exec()")}}</li> + <li>{{jsxref("RegExp.prototype.test()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/normalize/index.html b/files/ko/web/javascript/reference/global_objects/string/normalize/index.html new file mode 100644 index 0000000000..d44f9bec99 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/normalize/index.html @@ -0,0 +1,163 @@ +--- +title: String.prototype.normalize() +slug: Web/JavaScript/Reference/Global_Objects/String/normalize +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Prototype + - Reference + - String + - Unicode +translation_of: Web/JavaScript/Reference/Global_Objects/String/normalize +--- +<div>{{JSRef}}</div> + +<p><strong><code>normalize()</code></strong> 메서드는 주어진 문자열을 유니코드 정규화 방식(Unicode Normalization Form)에 따라 정규화된 형태로 반환합니다. 만약 주어진 값이 문자열이 아닐 경우에는 우선 문자열로 변환 후 정규화합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-normalize.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>str</var>.normalize([<var>form</var>])</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>form</code></dt> + <dd>유니코드 정규화 방식을 지정합니다. <code>"NFC"</code>, <code>"NFD"</code>, <code>"NFKC"</code>, <code>"NFKD"</code> 중 하나이며, 생략되거나 {{jsxref("undefined")}} 일 경우 <code>"NFC"</code>가 사용됩니다. + <ul> + <li><code>NFC</code> — 정규형 정준 결합(Normalization Form Canonical Composition).</li> + <li><code>NFD</code> — 정규형 정준 분해(Normalization Form Canonical Decomposition).</li> + <li><code>NFKC</code> — 정규형 호환성 결합(Normalization Form Compatibility Composition).</li> + <li><code>NFKD</code> — 정규형 호환성 분해(Normalization Form Compatibility Decomposition).</li> + </ul> + </dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 문자열을 유니코드 정규화 방식에 따라 정규화된 문자열로 반환합니다.</p> + +<h3 id="예외">예외</h3> + +<dl> + <dt>{{jsxref("RangeError")}}</dt> + <dd><code>form</code>이 위에서 명시된 값 중 하나가 아닐 경우 {{jsxref("RangeError")}} 에러가 발생합니다.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p><code>normalize()</code> 메서드는 문자열을 유니코드 정규화 방식에 따라 정규화된 형태로 반환합니다. 문자열의 값 자체에는 영향을 주지 않습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="normalize()_사용하기"><code>normalize()</code> 사용하기</h3> + +<pre class="brush: js">// 원본 문자열 + +// U+1E9B: LATIN SMALL LETTER LONG S WITH DOT ABOVE +// U+0323: COMBINING DOT BELOW +var str = '\u1E9B\u0323'; + + +// 정규형 정준 결합 (NFC) + +// U+1E9B: LATIN SMALL LETTER LONG S WITH DOT ABOVE +// U+0323: COMBINING DOT BELOW +str.normalize('NFC'); // '\u1E9B\u0323' +str.normalize(); // 위와 같은 결과 + + +// 정규형 정준 분해 (NFD) + +// U+017F: LATIN SMALL LETTER LONG S +// U+0323: COMBINING DOT BELOW +// U+0307: COMBINING DOT ABOVE +str.normalize('NFD'); // '\u017F\u0323\u0307' + + +// 정규형 호환성 결합 (NFKC) + +// U+1E69: LATIN SMALL LETTER S WITH DOT BELOW AND DOT ABOVE +str.normalize('NFKC'); // '\u1E69' + + +// 정규형 호환성 분해 (NFKD) + +// U+0073: LATIN SMALL LETTER S +// U+0323: COMBINING DOT BELOW +// U+0307: COMBINING DOT ABOVE +str.normalize('NFKD'); // '\u0073\u0323\u0307' +</pre> + +<h3 id="한글에_normalize()_사용하기">한글에 <code>normalize()</code> 사용하기</h3> + +<pre class="brush: js">// 결합된 한글 문자열 + +// U+D55C: 한(HANGUL SYLLABLE HAN) +// U+AE00: 글(HANGUL SYLLABLE GEUL) +var first = '\uD55C\uAE00'; + + +// 정규형 정준 분해 (NFD) +// 정준 분해 결과 초성, 중성, 종성의 자소분리가 일어납니다. +// 일부 브라우저에서는 결과값 '한글'이 자소분리된 상태로 보여질 수 있습니다. + +// U+1112: ᄒ(HANGUL CHOSEONG HIEUH) +// U+1161: ᅡ(HANGUL JUNGSEONG A) +// U+11AB: ᆫ(HANGUL JONGSEONG NIEUN) +// U+1100: ᄀ(HANGUL CHOSEONG KIYEOK) +// U+1173: ᅳ(HANGUL JUNGSEONG EU) +// U+11AF: ᆯ(HANGUL JONGSEONG RIEUL) +var second = first.normalize('NFD'); // '\u1112\u1161\u11AB\u1100\u1173\u11AF' + + +// 정규형 정준 결합 (NFC) +// 정준 결합 결과 자소분리 되었던 한글이 결합됩니다. + +// U+D55C: 한(HANGUL SYLLABLE HAN) +// U+AE00: 글(HANGUL SYLLABLE GEUL) +var third = second.normalize('NFC'); // '\uD55C\uAE00' + + +console.log(second === third); // 같은 글자처럼 보이지만 false를 출력합니다. +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-string.prototype.normalize', 'String.prototype.normalize')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.normalize', 'String.prototype.normalize')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.String.normalize")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="http://www.unicode.org/reports/tr15/">Unicode Standard Annex #15, Unicode Normalization Forms</a></li> + <li><a href="http://en.wikipedia.org/wiki/Unicode_equivalence">Unicode equivalence</a></li> + <li><a href="https://ko.wikipedia.org/wiki/%EC%9C%A0%EB%8B%88%EC%BD%94%EB%93%9C_%EC%A0%95%EA%B7%9C%ED%99%94">유니코드 정규화</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/padend/index.html b/files/ko/web/javascript/reference/global_objects/string/padend/index.html new file mode 100644 index 0000000000..1c027c1363 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/padend/index.html @@ -0,0 +1,99 @@ +--- +title: String.prototype.padEnd() +slug: Web/JavaScript/Reference/Global_Objects/String/padEnd +tags: + - JavaScript + - Method + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/padEnd +--- +<div>{{JSRef}}</div> + +<p><strong><code>padEnd()</code></strong> 메서드는 현재 문자열에 다른 문자열을 채워, 주어진 길이를 만족하는 새로운 문자열을 반환합니다. 채워넣기는 대상 문자열의 끝(우측)부터 적용됩니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-padend.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>str</var>.padEnd(<var>targetLength</var> [, <var>padString</var>])</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>targetLength</code></dt> + <dd>목표 문자열 길이. 현재 문자열의 길이보다 작다면 채워넣지 않고 그대로 반환.</dd> + <dt><code>padString</code> {{optional_inline}}</dt> + <dd>현재 문자열에 채워넣을 다른 문자열. 문자열이 너무 길어 목표 문자열 길이를 초과한다면 좌측 일부를 잘라서 넣음. 기본값은 " ". (U+0020)</dd> +</dl> + +<h3 id="반환값">반환값</h3> + +<p>끝부터 주어진 문자열로 채워 목표 길이를 만족하는 {{jsxref("String")}}</p> + +<h2 id="예시">예시</h2> + +<pre class="brush: js">'abc'.padEnd(10); // "abc " +'abc'.padEnd(10, "foo"); // "abcfoofoof" +'abc'.padEnd(6, "123456"); // "abc123" +'abc'.padEnd(1); // "abc"</pre> + +<h2 id="폴리필">폴리필</h2> + +<p>다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 플랫폼에서도 <code>String.prototype.padStart()</code> 메서드를 사용할 수 있습니다.</p> + +<pre class="brush: js">// https://github.com/uxitten/polyfill/blob/master/string.polyfill.js +// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd +if (!String.prototype.padEnd) { + String.prototype.padEnd = function padEnd(targetLength,padString) { + targetLength = targetLength>>0; //floor if number or convert non-number to 0; + padString = String((typeof padString !== 'undefined' ? padString : ' ')); + if (this.length > targetLength) { + return String(this); + } + else { + targetLength = targetLength-this.length; + if (targetLength > padString.length) { + padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed + } + return String(this) + padString.slice(0,targetLength); + } + }; +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.padend', 'String.prototype.padEnd')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Initial definition in ECMAScript 2017.</td> + </tr> + <tr> + <td>{{SpecName('ES8', '#sec-string.prototype.padend', 'String.prototype.padEnd')}}</td> + <td>{{Spec2('ES8')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.String.padEnd")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("String.prototype.padStart()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/padstart/index.html b/files/ko/web/javascript/reference/global_objects/string/padstart/index.html new file mode 100644 index 0000000000..eff03dd4ac --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/padstart/index.html @@ -0,0 +1,104 @@ +--- +title: String.prototype.padStart() +slug: Web/JavaScript/Reference/Global_Objects/String/padStart +tags: + - JavaScript + - Method + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/padStart +--- +<div>{{JSRef}}</div> + +<p><strong><code>padStart()</code></strong> 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환합니다. 채워넣기는 대상 문자열의 시작(좌측)부터 적용됩니다.</p> + +<p> </p> + +<div>{{EmbedInteractiveExample("pages/js/string-padstart.html")}}</div> + + + +<p> </p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>str</var>.padStart(<var>targetLength</var> [, <var>padString</var>])</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>targetLength</code></dt> + <dd>목표 문자열 길이. 현재 문자열의 길이보다 작다면 채워넣지 않고 그대로 반환.</dd> + <dt><code>padString</code> {{optional_inline}}</dt> + <dd>현재 문자열에 채워넣을 다른 문자열. 문자열이 너무 길어 목표 문자열 길이를 초과한다면 좌측 일부를 잘라서 넣음. 기본값은 " ". (U+0020)</dd> +</dl> + +<h3 id="반환값">반환값</h3> + +<p>시작점부터 주어진 문자열로 채워 목표 길이를 만족하는 {{jsxref("String")}}.</p> + +<h2 id="예시">예시</h2> + +<pre class="brush: js">'abc'.padStart(10); // " abc" +'abc'.padStart(10, "foo"); // "foofoofabc" +'abc'.padStart(6,"123465"); // "123abc" +'abc'.padStart(8, "0"); // "00000abc" +'abc'.padStart(1); // "abc"</pre> + +<h2 id="폴리필">폴리필</h2> + +<p>다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 플랫폼에서도 <code>String.prototype.padStart()</code> 메서드를 사용할 수 있습니다.</p> + +<pre class="brush: js">// https://github.com/uxitten/polyfill/blob/master/string.polyfill.js +// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart +if (!String.prototype.padStart) { + String.prototype.padStart = function padStart(targetLength,padString) { + targetLength = targetLength>>0; //truncate if number or convert non-number to 0; + padString = String((typeof padString !== 'undefined' ? padString : ' ')); + if (this.length > targetLength) { + return String(this); + } + else { + targetLength = targetLength-this.length; + if (targetLength > padString.length) { + padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed + } + return padString.slice(0,targetLength) + String(this); + } + }; +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.padstart', 'String.prototype.padStart')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Initial definition in ECMAScript 2017.</td> + </tr> + <tr> + <td>{{SpecName('ES8', '#sec-string.prototype.padstart', 'String.prototype.padStart')}}</td> + <td>{{Spec2('ES8')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.String.padStart")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("String.prototype.padEnd()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/prototype/index.html b/files/ko/web/javascript/reference/global_objects/string/prototype/index.html new file mode 100644 index 0000000000..707680d3c4 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/prototype/index.html @@ -0,0 +1,218 @@ +--- +title: String.prototype +slug: Web/JavaScript/Reference/Global_Objects/String/prototype +tags: + - JavaScript + - Property + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String +--- +<div>{{JSRef("Global_Objects", "String")}}</div> + +<h2 id="Summary" name="Summary">요약</h2> + +<p><strong><code>String.prototype</code></strong> 프라퍼티는 {{jsxref("Global_Objects/String", "String")}} 프로토타입 오브젝트를 표현하고 있습니다.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Description" name="Description">설명</h2> + +<p>모든 {{jsxref("Global_Objects/String", "String")}} 인스턴스들은 <code>String.prototype</code>를 상속합니다. <code>String</code> 프라퍼티 오브젝트를 변경하면, 그 변경은 모든 {{jsxref("Global_Objects/String", "String")}} 인스턴스들에 영향을 주게 됩니다.</p> + +<h2 id="Properties" name="Properties">Properties</h2> + +<dl> + <dt><code>String.prototype.constructor</code></dt> + <dd>오브젝트의 프로토타입을 생성하는 함수를 명세합니다.</dd> + <dt>{{jsxref("String.prototype.length")}}</dt> + <dd>문자열의 길이를 반영합니다.</dd> + <dt><code><em>N</em></code></dt> + <dd><em>N</em>번째 위치에 있는 문자에 접근하기 위해 사용합니다. <em>N</em> 은 0과 {{jsxref("String.length", "length")}}보다 작은 값 사이에 있는 양의 정수입니다. 이 퍼라퍼티들은 읽기 전용(read-only) 속성을 가지고 있습니다. </dd> +</dl> + +<h2 id="Methods" name="Methods">메서드</h2> + +<h3 id="Methods_unrelated_to_HTML" name="Methods_unrelated_to_HTML">HTML과 관련이 없는 메서드</h3> + +<dl> + <dt>{{jsxref("String.prototype.charAt()")}}</dt> + <dd>문자열 내 특정 위치(index)에 있는 문자를 반환합니다.</dd> + <dt>{{jsxref("String.prototype.charCodeAt()")}}</dt> + <dd>문자열 내 주어진 위치(index)에 있는 문자의 유니코드 값을 반환합니다.</dd> + <dt>{{jsxref("String.prototype.codePointAt()")}} {{experimental_inline}}</dt> + <dd>주어진 위치에 있는 UTF-16으로 인코딩된 코드 포인터값인 음수가 아닌 정수값을 반환합니다. </dd> + <dt>{{jsxref("String.prototype.concat()")}}</dt> + <dd>두 문자열의 문자를 합쳐서 새로운 문자열로 만든 다음, 그 새로운 문자열을 반환합니다. </dd> + <dt>{{jsxref("String.prototype.includes()")}} {{experimental_inline}}</dt> + <dd>문자열 내에 찾고자 하는 문자열이 있는지를 확인합니다. </dd> + <dt>{{jsxref("String.prototype.endsWith()")}} {{experimental_inline}}</dt> + <dd>문자열에서 특정 문자열로 끝나는지를 확인할 수 있습니다.</dd> + <dt>{{jsxref("String.prototype.indexOf()")}}</dt> + <dd>{{jsxref("Global_Objects/String", "String")}} 오브젝트에 있는 특정 값이 일치하는 첫 번째 인덱스 값을 반환하며, 일치하는 값이 없을 경우에는 -1을 반환합니다.</dd> + <dt>{{jsxref("String.prototype.lastIndexOf()")}}</dt> + <dd><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String" title="String 글로벌 오브젝트는 문자열의 생성자, 또는 문자열의 순서입니다."><code>String</code></a> 오브젝트에서 <code>fromIndex</code>로부터 반대방향으로 찾기 시작하여 특정 값이 일치하는 마지막 인덱스를 반환합니다. 문자열에서 일치하는 특정 값이 없으면 <code>-1</code>을 리턴합니다.</dd> + <dt>{{jsxref("String.prototype.localeCompare()")}}</dt> + <dd>Returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order.</dd> + <dt>{{jsxref("String.prototype.match()")}}</dt> + <dd>Used to match a regular expression against a string.</dd> + <dt>{{jsxref("String.prototype.normalize()")}} {{experimental_inline}}</dt> + <dd>Returns the Unicode Normalization Form of the calling string value.</dd> + <dt><s class="obsoleteElement">{{jsxref("String.prototype.quote()")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Wraps the string in double quotes ("<code>"</code>").</s></dd> + <dt>{{jsxref("String.prototype.repeat()")}} {{experimental_inline}}</dt> + <dd>Returns a string consisting of the elements of the object repeated the given times.</dd> + <dt>{{jsxref("String.prototype.replace()")}}</dt> + <dd>Used to find a match between a regular expression and a string, and to replace the matched substring with a new substring.</dd> + <dt>{{jsxref("String.prototype.search()")}}</dt> + <dd>Executes the search for a match between a regular expression and a specified string.</dd> + <dt>{{jsxref("String.prototype.slice()")}}</dt> + <dd>Extracts a section of a string and returns a new string.</dd> + <dt>{{jsxref("String.prototype.split()")}}</dt> + <dd>Splits a {{jsxref("Global_Objects/String", "String")}} object into an array of strings by separating the string into substrings.</dd> + <dt>{{jsxref("String.prototype.startsWith()")}} {{experimental_inline}}</dt> + <dd>Determines whether a string begins with the characters of another string.</dd> + <dt>{{jsxref("String.prototype.substr()")}}</dt> + <dd>Returns the characters in a string beginning at the specified location through the specified number of characters.</dd> + <dt>{{jsxref("String.prototype.substring()")}}</dt> + <dd>Returns the characters in a string between two indexes into the string.</dd> + <dt>{{jsxref("String.prototype.toLocaleLowerCase()")}}</dt> + <dd>The characters within a string are converted to lower case while respecting the current locale. For most languages, this will return the same as {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}.</dd> + <dt>{{jsxref("String.prototype.toLocaleUpperCase()")}}</dt> + <dd>The characters within a string are converted to upper case while respecting the current locale. For most languages, this will return the same as {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}.</dd> + <dt>{{jsxref("String.prototype.toLowerCase()")}}</dt> + <dd>Returns the calling string value converted to lower case.</dd> + <dt>{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Returns an object literal representing the specified object; you can use this value to create a new object. Overrides the {{jsxref("Object.prototype.toSource()")}} method.</dd> + <dt>{{jsxref("String.prototype.toString()")}}</dt> + <dd>Returns a string representing the specified object. Overrides the {{jsxref("Object.prototype.toString()")}} method.</dd> + <dt>{{jsxref("String.prototype.toUpperCase()")}}</dt> + <dd>Returns the calling string value converted to uppercase.</dd> + <dt>{{jsxref("String.prototype.trim()")}}</dt> + <dd>Trims whitespace from the beginning and end of the string. Part of the ECMAScript 5 standard.</dd> + <dt>{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}</dt> + <dd>Trims whitespace from the left side of the string.</dd> + <dt>{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}</dt> + <dd>Trims whitespace from the right side of the string.</dd> + <dt>{{jsxref("String.prototype.valueOf()")}}</dt> + <dd>Returns the primitive value of the specified object. Overrides the {{jsxref("Object.prototype.valueOf()")}} method.</dd> + <dt>{{jsxref("String.prototype.@@iterator()", "String.prototype[@@iterator]()")}} {{experimental_inline}}</dt> + <dd>Returns a new <code>Iterator</code> object that iterates over the code points of a String value, returning each code point as a String value.</dd> +</dl> + +<h3 id="HTML_wrapper_methods" name="HTML_wrapper_methods">HTML wrapper methods</h3> + +<p>These methods are of limited use, as they provide only a subset of the available HTML tags and attributes.</p> + +<dl> + <dt>{{jsxref("String.prototype.big()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("big")}}</dd> + <dt>{{jsxref("String.prototype.blink()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("blink")}}</dd> + <dt>{{jsxref("String.prototype.bold()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("b")}}</dd> + <dt>{{jsxref("String.prototype.fixed()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("tt")}}</dd> + <dt>{{jsxref("String.prototype.fontcolor()")}} {{deprecated_inline}}</dt> + <dd>{{htmlattrxref("color", "font", "<font color=\"color\">")}}</dd> + <dt>{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}</dt> + <dd>{{htmlattrxref("size", "font", "<font size=\"size\">")}}</dd> + <dt>{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("i")}}</dd> + <dt>{{jsxref("String.prototype.link()")}}</dt> + <dd>{{htmlattrxref("href", "a", "<a href=\"rul\">")}} (link to URL)</dd> + <dt>{{jsxref("String.prototype.small()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("small")}}</dd> + <dt>{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("strike")}}</dd> + <dt>{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("sub")}}</dd> + <dt>{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("sup")}}</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>{{jsxref("Global_Objects/String", "String")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/repeat/index.html b/files/ko/web/javascript/reference/global_objects/string/repeat/index.html new file mode 100644 index 0000000000..8e1d67988b --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/repeat/index.html @@ -0,0 +1,113 @@ +--- +title: String.prototype.repeat() +slug: Web/JavaScript/Reference/Global_Objects/String/repeat +translation_of: Web/JavaScript/Reference/Global_Objects/String/repeat +--- +<div>{{JSRef}}</div> + +<p><strong><code>repeat()</code></strong> 메서드는 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환합니다.</p> + +<h2 id="구문">구문</h2> + +<pre><code><var>str</var>.repeat(<var>count</var>);</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>count</code></dt> + <dd>문자열을 반복할 횟수. 0과 양의 무한대 사이의 정수([0, +∞)).</dd> +</dl> + +<h3 id="반환값">반환값</h3> + +<p>현재 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열.</p> + +<h3 id="예외">예외</h3> + +<ul> + <li>{{jsxref("Errors/Negative_repetition_count", "RangeError")}}: 반복 횟수는 양의 정수여야 함.</li> + <li>{{jsxref("Errors/Resulting_string_too_large", "RangeError")}}: 반복 횟수는 무한대보다 작아야 하며, 최대 문자열 크기를 넘어선 안됨.</li> +</ul> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">'abc'.repeat(-1); // RangeError +'abc'.repeat(0); // '' +'abc'.repeat(1); // 'abc' +'abc'.repeat(2); // 'abcabc' +'abc'.repeat(3.5); // 'abcabcabc' (count will be converted to integer) +'abc'.repeat(1/0); // RangeError + +({ toString: () => 'abc', repeat: String.prototype.repeat }).repeat(2); +// 'abcabc' (repeat() is a generic method) +</pre> + +<h2 id="폴리필">폴리필</h2> + +<p><code>repeat</code>은 ECMAScript 2015 명세에 추가됐습니다. 따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 그러나 아래 코드를 포함하면 지원하지 않는 플랫폼에서도 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">repeat</span></font>을 사용할 수 있습니다.</p> + +<pre dir="rtl"><code>if (!String.prototype.repeat) { + String.prototype.repeat = function(count) { + 'use strict'; + if (this == null) { + throw new TypeError('can\'t convert ' + this + ' to object'); + } + var str = '' + this; + count = +count; + if (count != count) { + count = 0; + } + if (count < 0) { + throw new RangeError('repeat count must be non-negative'); + } + if (count == Infinity) { + throw new RangeError('repeat count must be less than infinity'); + } + count = Math.floor(count); + if (str.length == 0 || count == 0) { + return ''; + } + // Ensuring count is a 31-bit integer allows us to heavily optimize the + // main part. But anyway, most current (August 2014) browsers can't handle + // strings 1 << 28 chars or longer, so: + if (str.length * count >= 1 << 28) { + throw new RangeError('repeat count must not overflow maximum string size'); + } + var maxCount = str.length * count; + count = Math.floor(Math.log(count) / Math.log(2)); + while (count) { + str += str; + count--; + } + str += str.substring(0, maxCount - str.length); + return str; + } +}</code></pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.String.repeat")}}</p> diff --git a/files/ko/web/javascript/reference/global_objects/string/replace/index.html b/files/ko/web/javascript/reference/global_objects/string/replace/index.html new file mode 100644 index 0000000000..3b189bfbf5 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/replace/index.html @@ -0,0 +1,299 @@ +--- +title: String.prototype.replace() +slug: Web/JavaScript/Reference/Global_Objects/String/replace +translation_of: Web/JavaScript/Reference/Global_Objects/String/replace +--- +<div>{{JSRef}}</div> + +<p><strong><code>replace()</code></strong> 메서드는 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환합니다. 그 패턴은 문자열이나 정규식({{jsxref("RegExp")}})이 될 수 있으며, 교체 문자열은 문자열이나 모든 매치에 대해서 호출된 함수일 수 있습니다.</p> + +<p> </p> + +<p>pattern이 문자열 인 경우, 첫 번째 문자열만 치환이 되며 원래 문자열은 변경되지 않습니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/string-replace.html")}}</p> + +<h2 id="구문">구문</h2> + +<pre><code>var newStr = str.replace(regexp|substr, newSubstr|function)</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>regexp</code> (pattern)</dt> + <dd>정규식({{jsxref ( "RegExp")}}) 객체 또는 리터럴. 일치하는 항목은 <code>newSubStr</code> 또는 지정된 함수(<code>function</code>)가 반환 한 값으로 대체됩니다.</dd> + <dt><code>substr</code> (pattern)</dt> + <dd><code>newSubStr</code>로 대체 될 {{jsxref ( "String")}}. 정규식이 아닌 글자 그대로의 문자열로 처리됩니다. 오직 첫 번째 일치되는 문자열만이 교체됩니다.</dd> + <dt><code>newSubStr</code> (replacement)</dt> + <dd>첫번째 파라미터를 대신할 문자열({{jsxref("String")}}). 여러가지 대체 패턴들이 지원됩니다. 아래의 "<a href="#Specifying_a_string_as_a_parameter">매개변수가 <code>string</code>으로 지정되었을 때</a>" 섹션을 참고하세요.</dd> + <dt><code>function</code> (replacement)</dt> + <dd>주어진 <code>regexp</code> 또는 <code>substr</code>에 일치하는 요소를 대체하는 데 사용될 새 하위 문자열을 생성하기 위해 호출되는 함수. 이 함수에 제공되는 인수는 아래 "<a href="#Specifying_a_function_as_a_parameter">매개변수가 <code>function</code>으로 지정되었을 때</a>"단원에서 설명합니다.</dd> +</dl> + +<h3 id="반환값">반환값</h3> + +<p>어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열</p> + +<h2 id="설명">설명</h2> + +<p>이 메서드는 호출된 {{jsxref("String")}} 객체를 바꾸지 않습니다. 단순히 새로운 문자열을 리턴합니다.</p> + +<p>모든 문자열에 대해 검색하고 바꾸려면 정규표현식의 <code>g</code>플래그를 포함하세요.</p> + +<h3 id="매개변수가_string으로_지정되었을_때">매개변수가 <code>string</code>으로 지정되었을 때</h3> + +<p><code>replacement</code> 문자열은 다음과 같은 특수 교체 패턴을 포함할 수 있습니다.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header">Pattern</td> + <td class="header">Inserts</td> + </tr> + <tr> + <td><code>$$</code></td> + <td> "<code>$</code>" 기호를 삽입합니다.</td> + </tr> + <tr> + <td><code>$&</code></td> + <td>매치된 문자열을 삽입합니다.</td> + </tr> + <tr> + <td><code>$`</code></td> + <td>매치된 문자열 앞쪽까지의 문자열을 삽입합니다.</td> + </tr> + <tr> + <td><code>$'</code></td> + <td>매치된 문자열의 문자열을 삽입합니다.</td> + </tr> + <tr> + <td><code>$<em>n</em></code></td> + <td> + <p><em><code>n</code></em>이 1이상 99이하의 정수라면, 첫번째 매개변수로 넘겨진 {{jsxref("RegExp")}}객체에서 소괄호로 묶인 <em><code>n</code></em>번째의 부분 표현식으로 매치된 문자열을 삽입합니다.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="매개변수가_function으로_지정되었을_때">매개변수가 <code>function</code>으로 지정되었을 때</h3> + +<p>두번째 매개변수로 함수를 지정할 수 있습니다. 이 경우, 함수는 정규표현식 매치가 수행된 후 호출될 것입니다. 함수의 반환값은 교체될 문자열이 됩니다. (참고: 윗쪽에서 언급된 특수 교체 패턴은 반환값에 <em>적용되지 않습니다.</em>) 만약 정규표현식의 플래그로 글로벌(<code>g</code>)이 오는 경우, 함수는 매치될 때마다 계속 호출될 것입니다. </p> + +<p>함수의 매개변수들은 다음과 같습니다.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header">Possible name</td> + <td class="header">Supplied value</td> + </tr> + <tr> + <td><code>match</code></td> + <td>매치된 문자열. (윗쪽의 <code>$& </code>표현식으로 매치된 경우와 동일합니다.)</td> + </tr> + <tr> + <td><code>p1,<br> + p2,<br> + ...</code></td> + <td>윗쪽의 $n 표현식과 동일합니다. (<code>$1</code>은 <code>p1</code>, <code>$2</code>는 <code>p2</code>...) 예를 들어, 만약 정규표현식 <code>/(\a+)(\b+)/</code> 이 주어진다면<code><font face="Open Sans, Arial, sans-serif"> </font></code><code>p1</code>은 <code>\a+</code>와 매치되고 <code>p2</code>는 <code>\b+</code>와 매치됩니다.</td> + </tr> + <tr> + <td><code>offset</code></td> + <td>조사된 전체 문자열 중에서 매치된 문자열의 <code>index.</code>(예를 들어, 조사될 전체 문자열이 <code>abcd</code>이고, 매치된 문자열이 <code>bc</code>면 이 매개변수의 값은 1이 됩니다.)</td> + </tr> + <tr> + <td><code>string</code></td> + <td>조사된 전체 문자열 (<code>replace</code>를 호출한 <code>string</code>)</td> + </tr> + </tbody> +</table> + +<p>인수의 정확한 수는 첫 번째 인수가 {{jsxref ( "RegExp")}} 객체인지 아닌지에 따라 다르며, 소괄호로 묶이는 부분표현식의 갯수에 따라 달라집니다.</p> + +<p> </p> + +<p>다음 예제는 <code>newString</code>을 <code>'abc - 12345 - #$*%'</code>로 교체합니다:</p> + +<pre><code>function replacer(match, p1, p2, p3, offset, string) { + // p1 is nondigits, p2 digits, and p3 non-alphanumerics + return [p1, p2, p3].join(' - '); +} +var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer); +console.log(newString); // abc - 12345 - #$*%</code></pre> + +<h2 id="예제">예제</h2> + +<h3 id="replace()의_정규표현식_정의"><code>replace()</code>의 정규표현식 정의</h3> + +<p>다음 예제에서, 대소문자를 구분하지 않는 정규표현식을 <code>replace()</code>에 정의했습니다.</p> + +<pre class="brush: js">var str = 'Twas the night before Xmas...'; +var newstr = str.replace(/xmas/i, 'Christmas'); +console.log(newstr); // Twas the night before Christmas... +</pre> + +<p>'Twas the night before Christmas...'로 출력됩니다.</p> + +<h3 id="global과_ignore를_사용한_replace()"><code>global</code>과 <code>ignore</code>를 사용한 <code>replace()</code></h3> + +<p>Global replace는 정규식으로만 수행 할 수 있습니다. 다음 예제에서 정규 표현식은 replace()가 'apples'를 'oranges'로 바꿀 수 있도록 global 및 ignore case 플래그를 포함합니다.</p> + +<pre class="brush: js">var re = /apples/gi; +var str = 'Apples are round, and apples are juicy.'; +var newstr = str.replace(re, 'oranges'); +console.log(newstr); // oranges are round, and oranges are juicy. +</pre> + +<p>'오렌지는 둥글고 오렌지는 맛있습니다.' 가 출력됩니다.</p> + +<p> </p> + +<h3 id="문자열의_단어_치환">문자열의 단어 치환</h3> + +<p>다음 스크립트는 문자열의 단어를 전환합니다. 대체 텍스트의 경우 스크립트는 <code>$1</code> 와 <code>$2</code> 대체 패턴을 사용합니다.</p> + +<pre class="brush: js">var re = /(\w+)\s(\w+)/; +var str = 'John Smith'; +var newstr = str.replace(re, '$2, $1'); +console.log(newstr); // Smith, John +</pre> + +<p>'Smith, John.'이 출력됩니다.</p> + +<h3 id="Using_an_inline_function_that_modifies_the_matched_characters">Using an inline function that modifies the matched characters</h3> + +<p> </p> + +<p>이 예제에서 문자열의 대문자가 모두 소문자로 변환되고 일치되는 위치 바로 앞에 하이픈이 삽입됩니다. 여기에서 중요한 점은 일치되는 항목이 대체 항목으로 다시 반환되기 전에 추가 작업이 필요하다는 것입니다.</p> + +<p>바꾸기 기능은 일치하는 스니펫을 매개 변수로 받고 이를 사용하여 각 케이스별로 변환한후 반환하기 전에 하이픈을 연결합니다.</p> + +<p> </p> + +<pre class="brush: js">function styleHyphenFormat(propertyName) { + function upperToHyphenLower(match) { + return '-' + match.toLowerCase(); + } + return propertyName.replace(/[A-Z]/g, upperToHyphenLower); +} +</pre> + +<p>Given <code>styleHyphenFormat('borderTop')</code>, this returns 'border-top'.</p> + +<p>Because we want to further transform the <em>result</em> of the match before the final substitution is made, we must use a function. This forces the evaluation of the match prior to the {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} method. If we had tried to do this using the match without a function, the {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} would have no effect.</p> + +<pre class="brush: js">var newString = propertyName.replace(/[A-Z]/g, '-' + '$&'.toLowerCase()); // won't work +</pre> + +<p>This is because <code>'$&'.toLowerCase()</code> would be evaluated first as a string literal (resulting in the same <code>'$&'</code>) before using the characters as a pattern.</p> + +<h3 id="Replacing_a_Fahrenheit_degree_with_its_Celsius_equivalent">Replacing a Fahrenheit degree with its Celsius equivalent</h3> + +<p>The following example replaces a Fahrenheit degree with its equivalent Celsius degree. The Fahrenheit degree should be a number ending with F. The function returns the Celsius number ending with C. For example, if the input number is 212F, the function returns 100C. If the number is 0F, the function returns -17.77777777777778C.</p> + +<p>The regular expression <code>test</code> checks for any number that ends with F. The number of Fahrenheit degree is accessible to the function through its second parameter, <code>p1</code>. The function sets the Celsius number based on the Fahrenheit degree passed in a string to the <code>f2c()</code> function. <code>f2c()</code> then returns the Celsius number. This function approximates Perl's <code>s///e</code> flag.</p> + +<pre class="brush: js">function f2c(x) { + function convert(str, p1, offset, s) { + return ((p1 - 32) * 5/9) + 'C'; + } + var s = String(x); + var test = /(-?\d+(?:\.\d*)?)F\b/g; + return s.replace(test, convert); +} +</pre> + +<h3 id="Use_an_inline_function_with_a_regular_expression_to_avoid_for_loops">Use an inline function with a regular expression to avoid <code>for</code> loops</h3> + +<p>The following example takes a string pattern and converts it into an array of objects.</p> + +<p><strong>Input:</strong></p> + +<p>A string made out of the characters <code>x</code>, <code>-</code> and <code>_</code></p> + +<pre>x-x_ +x---x---x---x--- +x-xxx-xx-x- +x_x_x___x___x___ +</pre> + +<p><strong>Output:</strong></p> + +<p>An array of objects. An <code>'x'</code> denotes an <code>'on'</code> state, a <code>'-'</code> (hyphen) denotes an <code>'off'</code> state and an <code>'_'</code> (underscore) denotes the length of an <code>'on'</code> state.</p> + +<pre class="brush: json">[ + { on: true, length: 1 }, + { on: false, length: 1 }, + { on: true, length: 2 } + ... +] +</pre> + +<p><strong>Snippet:</strong></p> + +<pre class="brush: js">var str = 'x-x_'; +var retArr = []; +str.replace(/(x_*)|(-)/g, function(match, p1, p2) { + if (p1) { retArr.push({ on: true, length: p1.length }); } + if (p2) { retArr.push({ on: false, length: 1 }); } +}); + +console.log(retArr); +</pre> + +<p>This snippet generates an array of 3 objects in the desired format without using a <code>for</code> loop.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.11', 'String.prototype.replace')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.replace', 'String.prototype.replace')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.replace', 'String.prototype.replace')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> </div> + +<div id="compat-mobile">{{Compat("javascript.builtins.String.replace")}}</div> + +<h2 id="Firefox-specific_notes">Firefox-specific notes</h2> + +<ul> + <li>Starting with Gecko 27 {{geckoRelease(27)}}, this method has been adjusted to conform with the ECMAScript specification. When <code>replace()</code> is called with a global regular expression, the {{jsxref("RegExp.lastIndex")}} property (if specified) will be reset to <code>0</code> ({{bug(501739)}}).</li> + <li>Starting with Gecko 39 {{geckoRelease(39)}}, the non-standard <code>flags</code> argument is deprecated and throws a console warning ({{bug(1142351)}}).</li> + <li>Starting with Gecko 47 {{geckoRelease(47)}}, the non-standard <code>flags</code> argument is no longer supported in non-release builds and will soon be removed entirely ({{bug(1245801)}}).</li> + <li>Starting with Gecko 49 {{geckoRelease(49)}}, the non-standard <code>flags</code> argument is no longer supported ({{bug(1108382)}}).</li> +</ul> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("String.prototype.match()")}}</li> + <li>{{jsxref("RegExp.prototype.exec()")}}</li> + <li>{{jsxref("RegExp.prototype.test()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/search/index.html b/files/ko/web/javascript/reference/global_objects/string/search/index.html new file mode 100644 index 0000000000..3d27d812fc --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/search/index.html @@ -0,0 +1,100 @@ +--- +title: String.prototype.search() +slug: Web/JavaScript/Reference/Global_Objects/String/search +translation_of: Web/JavaScript/Reference/Global_Objects/String/search +--- +<div>{{JSRef}}</div> + +<p><strong><code>search()</code></strong> 메서드는 정규 표현식과 이 {{jsxref("String")}} 객체간에 같은 것을 찾기<br> + 위한 검색을 실행한다.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-search.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>str</var>.search(<var>regexp</var>)</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>regexp</code></dt> + <dd>정규 표현식 객체. non-RegExp 객체 <code>obj</code> 가 전달되면, 그것은 <code>new RegExp(obj)</code> 을 이용하여 {{jsxref("RegExp")}} 으로 암묵적으로 변환된다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>정규표현식과 주어진 스트링간에 첫번째로 매치되는 것의 인덱스를 반환한다.<br> + 찾지 못하면 <strong>-1</strong> 를 반환한다.</p> + +<h2 id="설명">설명</h2> + +<p>When you want to know whether a pattern is found and also its index in a string use <code>search()</code> (if you only want to know if it exists, use the similar {{jsxref("RegExp.prototype.test()", "test()")}} method on the RegExp prototype, which returns a boolean); for more information (but slower execution) use {{jsxref("String.prototype.match()", "match()")}} (similar to the regular expression {{jsxref("RegExp.prototype.exec()", "exec()")}} method).</p> + +<h2 id="예">예</h2> + +<h3 id="search()를_이용하기"><code>search()를 이용하기</code></h3> + +<p>The following example searches a string with 2 different regex objects to show a successful search (positive value) vs. an unsuccessful search (-1)</p> + +<pre class="brush: js">var str = "hey JudE"; +var re = /[A-Z]/g; +var re2 = /[.]/g; +console.log(str.search(re)); // returns 4, which is the index of the first capital letter "J" +console.log(str.search(re2)); // returns -1 cannot find '.' dot punctuation</pre> + +<h2 id="사양">사양</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">사양</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.12', 'String.prototype.search')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.search', 'String.prototype.search')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.search', 'String.prototype.search')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.String.search")}}</p> + +<h2 id="Gecko-specific_notes">Gecko-specific notes</h2> + +<ul> + <li><code>flags</code> was a non standard second argument only available in Gecko : <var>str</var>.search(<var>regexp, flags</var>)</li> + <li>Prior to {{Gecko("8.0")}}, <code>search()</code> was implemented incorrectly; when it was called with no parameters or with {{jsxref("undefined")}}, it would match against the string 'undefined', instead of matching against the empty string. This is fixed; now <code>'a'.search()</code> and <code>'a'.search(undefined)</code> correctly return 0.</li> + <li>Starting with Gecko 39 {{geckoRelease(39)}}, the non-standard <code>flags</code> argument is deprecated and throws a console warning ({{bug(1142351)}}).</li> + <li>Starting with Gecko 47 {{geckoRelease(47)}}, the non-standard <code>flags</code> argument is no longer supported in non-release builds and will soon be removed entirely ({{bug(1245801)}}).</li> + <li>Starting with Gecko 49 {{geckoRelease(49)}}, the non-standard <code>flags</code> argument is no longer supported ({{bug(1108382)}}).</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("String.prototype.match()")}}</li> + <li>{{jsxref("RegExp.prototype.exec()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/slice/index.html b/files/ko/web/javascript/reference/global_objects/string/slice/index.html new file mode 100644 index 0000000000..3bd23ace3b --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/slice/index.html @@ -0,0 +1,129 @@ +--- +title: String.prototype.slice() +slug: Web/JavaScript/Reference/Global_Objects/String/slice +tags: + - 메소드 + - 문자열 + - 자바스크립트 + - 프로토타입 +translation_of: Web/JavaScript/Reference/Global_Objects/String/slice +--- +<div>{{JSRef}}</div> + +<p><strong><code>slice()</code></strong> 메소드는 문자열의 일부를 추출하면서 새로운 문자열을 반환합니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/string-slice.html")}}</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox notranslate"><code><var>str</var>.slice(<var>beginIndex</var>[, <var>endIndex</var>])</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>beginIndex</code></dt> + <dd>추출 시작점인 0부터 시작하는 인덱스입니다. 만약 음수라면, beginIndex는 <code>strLength(문자열 길이) + beginIndex</code>로 취급됩니다. (예를 들어 <code>beginIndex</code>가 -3이면 시작점은 <code>strLength - 3</code>).</dd> + <dd>만약 <code>beginIndex</code>가 <code>strLength</code> 보다 크거나 같은 경우, <code>slice()</code>는 빈 문자열을 반환합니다.</dd> + <dt><code>endIndex</code>{{optional_inline}}</dt> + <dd>0부터 시작하는 추출 종료점 인덱스로 그 직전까지 추출됩니다. 인덱스 위치의 문자는 추출에 포함되지 않습니다.</dd> + <dd>만약 <code>endIndex</code>가 생략된다면, <code>silce()</code>는 문자열 마지막까지 추출합니다. 만약 음수라면, endIndex는 <code>strLength(문자열 길이) + endIndex</code> 로 취급됩니다(예를 들어 <code>endIndex</code>가 -3이면 종료점은 <code>strLength - 3</code>).</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>문자열의 추출된 부분을 담는 새로운 문자열이 반환됩니다.</p> + +<h2 id="설명">설명</h2> + +<p><code>slice()</code>는 문자열로부터 텍스트를 추출하고 새 문자열을 반환합니다. 문자열의 변경은 다른 문자열에 영향을 미치지 않습니다.</p> + +<p><code>slice()</code>는 <code>endIndex</code>를 포함하지 않고 추출합니다. <code>str.slice(1, 4)</code>는 두 번째 문자부터 네 번째 문자까지 추출합니다 (1, 2, 3 인덱스 문자).</p> + +<p><code>str.slice(2, -1)</code>는 세 번째 문자부터 문자열의 마지막에서 두 번째 문자까지 추출합니다.</p> + +<h2 id="예시">예시</h2> + +<h3 id="slice를_사용하여_새_문자열_생성하기"><code>slice()</code>를 사용하여 새 문자열 생성하기</h3> + +<p>아래 예시는 새 문자열을 생성하기 위해 <code>slice()</code>를 사용합니다.</p> + +<pre class="brush: js notranslate">var str1 = 'The morning is upon us.', // the length of str1 is 23. + str2 = str1.slice(1, 8), + str3 = str1.slice(4, -2), + str4 = str1.slice(12), + str5 = str1.slice(30); +console.log(str2); // OUTPUT: he morn +console.log(str3); // OUTPUT: morning is upon u +console.log(str4); // OUTPUT: is upon us. +console.log(str5); // OUTPUT: "" +</pre> + +<h3 id="음수_인덱스로_slice_사용하기">음수 인덱스로 <code>slice()</code> 사용하기</h3> + +<p>아래 예시는 <code>slice()</code>에 음수 인덱스를 사용합니다.</p> + +<pre class="brush: js notranslate">var str = 'The morning is upon us.'; +str.slice(-3); // returns 'us.' +str.slice(-3, -1); // returns 'us' +str.slice(0, -1); // returns 'The morning is upon us' +</pre> + +<p>아래의 예시는 시작 인덱스를 찾기 위해 문자열의 끝에서부터 역방향으로 <code>11</code>개를 세고 끝 인덱스를 찾기 위해 문자열의 시작에서부터 정방향으로 <code>16</code>개를 셉니다.</p> + +<pre class="brush: js notranslate"><code>console.log(str.slice(-11, 16)) // => "is u";</code></pre> + +<p>아래에서는 시작 인덱스를 찾기 위해 문자열의 처음부터 정방향으로 <code>11</code>개를 세고 끝 인덱스를 찾기 위해 끝에서부터 <code>7</code>개를 셉니다.</p> + +<pre class="brush: js notranslate"><code>console.log(str.slice(11, -7)) // => "is u";</code> +</pre> + +<p>이 인수는 끝에서부터 5로 역순으로 계산하여 시작 인덱스를 찾은 다음 끝에서부터 1을 거쳐 끝 인덱스를 찾습니다.</p> + +<pre class="brush: js notranslate"><code>console.log(str.slice(-5, -1)) // => "n us";</code> +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.slice', 'String.prototype.slice')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.slice', 'String.prototype.slice')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.13', 'String.prototype.slice')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Compat("javascript.builtins.String.slice")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("String.prototype.substr()")}}</li> + <li>{{jsxref("String.prototype.substring()")}}</li> + <li>{{jsxref("Array.prototype.slice()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/split/index.html b/files/ko/web/javascript/reference/global_objects/string/split/index.html new file mode 100644 index 0000000000..7100e55a50 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/split/index.html @@ -0,0 +1,231 @@ +--- +title: String.prototype.split() +slug: Web/JavaScript/Reference/Global_Objects/String/split +tags: + - JavaScript + - Method + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/split +--- +<div>{{JSRef}}</div> + +<p><strong><code>split()</code></strong> 메서드는 {{jsxref("String")}} 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눕니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-split.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>str</var>.split([<var>separator</var>[, <var>limit</var>]])</pre> + +<div class="warning"> +<p><strong>주의:</strong> 구분자로 빈 문자열(<code>""</code>)을 제공하면, 사용자가 인식하는 문자 하나(<a href="https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries">grapheme cluster</a>) 또는 유니코드 문자(코드포인트) 하나씩으로 나누는 것이 아니라, UTF-16 코드유닛으로 나누게 되며 <a href="http://unicode.org/faq/utf_bom.html#utf16-2">써로게이트 페어</a><sup>surrogate pair</sup>가 망가질 수 있습니다. 스택 오버플로우의 <a href="https://stackoverflow.com/a/34717402">How do you get a string to a character array in JavaScript?</a> 질문도 참고해 보세요.</p> +</div> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>separator</code> {{optional_inline}}</dt> + <dd>원본 문자열을 끊어야 할 부분을 나타내는 문자열을 나타냅니다. 실제 문자열이나 {{jsxref("Global_Objects/RegExp", "정규표현식", "", 1)}}을 받을 수 있습니다. 문자열 유형의 <code>separator</code>가 두 글자 이상일 경우 그 부분 문자열 전체가 일치해야 끊어집니다. <code>separator</code>가 생략되거나 <code>str</code>에 등장하지 않을 경우, 반환되는 배열은 원본 문자열을 유일한 원소로 가집니다. <code>separator</code>가 빈 문자열일 경우 <code>str</code>의 각각의 문자가 배열의 원소 하나씩으로 변환됩니다.</dd> + <dt><code>limit</code> {{optional_inline}}</dt> + <dd> + <p>끊어진 문자열의 최대 개수를 나타내는 정수입니다. 이 매개변수를 전달하면 split() 메서드는 주어진 <code>separator</code>가 등장할 때마다 문자열을 끊지만 배열의 원소가 <code>limit</code>개가 되면 멈춥니다. 지정된 한계에 도달하기 전에 문자열의 끝까지 탐색했을 경우 <code>limit</code>개 미만의 원소가 있을 수도 있습니다. 남은 문자열은 새로운 배열에 포함되지 않습니다.</p> + </dd> +</dl> + +<h3 id="반환값">반환값</h3> + +<p>주어진 문자열을 <code>separator</code>마다 끊은 부분 문자열을 담은 {{jsxref("Array")}}.</p> + +<h2 id="설명">설명</h2> + +<p>문자열에서 <code>separator</code>가 등장하면 해당 부분은 삭제되고 남은 문자열이 배열로 반환됩니다. <code>separator</code>가 등장하지 않거나 생략되었을 경우 배열은 원본 문자열을 유일한 원소로 가집니다. <code>separator</code>가 빈 문자열일 경우, <code>str</code>은 문자열의 모든 문자를 원소로 가지는 배열로 변환됩니다. <code>separator</code>가 원본 문자열의 처음이나 끝에 등장할 경우 반환되는 배열도 빈 문자열로 시작하거나 끝납니다. 그러므로 원본 문자열에 <code>separator</code> 하나만이 포함되어 있을 경우 빈 문자열 두 개를 원소로 가지는 배열이 반환됩니다.</p> + +<p><code>separator</code>가 포획 괄호<sup>capturing parentheses</sup>를 포함하는 정규표현식일 경우, <code>separator</code>가 일치할 때마다 포획 괄호의 (정의되지 않은 경우도 포함한) 결과가 배열의 해당 위치에 포함됩니다.</p> + +<p>{{Note("<code>separator</code>가 배열일 경우 분할에 사용하기 전에 우선 문자열로 변환됩니다.")}}</p> + +<h2 id="예제">예제</h2> + +<h3 id="split()_사용하기"><code>split()</code> 사용하기</h3> + +<p>{{Note("빈 문자열이 주어졌을 경우 <code>split()</code>은 빈 배열이 아니라 빈 문자열을 포함한 배열을 반환합니다. 문자열과 <code>separator</code>가 모두 빈 문자열일 때는 빈 배열을 반환합니다.")}}</p> + +<pre class="brush: js">const myString = ''; +const splits = myString.split(); + +console.log(splits); + +// ↪ [""] +</pre> + +<p>다음 예제에서는 문자열을 주어진 구분자로 끊는 함수를 정의합니다. 문자열을 끊은 다음에는 (끊기 이전의) 원본 문자열과 사용한 구분자, 배열의 길이와 각 원소를 로그로 출력합니다.</p> + +<pre class="brush: js">function splitString(stringToSplit, separator) { + var arrayOfStrings = stringToSplit.split(separator); + + console.log('The original string is: "' + stringToSplit + '"'); + console.log('The separator is: "' + separator + '"'); + console.log('The array has ' + arrayOfStrings.length + ' elements: ' + arrayOfStrings.join(' / ')); +} + +var tempestString = 'Oh brave new world that has such people in it.'; +var monthString = 'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec'; + +var space = ' '; +var comma = ','; + +splitString(tempestString, space); +splitString(tempestString); +splitString(monthString, comma); +</pre> + +<p>위 예제의 출력은 다음과 같습니다.</p> + +<pre>The original string is: "Oh brave new world that has such people in it." +The separator is: " " +The array has 10 elements: Oh / brave / new / world / that / has / such / people / in / it. + +The original string is: "Oh brave new world that has such people in it." +The separator is: "undefined" +The array has 1 elements: Oh brave new world that has such people in it. + +The original string is: "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec" +The separator is: "," +The array has 12 elements: Jan / Feb / Mar / Apr / May / Jun / Jul / Aug / Sep / Oct / Nov / Dec +</pre> + +<h3 id="문자열에서_공백_제거하기">문자열에서 공백 제거하기</h3> + +<p>다음 예제에서 <code>split()</code>은 세미콜론 앞뒤에 각각 0개 이상의 공백이 있는 부분 문자열을 찾고, 있을 경우 문자열에서 세미콜론과 공백을 제거합니다. <code>split()</code>의 결과로 반환된 배열은 <code>nameList</code>에 저장됩니다.</p> + +<pre class="brush: js">var names = 'Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand '; + +console.log(names); + +var re = /\s*(?:;|$)\s*/; +var nameList = names.split(re); + +console.log(nameList); +</pre> + +<p>위 예제는 원본 문자열과 반환된 배열을 각각 한 줄씩 로그로 출력합니다.</p> + +<pre>Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand +[ "Harry Trump", "Fred Barney", "Helen Rigby", "Bill Abel", "Chris Hand", "" ] +</pre> + +<h3 id="끊는_횟수_제한하기">끊는 횟수 제한하기</h3> + +<p>다음 예제에서 <code>split()</code>은 문자열을 공백으로 끊고 처음 3개의 문자열을 반환합니다.</p> + +<pre class="brush: js">var myString = 'Hello World. How are you doing?'; +var splits = myString.split(' ', 3); + +console.log(splits); +</pre> + +<p>위 예제의 로그 출력은 다음과 같습니다.</p> + +<pre>["Hello", "World.", "How"] +</pre> + +<h3 id="RegExp를_사용해_구분자도_결과에_포함하기"><code>RegExp</code>를 사용해 구분자도 결과에 포함하기</h3> + +<p><code>separator</code>가 포획 괄호 <code>()</code>를 포함하는 정규표현식일 경우, 포획된 결과도 배열에 포함됩니다.</p> + +<pre class="brush: js">var myString = 'Hello 1 word. Sentence number 2.'; +var splits = myString.split(/(\d)/); + +console.log(splits); +</pre> + +<p>위 예제의 로그 출력은 다음과 같습니다.</p> + +<pre>[ "Hello ", "1", " word. Sentence number ", "2", "." ] +</pre> + +<h3 id="배열을_구분자로_사용하기">배열을 구분자로 사용하기</h3> + +<pre class="brush: js">var myString = 'this|is|a|Test'; +var splits = myString.split(['|']); + +console.log(splits); //["this", "is", "a", "Test"] + +var myString = 'ca,bc,a,bca,bca,bc'; + +var splits = myString.split(['a','b']); +// <em>myString.split(['a','b'])</em>은 <em>myString.split(String(['a','b']))</em>와 같다 + +console.log(splits); //["c", "c,", "c", "c", "c"] +</pre> + +<h3 id="split()으로_문자열_뒤집기"><code>split()</code>으로 문자열 뒤집기</h3> + +<div class="warning"> +<p>이 방법은 문자열 뒤집기에 효과적인 방법이 아닙니다.</p> + +<pre class="brush: js">var str = 'asdfghjkl'; +var strReverse = str.split('').reverse().join(''); // 'lkjhgfdsa' +// split()에서 반환한 배열에는 reverse()와 join()을 사용할 수 있다 +</pre> + +<p>문자열에 grapheme clusters가 있을 경우, 유니코드 플래그를 설정해도 오류를 일으킵니다(<a href="https://github.com/mathiasbynens/esrever">esrever</a> 등의 라이브러리를 대신 사용하세요).</p> + +<pre class="brush: js">var str = 'résumé'; +var strReverse = str.split(/(?:)/u).reverse().join(''); +// => "́emuśer" +</pre> + +<p><strong>추가:</strong> {{jsxref("Operators/Comparison_Operators", "===", "#Identity_strict_equality_(===)")}} 연산자를 사용하면 원본 문자열이 팰린드롬인지 확인할 수 있습니다.</p> +</div> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>초기 정의. JavaScript 1.1에 구현되었음.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.14', 'String.prototype.split')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.split', 'String.prototype.split')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.split', 'String.prototype.split')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.String.split")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("String.prototype.charAt()")}}</li> + <li>{{jsxref("String.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("Array.prototype.join()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/startswith/index.html b/files/ko/web/javascript/reference/global_objects/string/startswith/index.html new file mode 100644 index 0000000000..41eb064129 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/startswith/index.html @@ -0,0 +1,95 @@ +--- +title: String.prototype.startsWith() +slug: Web/JavaScript/Reference/Global_Objects/String/startsWith +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/startsWith +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><strong><code>startsWith()</code></strong></span><span class="seoSummary"> 메소드는 어떤 문자열이 특정 문자로 시작하는지 확인하여 결과를 <code>true</code> 혹은 <code>false</code>로 반환합니다.</span></p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>str</var>.startsWith(<var>searchString</var>[, <var>position</var>])</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>searchString</code></dt> + <dd>문자열의 시작 지점에서 탐색할 문자열</dd> + <dt><code>position</code> {{optional_inline}}</dt> + <dd><code>searchString</code>을 탐색할 위치. 기본값 0.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>문자열이 검색 문자열로 시작하면 <code>true</code>, 아니면 <code>false</code>.</p> + +<h2 id="설명"><span style="display: none;"> </span><span style="display: none;"> </span>설명</h2> + +<p><code>startsWith</code> 메소드로 어떤 문자열이 다른 문자열로 시작하는지 확인 할 수 있습니다. 대소문자를 구분합니다.</p> + +<h2 id="예시">예시</h2> + +<h3 id="startsWith()_사용하기"><code>startsWith()</code> 사용하기</h3> + +<pre class="brush: js">//startswith +var str = 'To be, or not to be, that is the question.'; + +console.log(str.startsWith('To be')); // true +console.log(str.startsWith('not to be')); // false +console.log(str.startsWith('not to be', 10)); // true +</pre> + +<h2 id="폴리필">폴리필</h2> + +<p><code>startsWith</code> 메소드는 ECMAScript 2015 명세에 포함됐으며, 아직까지 모든 JavaScrpt 구현체가 지원하지 않을 수 있습니다. 그러나 아래 코드 조각을 사용해 폴리필 할 수 있습니다.</p> + +<pre><code>if (!String.prototype.startsWith) { + String.prototype.startsWith = function(search, pos) { + return this.substr(!pos || pos < 0 ? 0 : +pos, search.length) === search; + }; +}</code></pre> + +<p>ES2015 명세를 모두 만족하지만, 더 무거운 폴리필은 <a href="https://github.com/mathiasbynens/String.prototype.startsWith">Mathias Bynens의 GitHub</a> 에서 확인할 수 있습니다.</p> + +<h2 id="명세서">명세서</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.startswith', 'String.prototype.startsWith')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.startswith', 'String.prototype.startsWith')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("javascript.builtins.String.startsWith")}}</div> + +<h2 id="관련_문서">관련 문서</h2> + +<ul> + <li>{{jsxref("String.prototype.endsWith()")}}</li> + <li>{{jsxref("String.prototype.includes()")}}</li> + <li>{{jsxref("String.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.lastIndexOf()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/substr/index.html b/files/ko/web/javascript/reference/global_objects/string/substr/index.html new file mode 100644 index 0000000000..39fe5e126b --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/substr/index.html @@ -0,0 +1,131 @@ +--- +title: String.prototype.substr() +slug: Web/JavaScript/Reference/Global_Objects/String/substr +tags: + - Deprecated + - JavaScript + - Method + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/substr +--- +<div>{{JSRef}}</div> + +<div> </div> + +<div class="warning"> +<p>경고: 엄밀히 말해서 <code>String.prototype.substr()</code> 메서드가 더 이상 사용되지 않는, 즉 "웹 표준에서 제거된" 건 아닙니다. 그러나 <code>substr()</code>이 포함된 ECMA-262 표준의 <a href="https://www.ecma-international.org/ecma-262/9.0/index.html#sec-additional-ecmascript-features-for-web-browsers">부록 B</a>는 다음과 같이 명시하고 있습니다.</p> + +<blockquote>… 본 부록이 포함한 모든 언어 기능과 행동은 하나 이상의 바람직하지 않은 특징을 갖고 있으며 사용처가 없어질 경우 명세에서 제거될 것입니다. …<br> +… 프로그래머는 새로운 ECMAScript 코드를 작성할 때 본 부록이 포함한 기능을 사용하거나 존재함을 가정해선 안됩니다. …</blockquote> +</div> + +<p><strong><code>substr()</code></strong> 메서드는 문자열에서 특정 위치에서 시작하여 특정 문자 수 만큼의 문자들을 반환합니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/string-substr.html")}}</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>str</var>.substr(<var>start</var>[, <var>length</var>])</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>start</code></dt> + <dd>추출하고자 하는 문자들의 시작위치입니다. 만약 음수가 주어진다면, <code>문자열총길이 + start</code>의 값으로 취급합니다. 예를 들면, <code>start</code>에 -3을 설정하면, 자동적으로 <code>문자열총길이 - 3</code>으로 설정하게 됩니다. </dd> + <dt><code>length</code></dt> + <dd>옵션값. 추출할 문자들의 총 숫자.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p><code>start</code>는 문자 인덱스입니다. 문자열에서 첫 번째 문자의 인덱스는 0이며, 마지막 문자의 인덱스는 문자열 전체 길이에서 1을 뺀 값입니다. <code>substr()</code>는<code> start</code>에서 문자들을 추출을 시작하여 <code>length</code>만큼 문자들을 수집합니다.</p> + +<p>만약 <code>start</code> 값이 양수이고 문자열 전체 길이보다 크거가 같을 경우, <code>substr()</code>은 빈 문자열을 반환합니다. </p> + +<p>만약 <code>start</code>가 음수이면, <code>substr()</code>은 문자열 끝에서 <code>start</code> 숫자만큼 뺀 곳에서 시작하게 됩니다. 만약 <code>start</code>가 음수이고 절대값이 문자열 전체보다 크다면, <code>substr()</code>은 문자열의 0 인덱스부터 시작하게 됩니다. (주의: <code>start</code>의 음수값은 Microsoft JScript에서는 위의 설명과 같이 동작하지 않습니다.)</p> + +<p>만약 <code>length</code>가 0 혹은 음수이면, <code>substr()</code>은 빈 문자열을 반환합니다. 만약 <code>length</code>가 생략되면, <code>substr()</code>은 문자열의 끝까지 추출하여 반환합니다. </p> + +<h2 id="예제">예제</h2> + +<h3 id="substr()_사용하기"><code>substr()</code> 사용하기</h3> + +<pre class="brush: js">var str = 'abcdefghij'; + +console.log('(1, 2): ' + str.substr(1, 2)); // '(1, 2): bc' +console.log('(-3, 2): ' + str.substr(-3, 2)); // '(-3, 2): hi' +console.log('(-3): ' + str.substr(-3)); // '(-3): hij' +console.log('(1): ' + str.substr(1)); // '(1): bcdefghij' +console.log('(-20, 2): ' + str.substr(-20, 2)); // '(-20, 2): ab' +console.log('(20, 2): ' + str.substr(20, 2)); // '(20, 2): ' +</pre> + +<h2 id="폴리필">폴리필</h2> + +<p>Microsoft의 JScript는 시작 인덱스에서 음수값을 지원하지 않습니다. 만약 여러분이 이렇게 동작하길 원한다면, 아래 코드를 사용하여 해결할 수 있습니다: </p> + +<pre class="brush: js">// only run when the substr() function is broken +if ('ab'.substr(-1) != 'b') { + /** + * Get the substring of a string + * @param {integer} start where to start the substring + * @param {integer} length how many characters to return + * @return {string} + */ + String.prototype.substr = function(substr) { + return function(start, length) { + // call the original method + return substr.call(this, + // did we get a negative start, calculate how much it is from the beginning of the string + // adjust the start parameter for negative value + start < 0 ? this.length + start : start, + length) + } + }(String.prototype.substr); +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Defined in the (informative) Compatibility Annex B. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-B.2.3', 'String.prototype.substr')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Defined in the (informative) Compatibility Annex B</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.substr', 'String.prototype.substr')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Defined in the (normative) Annex B for Additional ECMAScript Features for Web Browsers</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.substr', 'String.prototype.substr')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Defined in the (normative) Annex B for Additional ECMAScript Features for Web Browsers</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("javascript.builtins.String.substr")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("String.prototype.slice()")}}</li> + <li>{{jsxref("String.prototype.substring()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/substring/index.html b/files/ko/web/javascript/reference/global_objects/string/substring/index.html new file mode 100644 index 0000000000..91d13974c9 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/substring/index.html @@ -0,0 +1,190 @@ +--- +title: String.prototype.substring() +slug: Web/JavaScript/Reference/Global_Objects/String/substring +translation_of: Web/JavaScript/Reference/Global_Objects/String/substring +--- +<div>{{JSRef}}</div> + +<p><strong><code>substring()</code></strong><font><font>메소드는 string 객체의 시작 인덱스로 부터 종료 인덱스 전 까지 문자열의 부분 문자열을 반환합니다. </font></font></p> + +<div>{{EmbedInteractiveExample("pages/js/string-substring.html")}}</div> + + + +<h2 id="사용방법">사용방법 </h2> + +<pre class="syntaxbox"><code><var>str</var>.substring(<var>indexStart</var>[, <var>indexEnd</var>])</code></pre> + +<h3 id="인자값">인자값</h3> + +<dl> + <dt><code><var>indexStart</var></code></dt> + <dd>반환문자열의 시작 인덱스 </dd> + <dt> </dt> + <dt><code><var>indexEnd</var></code></dt> + <dd>옵션. 반환문자열의 마지막 인덱스 (포함하지 않음.)</dd> +</dl> + +<h3 id="반환값">반환값</h3> + +<p>기존문자열의 부분 문자열을 반환합니다. </p> + +<h2 id="Description">Description</h2> + +<p><code>substring()</code> 메서드는 <code><var>indexStart</var></code> 부터 문자를 추출하지만 <code><var>indexEnd</var></code> 가 포함되지 않아도 괜찮습니다. 특징은 아래와 같습니다.</p> + +<ul> + <li>만약 <code><var>indexEnd</var></code> 가 생략된 경우, <code>substring()</code> 문자열의 끝까지 모든 문자를 추출합니다.</li> + <li>만약 <code><var>indexStart</var></code> 가 <code><var>indexEnd</var></code>와 같을 경우, <code>substring()</code> 빈 문자열을 반환합니다.</li> + <li>만약 <code><var>indexStart</var></code> 가 <code><var>indexEnd</var></code>보다 큰 경우, <code>substring()</code> 메서드는 마치 두 개의 인자를 바꾼 듯 작동하게 됩니다. 아래 예제를 보세요.</li> +</ul> + +<p>0보다 작은 인자 값을 가지는 경우에는 0으로, <code>stringName.length</code> 보다 큰 인자 값을 가지는 경우, <code>stringName.length</code> 로 처리됩니다. {{jsxref("NaN")}} 값은 0으로 처리됩니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_substring()">Using <code>substring()</code></h3> + +<p>The following example uses <code>substring()</code> to display characters from the string <code>'Mozilla'</code>:</p> + +<pre class="brush: js">var anyString = 'Mozilla'; + +// Displays 'M' +console.log(anyString.substring(0, 1)); +console.log(anyString.substring(1, 0)); + +// Displays 'Mozill' +console.log(anyString.substring(0, 6)); + +// Displays 'lla' +console.log(anyString.substring(4)); +console.log(anyString.substring(4, 7)); +console.log(anyString.substring(7, 4)); + +// Displays 'Mozilla' +console.log(anyString.substring(0, 7)); +console.log(anyString.substring(0, 10)); +</pre> + +<h3 id="Using_substring()_with_length_property">Using <code>substring()</code> with <code>length</code> property</h3> + +<p>The following example uses the <code>substring()</code> method and {{jsxref("String.length", "length")}} property to extract the last characters of a particular string. This method may be easier to remember, given that you don't need to know the starting and ending indices as you would in the above examples.</p> + +<pre class="brush: js">// Displays 'illa' the last 4 characters +var anyString = 'Mozilla'; +var anyString4 = anyString.substring(anyString.length - 4); +console.log(anyString4); + +// Displays 'zilla' the last 5 characters +var anyString = 'Mozilla'; +var anyString5 = anyString.substring(anyString.length - 5); +console.log(anyString5); +</pre> + +<h3 id="The_difference_between_substring()_and_substr()">The difference between <code>substring()</code> and <code>substr()</code></h3> + +<p>There's a subtle difference between the <code>substring()</code> and {{jsxref("String.substr", "substr()")}} methods, so you should be careful not to get them confused.</p> + +<p>The arguments of <code>substring()</code> represent the starting and ending indexes, while the arguments of <code>substr()</code> represent the starting index and the number of characters to include in the returned string.</p> + +<pre class="brush: js">var text = 'Mozilla'; +console.log(text.substring(2,5)); // => "zil" +console.log(text.substr(2,3)); // => "zil"</pre> + +<h3 id="Differences_between_substring()_and_slice()">Differences between <code>substring()</code> and <code>slice()</code></h3> + +<p>The <code>substring()</code> and {{jsxref("String.slice", "slice()")}} methods are almost identical, but there are a couple of subtle differences between the two, especially in the way negative arguments are dealt with.</p> + +<p>The <code>substring()</code> method swaps its two arguments if <code><var>indexStart</var></code> is greater than <code><var>indexEnd</var></code>, meaning that a string is still returned. The {{jsxref("String.slice", "slice()")}} method returns an empty string if this is the case.</p> + +<pre class="brush: js">var text = 'Mozilla'; +console.log(text.substring(5, 2)); // => "zil" +console.log(text.slice(5, 2)); // => "" +</pre> + +<p>If either or both of the arguments are negative or <code>NaN</code>, the <code>substring()</code> method treats them as if they were <code>0</code>.</p> + +<pre class="brush: js">console.log(text.substring(-5, 2)); // => "Mo" +console.log(text.substring(-5, -2)); // => "" +</pre> + +<p><code>slice()</code> also treats <code>NaN</code> arguments as <code>0</code>, but when it is given negative values it counts backwards from the end of the string to find the indexes.</p> + +<pre class="brush: js">console.log(text.slice(-5, 2)); // => "" +console.log(text.slice(-5, -2)); // => "zil" +</pre> + +<p>See the {{jsxref("String.slice", "slice()")}} page for more examples with negative numbers.</p> + +<h3 id="Replacing_a_substring_within_a_string">Replacing a substring within a string</h3> + +<p>The following example replaces a substring within a string. It will replace both individual characters and substrings. The function call at the end of the example changes the string <code>Brave New World</code> to <code>Brave New Web</code>.</p> + +<pre class="brush: js">// Replaces oldS with newS in the string fullS +function replaceString(oldS, newS, fullS) { + for (var i = 0; i < fullS.length; ++i) { + if (fullS.substring(i, i + oldS.length) == oldS) { + fullS = fullS.substring(0, i) + newS + fullS.substring(i + oldS.length, fullS.length); + } + } + return fullS; +} + +replaceString('World', 'Web', 'Brave New World'); +</pre> + +<p>Note that this can result in an infinite loop if <code>oldS</code> is itself a substring of <code>newS</code> — for example, if you attempted to replace 'World' with 'OtherWorld' here. A better method for replacing strings is as follows:</p> + +<pre class="brush: js">function replaceString(oldS, newS, fullS) { + return fullS.split(oldS).join(newS); +} +</pre> + +<p>The code above serves as an example for substring operations. If you need to replace substrings, most of the time you will want to use {{jsxref("String.prototype.replace()")}}.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.substring', 'String.prototype.substring')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.substring', 'String.prototype.substring')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.15', 'String.prototype.substring')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Implemented in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.String.substring")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("String.prototype.substr()")}} {{deprecated_inline}}</li> + <li>{{jsxref("String.prototype.slice()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/tolowercase/index.html b/files/ko/web/javascript/reference/global_objects/string/tolowercase/index.html new file mode 100644 index 0000000000..d91e48729f --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/tolowercase/index.html @@ -0,0 +1,83 @@ +--- +title: String.prototype.toLowerCase() +slug: Web/JavaScript/Reference/Global_Objects/String/toLowerCase +tags: + - JavaScript + - Method + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/toLowerCase +--- +<div>{{JSRef}}</div> + +<div><strong><code>toLowerCase()</code></strong> 메서드는 문자열을 소문자로 변환해 반환합니다.</div> + +<div> </div> + +<div>{{EmbedInteractiveExample("pages/js/string-tolowercase.html")}}</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>str</var>.toLowerCase()</code></pre> + +<h3 id="반환값">반환값</h3> + +<p>호출 문자열을 소문자로 변환한 새로운 문자열</p> + +<h2 id="설명">설명</h2> + +<p><code>toLowerCase()</code> 메서드는 호출 문자열을 소문자로 변환해 반환합니다. <code>toLowerCase()</code> 는 원래의 <code>str</code>에 영향을 주지 않습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="toLowerCase()"> <code>toLowerCase()</code></h3> + +<pre class="brush: js">console.log('ALPHABET'.toLowerCase()); // 'alphabet' +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">표준</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.16', 'String.prototype.toLowerCase')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.String.toLowerCase")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li> + <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li> + <li>{{jsxref("String.prototype.toUpperCase()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/tosource/index.html b/files/ko/web/javascript/reference/global_objects/string/tosource/index.html new file mode 100644 index 0000000000..d08a2a816a --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/tosource/index.html @@ -0,0 +1,49 @@ +--- +title: String.prototype.toSource() +slug: Web/JavaScript/Reference/Global_Objects/String/toSource +translation_of: Web/JavaScript/Reference/Global_Objects/String/toSource +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>The <strong><code>toSource()</code></strong> method returns a string representing the source code of the object.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><code>String.toSource() +<var>str</var>.toSource() +</code></pre> + +<h3 id="리턴_값">리턴 값</h3> + +<p>호출한 객체의 소스코드가 <code>string</code>으로 보여집니다.</p> + +<h2 id="설명">설명</h2> + +<p><code>toSource()</code> 메소드는 다음 값을 리턴:</p> + +<p>For the built-in {{jsxref("String")}} object, <code>toSource()</code> returns the following string indicating that the source code is not available:</p> + +<pre class="brush: js">function String() { + [native code] +} +</pre> + +<p>For instances of {{jsxref("String")}} or string literals, <code>toSource()</code> returns a string representing the source code.</p> + +<p>This method is usually called internally by JavaScript and not explicitly in code.</p> + +<h2 id="Specifications">Specifications</h2> + +<p>Not part of any standard. Implemented in JavaScript 1.3.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.String.toSource")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/tostring/index.html b/files/ko/web/javascript/reference/global_objects/string/tostring/index.html new file mode 100644 index 0000000000..999d5c0c74 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/tostring/index.html @@ -0,0 +1,59 @@ +--- +title: String.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/String/toString +translation_of: Web/JavaScript/Reference/Global_Objects/String/toString +--- +<div><font><font>{{JSRef}}</font></font></div> + +<p><font><font>이 </font></font><strong><code>toString()</code></strong><font><font>메소드는 지정된 객체를 나타내는 문자열을 반환합니다.</font></font></p> + +<div><font><font>{{EmbedInteractiveExample ( "pages / js / string-tostring.html")}}</font></font></div> + +<h2 id="통사론"><font><font>통사론</font></font></h2> + +<pre class="syntaxbox"><code><var>str</var>.toString()</code></pre> + +<h3 id="반환_값"><font><font>반환 값</font></font></h3> + +<p><font><font>호출 객체를 나타내는 문자열</font></font></p> + +<h2 id="기술"><font><font>기술</font></font></h2> + +<p><font><font>{{jsxref ( "String")}} 오브젝트 </font></font><code>toString()</code><font><font>는 {{jsxref ( "Object")}} 오브젝트 </font><font>의 </font><font>메소드를 </font><font>대체 </font><font>합니다. </font><font>{{jsxref ( "Object.prototype.toString ()")}}을 상속하지 않습니다. </font><font>{{jsxref ( "String")}} 오브젝트의 경우 </font></font><code>toString()</code><font><font>메소드는 </font><font>오브젝트 </font><font>의 문자열 표시를 리턴하며 {{jsxref ( "String.prototype.valueOf ()")}} 메소드와 동일합니다.</font></font></p> + +<h2 id="예"><font><font>예</font></font></h2> + +<h3 id="사용_toString"><font><font>사용 </font></font><code>toString()</code></h3> + +<p><font><font>다음 예제는 {{jsxref ( "String")}} 오브젝트의 문자열 값을 표시합니다.</font></font></p> + +<pre class="brush: js"><font><font>var x = new String ( 'Hello world');</font></font> +<font><font> +console.log (x.toString ()); </font><font>// 'Hello world'를 기록합니다.</font></font> +</pre> + +<h2 id="명세서"><font><font>명세서</font></font></h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col"><font><font>사양</font></font></th> + </tr> + <tr> + <td><font><font>{{SpecName ( 'ESDraft', '# sec-string.prototype.tostring', 'String.prototype.toString')}}}</font></font></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성"><font><font>브라우저 호환성</font></font></h2> + +<p class="hidden"><font><font>이 페이지의 호환성 표는 구조화 된 데이터에서 생성됩니다. </font><font>데이터에 기여하려면 </font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>https://github.com/mdn/browser-compat-data</font></font></a><font><font> 를 확인하고 </font><font>풀 요청을 보내주십시오.</font></font></p> + +<p><font><font>{{Compat ( "javascript.builtins.String.toString")}}</font></font></p> + +<h2 id="또한보십시오"><font><font>또한보십시오</font></font></h2> + +<ul> + <li><font><font>{{jsxref ( "Object.prototype.toSource ()")}}</font></font></li> + <li><font><font>{{jsxref ( "String.prototype.valueOf ()")}}</font></font></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/touppercase/index.html b/files/ko/web/javascript/reference/global_objects/string/touppercase/index.html new file mode 100644 index 0000000000..f6a0c8f05c --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/touppercase/index.html @@ -0,0 +1,105 @@ +--- +title: String.prototype.toUpperCase() +slug: Web/JavaScript/Reference/Global_Objects/String/toUpperCase +tags: + - JavaScript + - Method + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/toUpperCase +--- +<div>{{JSRef}}</div> + +<p><strong><code>toUpperCase()</code></strong> 메서드는 문자열을 대문자로 변환해 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-touppercase.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>str</var>.toUpperCase()</pre> + +<h3 id="반환_값">반환 값</h3> + +<p>대문자로 변환한 새로운 문자열.</p> + +<h3 id="예외">예외</h3> + +<dl> + <dt>{{jsxref("TypeError")}}</dt> + <dd>{{jsxref("Function.prototype.call()")}} 등을 사용해 {{jsxref("null")}}이나 {{jsxref("undefined")}}에서 호출 시.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p><code>toUpperCase()</code> 메서드는 문자열을 대문자로 변환한 값을 반환합니다. JavaScript의 문자열은 불변하므로 원본 문자열에는 영향을 주지 않습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="기본_사용법">기본 사용법</h3> + +<pre class="brush: js">console.log('alphabet'.toUpperCase()); // 'ALPHABET'</pre> + +<h3 id="문자열이_아닌_this의_문자열_변환">문자열이 아닌 <code>this</code>의 문자열 변환</h3> + +<p><code>toUpperCase()</code>의 <code>this</code>가 문자열이 아니고, <code>undefined</code>와 <code>null</code>도 아니면 자동으로 문자열로 변환합니다.</p> + +<pre class="brush: js">const a = String.prototype.toUpperCase.call({ + toString: function toString() { + return 'abcdef'; + } +}); + +const b = String.prototype.toUpperCase.call(true); + +// prints out 'ABCDEF TRUE'. +console.log(a, b); +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.18', 'String.prototype.toUpperCase')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.String.toUpperCase")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li> + <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li> + <li>{{jsxref("String.prototype.toLowerCase()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/trim/index.html b/files/ko/web/javascript/reference/global_objects/string/trim/index.html new file mode 100644 index 0000000000..0f0b71f548 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/trim/index.html @@ -0,0 +1,97 @@ +--- +title: String.prototype.trim() +slug: Web/JavaScript/Reference/Global_Objects/String/Trim +tags: + - ECMAScript 5 + - JavaScript + - Method + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/Trim +--- +<div>{{JSRef}}</div> + +<p><strong><code>trim()</code></strong> 메서드는 문자열 양 끝의 공백을 제거합니다. 공백이란 모든 공백문자(space, tab, NBSP 등)와 모든 개행문자(LF, CR 등)를 의미합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-trim.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>str</var>.trim()</pre> + +<h3 id="반환_값">반환 값</h3> + +<p>양 끝에서 공백을 제거한 새로운 문자열.</p> + +<h2 id="설명">설명</h2> + +<p><code>trim()</code> 메서드는 양끝의 공백을 제거한 문자열을 반환합니다. <code>trim()</code>은 원본 문자열에는 영향을 주지 않습니다. </p> + +<h2 id="예제">예제</h2> + +<h3 id="trim()_사용"><code>trim()</code> 사용</h3> + +<p>아래의 예제는 소문자 문자열 <code>'foo'</code>를 표시합니다.</p> + +<pre class="brush: js">var orig = ' foo '; +console.log(orig.trim()); // 'foo' + +// 한 쪽의 공백만 제거하는 .trim() 예제 + +var orig = 'foo '; +console.log(orig.trim()); // 'foo' +</pre> + +<h2 id="폴리필">폴리필</h2> + +<p>다른 코드 전에 아래 코드를 실행하면 지원하지 않는 환경에서도 <code>String.trim()</code> 을 사용할 수 있습니다.</p> + +<pre class="brush: js">if (!String.prototype.trim) { + String.prototype.trim = function () { + return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); + }; +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">표준</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.20', 'String.prototype.trim')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.8.1.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.trim', 'String.prototype.trim')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.trim', 'String.prototype.trim')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.String.trim")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}</li> + <li>{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/valueof/index.html b/files/ko/web/javascript/reference/global_objects/string/valueof/index.html new file mode 100644 index 0000000000..e8e217d615 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/valueof/index.html @@ -0,0 +1,83 @@ +--- +title: String.prototype.valueOf() +slug: Web/JavaScript/Reference/Global_Objects/String/valueOf +tags: + - 메서드 + - 문자열 + - 자바스크립트 + - 참고 + - 프로토타입 +translation_of: Web/JavaScript/Reference/Global_Objects/String/valueOf +--- +<div>{{JSRef}}</div> + +<p><strong><code>valueOf()</code></strong> 메서드는 {{jsxref("String")}} 객체의 원시값을 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-valueof.html")}}</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>str</var>.valueOf()</code></pre> + +<h3 id="반환_값">반환 값</h3> + +<p>지정된 {{jsxref("String")}} 객체의 원시 값을 나타내는 문자열.</p> + +<h2 id="설명">설명</h2> + +<p>{{jsxref("String")}} 의 <code>valueOf()</code> 메서드는 {{jsxref("String")}} 객체의 원시 값을 문자열 데이터 타입으로 반환 합니다. 이 값은 {{jsxref("String.prototype.toString()")}}.과 동일합니다.</p> + +<p>이 메서드는 보통 자바스크립트에 의해 내부적으로 호출되며, 코드에서 명시적으로 사용하지는 않습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="valueOf_사용"> <code>valueOf()</code> 사용</h3> + +<pre class="brush: js">var x = new String('Hello world'); +console.log(x.valueOf()); // 'Hello world' 가 보여집니다. +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>초기 정의. JavaScript 1.1 에서 구현.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.3', 'String.prototype.valueOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.valueof', 'String.prototype.valueOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.valueof', 'String.prototype.valueOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">이 페이지의 호환성 표는 구조화된 데이터로부터 생성됩니다. 만약 데이터에 기여하고 싶다면, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 을 확인하시고 pull 요청을 보내주세요.</p> + +<p>{{Compat("javascript.builtins.String.valueOf")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("String.prototype.toString()")}}</li> + <li>{{jsxref("Object.prototype.valueOf()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/symbol/for/index.html b/files/ko/web/javascript/reference/global_objects/symbol/for/index.html new file mode 100644 index 0000000000..e489deb27d --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/symbol/for/index.html @@ -0,0 +1,150 @@ +--- +title: Symbol.for() +slug: Web/JavaScript/Reference/Global_Objects/Symbol/for +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/for +--- +<div>{{JSRef}}</div> + +<p><code><strong>Symbol.for(key)</strong></code> 메소드는 runtime-wide 심볼 레지스트리에서 해당 키로 존재하는 심볼을 찾는다. 없으면 전역 심볼 레지시트리에 해당 키로 새로운 심볼을 만들어 준다. </p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><var>Symbol.for(key)</var>;</pre> + +<h3 id="파라미터">파라미터</h3> + +<dl> + <dt>key</dt> + <dd>String, 필수. 심볼의 키 (심볼의 설명을 위해서도 쓰인다).</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>해당 키에 해당하는 심볼이 있다면 반환 없으면 새로운 심볼을 만들고 반환한다.</p> + +<h2 id="설명">설명</h2> + +<p><code>Symbol()과는 다르게</code>, the <code>Symbol.for()</code> 함수는 전역 심볼 레지스트리 리스트에 심볼을 만든다. <code>Symbol.for()는 또한 매 호출마다 새로운 심볼을 만들지 않고 현재 레지스트리에 해당 키를 가진 심볼이 있는지 먼저 검사를 한다. 있다면 그 심볼을 반환한다. 만약 키에 해당하는 심볼이 없다면 </code>Symbol.for()는 새로운 전역 심볼을 만들 것이다.</p> + +<h3 id="전역_심볼_레지스트리">전역 심볼 레지스트리 </h3> + +<p>전역심볼 레지스트리는 다음 레코드 구조를 가진 리스트이고 초기 값은 비어 있다:</p> + +<p>전역심볼 레지스트리의 레코드</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>필드 명</th> + <th>값</th> + </tr> + <tr> + <td>[[key]]</td> + <td>심볼을 구분하기 위해 사용되는 문자열 키</td> + </tr> + <tr> + <td>[[symbol]]</td> + <td>전역으로 저장되는 심볼</td> + </tr> + </tbody> +</table> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">Symbol.for('foo'); // 새로운 전역심볼 생성 +Symbol.for('foo'); // 이미 만들어진 심볼을 검색 + +// 전역심볼은 서로 같고, 지역심볼은 아니다. +Symbol.for('bar') === Symbol.for('bar'); // true +Symbol('bar') === Symbol('bar'); // false + +// 키는 설명하는데 쓰이기도 한다. +var sym = Symbol.for('mario'); +sym.toString(); // "Symbol(mario)" +</pre> + +<p>다른 라이브러리의 전역 심볼들과 당신의 전역 심볼간의 키 충돌을 피하기 위해서는 당신 심볼 앞에 prefix를 두는 것이 좋다:</p> + +<pre class="brush: js">Symbol.for('mdn.foo'); +Symbol.for('mdn.bar'); +</pre> + +<h2 id="명세서">명세서</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-symbol.for', 'Symbol.for')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.for', 'Symbol.for')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatChrome(40) }}</td> + <td>{{ CompatGeckoDesktop("36.0") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("36.0") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Symbol.keyFor()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/symbol/index.html b/files/ko/web/javascript/reference/global_objects/symbol/index.html new file mode 100644 index 0000000000..05b1fdd25b --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/symbol/index.html @@ -0,0 +1,233 @@ +--- +title: Symbol +slug: Web/JavaScript/Reference/Global_Objects/Symbol +tags: + - ECMAScript 2015 + - 심볼 + - 자바스크립트 +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol +--- +<div>{{JSRef}}</div> + +<p><code>Symbol()</code> 함수는 <strong>심볼(symbol)</strong> 형식의 값을 반환하는데, 이 심볼은 내장 객체(built-in objects)의 여러 멤버를 가리키는 정적 프로퍼티와 전역 심볼 레지스트리(global symbol registry)를 가리키는 정적 메서드를 가지며, "<code>new Symbol()</code>" 문법을 지원하지 않아 생성자 측면에서는 불완전한 내장 객체 클래스(built-in object class)와 유사합니다.</p> + +<p><code>Symbol()</code>로부터 반환되는 모든 심볼 값은 고유합니다. 심볼 값은 객체 프로퍼티(object properties)에 대한 식별자로 사용될 수 있습니다; 이것이 심볼 데이터 형식의 유일한 목적입니다. 목적과 용례에 대한 더 자세한 설명은 <a href="https://developer.mozilla.org/en-US/docs/Glossary/Symbol">용어집의 심볼 항목(glossary entry for Symbol)</a>에서 볼 수 있습니다.</p> + +<p><strong>심볼(symbol)</strong> 데이터 형은 원시 데이터 형({{Glossary("Primitive", "primitive data type")}})의 일종입니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-constructor.html")}}</div> + + + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><code>Symbol(<em>[description]</em>)</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>description</code> {{optional_inline}}</dt> + <dd>선택적(optional) 문자열. 디버깅에 사용할 수 있는 심볼에 대한 설명(description)으로 심볼 자체에 접근하는 용도로는 사용할 수 없음.</dd> +</dl> + +<h2 id="설명(Description)">설명(Description)</h2> + +<p>새 원시(primitive) 심볼을 생성하려면, 심볼을 설명하는 선택적(optional) 문자열과 함께 <code>Symbol()</code>을 쓰면됩니다.</p> + +<pre class="brush: js">var sym1 = Symbol(); +var sym2 = Symbol("foo"); +var sym3 = Symbol("foo"); +</pre> + +<p>위의 코드는 세 개의 새 심볼을 생성합니다. <code>Symbol("foo")</code>는 "foo"라는 문자열을 심볼로 강제로 변환시키지 않는다는 점에 유의하시기 바랍니다. 해당 코드는 매 번 새로운 심볼을 생성합니다:</p> + +<pre class="brush: js">Symbol("foo") === Symbol("foo"); // false</pre> + +<p>아래 {{jsxref("Operators/new", "new")}} 연산자를 이용한 문법은 {{jsxref("TypeError")}}를 발생시킬 것입니다:</p> + +<pre class="brush: js">var sym = new Symbol(); // TypeError</pre> + +<p>이는 작성자가 새로운 심볼 값 대신 명시적으로 심볼 래퍼 객체(<code>Symbol</code> wrapper object)를 생성할 수 없게 합니다. 일반적으로 원시 데이터 형에 대한 명시적인 래퍼 객체 생성(예를 들어, <code>new Boolean</code>, <code>new String</code> 또는 <code>new Number</code>와 같은)이 가능하다는 점에 비춰보면 의외일 수 있습니다.</p> + +<p>꼭 심볼 래퍼 객체를 생성하고 싶다면, <code>Object()</code> 함수를 이용할 수 있습니다.</p> + +<pre class="brush: js">var sym = Symbol("foo"); +typeof sym; // "symbol" +var symObj = Object(sym); +typeof symObj; // "object" +</pre> + +<h3 id="전역_심볼_레지스트리_내_공유_심볼">전역 심볼 레지스트리 내 공유 심볼</h3> + +<p><code>Symbol()</code> 함수를 사용한 위의 문법은 코드베이스(codebase) 전체에서 사용 가능한 전역 심볼을 생성하는 것은 아닙니다. 파일 간(across files), 또는 램(realms, 각각이 자체의 전역 범위(scope)를 가지는) 간에도 사용할 수 있는 심볼을 생성하기 위해서는, {{jsxref("Symbol.for()")}}와 {{jsxref("Symbol.keyFor()")}} 메서드를 이용해 전역 심볼 레지스트리에 심볼을 설정하거나 추출해야 합니다.</p> + +<h3 id="객체에서_심볼_속성(symbol_properties)_찾기">객체에서 심볼 속성(symbol properties) 찾기</h3> + +<p>{{jsxref("Object.getOwnPropertySymbols()")}} 메서드는 심볼의 배열을 반환하여 주어진 객체의 심볼 속성을 찾을 수 있게 해줍니다. 모든 객체는 스스로에 대한 심볼 속성이 없는 상태로 초기화되기 때문에 해당 객체에 심볼 속성을 설정하기 전까지는 빈 배열을 반환한다는 점에 유의하시기 바랍니다.</p> + +<h2 id="속성(properties)">속성(properties)</h2> + +<dl> + <dt><code>Symbol.length</code></dt> + <dd>값이 0인 길이 속성</dd> + <dt>{{jsxref("Symbol.prototype")}}</dt> + <dd><code>Symbol</code> 생성자의 프로토타입을 나타냄.</dd> +</dl> + +<h3 id="잘_알려진_심볼들">잘 알려진 심볼들</h3> + +<p>여러분이 정의하는 심볼 외에, 자바스크립트는 ECMAScript 5와 그 이전 버전에서는 개발자에게 제공되지 않았던 언어 내부의 동작을 나타내는 내장(built-in) 심볼을 몇 가지 가지고 있습니다. 다음 속성을 이용해 이들 심볼에 접근할 수 있습니다:</p> + +<h4 id="반복(iteration)_심볼">반복(iteration) 심볼</h4> + +<dl> + <dt>{{jsxref("Symbol.iterator")}}</dt> + <dd>객체의 기본 반복자(default iterator)를 반환하는 메서드.<code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code>에서 사용됨.</dd> + <dt>{{jsxref("Symbol.asyncIterator")}} {{experimental_inline}}</dt> + <dd>객체의 기본 비동기 반복자(default AsyncIterator)를 반환하는 메서드. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await-of"><code>for await of</code></a>에서 사용됨.</dd> +</dl> + +<h4 id="정규표현식_심볼">정규표현식 심볼</h4> + +<dl> + <dt>{{jsxref("Symbol.match")}}</dt> + <dd>문자열과 일치하는(match) 메서드로 객체를 정규표현식으로 사용할 수 있는지 확인하는데도 사용. {{jsxref("String.prototype.match()")}}에서 사용됨.</dd> + <dt>{{jsxref("Symbol.replace")}}</dt> + <dd>문자열 중 일치하는 문자열 일부를 대체하는 메소드. {{jsxref("String.prototype.replace()")}}에서 사용됨.</dd> + <dt>{{jsxref("Symbol.search")}}</dt> + <dd>문자열에서 정규표현식과 일치하는 인덱스(index)를 반환하는 메서드. {{jsxref("String.prototype.search()")}}에서 사용됨.</dd> + <dt>{{jsxref("Symbol.split")}}</dt> + <dd>정규표현식과 일치하는 인덱스에서 문자열을 나누는 메서드. {{jsxref("String.prototype.split()")}}에서 사용됨.</dd> +</dl> + +<h4 id="그_외_심볼들">그 외 심볼들</h4> + +<dl> + <dt>{{jsxref("Symbol.hasInstance")}}</dt> + <dd>생성자 객체(constructor object)가 어떤 객체를 자신의 인스턴스로 인식하는지를 확인하는데 사용하는 메소드. {{jsxref("Operators/instanceof", "instanceof")}}에서 사용됨.</dd> + <dt>{{jsxref("Symbol.isConcatSpreadable")}}</dt> + <dd>객체가 자신의 배열 요소를 직렬로(be flattened) 나타낼 수 있는지 여부를 나타내는 부울 값. {{jsxref("Array.prototype.concat()")}}에서 사용됨.</dd> + <dt>{{jsxref("Symbol.unscopables")}}</dt> + <dd>자신의 속성명 또는 상속된 속성명이 연관 객체(the associated objet)의 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code> 환경 바인딩(envorinment bindings)에서 제외된 객체의 값 (An object value of whose own and inherited property names are excluded from the <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code> environment bindings of the associated object).</dd> + <dt>{{jsxref("Symbol.species")}}</dt> + <dd>파생(derived) 객체를 생성하는데 사용되는 생성자 함수.</dd> + <dt>{{jsxref("Symbol.toPrimitive")}}</dt> + <dd>객체를 원시형(primitive) 값으로 변환하는 메서드.</dd> + <dt>{{jsxref("Symbol.toStringTag")}}</dt> + <dd>객체에 대한 기본 설명(description)으로 사용되는 문자열 값. {{jsxref("Object.prototype.toString()")}}에서 사용됨.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("Symbol.for()", "Symbol.for(key)")}}</dt> + <dd>주어진 키(key)로 현재 존재하는 심볼을 검색하고 찾으면 반환합니다. 존재하지 않으면 주어진 키로 전역 심볼 레지스트리에 새로운 심볼을 생성하고 그 심볼을 반환합니다.</dd> + <dt>{{jsxref("Symbol.keyFor", "Symbol.keyFor(sym)")}}</dt> + <dd>전역 심볼 레지스트리로부터 주어진 심볼에 대한 공유 심볼 키(shared symbol key)를 추출합니다.</dd> +</dl> + +<h2 id="심볼(Symbol)_프로토타입"><code>심볼(Symbol)</code> 프로토타입</h2> + +<p>모든 심볼은 {{jsxref("Symbol.prototype")}}을 상속합니다.</p> + +<h3 id="속성(properties)_2">속성(properties)</h3> + +<p>{{page('ko/Web/JavaScript/Reference/Global_Objects/Symbol/prototype','Properties')}}</p> + +<h3 id="메서드_2">메서드</h3> + +<p>{{page('ko/Web/JavaScript/Reference/Global_Objects/Symbol/prototype','Methods')}}</p> + +<h2 id="예제">예제</h2> + +<h3 id="심볼에_typeof_연산자_사용">심볼에 <code>typeof</code> 연산자 사용</h3> + +<p>{{jsxref("Operators/typeof", "typeof")}} 연산자를 이용해 심볼인지 알 수 있습니다.</p> + +<pre class="brush: js">typeof Symbol() === 'symbol' +typeof Symbol('foo') === 'symbol' +typeof Symbol.iterator === 'symbol' +</pre> + +<h3 id="심볼의_형_변환(type_conversions)">심볼의 형 변환(type conversions)</h3> + +<p>심볼의 형 변환(type conversion)할 때 유의해야 할 사항</p> + +<ul> + <li>심볼을 숫자(number)로 변환하고자 할 때, {{jsxref("TypeError")}}가 발생합니다.<br> + (e.g. <code>+sym</code> or <code>sym | 0</code>).</li> + <li>느슨한 동등(loose equality) 연산자를 사용할 때, <code>Object(sym) == sym</code>는 <code>true</code>를 반환합니다.</li> + <li><code>Symbol("foo") + "bar"</code>는 {{jsxref("TypeError")}} (심볼을 문자열로 변환할 수 없는)를 발생시킵니다. 이는 예를 들자면, 심볼에서 암묵적으로 새로운 문자열 속성명을 생성하지 못하게 합니다.</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion">"보다 안전한" String(sym) 변환("safer" <code>String(sym)</code> conversion)</a>은 심볼에 대해 {{jsxref("Symbol.prototype.toString()")}}을 호출하는 것과 같이 동작하지만, <code>new String(sym)</code>는 오류(error)를 발생시키는 것을 유의하시기 바랍니다.</li> +</ul> + +<h3 id="심볼과_for...in_반복문">심볼과 <code>for...in</code> 반복문</h3> + +<p>심볼은 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a> 반복문 내에서 하나씩 열거할 수 없습니다. 더구나, {{jsxref("Object.getOwnPropertyNames()")}}는 심볼 객체 속성(symbol object properties)을 반환하지 않습니다. 하지만, {{jsxref("Object.getOwnPropertySymbols()")}}를 이용해 이것들을 가져올 수 있습니다.</p> + +<pre class="brush: js">var obj = {}; + +obj[Symbol("a")] = "a"; +obj[Symbol.for("b")] = "b"; +obj["c"] = "c"; +obj.d = "d"; + +for (var i in obj) { + console.log(i); // logs "c" and "d" +}</pre> + +<h3 id="심볼과_JSON.stringify()">심볼과 <code>JSON.stringify()</code></h3> + +<p>심볼을 키로 사용한 속성(symbol-keyed properties)은 <code>JSON.stringify()</code>을 사용할 때 완전히 무시됩니다:</p> + +<pre class="brush: js">JSON.stringify({[Symbol("foo")]: "foo"}); +// '{}'</pre> + +<p>더 자세한 것은 {{jsxref("JSON.stringify()")}}를 참조하시기 바랍니다.</p> + +<h3 id="속성_키로서의_심볼_래퍼_객체(symbol_wrapper_object)">속성 키로서의 심볼 래퍼 객체(symbol wrapper object)</h3> + +<p>심볼 래퍼 객체를 속성 키로 사용하면, 이 객체는 래핑된 심볼로 강제 변환됩니다(When a Symbol wrapper object is used as a property key, this object will be coerced to its wrapped symbol):</p> + +<pre class="brush: js">var sym = Symbol("foo"); +var obj = {[sym]: 1}; +obj[sym]; // 1 +obj[Object(sym)]; // still 1 +</pre> + +<h2 id="명세서">명세서</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-symbol-objects', 'Symbol')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol-objects', 'Symbol')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Symbol")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Glossary/Symbol">Glossary: Symbol data type</a></li> + <li>{{jsxref("Operators/typeof", "typeof")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li> + <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-symbols/">"ES6 In Depth: Symbols" on hacks.mozilla.org</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/symbol/iterator/index.html b/files/ko/web/javascript/reference/global_objects/symbol/iterator/index.html new file mode 100644 index 0000000000..820e63d1cb --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/symbol/iterator/index.html @@ -0,0 +1,95 @@ +--- +title: Symbol.iterator +slug: Web/JavaScript/Reference/Global_Objects/Symbol/iterator +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/iterator +--- +<div>{{JSRef}}</div> + +<p>잘 알려진 <code><strong>Symbol.iterator</strong></code> 심볼은 객체에 대응하는 기본 이터레이터를 지정합니다. <a href="/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a>와 같이 사용됩니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-iterator.html")}}</div> + + + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="설명">설명</h2> + +<p>(<code>for..of</code> 루프의 시작부분과 같이) 객체가 반환될 필요가 있을때는 언제든지<code>@@iterator</code> 메서드는 인수 없이도 호출 할 수 있습니다. 반환된 <strong>iterator</strong>는 반복할 값을 취득하기 위해 사용됩니다.</p> + +<p>{{jsxref("Object")}}와 같이 반복동작을 내장하고 있는 형태도 있지만 그렇지 않은 경우도 있습니다. <code>@@iterator</code> 메서드를 가지고 있는 내장형 타입은 아래와 같습니다.</p> + +<ul> + <li>{{jsxref("Array.@@iterator", "Array.prototype[@@iterator]()")}}</li> + <li>{{jsxref("TypedArray.@@iterator", "TypedArray.prototype[@@iterator]()")}}</li> + <li>{{jsxref("String.@@iterator", "String.prototype[@@iterator]()")}}</li> + <li>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</li> + <li>{{jsxref("Set.@@iterator", "Set.prototype[@@iterator]()")}}</li> +</ul> + +<p>상세한 내용은 <a href="/ko/docs/Web/JavaScript/Reference/Iteration_protocols">반복처리 프로토콜</a>도 확인 해 주시기 바랍니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="유저_정의_이터레이터">유저 정의 이터레이터</h3> + +<p>앞에서 기술한 바와 같이 독자적으로 이터레이터를 만드는 것이 가능합니다.</p> + +<pre class="brush: js">var myIterable = {} +myIterable[Symbol.iterator] = function* () { + yield 1; + yield 2; + yield 3; +}; +[...myIterable] // [1, 2, 3] +</pre> + +<h3 id="비정형_이터레이터">비정형 이터레이터</h3> + +<p>iterable의 <code>@@iterator</code> 메서드가 이터레이터 객체를 반환하지 않는 경우 비정형 이터레이터입니다. 이와 같이 사용하는 경우 실행시 예외 혹은 예상치 못한 버그를 발생할 가능성이 있습니다.</p> + +<pre class="brush: js">var nonWellFormedIterable = {} +nonWellFormedIterable[Symbol.iterator] = () => 1 +[...nonWellFormedIterable] // TypeError: [] is not a function +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상황</th> + <th scope="col">코멘트</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-symbol.iterator', 'Symbol.iterator')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>초기 정의</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.iterator', 'Symbol.iterator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("javascript.builtins.Symbol.iterator")}}</p> + +<h2 id="관련_정보">관련 정보</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Reference/Iteration_protocols">반복처리 프로토콜</a></li> + <li>{{jsxref("Array.@@iterator", "Array.prototype[@@iterator]()")}}</li> + <li>{{jsxref("TypedArray.@@iterator", "TypedArray.prototype[@@iterator]()")}}</li> + <li>{{jsxref("String.@@iterator", "String.prototype[@@iterator]()")}}</li> + <li>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</li> + <li>{{jsxref("Set.@@iterator", "Set.prototype[@@iterator]()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/syntaxerror/index.html b/files/ko/web/javascript/reference/global_objects/syntaxerror/index.html new file mode 100644 index 0000000000..84ccc26908 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/syntaxerror/index.html @@ -0,0 +1,123 @@ +--- +title: SyntaxError +slug: Web/JavaScript/Reference/Global_Objects/SyntaxError +translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError +--- +<div>{{JSRef}}</div> + +<p><code><strong>SyntaxError</strong></code> 객체는 문법적으로 유효하지 않은 코드를 해석하려고 시도할 때 발생하는 오류를 표현합니다.</p> + +<h2 id="설명">설명</h2> + +<p><code>SyntaxError</code>는 JavaScript 엔진이 코드를 분석할 때 문법을 준수하지 않은 코드를 만나면 발생합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code>new SyntaxError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>message</code><strong> {{optional_inline}}</strong></dt> + <dd>오류에 대한 설명.</dd> + <dt><code>fileName</code><strong> {{optional_inline}}</strong> {{non-standard_inline}}</dt> + <dd>예외가 발생한 코드를 담고 있는 파일의 이름.</dd> + <dt><code>lineNumber</code><strong> {{optional_inline}}</strong> {{non-standard_inline}}</dt> + <dd>예외가 발생한 코드의 라인 넘버.</dd> +</dl> + +<h2 id="속성">속성</h2> + +<dl> + <dt>{{jsxref("SyntaxError.prototype")}}</dt> + <dd><code>SyntaxError</code> 객체에 속성을 추가할 수 있도록 해주고 있습니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<p>전역(global) <code>SyntaxError</code> 는 고유의 메소드를 가지고 있지 않지만, prototype chain을 통해 몇몇의 메소드를 상속 받습니다.</p> + +<h2 id="SyntaxError_인스턴스"><code>SyntaxError</code> 인스턴스</h2> + +<h3 id="속성_2">속성</h3> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype', 'Properties')}}</div> + +<h3 id="메소드">메소드</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype', 'Methods')}}</div> + +<h2 id="예제">예제</h2> + +<h3 id="SyntaxError_잡기"><code>SyntaxError</code> 잡기</h3> + +<pre class="brush: js">try { + eval('hoo bar'); +} catch (e) { + console.log(e instanceof SyntaxError); // true + console.log(e.message); // "missing ; before statement" + console.log(e.name); // "SyntaxError" + console.log(e.fileName); // "Scratchpad/1" + console.log(e.lineNumber); // 1 + console.log(e.columnNumber); // 4 + console.log(e.stack); // "@Scratchpad/1:2:3\n" +} +</pre> + +<h3 id="SyntaxError_생성하기"><code>SyntaxError</code> 생성하기</h3> + +<pre class="brush: js">try { + throw new SyntaxError('Hello', 'someFile.js', 10); +} catch (e) { + console.log(e instanceof SyntaxError); // true + console.log(e.message); // "Hello" + console.log(e.name); // "SyntaxError" + console.log(e.fileName); // "someFile.js" + console.log(e.lineNumber); // 10 + console.log(e.columnNumber); // 0 + console.log(e.stack); // "@Scratchpad/2:11:9\n" +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.6.4', 'SyntaxError')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.SyntaxError")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("SyntaxError.prototype")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/syntaxerror/prototype/index.html b/files/ko/web/javascript/reference/global_objects/syntaxerror/prototype/index.html new file mode 100644 index 0000000000..5fda6d61ad --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/syntaxerror/prototype/index.html @@ -0,0 +1,126 @@ +--- +title: SyntaxError.prototype +slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError +--- +<div>{{JSRef}}</div> + +<p><code><strong>SyntaxError.prototype </strong></code>속성은 {{jsxref("SyntaxError")}} 객체의 생성자 프로토타입을 표현합니다.</p> + +<h2 id="설명">설명</h2> + +<p>모든 {{jsxref("SyntaxError")}} 인스턴스는 <code>SyntaxError.prototype </code>객체로부터<code> </code>상속 받습니다. 또한, 속성이나 메소드를 추가할 때 모든 인스턴스에 프로토타입을 사용 할 수 있습니다.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>SyntaxError.prototype.constructor</code></dt> + <dd>인스턴스의 프로토타입을 생성하는 함수를 명시합니다.</dd> + <dt>{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}</dt> + <dd>에러 메시지. 비록 ECMA-262는 {{jsxref("SyntaxError")}} 가 고유의 <code>message</code> 속성을 제공해야 한다고 명시하고 있지만, <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> 에서는, {{jsxref("Error.prototype.message")}}를 상속 받습니다. </dd> + <dt>{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}</dt> + <dd>에러명. {{jsxref("Error")}}로부터 상속 받습니다.</dd> + <dt>{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}</dt> + <dd>에러를 발생시킨 파일의 경로. {{jsxref("Error")}}로부터 상속 받습니다.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}</dt> + <dd>에러가 발생한 파일의 코드 라인 넘버. {{jsxref("Error")}}로부터 상속 받습니다.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}</dt> + <dd>에러가 발생된 라인의 컬럼 넘버. {{jsxref("Error")}}로부터 상속 받습니다.</dd> + <dt>{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}</dt> + <dd>스택 트레이스. {{jsxref("Error")}}로부터 상속 받습니다.</dd> +</dl> + +<h2 id="메소드">메소드</h2> + +<p>비록 {{jsxref("SyntaxError")}} 프로토타입 객체는 고유의 메소드를 가지고 있지는 않지만, {{jsxref("SyntaxError")}} 인스턴스는 몇 가지의 메소드를 프로토타입 체인을 통하여 상속 받습니다.</p> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td><code><em>NativeError</em>.prototype</code>로 정의.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td><code><em>NativeError</em>.prototype</code>로 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td><code><em>NativeError</em>.prototype</code>로 정의.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/@@iterator/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/@@iterator/index.html new file mode 100644 index 0000000000..ded3d1c973 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/typedarray/@@iterator/index.html @@ -0,0 +1,127 @@ +--- +title: 'TypedArray.prototype[@@iterator]()' +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator +tags: + - Iterator + - JavaScript + - Method + - Prototype + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator +--- +<div>{{JSRef}}</div> + +<p>@@iterator 속성의 초기값은 {{jsxref("TypedArray.prototype.values()", "values")}} 속성의 초기값과 같은 함수 객체입니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>arr</var>[Symbol.iterator]()</code></pre> + +<h2 id="예">예</h2> + +<h3 id="for...of_루프를_사용하는_반복"><code>for...of</code> 루프를 사용하는 반복</h3> + +<pre class="brush: js">var arr = new Uint8Array([10, 20, 30, 40, 50]); +// 브라우저가 for..of 루프 및 for 루프에서 +// let 스코프인 변수를 지원해야 합니다 +for (let n of arr) { + console.log(n); +} +</pre> + +<h3 id="대안_반복">대안 반복</h3> + +<pre class="brush: js">var arr = new Uint8Array([10, 20, 30, 40, 50]); +var eArr = arr[Symbol.iterator](); +console.log(eArr.next().value); // 10 +console.log(eArr.next().value); // 20 +console.log(eArr.next().value); // 30 +console.log(eArr.next().value); // 40 +console.log(eArr.next().value); // 50 +</pre> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-%typedarray%.prototype-@@iterator', '%TypedArray%.prototype[@@iterator]()')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype-@@iterator', '%TypedArray%.prototype[@@iterator]()')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatGeckoDesktop("36") }} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatGeckoMobile("36") }} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko 17 (Firefox 17 / Thunderbird 17 / SeaMonkey 2.14)에서 Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2)까지는 <code>iterator</code> 속성이 쓰였고(<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=907077">bug 907077</a>), Gecko 27에서 Gecko 35까지는 <code>"@@iterator"</code> placeholder가 사용됐습니다. Gecko 36 (Firefox 36 / Thunderbird 36 / SeaMonkey 2.33)에서는, <code>@@iterator</code> <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol">symbol</a>이 구현됐습니다 (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=918828">bug 918828</a>).</p> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li> + <li>{{jsxref("TypedArray")}}</li> + <li>{{jsxref("TypedArray.prototype.entries()")}}</li> + <li>{{jsxref("TypedArray.prototype.keys()")}}</li> + <li>{{jsxref("TypedArray.prototype.values()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/buffer/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/buffer/index.html new file mode 100644 index 0000000000..702fe13eb7 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/typedarray/buffer/index.html @@ -0,0 +1,111 @@ +--- +title: TypedArray.prototype.buffer +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/buffer +tags: + - JavaScript + - Property + - Prototype + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/buffer +--- +<div>{{JSRef}}</div> + +<p><strong><code>buffer</code></strong> 접근자(accessor) 속성(property)은 생성 시간에 <em>TypedArray</em>에 의해 참조되는 {{jsxref("ArrayBuffer")}}를 나타냅니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>typedArray</var>.buffer</pre> + +<h2 id="설명">설명</h2> + +<p><code>buffer</code> 속성은 set 접근자 함수가 <code>undefined</code>인 접근자 속성입니다, 이 속성을 읽을 수만 있음을 뜻하는. 그 값은 <em>TypedArray</em>가 만들어질 때 수립되어 변경될 수 없습니다. <em>TypedArray</em>는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_객체">TypedArray 객체 유형</a> 중 하나입니다.</p> + +<h2 id="예">예</h2> + +<h3 id="buffer_속성_사용"><code>buffer</code> 속성 사용</h3> + +<pre class="brush:js">var buffer = new ArrayBuffer(8); +var uint16 = new Uint16Array(buffer); +uint16.buffer; // ArrayBuffer { byteLength: 8 } +</pre> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-get-%typedarray%.prototype.buffer', 'TypedArray.prototype.buffer')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.buffer', 'TypedArray.prototype.buffer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>7.0</td> + <td>{{ CompatGeckoDesktop("2") }}</td> + <td>10</td> + <td>11.6</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("2") }}</td> + <td>10</td> + <td>11.6</td> + <td>4.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li> + <li>{{jsxref("TypedArray")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/bytelength/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/bytelength/index.html new file mode 100644 index 0000000000..37a12d927a --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/typedarray/bytelength/index.html @@ -0,0 +1,73 @@ +--- +title: TypedArray.prototype.byteLength +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/byteLength +tags: + - JavaScript + - Property + - Prototype + - Reference + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/byteLength +--- +<div>{{JSRef}}</div> + +<p><strong><code>byteLength</code></strong> 접근자(accessor) 속성(property)은 형식화 배열의 길이(바이트 단위)를 나타냅니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>typedarray</var>.byteLength</pre> + +<h2 id="설명">설명</h2> + +<p><code>byteLength</code> 속성은 접근자 함수가 <code>undefined</code>인 접근자 속성입니다, 이 속성을 읽을 수만 있음을 뜻하는. 그 값은 <em>TypedArray</em>가 만들어질 때 수립되어 변경될 수 없습니다. <em>TypedArray</em>에 <code>byteOffset</code> 또는 <code>length</code>를 지정하지 않은 경우, 참조되는 <code>ArrayBuffer</code>의 <code>length</code>가 반환됩니다. <em>TypedArray</em>는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_객체">TypedArray 객체 유형</a> 중 하나입니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="byteLength_속성_사용"><code>byteLength</code> 속성 사용</h3> + +<pre class="brush:js">var buffer = new ArrayBuffer(8); + +var uint8 = new Uint8Array(buffer); +uint8.byteLength; // 8 (버퍼의 byteLength와 일치) + +var uint8 = new Uint8Array(buffer, 1, 5); +uint8.byteLength; // 5 (Uint8Array를 만들 때 지정된 대로) + +var uint8 = new Uint8Array(buffer, 2); +uint8.byteLength; // 6 (만든 Uint8Array의 오프셋으로 인해) +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-get-%typedarray%.prototype.bytelength', 'TypedArray.prototype.byteLength')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.bytelength', 'TypedArray.prototype.byteLength')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.TypedArray.byteLength")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li> + <li>{{jsxref("TypedArray")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/byteoffset/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/byteoffset/index.html new file mode 100644 index 0000000000..3be7af84cd --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/typedarray/byteoffset/index.html @@ -0,0 +1,69 @@ +--- +title: TypedArray.prototype.byteOffset +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/byteOffset +tags: + - JavaScript + - Property + - Prototype + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/byteOffset +--- +<div>{{JSRef}}</div> + +<p><strong><code>byteOffset</code></strong> 접근자(accessor) 속성(property)은 그 {{jsxref("ArrayBuffer")}}의 시작점에서 형식화 배열의 오프셋(단위 바이트)을 나타냅니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>typedarray</var>.byteOffset</pre> + +<h2 id="설명">설명</h2> + +<p><code>byteOffset</code> 속성은 set 접근자 함수가 <code>undefined</code>인 접근자 속성입니다, 이 속성을 읽을 수만 있음을 뜻하는. 그 값은 <em>TypedArray</em>가 만들어질 때 수립되어 변경될 수 없습니다. <em>TypedArray</em>는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_객체">TypedArray 객체 유형</a> 중 하나입니다.</p> + +<h2 id="예">예</h2> + +<h3 id="byteOffset_속성_사용"><code>byteOffset</code> 속성 사용</h3> + +<pre class="brush:js">var buffer = new ArrayBuffer(8); + +var uint8 = new Uint8Array(buffer); +uint8.byteOffset; // 0 (지정된 오프셋이 없음) + +var uint8 = new Uint8Array(buffer, 3); +uint8.byteOffset; // 3 (Uint8Array를 만들 때 지정된 대로) +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-get-%typedarray%.prototype.byteoffset', 'TypedArray.prototype.byteOffset')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.byteoffset', 'TypedArray.prototype.byteOffset')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.TypedArray.byteOffset")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li> + <li>{{jsxref("TypedArray")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.html new file mode 100644 index 0000000000..563b7856cc --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.html @@ -0,0 +1,75 @@ +--- +title: TypedArray.BYTES_PER_ELEMENT +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT +tags: + - JavaScript + - Property + - Reference + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT +--- +<div>{{JSRef}}</div> + +<p><code><strong>TypedArray.BYTES_PER_ELEMENT</strong></code> 속성은 각 형식화 배열 요소의 크기를 바이트로 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/typedarray-bytes-per-element.html")}}</div> + + + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="설명">설명</h2> + +<p>TypedArray 객체는 요소 당 바이트 수 및 바이트가 해석되는 방법으로 서로 다릅니다. <code>BYTES_PER_ELEMENT</code> 상수는 주어진 TypedArray의 각 요소가 갖는 바이트 수를 포함합니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush:js">Int8Array.BYTES_PER_ELEMENT; // 1 +Uint8Array.BYTES_PER_ELEMENT; // 1 +Uint8ClampedArray.BYTES_PER_ELEMENT; // 1 +Int16Array.BYTES_PER_ELEMENT; // 2 +Uint16Array.BYTES_PER_ELEMENT; // 2 +Int32Array.BYTES_PER_ELEMENT; // 4 +Uint32Array.BYTES_PER_ELEMENT; // 4 +Float32Array.BYTES_PER_ELEMENT; // 4 +Float64Array.BYTES_PER_ELEMENT; // 8</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('Typed Array')}}</td> + <td>{{Spec2('Typed Array')}}</td> + <td>ECMAScript 6로 대체됨.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-typedarray.bytes_per_element', 'TypedArray.BYTES_PER_ELEMENT')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>ECMA 표준에서 초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-typedarray.bytes_per_element', 'TypedArray.BYTES_PER_ELEMENT')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.TypedArray.BYTES_PER_ELEMENT")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li> + <li>{{jsxref("TypedArray")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/fill/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/fill/index.html new file mode 100644 index 0000000000..8e315fc201 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/typedarray/fill/index.html @@ -0,0 +1,75 @@ +--- +title: TypedArray.prototype.fill() +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/fill +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Prototype + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/fill +--- +<div>{{JSRef}}</div> + +<p><strong><code>fill()</code></strong> 메서드는 배열의 모든 요소를 지정한 시작 인덱스부터 종료 인덱스까지 정적인 값으로 채웁니다. <code>fill()</code>은 {{jsxref("Array.prototype.fill()")}}과 동일한 알고리즘을 가지고 있습니다. TypedArray 는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">typed array types</a> 이곳에 있는 것 중 하나 입니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/typedarray-fill.html")}}</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>typedarray</var>.<code>fill(<var>value</var>[, <var>start<var> = 0[, <var>end</var> = this.length]])</var></var></code></code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>value</code></dt> + <dd>배열에 채워넣을 값.</dd> + <dt><code>start</code></dt> + <dd>선택사항. 시작 위치. 기본값은 0.</dd> + <dt><code>end</code></dt> + <dd>선택사항. 종료 위치 (종료위치를 포함하지않습니다. 즉, end -1 까지만 해당됩니다.). 기본값 this.length(배열의 길이).</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>start 와 end 사이에 요소들을 채웁니다.</p> + +<p><strong><code>fill</code></strong> 메소드는 value, start 그리고 and 3개의 매개변수를 요구합니다. start 와 end 매개변수는 선택사항이며 기본값은 0 과 지정한 배열객체의 길이값 입니다.</p> + +<p>만약 start 매개변수가 음수이면, start 의 값은 배열의 길이값을 합한 결과가 시작지점이 되고, 만약 end 가 음수라면, end 매개변수와 배열의 길이값을 합한 결과가 종료지점이 됩니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">new Uint8Array([1, 2, 3]).fill(4); // Uint8Array [4, 4, 4] +new Uint8Array([1, 2, 3]).fill(4, 1); // Uint8Array [1, 4, 4] +new Uint8Array([1, 2, 3]).fill(4, 1, 2); // Uint8Array [1, 4, 3] +new Uint8Array([1, 2, 3]).fill(4, 1, 1); // Uint8Array [1, 2, 3] +new Uint8Array([1, 2, 3]).fill(4, -3, -2); // Uint8Array [4, 2, 3] +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-%typedarray%.prototype.fill', 'TypedArray.prototype.fill')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.TypedArray.fill")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.fill()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/index.html new file mode 100644 index 0000000000..3f4edc9970 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/typedarray/index.html @@ -0,0 +1,342 @@ +--- +title: TypedArray +slug: Web/JavaScript/Reference/Global_Objects/TypedArray +tags: + - JavaScript + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray +--- +<div>{{JSRef}}</div> + +<p><strong><em>TypedArray</em></strong> 객체는 밑에 깔린 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">이진 데이터 버퍼</a>의 배열 같은 뷰를 기술합니다. <code>TypedArray</code>인 전역 속성도 눈에 직접 보이는 <code>TypedArray</code> 생성자도 없습니다. 대신 다양한 전역 속성이 있습니다, 그 값이 아래 나열된 특정 요소 유형에 대한 형식화 배열 생성자인. 다음 페이지에서 각 유형 요소를 포함하는 모든 형식화 배열에 쓰일 수 있는 공통 속성 및 메서드를 찾을 수 있습니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">new<em> TypedArray</em>(length); +new <em>TypedArray</em>(typedArray); +new <em>TypedArray</em>(object); +new <em>TypedArray</em>(buffer [, byteOffset [, length]]); + +<em>TypedArray()</em>는 다음 중 하나입니다: + +Int8Array(); +Uint8Array(); +Uint8ClampedArray(); +Int16Array(); +Uint16Array(); +Int32Array(); +Uint32Array(); +Float32Array(); +Float64Array(); +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt>length</dt> + <dd><code>length</code> 인수와 함께 호출하면 메모리상에 길이에 BYTES_PER_ELEMENT bytes(바이트)를 곱한 크기만큼의, 0을 포함한 이진 데이터 버퍼를 생성합니다.</dd> + <dt>typedArray</dt> + <dd><code>typedArray</code> 인수와 함께 호출하면, 모든 형식화 배열 객체 유형(가령 <code>Int32Array</code>)이 될 수 있는, <code>typedArray</code>는 새로운 형식화 배열로 복사됩니다. <code>typedArray</code> 내 각 값은 새로운 배열로 복사되기 전에 해당 유형의 생성자로 변환됩니다.</dd> + <dt>object</dt> + <dd><code>object</code> 인수와 함께 호출하면, 새로운 형식화 배열이 마치 <code><em>TypedArray</em>.from()</code> 메서드에 의해서처럼 생성됩니다.</dd> + <dt>buffer, byteOffset, length</dt> + <dd><code>buffer</code>와 선택 사항으로 <code>byteOffset</code> 및 <code>length</code> 인수와 함께 호출하면, 새로운 형식화 배열 뷰는 지정된 {{jsxref("ArrayBuffer")}} 뷰로 생성됩니다. <code>byteOffset</code> 및 <code>length</code> 매개변수는 형식화 배열 뷰에 의해 노출되는 메모리 범위를 지정합니다. 둘 다 생략된 경우, <code>buffer</code>가 모두 보입니다; <code>length</code>만 생략된 경우, <code>buffer</code>의 나머지가 보입니다.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>ECMAScript 6는 모든 <em>TypedArray</em> 생성자의 <code>[[Prototype]]</code> 역할을 하는 <em>TypedArray</em> 생성자를 정의합니다. 이 생성자는 직접 노출되지 않습니다: 전역 <code>%TypedArray%</code> 또는 <code>TypedArray</code> 속성은 없습니다. <code>Object.getPrototypeOf(Int8Array.prototype)</code> 및 비슷한 방식을 통해서만 직접 접근할 수 있습니다. 모든 <em>TypedArray</em> 생성자는 <code>%TypedArray%</code> 생성자 함수로부터 공통 속성을 상속합니다. 게다가, 모든 형식화 배열 프로토타입(<em>TypedArray</em><code>.prototype</code>)은 자기 <code>[[Prototype]]</code>으로서 <code>%TypedArray%.prototype</code>이 있습니다.</p> + +<p><code>%TypedArray%</code> 생성자 자체로는 특별히 유용한 것은 아닙니다. 호출하거나 <code>new</code> 식으로 사용하면 <code>TypeError</code>가 발생합니다, 서브클래싱을 지원하는 JS 엔진에서 객체 생성 도중 사용될 때 빼고는. 현재로서는 그러한 엔진이 없기에 <code>%TypedArray%</code>는 모든 <em>TypedArray</em> 생성자에 함수 또는 속성을 폴리필할 때만 유용합니다.</p> + +<h3 id="속성_접근">속성 접근</h3> + +<p>표준 배열 인덱스 구문(즉, 각괄호 표기법)을 써서 배열의 요소를 참조할 수 있습니다. 그러나, 형식화 배열에 인덱스 있는 속성의 읽기(getting) 또는 쓰기(setting)는 이 속성에 대한 프로토타입 체인에서 찾을 수 없습니다, 심지어 인덱스가 범위 밖인 경우라도. 인덱스 있는 속성은 {{jsxref("ArrayBuffer")}}를 조사하고 객체 속성을 조사하지는 않습니다. 여전히 유명 속성을 사용할 수 있습니다, 모든 객체와 마찬가지로.</p> + +<pre class="brush: js">// 표준 배열 구문을 사용해 쓰기 및 읽기 +var int16 = new Int16Array(2); +int16[0] = 42; +console.log(int16[0]); // 42 + +// 프로토타입의 인덱스 있는 속성은 조사되지 않음 (Fx 25) +Int8Array.prototype[20] = "foo"; +(new Int8Array(32))[20]; // 0 +// 비록 범위 밖 또는 +Int8Array.prototype[20] = "foo"; +(new Int8Array(8))[20]; // undefined +// 음의 정수인 경우에도 +Int8Array.prototype[-1] = "foo"; +(new Int8Array(8))[-1]; // undefined + +// 유명(named) 속성은 허용됨, 다만 (Fx 30) 에서지만 +Int8Array.prototype.foo = "bar"; +(new Int8Array(32)).foo; // "bar"</pre> + +<h2 id="TypedArray_객체">TypedArray 객체</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">유형</td> + <td class="header">크기 (바이트)</td> + <td class="header">설명</td> + <td class="header">Web IDL 형</td> + <td class="header">해당 C 형</td> + </tr> + <tr> + <td>{{jsxref("Int8Array")}}</td> + <td>1</td> + <td>8비트 2의 보수 형식 부호 있는 정수</td> + <td><code>byte</code></td> + <td><code>int8_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint8Array")}}</td> + <td>1</td> + <td>8비트 부호 없는 정수</td> + <td><code>octet</code></td> + <td><code>uint8_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint8ClampedArray")}}</td> + <td>1</td> + <td>8비트 부호 없는 정수 (단속됨)</td> + <td><code>octet</code></td> + <td><code>uint8_t</code></td> + </tr> + <tr> + <td>{{jsxref("Int16Array")}}</td> + <td>2</td> + <td>16비트 2의 보수 형식 부호 있는 정수</td> + <td><code>short</code></td> + <td><code>int16_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint16Array")}}</td> + <td>2</td> + <td>16비트 부호 없는 정수</td> + <td><code>unsigned short</code></td> + <td><code>uint16_t</code></td> + </tr> + <tr> + <td>{{jsxref("Int32Array")}}</td> + <td>4</td> + <td>32비트 2의 보수 형식 부호 있는 정수</td> + <td><code>long</code></td> + <td><code>int32_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint32Array")}}</td> + <td>4</td> + <td>32비트 부호 없는 정수</td> + <td><code>unsigned long</code></td> + <td><code>uint32_t</code></td> + </tr> + <tr> + <td>{{jsxref("Float32Array")}}</td> + <td>4</td> + <td>32비트 IEEE 부동 소수점 수</td> + <td><code>unrestricted float</code></td> + <td><code>float</code></td> + </tr> + <tr> + <td>{{jsxref("Float64Array")}}</td> + <td>8</td> + <td>64비트 IEEE 부동 소수점 수</td> + <td><code>unrestricted double</code></td> + <td><code>double</code></td> + </tr> + </tbody> +</table> + +<h2 id="속성">속성</h2> + +<dl> + <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT")}}</dt> + <dd>서로 다른 형식화 배열 객체에 대해 요소 크기의 숫자값을 반환합니다.</dd> + <dt><em>TypedArray</em>.length</dt> + <dd>값이 3인 길이 속성.</dd> + <dt>{{jsxref("TypedArray.name")}}</dt> + <dd>생성자 이름의 문자열 값을 반환합니다. 가령 "Int8Array".</dd> + <dt>{{jsxref("TypedArray.@@species", "get TypedArray[@@species]")}}</dt> + <dd>파생된 객체를 생성하는데 쓰이는 생성자 함수.</dd> + <dt>{{jsxref("TypedArray.prototype")}}</dt> + <dd><em>TypedArray</em> 객체에 대한 프로토타입.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("TypedArray.from()")}}</dt> + <dd>배열 같은 또는 반복가능(iterable) 객체로부터 새로운 형식화 배열을 생성합니다. {{jsxref("Array.from()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.of()")}}</dt> + <dd>가변(variable) 인수로 새로운 형식화 배열을 생성합니다. {{jsxref("Array.of()")}}도 참조.</dd> +</dl> + +<h2 id="TypedArray_프로토타입">TypedArray 프로토타입</h2> + +<p>모든 <em>TypedArray</em>는 {{jsxref("TypedArray.prototype")}}을 상속합니다.</p> + +<h3 id="속성_2">속성</h3> + +<p>{{page('ko/Web/JavaScript/Reference/Global_Objects/TypedArray/prototype','속성')}}</p> + +<h3 id="메서드_2">메서드</h3> + +<p>{{page('ko/Web/JavaScript/Reference/Global_Objects/TypedArray/prototype','메서드')}}</p> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('Typed Array')}}</td> + <td>{{Spec2('Typed Array')}}</td> + <td>형식화 배열 뷰 유형이 있는 <code>TypedArray</code> 및 <code>ArrayBufferView</code> 인터페이스로 정의됨. ECMAScript 6로 대체됨.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-typedarray-objects', 'TypedArray Objects')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>ECMA 표준에서 초기 정의. 인덱스 있고 유명 속성에 대한 행동이 지정됨. <code>new</code>가 필요함이 지정됨.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(7.0)}}</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>10</td> + <td>11.6</td> + <td>5.1</td> + </tr> + <tr> + <td>Indexed properties not consulting prototype</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{CompatGeckoDesktop("25")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Named properties</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("30")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>new</code> is required</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("44")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("2") }}</td> + <td>10</td> + <td>11.6</td> + <td>4.2</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Indexed properties not consulting prototype</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{ CompatGeckoMobile("25") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}} [1]</td> + </tr> + <tr> + <td>Named properties</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("30") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>new</code> is required</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoMobile("44") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>-1</code>과 비슷한 값은 인덱스 있는 속성으로 여겨지지 않기에 그 프로토타입 속성값을 반환합니다.</p> + +<h2 id="호환성_주의사항">호환성 주의사항</h2> + +<p>ECMAScript 2015 (ES6)를 시작으로, <code>TypedArray</code> 생성자는 {{jsxref("Operators/new", "new")}} 연산자로 생성되어야 합니다. <code>new</code> 없는 함수로서 <code>TypedArray</code> 생성자를 호출하면, 이제부터 {{jsxref("TypeError")}}가 발생합니다.</p> + +<pre class="brush: js example-bad">var dv = Int8Array([1, 2, 3]); +// TypeError: new 없은 내장 Int8Array 생성자 +// 호출은 금지됩니다</pre> + +<pre class="brush: js example-good">var dv = new Int8Array([1, 2, 3]);</pre> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li> + <li>{{jsxref("ArrayBuffer")}}</li> + <li>{{jsxref("DataView")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/indexof/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/indexof/index.html new file mode 100644 index 0000000000..1ccd923d93 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/typedarray/indexof/index.html @@ -0,0 +1,80 @@ +--- +title: TypedArray.prototype.indexOf() +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/indexOf +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/indexOf +--- +<div>{{JSRef}}</div> + +<p><strong><code>indexOf()</code></strong> 메소드는 형식화 배열(typed array)에서 주어진 값과 일치하는 첫 번째 인덱스를 반환한다. 일치하는 값이 없으면 -1을 반환한다. 이 메소드는 {{jsxref("Array.prototype.indexOf()")}} 와 동일한 알고리즘을 가지고 있다<em>.</em> <em>TypedArray</em>는 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_%EA%B0%9D%EC%B2%B4">TypedArray 객체 유형</a> 중 하나이다.</p> + +<div>{{EmbedInteractiveExample("pages/js/typedarray-indexof.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>typedarray</var>.<var>i<code>ndexOf(<var>searchElement</var>[, <var>fromIndex</var> = 0])</code></var></code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>searchElement</code></dt> + <dd>배열에서 검색할 요소.</dd> + <dt><code>fromIndex</code></dt> + <dd>문자열에서 찾기 시작하는 위치를 나타내는 인덱스 값. 만약 인덱스 번호가 배열의 길이와 동일하거나 더 크다면, 해당 요소를 찾을 수 없기 때문에 결과값으로 -1이 반환된다. 만약 인덱스 번호가 음수라면, 배열의 끝에서부터 하나씩 상쇄하며 계산한다. (예. fromIndex로 -1을 준 경우 가장 마지막 배열 요소의 값부터 검색을 시작. -2를 준 경우, 가장 마지막 배열 요소에서 하나 앞 요소부터 검색을 시작). 주의: 주어진 인덱스가 음수인 경우에도 배열은 여전히 앞에서부터 뒤로(왼쪽에서 오른쪽 순서로) 검색 된다. 만약 결과값으로 나온 인덱스가 0보다 작다면, 배열 전체가 찾아진 것이다. 디폴트 값 : 0 (전체 배열이 검색된다).</dd> +</dl> + +<h3 id="반환_결과">반환 결과</h3> + +<p>해당 배열에서 찾으려는 요소가 위치한 첫 번째 인덱스 값. 만약 찾으려는 요소가 없을 경우에는 -1을 반환. </p> + +<h2 id="설명">설명</h2> + +<p><code>indexOf</code> 메소드는 배열의 요소를 <code>searchElement</code> 와 비교할 때, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">strict equality</a>(===, <em>트리플 equals</em>) 를 사용하여 자료형의 일치 여부까지 비교한다. </p> + +<h2 id="예시">예시</h2> + +<pre class="brush: js">var uint8 = new Uint8Array([2, 5, 9]); +uint8.indexOf(2); // 0 +uint8.indexOf(7); // -1 +uint8.indexOf(9, 2); // 2 +uint8.indexOf(2, -1); // -1 +uint8.indexOf(2, -3); // 0 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.indexof', 'TypedArray.prototype.indexOf')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.indexof', 'TypedArray.prototype.indexOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("javascript.builtins.TypedArray.indexOf")}}</p> +</div> + +<h2 id="참고">참고</h2> + +<ul> + <li>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/length/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/length/index.html new file mode 100644 index 0000000000..0d5091aeb6 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/typedarray/length/index.html @@ -0,0 +1,68 @@ +--- +title: TypedArray.prototype.length +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/length +tags: + - JavaScript + - Property + - Prototype + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/length +--- +<div>{{JSRef}}</div> + +<p><strong><code>length</code></strong> 접근자(accessor) 속성(property)은 형식화 배열의 (요소) 길이를 나타냅니다.</p> + +<h2 id="설명">설명</h2> + +<p><code>length</code> 속성은 set 접근자 함수가 <code>undefined</code>인 접근자 속성입니다, 이 속성을 읽을 수만 있음을 뜻하는. 값은 <em>TypedArray</em>가 만들어질 때 수립되어 변경될 수 없습니다. <em>TypedArray</em>가 <code>byteOffset</code> 또는 <code>length</code>를 지정하지 않은 경우, 참조되는 {{jsxref("ArrayBuffer")}}의 길이가 반환됩니다. <em>TypedArray</em>는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_객체">TypedArray 객체 유형</a> 중 하나입니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="length_속성_사용"><code>length</code> 속성 사용</h3> + +<pre class="brush:js">var buffer = new ArrayBuffer(8); + +var uint8 = new Uint8Array(buffer); +uint8.length; // 8 (버퍼의 길이와 일치) + +var uint8 = new Uint8Array(buffer, 1, 5); +uint8.length; // 5 (Uint8Array를 만들 때 지정된 대로) + +var uint8 = new Uint8Array(buffer, 2); +uint8.length; // 6 (만든 Uint8Array의 오프셋으로 인해) +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-get-%typedarray%.prototype.length', 'TypedArray.prototype.length')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.length', 'TypedArray.prototype.length')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.TypedArray.length")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li> + <li>{{jsxref("TypedArray")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/name/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/name/index.html new file mode 100644 index 0000000000..83b7f47ab1 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/typedarray/name/index.html @@ -0,0 +1,70 @@ +--- +title: TypedArray.name +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/name +tags: + - JavaScript + - Property + - Reference + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/name +--- +<div>{{JSRef}}</div> + +<p><code><strong><em>TypedArray</em>.name</strong></code> 속성은 형식화 배열 생성자 이름의 문자열 값을 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/typedarray-name.html")}}</div> + + + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="설명">설명</h2> + +<p>TypedArray 객체는 요소 당 바이트 수 및 바이트가 해석되는 방법으로 서로 다릅니다. <code>name</code> 속성은 어떤 데이터 형이 배열을 구성하는 지를 기술합니다. 첫 번째 부분은 "정수"용 <code>Int</code> 또는 "부호 없는 정수"용 <code>Uint</code>일 수 있습니다, "부동 소수점"용 <code>Float</code>도 쓰입니다 . 두 번째 부분은 배열의 비트 크기를 기술하는 숫자입니다. 끝으로, 객체 형은 <code>Array</code>입니다, 특수한 경우로 <code>ClampedArray</code>가 있는. 자세한 사항은 {{jsxref("Uint8ClampedArray")}}를 참조해 주세요.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush:js">Int8Array.name; // "Int8Array" +Uint8Array.name; // "Uint8Array" +Uint8ClampedArray.name; // "Uint8ClampedArray" +Int16Array.name; // "Int16Array" +Uint16Array.name; // "Uint16Array" +Int32Array.name; // "Int32Array" +Uint32Array.name; // "Uint32Array" +Float32Array.name; // "Float32Array" +Float64Array.name; // "Float64Array"</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-the-typedarray-constructors', 'TypedArray.name')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-the-typedarray-constructors', 'TypedArray.name')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.TypedArray.name")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li> + <li>{{jsxref("TypedArray")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/of/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/of/index.html new file mode 100644 index 0000000000..854c53cedf --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/typedarray/of/index.html @@ -0,0 +1,92 @@ +--- +title: TypedArray.of() +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/of +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/of +--- +<div>{{JSRef}}</div> + +<div><code><strong><em>TypedArray</em>.of()</strong></code>는 가변적으로 인수를 전달 할수 있는 새로운 형식화 배열(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">typed array</a>)를 만들어내는 메소드입니다.</div> + +<p>이 메소드는 {{jsxref("Array.of()")}}와 거의 같습니다.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><code><em>TypedArray</em>.of(<var>element0</var>[, <var>element1</var>[, ...[, <var>elementN</var>]]]) +</code> +where <em>TypedArray</em> is one of: + +Int8Array +Uint8Array +Uint8ClampedArray +Int16Array +Uint16Array +Int32Array +Uint32Array +Float32Array +Float64Array</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>형식화 된 배열을 만들 요소입니다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>생성된 {{jsxref("TypedArray")}} 인스턴스</p> + +<h2 id="설명">설명</h2> + +<p>{{jsxref("Array.of()")}}와 <code><em>TypedArray</em>.of()</code> 사이의 약간의 차이점은 다음과 같습니다. </p> + +<ul> + <li><code>TypedArray.of</code>에 전달된 값이 생성자가 아닌 경우 <code>TypedArray.of</code>는 {{jsxref ( "TypeError")}}를 발생시킵니다. <code>Array.of</code>는 기본적으로 새로운 {{jsxref ( "Array")}}를 생성합니다. </li> + <li><code><em>TypedArray</em>.of</code> uses <code>[[Put]]</code> where <code>Array.of</code> uses <code>[[DefineProperty]]</code>. Hence, when working with {{jsxref("Proxy")}} objects, it calls {{jsxref("Global_Objects/Proxy/handler/set", "handler.set")}} to create new elements rather than {{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty")}}.</li> + <li><code>TypedArray.of</code>는 <code>Array.of</code>가 <code>[[DefineProperty]]</code>를 사용하는 것처럼 <code>[[Put]]</code>을 사용합니다. 따라서 {{jsxref("Proxy")}} 객체로 작업 할 때 새로운 요소를 생성하기 위해 {{jsxref("Global_Objects/Proxy/handler/set", "handler.set")}}대신 {{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty")}}를 호출합니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">Uint8Array.of(1); // Uint8Array [ 1 ] +Int8Array.of('1', '2', '3'); // Int8Array [ 1, 2, 3 ] +Float32Array.of(1, 2, 3); // Float32Array [ 1, 2, 3 ] +Int16Array.of(undefined); // IntArray [ 0 ] +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-%typedarray%.of', '%TypedArray%.of')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-%typedarray%.of', '%TypedArray%.of')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.TypedArray.of")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("TypedArray.from()")}}</li> + <li>{{jsxref("Array.of()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/prototype/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/prototype/index.html new file mode 100644 index 0000000000..9a1b624b3b --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/typedarray/prototype/index.html @@ -0,0 +1,175 @@ +--- +title: TypedArray.prototype +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype +tags: + - JavaScript + - Property + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray +--- +<div>{{JSRef}}</div> + +<p><code><strong>TypedArray</strong></code><strong><code>.prototype</code></strong> 속성(property)은 {{jsxref("TypedArray")}} 생성자에 대한 프로토타입을 나타냅니다.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="설명">설명</h2> + +<p>{{jsxref("TypedArray")}} 인스턴스는 {{jsxref("TypedArray.prototype")}}을 상속합니다. 모든 <em>TypedArray</em> 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있으며, <em>TypedArray</em>는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_객체">TypedArray 객체 유형</a> 중 하나입니다.</p> + +<p>상속에 관한 자세한 정보를 위해 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#설명"><em>TypedArray</em></a>에 대한 설명도 참조하세요.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>TypedArray.prototype.constructor</code></dt> + <dd>인스턴스의 프로토타입을 만든 함수를 반환합니다. 이는 기본으로 해당 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_객체">TypedArray 객체 유형</a> 함수 중 하나입니다.</dd> + <dt>{{jsxref("TypedArray.prototype.buffer")}} {{readonlyInline}}</dt> + <dd>형식화 배열에 의해 참조되는 {{jsxref("ArrayBuffer")}}를 반환합니다. 생성 시에 고정되기에 <strong>읽기 전용</strong>.</dd> + <dt>{{jsxref("TypedArray.prototype.byteLength")}} {{readonlyInline}}</dt> + <dd>{{jsxref("ArrayBuffer")}}의 시작점부터 형식화 배열의 길이(단위 바이트)를 반환합니다. 생성 시에 고정되기에 <strong>읽기 전용</strong>.</dd> + <dt>{{jsxref("TypedArray.prototype.byteOffset")}} {{readonlyInline}}</dt> + <dd>{{jsxref("ArrayBuffer")}}의 시작점부터 형식화 배열의 오프셋(단위 바이트)을 반환합니다. 생성 시에 고정되기에 <strong>읽기 전용</strong>.</dd> + <dt>{{jsxref("TypedArray.prototype.length")}} {{readonlyInline}}</dt> + <dd>형식화 배열 내 보유한 요소의 수를 반환합니다. 생성 시에 고정되기에 <strong>읽기 전용</strong>.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("TypedArray.prototype.copyWithin()")}}</dt> + <dd>배열 내부 일련의 배열 요소를 복사합니다. {{jsxref("Array.prototype.copyWithin()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.entries()")}}</dt> + <dd>배열 내 각 인덱스에 대한 키/값 쌍을 포함하는 새로운 <code>Array Iterator</code> 객체를 반환합니다. {{jsxref("Array.prototype.entries()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.every()")}}</dt> + <dd>배열의 모든 요소가 함수로 제공되는 테스트를 통과하는지를 테스트합니다. {{jsxref("Array.prototype.every()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.fill()")}}</dt> + <dd>시작 인덱스부터 끝 인덱스까지 배열의 모든 요소를 고정값으로 채웁니다. {{jsxref("Array.prototype.fill()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.filter()")}}</dt> + <dd>제공되는 필터링 함수가 true를 반환하는 이 배열의 모든 요소를 갖는 새로운 배열을 생성합니다. {{jsxref("Array.prototype.filter()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.find()")}}</dt> + <dd>배열 내 요소가 제공되는 테스트 함수를 만족하는 경우 배열 내 찾은 값 또는 못 찾은 경우 <code>undefined</code>를 반환합니다. {{jsxref("Array.prototype.find()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.findIndex()")}}</dt> + <dd>배열 내 요소가 제공되는 테스트 함수를 만족하는 경우 배열 내 찾은 인덱스 또는 못 찾은 경우 -1을 반환합니다. {{jsxref("Array.prototype.findIndex()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.forEach()")}}</dt> + <dd>배열 내 각 요소에 대해 함수를 호출합니다. {{jsxref("Array.prototype.forEach()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.includes()")}} {{experimental_inline}}</dt> + <dd>형식화 배열이 특정 요소를 포함하는지를 판단해, 적절히 <code>true</code> 또는 <code>false</code>를 반환합니다. {{jsxref("Array.prototype.includes()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.indexOf()")}}</dt> + <dd>지정된 값과 같은 배열 내부 요소의 첫(최소) 인덱스 또는 못 찾은 경우 -1을 반환합니다. {{jsxref("Array.prototype.indexOf()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.join()")}}</dt> + <dd>배열의 모든 요소를 문자열로 합칩니다. {{jsxref("Array.prototype.join()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.keys()")}}</dt> + <dd>배열의 각 인덱스에 대한 키를 포함하는 새로운 <code>Array Iterator</code>를 반환합니다. {{jsxref("Array.prototype.keys()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</dt> + <dd>지정된 값과 같은 배열 내부 요소의 끝(최대) 인덱스 또는 못 찾은 경우 -1을 반환합니다. {{jsxref("Array.prototype.lastIndexOf()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.map()")}}</dt> + <dd>이 배열의 모든 요소에 제공된 함수를 호출한 결과를 갖는 새로운 배열을 생성합니다. {{jsxref("Array.prototype.map()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt> + <dd>{{jsxref("TypedArray.prototype.copyWithin()")}}의 이전 비표준 버전.</dd> + <dt>{{jsxref("TypedArray.prototype.reduce()")}}</dt> + <dd>누산기(accumulator) 및 배열의 각 값(좌에서 우로)에 대해 한 값으로 줄도록 함수를 적용합니다. {{jsxref("Array.prototype.reduce()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.reduceRight()")}}</dt> + <dd>누산기 및 배열의 각 값(우에서 좌로)에 대해 한 값으로 줄도록 함수를 적용합니다. {{jsxref("Array.prototype.reduceRight()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.reverse()")}}</dt> + <dd>배열 요소의 순서를 뒤집습니다 — 처음이 마지막이 되고 마지막이 처음이 됩니다. {{jsxref("Array.prototype.reverse()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.set()")}}</dt> + <dd>형식화 배열에 여러 값을 저장합니다, 지정된 배열에서 입력 값을 읽어.</dd> + <dt>{{jsxref("TypedArray.prototype.slice()")}}</dt> + <dd>배열의 한 부분을 추출하여 새로운 배열을 반환합니다. {{jsxref("Array.prototype.slice()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.some()")}}</dt> + <dd>이 배열의 적어도 한 요소가 제공된 테스트 함수를 만족하는 경우 true를 반환합니다. {{jsxref("Array.prototype.some()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.sort()")}}</dt> + <dd>배열의 요소를 적소에 정렬해 그 배열을 반환합니다. {{jsxref("Array.prototype.sort()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.subarray()")}}</dt> + <dd>주어진 시작 및 끝 요소 인덱스로부터 새로운 TypedArray를 반환합니다.</dd> + <dt>{{jsxref("TypedArray.prototype.values()")}}</dt> + <dd>배열의 각 인덱스에 대한 값을 포함하는 새로운 <code>Array Iterator</code> 객체를 반환합니다. {{jsxref("Array.prototype.values()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.toLocaleString()")}}</dt> + <dd>배열 및 그 요소를 나타내는 지역화된 문자열을 반환합니다. {{jsxref("Array.prototype.toLocaleString()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.toString()")}}</dt> + <dd>배열 및 그 요소를 나타내는 문자열을 반환합니다. {{jsxref("Array.prototype.toString()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}</dt> + <dd>배열의 각 인덱스에 대한 값을 포함하는 새로운 <code>Array Iterator</code> 객체를 반환합니다.</dd> +</dl> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>7.0</td> + <td>{{ CompatGeckoDesktop("2") }}</td> + <td>10</td> + <td>11.6</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("2") }}</td> + <td>10</td> + <td>11.6</td> + <td>4.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li> + <li>{{jsxref("TypedArray")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/reverse/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/reverse/index.html new file mode 100644 index 0000000000..0d7ff7f5e2 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/typedarray/reverse/index.html @@ -0,0 +1,69 @@ +--- +title: TypedArray.prototype.reverse() +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/reverse +tags: + - ECMAScript6 + - JavaScript + - Method + - Prototype + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/reverse +--- +<div>{{JSRef}}</div> + +<p><code><strong>reverse()</strong></code> 메서드는 제자리에서 형식화 배열을 뒤집습니다. 형식화 배열 첫 요소는 마지막이 되고 마지막은 첫 요소가 됩니다. 이 메서드는 {{jsxref("Array.prototype.reverse()")}}와 같은 알고리즘입니다. <em>TypedArray</em>는 여기 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">TypedArray 객체 유형</a> 중 하나입니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/typedarray-reverse.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>typedarray</var>.reverse(); +</pre> + +<h3 id="반환_값">반환 값</h3> + +<p>뒤집힌 배열.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">var uint8 = new Uint8Array([1, 2, 3]); +uint8.reverse(); + +console.log(uint8); // Uint8Array [3, 2, 1] +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-%typedarray%.prototype.reverse', 'TypedArray.prototype.reverse')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.reverse', 'TypedArray.prototype.reverse')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.TypedArray.reverse")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Array.prototype.reverse()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/set/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/set/index.html new file mode 100644 index 0000000000..3ce518f8cc --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/typedarray/set/index.html @@ -0,0 +1,95 @@ +--- +title: TypedArray.prototype.set() +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/set +tags: + - JavaScript + - Method + - Prototype + - Reference + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/set +--- +<div>{{JSRef}}</div> + +<p><strong><code>set()</code></strong> 메서드는 지정된 배열로부터 입력 값을 읽어 형식화 배열 내에 여러 값을 저장합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/typedarray-set.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>typedarr</var>.set(<em>array</em>[, <em>offset</em>]) +typedarr.set(<em>typedarray</em>[, <em>offset</em>]) +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>array</code></dt> + <dd>값을 복사할 배열. 소스 배열로부터 모든 값이 대상 배열로 복사됩니다, 소스 배열의 길이 + 오프셋이 대상 배열의 길이를 초과하지 않는 한, 그 경우에는 예외가 발생됩니다.</dd> + <dt><code>typedarray</code></dt> + <dd>소스 배열이 형식화 배열인 경우, 두 배열은 기본 {{jsxref("ArrayBuffer")}}를 같이 공유할 수 있습니다; 브라우저는 버퍼의 소스 범위를 대상(destination) 범위로 똑똑하게 <strong>복사</strong>합니다.</dd> + <dt><code>offset</code> {{optional_inline}}</dt> + <dd>소스 <code>array</code>에서 값을 쓰기 시작하는 대상 배열의 오프셋. 이 값이 생략된 경우, 0으로 간주됩니다 (즉, 소스 <code>array</code>는 인덱스 0에서 시작하는 대상 배열 내 값을 덮어씁니다).</dd> +</dl> + +<h3 id="예외">예외</h3> + +<dl> + <dt>{{jsxref("RangeError")}}</dt> + <dd><code>offset</code>이 가령 형식화 배열의 끝을 넘어서 저장하려고 설정된 경우 발생.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<h3 id="set()_사용하기"><code>set()</code> 사용하기</h3> + +<pre class="brush:js">var buffer = new ArrayBuffer(8); +var uint8 = new Uint8Array(buffer); + +uint8.set([1,2,3], 3); + +console.log(uint8); // Uint8Array [ 0, 0, 0, 1, 2, 3, 0, 0 ] +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('Typed Array')}}</td> + <td>{{Spec2('Typed Array')}}</td> + <td>ECMAScript 6에 의해 대체됨.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-%typedarray%.prototype.set-array-offset', 'TypedArray.prototype.set')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>ECMA 표준에서 초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.set-array-offset', 'TypedArray.prototype.set')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.TypedArray.set")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li> + <li>{{jsxref("TypedArray")}}</li> + <li>{{jsxref("ArrayBuffer")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/slice/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/slice/index.html new file mode 100644 index 0000000000..adef23132b --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/typedarray/slice/index.html @@ -0,0 +1,129 @@ +--- +title: TypedArray.prototype.slice() +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/slice +tags: + - ECMAScript6 + - JavaScript + - Method + - Prototype + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/slice +--- +<div>{{JSRef}}</div> + +<p><code><strong>slice()</strong></code> 메서드는 형식화 배열의 일부를 얕게 복사(shallow copy)한 새로운 형식화 배열 객체를 반환합니다. 이 메서드는 {{jsxref("Array.prototype.slice()")}}와 같은 알고리즘입니다. <em>TypedArray</em>는 여기 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_객체">TypedArray 객체 유형</a> 중 하나입니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>typedarray</var>.slice([<var>begin</var>[, <var>end</var>]])</code></pre> + +<h2 id="매개변수">매개변수</h2> + +<dl> + <dt><code>begin</code> {{optional_inline}}</dt> + <dd>추출을 시작하는 인덱스(0부터 셈).</dd> + <dd>음수 인덱스일 때, <code>begin</code>은 열 끝으로부터 오프셋을 나타냅니다. <code>slice(-2)</code>는 열에서 마지막 두 요소를 추출합니다.</dd> + <dd><code>begin</code>이 생략된 경우, <code>slice</code>는 인덱스 <code>0</code>에서 시작합니다.</dd> + <dt><code>end</code> {{optional_inline}}</dt> + <dd>추출을 끝내는 인덱스(0부터 셈). <code>slice</code>는 <code>end</code>(를 포함하지 않음)까지만 추출합니다.</dd> + <dd><code>slice(1,4)</code>는 2번째부터 4번째 요소까지 추출합니다 (인덱스가 1, 2 및 3인 요소).</dd> + <dd>음수 인덱스일 때, <code>end</code>는 열 끝으로부터 오프셋을 나타냅니다. <code>slice(2,-1)</code>은 열의 3번째부터 끝에서 2번째 요소까지 추출합니다.</dd> + <dd><code>end</code>가 생략된 경우, <code>slice</code>는 열의 끝까지 추출합니다 (<code>arr.length</code>).</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p><code>slice</code> 메서드는 바꾸지 않습니다. 원래 형식화 배열에서 얕게 복사된 요소를 반환합니다.</p> + +<p>새 요소가 어느 형식화 배열에든 추가된 경우, 다른 형식화 배열은 영향을 받지 않습니다.</p> + +<h2 id="예">예</h2> + +<h3 id="기존_형식화_배열의_일부를_반환">기존 형식화 배열의 일부를 반환</h3> + +<pre class="brush: js">var uint8 = new Uint8Array([1,2,3]); +uint8.slice(1); // Uint8Array [ 2, 3 ] +uint8.slice(2); // Uint8Array [ 3 ] +uint8.slice(-2); // Uint8Array [ 2, 3 ] +uint8.slice(0,1); // Uint8Array [ 1 ] +</pre> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-%typedarray%.prototype.slice', '%TypedArray%.prototype.slice')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.slice', '%TypedArray%.prototype.slice')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>45</td> + <td>{{CompatGeckoDesktop("38")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("38")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Array.prototype.slice()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/some/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/some/index.html new file mode 100644 index 0000000000..94ce55b40a --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/typedarray/some/index.html @@ -0,0 +1,106 @@ +--- +title: TypedArray.prototype.some() +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/some +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Prototype + - Reference + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/some +--- +<div>{{JSRef}}</div> + +<p><code><strong>some()</strong></code> 메서드는 형식화 배열 내 일부 요소가 제공되는 함수에 의해 구현되는 테스트를 통과하는지 여부를 테스트합니다. 이 메서드는 {{jsxref("Array.prototype.some()")}}과 같은 알고리즘입니다. <em>TypedArray</em>는 여기 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">TypedArray 객체 유형</a> 중 하나입니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/typedarray-some.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>typedarray</var>.some(<var>callback</var>[, <var>thisArg</var>])</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>각 요소에 대해 테스트하는 함수, 다음 인수 셋을 취하는: + <dl> + <dt><code>currentValue</code></dt> + <dd>형식화 배열에서 현재 처리 중인 요소.</dd> + <dt><code>index</code></dt> + <dd>형식화 배열에서 현재 처리 중인 요소의 인덱스.</dd> + <dt><code>array</code></dt> + <dd><code>some</code>이 호출한 형식화 배열.</dd> + </dl> + </dd> + <dt><code>thisArg</code></dt> + <dd>선택 사항. <code>callback</code>을 실행할 때 <code>this</code>로서 사용하는 값.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p><code>some</code> 메서드는 <code>callback</code>이 true 값을 반환하는 요소를 찾을 때까지 형식화 배열에 있는 각 요소에 대해 한 번 <code>callback</code> 함수를 실행합니다. 그런 요소가 발견된 경우, <code>some</code>은 즉시 <code>true</code>를 반환합니다. 그렇지 않으면, <code>some</code>은 <code>false</code>를 반환합니다.</p> + +<p><code>callback</code>은 세 인수와 함께 호출됩니다: 요소값, 요소 인덱스 및 순회(traverse)되는 배열 객체.</p> + +<p><code>thisArg</code> 매개변수가 <code>some</code>에 제공되는 경우, 호출될 때 <code>callback</code>에 전달됩니다, 그 <code>this</code> 값으로 사용하기 위해. 그렇지 않으면, <code>undefined</code> 값이 그 <code>this</code> 값으로 사용하기 위해 전달됩니다. <code>callback</code>에 의해 결국 관찰할 수 있는 <code>this</code> 값은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/this">함수에 의해 보이는 <code>this</code>를 결정하는 평소 규칙</a>에 따라 결정됩니다.</p> + +<p><code>some</code>은 호출된 형식화 배열을 변화시키지(mutate) 않습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="모든_형식화_배열_요소의_크기_테스트">모든 형식화 배열 요소의 크기 테스트</h3> + +<p>다음 예는 형식화 배열의 모든 요소가 10보다 더 큰지 테스트합니다.</p> + +<pre class="brush: js language-js">function isBiggerThan10(element, index, array) { + return element > 10; +} +new Uint8Array([2, 5, 8, 1, 4]).some(isBiggerThan10); // false +new Uint8Array([12, 5, 8, 1, 4]).some(isBiggerThan10); // true +</pre> + +<h3 id="화살표_함수를_사용하여_형식화_배열_요소_테스트">화살표 함수를 사용하여 형식화 배열 요소 테스트</h3> + +<p><a href="/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션">화살표 함수</a>는 같은 테스트에 대해 더 짧은 구문을 제공합니다.</p> + +<pre class="brush: js">new Uint8Array([2, 5, 8, 1, 4]).some(elem => elem > 10); // false +new Uint8Array([12, 5, 8, 1, 4]).some(elem => elem > 10); // true</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-%typedarray%.prototype.some', 'TypedArray.prototype.some')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.some', 'TypedArray.prototype.some')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.TypedArray.some")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("TypedArray.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/sort/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/sort/index.html new file mode 100644 index 0000000000..ef94943b23 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/typedarray/sort/index.html @@ -0,0 +1,119 @@ +--- +title: TypedArray.prototype.sort() +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/sort +tags: + - ECMAScript6 + - JavaScript + - Method + - Prototype + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/sort +--- +<div>{{JSRef}}</div> + +<p><code><strong>sort()</strong></code> 메서드는 <em>적소에</em> 형식화 배열의 요소를 정렬하여 그 형식화 배열을 반환합니다. 이 메서드는 {{jsxref("Array.prototype.sort()")}}<em>와 같은 알고리즘입니다.</em> <em>TypedArray</em>는 여기 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">형식화 배열 유형</a> 중 하나입니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>typedarray</var>.sort([<var>compareFunction</var>])</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>compareFunction</code> {{optional_inline}}</dt> + <dd>정렬 순서를 정의하는 함수를 지정합니다.</dd> +</dl> + +<h2 id="예">예</h2> + +<p>더 많은 예는, {{jsxref("Array.prototype.sort()")}} 메서드도 참조하세요.</p> + +<pre class="brush: js">var number = new Uint8Array([40, 1, 5, 200]); + +function compareNumbers(a, b) { + return a - b; +} + +numbers.sort(compareNumbers); +// Uint8Array [ 1, 5, 40, 200 ] +</pre> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-%typedarray%.prototype.sort', 'TypedArray.prototype.sort')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.sort', 'TypedArray.prototype.sort')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(46)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(46)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Array.prototype.sort()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/values/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/values/index.html new file mode 100644 index 0000000000..863d3c3cbb --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/typedarray/values/index.html @@ -0,0 +1,127 @@ +--- +title: TypedArray.prototype.values() +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/values +tags: + - ECMAScript6 + - Iterator + - JavaScript + - Method + - Prototype + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/values +--- +<div>{{JSRef}}</div> + +<p><strong><code>values()</code></strong> 메서드는 배열 내 각 인덱스에 대한 값을 포함하는 새로운 <code>Array Iterator</code> 객체를 반환합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code><var>arr</var>.values()</code></pre> + +<h2 id="예">예</h2> + +<h3 id="for...of_루프를_사용한_반복"><code>for...of</code> 루프를 사용한 반복</h3> + +<pre class="brush: js">var arr = new Uint8Array([10, 20, 30, 40, 50]); +var eArray = arr.values(); +// 브라우저가 for..of 루프 및 for 루프에서 +// let 스코프인 변수를 지원해야 합니다 +for (let n of eArray) { + console.log(n); +} +</pre> + +<h3 id="대안_반복">대안 반복</h3> + +<pre class="brush: js">var arr = new Uint8Array([10, 20, 30, 40, 50]); +var eArr = arr.values(); +console.log(eArr.next().value); // 10 +console.log(eArr.next().value); // 20 +console.log(eArr.next().value); // 30 +console.log(eArr.next().value); // 40 +console.log(eArr.next().value); // 50 +</pre> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-%typedarray%.prototype.values', '%TypedArray%.prototype.values()')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.values', '%TypedArray%.prototype.values()')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{CompatGeckoDesktop(37)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{CompatGeckoMobile(37)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li> + <li>{{jsxref("TypedArray")}}</li> + <li>{{jsxref("TypedArray.prototype.entries()")}}</li> + <li>{{jsxref("TypedArray.prototype.keys()")}}</li> + <li>{{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/typeerror/index.html b/files/ko/web/javascript/reference/global_objects/typeerror/index.html new file mode 100644 index 0000000000..2a95fc358d --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/typeerror/index.html @@ -0,0 +1,123 @@ +--- +title: TypeError +slug: Web/JavaScript/Reference/Global_Objects/TypeError +tags: + - Error + - JavaScript + - Reference + - TypeError +translation_of: Web/JavaScript/Reference/Global_Objects/TypeError +--- +<div>{{JSRef}}</div> + +<p><code><strong>TypeError</strong></code> 객체는 보통 값이 기대하던 자료형이 아니라서 연산을 할 수 없을 때 발생하는 오류입니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><code>new TypeError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>message</code> {{optional_inline}}</dt> + <dd>사람이 읽을 수 있는 오류에 대한 설명.</dd> + <dt><code>fileName</code> {{optional_inline}} {{non-standard_inline}}</dt> + <dd>오류가 발생한 코드를 포함한 파일 이름.</dd> + <dt><code>lineNumber</code> {{optional_inline}} {{non-standard_inline}}</dt> + <dd>오류가 발생한 코드의 줄 위치.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>함수나 연산자의 인자가, 그 함수나 연산자가 예상하던 타입과 호환되지 않을 때 <code>TypeError</code> 오류가 던져집니다.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt>{{jsxref("TypeError.prototype")}}</dt> + <dd><code>TypeError</code> 객체에 속성을 추가할 수 있습니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<p>전역 <code>TypeError</code>는 메서드는 자신만의 메서드를 갖지 않지만, 프로토타입 체인을 통해 몇몇 메서드를 상속합니다.</p> + +<h2 id="TypeError_인스턴스"><code>TypeError</code> 인스턴스</h2> + +<h3 id="속성_2">속성</h3> + +<div> +<dl> + <dt><code>TypeError.prototype.constructor</code></dt> + <dd>인스턴스의 프로토타입을 생성한 함수를 나타냅니다.</dd> + <dt>{{jsxref("Error.prototype.message", "TypeError.prototype.message")}}</dt> + <dd>오류의 메시지.</dd> + <dt>{{jsxref("Error.prototype.name", "TypeError.prototype.name")}}</dt> + <dd>오류 이름. {{jsxref("Error")}}에서 상속합니다.</dd> + <dt>{{jsxref("Error.prototype.fileName", "TypeError.prototype.fileName")}}</dt> + <dd>오류가 발생한 파일로의 경로. {{jsxref("Error")}}에서 상속합니다.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "TypeError.prototype.lineNumber")}}</dt> + <dd>오류가 발생한 곳의 줄 위치. {{jsxref("Error")}}에서 상속합니다.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "TypeError.prototype.columnNumber")}}</dt> + <dd>오류가 발생한 곳의 행 위치. {{jsxref("Error")}}에서 상속합니다.</dd> + <dt>{{jsxref("Error.prototype.stack", "TypeError.prototype.stack")}}</dt> + <dd>스택 추적. {{jsxref("Error")}}에서 상속합니다.</dd> +</dl> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="TypeError_오류를_잡아내기"><code>TypeError</code> 오류를 잡아내기</h3> + +<pre class="brush: js">try { + null.f(); +} catch (e) { + console.log(e instanceof TypeError); // true + console.log(e.message); // "null has no properties" + console.log(e.name); // "TypeError" + console.log(e.fileName); // "Scratchpad/1" + console.log(e.lineNumber); // 2 + console.log(e.columnNumber); // 2 + console.log(e.stack); // "@Scratchpad/2:2:3\n" +} +</pre> + +<h3 id="TypeError_오류를_생성하기"><code>TypeError</code> 오류를 생성하기</h3> + +<pre class="brush: js">try { + throw new TypeError('Hello', "someFile.js", 10); +} catch (e) { + console.log(e instanceof TypeError); // true + console.log(e.message); // "Hello" + console.log(e.name); // "TypeError" + console.log(e.fileName); // "someFile.js" + console.log(e.lineNumber); // 10 + console.log(e.columnNumber); // 0 + console.log(e.stack); // "@Scratchpad/2:2:9\n" +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-typeerror', 'TypeError')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.TypeError")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Error")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/undefined/index.html b/files/ko/web/javascript/reference/global_objects/undefined/index.html new file mode 100644 index 0000000000..8ff8f09360 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/undefined/index.html @@ -0,0 +1,138 @@ +--- +title: undefined +slug: Web/JavaScript/Reference/Global_Objects/undefined +tags: + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/undefined +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>전역 <code><strong>undefined</strong></code> 속성은 <code>{{Glossary("Undefined", "undefined")}}</code> 원시 값을 나타내며, JavaScript의 {{Glossary("Primitive", "원시 자료형")}} 중 하나입니다.</p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-undefined.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate">undefined</pre> + +<h2 id="설명">설명</h2> + +<p><code>undefined</code>는 전역 객체의 속성입니다. 즉, 전역 스코프에서의 변수입니다. <code>undefined</code>의 초기 값은 <code>{{Glossary("Undefined", "undefined")}}</code> 원시 값입니다.</p> + +<p>최신 브라우저에서 <code>undefined</code>는 ECMAScript 5 명세에 따라 설정 불가, 쓰기 불가한 속성입니다. 그렇지 않더라도 덮어쓰는건 피하는게 좋습니다.</p> + +<p>값을 할당하지 않은 변수는 <code>undefined</code> 자료형입니다. 또한 메서드와 선언도 평가할 변수가 값을 할당받지 않은 경우에 <code>undefined</code>를 반환합니다. 함수는 값을 명시적으로 {{jsxref("Statements/return", "반환", "", 1)}}하지 않으면 <code>undefined</code>를 반환합니다.</p> + +<div class="note"> +<p><code>undefined</code>는 <a href="/ko/docs/Web/JavaScript/Reference/Reserved_Words">예약어</a>가 아니기 때문에 전역 범위 외에서 {{Glossary("Identifier", "식별자")}}(변수 이름)로 사용할 수 있습니다. 그러나 유지보수와 디버깅 시 어려움을 낳을 수 있으므로 반드시 피해야 합니다.</p> + +<pre class="brush: js example-bad notranslate">// DON'T DO THIS + +// logs "foo string" +(function() { + var undefined = 'foo'; + console.log(undefined, typeof undefined); +})(); + +// logs "foo string" +(function(undefined) { + console.log(undefined, typeof undefined); +})('foo');</pre> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="일치_연산과_undefined">일치 연산과 <code>undefined</code></h3> + +<p><code>undefined</code>와 일치, 불일치 연산자를 사용해 변수에 값이 할당됐는지 판별할 수 있습니다. 다음 예제에서 변수 <code>x</code>는 초기화되지 않았으므로 <code>if</code>문은 <code>true</code>로 평가됩니다.</p> + +<pre class="brush: js notranslate">var x; +if (x === undefined) { + // 이 문이 실행됨 +} +else { + // 이 문이 실행되지 않음 +} +</pre> + +<div class="note"> +<p><strong>참고</strong>: 동등 연산자가 아니라 일치 연산자를 사용해야 합니다. 동등 연산자일 때 <code>x == undefined</code>는 <code>x</code>가 {{jsxref("null")}}일 때도 참이기 때문입니다. 즉 <code>null</code>은 <code>undefined</code>와 동등하지만, 일치하지는 않습니다.</p> + +<p>자세한 내용은 {{jsxref("Operators/Comparison_Operators", "비교 연산자", "", 1)}} 문서를 확인하세요.</p> +</div> + +<h3 id="typeof_연산자와_undefined"><code>typeof</code> 연산자와 <code>undefined</code></h3> + +<p>위의 예제 대신 {{jsxref("Operators/typeof", "typeof")}}를 사용할 수도 있습니다.</p> + +<pre class="brush: js notranslate">var x; +if (typeof x === 'undefined') { + // 이 문이 실행됨 +} +</pre> + +<p><code>typeof</code>를 사용하는 이유 중 하나는 선언하지 않은 변수를 사용해도 오류를 던지지 않기 때문입니다.</p> + +<pre class="brush: js notranslate">// x를 선언한 적 없음 +if (typeof x === 'undefined') { // 오류 없이 true로 평가 + // 이 문이 실행됨 +} + +if(x === undefined) { // ReferenceError + +} +</pre> + +<p>그러나 다른 방법도 있습니다. JavaScript는 정적 범위를 가지는 언어이므로, 변수의 선언 여부는 현재 맥락의 코드를 읽어 알 수 있습니다.</p> + +<p>전역 범위는 {{jsxref("globalThis", "전역 객체", "", 1)}}에 묶여 있으므로, 전역 맥락에서 변수의 존재 유무는 {{jsxref("Operators/in", "in")}} 연산자를 전역 객체 대상으로 실행해 알 수 있습니다. 즉,</p> + +<pre class="brush: js notranslate">if ('x' in window) { + // x가 전역으로 정의된 경우 이 문이 실행됨 +}</pre> + +<h3 id="void_연산자와_undefined"><code>void</code> 연산자와 <code>undefined</code></h3> + +<p>{{jsxref("Operators/void", "void")}} 연산자를 제 3의 대안으로 사용할 수 있습니다.</p> + +<pre class="brush: js notranslate">var x; +if (x === void 0) { + // 이 문이 실행됨 +} + +// y를 선언한 적 없음 +if (y === void 0) { + // Uncaught Reference Error: y is not defined +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-undefined', 'undefined')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.undefined")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>JavaScript의 {{glossary("Primitive", "원시 값")}}</li> + <li>{{jsxref("null")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/uneval/index.html b/files/ko/web/javascript/reference/global_objects/uneval/index.html new file mode 100644 index 0000000000..54713864f3 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/uneval/index.html @@ -0,0 +1,67 @@ +--- +title: uneval() +slug: Web/JavaScript/Reference/Global_Objects/uneval +tags: + - Function + - JavaScript + - Non-standard + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/uneval +--- +<div>{{jsSidebar("Objects")}}{{Non-standard_header}}</div> + +<p><code><strong>uneval()</strong></code>는 개체의 소스코드에 대한 문자열 표현을 만드는 함수이다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">uneval(<var>object</var>)</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>object</code></dt> + <dd>JavaScript 표현식 혹은 구문.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>주어진 개체의 소스코드에 대한 문자열 표현</p> + +<div class="note"><strong>주의:</strong> 인자로 넘긴 개체의 유효한 JSON 표현이 아닐 수 있습니다.</div> + +<h2 id="설명">설명</h2> + +<p><code>uneval()</code>은 최상위 수준의 함수이며 어떠한 개체와도 연관 되어있지 않습니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush:js">var a = 1; +uneval(a); // 1을 포함한 문자열을 반환한다 + +var b = '1'; +uneval(b); // "1"을 포함한 문자열을 반환한다 + +uneval(function foo() {}); // "(function foo(){})"를 반환 + + +var a = uneval(function foo() { return 'hi'; }); +var foo = eval(a); +foo(); // "hi"를 반환 +</pre> + +<h2 id="명세">명세</h2> + +<p>어떤 명세에도 속하지 않습니다.</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.uneval")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Global_Objects/eval", "eval()")}}</li> + <li>{{jsxref("JSON.stringify")}}</li> + <li>{{jsxref("JSON.parse")}}</li> + <li>{{jsxref("Object.toSource")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/weakmap/delete/index.html b/files/ko/web/javascript/reference/global_objects/weakmap/delete/index.html new file mode 100644 index 0000000000..0c82351679 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/weakmap/delete/index.html @@ -0,0 +1,80 @@ +--- +title: WeakMap.prototype.delete() +slug: Web/JavaScript/Reference/Global_Objects/WeakMap/delete +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Prototype + - Reference + - WeakMap +translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/delete +--- +<div>{{JSRef}}</div> + +<p><code><strong>delete()</strong></code> 메소드는 <code>WeakMap</code> 객체의 특정 요소를 제거합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/weakmap-prototype-delete.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><em>wm</em>.delete(<em>key</em>);</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>key</code></dt> + <dd><code>WeakMap</code> 객체에서 제거할 요소의 키.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p><code>WeakMap</code> 객체의 요소가 성공적으로 제거되면 <code>true</code>, 키를 찾을 수 없거나 키가 객체가 아닌 경우 <code>false</code>.</p> + +<h2 id="예제">예제</h2> + +<h3 id="delete_메서드_사용하기"><code>delete</code> 메서드 사용하기</h3> + +<pre class="brush: js;highlight:[4]">var wm = new WeakMap(); +wm.set(window, 'foo'); + +wm.delete(window); // Returns true. Successfully removed. + +wm.has(window); // Returns false. The window object is no longer in the WeakMap. +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-weakmap.prototype.delete', 'WeakMap.prototype.delete')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-weakmap.prototype.delete', 'WeakMap.prototype.delete')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.WeakMap.delete")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("WeakMap")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/weakmap/index.html b/files/ko/web/javascript/reference/global_objects/weakmap/index.html new file mode 100644 index 0000000000..392759f523 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/weakmap/index.html @@ -0,0 +1,283 @@ +--- +title: WeakMap +slug: Web/JavaScript/Reference/Global_Objects/WeakMap +tags: + - ECMAScript6 + - JavaScript + - WeakMap +translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap +--- +<div>{{JSRef}}</div> + +<p><strong><code>WeakMap</code></strong> 객체는 키가 약하게 참조되는 키/값 쌍의 컬렉션입니다. 키는 객체여야만 하나 값은 임의 값이 될 수 있습니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">new WeakMap([iterable]) +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>iterable</code></dt> + <dd>iterable은 배열 또는 요소가 키-값 쌍(2-요소 배열)인 다른 iterable 객체입니다. 각 키-값 쌍은 새로운 WeakMap에 추가됩니다. null은 undefined로 취급됩니다.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>WeakMap의 키는 오직 <code>Object</code>형뿐입니다. 키로 {{Glossary("Primitive", "원시 데이터형")}}은 허용되지 않습니다(가령 {{jsxref("Symbol")}}은 <code>WeakMap</code> 키가 될 수 없습니다).</p> + +<p>WeakMap 내 키는 약하게 유지됩니다. 이게 뜻하는 바는, 다른 강한 키 참조가 없는 경우, 그러면 모든 항목은 가비지 컬렉터에 의해 WeakMap에서 제거됩니다.</p> + +<h3 id="왜_WeakMap인가요">왜 <em>Weak</em>Map인가요?</h3> + +<p>숙련된 JavaScript 프로그래머는 이 API는 네 API 메서드에 의해 공유되는 두 배열(키에 하나, 값에 하나)로 JavaScript에서 구현될 수 있음을 알 수 있습니다. 이러한 구현은 주로 두 가지가 불편했을 겁니다. 첫 번째는 O(n) 검색(n은 map 내 키 개수)입니다. 두 번째는 메모리 누수 문제입니다. 수동으로 작성된 map이면, 키 배열은 키 객체 참조를 유지하려고 합니다, 가비지 컬렉트되는 것을 방지하는. 원래 WeakMap에서는, 키 객체 참조는 "약하게" 유지되고, 이는 다른 객체 참조가 없는 경우 가비지 컬렉션을 막지 않음을 뜻합니다.</p> + +<p>약한 참조로 인해, <code>WeakMap</code> 키는 열거불가입니다(즉 키 목록을 제공하는 메서드가 없습니다). 키가 있다면, 그 목록은 가비지 콜렉션 상태에 달려있습니다, 비결정성(non-determinism, 크기를 결정할 수 없는)을 도입하는. 키 목록을 원하는 경우, {{jsxref("Map")}}을 사용해야 합니다.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>WeakMap.length</code></dt> + <dd><code>length</code> 속성값은 0.</dd> + <dt>{{jsxref("WeakMap.prototype")}}</dt> + <dd><code>WeakMap</code> 생성자에 대한 프로토타입을 나타냅니다. 모든 <code>WeakMap</code> 객체에 속성을 추가할 수 있습니다.</dd> +</dl> + +<h2 id="WeakMap_인스턴스"><code>WeakMap</code> 인스턴스</h2> + +<p>모든 <code>WeakMap</code> 인스턴스는 {{jsxref("WeakMap.prototype")}}에서 상속합니다.</p> + +<h3 id="속성_2">속성</h3> + +<p>{{page('ko/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/prototype','속성')}}</p> + +<h3 id="메서드">메서드</h3> + +<p>{{page('ko/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/prototype','메서드')}}</p> + +<h2 id="예">예</h2> + +<h3 id="WeakMap_사용"><code>WeakMap</code> 사용</h3> + +<pre class="brush: js">var wm1 = new WeakMap(), + wm2 = new WeakMap(), + wm3 = new WeakMap(); +var o1 = {}, + o2 = function(){}, + o3 = window; + +wm1.set(o1, 37); +wm1.set(o2, "azerty"); +wm2.set(o1, o2); // 값은 무엇이든 될 수 있음, 객체 또는 함수 포함 +wm2.set(o3, undefined); +wm2.set(wm1, wm2); // 키와 값은 어떤 객체든 될 수 있음. 심지어 WeakMap도! + +wm1.get(o2); // "azerty" +wm2.get(o2); // undefined, wm2에 o2에 대한 키가 없기에 +wm2.get(o3); // undefined, 이게 설정값이기에 + +wm1.has(o2); // true +wm2.has(o2); // false +wm2.has(o3); // true (값 자체가 'undefined'이더라도) + +wm3.set(o1, 37); +wm3.get(o1); // 37 + +wm1.has(o1); // true +wm1.delete(o1); +wm1.has(o1); // false +</pre> + +<h3 id=".clear()_메서드로_WeakMap_같은_클래스_구현">.clear() 메서드로 <code>WeakMap</code> 같은 클래스 구현</h3> + +<p>설명을 위해, 다음 예는 새로운 ECMAScript 6 <code>class</code> 구조를 사용합니다, 현재 널리 구현되지 않은.</p> + +<pre class="brush: js">class ClearableWeakMap { + constructor(init) { + this._wm = new WeakMap(init) + } + clear() { + this._wm = new WeakMap() + } + delete(k) { + return this._wm.delete(k) + } + get(k) { + return this._wm.get(k) + } + has(k) { + return this._wm.has(k) + } + set(k, v) { + this._wm.set(k, v) + return this + } +} +</pre> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES6', '#sec-weakmap-objects', 'WeakMap')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-weakmap-objects', 'WeakMap')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>36</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>11</td> + <td>{{ CompatOpera(23) }}</td> + <td>7.1</td> + </tr> + <tr> + <td><code>new WeakMap(iterable)</code></td> + <td>38</td> + <td>{{CompatGeckoDesktop("36")}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatOpera(25) }}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>clear()</code></td> + <td>36</td> + <td>{{CompatNo}} [1]</td> + <td>11</td> + <td>{{ CompatOpera(23) }}</td> + <td>7.1</td> + </tr> + <tr> + <td>Constructor argument: <code>new WeakMap(null)</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("37")}}</td> + <td>11</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Monkey-patched <code>set()</code> in constructor</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("37")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>WeakMap()</code> without <code>new</code> throws</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("42")}}</td> + <td>11</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>35</td> + <td>{{CompatGeckoMobile("6.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td><code>new WeakMap(iterable)</code></td> + <td>38</td> + <td>{{CompatGeckoMobile("36")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>clear()</code></td> + <td>35</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td>Constructor argument: <code>new WeakMap(null)</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("37")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Monkey-patched <code>set()</code> in constructor</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("37")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>WeakMap()</code> without <code>new</code> throws</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("42")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] clear() 메서드는 버전 20부터 45(포함)까지 지원됐습니다.</p> + +<h2 id="참조">참조</h2> + +<ul> + <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=547941">Mozilla에서 WeakMap 버그</a></li> + <li><a href="http://fitzgeraldnick.com/weblog/53/">ECMAScript 6 WeakMap으로 구현 정보 은닉</a></li> + <li>{{jsxref("Map")}}</li> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("WeakSet")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/weakmap/prototype/index.html b/files/ko/web/javascript/reference/global_objects/weakmap/prototype/index.html new file mode 100644 index 0000000000..48b4586b6e --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/weakmap/prototype/index.html @@ -0,0 +1,142 @@ +--- +title: WeakMap.prototype +slug: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype +tags: + - ECMAScript6 + - JavaScript + - Property + - WeakMap +translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap +--- +<div>{{JSRef}}</div> + +<p><code><strong>WeakMap.prototype</strong></code> 속성(property)은 {{jsxref("WeakMap")}} 생성자에 대한 프로토타입을 나타냅니다.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="설명">설명</h2> + +<p>{{jsxref("WeakMap")}} 인스턴스는 {{jsxref("WeakMap.prototype")}}에서 상속합니다. 모든 <code>WeakMap</code> 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있습니다.</p> + +<p><code>WeakMap.prototype</code>은 그 자체로 그냥 평범한 객체입니다:</p> + +<pre class="brush: js">Object.prototype.toString.call(WeakMap.prototype); // "[object Object]"</pre> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>WeakMap.prototype.constructor</code></dt> + <dd>인스턴스의 프로토타입을 생성한 함수를 반환합니다. 이는 기본으로 {{jsxref("WeakMap")}} 함수입니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(key)")}}</dt> + <dd><code>key</code>와 관련된 모든 값을 제거합니다. <code>WeakMap.prototype.has(key)</code>는 그 뒤에 <code>false</code>를 반환합니다.</dd> + <dt>{{jsxref("WeakMap.get", "WeakMap.prototype.get(key)")}}</dt> + <dd><code>key</code>와 관련된 값 또는 관련 값이 없는 경우 <code>undefined</code>를 반환합니다.</dd> + <dt>{{jsxref("WeakMap.has", "WeakMap.prototype.has(key)")}}</dt> + <dd><code>WeakMap</code> 객체 내 <code>key</code>와 관련된 값이 있는지 여부를 주장하는(asserting, 나타내는) boolean을 반환합니다.</dd> + <dt>{{jsxref("WeakMap.set", "WeakMap.prototype.set(key, value)")}}</dt> + <dd><code>WeakMap</code> 객체 내 <code>key</code>에 대해 값을 설정합니다. <code>WeakMap</code> 객체를 반환합니다.</dd> + <dt><s class="obsoleteElement">{{jsxref("WeakMap.prototype.clear()")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement"><code>WeakMap</code> 객체에서 모든 키/값 쌍을 제거합니다. 메서드가 없는 <code>WeakMap</code> 객체를 캡슐화하여 <code>.clear()</code> 메서드가 있는 <code>WeakMap</code> 같은 객체 구현이 가능함을 주의하세요 ({{jsxref("WeakMap")}} 페이지 예 참조)</s></dd> +</dl> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>36</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>11</td> + <td>23</td> + <td>7.1</td> + </tr> + <tr> + <td>Ordinary object</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("40")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("6.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td>Ordinary object</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("40")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Map.prototype")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/weakset/index.html b/files/ko/web/javascript/reference/global_objects/weakset/index.html new file mode 100644 index 0000000000..17f818659d --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/weakset/index.html @@ -0,0 +1,108 @@ +--- +title: WeakSet +slug: Web/JavaScript/Reference/Global_Objects/WeakSet +tags: + - ECMAScript 2015 + - JavaScript + - Reference + - WeakSet +translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet +--- +<div>{{JSRef}}</div> + +<p><strong><code>WeakSet</code></strong> 객체는 약하게 유지되는(held, 잡아두는) <em>객체</em>를 컬렉션에 저장할 수 있습니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">new WeakSet([iterable]);</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>iterable</code></dt> + <dd><a href="/ko/docs/Web/JavaScript/Reference/Statements/for...of">iterable 객체</a>가 전달된 경우, 모든 객체 요소는 새로운 <code>WeakSet</code>에 추가됩니다. null은 undefined로 취급됩니다.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p><code>WeakSet</code> 객체는 객체 컬렉션입니다. <code>WeakSet</code> 내 객체는 오직 한 번만 발생할 수 있습니다. 즉, <code>WeakSet</code> 컬렉션 내에서 유일합니다.</p> + +<p>{{jsxref("Set")}} 객체와 주된 차이는 다음과 같습니다:</p> + +<ul> + <li><code>Set</code>과 달리, <code>WeakSet</code>은 <strong>객체 만의 컬렉션</strong>이며 모든 유형의 임의 값(의 컬렉션)은 아닙니다.</li> + <li><code>WeakSet</code>은 약합니다(<em>weak</em>): 컬렉션 내 객체 참조는 약하게 유지됩니다. <code>WeakSet</code> 내 저장된 객체에 다른 참조가 없는 경우, 쓰레기 수집(garbage collection)될 수 있습니다. 이는 또한 컬렉션 내 현재 저장된 객체 목록이 없음을 뜻합니다. <code>WeakSets</code>은 열거불가입니다.</li> +</ul> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>WeakSet.length</code></dt> + <dd><code>length</code> 속성값은 0.</dd> + <dt>{{jsxref("WeakSet.prototype")}}</dt> + <dd><code>Set</code> 생성자에 대한 프로토타입을 나타냅니다. 모든 <code>WeakSet</code> 객체에 속성을 추가할 수 있습니다.</dd> +</dl> + +<h2 id="WeakSet_인스턴스"><code>WeakSet</code> 인스턴스</h2> + +<p>모든 <code>WeakSet</code> 인스턴스는 {{jsxref("WeakSet.prototype")}}에서 상속합니다.</p> + +<h3 id="속성_2">속성</h3> + +<p>{{page('ko/docs/Web/JavaScript/Reference/Global_Objects/WeakSet/prototype','속성')}}</p> + +<h3 id="메서드">메서드</h3> + +<p>{{page('ko/docs/Web/JavaScript/Reference/Global_Objects/WeakSet/prototype','메서드')}}</p> + +<h2 id="예제">예제</h2> + +<h3 id="WeakSet_객체_사용"><code>WeakSet</code> 객체 사용</h3> + +<pre class="brush: js">var ws = new WeakSet(); +var obj = {}; +var foo = {}; + +ws.add(window); +ws.add(obj); + +ws.has(window); // true +ws.has(foo); // false, foo가 집합에 추가되지 않았음 + +ws.delete(window); // 집합에서 window 제거함 +ws.has(window); // false, window가 제거되었음 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-weakset-objects', 'WeakSet')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-weakset-objects', 'WeakSet')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.WeakSet")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Map")}}</li> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("WeakMap")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/weakset/prototype/index.html b/files/ko/web/javascript/reference/global_objects/weakset/prototype/index.html new file mode 100644 index 0000000000..ee3f439ae9 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/weakset/prototype/index.html @@ -0,0 +1,141 @@ +--- +title: WeakSet.prototype +slug: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype +tags: + - ECMAScript6 + - JavaScript + - Property + - WeakSet +translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet +--- +<div>{{JSRef}}</div> + +<p><code><strong>WeakSet.prototype</strong></code> 속성(property)은 {{jsxref("WeakSet")}} 생성자에 대한 프로토타입을 나타냅니다.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="설명">설명</h2> + +<p>{{jsxref("WeakSet")}} 인스턴스는 {{jsxref("WeakSet.prototype")}}에서 상속합니다. 모든 <code>WeakSet</code> 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있습니다.</p> + +<p><code>WeakSet.prototype</code>은 그 자체로 그냥 평범한 객체입니다:</p> + +<pre class="brush: js">Object.prototype.toString.call(WeakSet.prototype); // "[object Object]"</pre> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>WeakSet.prototype.constructor</code></dt> + <dd>인스턴스의 프로토타입을 생성한 함수를 반환합니다. 이는 기본으로 {{jsxref("WeakSet")}} 함수입니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("WeakSet.add", "WeakSet.prototype.add(value)")}}</dt> + <dd><code>WeakSet</code> 객체에 주어진 값을 갖는 새로운 객체를 추가합니다.</dd> + <dt>{{jsxref("WeakSet.delete", "WeakSet.prototype.delete(value)")}}</dt> + <dd><code>value</code>와 관련된 요소를 제거합니다. <code>WeakSet.prototype.has(value)</code>는 그 뒤에 <code>false</code>를 반환합니다.</dd> + <dt>{{jsxref("WeakSet.has", "WeakSet.prototype.has(value)")}}</dt> + <dd><code>WeakSet</code> 객체 내 주어진 값을 갖는 요소가 존재하는 지 여부를 주장하는(asserting, 나타내는) boolean을 반환합니다.</dd> + <dt><s class="obsoleteElement">{{jsxref("WeakSet.prototype.clear()")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement"><code>WeakSet</code> 객체에서 모든 요소를 제거합니다.</s></dd> +</dl> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-weakset.prototype', 'WeakSet.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-weakset.prototype', 'WeakSet.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>36</td> + <td>{{ CompatGeckoDesktop(34) }}</td> + <td>{{CompatNo}}</td> + <td>23</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Ordinary object</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("40")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome for Android</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile(34) }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Ordinary object</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("40")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Set.prototype")}}</li> + <li>{{jsxref("WeakMap.prototype")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/compile/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/compile/index.html new file mode 100644 index 0000000000..eb7dd71f5f --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/webassembly/compile/index.html @@ -0,0 +1,83 @@ +--- +title: WebAssembly.compile() +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/compile +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/compile +--- +<div>{{JSRef}}</div> + +<p><strong><code>WebAssembly.compile()</code></strong>함수는 WebAssembly 바이너리 코드에서 {{jsxref ( "WebAssembly.Module")}}을 컴파일합니다. 이 함수는 모듈을 인스턴스화하기 전에 컴파일해야하는 경우에 유용합니다. 그렇지 않으면 {{jsxref ( "WebAssembly.instantiate ()")}} 함수를 사용해야합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">Promise<WebAssembly.Module> WebAssembly.compile(bufferSource);</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><em>bufferSource</em></dt> + <dd>컴파일 할 .wasm 모듈의 이진 코드가 들어있는 <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a> 또는 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a>입니다.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p><code>Promise</code>는 컴파일 된 모듈로 표현된 {{jsxref ( "WebAssembly.Module")}} 객체로 반환됩니다.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<ul> + <li><code>bufferSource</code>가 <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a>가 아니면 {{jsxref("TypeError")}}가 발생합니다.</li> + <li>컴파일에 실패하면 promise는 {{jsxref("WebAssembly.CompileError")}}와 함께 reject가 반환됩니다.</li> +</ul> + +<h2 id="Examples">Examples</h2> + +<p>다음은 <code>compile()</code> 함수를 사용하여 simple.wasm 바이트 코드를 컴파일 하고 <a href="/en-US/docs/Web/API/Worker/postMessage">postMessage()</a>를 사용하여 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">worker</a>에 보내는 예제입니다.</p> + +<pre class="brush: js">var worker = new Worker("wasm_worker.js"); + +fetch('simple.wasm').then(response => + response.arrayBuffer() +).then(bytes => + WebAssembly.compile(bytes) +).then(mod => + worker.postMessage(mod) +);</pre> + +<div class="note"> +<p><strong>Note</strong>: 대부분의 경우에 {{jsxref("WebAssembly.compileStreaming()")}}를 사용하는 것이 좋습니다. 이는 <code>compile()</code>보다 효율적이기 때문입니다.</p> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebAssembly JS', '#webassemblycompile', 'compile()')}}</td> + <td>{{Spec2('WebAssembly JS')}}</td> + <td>Initial draft definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.WebAssembly.compile")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/WebAssembly">WebAssembly</a> overview page</li> + <li><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly concepts</a></li> + <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/compileerror/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/compileerror/index.html new file mode 100644 index 0000000000..40ba328985 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/webassembly/compileerror/index.html @@ -0,0 +1,114 @@ +--- +title: WebAssembly.CompileError() +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError +--- +<div>{{JSRef}}</div> + +<p><code><strong>WebAssembly.CompileError()</strong></code>생성자는 WebAssembly 디코딩 또는 유효성 검사 중에 발생한 오류를 나타내는 WebAssembly <code>CompileError</code> 객체를 새로 만듭니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>new WebAssembly.CompileError(<var>message</var>, <var>fileName</var>, <var>lineNumber</var>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>message</code> {{optional_inline}}</dt> + <dd>사람이 읽을수 있는 형태의 에러에 대한 설명.</dd> + <dt><code>fileName</code> {{optional_inline}}{{non-standard_inline}}</dt> + <dd>예외의 원인이 된 코드가 들어있는 파일의 이름입니다.</dd> + <dt><code>lineNumber</code> {{optional_inline}}{{non-standard_inline}}</dt> + <dd>예외의 원인이 된 코드의 행 번호입니다.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<p><em><code>CompileError</code> 생성자에는 고유 한 고유 속성이 없지만 프로토 타입 체인을 통해 일부 속성을 상속합니다.</em></p> + +<dl> + <dt><code>WebAssembly.CompileError.prototype.constructor</code></dt> + <dd>인스턴스의 프로토 타입을 작성한 함수를 지정합니다.</dd> + <dt>{{jsxref("Error.prototype.message", "WebAssembly.CompileError.prototype.message")}}</dt> + <dd>에러 메시지. ECMA-262는 {{jsxref ( "URIError")}}가 <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>에서 자체 <code>message</code> 속성을 제공하도록 지정했지만 {{jsxref ( "Error.prototype.message")}}를 상속받습니다.</dd> + <dt>{{jsxref("Error.prototype.name", "WebAssembly.CompileError.prototype.name")}}</dt> + <dd>에러 명칭. {{jsxref("Error")}}에서 상속합니다.</dd> + <dt>{{jsxref("Error.prototype.fileName", "WebAssembly.CompileError.prototype.fileName")}}</dt> + <dd>에러가 발생한 파일의 경로. {{jsxref("Error")}}에서 상속합니다.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "WebAssembly.CompileError.prototype.lineNumber")}}</dt> + <dd>에러가 발생한 파일의 코드 줄번호. {{jsxref("Error")}}에서 상속합니다.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "WebAssembly.CompileError.prototype.columnNumber")}}</dt> + <dd>에러가 발생한 줄의 열 번호. {{jsxref("Error")}}에서 상속합니다.</dd> + <dt>{{jsxref("Error.prototype.stack", "WebAssembly.CompileError.prototype.stack")}}</dt> + <dd>스텍 추적. {{jsxref("Error")}}에서 상속합니다.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em><code>CompileError</code></em> 생성자에는 자체 메서드가 없지만 프로토 타입 체인을 통해 일부 메서드를 상속합니다.</p> + +<dl> + <dt>{{jsxref("Error.prototype.toSource", "WebAssembly.CompileError.prototype.toSource()")}}</dt> + <dd>동일한 오류로 판단할 수 있는 코드를 반환합니다. {{jsxref("Error")}}에서 상속합니다.</dd> + <dt>{{jsxref("Error.prototype.toString", "WebAssembly.CompileError.prototype.toString()")}}</dt> + <dd>지정된 Error 객체를 나타내는 문자열을 반환합니다. {{jsxref("Error")}}에서 상속합니다.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>다음 스 니펫은 새 <code>CompileError</code> 인스턴스를 만들고 콘솔에 세부 정보를 기록합니다.</p> + +<pre class="brush: js">try { + throw new WebAssembly.CompileError('Hello', 'someFile', 10); +} catch (e) { + console.log(e instanceof CompileError); // true + console.log(e.message); // "Hello" + console.log(e.name); // "CompileError" + console.log(e.fileName); // "someFile" + console.log(e.lineNumber); // 10 + console.log(e.columnNumber); // 0 + console.log(e.stack); // returns the location where the code was run +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebAssembly JS', '#constructor-properties-of-the-webassembly-object', 'WebAssembly constructors')}}</td> + <td>{{Spec2('WebAssembly JS')}}</td> + <td>Initial WebAssembly draft definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard', 'NativeError')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Definition of standard NativeError types.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.WebAssembly.CompileError")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/WebAssembly">WebAssembly</a> overview page</li> + <li><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly concepts</a></li> + <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li> +</ul> + +<dl> +</dl> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html new file mode 100644 index 0000000000..a713ca1c0d --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html @@ -0,0 +1,79 @@ +--- +title: WebAssembly.compileStreaming() +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming +--- +<div>{{JSRef}}</div> + +<p><strong><code>WebAssembly.compileStreaming()</code></strong>함수는 스트림 된 원본 소스에서 직접 {{jsxref ( "WebAssembly.Module")}}을 컴파일합니다. 이 함수는 모듈을 인스턴스화하기 전에 컴파일해야하는 경우 유용합니다 (그렇지 않으면 {{jsxref ( "WebAssembly.instantiateStreaming ()")}} 함수를 사용해야합니다).</p> + +<p> </p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">Promise<WebAssembly.Module> WebAssembly.compileStreaming(<em>source</em>);</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><em>source</em></dt> + <dd>스트리밍 및 컴파일하려는 .wasm 모듈의 기본 소스를 나타내는 {{domxref ( "Response")}} 객체 또는 약속을 수행합니다.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p><code>Promise</code>는 컴파일 된 모듈로 표현된 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module" title="The documentation about this has not yet been written; please consider contributing!"><code>WebAssembly.Module</code></a> 객체로 반환됩니다.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<ul> + <li><code>bufferSource</code>가 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a>가 아니면 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError" title="TypeError 객체는 변수의 값이 원하는 타입이 아닐 때 발생하는 에러를 표현합니다."><code>TypeError</code></a>가 발생합니다.</li> + <li>컴파일에 실패하면 promise는 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WebAssembly.CompileError</code></a>와 함께 reject가 반환됩니다.</li> +</ul> + +<h2 id="Examples">Examples</h2> + +<p>다음 예제 (GitHub의 <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/compile-streaming.html">compile-streaming.html</a> 데모 및 <a href="https://mdn.github.io/webassembly-examples/js-api-examples/compile-streaming.html">라이브보기</a>)에서 기본 소스의 .wasm 모듈을 직접 스트리밍 한 다음 {{jsxref ( "WebAssembly.Module")}} 객체로 컴파일합니다. <code>compileStreaming()</code> 함수는 {{domxref ( "Response")}} 객체에 대한 promise를 받으므로 직접 {{domxref ( "WindowOrWorkerGlobalScope.fetch ()")}} 호출을 전달할 수 있습니다.</p> + +<pre class="brush: js">var importObject = { imports: { imported_func: arg => console.log(arg) } }; + +WebAssembly.compileStreaming(fetch('simple.wasm')) +.then(module => WebAssembly.instantiate(module, importObject)) +.then(instance => instance.exports.exported_func());</pre> + +<p>결과 모듈 인스턴스는 {{jsxref ( "WebAssembly.instantiate ()")}}를 사용하여 인스턴스화되고 내 보낸 함수가 호출됩니다.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebAssembly Embedding', '#webassemblycompilestreaming', 'compileStreaming()')}}</td> + <td>{{Spec2('WebAssembly Embedding')}}</td> + <td>Initial draft definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.WebAssembly.compileStreaming")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/WebAssembly">WebAssembly</a> overview page</li> + <li><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly concepts</a></li> + <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/global/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/global/index.html new file mode 100644 index 0000000000..c85d74b53c --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/webassembly/global/index.html @@ -0,0 +1,116 @@ +--- +title: WebAssembly.Global +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global +--- +<div>{{JSRef}}</div> + +<div> </div> + +<div><strong><code>WebAssembly.Global</code></strong> 객체는 전역 변수 인스턴스를 나타내며 JavaScript 및 하나 이상의 {{jsxref("WebAssembly.Module")}} 인스턴스에서 가져 오거나 내보낼 수 있습니다. 이렇게하면 여러 모듈을 동적으로 연결할 수 있습니다.</div> + +<h2 id="Constructor_Syntax">Constructor Syntax</h2> + +<pre class="syntaxbox">var myGlobal = new WebAssembly.Global(<em>descriptor</em>, <em>value</em>);</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><em>descriptor</em></dt> + <dd>A <code>GlobalDescriptor</code> dictionary object, 두 개의 속성이 포함되어 있습니다. + <ul> + <li><code>value</code>: {{domxref("USVString")}}는 전역의 데이터 유형을 나타냅니다. i32, i64, f32 및 f64 중 하나입니다.</li> + <li><code>mutable</code>: 전역 변수를 변경할 수 있는지 여부를 결정하는 부울 값입니다. 기본적으로 <code>false</code>입니다.</li> + </ul> + </dd> + <dt><em>value</em></dt> + <dd>변수에 포함 된 값입니다. 변수의 데이터 타입과 일치하는 한 모든 값을 사용할 수 있습니다.<br> + 변수에 포함 된 값입니다. 변수의 데이터 타입과 일치하는 모든 값을 사용할 수 있습니다. 값을 지정하지 않으면 <a href="https://webassembly.github.io/spec/js-api/#defaultvalue"><code>DefaultValue</code> 알고리즘</a>에 지정된대로 입력 된 0 값이 사용됩니다.</dd> +</dl> + +<h2 id="Function_properties_of_the_Module_constructor">Function properties of the <code>Module</code> constructor</h2> + +<p>None.</p> + +<h2 id="Global_instances">Global instances</h2> + +<p>모든 <code>Global</code> 인스턴스는 <code>Global()</code> 생성자의 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype">prototype object</a>에서 상속받습니다.이 인스턴스는 모든 <code>Global</code> 인스턴스에 영향을 미치도록 수정할 수 있습니다.</p> + +<h3 id="Instance_properties">Instance properties</h3> + +<p>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype', 'Properties')}}</p> + +<h3 id="Instance_methods">Instance methods</h3> + +<p>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype', 'Methods')}}</p> + +<h2 id="Examples">Examples</h2> + +<p>다음 예제에서는 <code>WebAssembly.Global()</code> 생성자를 사용하여 만드는 새 전역 인스턴스를 보여줍니다. 값이 0 인 변경 가능한 <code>i32</code> 유형으로 정의됩니다.</p> + +<p>The value of the global is then changed, first to <code>42</code> using the <code>Global.value</code> property, and then to 43 using the <code>incGlobal()</code> function exported out of the <code>global.wasm</code> module (this adds 1 to whatever value is given to it and then returns the new value). </p> + +<p>그런 다음 <code>global.value</code> 속성을 사용하여 <code>42</code>까지 전역 값을 변경 한 다음 <code>global.wasm</code> 모듈에서 내 보낸 <code>incGlobal()</code> 함수를 사용하여 43으로 변경합니다.(이것은 값이 주어진 값에 1을 더한 다음 새 값을 반환합니다.)</p> + +<pre class="brush: js">const output = document.getElementById('output'); + +function assertEq(msg, got, expected) { + output.innerHTML += `Testing ${msg}: `; + if (got !== expected) + output.innerHTML += `FAIL!<br>Got: ${got}<br>Expected: ${expected}<br>`; + else + output.innerHTML += `SUCCESS! Got: ${got}<br>`; +} + +assertEq("WebAssembly.Global exists", typeof WebAssembly.Global, "function"); + +const global = new WebAssembly.Global({value:'i32', mutable:true}, 0); + +WebAssembly.instantiateStreaming(fetch('global.wasm'), { js: { global } }) +.then(({instance}) => { + assertEq("getting initial value from wasm", instance.exports.getGlobal(), 0); + global.value = 42; + assertEq("getting JS-updated value from wasm", instance.exports.getGlobal(), 42); + instance.exports.incGlobal(); + assertEq("getting wasm-updated value from JS", global.value, 43); +});</pre> + +<div class="note"> +<p><strong>Note</strong>: GitHub에서 실행중인 예제(<a href="https://mdn.github.io/webassembly-examples/js-api-examples/global.html">running live on GitHub</a>)를 볼 수 있습니다. <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html">source code</a>도 참조하십시오.</p> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebAssembly JS', '#globals', 'WebAssembly.Global()')}}</td> + <td>{{Spec2('WebAssembly JS')}}</td> + <td>Initial draft definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.WebAssembly.Global")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/ko/docs/WebAssembly">WebAssembly</a> overview page</li> + <li><a href="/ko/docs/WebAssembly/Concepts">WebAssembly concepts</a></li> + <li><a href="/ko/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li> + <li><a href="https://github.com/WebAssembly/mutable-global/blob/master/proposals/mutable-global/Overview.md">Import/Export mutable globals proposal</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/global/prototype/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/global/prototype/index.html new file mode 100644 index 0000000000..3b7e8a9e2b --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/webassembly/global/prototype/index.html @@ -0,0 +1,69 @@ +--- +title: WebAssembly.Global.prototype +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global +--- +<div>{{JSRef}}</div> + +<p><code><strong>WebAssembly.Global</strong></code><strong><code>.prototype</code></strong> 속성은 {{jsxref("WebAssembly.Global()")}} 생성자의 프로토 타입을 나타냅니다.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Description">Description</h2> + +<p>모든 {{jsxref("WebAssembly.Global")}} 인스턴스는 <code>Global.prototype</code>에서 상속받습니다. {{jsxref("WebAssembly.Global()")}} 생성자의 프로토 타입 객체는 모든 {{jsxref( "WebAssembly.Global")}} 인스턴스에 영향을 미치도록 수정할 수 있습니다.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code>Global.prototype.constructor</code></dt> + <dd>이 객체의 인스턴스를 생성 한 함수를 돌려줍니다. 기본적으로 이것은 {{jsxref("WebAssembly.Global()")}} 생성자입니다.</dd> + <dt><code>Global.prototype[@@toStringTag]</code></dt> + <dd><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag">@@toStringTag</a> 속성의 초기 값은 String 값인 "WebAssembly.Global"입니다.</dd> + <dt><code>Global.prototype.value</code></dt> + <dd>전역 변수에 포함 된 값 - 전역 값을 직접 설정하고 가져 오는 데 사용할 수 있습니다.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt><code>Global.prototype.valueOf()</code></dt> + <dd>전역 변수에 포함 된 값을 반환하는 Old-style 메서드입니다.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebAssembly JS', '#globals', 'WebAssembly.Global()')}}</td> + <td>{{Spec2('WebAssembly JS')}}</td> + <td>Initial draft definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.WebAssembly.Global.prototype")}}</p> +</div> + +<div> + +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("WebAssembly.Global()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/index.html new file mode 100644 index 0000000000..8412c9f0e4 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/webassembly/index.html @@ -0,0 +1,100 @@ +--- +title: WebAssembly +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly +--- +<div>{{JSRef}}</div> + +<p><strong><code>WebAssembly</code></strong> 자바스크립트 객체는 모든 <a href="/ko/docs/WebAssembly">WebAssembly</a>에 관계된 기능의 네임스페이스로서 역할합니다.</p> + +<p>대부분의 전역객체와 다르게, <code>WebAssembly</code>는 생성자가 아닙니다 (함수 객체가 아닙니다). 비슷한 예로 수학적인 상수나 함수들을 담고있는 {{jsxref("Math")}} 객체나, 국제화 관련 생성자나 언어에 민감한 다른 함수들을 담고있는 {{jsxref("Intl")}} 등이 있습니다.</p> + +<h2 id="설명">설명</h2> + +<p><code>WebAssembly</code> 객체의 기본적인 사용례는 다음과 같습니다:</p> + +<ul> + <li>{{jsxref("WebAssembly.instantiate()")}} 함수를 사용해서 웹어셈블리 코드 불러오기.</li> + <li>{{jsxref("WebAssembly.Memory()")}}/{{jsxref("WebAssembly.Table()")}} 생성자로 새 메모리와 테이블 인스턴스 생성하기.</li> + <li>{{jsxref("WebAssembly.CompileError()")}}/{{jsxref("WebAssembly.LinkError()")}}/{{jsxref("WebAssembly.RuntimeError()")}} 생성자로 웹어셈블리에서 발생하는 에러에 대한 처리장치 만들기.</li> +</ul> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("WebAssembly.instantiate()")}}</dt> + <dd>WebAssembly 코드를 컴파일하고 인스턴스화하여 <code>Module</code>과 첫 번째 <code>Instance</code>를 반환하는 기본 API입니다.</dd> + <dt>{{jsxref("WebAssembly.instantiateStreaming()")}}</dt> + <dd>스트리밍 된 원본 소스에서 직접 WebAssembly 모듈을 컴파일하고 인스턴스화하여 <code>Module</code>과 첫 번째 <code>Instance</code>를 반환합니다.</dd> + <dt>{{jsxref("WebAssembly.compile()")}}</dt> + <dd>WebAssembly 바이너리 코드에서 {{jsxref("WebAssembly.Module")}}을 컴파일하여 인스턴스화를 별도의 단계로 남겨 둡니다.</dd> + <dt>{{jsxref("WebAssembly.compileStreaming()")}}</dt> + <dd>{{jsxref("WebAssembly.Module")}}을 스트림 된 원본 소스에서 직접 컴파일하여 인스턴스화를 별도의 단계로 남겨 둡니다.</dd> + <dt>{{jsxref("WebAssembly.validate()")}}</dt> + <dd>바이트가 유효한 WebAssembly 코드 (<code>true</code>)인지 아닌지 (<code>false</code>)를 반환하여 WebAssembly 바이너리 코드의 지정된 입력 된 배열을 확인합니다.</dd> +</dl> + +<h2 id="생성자">생성자</h2> + +<dl> + <dt>{{jsxref("WebAssembly.Global()")}}</dt> + <dd>Creates a new WebAssembly <code>Global</code> object.</dd> + <dt>{{jsxref("WebAssembly.Module()")}}</dt> + <dd>Creates a new WebAssembly <code>Module</code> object.</dd> + <dt>{{jsxref("WebAssembly.Instance()")}}</dt> + <dd>Creates a new WebAssembly <code>Instance</code> object.</dd> + <dt>{{jsxref("WebAssembly.Memory()")}}</dt> + <dd>Creates a new WebAssembly <code>Memory</code> object.</dd> + <dt>{{jsxref("WebAssembly.Table()")}}</dt> + <dd>Creates a new WebAssembly <code>Table</code> object.</dd> + <dt>{{jsxref("WebAssembly.CompileError()")}}</dt> + <dd>Creates a new WebAssembly <code>CompileError</code> object.</dd> + <dt>{{jsxref("WebAssembly.LinkError()")}}</dt> + <dd>Creates a new WebAssembly <code>LinkError</code> object.</dd> + <dt>{{jsxref("WebAssembly.RuntimeError()")}}</dt> + <dd>Creates a new WebAssembly <code>RuntimeError</code> object.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<p>다음 예제 (GitHub의 <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html">instantiate-streaming.html</a> 데모보기 및 <a href="https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html">라이브보기</a>)에서는 기본 소스에서 .wasm 모듈을 직접 스트리밍 한 다음 컴파일하고 인스턴스화합니다. 프로미스는 <code>ResultObject</code>로 충족됩니다. <code>instantiateStreaming()</code> 함수는 {{domxref ( "Response")}} 객체에 대한 promise를 받아들이므로 직접 {{domxref ( "WindowOrWorkerGlobalScope.fetch()")}} 호출에 전달할 수 있습니다.</p> + +<pre><code>var importObject = { imports: { imported_func: arg => console.log(arg) } }; + +WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject) +.then(obj => obj.instance.exports.exported_func());</code></pre> + +<p>그런 다음 ResultObject의 인스턴스 구성에 액세스하고 그 안에 있는 <code>exported_func</code>을 호출합니다.</p> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebAssembly JS', '#the-webassembly-object', 'WebAssembly')}}</td> + <td>{{Spec2('WebAssembly JS')}}</td> + <td>초안 정의</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<div>{{Compat("javascript.builtins.WebAssembly")}}</div> + + + +<h2 id="바깥_고리">바깥 고리</h2> + +<ul> + <li><a href="/ko/docs/WebAssembly">웹어셈블리</a> 개요 페이지</li> + <li><a href="/ko/docs/WebAssembly/Concepts">웹어셈블리의 컨셉</a></li> + <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/instance/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/instance/index.html new file mode 100644 index 0000000000..3141c6809a --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/webassembly/instance/index.html @@ -0,0 +1,74 @@ +--- +title: WebAssembly.Instance +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance +--- +<div>{{JSRef}}</div> + +<p><strong><code>WebAssembly.Instance</code></strong> 개체는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module">WebAssembly.Module</a>의 상태 저장되고 실행 가능한 인스턴스입니다. <code>Instance</code> 객체에는 JavaScript에서 WebAssembly 코드로 호출 할 수있는 모든 <a href="/ko/docs/WebAssembly/Exported_functions">Exported WebAssembly functions</a>가 포함되어 있습니다.</p> + +<p>주어진 {{jsxref ( "WebAssembly.Module")}} 객체를 동기적으로 인스턴스화하기 위해 <code>WebAssembly.Instance()</code> 생성자 함수를 호출 할 수 있습니다. 하지만 <code>Instance</code>를 가져 오는 주요 방법은 비동기 {{jsxref ( "WebAssembly.instantiateStreaming ()")}} 함수를 사용하는 것입니다.</p> + +<h2 id="생성자_구문">생성자 구문</h2> + +<div class="warning"> +<p><strong>중요</strong>: 대형 모듈의 인스턴스화는 비용이 많이들 수 있으므로 개발자는 동기 인스턴스 생성이 절대적으로 필요한 경우에만 Instance () 생성자를 사용해야합니다. 비동기 {{jsxref ( "WebAssembly.instantiateStreaming ()")}} 메서드를 사용하세요.</p> +</div> + +<pre class="syntaxbox">var myInstance = new WebAssembly.Instance(<em>module</em>, <em>importObject</em>);</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code><em>module</em></code></dt> + <dd>인스턴스화 할 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module" title="The Module() constructor of the WebAssembly global object creates a new Module object instance."><code>WebAssembly.Module</code></a> 객체입니다.</dd> + <dt><code><em>importObject</em></code> {{optional_inline}}</dt> + <dd>함수 또는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory" title="The Memory() constructor of the WebAssembly global object creates a new Memory object instance, which represents a WebAssembly memory. These can be thought of as resizeable array buffers, wrappers around WebAssembly memories."><code>WebAssembly.Memory</code></a>객체와 같이 새로 생성 된 인스턴스로 가져올 값을 포함하는 객체입니다. 선언 된 각 <code>module</code> 가져오기에 대해 일치하는 속성이 하나 있어야합니다. 그렇지 않으면 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError">WebAssembly.LinkError</a>가 발생합니다.</dd> +</dl> + +<h2 id="Instance_인스턴스"><code>Instance</code> 인스턴스</h2> + +<p>모든 <code>Instance</code> 인스턴스는 <code>Instance()</code> 생성자의 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/prototype">prototype object</a>에서 상속받습니다.이 인스턴스를 수정하면 모든 <code>Instance</code> 인스턴스에 영향을 줍니다.</p> + +<h3 id="인스턴스_속성">인스턴스 속성</h3> + +<p>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/prototype', 'Properties')}}</p> + +<h3 id="인스턴스_메서드">인스턴스 메서드</h3> + +<p>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/prototype', 'Methods')}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebAssembly JS', '#webassemblyinstance-objects', 'Instance')}}</td> + <td>{{Spec2('WebAssembly JS')}}</td> + <td>Initial draft definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("javascript.builtins.WebAssembly.Instance")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/WebAssembly">WebAssembly</a> overview page</li> + <li><a href="/ko/docs/WebAssembly/Concepts">WebAssembly concepts</a></li> + <li><a href="/ko/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/instantiate/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/instantiate/index.html new file mode 100644 index 0000000000..c7b250c090 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/webassembly/instantiate/index.html @@ -0,0 +1,168 @@ +--- +title: WebAssembly.instantiate() +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate +--- +<div>{{JSRef}}</div> + +<p><strong><code>WebAssembly.instantiate()</code></strong> 함수를 사용하면 WebAssembly 코드를 컴파일하고 인스턴스화 할 수 있습니다. 이 함수에는 두개의 overloads가 있습니다.</p> + +<ul> + <li>기본 오버로드는 <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a> 또는 {{jsxref ( "ArrayBuffer")}}의 형태로 WebAssembly 바이너리 코드를 취해 컴파일 및 인스턴스화를 한 번에 수행합니다. 반환 된 Promise는 컴파일 된 {{jsxref ( "WebAssembly.Module")}} 및 첫 번째 {{jsxref ( "WebAssembly.Instance")}}로 해석됩니다.</li> + <li>두번째 오버로드는 이미 컴파일 된 {{jsxref ( "WebAssembly.Module")}}을 취하여 해당 <code>Module</code>의 <code>Instance</code>로 해석되는 <code>Promise</code>을 반환합니다. 이 overload는 <code>Module</code>이 이미 컴파일된 경우 유용합니다.</li> +</ul> + +<div class="warning"> +<p><strong>중요 : </strong><strong>이 방법은 wasm 모듈을 가져와 인스턴스화하는 가장 효율적인 방법은 아닙니다. 가능하다면 원시 바이트 코드에서 모듈을 모두 한 단계로 가져오고, 컴파일하고 인스턴스화하는 대신 최신 {{jsxref ( "WebAssembly.instantiateStreaming ()")}} 메서드를 사용해야합니다. {{jsxref ( "ArrayBuffer")}} 로의 변환이 필요합니다.</strong></p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<h3 id="Primary_overload_—_taking_wasm_binary_code">Primary overload — taking wasm binary code</h3> + +<pre class="syntaxbox">Promise<ResultObject> WebAssembly.instantiate(bufferSource, importObject); +</pre> + +<h4 id="Parameters">Parameters</h4> + +<dl> + <dt><em>bufferSource</em></dt> + <dd>컴파일 할 .wasm 모듈의 이진 코드가 들어있는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a> 또는 {{jsxref("ArrayBuffer")}}입니다.</dd> + <dt><em>importObject</em> {{optional_inline}}</dt> + <dd>함수 또는 {{jsxref ( "WebAssembly.Memory")}} 객체와 같이 새로 생성 된 <code>인스턴스</code>로 가져올 값을 포함하는 객체입니다. 컴파일 된 모듈의 각 선언 된 가져 오기에 대해 하나의 일치하는 속성이 있어야합니다. 그렇지 않으면 {{jsxref("WebAssembly.LinkError")}}가 발생합니다.</dd> +</dl> + +<h4 id="Return_value">Return value</h4> + +<p>두개의 필드를 포함하는 <code>ResultObject</code>를 가진 <code>Promise</code>를 반환:</p> + +<ul> + <li><code>module</code>: 컴파일 된 WebAssembly 모듈을 나타내는 {{jsxref ( "WebAssembly.Module")}} 객체입니다. 이 <code>Module</code>은 {{domxref("Worker.postMessage", "postMessage()")}}를 통해 공유되거나 <a href="/en-US/docs/WebAssembly/Caching_modules">cached in IndexedDB</a>로 다시 인스턴스화 될 수 있습니다.</li> + <li><code>instance</code>: <a href="/en-US/docs/WebAssembly/Exported_functions">Exported WebAssembly functions</a>을 포함하는 {{jsxref ( "WebAssembly.Instance")}} 객체입니다.</li> +</ul> + +<h4 id="Exceptions">Exceptions</h4> + +<ul> + <li>매개 변수 중 하나가 올바른 유형 또는 구조가 아니면 {{jsxref ( "TypeError")}}가 발생합니다.</li> + <li>작업이 실패하면 promise는 실패 원인에 따라 {{jsxref ( "WebAssembly.CompileError")}}, {{jsxref ( "WebAssembly.LinkError")}} 또는 {{jsxref ( "WebAssembly.RuntimeError")}}로 reject됩니다.</li> +</ul> + +<h3 id="Secondary_overload_—_taking_a_module_object_instance">Secondary overload — taking a module object instance</h3> + +<pre class="syntaxbox">Promise<WebAssembly.Instance> WebAssembly.instantiate(module, importObject); +</pre> + +<h4 id="Parameters_2">Parameters</h4> + +<dl> + <dt><em>module</em></dt> + <dd>{{jsxref ( "WebAssembly.Module")}} 객체가 인스턴스화됩니다.</dd> + <dt><em>importObject</em> {{optional_inline}}</dt> + <dd>함수 또는 {{jsxref ( "WebAssembly.Memory")}} 객체와 같이 새로 생성 된 인스턴스로 가져올 값을 포함하는 객체입니다. 선언 된 각 <code>module</code> 가져 오기에 대해 일치하는 속성이 하나 있어야합니다. 그렇지 않으면 {{jsxref("WebAssembly.LinkError")}} 가 발생합니다.</dd> +</dl> + +<h4 id="Return_value_2">Return value</h4> + +<p>A <code>Promise</code> that resolves to an {{jsxref("WebAssembly.Instance")}} object.</p> + +<h4 id="Exceptions_2">Exceptions</h4> + +<ul> + <li>매개 변수 중 하나가 올바른 유형 또는 구조가 아니면 {{jsxref ( "TypeError")}}가 발생합니다.</li> + <li>If the operation fails, the promise rejects with a {{jsxref("WebAssembly.CompileError")}}, {{jsxref("WebAssembly.LinkError")}}, or {{jsxref("WebAssembly.RuntimeError")}}, depending on the cause of the failure. <br> + 작업이 실패하면 promise는 실패 원인에 따라 {{jsxref ( "WebAssembly.CompileError")}}, {{jsxref ( "WebAssembly.LinkError")}} 또는 {{jsxref ( "WebAssembly.RuntimeError")}}로 reject됩니다.</li> +</ul> + +<h2 id="Examples">Examples</h2> + +<p><strong>Note</strong>: 대부분의 경우 <code>instantiate()</code>보다 더 효율적이므로 {{jsxref ( "WebAssembly.instantiateStreaming ()")}}을 사용하는 것이 좋습니다.</p> + +<h3 id="First_overload_example">First overload example</h3> + +<p>fetch를 사용하여 일부 WebAssembly 바이트 코드를 가져온 후 우리는 {{jsxref ( "WebAssembly.instantiate ()")}} 함수를 사용하여 모듈을 컴파일하고 인스턴스화하여 해당 프로세스에서 JavaScript 함수를 WebAssembly 모듈로 가져옵니다. 그런 다음 <code>Instance</code>에서 <a href="/en-US/docs/WebAssembly/Exported_functions">Exported WebAssembly function</a>를 호출합니다.</p> + +<pre class="brush: js">var importObject = { + imports: { + imported_func: function(arg) { + console.log(arg); + } + } +}; + +fetch('simple.wasm').then(response => + response.arrayBuffer() +).then(bytes => + WebAssembly.instantiate(bytes, importObject) +).then(result => + result.instance.exports.exported_func() +);</pre> + +<div class="note"> +<p><strong>Note</strong>: 이 예제는 GitHub의 <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index.html">index.html</a>에서도 찾을 수 있습니다 (<a href="https://mdn.github.io/webassembly-examples/js-api-examples/">라이브보기도 있음</a>).</p> +</div> + +<h3 id="Second_overload_example">Second overload example</h3> + +<p>다음 예제는 (GitHub의 <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index-compile.html">index-compile.html</a> 데모 혹은 <a href="https://mdn.github.io/webassembly-examples/js-api-examples/index-compile.html">라이브로 보기</a>). {{jsxref ( "WebAssembly.compileStreaming ()")}} 메서드를 사용하여 로드된 simple.wasm 바이트 코드를 컴파일 한 다음 {{domxref("Worker.postMessage", "postMessage()")}}를 사용하여 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">worker</a>에게 전달합니다.</p> + +<pre class="brush: js">var worker = new Worker("wasm_worker.js"); + +WebAssembly.compileStreaming(fetch('simple.wasm')) +.then(mod => + worker.postMessage(mod) +);</pre> + +<p>작업자 (<code><a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/wasm_worker.js">wasm_worker.js</a></code> 참조)에서 모듈이 사용할 가져 오기 객체를 정의한 다음 주 스레드에서 모듈을 수신 할 이벤트 핸들러를 설정합니다. 모듈을 받으면 {{jsxref ( "WebAssembly.instantiate ()")}} 메소드를 사용하여 인스턴스를 만들고 내부에서 내 보낸 함수를 호출합니다.</p> + +<pre class="brush: js">var importObject = { + imports: { + imported_func: function(arg) { + console.log(arg); + } + } +}; + +onmessage = function(e) { + console.log('module received from main thread'); + var mod = e.data; + + WebAssembly.instantiate(mod, importObject).then(function(instance) { + instance.exports.exported_func(); + }); +};</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebAssembly JS', '#webassemblyinstantiate', 'instantiate()')}}</td> + <td>{{Spec2('WebAssembly JS')}}</td> + <td>Initial draft definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<div> +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("javascript.builtins.WebAssembly.instantiate")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/WebAssembly">WebAssembly</a> overview page</li> + <li><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly concepts</a></li> + <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html new file mode 100644 index 0000000000..e1b2fde3b7 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html @@ -0,0 +1,83 @@ +--- +title: WebAssembly.instantiateStreaming() +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming +--- +<div>{{JSRef}}</div> + +<p><strong><code>WebAssembly.instantiateStreaming()</code></strong> 함수는 스트림 된 원본 소스에서 직접 WebAssembly 모듈을 컴파일하고 인스턴스화합니다. Wasm 코드를로드하는 가장 효율적이고 최적화 된 방법입니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">Promise<ResultObject> WebAssembly.instantiateStreaming(<em>source</em>, <em>importObject</em>);</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><em>source</em></dt> + <dd>스트리밍, 컴파일 및 인스턴스화하려는 .wasm 모듈의 기본 소스를 나타내는 {{domxref ( "Response")}} 객체 또는 promise.</dd> + <dt><em>importObject</em> {{optional_inline}}</dt> + <dd>함수 또는 {{jsxref("WebAssembly.Memory")}} 객체와 같이 새로 생성 된 <code>Instance</code>로 가져올 값을 포함하는 객체입니다. 컴파일 된 모듈의 각 선언 된 가져 오기에 대해 하나의 일치하는 속성이 있어야합니다. 그렇지 않으면 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError">WebAssembly.LinkError</a>가 발생합니다.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>두 개의 필드를 포함하는 <code>ResultObject</code>로 해석되는 <code>Promise</code> :</p> + +<ul> + <li><code>module</code>: 컴파일 된 WebAssembly 모듈을 나타내는 {{jsxref ( "WebAssembly.Module")}} 객체입니다. 이 <code>Module</code>은 다시 인스턴스화되거나 <a href="/en-US/docs/Web/API/Worker/postMessage">postMessage()</a>를 통해 공유 될 수 있습니다.</li> + <li><code>instance</code>: <a href="/en-US/docs/WebAssembly/Exported_functions">Exported WebAssembly functions</a>를 포함하는 {{jsxref ( "WebAssembly.Instance")}} 객체입니다.</li> +</ul> + +<h3 id="Exceptions">Exceptions</h3> + +<ul> + <li>매개 변수 중 하나가 올바른 유형 또는 구조가 아니면 {{jsxref ( "TypeError")}}가 발생합니다.</li> + <li>작업작업이 실패하면 promise는 실패 원인에 따라 {{jsxref ( "WebAssembly.CompileError")}}, {{jsxref ( "WebAssembly.LinkError")}} 또는 {{jsxref ( "WebAssembly.RuntimeError")}}로 거부됩니다.</li> +</ul> + +<h2 id="Examples">Examples</h2> + +<p>다음 예제 (GitHub의 <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html">instantiate-streaming.html</a> 데모보기 및 <a href="https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html">view it live</a>)에서는 원본 소스에서 .wasm 모듈을 직접 스트리밍 한 다음 컴파일하고 인스턴스화합니다. 약속은 <code>ResultObject</code>로 충족됩니다.<code>instantiateStreaming()</code> 함수는 {{domxref("Response")}} 객체에 대한 promise를 받아들이므로 직접 {{domxref("WindowOrWorkerGlobalScope.fetch()")}} 호출을 전달할 수 있으며 응답을 수행하면 함수에 응답을 전달합니다.</p> + +<pre class="brush: js">var importObject = { imports: { imported_func: arg => console.log(arg) } }; + +WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject) +.then(obj => obj.instance.exports.exported_func());</pre> + +<p>그런 다음 <code>ResultObject</code>의 인스턴스 구성원에 액세스하고 포함 된 내 보낸 함수를 호출합니다.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebAssembly Embedding', '#webassemblyinstantiatestreaming', 'instantiateStreaming()')}}</td> + <td>{{Spec2('WebAssembly Embedding')}}</td> + <td>Initial draft definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.WebAssembly.instantiateStreaming")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/WebAssembly">WebAssembly</a> overview page</li> + <li><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly concepts</a></li> + <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/linkerror/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/linkerror/index.html new file mode 100644 index 0000000000..b9b5c3264c --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/webassembly/linkerror/index.html @@ -0,0 +1,113 @@ +--- +title: WebAssembly.LinkError() +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError +--- +<div>{{JSRef}}</div> + +<p>The <code><strong>WebAssembly.LinkError()</strong></code> constructor creates a new WebAssembly <code>LinkError</code> object, which indicates an error during module instantiation (besides <a href="http://webassembly.org/docs/semantics/#traps">traps</a> from the start function). </p> + +<p><code><strong>WebAssembly.LinkError()</strong></code> 생성자는 새 WebAssembly <code>LinkError</code> 객체를 만듭니다. 이 객체는 모듈 인스턴스화 중의 오류를 나타냅니다 (시작 함수의 <a href="http://webassembly.org/docs/semantics/#traps">traps</a>와 함께).</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">new WebAssembly.LinkError(<var>message</var>, <var>fileName</var>, <var>lineNumber</var>)</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>message</code> {{optional_inline}}</dt> + <dd>사람이 읽을 수 있는 오류 설명.</dd> + <dt><code>fileName</code> {{optional_inline}}{{non-standard_inline}}</dt> + <dd>예외의 원인이 된 코드가 들어있는 파일의 이름입니다.</dd> + <dt><code>lineNumber</code> {{optional_inline}}{{non-standard_inline}}</dt> + <dd>예외의 원인이 된 코드의 행 번호입니다.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<p><em><code>LinkError</code></em> 생성자에는 고유 한 고유 속성이 없지만 프로토 타입 체인을 통해 일부 속성을 상속합니다.</p> + +<dl> + <dt><code>WebAssembly.LinkError.prototype.constructor</code></dt> + <dd>인스턴스의 프로토 타입을 작성한 함수를 지정합니다.</dd> + <dt>{{jsxref("Error.prototype.message", "WebAssembly.LinkError.prototype.message")}}</dt> + <dd>에러 메시지. ECMA-262는 {{jsxref ( "URIError")}}가 <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>에서 자체 <code>message</code> 속성을 제공하도록 지정했지만 {{jsxref ( "Error.prototype.message")}}를 상속받습니다.</dd> + <dt>{{jsxref("Error.prototype.name", "WebAssembly.LinkError.prototype.name")}}</dt> + <dd>에러 이름. {{jsxref("Error")}}를 상속받습니다.</dd> + <dt>{{jsxref("Error.prototype.fileName", "WebAssembly.LinkError.prototype.fileName")}}</dt> + <dd>해당 에러가 발생한 파일의 경로. {{jsxref("Error")}}를 상속받습니다.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "WebAssembly.LinkError.prototype.lineNumber")}}</dt> + <dd>에러가 발생한 파일의 행 번호. {{jsxref("Error")}}를 상속받습니다.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "WebAssembly.LinkError.prototype.columnNumber")}}</dt> + <dd>이 오류가 발생한 행의 열 번호입니다.. {{jsxref("Error")}}를 상속받습니다.</dd> + <dt>{{jsxref("Error.prototype.stack", "WebAssembly.LinkError.prototype.stack")}}</dt> + <dd>스텍 추적. {{jsxref("Error")}}를 상속받습니다.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em><code>LinkError</code></em> 생성자에는 자체 메서드가 없지만 프로토 타입 체인을 통해 일부 메서드를 상속합니다.</p> + +<dl> + <dt>{{jsxref("Error.prototype.toSource", "WebAssembly.LinkError.prototype.toSource()")}}</dt> + <dd>동일한 오류로 평가 될 수있는 코드를 반환합니다. {{jsxref("Error")}}를 상속받습니다.</dd> + <dt>{{jsxref("Error.prototype.toString", "WebAssembly.LinkError.prototype.toString()")}}</dt> + <dd>지정된 Error 객체를 나타내는 문자열을 반환합니다. {{jsxref("Error")}}를 상속받습니다.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>다음 snippet은 새 <code>LinkError</code> 인스턴스를 만들고 콘솔에 세부 정보를 기록합니다.</p> + +<pre class="brush: js">try { + throw new WebAssembly.LinkError('Hello', 'someFile', 10); +} catch (e) { + console.log(e instanceof LinkError); // true + console.log(e.message); // "Hello" + console.log(e.name); // "LinkError" + console.log(e.fileName); // "someFile" + console.log(e.lineNumber); // 10 + console.log(e.columnNumber); // 0 + console.log(e.stack); // returns the location where the code was run +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebAssembly JS', '#constructor-properties-of-the-webassembly-object', 'WebAssembly constructors')}}</td> + <td>{{Spec2('WebAssembly JS')}}</td> + <td>Initial WebAssembly draft definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard', 'NativeError')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Definition of standard NativeError types.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.WebAssembly.LinkError")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/WebAssembly">WebAssembly</a> overview page</li> + <li><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly concepts</a></li> + <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/memory/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/memory/index.html new file mode 100644 index 0000000000..96b1614fff --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/webassembly/memory/index.html @@ -0,0 +1,112 @@ +--- +title: WebAssembly.Memory() +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory +--- +<div>{{JSRef}}</div> + +<p><code><strong>WebAssembly.Memory()</strong></code> 생성자는 WebAssembly <code>Instance</code>가 액세스하는 메모리의 원시 바이트를 가진 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a>(크기조정이 가능)인 새 <code>Memory</code> 객체를 만듭니다.</p> + +<p>메모리는 자바스크립트 혹은 WebAssembly 코드 안에서 만들어지며 자바스크립트 그리고 WebAssembly에서 접근하거나 변경이 가능합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var myMemory = new WebAssembly.Memory(memoryDescriptor);</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><em>memoryDescriptor</em></dt> + <dd>다음의 멤버를 가질수 있는 객체입니다. + <dl> + <dt><em>initial</em></dt> + <dd>WebAssembly Page의 단위별 WebAssembly 메모리의 초기 크기입니다.</dd> + <dt><em>maximum {{optional_inline}}</em></dt> + <dd>WebAssembly 메모리의 최대 크기는 WebAssembly 페이지 단위로 증가 할 수 있습니다. 이 매개 변수가 있으면 <code>maximum</code> 매개 변수는 엔진에 대해 메모리를 전면에 예약하도록 합니다. 그러나 엔진은 이 예약 요청을 무시하거나 클램핑 할 수 있습니다. 일반적으로 대부분의 WebAssembly 모듈은 <code>maximum</code> 값을 설정할 필요가 없습니다.</dd> + </dl> + </dd> +</dl> + +<div class="note"> +<p><strong>Note</strong>: WebAssembly 페이지의 크기는 65,536 바이트로 64KiB로 고정되어 있습니다.</p> +</div> + +<h3 id="Exceptions">Exceptions</h3> + +<ul> + <li><code>memoryDescriptor</code>가 object 유형이 아닌 경우 {{jsxref ( "TypeError")}}가 발생합니다.</li> + <li><code>maximum</code>이 지정되고 <code>initial</code>보다 작은 경우 {{jsxref ( "RangeError")}}가 발생합니다.</li> +</ul> + +<h2 id="Memory_instances"><code>Memory</code> instances</h2> + +<p>모든 <code>Memory</code> 인스턴스는 <code>Memory()</code>생성자의 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/prototype">prototype object</a>를 상속합니다.이 인스턴스는 모든 <code>Memory</code> 인스턴스에 적용되도록 수정할 수 있습니다.</p> + +<h3 id="Instance_properties">Instance properties</h3> + +<dl> + <dt><code>Memory.prototype.constructor</code></dt> + <dd>이 객체의 인스턴스를 생성 한 함수를 돌려줍니다. 기본적으로 이것은 {{jsxref("WebAssembly.Memory()")}} 생성자입니다.</dd> + <dt>{{jsxref("WebAssembly/Memory/buffer","Memory.prototype.buffer")}}</dt> + <dd>메모리에 포함 된 버퍼를 반환하는 접근 자 속성입니다.</dd> +</dl> + +<h3 id="Instance_methods">Instance methods</h3> + +<dl> + <dt>{{jsxref("WebAssembly/Memory/grow","Memory.prototype.grow()")}}</dt> + <dd>지정된 수의 WebAssembly 페이지 (각각 64KB 크기)만큼 메모리 인스턴스의 크기를 늘립니다.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p><code>WebAssembly.Memory</code> 객체를 가져 오는 두 가지 방법이 있습니다. 첫 번째 방법은 JavaScript에서 생성하는 것입니다. 다음 예제에서는 초기 크기가 10 페이지 (640KiB)이고 최대 크기가 100 페이지 (6.4MiB) 인 새 WebAssembly 메모리 인스턴스를 만듭니다.</p> + +<pre class="brush: js">var memory = new WebAssembly.Memory({initial:10, maximum:100});</pre> + +<p><code>WebAssembly.Memory</code> 객체를 가져 오는 두 번째 방법은 WebAssembly 모듈에서 내보냅니다. 다음 예제는 (GitHub의 <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html">memory.html</a>을 보세요. <a href="https://mdn.github.io/webassembly-examples/js-api-examples/memory.html">라이브로 보기</a>) 생성된 메모리를 가져 오는 동안 {{jsxref("WebAssembly.instantiateStreaming()")}} 메소드를 사용하여로드 된 memory.wasm 바이트 코드를 가져 와서 인스턴스화합니다. 위의 줄에. 그런 다음 메모리에 일부 값을 저장 한 다음 함수를 내 보낸 다음 일부 값의 합계에 사용합니다.</p> + +<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('memory.wasm'), { js: { mem: memory } }) +.then(obj => { + var i32 = new Uint32Array(memory.buffer); + for (var i = 0; i < 10; i++) { + i32[i] = i; + } + var sum = obj.instance.exports.accumulate(0, 10); + console.log(sum); +});</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebAssembly JS', '#webassemblymemory-objects', 'Memory')}}</td> + <td>{{Spec2('WebAssembly JS')}}</td> + <td>Initial draft definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.WebAssembly.Memory")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/WebAssembly">WebAssembly</a> overview page</li> + <li><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly concepts</a></li> + <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/module/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/module/index.html new file mode 100644 index 0000000000..814835fd00 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/webassembly/module/index.html @@ -0,0 +1,83 @@ +--- +title: WebAssembly.Module +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module +--- +<div>{{JSRef}}</div> + +<p><strong><code>WebAssembly.Module</code></strong> 객체는 브라우저에서 이미 컴파일 된 stateless WebAssembly 코드를 포함하며 효율적으로 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage">Workers와 공유</a>하고 여러 번 인스턴스화 할 수 있습니다. 모듈을 인스턴스화하려면 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#Secondary_overload_%E2%80%94_taking_a_module_object_instance">WebAssembly.instantiate() 2차 오버로드를 호출</a>하세요.</p> + +<p><code>WebAssembly.Module()</code> 생성자 함수를 호출하여 지정된 WebAssembly 바이너리 코드를 동기식으로 컴파일 할 수 있습니다. 그러나 <code>Module</code>을 쓰는 주된 방법은 {{jsxref ( "WebAssembly.compile ()")}}과 같은 비동기 컴파일 함수를 사용하는 것입니다.</p> + +<h2 id="생성자_구문">생성자 구문</h2> + +<div class="warning"> +<p><strong>Important: </strong>대형 모듈의 컴파일은 비용이 많이들 수 있으므로 개발자는 동기 컴파일이 절대적으로 필요한 경우에만 Module () 생성자를 사용해야합니다. 비동기 {{jsxref ( "WebAssembly.compileStreaming ()")}} 메서드를 사용하세요.</p> +</div> + +<pre class="syntaxbox">var myModule = new WebAssembly.Module(bufferSource);</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code><em>bufferSource</em></code></dt> + <dd>컴파일 할 .wasm 모듈의 이진 코드가 들어있는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a>또는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a>입니다.</dd> +</dl> + +<h2 id="Function_Properties_of_the_Module_Constructor">Function Properties of the <code>Module</code> Constructor</h2> + +<dl> + <dt>{{jsxref("Global_Objects/WebAssembly/Module/customSections", "WebAssembly.Module.customSections()")}}</dt> + <dd>모듈(<code>Module</code>)과 문자열이 주어지면 모듈의 모든 사용자 정의 섹션 내용의 사본을 주어진 문자열 이름으로 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/WebAssembly/Module/exports", "WebAssembly.Module.exports()")}}</dt> + <dd>모듈(<code>Module</code>)이 주어지면 선언 된 모든 내보내기에 대한 설명이 들어있는 배열을 반환합니다.</dd> + <dt>{{jsxref("Global_Objects/WebAssembly/Module/imports", "WebAssembly.Module.imports()")}}</dt> + <dd>모듈(<code>Module</code>)이 주어지면 선언 된 모든 가져오기에 대한 설명이 들어있는 배열을 반환합니다.</dd> +</dl> + +<h2 id="Module_instances"><code>Module</code> instances</h2> + +<p>모든 <code>Module</code> 인스턴스는 <code>Module()</code> 생성자의 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/prototype">prototype object</a>에서 상속받습니다.이 인스턴스는 모든 <code>Module</code> 인스턴스에 적용되도록 수정할 수 있습니다.</p> + +<h3 id="Instance_properties">Instance properties</h3> + +<p>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/prototype', 'Properties')}}</p> + +<h3 id="Instance_methods">Instance methods</h3> + +<p>모듈 인스턴스에는 기본 메서드가 없습니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebAssembly JS', '#webassemblymodule-objects', 'WebAssembly.Module()')}}</td> + <td>{{Spec2('WebAssembly JS')}}</td> + <td>Initial draft definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("javascript.builtins.WebAssembly.Module")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/WebAssembly">WebAssembly</a> overview page</li> + <li><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly concepts</a></li> + <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/runtimeerror/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/runtimeerror/index.html new file mode 100644 index 0000000000..ebd8da6f46 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/webassembly/runtimeerror/index.html @@ -0,0 +1,111 @@ +--- +title: WebAssembly.RuntimeError() +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError +--- +<div>{{JSRef}}</div> + +<p><code><strong>WebAssembly.RuntimeError()</strong></code><strong> </strong>생성자는 WebAssembly에서 <a href="http://webassembly.org/docs/semantics/#traps">trap</a>을 지정할 때마다 throw되는 새 WebAssembly <code>RuntimeError</code> 객체를 만듭니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">new WebAssembly.RuntimeError(<var>message</var>, <var>fileName</var>, <var>lineNumber</var>)</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>message</code> {{optional_inline}}</dt> + <dd>인간이 읽을 수있는 오류 설명.</dd> + <dt><code>fileName</code> {{optional_inline}}{{non-standard_inline}}</dt> + <dd>예외의 원인이 된 코드가 들어있는 파일의 이름입니다.</dd> + <dt><code>lineNumber</code> {{optional_inline}}{{non-standard_inline}}</dt> + <dd>예외의 원인이 된 코드의 행 번호입니다.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<p><em><code>RuntimeError</code> 생성자에는 고유 한 고유 속성이 없지만 프로토 타입 체인을 통해 일부 속성을 상속합니다.</em></p> + +<dl> + <dt><code>WebAssembly.RuntimeError.prototype.constructor</code></dt> + <dd>인스턴스의 프로토 타입을 작성한 함수를 지정합니다.</dd> + <dt>{{jsxref("Error.prototype.message", "WebAssembly.RuntimeError.prototype.message")}}</dt> + <dd>에러 메시지. ECMA-262는 {{jsxref ( "URIError")}}가 <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>에서 자체 <code>message</code> 속성을 제공하도록 지정했지만 {{jsxref ( "Error.prototype.message")}}를 상속받습니다.</dd> + <dt>{{jsxref("Error.prototype.name", "WebAssembly.RuntimeError.prototype.name")}}</dt> + <dd>오류 이름. {{jsxref ( "Error")}}에서 상속됩니다.</dd> + <dt>{{jsxref("Error.prototype.fileName", "WebAssembly.RuntimeError.prototype.fileName")}}</dt> + <dd>이 오류를 발생시킨 파일의 경로입니다. {{jsxref ( "Error")}}에서 상속됩니다.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "WebAssembly.RuntimeError.prototype.lineNumber")}}</dt> + <dd>이 오류가 발생한 파일의 행 번호입니다. {{jsxref ( "Error")}}에서 상속됩니다.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "WebAssembly.RuntimeError.prototype.columnNumber")}}</dt> + <dd>이 오류가 발생한 행의 열 번호입니다. {{jsxref ( "Error")}}에서 상속됩니다.</dd> + <dt>{{jsxref("Error.prototype.stack", "WebAssembly.RuntimeError.prototype.stack")}}</dt> + <dd>스택 추적. {{jsxref ( "Error")}}에서 상속됩니다.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em><code>RuntimeError</code> 생성자에는 자체 메서드가 없지만 프로토 타입 체인을 통해 일부 메서드를 상속합니다.</em></p> + +<dl> + <dt>{{jsxref("Error.prototype.toSource", "WebAssembly.RuntimeError.prototype.toSource()")}}</dt> + <dd>동일한 오류로 평가 될 수있는 코드를 반환합니다. {{jsxref ( "Error")}}에서 상속됩니다.</dd> + <dt>{{jsxref("Error.prototype.toString", "WebAssembly.RuntimeError.prototype.toString()")}}</dt> + <dd>지정된 <code>Error</code> 객체를 나타내는 문자열을 반환합니다. {{jsxref ( "Error")}}에서 상속됩니다.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>다음의 스니펫은, 새로운 RuntimeError 인스턴스를 작성해, 그 상세를 콘솔에 기록합니다.</p> + +<pre class="brush: js">try { + throw new WebAssembly.RuntimeError('Hello', 'someFile', 10); +} catch (e) { + console.log(e instanceof RuntimeError); // true + console.log(e.message); // "Hello" + console.log(e.name); // "RuntimeError" + console.log(e.fileName); // "someFile" + console.log(e.lineNumber); // 10 + console.log(e.columnNumber); // 0 + console.log(e.stack); // returns the location where the code was run +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebAssembly JS', '#constructor-properties-of-the-webassembly-object', 'WebAssembly constructors')}}</td> + <td>{{Spec2('WebAssembly JS')}}</td> + <td>Initial WebAssembly draft definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard', 'NativeError')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Definition of standard NativeError types.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.WebAssembly.RuntimeError")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/ko/docs/WebAssembly">WebAssembly</a> overview page</li> + <li><a href="/ko/docs/WebAssembly/Concepts">WebAssembly concepts</a></li> + <li><a href="/ko/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/table/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/table/index.html new file mode 100644 index 0000000000..9d86fe40c7 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/webassembly/table/index.html @@ -0,0 +1,130 @@ +--- +title: WebAssembly.Table() +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table +--- +<div>{{JSRef}}</div> + +<p><code><strong>WebAssembly.Table()</strong></code> 생성자는 지정된 크기 및 요소 유형의 새 <code>Table</code> 객체를 만듭니다.</p> + +<p>이것은 자바 스크립트 래퍼 객체로, 함수 참조를 저장하는 WebAssembly 테이블을 나타내는 배열과 같은 구조입니다. JavaScript 또는 WebAssembly 코드로 작성된 테이블은 JavaScript 및 WebAssembly에서 액세스 및 변경할 수 있습니다.</p> + +<div class="note"> +<p><strong>Note</strong>: 테이블은 현재 function references만 저장할 수 있지만 나중에 확장 될 수 있습니다.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var myTable = new WebAssembly.Table(tableDescriptor);</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><em>tableDescriptor</em></dt> + <dd>다음 멤버를 포함 할 수있는 객체입니다: + <dl> + <dt><em>element</em></dt> + <dd>테이블에 저장 될 값 유형을 나타내는 문자열. 현재로서는 <code>"anyfunc"</code>(함수) 값만있을 수 있습니다.</dd> + <dt><em>initial</em></dt> + <dd>WebAssembly 테이블의 초기 요소 수입니다.</dd> + <dt><em>maximum {{optional_inline}}</em></dt> + <dd>WebAssembly 테이블의 최대 증가 요소 수입니다.</dd> + </dl> + </dd> +</dl> + +<h3 id="Exceptions">Exceptions</h3> + +<ul> + <li><code>tableDescriptor</code>가 object 유형이 아닌 경우 {{jsxref ( "TypeError")}}가 발생합니다.</li> + <li><code>maximum</code>이 지정되고 initial보다 작은 경우 {{jsxref ( "RangeError")}}가 발생합니다.</li> +</ul> + +<h2 id="Table_instances"><code>Table</code> instances</h2> + +<p>모든 <code>Table</code> 인스턴스는 <code>Table()</code>생성자의 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/prototype">prototype object</a>에서 상속받습니다.이 인스턴스는 모든 <code>Table</code> 인스턴스에 적용되도록 수정할 수 있습니다.</p> + +<h3 id="Instance_properties">Instance properties</h3> + +<dl> + <dt><code>Table.prototype.constructor</code></dt> + <dd>이 객체의 인스턴스를 생성 한 함수를 돌려줍니다. 기본적으로 이것은 {{jsxref("WebAssembly.Table()")}} 생성자입니다.</dd> + <dt>{{jsxref("WebAssembly/Table/length","Table.prototype.length")}}</dt> + <dd>테이블의 길이, 즉 요소의 수를 돌려줍니다.</dd> +</dl> + +<h3 id="Instance_methods">Instance methods</h3> + +<dl> + <dt>{{jsxref("WebAssembly/Table/get","Table.prototype.get()")}}</dt> + <dd>접근 자 함수 - 주어진 색인에 저장된 요소를 가져옵니다.</dd> + <dt>{{jsxref("WebAssembly/Table/grow","Table.prototype.grow()")}}</dt> + <dd>지정된 요소 수만큼 Table 인스턴스의 크기를 늘립니다.</dd> + <dt>{{jsxref("WebAssembly/Table/set","Table.prototype.set()")}}</dt> + <dd>지정된 인덱스에 격납되어있는 요소를, 지정된 값으로 설정합니다.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>다음 예제 (table2.html <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table2.html">source code</a> 및 <a href="https://mdn.github.io/webassembly-examples/js-api-examples/table2.html">live version</a> 참조)는 초기 크기가 2인 새 WebAssembly Table 인스턴스를 만듭니다. 그런 다음 두 개의 인덱스 (표 {{jsxref ( "WebAssembly / Table / get", "Table.prototype.get ()")}}를 통해 검색하여 테이블의 길이와 내용을 인쇄합니다. 길이가 2이고 {{jsxref ( "null")}}이 두개라고 출력됩니다.</p> + +<pre class="brush: js">var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"}); +console.log(tbl.length); // "2" +console.log(tbl.get(0)); // "null" +console.log(tbl.get(1)); // "null"</pre> + +<p>그런 다음 테이블을 포함한 <code>importObj</code>를 만듭니다.</p> + +<pre class="brush: js">var importObj = { + js: { + tbl:tbl + } +};</pre> + +<p>마지막으로 {{jsxref ( "WebAssembly.instantiateStreaming ()")}} 메소드를 사용하여 wasm 모듈 (table2.wasm)을 로드하고 인스턴스화합니다. table2.wasm 모듈에는 두 개의 함수 (하나는 42를 반환하고 다른 하나는 83을 반환하는 함수)가 들어 있고 가져온 테이블의 요소 0과 1에 둘 다 저장합니다 (<a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table2.wat">text representation</a> 참조). 인스턴스화 후에도 테이블의 길이는 여전히 2이지만 JS에 호출 할 수있는 호출 가능한 <a href="/en-US/docs/WebAssembly/Exported_functions">Exported WebAssembly Functions</a>가 요소에 포함됩니다.</p> + +<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('table2.wasm'), importObject) +.then(function(obj) { + console.log(tbl.length); + console.log(tbl.get(0)()); + console.log(tbl.get(1)()); +});</pre> + +<p>액세서의 끝 부분에 두 번째 함수 호출 연산자를 포함시켜 실제로 참조 된 함수를 호출하고 그 안에 저장된 값을 기록해야합니다 (예 : <code>get(0)</code> 대신 <code>get(0)()</code>).</p> + +<p>이 예제는 자바 스크립트에서 테이블을 만들고 액세스하고 있지만 wasm 인스턴스 내부에서도 같은 테이블을 볼 수 있고 호출 할 수 있음을 보여줍니다.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebAssembly JS', '#webassemblytable-objects', 'Table')}}</td> + <td>{{Spec2('WebAssembly JS')}}</td> + <td>Initial draft definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.WebAssembly.Table")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/WebAssembly">WebAssembly</a> overview page</li> + <li><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly concepts</a></li> + <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/validate/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/validate/index.html new file mode 100644 index 0000000000..a5ea4850e5 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/webassembly/validate/index.html @@ -0,0 +1,75 @@ +--- +title: WebAssembly.validate() +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/validate +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/validate +--- +<div>{{JSRef}}</div> + +<p><strong><code>WebAssembly.validate()</code> </strong>함수는 바이트가 유효한 wasm 모듈을 형성하는지 (<code>true</code>) 또는 생성하지 않는지 (<code>false</code>)를 반환하여 WebAssembly 바이너리 코드의 지정된 <a href="/ko/docs/Web/JavaScript/Typed_arrays">typed array</a>의 유효성을 검사합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntax">WebAssembly.validate(bufferSource);</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code><em>bufferSource</em></code></dt> + <dd>유효성을 검사 할 WebAssembly 바이너리 코드가 들어있는 <a href="/ko/docs/Web/JavaScript/Typed_arrays">typed array</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a>입니다.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p><code>bufferSource</code>가 유효한 wasm 코드 (<code>true</code>)인지 아닌지 (<code>false</code>)를 지정하는 부울입니다.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<p><code>bufferSource</code>가 <a href="/ko/docs/Web/JavaScript/Typed_arrays">typed array</a>이나 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a>가 아닌 경우 {{jsxref ( "TypeError")}}가 발생합니다.</p> + +<h2 id="Examples">Examples</h2> + +<p>다음 예제 (validate.html <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/validate.html">source code</a> 참조 및 <a href="https://mdn.github.io/webassembly-examples/js-api-examples/validate.html">see it live</a>)는 .wasm 모듈을 가져 와서 형식화 된 배열로 변환합니다. 그런 다음 <code>validate()</code> 메서드를 사용하여 모듈이 유효한지 확인합니다.</p> + +<pre class="brush: js">fetch('simple.wasm').then(response => + response.arrayBuffer() +).then(function(bytes) { + var valid = WebAssembly.validate(bytes); + console.log("The given bytes are " + + (valid ? "" : "not ") + "a valid wasm module"); +}); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebAssembly JS', '#webassemblyvalidate', 'validate()')}}</td> + <td>{{Spec2('WebAssembly JS')}}</td> + <td>Initial draft definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.WebAssembly.validate")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/ko/docs/WebAssembly">WebAssembly</a> overview page</li> + <li><a href="/ko/docs/WebAssembly/Concepts">WebAssembly concepts</a></li> + <li><a href="/ko/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/index.html b/files/ko/web/javascript/reference/index.html new file mode 100644 index 0000000000..c7d883f2b1 --- /dev/null +++ b/files/ko/web/javascript/reference/index.html @@ -0,0 +1,48 @@ +--- +title: JavaScript 참고자료 +slug: Web/JavaScript/Reference +tags: + - JavaScript +translation_of: Web/JavaScript/Reference +--- +<div>{{JsSidebar}}</div> + +<p>MDN 내 JavaScript 절의 이 부분은 JavaScript 언어에 관한 정보 저장소(facts repository)로 쓸 수 있습니다. <a href="/ko/docs/Web/JavaScript/Reference/About">이 참고서에 관하여</a>를 더 읽어보세요.</p> + +<h2 id="전역_객체들">전역 객체들</h2> + +<p>이 장은 모든 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects">JavaScript 표준 내장 객체</a>를, 메서드 및 속성(property)을 위주로 문서화합니다.</p> + +<div>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects', '항목별_표준_객체')}}</div> + +<h2 id="문">문</h2> + +<p>이 장은 모든 <a href="/ko/docs/Web/JavaScript/Reference/Statements" title="JavaScript statements and declarations">JavaScript 문 및 선언</a>을 문서화합니다.</p> + +<div>{{page('/ko/docs/Web/JavaScript/Reference/Statements', '항목별_문_및_선언')}}</div> + +<h2 id="표현식_및_연산자">표현식 및 연산자</h2> + +<p>이 장은 모든 <a href="/ko/docs/Web/JavaScript/Reference/Operators" title="JavaScript expressions and operators">JavaScript 표현식 및 연산자</a>를 문서화합니다.</p> + +<div>{{page('/ko/docs/Web/JavaScript/Reference/Operators', '항목별_식_및_연산자')}}</div> + +<h2 id="함수">함수</h2> + +<p>이 장은 응용 프로그램을 개발하기 위해 <a href="/ko/docs/Web/JavaScript/Reference/Functions">JavaScript 함수</a>로 작업하는 법을 문서화합니다.</p> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션" title="Arrow functions">화살표 함수</a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters" title="Default parameters">기본 매개변수</a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters" title="Rest parameters">나머지 매개변수</a></li> +</ul> + +<h2 id="추가_참고_페이지">추가 참고 페이지</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Reference/Lexical_grammar" title="Lexical grammar">어휘 문법</a></li> + <li><a href="/ko/docs/Web/JavaScript/Data_structures" title="Data types and data structures">데이터 형 및 데이터 구조</a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Strict_mode" title="Strict mode">엄격 모드</a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features" title="Deprecated features">사라진 기능</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/iteration_protocols/index.html b/files/ko/web/javascript/reference/iteration_protocols/index.html new file mode 100644 index 0000000000..bddc56a50f --- /dev/null +++ b/files/ko/web/javascript/reference/iteration_protocols/index.html @@ -0,0 +1,394 @@ +--- +title: Iteration protocols +slug: Web/JavaScript/Reference/Iteration_protocols +translation_of: Web/JavaScript/Reference/Iteration_protocols +--- +<div>{{jsSidebar("More")}}</div> + +<p>ECMAScript 2015 (ES6)에는 새로운 문법이나 built-in 뿐만이 아니라, protocols(표현법들)도 추가되었습니다. 이 protocol 은 일정 규칙만 충족한다면 어떠한 객체에 의해서도 구현될 수 있습니다.</p> + +<p>2개의 protocol이 있습니다 : <a href="#iterable">iterable protocol</a> 과 <a href="#iterator">iterator protocol</a>.</p> + +<h2 id="iterable" name="iterable">The iterable protocol</h2> + +<p><strong>iterable</strong> protocol 은 JavaScript 객체들이, 예를 들어 {{jsxref("Statements/for...of", "for..of")}} 구조에서 어떠한 value 들이 loop 되는 것과 같은 iteration 동작을 정의하거나 사용자 정의하는 것을 허용합니다. 다른 type 들({{jsxref("Object")}} 와 같은)이 그렇지 않은 반면에, 어떤 built-in type 들은 {{jsxref("Array")}} 또는 {{jsxref("Map")}} 과 같은 default iteration 동작으로 <a href="#Builtin_iterables">built-in iterables</a> 입니다.</p> + +<p><strong>iterable </strong>하기 위해서 object는 <strong>@@iterator</strong> 메소드를 구현해야 합니다. 이것은 object (또는 <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype chain</a> 의 오브젝트 중 하나) 가 <code>{{jsxref("Symbol.iterator")}} </code>key 의 속성을 가져야 한다는 것을 의미합니다 :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Value</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>[Symbol.iterator]</code></td> + <td>object를 반환하는, arguments 없는 function. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">iterator protocol</a> 을 따른다.</td> + </tr> + </tbody> +</table> + +<p>어떠한 객체가 반복(Iterate)되어야 한다면 이 객체의 <code>@@iterator</code> 메소드가 인수없이 호출되고, 반환된 <strong>iterator</strong>는 반복을 통해서 획득할 값들을 얻을 때 사용됩니다.</p> + +<h2 id="iterator" name="iterator">The iterator protocol</h2> + +<p><strong>iterator </strong>protocol 은 value( finite 또는 infinite) 들의 sequence 를 만드는 표준 방법을 정의합니다. </p> + +<p>객체가 <code><strong>next()</strong></code> 메소드를 가지고 있고, 아래의 규칙에 따라 구현되었다면 그 객체는 iterator이다:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Property</th> + <th scope="col">Value</th> + </tr> + <tr> + <td><code>next</code></td> + <td> + <p>아래 2개의 속성들을 가진 object 를 반환하는 arguments 없는 함수 :</p> + + <ul> + <li><code>done</code> (boolean) + + <ul> + <li>Iterator(반복자)가 마지막 반복 작업을 마쳤을 경우 <code>true</code>. 만약 iterator(반복자)에 <em>return 값</em>이 있다면 <code>value</code>의 값으로 지정된다. 반환 값에 대한 설명은 <a href="http://www.2ality.com/2013/06/iterators-generators.html#generators-as-threads">여기</a>.</li> + <li>Iterator(반복자)의 작업이 남아있을 경우 <code>false</code>. Iterator(반복자)에 <code>done</code> 프로퍼티 자체를 특정짓지 않은 것과 동일하다.</li> + </ul> + </li> + <li><code>value</code> - Iterator(반복자)으로부터 반환되는 모든 자바스크립트 값이며 <code>done</code>이 <code>true</code>일 경우 생략될 수 있다.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>몇몇 iterator들은 iterable(반복 가능)이다:</p> + +<pre class="brush: js">var someArray = [1, 5, 7]; +var someArrayEntries = someArray.entries(); + +someArrayEntries.toString(); // "[object Array Iterator]" +someArrayEntries === someArrayEntries[Symbol.iterator](); // true +</pre> + +<h2 id="Iteration_protocols_사용_예시"> Iteration protocols 사용 예시</h2> + +<p>{{jsxref("String")}} 은 built-in iterable 객체의 한 예시입니다.</p> + +<pre class="brush: js">var someString = "hi"; +typeof someString[Symbol.iterator]; // "function" +</pre> + +<p><code>String</code> 의 기본 iterator 는 string 의 문자를 하나씩 반환합니다.</p> + +<pre class="brush: js">var iterator = someString[Symbol.iterator](); +iterator + ""; // "[object String Iterator]" + +iterator.next(); // { value: "h", done: false } +iterator.next(); // { value: "i", done: false } +iterator.next(); // { value: undefined, done: true }</pre> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operator</a>와 같은 특정 내장 구조(built-in constructs)들은 실제로는 동일한 iteration protocol을 사용한다:</p> + +<pre class="brush: js">[...someString] // ["h", "i"]</pre> + +<p>사용자만의 <code>@@iterator</code>를 특정함으로써 원하는 반복 행위(iteration behavior)를 설정할 수 있다:</p> + +<pre class="brush: js">var someString = new String("hi"); // need to construct a String object explicitly to avoid auto-boxing + +someString[Symbol.iterator] = function() { + return { // this is the iterator object, returning a single element, the string "bye" + next: function() { + if (this._first) { + this._first = false; + return { value: "bye", done: false }; + } else { + return { done: true }; + } + }, + _first: true + }; +}; +</pre> + +<p>재설정된 <code>@@iterator</code>가 어떻게 내장 구조(built-in constructs)의 반복 행위에 영향을 주는지 참고:</p> + +<pre class="brush: js">[...someString]; // ["bye"] +someString + ""; // "hi" +</pre> + +<h2 id="Iterable_예시">Iterable 예시</h2> + +<h3 id="내장_iterables">내장 iterables</h3> + +<p>{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} and {{jsxref("Set")}} 는 모두 내장 iterable이다. 이 객체들의 프로토타입 객체들은 모두 <code>@@</code><code>iterator</code> 메소드를 가지고 있기 때문이다.</p> + +<h3 id="사용자_정의된_iterables">사용자 정의된 iterables</h3> + +<p>이렇게 고유한 iterables 를 만들 수 있다.</p> + +<pre class="brush: js">var myIterable = {}; +myIterable[Symbol.iterator] = function* () { + yield 1; + yield 2; + yield 3; +}; +[...myIterable]; // [1, 2, 3] +</pre> + +<h3 id="Iterable을_허용하는_내장_API들">Iterable을 허용하는 내장 API들</h3> + +<p>Iterable을 허용하는 많은 내장 API들이 있다. 예를 들어: {{jsxref("Map", "Map([iterable])")}}, {{jsxref("WeakMap", "WeakMap([iterable])")}}, {{jsxref("Set", "Set([iterable])")}} and {{jsxref("WeakSet", "WeakSet([iterable])")}}이 그것이다:</p> + +<pre class="brush: js">var myObj = {}; +new Map([[1,"a"],[2,"b"],[3,"c"]]).get(2); // "b" +new WeakMap([[{},"a"],[myObj,"b"],[{},"c"]]).get(myObj); // "b" +new Set([1, 2, 3]).has(3); // true +new Set("123").has("2"); // true +new WeakSet(function*() { + yield {}; + yield myObj; + yield {}; +}()).has(myObj); // true +</pre> + +<p>뿐만 아니라 {{jsxref("Promise.all", "Promise.all(iterable)")}}, {{jsxref("Promise.race", "Promise.race(iterable)")}}와 {{jsxref("Array.from", "Array.from()")}} 또한 해당된다.</p> + +<h3 id="Iterable과_함께_사용되는_문법">Iterable과 함께 사용되는 문법</h3> + +<p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for-of</a></code> loops, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operator</a>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield*">yield*</a>와</code> <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructuring assignment</a>는 iterable과 함께 사용되는 구문(statements)과 표현(expressions)이다.</p> + +<pre class="brush: js">for(let value of ["a", "b", "c"]){ + console.log(value); +} +// "a" +// "b" +// "c" + +[..."abc"]; // ["a", "b", "c"] + +function* gen(){ + yield* ["a", "b", "c"]; +} + +gen().next(); // { value:"a", done:false } + +[a, b, c] = new Set(["a", "b", "c"]); +a // "a" + +</pre> + +<h3 id="잘_정의되지_못한_iterables">잘 정의되지 못한 iterables</h3> + +<p>만약 Iterable의 <code>@@iterator</code> 메소드가 iterator 객체를 반환하지 않는다면 그것은 잘 정의되지 못한 iterable이라고 할 수 있다. 이러한 iterable을 사용하는 것은 런타임 예외나 예상치 못한 결과를 불러올 수 있다:</p> + +<pre class="brush: js">var nonWellFormedIterable = {} +nonWellFormedIterable[Symbol.iterator] = () => 1 +[...nonWellFormedIterable] // TypeError: [] is not a function +</pre> + +<h2 id="Iterator_예시">Iterator 예시</h2> + +<h3 id="간단한_iterator">간단한 iterator</h3> + +<pre class="brush: js">function makeIterator(array){ + var nextIndex = 0; + + return { + next: function(){ + return nextIndex < array.length ? + {value: array[nextIndex++], done: false} : + {done: true}; + } + }; +} + +var it = makeIterator(['yo', 'ya']); + +console.log(it.next().value); // 'yo' +console.log(it.next().value); // 'ya' +console.log(it.next().done); // true +</pre> + +<h3 id="무한_iterator">무한 iterator</h3> + +<pre class="brush: js">function idMaker(){ + var index = 0; + + return { + next: function(){ + return {value: index++, done: false}; + } + }; +} + +var it = idMaker(); + +console.log(it.next().value); // '0' +console.log(it.next().value); // '1' +console.log(it.next().value); // '2' +// ... +</pre> + +<h3 id="Generator와_함께_사용된_iterator">Generator와 함께 사용된 iterator</h3> + +<pre class="brush: js">function* makeSimpleGenerator(array){ + var nextIndex = 0; + + while(nextIndex < array.length){ + yield array[nextIndex++]; + } +} + +var gen = makeSimpleGenerator(['yo', 'ya']); + +console.log(gen.next().value); // 'yo' +console.log(gen.next().value); // 'ya' +console.log(gen.next().done); // true + + + +function* idMaker(){ + var index = 0; + while(true) + yield index++; +} + +var gen = idMaker(); + +console.log(gen.next().value); // '0' +console.log(gen.next().value); // '1' +console.log(gen.next().value); // '2' +// ... +</pre> + +<h2 id="generator_object_는_iterator_또는_iterable_인가">generator object 는 iterator 또는 iterable 인가?</h2> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator">generator object</a> 는 iterator 이면서 iterable 입니다.</p> + +<pre class="brush: js">var aGeneratorObject = function*(){ + yield 1; + yield 2; + yield 3; +}(); +typeof aGeneratorObject.next; +// "function", 이것은 next 메서드를 가지고 있기 때문에 iterator입니다. +typeof aGeneratorObject[Symbol.iterator]; +// "function", 이것은 @@iterator 메서드를 가지고 있기 때문에 iterable입니다. +aGeneratorObject[Symbol.iterator]() === aGeneratorObject; +// true, 이 Object의 @@iterator 메서드는 자기자신(iterator)을 리턴하는 것으로 보아 잘 정의된 iterable이라고 할 수 있습니다. +[...aGeneratorObject]; +// [1, 2, 3] +</pre> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(39.0)}}</td> + <td>{{CompatGeckoDesktop("27.0")}}</td> + <td>{{CompatNo}}</td> + <td>26</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>IteratorResult</code> object instead of throwing</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("29.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("27.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(39.0)}}</td> + </tr> + <tr> + <td><code>IteratorResult</code> object instead of throwing</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("29.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Firefox-specific_notes">Firefox-specific notes</h2> + +<h3 id="IteratorResult_object_returned_instead_of_throwing"><code>IteratorResult</code> object returned instead of throwing</h3> + +<p>Starting with Gecko 29 {{geckoRelease(29)}}, the completed generator function no longer throws a {{jsxref("TypeError")}} "generator has already finished". Instead, it returns an <code>IteratorResult</code> object like <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</p> + +<h3 id="Iterator_property_and_iterator_symbol"><code>Iterator</code> property and <code>@@iterator</code> symbol</h3> + +<p>From Gecko 17 (Firefox 17 / Thunderbird 17 / SeaMonkey 2.14) to Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2) the <code>iterator</code> property was used (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=907077">bug 907077</a>), and from Gecko 27 to Gecko 35 the <code>"@@iterator"</code> placeholder was used. In Gecko 36 (Firefox 36 / Thunderbird 36 / SeaMonkey 2.33), the <code>@@iterator</code> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol">symbol</a> got implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=918828">bug 918828</a>).</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-iteration', 'Iteration')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-iteration', 'Iteration')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li>ES6 제너레이터에 대한 더 상세한 정보는 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">the function*() documentation</a> 를 참조하시기 바랍니다.</li> +</ul> diff --git a/files/ko/web/javascript/reference/lexical_grammar/index.html b/files/ko/web/javascript/reference/lexical_grammar/index.html new file mode 100644 index 0000000000..74e4e63788 --- /dev/null +++ b/files/ko/web/javascript/reference/lexical_grammar/index.html @@ -0,0 +1,657 @@ +--- +title: 어휘 문법 +slug: Web/JavaScript/Reference/Lexical_grammar +tags: + - JavaScript + - Keyword + - Lexical Grammar + - 문법 +translation_of: Web/JavaScript/Reference/Lexical_grammar +--- +<div>{{JsSidebar("More")}}</div> + +<p>이 페이지는 JavaScript의 어휘 문법(lexical grammar)을 설명합니다. ECMAScript 소스 본문은 왼쪽에서 오른쪽 방향으로 분석되고 토큰, 제어문자, 줄바꿈, 주석, 또는 공백으로 구성되는 입력 요소 시퀀스로 바뀝니다. 또한 ECMAScript는 특별한 키워드와 리터럴을 정의하고 있으며 명령문 끝에 자동으로 세미콜론을 추가하는 규칙이 있습니다.</p> + +<h2 id="제어_문자">제어 문자</h2> + +<p>제어 문자는 눈에 보이지 않지만 스크립트 소스 본문 해석을 제어하는 데 사용됩니다.</p> + +<table class="standard-table"> + <caption>유니코드 형식 제어 문자</caption> + <tbody> + <tr> + <th>코드 포인트</th> + <th>이름</th> + <th>축약형</th> + <th>설명</th> + </tr> + <tr> + <td><code>U+200C</code></td> + <td>Zero width non-joiner</td> + <td><ZWNJ></td> + <td> + <p>특정 언어에서 문자들이 연결선으로 묶이지 않게 하기 위해 문자 사이에 위치한다(<a href="http://en.wikipedia.org/wiki/Zero-width_non-joiner">Wikipedia</a>).</p> + </td> + </tr> + <tr> + <td><code>U+200D</code></td> + <td>Zero width joiner</td> + <td><ZWJ></td> + <td> + <p>특정 언어에서, 보통은 연결되지 않는 문자이나 해당 문자를 연결된 형태로 그리기 위해서(to be rendered) 사용하며 문자 사이에 위치한다(<a href="http://en.wikipedia.org/wiki/Zero-width_joiner">Wikipedia</a>).</p> + </td> + </tr> + <tr> + <td><code>U+FEFF</code></td> + <td>Byte order mark</td> + <td><BOM></td> + <td> + <p>스크립트 맨 앞에 두어 스크립트 본문의 byte order와 유니코드를 표시하는 데에 사용한다.(<a href="http://en.wikipedia.org/wiki/Byte_order_mark">Wikipedia</a>).</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="공백">공백</h2> + +<p>공백 문자는 소스 본문을 읽기 좋게 만들고 토큰을 구분합니다. 이 공백 문자들은 보통 코드의 기능에 필요한 것은 아닙니다. 최소화 도구(<a href="http://en.wikipedia.org/wiki/Minification_%28programming%29">Minification tools</a>)는 종종 전송해야하는 데이터 크기를 줄이기 위해서 공백을 제거합니다.</p> + +<table class="standard-table"> + <caption>공백 문자</caption> + <tbody> + <tr> + <th>코드 포인트</th> + <th>이름</th> + <th>축약형</th> + <th>설명</th> + <th>이스케이프 시퀀스</th> + </tr> + <tr> + <td>U+0009</td> + <td>Character tabulation</td> + <td><HT></td> + <td>Horizontal tabulation</td> + <td>\t</td> + </tr> + <tr> + <td>U+000B</td> + <td>Line tabulation</td> + <td><VT></td> + <td>Vertical tabulation</td> + <td>\v</td> + </tr> + <tr> + <td>U+000C</td> + <td>Form feed</td> + <td><FF></td> + <td>Page breaking control character (<a href="http://en.wikipedia.org/wiki/Page_break#Form_feed">Wikipedia</a>).</td> + <td>\f</td> + </tr> + <tr> + <td>U+0020</td> + <td>Space</td> + <td><SP></td> + <td>Normal space</td> + <td></td> + </tr> + <tr> + <td>U+00A0</td> + <td>No-break space</td> + <td><NBSP></td> + <td>Normal space, but no point at which a line may break</td> + <td></td> + </tr> + <tr> + <td>Others</td> + <td>Other Unicode space characters</td> + <td><USP></td> + <td><a href="http://en.wikipedia.org/wiki/Space_%28punctuation%29#Spaces_in_Unicode">Spaces in Unicode on Wikipedia</a></td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="개행_문자">개행 문자</h2> + +<p>공백문자와 더불어, 개행 문자는 소스 본문의 가독성을 향상시킵니다. 하지만, 몇몇 상황에서 개행 문자는 코드 내부에 숨겨지기 때문에 자바스크립트 코드 실행에 영향을 미칩니다. 개행 문자는 자동 새미콜론 삽입(<a href="#Automatic_semicolon_insertion">automatic semicolon insertion</a>) 규칙에도 영향을 줍니다. 개행 문자는 표준 표현방식(<a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expressions</a>)의 클래스인 \s로 매치됩니다.</p> + +<p>아래의 유니코드 문자만이 ECMAScript에서 라인 종결자로 다뤄지며, 라인을 바꾸는 다른 문자들은 공백으로 생각하시면 됩니다(예를 들어, Next Line, NEL, U+0085는 공백으로 간주).</p> + +<table class="standard-table"> + <caption>개행 문자</caption> + <tbody> + <tr> + <th>코드 포인트</th> + <th>이름</th> + <th>축약형</th> + <th>설명</th> + <th>이스케이프 시퀀스</th> + </tr> + <tr> + <td>U+000A</td> + <td>Line Feed</td> + <td><LF></td> + <td>New line character in UNIX systems.</td> + <td>\n</td> + </tr> + <tr> + <td>U+000D</td> + <td>Carriage Return</td> + <td><CR></td> + <td>New line character in Commodore and early Mac systems.</td> + <td>\r</td> + </tr> + <tr> + <td>U+2028</td> + <td>Line Separator</td> + <td><LS></td> + <td><a href="http://en.wikipedia.org/wiki/Newline">Wikipedia</a></td> + <td></td> + </tr> + <tr> + <td>U+2029</td> + <td>Paragraph Separator</td> + <td><PS></td> + <td><a href="http://en.wikipedia.org/wiki/Newline">Wikipedia</a></td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="주석">주석</h2> + +<p>주석은 힌트, 필기, 제안이나 주의할 점들을 자바스크립트 코드에 넣을 때 사용합니다. 이는 더 쉽게 읽고 이해할 수 있게 도와줍니다. 또한 특정 코드가 실행되지 않도록 막아주기도 합니다. 따라서 주석은 유용한 디버깅 도구라고도 할 수 있습니다.</p> + +<p>자바스크립트에는 코드 속에 주석을 쓰는 두 가지 방식이 있습니다.</p> + +<p>첫 번째, '//'로 첨언하기입니다. 이는 아래의 예시처럼 같은 줄에 있는 모든 코드를 주석으로 바꿉니다.</p> + +<pre class="brush: js notranslate">function comment() { + // 자바스크립트의 각주 한 줄입니다. + console.log("Hello world!"); +} +comment(); +</pre> + +<p>두 번째, 좀 더 유연하게 쓸 수 있는 '/* */'로 첨언하기입니다.</p> + +<p>예를 들면, 한 줄에 첨언할 때는 이렇게 쓸 수 있습니다 :</p> + +<pre class="brush: js notranslate">function comment() { + /* 자바스크립트 각주 한 줄입니다. */ + console.log("Hello world!"); +} +comment();</pre> + +<p>여러 줄로 첨언할 때는, 이렇게 씁니다 :</p> + +<pre class="brush: js notranslate">function comment() { + /* This comment spans multiple lines. Notice + that we don't need to end the comment until we're done. */ + console.log("Hello world!"); +} +comment();</pre> + +<p>원한다면, 라인 중간에도 사용할 수 있습니다. 물론 코드의 가독성이 떨어지게 됩니다. 그러니 주의를 기울여 사용해야 합니다:</p> + +<p>function comment(x) {</p> + +<pre class="brush: js notranslate"> console.log("Hello " + x /* insert the value of x */ + " !"); +} +comment("world");</pre> + +<p>게다가, 코드 실행을 막기 위해 코드를 무용화 시키는데도 사용할 수 있습니다. 아래처럼 코드를 코멘트로 감싸는 거죠:</p> + +<pre class="brush: js notranslate">function comment() { + /* console.log("Hello world!"); */ +} +comment();</pre> + +<p>In this case, the <code>console.log()</code> call is never issued, since it's inside a comment. Any number of lines of code can be disabled this way.</p> + +<h2 id="해시뱅_주석">해시뱅 주석</h2> + +<p>A specialized third comment syntax, the <strong>hashbang comment</strong>, is in the process of being standardized in ECMAScript (see the <a href="https://github.com/tc39/proposal-hashbang">Hashbang Grammar proposal</a>).</p> + +<p>A hashbang comment behaves exactly like a single line-only (<code>//</code>) comment, but it instead begins with <code>#!</code> and<strong> is only valid at the absolute start of a script or module</strong>. Note also that no whitespace of any kind is permitted before the <code>#!</code>. The comment consists of all the characters after <code>#!</code> up to the end of the first line; only one such comment is permitted.</p> + +<p>The hashbang comment specifies the path to a specific JavaScript interpreter<br> + that you want to use to execute the script. An example is as follows:</p> + +<pre class="brush: js notranslate">#!/usr/bin/env node + +console.log("Hello world"); +</pre> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: Hashbang comments in JavaScript mimic <a href="https://en.wikipedia.org/wiki/Shebang_(Unix)">shebangs in Unix</a> used to run files with proper interpreter.</p> +</div> + +<div class="blockIndicator warning"> +<p>Although <a href="https://en.wikipedia.org/wiki/Byte_order_mark">BOM</a> before hashbang comment will work in a browser it is not advised to use BOM in a script with hasbang. BOM will not work when you try to run the script in Unix/Linux. So use UTF-8 without BOM if you want to run scripts directly from shell.</p> +</div> + +<p>You must only use the <code>#!</code> comment style to specify a JavaScript interpreter. In all other cases just use a <code>//</code> comment (or mulitiline comment).</p> + +<h2 id="키워드">키워드</h2> + +<h3 id="ECMAScript_2015_기준_예약_키워드">ECMAScript 2015 기준 예약 키워드</h3> + +<ul class="threecolumns"> + <li>{{jsxref("Statements/break", "break")}}</li> + <li>{{jsxref("Statements/switch", "case")}}</li> + <li>{{jsxref("Statements/try...catch", "catch")}}</li> + <li>{{jsxref("Statements/class", "class")}}</li> + <li>{{jsxref("Statements/const", "const")}}</li> + <li>{{jsxref("Statements/continue", "continue")}}</li> + <li>{{jsxref("Statements/debugger", "debugger")}}</li> + <li>{{jsxref("Statements/default", "default")}}</li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Statements/do...while", "do")}}</li> + <li>{{jsxref("Statements/if...else", "else")}}</li> + <li>{{jsxref("Statements/export", "export")}}</li> + <li>{{jsxref("Statements/class", "extends")}}</li> + <li>{{jsxref("Statements/try...catch", "finally")}}</li> + <li>{{jsxref("Statements/for", "for")}}</li> + <li>{{jsxref("Statements/function", "function")}}</li> + <li>{{jsxref("Statements/if...else", "if")}}</li> + <li>{{jsxref("Statements/import", "import")}}</li> + <li>{{jsxref("Operators/in", "in")}}</li> + <li>{{jsxref("Operators/instanceof", "instanceof")}}</li> + <li>{{jsxref("Operators/new", "new")}}</li> + <li>{{jsxref("Statements/return", "return")}}</li> + <li>{{jsxref("Operators/super", "super")}}</li> + <li>{{jsxref("Statements/switch", "switch")}}</li> + <li>{{jsxref("Operators/this", "this")}}</li> + <li>{{jsxref("Statements/throw", "throw")}}</li> + <li>{{jsxref("Statements/try...catch", "try")}}</li> + <li>{{jsxref("Operators/typeof", "typeof")}}</li> + <li>{{jsxref("Statements/var", "var")}}</li> + <li>{{jsxref("Operators/void", "void")}}</li> + <li>{{jsxref("Statements/while", "while")}}</li> + <li>{{jsxref("Statements/with", "with")}}</li> + <li>{{jsxref("Operators/yield", "yield")}}</li> +</ul> + +<h3 id="확장_예약_키워드">확장 예약 키워드</h3> + +<p>The following are reserved as future keywords by the ECMAScript specification. They have no special functionality at present, but they might at some future time, so they cannot be used as identifiers.</p> + +<p>These are always reserved:</p> + +<ul> + <li><code>enum</code></li> +</ul> + +<p>The following are only reserved when they are found in strict mode code:</p> + +<ul class="threecolumns"> + <li><code>implements</code></li> + <li><code>interface</code></li> + <li>{{jsxref("Statements/let", "let")}}</li> + <li><code>package</code></li> + <li><code>private</code></li> + <li><code>protected</code></li> + <li><code>public</code></li> + <li><code>static</code></li> +</ul> + +<p>The following are only reserved when they are found in module code:</p> + +<ul> + <li><code>await</code></li> +</ul> + +<h4 id="구형_표준의_확장_예약_키워드">구형 표준의 확장 예약 키워드</h4> + +<p>The following are reserved as future keywords by older ECMAScript specifications (ECMAScript 1 till 3).</p> + +<ul class="threecolumns"> + <li><code>abstract</code></li> + <li><code>boolean</code></li> + <li><code>byte</code></li> + <li><code>char</code></li> + <li><code>double</code></li> + <li><code>final</code></li> + <li><code>float</code></li> + <li><code>goto</code></li> + <li><code>int</code></li> + <li><code>long</code></li> + <li><code>native</code></li> + <li><code>short</code></li> + <li><code>synchronized</code></li> + <li><code>throws</code></li> + <li><code>transient</code></li> + <li><code>volatile</code></li> +</ul> + +<p>Additionally, the literals <code>null</code>, <code>true</code>, and <code>false</code> cannot be used as identifiers in ECMAScript.</p> + +<h3 id="예약어_사용법">예약어 사용법</h3> + +<p>Reserved words actually only apply to Identifiers (vs. <code>IdentifierNames</code>) . As described in <a href="http://es5.github.com/#A.1">es5.github.com/#A.1</a>, these are all <code>IdentifierNames</code> which do not exclude <code>ReservedWords</code>.</p> + +<pre class="brush: js notranslate">a.import +a['import'] +a = { import: 'test' }. +</pre> + +<p>On the other hand the following is illegal because it's an <code>Identifier</code>, which is an <code>IdentifierName</code> without the reserved words. Identifiers are used for <code>FunctionDeclaration, FunctionExpression, VariableDeclaration</code> and so on. <code>IdentifierNames </code>are used for<code> MemberExpression, CallExpression</code> and so on.</p> + +<pre class="brush: js notranslate">function import() {} // Illegal.</pre> + +<h2 id="리터럴">리터럴</h2> + +<h3 id="Null_리터럴">Null 리터럴</h3> + +<p>See also <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a> for more information.</p> + +<pre class="brush: js notranslate">null</pre> + +<h3 id="불리언_리터럴">불리언 리터럴</h3> + +<p>See also <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a> for more information.</p> + +<pre class="brush: js notranslate">true +false</pre> + +<h3 id="숫자_리터럴">숫자 리터럴</h3> + +<h4 id="10진법">10진법</h4> + +<pre class="brush: js notranslate">1234567890 +42 + +// Caution when using with a leading zero: +0888 // 888 parsed as decimal +0777 // parsed as octal, 511 in decimal +</pre> + +<p>Note that decimal literals can start with a zero (<code>0</code>) followed by another decimal digit, but If all digits after the leading <code>0</code> are smaller than 8, the number is interpreted as an octal number. This won't throw in JavaScript, see {{bug(957513)}}. See also the page about <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt#Octal_interpretations_with_no_radix"><code>parseInt()</code></a>.</p> + +<h5 id="Exponential">Exponential</h5> + +<p>The decimal exponential literal is specified by the following format: <code>beN</code>; where <code>b</code> is a base number (integer or floating), followed by <code>e</code> char (which serves as separator or <em>exponent indicator</em>) and<em> </em><code>N</code>, which is <em>exponent</em> or <em>power</em> number – a signed integer (as per 2019 ECMA-262 specs): </p> + +<pre class="notranslate">0e-5 // => 0 +0e+5 // => 0 +5e1 // => 50 +175e-2 // => 1.75 +1e3 // => 1000 +1e-3 // => 0.001</pre> + +<h4 id="2진법">2진법</h4> + +<p>Binary number syntax uses a leading zero followed by a lowercase or uppercase Latin letter "B" (<code>0b</code> or <code>0B</code>). Because this syntax is new in ECMAScript 2015, see the browser compatibility table, below. If the digits after the <code>0b</code> are not 0 or 1, the following <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code> is thrown: "Missing binary digits after 0b".</p> + +<pre class="brush: js notranslate">var FLT_SIGNBIT = 0b10000000000000000000000000000000; // 2147483648 +var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040 +var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre> + +<h4 id="8진법">8진법</h4> + +<p>Octal number syntax uses a leading zero followed by a lowercase or uppercase Latin letter "O" (<code>0o</code> or <code>0O)</code>. Because this syntax is new in ECMAScript 2015, see the browser compatibility table, below. If the digits after the <code>0o</code> are outside the range (01234567), the following <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code> is thrown: "Missing octal digits after 0o".</p> + +<pre class="brush: js notranslate">var n = 0O755; // 493 +var m = 0o644; // 420 + +// Also possible with just a leading zero (see note about decimals above) +0755 +0644 +</pre> + +<h4 id="16진법">16진법</h4> + +<p>Hexadecimal number syntax uses a leading zero followed by a lowercase or uppercase Latin letter "X" (<code>0x</code> or <code>0X)</code>. If the digits after 0x are outside the range (0123456789ABCDEF), the following <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code> is thrown: "Identifier starts immediately after numeric literal".</p> + +<pre class="brush: js notranslate">0xFFFFFFFFFFFFFFFFF // 295147905179352830000 +0x123456789ABCDEF // 81985529216486900 +0XA // 10 +</pre> + +<h4 id="BigInt_literal">BigInt literal</h4> + +<p>The {{jsxref("BigInt")}} type is a numeric primitive in JavaScript that can represent integers with arbitrary precision. BigInt literals are created by appending <code>n</code> to the end of an integer.</p> + +<pre class="notranslate">123456789123456789n // 123456789123456789 +0o777777777777n // 68719476735 +0x123456789ABCDEFn // 81985529216486895 +0b11101001010101010101n // 955733 +</pre> + +<p>Note that legacy octal numbers with just a leading zero won't work for <code>BigInt</code>:</p> + +<pre class="example-bad notranslate">// 0755n +// SyntaxError: invalid BigInt syntax</pre> + +<p>For octal <code>BigInt</code> numbers, always use zero followed by the letter "o" (uppercase or lowercase):</p> + +<pre class="example-good notranslate">0o755n</pre> + +<p>For more information about <code>BigInt</code>, see also <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#BigInt_type">JavaScript data structures</a>.</p> + +<h4 id="Numeric_separators">Numeric separators</h4> + +<p>To improve readability for numeric literals, underscores (<code>_</code>, <code>U+005F</code>) can be used as separators:</p> + +<pre class="notranslate">// separators in decimal numbers +1_000_000_000_000 +1_050.95 + +// separators in binary numbers +0b1010_0001_1000_0101 + +// separators in octal numbers +0o2_2_5_6 + +// separators in hex numbers +0xA0_B0_C0 + +// separators in BigInts +1_000_000_000_000_000_000_000n +</pre> + +<p>Note these limitations:</p> + +<pre class="example-bad notranslate">// More than one underscore in a row is not allowed +100__000; // SyntaxError + +// Not allowed at the end of numeric literals +100_; // SyntaxError + +// Can not be used after leading 0 +0_1; // SyntaxError +</pre> + +<h3 id="객체_리터럴">객체 리터럴</h3> + +<p>See also {{jsxref("Object")}} and <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">Object initializer</a> for more information.</p> + +<pre class="brush: js notranslate">var o = { a: 'foo', b: 'bar', c: 42 }; + +// shorthand notation. New in ES2015 +var a = 'foo', b = 'bar', c = 42; +var o = {a, b, c}; + +// instead of +var o = { a: a, b: b, c: c }; +</pre> + +<h3 id="배열_리터럴">배열 리터럴</h3> + +<p>See also {{jsxref("Array")}} for more information.</p> + +<pre class="brush: js notranslate">[1954, 1974, 1990, 2014]</pre> + +<h3 id="문자열_리터럴">문자열 리터럴</h3> + +<p>A string literal is zero or more Unicode code points enclosed in single or double quotes. Unicode code points may also be represented by an escape sequence. All code points may appear literally in a string literal except for these closing quote code points:</p> + +<ul> + <li>U+005C (backslash),</li> + <li>U+000D <CR>,</li> + <li>and U+000A <LF>.</li> +</ul> + +<p>Prior to the <a href="https://github.com/tc39/proposal-json-superset">proposal to make all JSON text valid ECMA-262</a>, U+2028 <LS> and U+2029 <PS>, were also disallowed from appearing unescaped in string literals.</p> + +<p>Any code points may appear in the form of an escape sequence. String literals evaluate to ECMAScript String values. When generating these String values Unicode code points are UTF-16 encoded.</p> + +<pre class="brush: js notranslate">'foo' +"bar"</pre> + +<h4 id="16진수_이스케이프_시퀀스">16진수 이스케이프 시퀀스</h4> + +<p>Hexadecimal escape sequences consist of <code>\x</code> followed by exactly two hexadecimal digits representing a code unit or code point in the range 0x0000 to 0x00FF.</p> + +<pre class="brush: js notranslate">'\xA9' // "©" +</pre> + +<h4 id="유니코드_이스케이프_시퀀스">유니코드 이스케이프 시퀀스</h4> + +<p>A Unicode escape sequence consists of exactly four hexadecimal digits following <code>\u</code>. It represents a code unit in the UTF-16 encoding. For code points U+0000 to U+FFFF, the code unit is equal to the code point. Code points U+10000 to U+10FFFF require two escape sequences representing the two code units (a surrogate pair) used to encode the character; the surrogate pair is distinct from the code point.</p> + +<p>See also {{jsxref("String.fromCharCode()")}} and {{jsxref("String.prototype.charCodeAt()")}}.</p> + +<pre class="brush: js notranslate">'\u00A9' // "©" (U+A9)</pre> + +<h4 id="유니코드_코드_포인트_시퀀스">유니코드 코드 포인트 시퀀스</h4> + +<p>A Unicode code point escape consists of <code>\u{</code>, followed by a code point in hexadecimal base, followed by <code>}</code>. The value of the hexadecimal digits must be in the range 0 and 0x10FFFF inclusive. Code points in the range U+10000 to U+10FFFF do not need to be represented as a surrogate pair. Code point escapes were added to JavaScript in ECMAScript 2015 (ES6).</p> + +<p>See also {{jsxref("String.fromCodePoint()")}} and {{jsxref("String.prototype.codePointAt()")}}.</p> + +<pre class="brush: js notranslate">'\u{2F804}' // CJK COMPATIBILITY IDEOGRAPH-2F804 (U+2F804) + +// the same character represented as a surrogate pair +'\uD87E\uDC04'</pre> + +<h3 id="정규_표현식_리터럴">정규 표현식 리터럴</h3> + +<p>See also <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a> for more information.</p> + +<pre class="brush: js notranslate">/ab+c/g + +// An "empty" regular expression literal +// The empty non-capturing group is necessary +// to avoid ambiguity with single-line comments. +/(?:)/</pre> + +<h3 id="템플릿_리터럴">템플릿 리터럴</h3> + +<p>See also <a href="/en-US/docs/Web/JavaScript/Reference/template_strings">template strings</a> for more information.</p> + +<pre class="brush: js notranslate">`string text` + +`string text line 1 + string text line 2` + +`string text ${expression} string text` + +tag `string text ${expression} string text`</pre> + +<h2 id="자동_세미콜론_삽입">자동 세미콜론 삽입</h2> + +<p>Some <a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript statements</a> must be terminated with semicolons and are therefore affected by automatic semicolon insertion (ASI):</p> + +<ul> + <li>Empty statement</li> + <li><code>let</code>, <code>const</code>, variable statement</li> + <li><code>import</code>, <code>export</code>, module declaration</li> + <li>Expression statement</li> + <li><code>debugger</code></li> + <li><code>continue</code>, <code>break</code>, <code>throw</code></li> + <li><code>return</code></li> +</ul> + +<p>The ECMAScript specification mentions<a href="https://tc39.github.io/ecma262/#sec-rules-of-automatic-semicolon-insertion"> three rules of semicolon insertion</a>.</p> + +<p>1. A semicolon is inserted before, when a <a href="#Line_terminators">Line terminator</a> or "}" is encountered that is not allowed by the grammar.</p> + +<pre class="brush: js notranslate">{ 1 2 } 3 + +// is transformed by ASI into + +{ 1 2 ;} 3;</pre> + +<p>2. A semicolon is inserted at the end, when the end of the input stream of tokens is detected and the parser is unable to parse the single input stream as a complete program.</p> + +<p>Here <code>++</code> is not treated as a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">postfix operator</a> applying to variable <code>b</code>, because a line terminator occurs between <code>b</code> and <code>++</code>.</p> + +<pre class="brush: js notranslate">a = b +++c + +// is transformend by ASI into + +a = b; +++c; +</pre> + +<p>3. A semicolon is inserted at the end, when a statement with restricted productions in the grammar is followed by a line terminator. These statements with "no LineTerminator here" rules are:</p> + +<ul> + <li>PostfixExpressions (<code>++</code> and <code>--</code>)</li> + <li><code>continue</code></li> + <li><code>break</code></li> + <li><code>return</code></li> + <li><code>yield</code>, <code>yield*</code></li> + <li><code>module</code></li> +</ul> + +<pre class="brush: js notranslate">return +a + b + +// is transformed by ASI into + +return; +a + b; +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2("ES1")}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-7', 'Lexical Conventions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-lexical-grammar', 'Lexical Grammar')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Added: Binary and Octal Numeric literals, Unicode code point escapes, Templates</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-language-lexical-grammar', 'Lexical Grammar')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.grammar")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Boolean")}}</li> + <li>{{jsxref("Number")}}</li> + <li>{{jsxref("RegExp")}}</li> + <li>{{jsxref("String")}}</li> + <li><a href="http://whereswalden.com/2013/08/12/micro-feature-from-es6-now-in-firefox-aurora-and-nightly-binary-and-octal-numbers/">Jeff Walden: Binary and octal numbers</a></li> + <li><a href="http://mathiasbynens.be/notes/javascript-escapes">Mathias Bynens: JavaScript character escape sequences</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/liveconnect/index.html b/files/ko/web/javascript/reference/liveconnect/index.html new file mode 100644 index 0000000000..dfa43d52d0 --- /dev/null +++ b/files/ko/web/javascript/reference/liveconnect/index.html @@ -0,0 +1,17 @@ +--- +title: LiveConnect +slug: Web/JavaScript/Reference/LiveConnect +translation_of: Archive/Web/LiveConnect +--- +<p>이 절(section)은 생성자, 메소드와 함께 LiveConnect에 쓰이는 Java 클래스를 상세히 기록합니다. 이 클래스들은 Java 객체가 JavaScript 코드에 접근할 수 있게 합니다.</p> +<p><a href="ko/Core_JavaScript_1.5_Reference/LiveConnect/JSException">JSException</a></p> +<dl> + <dd> + public 클래스 <code>JSException</code>은 <code>RuntimeException</code>를 상속하고, JavaScript가 에러를 반환하면 발생됩니다.</dd> +</dl> +<p><a href="ko/Core_JavaScript_1.5_Reference/LiveConnect/JSObject">JSObject</a></p> +<dl> + <dd> + public 클래스 <code>JSObject</code>는 <code>Object</code>를 상속합니다. JavaScript 개체는 클래스 <code>JSObject</code>의 인스턴스(instance)로 싸여 Java가 JavaScript 개체를 다루게 하도록 Java에 건네집니다.</dd> +</dl> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/LiveConnect", "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/LiveConnect" } ) }}</p> diff --git a/files/ko/web/javascript/reference/operators/addition/index.html b/files/ko/web/javascript/reference/operators/addition/index.html new file mode 100644 index 0000000000..0a624fdd16 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/addition/index.html @@ -0,0 +1,77 @@ +--- +title: Addition (+) +slug: Web/JavaScript/Reference/Operators/Addition +translation_of: Web/JavaScript/Reference/Operators/Addition +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>증가 연산자<sup>addition operator</sup> (<code>+</code>)는 숫자 또는 여러 문자열의 더합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-addition.html")}}</div> + +<div></div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var> + <var>y</var> +</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Numeric_addition">Numeric addition</h3> + +<pre class="brush: js notranslate">// Number + Number -> addition +1 + 2 // 3 + +// Boolean + Number -> addition +true + 1 // 2 + +// Boolean + Boolean -> addition +false + false // 0 +</pre> + +<h3 id="String_concatenation">String concatenation</h3> + +<pre class="brush: js notranslate">// String + String -> concatenation +'foo' + 'bar' // "foobar" + +// Number + String -> concatenation +5 + 'foo' // "5foo" + +// String + Boolean -> concatenation +'foo' + false // "foofalse"</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-addition-operator-plus', 'Addition operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.operators.addition")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division">Division operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder">Remainder operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Decrement">Decrement operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/arithmetic_operators/index.html b/files/ko/web/javascript/reference/operators/arithmetic_operators/index.html new file mode 100644 index 0000000000..8b2b274aa6 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/arithmetic_operators/index.html @@ -0,0 +1,290 @@ +--- +title: 산술 연산자 +slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><span class="seoSummary"><strong>산술 연산자는</strong> 숫자 값(리터럴 또는 변수)을 피연산자로 받아 하나의 숫자 값을 반환합니다.</span> 표준 산술 연산자는 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/)입니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}</div> + + + +<h2 id="덧셈"><a id="Addition" name="Addition">덧셈 (+)</a></h2> + +<p>덧셈 연산자는 숫자 피연산자를 더한 값, 또는 문자열을 연결한 값을 생성합니다.</p> + +<h3 id="구문">구문</h3> + +<pre class="syntaxbox"><strong>연산자:</strong> x + y +</pre> + +<h3 id="예제">예제</h3> + +<pre class="brush: js">// Number + Number -> 합 +1 + 2 // 3 + +// Boolean + Number -> 합 +true + 1 // 2 + +// Boolean + Boolean -> 합 +false + false // 0 + +// Number + String -> 연결 +5 + "foo" // "5foo" + +// String + Boolean -> 연결 +"foo" + false // "foofalse" + +// String + String -> 연결 +"foo" + "bar" // "foobar" +</pre> + +<h2 id="뺄셈_-"><a id="Subtraction" name="Subtraction">뺄셈 (-)</a></h2> + +<p>뺄셈 연산자는 두 개의 피연산자를 뺀 값을 생성합니다.</p> + +<h3 id="구문_2">구문</h3> + +<pre class="syntaxbox"><strong>연산자:</strong> x - y +</pre> + +<h3 id="예제_2">예제</h3> + +<pre class="brush: js">5 - 3 // 2 +3 - 5 // -2 +"foo" - 3 // NaN</pre> + +<h2 id="나눗셈"><a id="Division" name="Division">나눗셈 (/)</a></h2> + +<p>나눗셈 연산자는 왼쪽 피연산자를 피제수로, 오른쪽 피연산자를 제수로 한 몫을 생성합니다.</p> + +<h3 id="구문_3">구문</h3> + +<pre class="syntaxbox"><strong>연산자:</strong> x / y +</pre> + +<h3 id="예제_3">예제</h3> + +<pre class="brush: js">1 / 2 // JavaScript에선 0.5 +1 / 2 // Java에선 0 +// (양쪽 피연산자 모두 명시적인 부동소수점 숫자가 아님) + +1.0 / 2.0 // JavaScript와 Java 둘 다 0.5 + +2.0 / 0 // JavaScript에서 Infinity +2.0 / 0.0 // 동일하게 Infinity +2.0 / -0.0 // JavaScript에서 -Infinity</pre> + +<h2 id="곱셈_*"><a id="Multiplication" name="Multiplication">곱셈 (*)</a></h2> + +<p>곱셈 연산자는 두 연산자의 곱을 생성합니다.</p> + +<h3 id="구문_4">구문</h3> + +<pre class="syntaxbox"><strong>연산자:</strong> x * y +</pre> + +<h3 id="예제_4">예제</h3> + +<pre class="brush: js">2 * 2 // 4 +-2 * 2 // -4 +Infinity * 0 // NaN +Infinity * Infinity // Infinity +"foo" * 2 // NaN +</pre> + +<h2 id="나머지"><a id="Remainder" name="Remainder">나머지 (%)</a></h2> + +<p>나머지 연산자는 왼쪽 피연산자를 오른쪽 피연산자로 나눴을 때의 나머지를 반환합니다. 결과는 항상 피제수의 부호를 따라갑니다.</p> + +<h3 id="구문_5">구문</h3> + +<pre class="syntaxbox"><strong>연산자:</strong> var1 % var2 +</pre> + +<h3 id="예제_5">예제</h3> + +<pre class="brush: js">12 % 5 // 2 +-1 % 2 // -1 +NaN % 2 // NaN +1 % 2 // 1 +2 % 3 // 2 +-4 % 2 // -0 +5.5 % 2 // 1.5 +</pre> + +<h2 id="거듭제곱_**"><a name="Exponentiation">거듭제곱 (**)</a></h2> + +<p>거듭제곱 연산자는 첫 번째 피연산자를 밑으로, 두 번째 피연산자를 지수로 한 값을 생성합니다. 즉, <code>var1</code>과 <code>var2</code>가 변수일 때, <code>var1<sup>var2</sup></code>의 값을 생성합니다. 거듭제곱 연산자는 우결합성을 가집니다. 따라서 <code>a ** b ** c</code>는 <code>a ** (b ** c)</code>와 같습니다.</p> + +<h3 id="구문_6">구문</h3> + +<pre class="syntaxbox"><strong>연산자:</strong> var1 ** var2 +</pre> + +<h3 id="참고">참고</h3> + +<p>PHP와 Python 등 거듭제곱 연산자를 가진 대부분의 언어는 거듭제곱 연산자의 우선순위가 +와 - 등 단항 연산자보다 높습니다. 그러나 Bash는 단항 연산자가 거듭제곱 연산자보다 우선순위가 높은 등 일부 예외도 있습니다. JavaScript는 단항 연산자(<code>+/-/~/!/delete/void/typeof</code>)를 왼쪽 피연산자 앞에 배치할 수 없으므로, 모호한 표현도 작성할 수 없습니다.</p> + +<pre class="brush: js">-2 ** 2; +// Bash에서 4, 다른 언어에서는 -4. +// 모호한 표현이므로 JavaScript에서는 유효하지 않음 + + +-(2 ** 2); +// JavaScript에서 -4, 작성자의 의도가 명확함 +</pre> + +<h3 id="예제_6">예제</h3> + +<pre class="brush: js">2 ** 3 // 8 +3 ** 2 // 9 +3 ** 2.5 // 15.588457268119896 +10 ** -1 // 0.1 +NaN ** 2 // NaN + +2 ** 3 ** 2 // 512 +2 ** (3 ** 2) // 512 +(2 ** 3) ** 2 // 64 +</pre> + +<p>결과의 부호를 뒤집으려면 다음과 같이 작성합니다.</p> + +<pre class="brush: js">-(2 ** 2) // -4 +</pre> + +<p>거듭제곱의 밑을 음수로 강제하려면 다음과 같이 작성합니다.</p> + +<pre class="brush: js">(-2) ** 2 // 4 +</pre> + +<div class="note"> +<p><strong>참고:</strong> JavaScript는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">비트 연산자 ^ (논리 XOR)</a>도 가지고 있습니다. <code>**</code>와 <code>^</code>는 다릅니다. (예 : <code>2 ** 3 === 8</code>이지만 <code>2 ^ 3 === 1</code>)</p> +</div> + +<h2 id="증가"><a id="Increment" name="Increment">증가 (++)</a></h2> + +<p>증가 연산자는 피연산자를 증가(1을 덧셈)시키고, 그 값을 반환합니다.</p> + +<ul> + <li>피연산자 뒤에 붙여(예: <code>x++</code>) 접미사로 사용한 경우 증가하기 전의 값을 반환합니다.</li> + <li>피연산자 앞에 붙여(예: <code>++x</code>) 접두사로 사용한 경우 증가한 후의 값을 반환합니다.</li> +</ul> + +<h3 id="구문_7">구문</h3> + +<pre class="syntaxbox"><strong>연산자:</strong> x++ or ++x +</pre> + +<h3 id="예제_7">예제</h3> + +<pre class="brush: js">// 접미사 +var x = 3; +y = x++; // y = 3, x = 4 + +// 접두사 +var a = 2; +b = ++a; // a = 3, b = 3 +</pre> + +<h2 id="감소_--"><a id="Decrement" name="Decrement">감소 (--)</a></h2> + +<p>감소 연산자는 피연산자를 감소(1을 뺄셈)시키고, 그 값을 반환합니다.</p> + +<ul> + <li>피연산자 뒤에 붙여(예: <code>x--</code>) 접미사로 사용한 경우 감소하기 전의 값을 반환합니다.</li> + <li>피연산자 앞에 붙여(예: <code>--x</code>) 접두사로 사용한 경우 감소한 후의 값을 반환합니다.</li> +</ul> + +<h3 id="구문_8">구문</h3> + +<pre class="syntaxbox"><strong>연산자:</strong> x-- or --x +</pre> + +<h3 id="예제_8">예제</h3> + +<pre class="brush: js">// 접미사 +var x = 3; +y = x--; // y = 3, x = 2 + +// 접두사 +var a = 2; +b = --a; // a = 1, b = 1 +</pre> + +<h2 id="단항_부정_-"><a name="Unary_negation">단항 부정 (-)</a></h2> + +<p>단항 부정 연산자는 피연산자의 앞에 위치하며 부호를 뒤집습니다.</p> + +<h3 id="구문_9">구문</h3> + +<pre class="syntaxbox"><strong>연산자:</strong> -x +</pre> + +<h3 id="예제_9">예제</h3> + +<pre class="brush: js">var x = 3; +y = -x; // y = -3, x = 3 + +// 단항 부정 연산자는 숫자가 아닌 값을 숫자로 변환함 +var x = "4"; +y = -x; // y = -4</pre> + +<h2 id="단항_양부호"><a name="Unary_plus">단항 양부호 (+)</a></h2> + +<p>단항 양부호 연산자는 피연산자의 앞에 위치하며 피연산자의 값 그대로 평가되지만, 값이 숫자가 아닐 경우 숫자로 변환을 시도합니다. 단항 부정(-) 연산자도 숫자가 아닌 값을 변환할 수 있지만, 단항 양부호가 속도도 제일 빠르고 다른 연산도 수행하지 않으므로 선호해야 할 방법입니다. 문자열로 표현한 정수 및 부동소수점 실수, 문자열이 아닌 <code>true</code>, <code>false</code>, <code>null</code>도 변환할 수 있습니다. 10진수와 (앞에 "0x"가 붙은) 16진수 정수 모두 지원합니다. 음수도 지원하지만 16진수 음수에는 사용할 수 없습니다. 어떤 값을 분석할 수 없으면 {{jsxref("NaN")}}으로 평가됩니다.</p> + +<h3 id="구문_10">구문</h3> + +<pre class="syntaxbox"><strong>연산자:</strong> +x +</pre> + +<h3 id="예제_10">예제</h3> + +<pre class="brush: js">+3 // 3 ++"3" // 3 ++true // 1 ++false // 0 ++null // 0 ++function(val) { return val } // NaN +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-additive-operators', 'Additive operators')}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-postfix-expressions', 'Postfix expressions')}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-11.5', 'Multiplicative operators')}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-11.4', 'Unary operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.operators.arithmetic")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">할당 연산자</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/assignment_operators/index.html b/files/ko/web/javascript/reference/operators/assignment_operators/index.html new file mode 100644 index 0000000000..d7f195c803 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/assignment_operators/index.html @@ -0,0 +1,394 @@ +--- +title: 할당 연산자 +slug: Web/JavaScript/Reference/Operators/Assignment_Operators +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators#Assignment_operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>할당 연산자</strong>는 오른쪽 피연산자의 값을 왼쪽 피연산자에 할당합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</div> + + + +<h2 id="개요">개요</h2> + +<p>기본 할당연산자는 등호(<code>=</code>)로, 오른쪽 피연산자의 값을 왼쪽 피연산자에 할당합니다. 즉, <code>x = y</code>는 <code>y</code>의 값을 <code>x</code>에 할당힙니다. 다른 할당 연산자는 보통 표준 연산의 축약형으로, 다음 표에서 종류와 예시를 확인할 수 있습니다.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>이름</th> + <th>단축 연산자</th> + <th>의미</th> + </tr> + <tr> + <td><a href="#Assignment">할당</a></td> + <td><code>x = y</code></td> + <td><code>x = y</code></td> + </tr> + <tr> + <td><a href="#Addition_assignment">덧셈 할당</a></td> + <td><code>x += y</code></td> + <td><code>x = x + y</code></td> + </tr> + <tr> + <td><a href="#Subtraction_assignment">뺄셈 할당</a></td> + <td><code>x -= y</code></td> + <td><code>x = x - y</code></td> + </tr> + <tr> + <td><a href="#Multiplication_assignment">곱셈 할당</a></td> + <td><code>x *= y</code></td> + <td><code>x = x * y</code></td> + </tr> + <tr> + <td><a href="#Division_assignment">나눗셈 할당</a></td> + <td><code>x /= y</code></td> + <td><code>x = x / y</code></td> + </tr> + <tr> + <td><a href="#Remainder_assignment">나머지 연산 할당</a></td> + <td><code>x %= y</code></td> + <td><code>x = x % y</code></td> + </tr> + <tr> + <td><a href="#Exponentiation_assignment">지수 연산 할당</a></td> + <td><code>x **= y</code></td> + <td><code>x = x ** y</code></td> + </tr> + <tr> + <td><a href="#Left_shift_assignment">왼쪽 시프트 할당</a></td> + <td><code>x <<= 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="#Bitwise_AND_assignment">비트 AND 할당</a></td> + <td><code>x &= y</code></td> + <td><code>x = x & y</code></td> + </tr> + <tr> + <td><a href="#Bitwise_XOR_assignment">비트 XOR 할당</a></td> + <td><code>x ^= y</code></td> + <td><code>x = x ^ y</code></td> + </tr> + <tr> + <td><a href="#Bitwise_OR_assignment">비트 OR 할당</a></td> + <td><code>x |= y</code></td> + <td><code>x = x | y</code></td> + </tr> + </tbody> +</table> + +<h2 id="할당"><a name="Assignment">할당</a></h2> + +<p>단순 할당 연산자는 값을 변수에 할당합니다. 할당 연산자는 할당의 결과값으로 평가됩니다. 할당 연산자를 연속해서 사용해, 다수의 변수에 하나의 값을 한꺼번에 할당할 수 있습니다. 예제를 참고하세요.</p> + +<h4 id="구문">구문</h4> + +<pre class="syntaxbox"><strong>연산자:</strong> x = y +</pre> + +<h4 id="예제">예제</h4> + +<pre class="brush: js">// 다음과 같은 변수를 가정 +// x = 5 +// y = 10 +// z = 25 + +x = y // x는 10 +x = y = z // x, y, z 모두 25 +</pre> + +<h3 id="덧셈_할당"><a name="Addition_assignment">덧셈 할당</a></h3> + +<p>덧셈 할당 연산자는 변수에 오른쪽 피연산자의 값을 더하고, 그 결과를 변수에 할당합니다. 두 피연산자의 자료형이 덧셈 할당 연산자의 행동을 결정합니다. 덧셈 연산자처럼 합 또는 연결이 가능합니다. 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "덧셈 연산자", "#Addition", 1)}}를 참고하세요.</p> + +<h4 id="구문_2">구문</h4> + +<pre class="syntaxbox"><strong>연산자:</strong> x += y +<strong>의미:</strong> x = x + y +</pre> + +<h4 id="예제_2">예제</h4> + +<pre class="brush: js">// 다음과 같은 변수를 가정 +// foo = "foo" +// bar = 5 +// baz = true + + +// Number + Number -> 합 +bar += 2 // 7 + +// Boolean + Number -> 합 +baz += 1 // 2 + +// Boolean + Boolean -> 합 +baz += false // 1 + +// Number + String -> 연결 +bar += 'foo' // "5foo" + +// String + Boolean -> 연결 +foo += false // "foofalse" + +// String + String -> 연결 +foo += 'bar' // "foobar" +</pre> + +<h3 id="뺄셈_할당"><a name="Subtraction_assignment">뺄셈 할당</a></h3> + +<p>뺄셈 할당 연산자는 변수에서 오른쪽 피연산자의 값을 빼고, 그 결과를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "뺄셈 연산자", "#Subtraction", 1)}}를 참고하세요.</p> + +<h4 id="구문_3">구문</h4> + +<pre class="syntaxbox"><strong>연산자:</strong> x -= y +<strong>의미:</strong> x = x - y +</pre> + +<h4 id="예제_3">예제</h4> + +<pre class="brush: js">// 다음과 같은 변수를 가정 +// bar = 5 + +bar -= 2 // 3 +bar -= "foo" // NaN +</pre> + +<h3 id="곱셈_할당"><a name="Multiplication_assignment">곱셈 할당</a></h3> + +<p>곱셈 할당 연산자는 변수에 오른쪽 피연산자의 값을 곱하고, 그 결과를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "곱셈 연산자", "#Multiplication", 1)}}를 참고하세요.</p> + +<h4 id="구문_4">구문</h4> + +<pre class="syntaxbox"><strong>연산자:</strong> x *= y +<strong>의미:</strong> x = x * y +</pre> + +<h4 id="예제_4">예제</h4> + +<pre class="brush: js">// 다음과 같은 변수를 가정 +// bar = 5 + +bar *= 2 // 10 +bar *= "foo" // NaN +</pre> + +<h3 id="나눗셈_할당"><a name="Division_assignment">나눗셈 할당</a></h3> + +<p>나눗셈 할당 연산자는 변수를 오른쪽 피연산자로 나누고, 그 결과를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "나눗셈 연산자", "#Division", 1)}}를 참고하세요.</p> + +<h4 id="구문_5">구문</h4> + +<pre class="syntaxbox"><strong>연산자:</strong> x /= y +<strong>의미:</strong> x = x / y +</pre> + +<h4 id="예제_5">예제</h4> + +<pre class="brush: js">// 다음과 같은 변수를 가정 +// bar = 5 + +bar /= 2 // 2.5 +bar /= "foo" // NaN +bar /= 0 // Infinity +</pre> + +<h3 id="나머지_연산_할당"><a name="Remainder_assignment">나머지 연산 할당</a></h3> + +<p>나머지 연산 할당은 변수를 오른쪽 피연산자로 나눈 나머지를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "나머지 연산자", "#Remainder", 1)}}를 참고하세요.</p> + +<h4 id="구문_6">구문</h4> + +<pre class="syntaxbox"><strong>연산자:</strong> x %= y +<strong>의미:</strong> x = x % y +</pre> + +<h4 id="예제_6">예제</h4> + +<pre class="brush: js">// 다음과 같은 변수를 가정 +// bar = 5 + +bar %= 2 // 1 +bar %= "foo" // NaN +bar %= 0 // NaN +</pre> + +<h3 id="거듭제곱_할당"><a id="Exponentiation_assignment" name="Exponentiation_assignment">거듭제곱 할당</a></h3> + +<p>거듭제곱 할당 연산자는 변수를 오른쪽 피연산자만큼 거듭제곱한 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "거듭제곱 연산자", "#Exponentiation", 1)}}를 참고하세요.</p> + +<h4 id="구문_7">구문</h4> + +<pre class="syntaxbox"><strong>연산자:</strong> x **= y +<strong>의미:</strong> x = x ** y +</pre> + +<h4 id="예제_7">예제</h4> + +<pre class="brush: js">// 다음과 같은 변수를 가정 +// bar = 5 + +bar **= 2 // 25 +bar **= "foo" // NaN</pre> + +<h3 id="왼쪽_시프트_할당"><a name="Left_shift_assignment">왼쪽 시프트 할당</a></h3> + +<p>왼쪽 시프트 할당 연산자는 변수의 비트를 오른쪽 피연산자의 값만큼 왼쪽으로 이동하고, 그 결과를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", "left shift operator", "#Left_shift", 1)}}를 참고하세요.</p> + +<h4 id="구문_8">구문</h4> + +<pre class="syntaxbox"><strong>연산자:</strong> x <<= y +<strong>의미:</strong> x = x << y +</pre> + +<h4 id="예제_8">예제</h4> + +<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) +bar <<= 2; // 20 (00000000000000000000000000010100) +</pre> + +<h3 id="오른쪽_시프트_할당"><a name="Right_shift_assignment">오른쪽 시프트 할당</a></h3> + +<p>오른쪽 시프트 할당 연산자는 변수의 비트를 오른쪽 피연산자의 값만큼 우측으로 이동하고, 그 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", "right shift operator", "#Right_shift", 1)}}를 참고하세요.</p> + +<h4 id="구문_9">구문</h4> + +<pre class="syntaxbox"><strong>연산자:</strong> x >>= y +<strong>의미:</strong> x = x >> y +</pre> + +<h4 id="예제_9">예제</h4> + +<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) +bar >>= 2; // 1 (00000000000000000000000000000001) + +var bar -5; // (-00000000000000000000000000000101) +bar >>= 2; // -2 (-00000000000000000000000000000010) +</pre> + +<h3 id="부호_없는_오른쪽_시프트_할당"><a name="Unsigned_right_shift_assignment">부호 없는 오른쪽 시프트 할당</a></h3> + +<p>부호 없는 오른쪽 시프트 할당 연산자는 변수의 비트를 오른쪽 피연산자의 값만큼 우측으로 이동하고, 그 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", " unsigned right shift operator", "#Unsigned_right_shift", 1)}}을 참고하세요.</p> + +<h4 id="구문_10">구문</h4> + +<pre class="syntaxbox"><strong>연산자:</strong> x >>>= y +<strong>의미:</strong> x = x >>> y +</pre> + +<h4 id="예제_10">예제</h4> + +<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) +bar >>>= 2; // 1 (00000000000000000000000000000001) + +var bar = -5; // (-00000000000000000000000000000101) +bar >>>= 2; // 1073741822 (00111111111111111111111111111110)</pre> + +<h3 id="비트_AND_할당"><a name="Bitwise_AND_assignment">비트 AND 할당</a></h3> + +<p>비트 AND 할당 연산자는 양쪽 피연산자의 이진 표현을 AND 연산한 후, 그 결과를 변수에 할당합니다. 자세한 내용은{{jsxref("Operators/Bitwise_Operators", "bitwise AND operator", "#Bitwise_AND", 1)}}을 참고하세요.</p> + +<h4 id="구문_11">구문</h4> + +<pre class="syntaxbox"><strong>연산자:</strong> x &= y +<strong>의미:</strong> x = x & y +</pre> + +<h4 id="예제_11">예제</h4> + +<pre class="brush: js">var bar = 5; +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +bar &= 2; // 0 +</pre> + +<h3 id="비트_XOR_할당"><a name="Bitwise_XOR_assignment">비트 XOR 할당</a></h3> + +<p>비트 XOR 할당 연산자는 양쪽 피연산자의 이진 표현을 XOR 연산한 후, 그 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", "bitwise XOR operator", "#Bitwise_XOR", 1)}}를 참고하세요.</p> + +<h4 id="구문_12">구문</h4> + +<pre class="syntaxbox"><strong>연산자:</strong> x ^= y +<strong>의미:</strong> x = x ^ y +</pre> + +<h4 id="예제_12">예제</h4> + +<pre class="brush: js">var bar = 5; +bar ^= 2; // 7 +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +// ----------------------------------- +// 7: 00000000000000000000000000000111 +</pre> + +<h3 id="비트_OR_할당"><a name="Bitwise_OR_assignment">비트 OR 할당</a></h3> + +<p>비트 OR 할당 연산자는 양쪽 피연산자의 이진 표현을 OR 연산한 후, 그 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", "bitwise OR operator", "#Bitwise_OR", 1)}}를 참고하세요.</p> + +<h4 id="문법">문법</h4> + +<pre class="syntaxbox"><strong>연산자:</strong> x |= y +<strong>의미:</strong> x = x | y +</pre> + +<h4 id="예제_13">예제</h4> + +<pre class="brush: js">var bar = 5; +bar |= 2; // 7 +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +// ----------------------------------- +// 7: 00000000000000000000000000000111 +</pre> + +<h2 id="예제_14">예제</h2> + +<h3 id="다른_할당_연산자를_갖는_왼쪽_피연산자">다른 할당 연산자를 갖는 왼쪽 피연산자</h3> + +<p>드물게, 할당 연산자(예: <code>x += y</code>)와 그 의미를 나타낸 표현(<code>x = x + y</code>)이 동일하지 않은 경우가 있습니다. 할당 연산자의 왼쪽 피연산자가 다른 할당 연산자를 포함할 때, 왼쪽 피연산자는 한 번만 평가됩니다. 예를 들면 다음과 같습니다.</p> + +<pre class="brush: js">a[i++] += 5 // i는 한 번만 평가됨 +a[i++] = a[i++] + 5 // i는 두 번 평가됨 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.operators.assignment")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">산술 연산자</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/async_function/index.html b/files/ko/web/javascript/reference/operators/async_function/index.html new file mode 100644 index 0000000000..d1ec146ca4 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/async_function/index.html @@ -0,0 +1,96 @@ +--- +title: async function 표현식 +slug: Web/JavaScript/Reference/Operators/async_function +translation_of: Web/JavaScript/Reference/Operators/async_function +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong><code>async function</code></strong> 키워드는 표현식 내에서 <code>async</code> 함수를 정의하기 위해 사용됩니다.</p> + +<p>또한 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function" title="The async function keyword can be used to define async functions inside expressions.">async function statement</a>을 사용하여 async 함수를 정의할 수 있습니다.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox">async function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { <em>statements </em>}</pre> + +<p>ES2015에서와 같이 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>를 사용해도 됩니다.</p> + +<h3 id="인수">인수</h3> + +<dl> + <dt><code><var>name</var></code></dt> + <dd>함수 이름. 생략가능하며 이경우함수는 <em>anonymous</em> 형식임 이름은 함수 몸체에 대해 지역적으로 사용.</dd> + <dt><code><var>paramN</var></code></dt> + <dd>함수에 전달될 인수의 이름.</dd> + <dt><code><var>statements</var></code></dt> + <dd>함수 몸체를 구성하는 명령문들.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p><code>async function</code> 표현식은 {{jsxref('Statements/async_function', '<code>async function</code> 선언')}} 문법과 유사하며, 거의 동일합니다. <code>async function</code> 표현식과 <code>async function</code> 선언문의 주요 차이점은 익명함수로써의 사용 여부로, <code>async function</code> 표현식은 함수 이름을 생략하면 익명함수를 만듭니다. <code>async function</code> 표현식은 {{Glossary("IIFE")}}(즉시실행함수)로 사용할 수 있습니다. <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions">functions</a></code>문서를 참고하세요.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Simple_example">Simple example</h3> + +<pre><code>function resolveAfter2Seconds(x) { + return new Promise(resolve => { + setTimeout(() => { + resolve(x); + }, 2000); + }); +}; + + +var add = async function(x) { // async function 표현식을 변수에 할당 + var a = await resolveAfter2Seconds(20); + var b = await resolveAfter2Seconds(30); + return x + a + b; +}; + +add(10).then(v => { + console.log(v); // 4초 뒤에 60 출력 +}); + + +(async function(x) { // async function 표현식을 IIFE로 사용 + var p_a = resolveAfter2Seconds(20); + var p_b = resolveAfter2Seconds(30); + return x + await p_a + await p_b; +})(10).then(v => { + console.log(v); // 2초 뒤에 60 출력 +});</code></pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Initial definition in ES2017.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{Compat("javascript.operators.async_function_expression")}} </div> + +<div id="compat-mobile"></div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Statements/async_function", "async function")}}</li> + <li>{{jsxref("AsyncFunction")}} object</li> + <li>{{jsxref("Operators/await", "await")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/await/index.html b/files/ko/web/javascript/reference/operators/await/index.html new file mode 100644 index 0000000000..00b5fd3eff --- /dev/null +++ b/files/ko/web/javascript/reference/operators/await/index.html @@ -0,0 +1,137 @@ +--- +title: await +slug: Web/JavaScript/Reference/Operators/await +translation_of: Web/JavaScript/Reference/Operators/await +--- +<div>{{jsSidebar("Operators")}}</div> + +<div><code>await</code>연산자는 {{jsxref("Promise")}}를 기다리기 위해 사용됩니다. 연산자는 {{jsxref("Statements/async_function", "async function")}} 내부에서만 사용할 수 있습니다.</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate">[<em>rv</em>] = await <em>expression</em>;</pre> + +<dl> + <dt><code>expression</code></dt> + <dd>{{jsxref("Promise")}} 혹은 기다릴 어떤 값입니다.</dd> + <dt><code>rv</code></dt> + <dd> + <p>{{jsxref("Promise")}}에 의해 만족되는 값이 반환됩니다. {{jsxref("Promise")}}가 아닌 경우에는 그 값 자체가 반환됩니다.</p> + </dd> +</dl> + +<h2 id="설명">설명</h2> + +<p><code>await</code> 문은 <code>Promise</code>가 fulfill되거나 <code>reject</code> 될 때까지 <code>async</code> 함수의 실행을 일시 정지하고, <code>Promise</code>가 fulfill되면 <code>async</code> 함수를 일시 정지한 부분부터 실행합니다. 이때 <code>await</code> 문의 반환값은 <code>Promise</code> 에서 fulfill된 값이 됩니다.</p> + +<p>만약 <code>Promise</code>가 <code>reject</code>되면, <code>await</code> 문은 <code>reject</code>된 값을 <code>throw</code>합니다.</p> + +<p><code>await</code> 연산자 다음에 나오는 문의 값이 <code>Promise</code>가 아니면 해당 값을 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve">resolved Promise</a>로 변환시킵니다.</p> + +<p>An <code>await</code> can split execution flow, allowing the caller of the <code>await</code>'s function to resume execution before the deferred continuation of the <code>await</code>'s function. After the <code>await</code> defers the continuation of its function, if this is the first <code>await</code> executed by the function, immediate execution also continues by returning to the function's caller a pending <code>Promise</code> for the completion of the <code>await</code>'s function and resuming execution of that caller.</p> + +<h2 id="예제">예제</h2> + +<p>만약 <code>Promise</code>가 <code>await</code>에 넘겨지면, <code>await</code>은 <code>Promise</code>가 fulfill되기를 기다렸다가, 해당 값을 리턴합니다.</p> + +<pre class="brush: js notranslate">function resolveAfter2Seconds(x) { + return new Promise(resolve => { + setTimeout(() => { + resolve(x); + }, 2000); + }); +} + +async function f1() { + var x = await resolveAfter2Seconds(10); + console.log(x); // 10 +} + +f1(); +</pre> + +<p>{{jsxref("Global_Objects/Promise/then", "Thenable objects")}} will be fulfilled just the same.</p> + +<pre class="notranslate"><code>async function f2() { + const thenable = { + then: function(resolve, _reject) { + resolve('resolved!') + } + }; + console.log(await thenable); // resolved! +} + +f2();</code></pre> + +<p>만약 값이 <code>Promise</code>가 아니라면, 해당 값은 <code>resolve</code>된 <code>Promise</code>로 변환되며 이를 기다립니다.</p> + +<pre class="brush: js notranslate">async function f2() { + var y = await 20; + console.log(y); // 20 +} +f2(); +</pre> + +<p>만약 <code>Promise</code>가 <code>reject</code>되면, <code>reject</code>된 값이 <code>throw</code>됩니다.</p> + +<pre class="brush: js notranslate">async function f3() { + try { + var z = await Promise.reject(30); + } catch(e) { + console.log(e); // 30 + } +} +f3(); +</pre> + +<p>try블럭 없이 rejected <code>Promise</code>다루기</p> + +<pre class="notranslate"><code>var response = await promisedFunction().catch((err) => { console.error(err); }); +// response will be undefined if the promise is rejected</code></pre> + +<h2 id="Specifications">Specifications</h2> + +<table> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("ESDraft", "#sec-async-function-definitions", "async functions")}}</td> + <td>{{Spec2("ESDraft")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("ES2018", "#sec-async-function-definitions", "async functions")}}</td> + <td>{{Spec2("ES2018")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("ES2017", "#sec-async-function-definitions", "async functions")}}</td> + <td>{{Spec2("ES2017")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> +<div> + + +<p>{{Compat("javascript.operators.await")}}</p> +</div> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Statements/async_function", "async function")}}</li> + <li>{{jsxref("Operators/async_function", "async function expression")}}</li> + <li>{{jsxref("AsyncFunction")}} object</li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/bitwise_operators/index.html b/files/ko/web/javascript/reference/operators/bitwise_operators/index.html new file mode 100644 index 0000000000..e94e176e08 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/bitwise_operators/index.html @@ -0,0 +1,540 @@ +--- +title: 비트 연산자 +slug: Web/JavaScript/Reference/Operators/Bitwise_Operators +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>비트 연산자</strong>는 피연산자를 10진수, 16진수, 8진수가 아니라, 32개의 비트(0과 1) 집합으로 취급합니다. 예를 들어, 10진수 9의 2진수 표기법은 1001입니다. 이렇게, 비트 연산자는 값의 2진수 표현을 사용해 연산하지만, 결과는 표준 JavaScript 숫자 값으로 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}</div> + + + +<p>다음은 JavaScript의 비트 연산자를 요약한 표입니다.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>연산자</th> + <th>사용방법</th> + <th>설명</th> + </tr> + <tr> + <td><a href="#Bitwise_AND">비트 AND</a></td> + <td><code>a & b</code></td> + <td>피연산자를 비트로 바꿨을 때 각각 대응하는 비트가 모두 1이면 그 비트값에 1을 반환.</td> + </tr> + <tr> + <td><a href="#Bitwise_OR">비트 OR</a></td> + <td><code>a | b</code></td> + <td>피연산자를 비트로 바꿨을 때 각각 대응하는 비트가 모두 1이거나 한 쪽이 1이면 1을 반환.</td> + </tr> + <tr> + <td><a href="#Bitwise_XOR">비트 XOR</a></td> + <td><code>a ^ b</code></td> + <td>피연산자를 비트로 바꿨을 때 대응하는 비트가 서로 다르면 1을 반환.</td> + </tr> + <tr> + <td><a href="#Bitwise_NOT">비트 NOT</a></td> + <td><code>~ a</code></td> + <td>피연산자의 반전된 값을 반환.</td> + </tr> + <tr> + <td><a href="#Left_shift">왼쪽 시프트</a></td> + <td><code>a << b</code></td> + <td>Shifts <code>a</code> in binary representation <code>b</code> (< 32) bits to the left, shifting in zeros from the right.</td> + </tr> + <tr> + <td><a href="#Right_shift">부호 유지 오른쪽 시프트</a></td> + <td><code>a >> b</code></td> + <td>Shifts <code>a</code> in binary representation <code>b</code> (< 32) bits to the right, discarding bits shifted off.</td> + </tr> + <tr> + <td><a href="#Unsigned_right_shift">부호 버림 오른쪽 시프트</a></td> + <td><code>a >>> b</code></td> + <td>Shifts <code>a</code> in binary representation <code>b</code> (< 32) bits to the right, discarding bits shifted off, and shifting in zeros from the left.</td> + </tr> + </tbody> +</table> + +<h2 id="부호_있는_32비트_정수">부호 있는 32비트 정수</h2> + +<p>The operands of all bitwise operators are converted to signed 32-bit integers in two's <a href="https://en.wikipedia.org/wiki/Method_of_complements">complement format</a>, except for zero-fill right shift which results in an unsigned 32-bit integer.</p> + +<p><em>Two's complement format</em> means that a number's negative counterpart (e.g. <code>5</code> vs. <code>-5</code>) is all the number's bits inverted (bitwise NOT of the number, or <em>ones' complement</em> of the number) plus one.</p> + +<p>For example, the following encodes the integer <code>314</code>:</p> + +<pre>00000000000000000000000100111010 +</pre> + +<p>The following encodes <code>~314</code>, i.e. the one's complement of <code>314</code>:</p> + +<pre>11111111111111111111111011000101 +</pre> + +<p>Finally, the following encodes <code>-314,</code> i.e. the two's complement of <code>314</code>:</p> + +<pre>11111111111111111111111011000110 +</pre> + +<p>The two's complement guarantees that the left-most bit is 0 when the number is positive and 1 when the number is negative. Thus, it is called the <em>sign bit</em>.</p> + +<p>The number <code>0</code> is the integer that is composed completely of 0 bits.</p> + +<pre>0 (base 10) = 00000000000000000000000000000000 (base 2) +</pre> + +<p>The number <code>-1</code> is the integer that is composed completely of 1 bits.</p> + +<pre>-1 (base 10) = 11111111111111111111111111111111 (base 2) +</pre> + +<p>The number <code>-2147483648</code> (hexadecimal representation: <code>-0x80000000</code>) is the integer that is composed completely of 0 bits except the first (left-most) one.</p> + +<pre>-2147483648 (base 10) = 10000000000000000000000000000000 (base 2) +</pre> + +<p>The number <code>2147483647</code> (hexadecimal representation: <code>0x7fffffff</code>) is the integer that is composed completely of 1 bits except the first (left-most) one.</p> + +<pre>2147483647 (base 10) = 01111111111111111111111111111111 (base 2) +</pre> + +<p>The numbers <code>-2147483648</code> and <code>2147483647</code> are the minimum and the maximum integers representable throught a 32bit signed number.</p> + +<h2 id="비트_논리_연산자">비트 논리 연산자</h2> + +<p>비트 논리 연산자는 다음과 같이 사용됩니다.</p> + +<ul> + <li>피연산자는 32비트 정수로 변환되고, 이진법으로 표현됩니다 (0과 1).</li> + <li>이진법으로 표현된 첫 번째 피연산자는 두 번째 피연산자와 쌍을 이룹니다: 첫 번째는 첫 번째 비트끼리, 두 번째는 두 번째 비트끼리...</li> + <li>연산자는 각각의 비트쌍에 적용되고, 결과 또한 이진법으로 구성됩니다.</li> +</ul> + +<h3 id="비트_AND"><a id="Bitwise_AND" name="Bitwise_AND">& (비트 AND)</a></h3> + +<p>비트 연산자 AND를 비트 쌍으로 실행합니다.</p> + +<p>Performs the AND operation on each pair of bits. <code>a</code> AND <code>b</code> yields 1 only if both <code>a</code> and <code>b</code> are 1. The truth table for the AND operation is:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a AND b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10) +</pre> + +<p>Bitwise ANDing any number <code>x</code> with <code>0</code> yields <code>0</code>. <span style="letter-spacing: -0.00278rem;">Bitwise ANDing any number <code>x</code> with <code>-1</code> yields <code>x</code>.</span></p> + +<h3 id="비트_OR"><a id="Bitwise_OR" name="Bitwise_OR">| (비트 OR)</a></h3> + +<p>Performs the OR operation on each pair of bits. <code>a</code> OR <code>b</code> yields 1 if either <code>a</code> or <code>b</code> is 1. The truth table for the OR operation is:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a OR b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10) +</pre> + +<p>Bitwise ORing any number x with 0 yields x.</p> + +<p>Bitwise ORing any number x with -1 yields -1.</p> + +<h3 id="비트_XOR"><a id="Bitwise_XOR" name="Bitwise_XOR">^ (비트 XOR)</a></h3> + +<p>Performs the XOR operation on each pair of bits. <code>a</code> XOR <code>b</code> yields 1 if <code>a</code> and <code>b</code> are different. The truth table for the XOR operation is:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a XOR b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10) +</pre> + +<p>Bitwise XORing any number x with 0 yields x.</p> + +<p>Bitwise XORing any number x with -1 yields ~x.</p> + +<h3 id="비트_NOT"><a id="Bitwise_NOT" name="Bitwise_NOT">~ (비트 NOT)</a></h3> + +<p>Performs the NOT operator on each bit. NOT <code>a</code> yields the inverted value (a.k.a. one's complement) of <code>a</code>. The truth table for the NOT operation is:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">NOT a</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) + -------------------------------- +~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10) +</pre> + +<p>Bitwise NOTing any number x yields -(x + 1). For example, ~5 yields -6.</p> + +<h2 id="비트_시프트_연산자">비트 시프트 연산자</h2> + +<p>The bitwise shift operators take two operands: the first is a quantity to be shifted, and the second specifies the number of bit positions by which the first operand is to be shifted. The direction of the shift operation is controlled by the operator used.</p> + +<p>Shift operators convert their operands to 32-bit integers in big-endian order and return a result of the same type as the left operand. The right operand should be less than 32, but if not only the low five bits will be used.</p> + +<h3 id="<<_Left_shift"><a id="Left_shift" name="Left_shift"><< (Left shift)</a></h3> + +<p>This operator shifts the first operand the specified number of bits to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right.</p> + +<p>For example, <code>9 << 2</code> yields 36:</p> + +<pre> 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- +9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10) +</pre> + +<p>Bitwise shifting any number <strong>x</strong> to the left by <strong>y</strong> bits yields <strong>x * 2^y</strong>.</p> + +<h3 id=">>_Sign-propagating_right_shift"><a id="Right_shift" name="Right_shift">>> (Sign-propagating right shift)</a></h3> + +<p>This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Copies of the leftmost bit are shifted in from the left. Since the new leftmost bit has the same value as the previous leftmost bit, the sign bit (the leftmost bit) does not change. Hence the name "sign-propagating".</p> + +<p>For example, <code>9 >> 2</code> yields 2:</p> + +<pre> 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- +9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) +</pre> + +<p>Likewise, <code>-9 >> 2</code> yields -3, because the sign is preserved:</p> + +<pre> -9 (base 10): 11111111111111111111111111110111 (base 2) + -------------------------------- +-9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10) +</pre> + +<h3 id=">>>_Zero-fill_right_shift"><a id="Unsigned_right_shift" name="Unsigned_right_shift">>>> (Zero-fill right shift)</a></h3> + +<p>This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Zero bits are shifted in from the left. The sign bit becomes 0, so the result is always non-negative.</p> + +<p>For non-negative numbers, zero-fill right shift and sign-propagating right shift yield the same result. For example, <code>9 >>> 2</code> yields 2, the same as <code>9 >> 2</code>:</p> + +<pre> 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- +9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) +</pre> + +<p>However, this is not the case for negative numbers. For example, <code>-9 >>> 2</code> yields 1073741821, which is different than <code>-9 >> 2</code> (which yields -3):</p> + +<pre> -9 (base 10): 11111111111111111111111111110111 (base 2) + -------------------------------- +-9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10) +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="Flags_and_bitmasks">Flags and bitmasks</h3> + +<p>The bitwise logical operators are often used to create, manipulate, and read sequences of <em>flags</em>, which are like binary variables. Variables could be used instead of these sequences, but binary flags take much less memory (by a factor of 32).</p> + +<p>Suppose there are 4 flags:</p> + +<ul> + <li>flag A: we have an ant problem</li> + <li>flag B: we own a bat</li> + <li>flag C: we own a cat</li> + <li>flag D: we own a duck</li> +</ul> + +<p>These flags are represented by a sequence of bits: DCBA. When a flag is <em>set</em>, it has a value of 1. When a flag is <em>cleared</em>, it has a value of 0. Suppose a variable <code>flags</code> has the binary value 0101:</p> + +<pre class="brush: js">var flags = 5; // binary 0101 +</pre> + +<p>This value indicates:</p> + +<ul> + <li>flag A is true (we have an ant problem);</li> + <li>flag B is false (we don't own a bat);</li> + <li>flag C is true (we own a cat);</li> + <li>flag D is false (we don't own a duck);</li> +</ul> + +<p>Since bitwise operators are 32-bit, 0101 is actually 00000000000000000000000000000101, but the preceding zeroes can be neglected since they contain no meaningful information.</p> + +<p>A <em>bitmask</em> is a sequence of bits that can manipulate and/or read flags. Typically, a "primitive" bitmask for each flag is defined:</p> + +<pre class="brush: js">var FLAG_A = 1; // 0001 +var FLAG_B = 2; // 0010 +var FLAG_C = 4; // 0100 +var FLAG_D = 8; // 1000 +</pre> + +<p>New bitmasks can be created by using the bitwise logical operators on these primitive bitmasks. For example, the bitmask 1011 can be created by ORing FLAG_A, FLAG_B, and FLAG_D:</p> + +<pre class="brush: js">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011 +</pre> + +<p>Individual flag values can be extracted by ANDing them with a bitmask, where each bit with the value of one will "extract" the corresponding flag. The bitmask <em>masks</em> out the non-relevant flags by ANDing with zeros (hence the term "bitmask"). For example, the bitmask 0100 can be used to see if flag C is set:</p> + +<pre class="brush: js">// if we own a cat +if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true + // do stuff +} +</pre> + +<p>A bitmask with multiple set flags acts like an "either/or". For example, the following two are equivalent:</p> + +<pre class="brush: js">// if we own a bat or we own a cat +if ((flags & FLAG_B) || (flags & FLAG_C)) { // (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true + // do stuff +} +</pre> + +<pre class="brush: js">// if we own a bat or cat +var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110 +if (flags & mask) { // 0101 & 0110 => 0100 => true + // do stuff +} +</pre> + +<p>Flags can be set by ORing them with a bitmask, where each bit with the value one will set the corresponding flag, if that flag isn't already set. For example, the bitmask 1100 can be used to set flags C and D:</p> + +<pre class="brush: js">// yes, we own a cat and a duck +var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100 +flags |= mask; // 0101 | 1100 => 1101 +</pre> + +<p>Flags can be cleared by ANDing them with a bitmask, where each bit with the value zero will clear the corresponding flag, if it isn't already cleared. This bitmask can be created by NOTing primitive bitmasks. For example, the bitmask 1010 can be used to clear flags A and C:</p> + +<pre class="brush: js">// no, we don't have an ant problem or own a cat +var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010 +flags &= mask; // 1101 & 1010 => 1000 +</pre> + +<p>The mask could also have been created with <code>~FLAG_A & ~FLAG_C</code> (De Morgan's law):</p> + +<pre class="brush: js">// no, we don't have an ant problem, and we don't own a cat +var mask = ~FLAG_A & ~FLAG_C; +flags &= mask; // 1101 & 1010 => 1000 +</pre> + +<p>Flags can be toggled by XORing them with a bitmask, where each bit with the value one will toggle the corresponding flag. For example, the bitmask 0110 can be used to toggle flags B and C:</p> + +<pre class="brush: js">// if we didn't have a bat, we have one now, and if we did have one, bye-bye bat +// same thing for cats +var mask = FLAG_B | FLAG_C; +flags = flags ^ mask; // 1100 ^ 0110 => 1010 +</pre> + +<p>Finally, the flags can all be flipped with the NOT operator:</p> + +<pre class="brush: js">// entering parallel universe... +flags = ~flags; // ~1010 => 0101 +</pre> + +<h3 id="Conversion_snippets">Conversion snippets</h3> + +<p>Convert a binary <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">string</a></code> to a decimal <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">number</a></code>:</p> + +<pre class="brush: js">var sBinString = "1011"; +var nMyNumber = parseInt(sBinString, 2); +alert(nMyNumber); // prints 11, i.e. 1011 +</pre> + +<p>Convert a decimal <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">number</a></code> to a binary <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">string</a></code>:</p> + +<pre class="brush: js">var nMyNumber = 11; +var sBinString = nMyNumber.toString(2); +alert(sBinString); // prints 1011, i.e. 11 +</pre> + +<h3 id="Automate_Mask_Creation">Automate Mask Creation</h3> + +<p>If you have to create many masks from some <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code> values, you can automatize the process:</p> + +<pre class="brush: js">function createMask () { + var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length; + for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++); + return nMask; +} +var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011 +var mask2 = createMask(false, false, true); // 4, i.e.: 0100 +var mask3 = createMask(true); // 1, i.e.: 0001 +// etc. + +alert(mask1); // prints 11, i.e.: 1011 +</pre> + +<h3 id="Reverse_algorithm_an_array_of_booleans_from_a_mask">Reverse algorithm: an array of booleans from a mask</h3> + +<p>If you want to create an <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">array</a></code> of <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">booleans</a></code> from a mask you can use this code:</p> + +<pre class="brush: js">function arrayFromMask (nMask) { + // nMask must be between -2147483648 and 2147483647 + if (nMask > 0x7fffffff || nMask < -0x80000000) { throw new TypeError("arrayFromMask - out of range"); } + for (var nShifted = nMask, aFromMask = []; nShifted; aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1); + return aFromMask; +} + +var array1 = arrayFromMask(11); +var array2 = arrayFromMask(4); +var array3 = arrayFromMask(1); + +alert("[" + array1.join(", ") + "]"); +// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011 +</pre> + +<p>You can test both algorithms at the same time…</p> + +<pre class="brush: js">var nTest = 19; // our custom mask +var nResult = createMask.apply(this, arrayFromMask(nTest)); + +alert(nResult); // 19 +</pre> + +<p>For didactic purpose only (since there is the <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Number/toString" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number/toString">Number.toString(2)</a></code> method), we show how it is possible to modify the <code>arrayFromMask</code> algorithm in order to create a <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">string</a></code> containing the binary representation of a <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">number</a></code>, rather than an <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">array</a></code> of <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">booleans</a></code>:</p> + +<pre class="brush: js">function createBinaryString (nMask) { + // nMask must be between -2147483648 and 2147483647 + for (var nFlag = 0, nShifted = nMask, sMask = ""; nFlag < 32; nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1); + return sMask; +} + +var string1 = createBinaryString(11); +var string2 = createBinaryString(4); +var string3 = createBinaryString(1); + +alert(string1); +// prints 00000000000000000000000000001011, i.e. 11 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-bitwise-not-operator', 'Bitwise NOT Operator')}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-binary-bitwise-operators', 'Binary Bitwise Operators')}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators', 'Bitwise Shift Operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.operators.bitwise")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/%EB%85%BC%EB%A6%AC_%EC%97%B0%EC%82%B0%EC%9E%90(Logical_Operators)">논리 연산자</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/class/index.html b/files/ko/web/javascript/reference/operators/class/index.html new file mode 100644 index 0000000000..d15b532fbc --- /dev/null +++ b/files/ko/web/javascript/reference/operators/class/index.html @@ -0,0 +1,100 @@ +--- +title: class 식 +slug: Web/JavaScript/Reference/Operators/class +tags: + - ECMAScript 2015 + - Expression + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/class +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>class 표현식</strong>은 ECMAScript 2015 (ES6)에서 클래스를 정의하는 한 방법입니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/function">function 식</a>과 비슷하게, class 식은 기명(named) 또는 익명(unnamed)일 수 있습니다. 기명인 경우, 클래스명은 클래스 본체(body)에서만 지역(local)입니다. JavaScript 클래스는 프로토타입(원형) 기반 상속을 사용합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-classexpression.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate">var MyClass = class <em>[className]</em> [extends] { + // class body +};</pre> + +<h2 id="설명">설명</h2> + +<p>class 식은 <a href="/ko/docs/Web/JavaScript/Reference/Statements/class">class 문</a>과 구문이 비슷합니다. 그러나, class 식의 경우 클래스명("binding identifier")을 생략할 수 있는데 class 문으로는 할 수 없습니다.</p> + +<p>class 문과 같이, class 식의 본체는 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode" title="strict mode">엄격 모드</a>에서 실행됩니다.</p> + + + +<h2 id="예제">예제</h2> + +<h3 id="간단한_class_식">간단한 class 식</h3> + +<p>이게 바로 변수 "Foo"를 사용하여 참조할 수 있는 간단한 익명 class 식입니다.</p> + +<pre class="brush: js notranslate">var Foo = class { + constructor() {} + bar() { + return "Hello World!"; + } +}; + +var instance = new Foo(); +instance.bar(); // "Hello World!" +Foo.name; // "" +</pre> + +<h3 id="Named_class_식">Named class 식</h3> + +<p>당신이 클래스 몸통 내에서 현재 클래스를 참조하고 싶다면, 유명 class 식을 만들 수 있습니다. 이 이름은 오직 class 식 자체 범위에서만 볼 수 있습니다.</p> + +<pre class="brush: js notranslate">var Foo = class NamedFoo { + constructor() {} + whoIsThere() { + return NamedFoo.name; + } +} +var bar = new Foo(); +bar.whoIsThere(); // "NamedFoo" +NamedFoo.name; // ReferenceError: NamedFoo가 정의되지 않음 +Foo.name; // "NamedFoo" +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.operators.class")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/function"><code>function</code> 식</a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> 문</a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Classes">Classes</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/comma_operator/index.html b/files/ko/web/javascript/reference/operators/comma_operator/index.html new file mode 100644 index 0000000000..d2c4caae0e --- /dev/null +++ b/files/ko/web/javascript/reference/operators/comma_operator/index.html @@ -0,0 +1,91 @@ +--- +title: 쉼표 연산자 +slug: Web/JavaScript/Reference/Operators/Comma_Operator +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/Comma_Operator +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>쉼표 연산자</strong>는 각각의 피연산자를 왼쪽에서 오른쪽 순서로 평가하고, 마지막 연산자의 값을 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-commaoperators.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><em>expr1</em>, <em>expr2, expr3...</em></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>expr1</code>, <code>expr2, expr3...</code></dt> + <dd>아무 표현식.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>단일 표현식을 요구하는 곳에 복수의 표현식을 사용하고 싶을 때 쉼표 연산자를 사용할 수 있습니다. 가장 흔히 사용되는 곳은 <code>for</code> 반복문에 다수의 매개변수를 제공할 때입니다.</p> + +<p>쉼표 연산자는 배열, 객체, 함수의 매개변수와 호출 인수에서 사용하는 쉼표와는 전혀 다릅니다.</p> + +<h2 id="예제">예제</h2> + +<p><code>a</code>를 한 행에 10개의 요소를 가진 2차원 배열이라고 가정할 때, 아래 예제는 쉼표 연산자를 사용해 한 번에 <code>i</code>는 증가시키고 <code>j</code>는 감소시킵니다.</p> + +<p>다음 코드는 2차원 배열의 대각선에 위치하는 요소의 값을 출력합니다.</p> + +<pre class="brush:js;highlight:[1]">for (var i = 0, j = 9; i <= 9; i++, j--) + console.log("a[" + i + "][" + j + "] = " + a[i][j]); +</pre> + +<p>쉼표 연산자를 할당에 사용하면, 할당 연산이 표현식에 포함되지 않아 예상한 결과와는 다소 다를 수 있습니다. 다음 예제에서, <code>a</code>는 <code>b = 3</code>의 값(3)을 할당받지만, <code>c = 4</code> 표현식 역시 평가되어 콘솔에 기록됩니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">연산자 우선순위와 결합성</a> 때문입니다.</p> + +<pre class="brush: js">var a, b, c; + +a = b = 3, c = 4; // 콘솔에는 4를 반환 +console.log(a); // 3 (제일 왼쪽) + +var x, y, z; + +x = (y = 5, z = 6); // 콘솔에는 6을 반환 +console.log(x); // 6 (제일 오른쪽) +</pre> + +<h3 id="연산_후_반환">연산 후 반환</h3> + +<p>쉼표 연산자를 사용하는 다른 방법은 값을 반환하기 전에 연산을 수행하는 것입니다. 쉼표 연산자는 마지막 표현식의 평가 결과만 반환하지만, 이전 피연산자에 대해서도 평가는 수행하므로 다음과 같은 코드를 작성할 수 있습니다.</p> + +<pre class="brush: js">function myFunc () { + var x = 0; + + return (x += 1, x); // ++x 와 같은 효과 +}</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.operators.comma")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/for"><code>for</code> 반복문</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/comparison_operators/index.html b/files/ko/web/javascript/reference/operators/comparison_operators/index.html new file mode 100644 index 0000000000..ecfd46d6e5 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/comparison_operators/index.html @@ -0,0 +1,215 @@ +--- +title: 비교 연산자 +slug: Web/JavaScript/Reference/Operators/Comparison_Operators +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>JavaScript는 엄격한 비교와 형변환 비교 두 가지의 비교 방법을 모두 가지고 있습니다. 엄격(일치) 비교(<code>===</code>)는 두 피연산자가 같은 자료형에, 그 내용도 일치해야만 참입니다. 추상(동등) 비교(<code>==</code>)는 비교 전에 두 피연산자를 동일한 자료형으로 변환합니다. 관계 추상 비교(<code><=</code>)의 경우 {{glossary("primitive", "원시값")}}으로 바꾸고, 같은 자료형으로 다시 바꾼후 비교를 수행합니다.</p> + +<p>문자열의 경우 {{glossary("unicode", "유니코드")}} 값을 사용한 사전순으로 비교합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-comparisonoperators.html")}}</div> + + + +<p>비교 연산의 특징은 다음과 같습니다.</p> + +<ul> + <li>두 문자열이 같은 문자 시퀀스로 구성되고, 같은 길이를 가지며, 같은 위치에 같은 문자가 존재하면 일치합니다.</li> + <li>두 숫자는 숫자로서 같은 값(같은 숫자 값)이면 일치합니다. {{jsxref("NaN")}}은 자기 자신을 포함한 그 무엇과도 동등하지 않습니다. <code>+0</code>과 <code>-0</code>은 서로 일치합니다.</li> + <li>두 불리언은 둘 다 <code>true</code>거나 <code>false</code>이면 일치합니다.</li> + <li>서로 다른 두 객체는 절대 일치하지도, 동등하지도 않습니다.</li> + <li>객체를 비교하는 표현식은 두 피연산자가 동일한 객체를 참조하는 경우에만 참입니다.</li> + <li>{{jsxref("null")}}과 {{jsxref("undefined")}}는 자기 자신과 일치하며, 서로 동등합니다.</li> +</ul> + +<h2 id="동치_연산자">동치 연산자</h2> + +<h3 id="동등_연산자"><a name="Equality">동등 연산자 (==)</a></h3> + +<p>동등 연산자는 두 피연산자의 자료형이 같지 않은 경우 같아지도록 변환한 후, 엄격 비교를 수행합니다. 피연산자가 모두 객체라면, JavaScript는 내부 참조를 보고, 둘 다 메모리의 같은 객체를 바라보고 있는지 판별합니다.</p> + +<h4 id="구문">구문</h4> + +<pre class="syntaxbox">x == y +</pre> + +<h4 id="예제">예제</h4> + +<pre class="brush: js"> 1 == 1 // true + "1" == 1 // true + 1 == '1' // true + 0 == false // true + 0 == null // false + + 0 == undefined // false +null == undefined // true +</pre> + +<h3 id="부등_연산자_!"><a name="Inequality">부등 연산자 (!=)</a></h3> + +<p>부등 연산자는 두 피연산자가 같지 않은 경우 참을 반환합니다. 피연산자의 자료형이 일치하지 않는 경우 적절한 자료형으로의 변환을 시도합니다. 피연산자가 모두 객체라면, JavaScript는 내부 참조를 보고, 서로 메모리의 다른 객체를 바라보고 있는지 판별합니다.</p> + +<h4 id="구문_2">구문</h4> + +<pre class="syntaxbox">x != y</pre> + +<h4 id="예제_2">예제</h4> + +<pre class="brush: js">1 != 2 // true +1 != "1" // false +1 != '1' // false +1 != true // false +0 != false // false +</pre> + +<h3 id="일치_연산자"><a name="Identity">일치 연산자 (===)</a></h3> + +<p>일치 연산자는 자료형 변환 없이 두 연산자가 엄격히 같은지 판별합니다.</p> + +<h4 id="구문_3">구문</h4> + +<pre class="syntaxbox">x === y</pre> + +<h4 id="예제_3">예제</h4> + +<pre class="brush: js ">3 === 3 // true +3 === '3' // false</pre> + +<h3 id="불일치_연산자_!"><a name="Nonidentity">불일치 연산자 (!==)</a></h3> + +<p>일치 연산자는 두 연산자가 같지 않거나, 같은 자료형이 아닐 때 참을 반환합니다.</p> + +<h4 id="구문_4">구문</h4> + +<pre class="syntaxbox">x !== y</pre> + +<h4 id="예제_4">예제</h4> + +<pre class="brush: js">3 !== '3' // true +4 !== 3 // true +</pre> + +<h2 id="관계_연산자">관계 연산자</h2> + +<p>이 항목의 모든 연산자는 비교 전에 피연산자를 {{glossary("primitive", "원시값")}}으로 <a href="/ko/docs/Glossary/Type_coercion">변환</a>합니다. 둘 다 문자열이 되는 경우 사전순으로 비교하고, 그렇지 않으면 숫자로 변환합니다. {{jsxref("NaN")}}과의 비교는 항상 <code>false</code>를 반환합니다.</p> + +<h3 id="초과_연산자_>"><a name="Greater_than_operator">초과 연산자 (>)</a></h3> + +<p>초과 연산자는 왼쪽 피연산자가 오른쪽 피연산자보다 큰 경우 참을 반환합니다.</p> + +<h4 id="구문_5">구문</h4> + +<pre class="syntaxbox">x > y</pre> + +<h4 id="예제_5">예제</h4> + +<pre class="brush: js">4 > 3 // true +</pre> + +<h3 id="이상_연산자_>"><a name="Greater_than_or_equal_operator">이상 연산자 (>=)</a></h3> + +<p>이상 연산자는 왼쪽 피연산자가 오른쪽 피연산자보다 크거나 같으면 참을 반환합니다.</p> + +<h4 id="구문_6">구문</h4> + +<pre class="syntaxbox"> x >= y</pre> + +<h4 id="예제_6">예제</h4> + +<pre class="brush: js">4 >= 3 // true +3 >= 3 // true +</pre> + +<h3 id="미만_연산자_<"><a name="Less_than_operator">미만 연산자 (<)</a></h3> + +<p>미만 연산자는 왼쪽 피연산자가 오른쪽 피연산자보다 작은 경우 참을 반환합니다.</p> + +<h4 id="구문_7">구문</h4> + +<pre class="syntaxbox">x < y</pre> + +<h4 id="예제_7">예제</h4> + +<pre class="brush: js">3 < 4 // true</pre> + +<h3 id="이하_연산자_<"><a id="Less_than_or_equal_operator" name="Less_than_or_equal_operator">이하 연산자 (<=)</a></h3> + +<p>이하 연산자는 왼쪽 피연산자가 오른쪽 피연산자보다 작거나 같으면 참을 반환합니다.</p> + +<h4 id="구문_8">구문</h4> + +<pre class="syntaxbox"> x <= y</pre> + +<h4 id="예제_8">예제</h4> + +<pre class="brush: js">3 <= 4 // true +</pre> + +<h2 id="동치_연산자_사용하기">동치 연산자 사용하기</h2> + +<p>표준 동치, 동등 연산자(<code>==</code>, <code>!=</code>)는 두 피연산자를 비교하기 위해 <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">추상 동치 비교 알고리즘</a>(Abstract Equlity Comparison Algorithm)을 사용합니다. 피연산자 간 자료형이 일치하지 않으면 우선 변환을 시도합니다. 예를 들어 표현식 <code>5 == '5'</code>에서는 비교 전 오른쪽 문자열을 {{jsxref("Number")}}로 변환합니다.</p> + +<p>엄격 동치, 일치 연산자(<code>===</code>, <code>!==</code>)는 <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">엄격 동치 비교 알고리즘</a>(Strict Equality Comparison Algorithm)을 사용하며, 같은 자료형을 가진 피연산자를 비교하기 위해 사용합니다. 피연산자 간 자료형이 일치하지 않으면 항상 <code>false</code>이므로, <code>5 !== '5'</code>입니다.</p> + +<p>피연산자의 값은 물론 특정 자료형이어야 하는 경우 일치 연산자를 사용하세요. 그렇지 않은 경우 형변환을 자동으로 해주는 동등 연산자를 사용할 수도 있습니다.</p> + +<p>비교 과정에 자료형 변환이 필요한 경우 JavaScript는 {{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}}, {{jsxref("Object")}} 자료형을 다음과 같이 변환합니다.</p> + +<ul> + <li>숫자와 문자열을 비교할 땐 문자열을 숫자로 변환합니다. 우선, 문자열에서 수학적 값을 도출합니다. 그 후 가장 가까운 <code>Number</code> 자료형 값으로 반올림합니다.</li> + <li>하나의 연산자가 <code>Boolean</code>인 경우, <code>true</code>는 <code>1</code>, <code>false</code>는 <code>0</code>으로 변환합니다.</li> + <li>객체를 문자열이나 숫자와 비교하는 경우, JavaScript는 객체의 기본값을 사용합니다. 연산자는 우선 객체의 <code>valueOf()</code> 또는 <code>toString()</code> 메서드를 사용해 문자열 혹은 숫자 값을 받으려 시도합니다. 실패할 경우 런타임 오류가 발생합니다.</li> + <li>객체를 원시값과 비교하는 경우에만 객체의 변환이 발생합니다. 두 연산자가 모두 객체인 경우 변환하지 않으며, 둘 다 같은 객체를 참조하는 경우 참을 반환합니다.</li> +</ul> + +<div class="note"><strong>참고:</strong> <code>String</code> 객체는 자료형 객체지, 문자열이 아닙니다! <code>String</code> 객체는 거의 쓰이지 않으며, 이런 성질로 인해 아래의 결과는 예상치 못한 값일 수 있습니다.</div> + +<pre class="brush:js">// true as both operands are type String (i.e. string primitives): +'foo' === 'foo' + +var a = new String('foo'); +var b = new String('foo'); + +// false as a and b are type Object and reference different objects +a == b + +// false as a and b are type Object and reference different objects +a === b + +// true as a and 'foo' are of different type and, the Object (a) +// is converted to String 'foo' before comparison +a == 'foo'</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Status</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality Operators')}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.operators.comparison")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Object.is()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li><a href="/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness">동치 비교와 동일성</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/conditional_operator/index.html b/files/ko/web/javascript/reference/operators/conditional_operator/index.html new file mode 100644 index 0000000000..90f59ea4cd --- /dev/null +++ b/files/ko/web/javascript/reference/operators/conditional_operator/index.html @@ -0,0 +1,193 @@ +--- +title: 삼항 조건 연산자 +slug: Web/JavaScript/Reference/Operators/Conditional_Operator +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>조건부 삼항 연산자</strong>는 JavaScript에서 세 개의 피연산자를 취할 수 있는 유일한 연산자입니다. 보통 <a href="/ko/docs/Web/JavaScript/Reference/Statements/if...else"><code>if</code></a> 명령문의 단축 형태로 쓰입니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-conditionaloperators.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate"><em>condition</em> ? <em>exprIfTrue</em> : <em>exprIfFalse</em> </pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>condition</code></dt> + <dd>An expression whose value is used as a condition.</dd> + <dt><code>exprIfTrue</code></dt> + <dd>An expression which is evaluated if the <code>condition</code> evaluates to a {{Glossary("truthy")}} value (one which equals or can be converted to <code>true</code>).</dd> + <dt><code>exprIfFalse</code></dt> + <dd>An expression which is executed if the <code>condition</code> is {{Glossary("falsy")}} (that is, has a value which can be converted to <code>false</code>).</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p><font face="Open Sans, Arial, sans-serif"><code>condition</code>이 </font><code>true</code>이면, 연산자는 <code>expr1</code>의 값을 반환하며, 반대의 경우 <code>expr2</code>를 반환한다.</p> + +<h2 id="예제">예제</h2> + +<p>여러분이 술을 마실수 있는지 확인할 수 있는 간단한 예제가 여기 있습니다.</p> + +<pre class="notranslate"><code>var age = 29; +var canDrinkAlcohol = (age > 19) ? "True, over 19" : "False, under 19"; +console.log(canDrinkAlcohol); // "True, over 19"</code> +</pre> + +<p>isMember 변수의 값을 기준으로 다른 메시지를 보여주고자 한다면, 다음과 같이 표현할 수 있다.</p> + +<pre class="brush: js notranslate">"The fee is " + (isMember ? "$2.00" : "$10.00") +</pre> + +<p>또한 다음과 같이 삼항(ternary)의 결과에 따라 변수를 할당할 수도 있다.</p> + +<pre class="brush: js notranslate">var elvisLives = Math.PI > 4 ? "Yep" : "Nope";</pre> + +<p>다음의 예제처럼, 다중 삼항(ternary) 평가도 가능하다(주의: 조건 연산은 우측부터 그룹핑 됩니다.)</p> + +<pre class="brush: js notranslate">var firstCheck = false, + secondCheck = false, + access = firstCheck ? "Access denied" : secondCheck ? "Access denied" : "Access granted"; + +console.log( access ); // logs "Access granted"</pre> + +<p>또한 다중 조건 IF 문과 같은 방식으로 여러개의 조건을 사용할 수도 있습니다.</p> + +<pre class="notranslate"><code>var condition1 = true, + condition2 = false, + access = condition1 ? (condition2 ? "true true": "true false") : (condition2 ? "false true" : "false false"); + +console.log(access); // logs "true false"</code></pre> + +<p>참고 : 괄호는 필수는 아니며 기능에 영향을주지 않습니다. 결과가 어떻게 처리되는지 시각화하는 데 도움이됩니다.</p> + +<p>삼항(ternary) 평가는 다른 연산을 하기 위해 쓸 수도 있습니다.</p> + +<pre class="brush: js notranslate">var stop = false, age = 16; + +age > 18 ? location.assign("continue.html") : stop = true; +</pre> + +<p>하나의 케이스 당 둘 이상의 단일 작업을 수행하려면 쉼표로 구분하고 괄호로 묶으세요.</p> + +<pre class="brush: js notranslate">var stop = false, age = 23; + +age > 18 ? ( + alert("OK, you can go."), + location.assign("continue.html") +) : ( + stop = true, + alert("Sorry, you are much too young!") +); +</pre> + +<p>또한, 값을 할당하는 동안 하나 이상의 연산도 가능합니다. 이 경우에, 괄호 안의 값중 마지막 쉼표 (,) 다음의 값이 최종 할당 값이 됩니다.</p> + +<pre class="brush: js notranslate">var age = 16; + +var url = age > 18 ? ( + alert("OK, you can go."), + // alert returns "undefined", but it will be ignored because + // isn't the last comma-separated value of the parenthesis + "continue.html" // the value to be assigned if age > 18 +) : ( + alert("You are much too young!"), + alert("Sorry :-("), + // etc. etc. + "stop.html" // the value to be assigned if !(age > 18) +); + +location.assign(url); // "stop.html"</pre> + + + +<h3 id="삼항_연산자로_반환하기">삼항 연산자로 반환하기</h3> + +<p>삼항 연산자는 <code>if / else</code> 문을 사용하는 함수를 반환하는 데 적합합니다.</p> + +<pre class="notranslate"><code>var func1 = function( .. ) { + if (condition1) { return value1 } + else { return value2 } +} + +var func2 = function( .. ) { + return condition1 ? value1 : value2 +}</code></pre> + +<p>다음과 같이 법적으로 술을 마실수 있는지 여부를 반환하는 함수를 만들수 있습니다.</p> + +<pre class="notranslate"><code>function canDrinkAlcohol(age) { + return (age > 21) ? "True, over 21" : "False, under 21"; +} +var output = canDrinkAlcohol(26); +console.log(output); // "True, over 21"</code></pre> + +<p><code>if / else</code> 문을 대체하는 삼항연산자가 <code>return</code>을 여러 번 사용하고 if 블록 내부에서 한줄만 나올때 <code>return</code>을 대체 할 수 있는 좋은 방법이됩니다.</p> + +<p>삼항연산자를 여러 행으로 나누고 그 앞에 공백을 사용하면 긴 <code>if / else</code> 문을 매우 깔끔하게 만들 수 있습니다. 이것은 동일한 로직을 표현하지만 코드를 읽기 쉽게 만들어 줍니다.</p> + +<pre class="notranslate"><code>var func1 = function( .. ) { + if (condition1) { return value1 } + else if (condition2) { return value2 } + else if (condition3) { return value3 } + else { return value4 } +} + +var func2 = function( .. ) { + return condition1 ? value1 + : condition2 ? value2 + : condition3 ? value3 + : value4 +}</code> +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.12', 'The conditional operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.operators.conditional")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/if...else">if statement</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/delete/index.html b/files/ko/web/javascript/reference/operators/delete/index.html new file mode 100644 index 0000000000..037c3bcd98 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/delete/index.html @@ -0,0 +1,282 @@ +--- +title: delete 연산자 +slug: Web/JavaScript/Reference/Operators/delete +tags: + - JavaScript + - Operator + - Property + - Reference +translation_of: Web/JavaScript/Reference/Operators/delete +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong><code>delete</code></strong> <strong>연산자</strong>는 객체의 속성을 제거합니다. 제거한 객체의 참조를 어디에서도 사용하지 않는다면 나중에 자원을 회수합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-deleteoperator.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">delete <em>expression</em> </pre> + +<p><code>expression</code>은 속성 참조여야 합니다. 예컨대,</p> + +<pre class="syntaxbox">delete <em>object.property</em> +delete <em>object</em>['<em>property</em>'] +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>object</code></dt> + <dd>객체의 이름, 또는 평가했을 때 객체를 반환하는 표현식.</dd> + <dt><code>property</code></dt> + <dd>제거하려는 속성.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p><code>true</code>. 단, 비엄격 모드에서 속성이 {{jsxref("Object.prototype.hasOwnProperty", "자신의 속성", "", 0)}}이며 <a href="/ko/docs/Web/JavaScript/Reference/Errors/Cant_delete">설정 불가능</a>한 경우 <code>false</code>.</p> + +<h3 id="예외">예외</h3> + +<p>엄격 모드에서, 속성이 자신의 속성이며 설정 불가능한 경우 {{jsxref("TypeError")}}.</p> + +<h2 id="설명">설명</h2> + +<p>일반적으로 생각하고 있는것과는 다르게 <code>delete</code> 는 메모리 해제에 관하여 직접적으로 어떠한 작업도 하지 않습니다. 메모리 관리는 breaking references를 통하여 간접적으로 일어납니다. 자세한 걸 알고 싶다면 <a href="/en-US/docs/Web/JavaScript/Memory_Management">memory management</a> 를 보세요.</p> + +<p><code><strong>delete</strong></code>연산자는 오브젝트로 부터 해당 프로퍼티를 삭제합니다. 삭제를 하면 true를 반환, 아니면 false를 반환합니다. 그렇지만 아래 경우를 고려해야만 합니다. </p> + +<ul> + <li>만약 존재하지 않는 속성을 삭제하려고 하면 delete는 어떠한 작업도 없이 true를 반환합니다.</li> + <li>오브젝트의 프로토타입 체인에 같은 이름의 속성이 있다면, 삭제 후에, 오브젝트의 프로토타입체인을 통해 프로퍼티를 사용 할 수 있습니다. (즉, <code>delete</code>는 오직 자신의 프로퍼티만 삭제 합니다.</li> + <li>{{jsxref("Statements/var","var")}}로 선언된 어떠한 프로퍼티라도 글로벌 스코프나 펑션 스코프로부터 삭제될 수 없습니다. + <ul> + <li>결국, <code>delete</code>는 글로벌 스코프의 어떤 함수도 삭제 할 수 없습니다. (함수 정의식이건 함수 표현식이건 삭제 불가)</li> + <li>오브젝트의 속성으로 있는 함수인 경우(글로벌 스코프를 제외하고)는 <code>delete</code>로 삭제할 수 있습니다.</li> + </ul> + </li> + <li>{{jsxref("Statements/let","let")}}과 {{jsxref("Statements/const","const")}}로 선언한 속성은 어느 스코프에 정의되어 있건 삭제 할 수 없습니다.</li> + <li>Non-configurable 속성은 삭제 할 수 없습니다. 이것은 {{jsxref("Math")}}, {{jsxref("Array")}}, {{jsxref("Object")}}와 같은 built-in objects의 속성들이나 {{jsxref("Object.defineProperty()")}} 같은 메소드로 만든 non-configurable속성들을 포함합니다.</li> +</ul> + +<p>간단한 예제입니다.</p> + +<pre class="brush: js">var Employee = { + age: 28, + name: 'abc', + designation: 'developer' +} + +console.log(delete Employee.name); // returns true +console.log(delete Employee.age); // returns true + +// 존재하지 않는 속성을 삭제하려하면 +// true를 리턴합니다. +console.log(delete Employee.salary); // returns true +</pre> + +<h3 id="설정_불가능한_속성">설정 불가능한 속성</h3> + +<p>non-configurable 속성은 <code>delete</code>로 삭제할 수 없으며, <code>false</code>를 반환할 것입니다(*strict mode에서는 <code>SyntaxError</code>를 발생시킴).</p> + +<pre class="brush: js">var Employee = {}; +Object.defineProperty(Employee, 'name', {configurable: false}); + +console.log(delete Employee.name); // returns false +</pre> + +<p>{{jsxref("Statements/var","var")}}, {{jsxref("Statements/let","let")}}, {{jsxref("Statements/const","const")}}로 선언된 변수는 non-configurable 속성으로 구분되며, <code>delete</code>로 삭제될 수 없습니다.</p> + +<pre class="brush: js">var nameOther = 'XYZ'; + +// 우리는 이를 사용해 글로벌 속성에 접근 할 수 있습니다: +Object.getOwnPropertyDescriptor(window, 'nameOther'); + +// output: Object { value: "XYZ", +// writable: true, +// enumerable: true, +// <strong>configurable: false </strong>} + +// "nameOther"은 var로 선언되었기 때문에 +// 이는 "non-configurable" 속성으로 구분됩니다. + +delete nameOther; // return false</pre> + +<p>strict mode, this would have raised an exception.</p> + +<h3 id="엄격_vs._비엄격_모드">엄격 vs. 비엄격 모드</h3> + +<p>엄격 모드에서 <code>delete</code>로 변수나 함수를 삭제하려고 하면 {{jsxref("SyntaxError")}}가 발생합니다. </p> + +<p><code>var</code>로 정의된 변수는 non-configurable로 구분됩니다. 다음 예제에서, <code>salary</code>는 non-configurable이며 삭제될 수 없습니다. non-strict mode에서 non-configurable에 <code>delete</code>를 쓰면 <code>false</code>를 반환합니다.</p> + +<pre class="brush: js">function Employee() { + delete salary; + var salary; +} + +Employee(); +</pre> + +<p>그러나 strict mode에서는 <code>false</code>를 반환하는 대신, <code>SyntaxError</code>를 발생시킵니다.</p> + +<pre class="brush: js">"use strict"; + +function Employee() { + delete salary; // SyntaxError + var salary; +} + +// 이와 마찬가지로, delete로 함수를 삭제하는 것도 +// SyntaxError를 발생시킵니다. + +function DemoFunction() { + //some code +} + +delete DemoFunction; // SyntaxError +</pre> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">// 전역스코프에 adminName라는 프로퍼티를 만듭니다. +adminName = 'xyz'; + +// 전역스코프에 empCount라는 프로퍼티를 만듭니다. +// var를 사용해서 선언했으므로, 이는 non-configurable로 구분됩니다. +// let 이나 const를 사용하더라도 마찬가지로 non-configurable 입니다. +var empCount = 43; + +EmployeeDetails = { + name: 'xyz', + age: 5, + designation: 'Developer' +}; + +// adminName은 전역변수입니다. +// 이는 var를 사용하여 선언되지 않았기에 configurable하며 delete로 삭제될 수 있습니다. +delete adminName; // returns true + +// 이와 반대로, empCount는 var를 사용하였기에 non-configurable이며 +// 그러므로 delete로 삭제할 수 없습니다. +delete empCount; // returns false + +// delete는 객체의 프로퍼티를 지울 때 사용됩니다. +delete EmployeeDetails.name; // returns true + +// 해당 프로퍼티가 존재하지 않는 상황에서도 "true"를 리턴합니다. +delete EmployeeDetails.salary; // returns true + +// 내장되어있는 정적 프로퍼티에는 delete가 영향을 미치지 않습니다. +delete Math.PI; // returns false + +// EmployeeDetails 은 전역스코프의 프로퍼티 입니다. +// "var"를 사용하지 않고 선언되었기 때문에 이는 configurable입니다. +delete EmployeeDetails; // returns true + +function f() { + var z = 44; + + // 지역변수에는 delete가 영향을 미치지 않습니다. + delete z; // returns false +}</pre> + +<h3 id="delete와_프로토타입_체인"><code>delete</code>와 프로토타입 체인</h3> + +<p>In the following example, we delete an own property of an object while a property with the same name is available on the prototype chain:</p> + +<pre class="brush: js">function Foo() { + this.bar = 10; +} + +Foo.prototype.bar = 42; + +var foo = new Foo(); + +// Returns true, since the own property +// has been deleted on the foo object +delete foo.bar; + +// foo.bar is still available, since it +// is available in the prototype chain. +console.log(foo.bar); + +// We delete the property on the prototype +delete Foo.prototype.bar; + +// logs "undefined" since the property +// is no longer inherited +console.log(foo.bar); </pre> + +<h3 id="객체_요소_제거하기">객체 요소 제거하기</h3> + +<p>When you delete an array element, the array length is not affected. This holds even if you delete the last element of the array.</p> + +<p>When the <code>delete</code> operator removes an array element, that element is no longer in the array. In the following example, <code>trees[3]</code> is removed with <code>delete</code>.</p> + +<pre class="brush: js">var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; +delete trees[3]; +if (3 in trees) { + // this does not get executed +}</pre> + +<p>If you want an array element to exist but have an undefined value, use the <code>undefined</code> value instead of the <code>delete</code> operator. In the following example, <code>trees[3]</code> is assigned the value undefined, but the array element still exists:</p> + +<pre class="brush: js">var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; +trees[3] = undefined; +if (3 in trees) { + // this gets executed +}</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-delete-operator', 'The delete Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-delete-operator', 'The delete Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.4.1', 'The delete Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.4.1', 'The delete Operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div id="compat-mobile">{{Compat("javascript.operators.delete")}}</div> + +<h2 id="크로스_브라우저_참고사항">크로스 브라우저 참고사항</h2> + +<p>Although ECMAScript makes iteration order of objects implementation-dependent, it may appear that all major browsers support an iteration order based on the earliest added property coming first (at least for properties not on the prototype). However, in the case of Internet Explorer, when one uses <code>delete</code> on a property, some confusing behavior results, preventing other browsers from using simple objects like object literals as ordered associative arrays. In Explorer, while the property <em>value</em> is indeed set to undefined, if one later adds back a property with the same name, the property will be iterated in its <em>old</em> position--not at the end of the iteration sequence as one might expect after having deleted the property and then added it back.</p> + +<p>If you want to use an ordered associative array in a cross-browser environment, use a {{jsxref("Map")}} object if available, or simulate this structure with two separate arrays (one for the keys and the other for the values), or build an array of single-property objects, etc.</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="http://perfectionkills.com/understanding-delete/">In depth analysis on delete</a></li> + <li>{{jsxref("Reflect.deleteProperty()")}}</li> + <li>{{jsxref("Map.prototype.delete()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/destructuring_assignment/index.html b/files/ko/web/javascript/reference/operators/destructuring_assignment/index.html new file mode 100644 index 0000000000..d078e94c38 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/destructuring_assignment/index.html @@ -0,0 +1,409 @@ +--- +title: 구조 분해 할당 +slug: Web/JavaScript/Reference/Operators/Destructuring_assignment +tags: + - Destructuring + - ECMAScript 2015 + - JavaScript + - Operator + - Reference + - 구조 분해 +translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>구조 분해 할당</strong> 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-destructuringassignment.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="brush: js">var a, b, rest; +[a, b] = [10, 20]; +console.log(a); // 10 +console.log(b); // 20 + +[a, b, ...rest] = [10, 20, 30, 40, 50]; +console.log(a); // 10 +console.log(b); // 20 +console.log(rest); // [30, 40, 50] + +({ a, b } = { a: 10, b: 20 }); +console.log(a); // 10 +console.log(b); // 20 + + +// Stage 4(finished) proposal +({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}); +console.log(a); // 10 +console.log(b); // 20 +console.log(rest); // {c: 30, d: 40} +</pre> + +<h2 id="설명">설명</h2> + +<p>객체 및 배열 리터럴 표현식을 사용하면 즉석에서 쉽게 데이터 뭉치를 만들 수 있습니다.</p> + +<pre class="brush: js">var x = [1, 2, 3, 4, 5];</pre> + +<p>구조 분해 할당의 구문은 위와 비슷하지만, 대신 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지 정의합니다.</p> + +<pre class="brush: js">var x = [1, 2, 3, 4, 5]; +var [y, z] = x; +console.log(y); // 1 +console.log(z); // 2 +</pre> + +<p>구조 분해 할당은 Perl이나 Python 등 다른 언어가 가지고 있는 기능입니다.</p> + +<h2 id="배열_구조_분해">배열 구조 분해</h2> + +<h3 id="기본_변수_할당">기본 변수 할당</h3> + +<pre class="brush: js">var foo = ["one", "two", "three"]; + +var [one, two, three] = foo; +console.log(one); // "one" +console.log(two); // "two" +console.log(three); // "three" +</pre> + +<h3 id="선언에서_분리한_할당">선언에서 분리한 할당</h3> + +<p>변수의 선언이 분리되어도 구조 분해를 통해 값을 할당할 수 있습니다.</p> + +<pre class="brush:js">var a, b; + +[a, b] = [1, 2]; +console.log(a); // 1 +console.log(b); // 2 +</pre> + +<h3 id="기본값">기본값</h3> + +<p>변수에 기본값을 할당하면, 분해한 값이 {{jsxref("undefined")}}일 때 그 값을 대신 사용합니다.</p> + +<pre class="brush: js">var a, b; + +[a=5, b=7] = [1]; +console.log(a); // 1 +console.log(b); // 7 +</pre> + +<h3 id="변수_값_교환하기">변수 값 교환하기</h3> + +<p>하나의 구조 분해 표현식만으로 두 변수의 값을 교환할 수 있습니다.</p> + +<p>구조 분해 할당 없이 두 값을 교환하려면 임시 변수가 필요합니다. (일부 로우 레벨 언어에서는 <a class="external" href="http://en.wikipedia.org/wiki/XOR_swap">XOR 교체 트릭</a>을 사용할 수 있습니다)</p> + +<pre class="brush:js">var a = 1; +var b = 3; + +[a, b] = [b, a]; +console.log(a); // 3 +console.log(b); // 1 +</pre> + +<h3 id="함수가_반환한_배열_분석">함수가 반환한 배열 분석</h3> + +<p>함수는 이전부터 배열을 반환할 수 있었습니다. 구조 분해를 사용하면 반환된 배열에 대한 작업을 더 간결하게 수행할 수 있습니다.</p> + +<p>아래 예제에서 <code>f()</code>는 출력으로 배열 <code>[1, 2]</code>을 반환하는데, 하나의 구조 분해만으로 값을 분석할 수 있습니다.</p> + +<pre class="brush:js">function f() { + return [1, 2]; +} + +var a, b; +[a, b] = f(); +console.log(a); // 1 +console.log(b); // 2 +</pre> + +<h3 id="일부_반환_값_무시하기">일부 반환 값 무시하기</h3> + +<p>다음과 같이 필요하지 않은 반환 값을 무시할 수 있습니다.</p> + +<pre class="brush:js">function f() { + return [1, 2, 3]; +} + +var [a, , b] = f(); +console.log(a); // 1 +console.log(b); // 3 +</pre> + +<p>반환 값을 모두 무시할 수도 있습니다.</p> + +<pre class="brush:js">[,,] = f(); +</pre> + +<h3 id="변수에_배열의_나머지를_할당하기">변수에 배열의 나머지를 할당하기</h3> + +<p>배열을 구조 분해할 경우, 나머지 구문을 이용해 분해하고 남은 부분을 하나의 변수에 할당할 수 있습니다.</p> + +<pre class="brush: js">var [a, ...b] = [1, 2, 3]; +console.log(a); // 1 +console.log(b); // [2, 3] +</pre> + +<p>나머지 요소의 오른쪽 뒤에 쉼표가 있으면 {{jsxref("SyntaxError")}}가 발생합니다.</p> + +<pre class="brush: js example-bad">var [a, ...b,] = [1, 2, 3]; +// SyntaxError: rest element may not have a trailing comma +</pre> + +<h3 id="정규_표현식과_일치하는_값_해체하기">정규 표현식과 일치하는 값 해체하기</h3> + +<p>정규 표현식의 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec"> exec()</a></code> 메서드는 일치하는 부분를 찾으면 그 문자열에서 정규식과 일치하는 부분 전체를 배열의 맨 앞에, 그리고 그 뒤에 정규식에서 괄호로 묶인 각 그룹과 일치하는 부분을 포함하는 배열을 반환합니다. 구조 분해 할당은 필요하지 않은 경우 일치하는 전체 부분은 무시하고 필요한 부분만 쉽게 빼올 수 있습니다.</p> + +<pre class="brush: js">function parseProtocol(url) { + var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); + if (!parsedURL) { + return false; + } + console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"] + + var [, protocol, fullhost, fullpath] = parsedURL; + return protocol; +} + +console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https"</pre> + +<h2 id="객체_구조_분해">객체 구조 분해</h2> + +<h3 id="기본_할당">기본 할당</h3> + +<pre class="brush: js">var o = {p: 42, q: true}; +var {p, q} = o; + +console.log(p); // 42 +console.log(q); // true +</pre> + +<h3 id="선언_없는_할당">선언 없는 할당</h3> + +<p>구조 분해를 통해 변수의 선언과 분리하여 변수에 값을 할당할 수 있습니다.</p> + +<pre class="brush:js">var a, b; + +({a, b} = {a: 1, b: 2});</pre> + +<div class="note"> +<p><strong>참고</strong>: 할당 문을 둘러싼 <code>( .. )</code>는 선언 없이 객체 리터럴(object literal) 비구조화 할당을 사용할 때 필요한 구문입니다.</p> + +<p><code>{a, b} = {a:1, b:2}</code>는 유효한 독립 구문이 아닙니다. 좌변의 <code>{a, b}</code>이 객체 리터럴이 아닌 블록으로 간주되기 때문입니다.</p> + +<p>하지만, <code>({a, b} = {a:1, b:2})</code>는 유효한데, <code>var {a, b} = {a:1, b:2}</code>와 같습니다.</p> + +<p><code>( .. )</code> 표현식 앞에는 세미콜론이 있어야 합니다. 그렇지 않을 경우 이전 줄과 연결되어 함수를 실행하는데 이용될 수 있습니다.</p> +</div> + +<h3 id="새로운_변수_이름으로_할당하기">새로운 변수 이름으로 할당하기</h3> + +<p>객체로부터 속성을 해체하여 객체의 원래 속성명과는 다른 이름의 변수에 할당할 수 있습니다.</p> + +<pre class="brush: js">var o = {p: 42, q: true}; +var {p: foo, q: bar} = o; + +console.log(foo); // 42 +console.log(bar); // true</pre> + +<h3 id="기본값_2">기본값</h3> + +<p>객체로부터 해체된 값이 <code>undefined</code>인 경우, 변수에 기본값을 할당할 수 있습니다.</p> + +<pre class="brush: js">var {a = 10, b = 5} = {a: 3}; + +console.log(a); // 3 +console.log(b); // 5</pre> + +<h3 id="기본값_갖는_새로운_이름의_변수에_할당하기">기본값 갖는 새로운 이름의 변수에 할당하기</h3> + +<p>새로운 변수명 할당과 기본값 할당을 한번에 할 수 있습니다.</p> + +<pre class="brush: js">var {a: aa = 10, b: bb = 5} = {a: 3}; + +console.log(aa); // 3 +console.log(bb); // 5 +</pre> + +<h3 id="함수_매개변수의_기본값_설정하기">함수 매개변수의 기본값 설정하기</h3> + +<h4 id="ES5_버전">ES5 버전</h4> + +<pre class="brush: js">function drawES5Chart(options) { + options = options === undefined ? {} : options; + var size = options.size === undefined ? 'big' : options.size; + var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords; + var radius = options.radius === undefined ? 25 : options.radius; + console.log(size, cords, radius); + // 이제 드디어 차트 그리기 수행 +} + +drawES5Chart({ + cords: { x: 18, y: 30 }, + radius: 30 +});</pre> + +<h4 id="ES2015_버전">ES2015 버전</h4> + +<pre class="brush: js">function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) { + console.log(size, cords, radius); + // 차트 그리기 수행 +} + +drawES2015Chart({ + cords: { x: 18, y: 30 }, + radius: 30 +});</pre> + +<div class="note"> +<p>위의 <strong><code>drawES2015Chart</code></strong> 함수의 원형에서 구조 분해된 좌변에 빈 오브젝트 리터럴을 할당하는 것을 볼 수 있습니다 <code>{size = 'big', cords = {x: 0, y: 0}, radius = 25} = {}</code>. 빈 오브젝트를 우변에 할당하지 않고도 함수를 작성할 수 있습니다. 하지만, 지금의 형태에서는 단순히 <code><strong>drawES2015Chart()</strong></code>와 같이 어떤 매개변수 없이도 호출할 수 있지만, 우변의 빈 오브젝트 할당을 없앤다면 함수 호출시 적어도 하나의 인자가 제공되어야만 합니다. 이 함수가 어떠한 매개변수 없이도 호출할 수 있길 원한다면 지금 형태가 유용하고, 무조건 객체를 넘기길 원하는 경우에는 빈 객체 할당을 하지 않는 것이 유용할 수 있습니다.</p> +</div> + +<h3 id="중첩된_객체_및_배열의_구조_분해">중첩된 객체 및 배열의 구조 분해</h3> + +<pre class="brush:js">var metadata = { + title: "Scratchpad", + translations: [ + { + locale: "de", + localization_tags: [ ], + last_edit: "2014-04-14T08:43:37", + url: "/de/docs/Tools/Scratchpad", + title: "JavaScript-Umgebung" + } + ], + url: "/en-US/docs/Tools/Scratchpad" +}; + +var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata; + +console.log(englishTitle); // "Scratchpad" +console.log(localeTitle); // "JavaScript-Umgebung"</pre> + +<h3 id="for_of_반복문과_구조_분해">for of 반복문과 구조 분해</h3> + +<pre class="brush: js">var people = [ + { + name: "Mike Smith", + family: { + mother: "Jane Smith", + father: "Harry Smith", + sister: "Samantha Smith" + }, + age: 35 + }, + { + name: "Tom Jones", + family: { + mother: "Norah Jones", + father: "Richard Jones", + brother: "Howard Jones" + }, + age: 25 + } +]; + +for (var {name: n, family: { father: f } } of people) { + console.log("Name: " + n + ", Father: " + f); +} + +// "Name: Mike Smith, Father: Harry Smith" +// "Name: Tom Jones, Father: Richard Jones"</pre> + +<h3 id="함수_매개변수로_전달된_객체에서_필드_해체하기">함수 매개변수로 전달된 객체에서 필드 해체하기</h3> + +<pre class="brush:js">function userId({id}) { + return id; +} + +function whois({displayName: displayName, fullName: {firstName: name}}){ + console.log(displayName + " is " + name); +} + +var user = { + id: 42, + displayName: "jdoe", + fullName: { + firstName: "John", + lastName: "Doe" + } +}; + +console.log("userId: " + userId(user)); // "userId: 42" +whois(user); // "jdoe is John"</pre> + +<p>이 예제는 user 객체로부터 <code>id</code>, <code>displayName</code> 및 <code>firstName</code> 을 해체해 출력합니다.</p> + +<h3 id="계산된_속성_이름과_구조_분해">계산된 속성 이름과 구조 분해</h3> + +<p>계산된 속성 이름(computed property name)은, <a href="/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names" title="object literals">객체 리터럴</a>과 비슷하게 구조 분해에도 사용될 수 있습니다.</p> + +<pre class="brush: js">let key = "z"; +let { [key]: foo } = { z: "bar" }; + +console.log(foo); // "bar" +</pre> + +<h3 id="객체_구조_분해에서_Rest">객체 구조 분해에서 Rest</h3> + +<p><a class="external external-icon" href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a> 제안(stage 3)에서는 구조 분해에 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a> 구문을 추가하고 있습니다. rest 속성은 구조 분해 패턴으로 걸러지지 않은 열거형 속성의 키를 가진 나머지 항목들을 모읍니다.</p> + +<pre class="brush: js">let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40} +a; // 10 +b; // 20 +rest; // { c: 30, d: 40 } +</pre> + +<h3 id="속성_이름이_유효한_JavaScript_식별자명이_아닌_경우">속성 이름이 유효한 JavaScript 식별자명이 아닌 경우</h3> + +<p>구조 분해는 JavaScript {{glossary("Identifier", "식별자")}} 이름으로 적합하지 않은 속성명이 제공된 경우에도 이용할 수 있습니다. 이 때는 대체할 유효한 식별자명을 제공해야 합니다.</p> + +<pre class="brush: js">const foo = { 'fizz-buzz': true }; +const { 'fizz-buzz': fizzBuzz } = foo; + +console.log(fizzBuzz); // "true" +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> +<div> + + +<p>{{Compat("javascript.operators.destructuring")}}</p> +</div> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators" title="Assignment operators">할당 연산자</a></li> + <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/">"ES6 in Depth: Destructuring" on hacks.mozilla.org</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/equality/index.html b/files/ko/web/javascript/reference/operators/equality/index.html new file mode 100644 index 0000000000..5ebe238590 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/equality/index.html @@ -0,0 +1,123 @@ +--- +title: 동등 연산자(==) +slug: Web/JavaScript/Reference/Operators/Equality +translation_of: Web/JavaScript/Reference/Operators/Equality +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>동등 연산자(==)는 두 개의 피연산자가 동일한지 확인하며, Boolean값을 반환합니다. <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality">일치 연산자</a>(===)와는 다르게 다른 타입의 피연산자들끼리의 비교를 시도합니다. </p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-equality.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox notranslate">x == y +</pre> + +<h2 id="상세_설명">상세 설명</h2> + +<p>동등 연산자 (<code>==</code> 와 <code>!=</code>)는 두 피연산자를 비교하기 위해 <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">Abstract Equality Comparison Algorithm</a>를 사용합니다. 다음과 같이 간략히 설명할 수 있습니다:</p> + +<ul> + <li>두 피연산자가 모두 객체일때, 두 피연산자가 동일한 객체를 참조할때에만 true를 반환합니다.</li> + <li>하나의 피연산자가 <code>null</code>이고 다른 하나가 <code>undefined</code>일때, <code>true</code>를 반환합니다.</li> + <li>두 피연산자의 타입이 다를 경우, 비교하기 전에 동일한 타입으로 변환하도록 합니다: + <ul> + <li>숫자와 문자열을 비교할 경우, 문자열을 숫자로 변환하도록 합니다.</li> + <li>하나의 피연산자가 <code>Boolean</code>일 경우, Boolean 피연산자가 true일 경우 1로 변환하고, false일 경우, +0으로 변환합니다.</li> + <li>하나의 피연산자가 객체이고 다른하나가 숫자나 문자열이면, 객체를 <code>valueOf()</code>나<code>toString()</code>를 사용해 기본 데이터 타입으로 변환하도록 합니다.</li> + </ul> + </li> + <li>두개의 피연산자가 동일한 타입일 경우, 다음과 같이 비교됩니다: + <ul> + <li><code>String</code>: 두 피연산자가 동일한 문자순서가 동일한 문자열일 경우, <code>true</code>를 반환합니다.</li> + <li><code>Number</code>: 두 피연산자가 동일한 값을 가질 경우, <code>true</code>을 반환합니다. +0 과 -0 은 동일한 값으로 취급합니다. 어느 한쪽이 <code>NaN</code>일 경우, <code>false</code>를 반환합니다.</li> + <li><code>Boolean</code>: 두 피연산자가 모두 <code>true</code>이거나, 모두 <code>false</code>일 경우, <code>true</code>를 반환합니다. </li> + </ul> + </li> +</ul> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality">일치연산자</a> (<code>===</code>)와의 가장 두드러지는 차이점은 일치 연산자는 타입변환을 시도하지 않는다는 것입니다. 일치 연산자는 다른 타입을 가진 피연산자는 다르다고 판단합니다.</p> + +<h2 id="예시">예시</h2> + +<h3 id="타입변환_없이_비교">타입변환 없이 비교</h3> + +<pre class="brush: js notranslate">1 == 1; // true +"hello" == "hello"; // true</pre> + +<h3 id="타입변환을_이용한_비교">타입변환을 이용한 비교</h3> + +<pre class="brush: js notranslate">"1" == 1; // true +1 == "1"; // true +0 == false; // true +0 == null; // false +0 == undefined; // false +0 == !!null; // true, look at Logical NOT operator +0 == !!undefined; // true, look at Logical NOT operator +null == undefined; // true + +const number1 = new Number(3); +const number2 = new Number(3); +number1 == 3; // true +number1 == number2; // false</pre> + +<h3 id="객체들_간의_비교">객체들 간의 비교</h3> + +<pre class="brush: js notranslate">const object1 = {"key": "value"} +const object2 = {"key": "value"}; + +object1 == object2 // false +object2 == object2 // true</pre> + +<h3 id="String과_String_objects의_비교">String과 String objects의 비교</h3> + +<p><code>new String()</code> 을 통해 생성된 문자열들은 객체입니다. 이 객체중 하나를 문자열과 비교한다면, <code>String</code> 객체가 문자열로 변환된 후 비교될 것입니다. 그러나 두개의 피연산자 모두 <code>String</code> 객체라면, 객체로써 비교가 이루어지기 때문에 같은 값으로 취급될려면 같은 객체를 참조하고 있어야 합니다:</p> + +<pre class="brush: js notranslate">const string1 = "hello"; +const string2 = String("hello"); +const string3 = new String("hello"); +const string4 = new String("hello"); + +console.log(string1 == string2); // true +console.log(string1 == string3); // true +console.log(string2 == string3); // true +console.log(string3 == string4); // false +console.log(string4 == string4); // true</pre> + +<h3 id="Comparing_Dates_and_strings">Comparing Dates and strings</h3> + +<pre class="brush: js notranslate">const d = new Date('December 17, 1995 03:24:00'); +const s = d.toString(); // for example: "Sun Dec 17 1995 03:24:00 GMT-0800 (Pacific Standard Time)" +console.log(d == s); //true</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.operators.equality")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Inequality">Inequality operator</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality">Strict equality operator</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Strict_inequality">Strict inequality operator</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/expression_closures/index.html b/files/ko/web/javascript/reference/operators/expression_closures/index.html new file mode 100644 index 0000000000..bf44be6cd7 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/expression_closures/index.html @@ -0,0 +1,79 @@ +--- +title: 표현식 클로저 +slug: Web/JavaScript/Reference/Operators/Expression_closures +tags: + - Function + - JavaScript + - Non-standard + - Obsolete + - Operator + - Reference +translation_of: Archive/Web/JavaScript/Expression_closures +--- +<div>{{JSSidebar("Operators")}}{{Non-standard_Header}}{{Obsolete_Header("gecko60")}} +<div class="warning"><strong>Non-standard. Do not use!</strong><br> +The expression closure syntax is a deprecated Firefox-specific feature and has been removed starting with Firefox 60. For future-facing usages, consider using <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>.</div> +</div> + +<p>클로져는 간단한 함수를 작성하기 위한 짧은 함수구문 입니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) + <em>expression</em> +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>name</code></dt> + <dd>함수의 이름입니다. 익명함수의 경우에는 생략할 수 있습니다. 이름은 함수본문에만 국한됩니다.</dd> + <dt><code>paramN</code></dt> + <dd>함수에 전달할 인수의 이름입니다. 함수는 최대 255개의 인수를 가질 수 있습니다.</dd> + <dt><code>expression</code></dt> + <dd>함수의 본문을 구성하는 표현식입니다.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>이 추가적인 기능은 <a class="external" href="http://en.wikipedia.org/wiki/Lambda_calculus#Lambda_calculus_and_programming_languages">람다 표기법</a>과 비슷한 언어를 제공하기위해 간단한 기능을 작성하는데 필요한 단축형일 뿐입니다.</p> + +<p>JavaScript 1.7 and older:</p> + +<pre class="brush: js">function(x) { return x * x; }</pre> + +<p>JavaScript 1.8:</p> + +<pre class="brush: js">function(x) x * x</pre> + +<p>이 구문을 사용하면 중괄호나 'return'문을 생략하여 암시적으로 만들 수 있습니다. 코드를 더 짧게 만들 수 있는 것 이외의 이방법으로 얻을 수 있는 추가 이점은 없습니다.</p> + +<h2 id="Examples">Examples</h2> + +<p>바인딩 이벤트 리스너의 간단한 예제:</p> + +<pre class="brush: js"> document.addEventListener('click', function() false, true); +</pre> + +<p>JavaScript 1.6의 일부 배열 함수에 이 표기법을 사용합니다:</p> + +<pre class="brush: js">elems.some(function(elem) elem.type == 'text'); +</pre> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.operators.expression_closures")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/function/index.html b/files/ko/web/javascript/reference/operators/function/index.html new file mode 100644 index 0000000000..5f4977bfc7 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/function/index.html @@ -0,0 +1,154 @@ +--- +title: 함수 표현식 +slug: Web/JavaScript/Reference/Operators/function +tags: + - Function + - JavaScript + - Operator + - Primary Expressions +translation_of: Web/JavaScript/Reference/Operators/function +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong><code>function</code></strong> 키워드는 어떤 표현식(expression) 내에서 함수를 정의하는 데 사용될 수 있습니다.</p> + +<p>또한 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a> 생성자와 <a href="/ko/docs/Web/JavaScript/Reference/Statements/function">함수 선언(function declaration)</a>을 이용해 함수를 정의할 수도 있습니다. </p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-functionexpression.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">var myFunction = function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { <em>statements </em>};</pre> + +<p><a href="/ko/docs/">ES2015</a>에서 <a href="/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98">화살표 함수(arrow functions)</a>를 사용할 수도 있습니다.</p> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>name</code></dt> + <dd>함수 이름. 함수가 이름 없는(anonymous) 함수인 경우, 생략될 수 있음. 이 함수 이름은 함수의 몸통 내에서만 사용할 수 있습니다.</dd> + <dt><code>paramN</code></dt> + <dd>함수로 전달되는 인수(argument) 의 이름.</dd> + <dt><code>statements</code></dt> + <dd>함수 몸통을 구성하는 문(statement).</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>함수 표현식(function expression)은 function 문과 매우 비슷하고 구문(syntax)이 거의 같습니다 (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Statements/function" title="function statement">function 문</a> 참조). 함수 표현식과 function 문 사이의 주요 차이점은 함수 이름으로, 함수 표현식으로 <em>익명</em> 함수를 만들 경우 이 이름을 생략할 수 있습니다. 함수 표현식은 정의하자마자 실행되는 <a href="https://developer.mozilla.org/en-US/docs/Glossary/IIFE">IIFE (즉시 호출되는 함수 표현식)</a>로 사용될 수 있습니다. 더 자세한 정보는 <a href="/ko/docs/Web/JavaScript/Reference/Functions" title="functions">함수</a> 장 참조.</p> + +<h3 id="Function_expression_끌어올리기">Function expression 끌어올리기</h3> + +<p>자바스크립트에서 함수 표현식은 {{jsxref("Statements/function", "함수 선언", "#Function_declaration_hoisting")}}과는 달리 끌어올려지지 않습니다. 함수 표현식을 정의하기 전에는 사용할 수 없습니다.</p> + +<pre><code>console.log(notHoisted) // undefined +//even the variable name is hoisted, the definition wasn't. so it's undefined. +notHoisted(); // TypeError: notHoisted is not a function + +var notHoisted = function() { + console.log('bar'); +};</code></pre> + +<h3 id="유명(named)_함수_표현식">유명(named) 함수 표현식</h3> + +<p>함수 몸통 안 쪽에서 현재 함수를 참고하고 싶다면, 유명 함수를 생성해야 합니다. <u><strong>이 함수 이름은 함수의 몸통(범위) 안에서만 사용할 수 있습니다</strong></u>. 이로써 비표준 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code> 속성을 사용하는 것을 피할 수도 있습니다.</p> + +<pre><code>var math = { + 'factit': function factorial(n) { + console.log(n) + if (n <= 1) + return 1; + return n * factorial(n - 1); + } +}; + +math.factit(3) //3;2;1;</code> +</pre> + +<p>함수가 할당된 변수는 <code>name</code> 속성을 가지게됩니다. 다른 변수에 할당되더라도 그 name 속성의 값은 변하지 않습니다. 함수의 이름이 생략되었다면, name 속성의 값은 그 변수의 이름(암묵적 이름)이 될 것입니다. 함수의 이름이 있다면 name 속성의 값은 그 함수의 이름(명시적 이름)이 될 것입니다. 이는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">화살표 함수(arrow functions)</a>에도 적용됩니다 (화살표 함수는 이름을 가지지 않으므로 해당 변수에 암묵적인 이름만 줄 수 있습니다).</p> + +<pre><code>var foo = function() {} +foo.name // "foo" + +var foo2 = foo +foo2.name // "foo" + +var bar = function baz() {} +bar.name // "baz" + +console.log(foo === foo2); // true +console.log(typeof baz); // undefined +console.log(bar === baz); // false (errors because baz == undefined)</code> +</pre> + +<p> </p> + +<h2 id="Examples">Examples</h2> + +<p>다음 예제는 이름 없는 함수를 정의하고 그 함수를 <code>x</code>에 할당합니다. 함수는 인수의 제곱을 반환합니다:</p> + +<pre><code>var x = function(y) { + return y * y; +};</code></pre> + +<p><a href="https://developer.mozilla.org/ko/docs/Glossary/Callback_function">callback</a>으로 더 자주 사용됩니다:</p> + +<pre><code>button.addEventListener('click', function(event) { + console.log('button is clicked!') +})</code></pre> + +<p> </p> + +<p> </p> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>초기 정의. JavaScript 1.5에서 구현됨.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.operators.function")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Arrow_functions", "Arrow functions")}}</li> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{jsxref("Statements/async_function", "async function")}}</li> + <li>{{jsxref("Operators/async_function", "async function expression")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/function_star_/index.html b/files/ko/web/javascript/reference/operators/function_star_/index.html new file mode 100644 index 0000000000..7187f985bc --- /dev/null +++ b/files/ko/web/javascript/reference/operators/function_star_/index.html @@ -0,0 +1,85 @@ +--- +title: function* expression +slug: Web/JavaScript/Reference/Operators/function* +tags: + - ECMAScript6 + - Function + - Generator + - JavaScript +translation_of: Web/JavaScript/Reference/Operators/function* +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong><code>function*</code></strong> keyword 는 표현식 내에서 generator function 을 정의합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-functionasteriskexpression.html")}}</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">function* [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { + <em>statements</em> +}</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>name</code></dt> + <dd>함수명. 생략하면, 익명 함수가 됩니다. 함수명은 함수내에만 한정됩니다.</dd> + <dt><code>paramN</code></dt> + <dd>함수에 전달되는 인수의 이름. 함수는 최대 255 개의 인수를 가질 수 있습니다.</dd> + <dt><code>statements</code></dt> + <dd>함수의 본체를 구성하는 구문들.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p><code>function*</code> expression 은 {{jsxref('Statements/function*', 'function* statement')}} 과 매우 유사하고 형식도 같습니다. <code>function*</code> expression 과 <code>function*</code> statement 의 주요한 차이점은 함수명으로,<em> </em><code>function*</code> expressions 에서는 익명 함수로 만들기 위해 함수명이 생략될 수 있습니다.보다 자세한 내용은 <a href="/ko/docs/Web/JavaScript/Reference/Functions">functions</a> 을 참조하십시오.</p> + +<h2 id="Examples">Examples</h2> + +<p>아래의 예제는 이름이 없는 generator function 을 정의하고 이를 x 에 할당합니다. function 은 인자로 들어온 값의 제곱을 생산(yield)합니다.</p> + +<pre class="brush: js">var x = function*(y) { + yield y * y; +}; +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#', 'function*')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#', 'function*')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Compat("javascript.operators.function_star")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("GeneratorFunction")}} object</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li> + <li>{{jsxref("Operators/yield", "yield")}}</li> + <li>{{jsxref("Operators/yield*", "yield*")}}</li> + <li>{{jsxref("Function")}} object</li> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/generator_comprehensions/index.html b/files/ko/web/javascript/reference/operators/generator_comprehensions/index.html new file mode 100644 index 0000000000..927b613dc6 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/generator_comprehensions/index.html @@ -0,0 +1,174 @@ +--- +title: 생성기 내포 +slug: Web/JavaScript/Reference/Operators/Generator_comprehensions +tags: + - JavaScript + - Non-standard + - Obsolete + - Reference +translation_of: Archive/Web/JavaScript/Generator_comprehensions +--- +<div>{{JSSidebar("Operators")}}{{Non-standard_Header}}{{Obsolete_Header("gecko58")}} +<div class="blockIndicator warning"> +<p><strong>Non-standard. Do not use!</strong><br> + The generator comprehensions syntax is non-standard and removed starting with Firefox 58. For future-facing usages, consider using {{JSxRef("Statements/function*", "generator", "", 1)}}.</p> +</div> +</div> + +<p>The <strong>generator comprehension</strong> syntax was a JavaScript expression which allowed you to quickly assemble a new generator function based on an existing iterable object. However, it has been removed from the standard and the Firefox implementation. Do not use it!</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">(for (x of iterable) x) +(for (x of iterable) if (condition) x) +(for (x of iterable) for (y of iterable) x + y) +</pre> + +<h2 id="Description">Description</h2> + +<p>Inside generator comprehensions, these two kinds of components are allowed:</p> + +<ul> + <li>{{JSxRef("Statements/for...of", "for...of")}} and</li> + <li>{{JSxRef("Statements/if...else", "if")}}</li> +</ul> + +<p>The <code>for-of</code> iteration is always the first component. Multiple <code>for-of</code> iterations or if statements are allowed.</p> + +<p>A significant drawback of {{JSxRef("Operators/Array_comprehensions","array comprehensions","","true")}} is that they cause an entire new array to be constructed in memory. When the input to the comprehension is itself a small array the overhead involved is insignificant — but when the input is a large array or an expensive (or indeed infinite) generator the creation of a new array can be problematic.</p> + +<p>Generators enable lazy computation of sequences, with items calculated on-demand as they are needed. Generator comprehensions are syntactically almost identical to array comprehensions — they use parentheses instead of braces— but instead of building an array they create a generator that can execute lazily. You can think of them as short hand syntax for creating generators.</p> + +<p>Suppose we have an iterator <code>it</code> which iterates over a large sequence of integers. We want to create a new iterator that will iterate over their doubles. An array comprehension would create a full array in memory containing the doubled values:</p> + +<pre class="brush: js">var doubles = [for (i in it) i * 2]; +</pre> + +<p>A generator comprehension on the other hand would create a new iterator which would create doubled values on demand as they were needed:</p> + +<pre class="brush: js">var it2 = (for (i in it) i * 2); +console.log(it2.next()); // The first value from it, doubled +console.log(it2.next()); // The second value from it, doubled +</pre> + +<p>When a generator comprehension is used as the argument to a function, the parentheses used for the function call means that the outer parentheses can be omitted:</p> + +<pre class="brush: js">var result = doSomething(for (i in it) i * 2); +</pre> + +<p>The significant difference between the two examples being that by using the generator comprehension, you would only have to loop over the 'obj' structure once, total, as opposed to once when comprehending the array, and again when iterating through it.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Simple_generator_comprehensions">Simple generator comprehensions</h3> + +<pre class="brush:js">(for (i of [1, 2, 3]) i * i ); +// generator function which yields 1, 4, and 9 + +[...(for (i of [1, 2, 3]) i * i )]; +// [1, 4, 9] + +var abc = ['A', 'B', 'C']; +(for (letters of abc) letters.toLowerCase()); +// generator function which yields "a", "b", and "c" +</pre> + +<h3 id="Generator_comprehensions_with_if_statement">Generator comprehensions with if statement</h3> + +<pre class="brush: js">var years = [1954, 1974, 1990, 2006, 2010, 2014]; + +(for (year of years) if (year > 2000) year); +// generator function which yields 2006, 2010, and 2014 + +(for (year of years) if (year > 2000) if (year < 2010) year); +// generator function which yields 2006, the same as below: + +(for (year of years) if (year > 2000 && year < 2010) year); +// generator function which yields 2006 +</pre> + +<h3 id="Generator_comprehensions_compared_to_generator_function">Generator comprehensions compared to generator function</h3> + +<p>An easy way to understand generator comprehension syntax, is to compare it with the generator function.</p> + +<p>Example 1: Simple generator.</p> + +<pre class="brush: js">var numbers = [1, 2, 3]; + +// Generator function +(function*() { + for (let i of numbers) { + yield i * i; + } +})(); + +// Generator comprehension +(for (i of numbers) i * i ); + +// Result: both return a generator which yields [1, 4, 9] +</pre> + +<p>Example 2: Using <code>if</code> in generator.</p> + +<pre class="brush: js">var numbers = [1, 2, 3]; + +// Generator function +(function*() { + for (let i of numbers) { + if (i < 3) { + yield i * 1; + } + } +})(); + +// Generator comprehension +(for (i of numbers) if (i < 3) i); + +// Result: both return a generator which yields [1, 2]</pre> + +<h2 id="Specifications">Specifications</h2> + +<p>Generator comprehensions were initially in the ECMAScript 2015 draft, but got removed in revision 27 (August 2014). Please see older revisions of ES2015 for specification semantics.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.operators.generator_comprehensions")}}</p> + +<h2 id="Differences_to_the_older_JS1.7JS1.8_comprehensions">Differences to the older JS1.7/JS1.8 comprehensions</h2> + +<div class="blockIndicator warning">JS1.7/JS1.8 comprehensions are removed from Gecko 46 ({{bug(1220564)}}).</div> + +<p><strong>Old comprehensions syntax (do not use anymore!):</strong></p> + +<pre class="brush: js example-bad">(X for (Y in Z)) +(X for each (Y in Z)) +(X for (Y of Z)) +</pre> + +<p>Differences:</p> + +<ul> + <li>ES7 comprehensions create one scope per "for" node instead of the comprehension as a whole. + <ul> + <li>Old: <code>[...(()=>x for (x of [0, 1, 2]))][1]() // 2</code></li> + <li>New: <code>[...(for (x of [0, 1, 2]) ()=>x)][1]() // 1, each iteration creates a fresh binding for x. </code></li> + </ul> + </li> + <li>ES7 comprehensions start with "for" instead of the assignment expression. + <ul> + <li>Old: <code>(i * 2 for (i of numbers))</code></li> + <li>New: <code>(for (i of numbers) i * 2)</code></li> + </ul> + </li> + <li>ES7 comprehensions can have multiple <code>if</code> and <code>for</code> components.</li> + <li>ES7 comprehensions only work with <code>{{JSxRef("Statements/for...of", "for...of")}}</code> and not with <code>{{JSxRef("Statements/for...in", "for...in")}}</code> iterations.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{JSxRef("Statements/for...of", "for...of")}}</li> + <li>{{JSxRef("Operators/Array_comprehensions", "Array comprehensions")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/grouping/index.html b/files/ko/web/javascript/reference/operators/grouping/index.html new file mode 100644 index 0000000000..a8823ff961 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/grouping/index.html @@ -0,0 +1,92 @@ +--- +title: 그룹 연산자 +slug: Web/JavaScript/Reference/Operators/Grouping +tags: + - JavaScript + - Operator + - Primary Expressions + - Reference +translation_of: Web/JavaScript/Reference/Operators/Grouping +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>그룹 연산자 <code>()</code></strong>는 표현식 내에서 평가의 우선순위를 제어합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-groupingoperator.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"> ( )</pre> + +<h2 id="설명">설명</h2> + +<p>그룹 연산자는 표현식이나 중첩 표현식 주위를 감싸는 한 쌍의 괄호로 이루어진 연산자로, 감싸인 식이 더 높은 우선순위를 갖도록 일반적인 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">연산자 우선순위</a>를 재정의합니다. 이름 그대로, 그룹 연산자는 괄호 안의 내용을 묶습니다.</p> + +<h2 id="예제">예제</h2> + +<p>다음 예제에서는 곱셈과 나눗셈 이후 덧셈과 뺄셈을 사용하는 일반적인 연산 순서를 그룹 연산자를 사용해 바꿉니다.</p> + +<pre class="brush:js">var a = 1; +var b = 2; +var c = 3; + +// 기본 우선순위 +a + b * c // 7 +// 이것과 같음 +a + (b * c) // 7 + +// 더하기를 곱하기보다 먼저 하도록 +// 우선순위 변경 +(a + b) * c // 9 + +// 이것과 같음 +a * c + b * c // 9 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-grouping-operator', 'The Grouping Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-grouping-operator', 'The Grouping Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.6', 'The Grouping Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.1.4', 'The Grouping Operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.operators.grouping")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">연산자 우선순위</a></li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Operators/typeof", "typeof")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/in/index.html b/files/ko/web/javascript/reference/operators/in/index.html new file mode 100644 index 0000000000..dea26b496d --- /dev/null +++ b/files/ko/web/javascript/reference/operators/in/index.html @@ -0,0 +1,188 @@ +--- +title: in 연산자 +slug: Web/JavaScript/Reference/Operators/in +tags: + - JavaScript + - Operator + - Relational Operators + - 관계형 연산자 + - 연산자 + - 자바스크립트 +translation_of: Web/JavaScript/Reference/Operators/in +--- +<div>{{jsSidebar("Operators")}}</div> + +<p> <strong><code>in</code> 연산자</strong>는 명시된 속성이 명시된 객체에 존재하면 <code>true</code>를 반환합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><em>속성</em> in <em>객체명</em></pre> + +<h3 id="인자">인자</h3> + +<dl> + <dt><code>속성</code></dt> + <dd>속성의 이름이나 배열의 인덱스를 뜻하는 문자열 또는 수 값입니다.</dd> +</dl> + +<dl> + <dt><code>객체명</code></dt> + <dd>객체의 이름입니다.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p> 다음 예제들은 <code>in</code> 연산자의 용도를 보여 줍니다.</p> + +<pre class="brush:js">// 배열 +var trees = new Array("redwood", "bay", "cedar", "oak", "maple"); +0 in trees // true를 반환합니다. +3 in trees // true를 반환합니다. +(1 + 2) in trees // true를 반환합니다. 연산자 우선 순위에 의하여 이 구문의 괄호는 없어도 됩니다. +6 in trees // false를 반환합니다. +"bay" in trees // false를 반환합니다. 당신은 배열의 내용이 아닌, 인덱스 값을 명시하여야 합니다. +"length" in trees // true를 반환합니다. length는 Array(배열) 객체의 속성입니다. + +// 미리 정의된 객체 +"PI" in Math // true를 반환합니다. +"P" + "I" in Math // true를 반환합니다. + +// 사용자가 정의한 객체 +var myCar = {company: "Lamborghini", model: "Lamborghini Veneno Roadster", year: 2014}; +"company" in myCar // true를 반환합니다. +"model" in myCar // true를 반환합니다. +</pre> + +<p> 당신은 반드시 <code>in</code> 연산자의 오른쪽에 객체를 명시하여야 합니다. 예컨대 당신은 <code>String</code> 생성자로 만들어진 문자열을 명시할 수 있지만 문자열 리터럴은 명시할 수 없습니다.</p> + +<pre class="brush:js">var color1 = new String("green"); +"length" in color1 // true를 반환합니다. + +var color2 = "coral"; +"length" in color2 // color2는 String 객체가 아니기에 오류를 냅니다. +</pre> + +<h3 id="제거되었거나_정의되지_않은_속성에_대하여_in_연산자_사용하기">제거되었거나 정의되지 않은 속성에 대하여 <code>in</code> 연산자 사용하기</h3> + +<p> <code>in</code> 연산자는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete">delete</a></code> 연산자로 제거된 속성에 대하여 <code>false</code>를 반환합니다.</p> + +<pre class="brush:js">var myCar = {company: "Lamborghini", model: "Lamborghini Veneno Roadster", year: 2014}; +delete myCar.company; +"company" in myCar; // false를 반환합니다. + +var trees = new Array("redwood", "bay", "cedar", "oak", "maple"); +delete trees[3]; +3 in trees; // false를 반환합니다. +</pre> + +<p> 만약 당신이 속성을 {{jsxref("Global_Objects/undefined", "undefined")}}로 설정하였는데 그것을 제거하지 않으면, <code>in</code> 연산자는 그 속성에 대하여 <code>true</code>를 반환합니다.</p> + +<pre class="brush:js">var myCar = {company: "Lamborghini", model: "Lamborghini Veneno Roadster", year: 2014}; +myCar.company = undefined; +"company" in myCar; // true를 반환합니다. +</pre> + +<pre class="brush:js">var trees = new Array("redwood", "bay", "cedar", "oak", "maple"); +trees[3] = undefined; +3 in trees; // true를 반환합니다. +</pre> + +<h3 id="상속된_속성">상속된 속성</h3> + +<p> <code>in</code> 연산자는 프로토타입 체인에 의하여 접근할 수 있는 속성에 대하여 <code>true</code>를 반환합니다.</p> + +<pre class="brush:js">"toString" in {}; // true를 반환합니다. +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.8.7', 'The in Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.8.7', 'The in Operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>초기의 정의가 담겨 있습니다. JavaScript 1.4에 추가되었습니다.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>기능</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>지원</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>기능</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>지원</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="관련_문서">관련 문서</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete">delete</a></code></li> + <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li> + <li>{{jsxref("Reflect.has()")}}</li> + <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties" title="/en-US/docs/Enumerability_and_ownership_of_properties">속성의, 소유와 셀 수 있는 성질</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/index.html b/files/ko/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..9605b84278 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/index.html @@ -0,0 +1,304 @@ +--- +title: 식 및 연산자 +slug: Web/JavaScript/Reference/Operators +tags: + - JavaScript + - Operators + - Overview + - Reference +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>이 장은 JavaScript의 모든 연산자<sup>operator</sup>, 식<sup>expression</sup> 및 키워드를 나열합니다.</p> + +<h2 id="항목별_식_및_연산자">항목별 식 및 연산자</h2> + +<p>알파벳순 목록은 왼쪽 사이드바를 보세요.</p> + +<h3 id="기본_식">기본 식</h3> + +<p>기본 키워드 및 JavaScript의 일반 식.</p> + +<dl> + <dt>{{JSxRef("Operators/this", "this")}}</dt> + <dd><code>this</code> 키워드는 실행 문맥의 특별한 속성을 가리킵니다.</dd> + <dt>{{JSxRef("Operators/function", "function")}}</dt> + <dd><code>function</code> 키워드는 함수를 정의합니다.</dd> + <dt>{{JSxRef("Operators/class", "class")}}</dt> + <dd><code>class</code> 키워드는 클래스를 정의합니다.</dd> + <dt>{{JSxRef("Operators/function*", "function*")}}</dt> + <dd><code>function*</code> 키워드는 생성기<sup>generator</sup> 함수 식을 정의합니다.</dd> + <dt>{{JSxRef("Operators/yield", "yield")}}</dt> + <dd>생성기 함수를 일시정지 및 재개합니다.</dd> + <dt>{{JSxRef("Operators/yield*", "yield*")}}</dt> + <dd>다른 생성기 함수 또는 순회가능 객체로 위임합니다.</dd> + <dt>{{JSxRef("Operators/async_function", "async function")}}</dt> + <dd><code>async function</code>은 비동기 함수 표현식을 정의합니다.</dd> +</dl> + +<dl> + <dt>{{JSxRef("Operators/await", "await")}}</dt> + <dd>비동기 함수를 일시 중지했다가 다시 시작하고 promise의 resolution/rejection을 기다립니다.</dd> +</dl> + +<dl> + <dt>{{JSxRef("Global_Objects/Array", "[]")}}</dt> + <dd>배열 초기자 및 리터럴 구문.</dd> + <dt>{{JSxRef("Operators/Object_initializer", "{}")}}</dt> + <dd>객체 초기자 및 리터럴 구문.</dd> + <dt>{{JSxRef("Global_Objects/RegExp", "/ab+c/i")}}</dt> + <dd>정규식 리터럴 구문.</dd> + <dt>{{JSxRef("Operators/Grouping", "( )")}}</dt> + <dd>그룹 연산자.</dd> +</dl> + +<h3 id="좌변_식">좌변 식</h3> + +<p>좌변값은 할당 대상입니다.</p> + +<dl> + <dt>{{JSxRef("Operators/Property_accessors", "Property accessors", "", 1)}}</dt> + <dd>속성 접근자는 객체의 속성 또는 메서드에 대한 접근 방법을 제공합니다.<br> + (<code>object.property</code>, <code>object["property"]</code>)</dd> + <dt>{{JSxRef("Operators/new", "new")}}</dt> + <dd><code>new</code> 연산자는 생성자의 인스턴스를 만듭니다.</dd> + <dt>{{JSxRef("Operators/new%2Etarget", "new.target")}}</dt> + <dd>생성자 문맥에서, <code>new.target</code>은 {{jsxref("Operators/new", "new")}}에 의해 호출된 생성자를 말합니다.</dd> + <dt>{{JSxRef("Operators/super", "super")}}</dt> + <dd><code>super</code> 키워드는 부모 생성자를 호출합니다.</dd> + <dt>{{JSxRef("Operators/Spread_syntax", "...obj")}}</dt> + <dd>전개 연산자는 (함수 호출 시) 매개변수 여럿이나, (배열 리터럴에서) 다수의 요소를 필요로 하는 곳에서 표현식을 확장합니다.</dd> +</dl> + +<h3 id="증가_및_감소">증가 및 감소</h3> + +<p>접두/접미 증감 연산자입니다.</p> + +<dl> + <dt>{{JSxRef("Operators/Increment", "A++")}}</dt> + <dd>접미 증가 연산자.</dd> + <dt>{{JSxRef("Operators/Decrement", "A--")}}</dt> + <dd>접미 감소 연산자.</dd> + <dt>{{JSxRef("Operators/Increment", "++A")}}</dt> + <dd>접두 증가 연산자.</dd> + <dt>{{JSxRef("Operators/Decrement", "--A")}}</dt> + <dd>접두 감소 연산자.</dd> +</dl> + +<h3 id="단항_연산자">단항 연산자</h3> + +<p>단항 연산은 피연산자가 하나뿐인 연산입니다.</p> + +<dl> + <dt>{{JSxRef("Operators/delete", "delete")}}</dt> + <dd><code>delete</code> 연산자는 객체에서 속성을 지웁니다.</dd> + <dt>{{JSxRef("Operators/void", "void")}}</dt> + <dd><code>void</code> 연산자는 식의 반환값을 버립니다.</dd> + <dt>{{JSxRef("Operators/typeof", "typeof")}}</dt> + <dd><code>typeof</code> 연산자는 주어진 객체의 형을 판별합니다.</dd> + <dt>{{JSxRef("Operators/Unary_plus", "+")}}</dt> + <dd>단항 더하기 연산자는 피연산자를 숫자로 변환합니다.</dd> + <dt>{{JSxRef("Operators/Unary_negation", "-")}}</dt> + <dd>단항 부정 연산자는 피연산자를 숫자로 변환한 뒤 부호를 바꿉니다.</dd> + <dt>{{JSxRef("Operators/Bitwise_NOT", "~")}}</dt> + <dd>비트 NOT 연산자.</dd> + <dt>{{JSxRef("Operators/Logical_NOT", "!")}}</dt> + <dd>논리 NOT 연산자.</dd> +</dl> + +<h3 id="산술_연산자">산술 연산자</h3> + +<p>산술 연산자는 피연산자로 숫자 값(리터럴이나 변수)을 취하고 숫자 값 하나를 반환합니다.</p> + +<dl> + <dt>{{JSxRef("Operators/Addition", "+")}}</dt> + <dd>덧셈 연산자.</dd> + <dt>{{JSxRef("Operators/Subtraction", "-")}}</dt> + <dd>뺄셈 연산자.</dd> + <dt>{{JSxRef("Operators/Division", "/")}}</dt> + <dd>나눗셈 연산자.</dd> + <dt>{{JSxRef("Operators/Multiplication", "*")}}</dt> + <dd>곱셈 연산자.</dd> + <dt>{{JSxRef("Operators/Remainder", "%")}}</dt> + <dd>나머지 연산자.</dd> +</dl> + +<dl> + <dt>{{JSxRef("Operators/Exponentiation", "**")}}</dt> + <dd>지수 연산자.</dd> +</dl> + +<h3 id="관계_연산자">관계 연산자</h3> + +<p>비교 연산자는 피연산자를 비교하고, 비교가 참인지 여부를 나타내는 {{jsxref("Boolean")}} 값을 반환합니다.</p> + +<dl> + <dt>{{JSxRef("Operators/in", "in")}}</dt> + <dd><code>in</code> 연산자는 객체에 주어진 속성이 있는지를 결정합니다.</dd> + <dt>{{JSxRef("Operators/instanceof", "instanceof")}}</dt> + <dd><code>instanceof</code> 연산자는 객체가 다른 객체의 인스턴스인지 판별합니다.</dd> + <dt>{{JSxRef("Operators/Less_than", "<")}}</dt> + <dd>작음 연산자.</dd> + <dt>{{JSxRef("Operators/Greater_than", ">")}}</dt> + <dd>큼 연산자.</dd> + <dt>{{JSxRef("Operators/Less_than_or_equal", "<=")}}</dt> + <dd>작거나 같음 연산자.</dd> + <dt>{{JSxRef("Operators/Greater_than_or_equal", ">=")}}</dt> + <dd>크거나 같음 연산자.</dd> +</dl> + +<div class="note"> +<p><strong>참고: =></strong> 는 연산자가 아니고, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions">화살표 함수</a>의 표기법입니다.</p> +</div> + +<h3 id="같음_연산자">같음 연산자</h3> + +<p>같음 연산자의 평가 결과는 항상 {{jsxref("Boolean")}} 형으로 비교가 참인지 나타냅니다.</p> + +<dl> + <dt>{{JSxRef("Operators/Equality", "==")}}</dt> + <dd>동등 연산자.</dd> + <dt>{{JSxRef("Operators/Inequality", "!=")}}</dt> + <dd>부등 연산자.</dd> + <dt>{{JSxRef("Operators/Strict_equality", "===")}}</dt> + <dd>일치<sup>identity</sup> 연산자.</dd> + <dt>{{JSxRef("Operators/Strict_inequality", "!==")}}</dt> + <dd>불일치 연산자.</dd> +</dl> + +<h3 id="비트_시프트_연산자">비트 시프트 연산자</h3> + +<p>피연산자의 모든 비트를 이동<sup>shift</sup>하는 연산.</p> + +<dl> + <dt>{{JSxRef("Operators/Left_shift", "<<")}}</dt> + <dd>비트 좌로 시프트 연산자.</dd> + <dt>{{JSxRef("Operators/Right_shift", ">>")}}</dt> + <dd>비트 우로 시프트 연산자.</dd> + <dt>{{JSxRef("Operators/Unsigned_right_shift", ">>>")}}</dt> + <dd>비트 부호 없는 우로 시프트 연산자.</dd> +</dl> + +<h3 id="이진_비트_연산자">이진 비트 연산자</h3> + +<p>비트 연산자는 피연산자를 32비트 집합(0과 1)으로 다루고 표준 JavaScript 숫자 값을 반환합니다.</p> + +<dl> + <dt>{{JSxRef("Operators/Bitwise_AND", "&")}}</dt> + <dd>비트 AND.</dd> + <dt>{{JSxRef("Operators/Bitwise_OR", "|")}}</dt> + <dd>비트 OR.</dd> + <dt>{{JSxRef("Operators/Bitwise_XOR", "^")}}</dt> + <dd>비트 XOR.</dd> +</dl> + +<h3 id="이진_논리_연산자">이진 논리 연산자</h3> + +<p>논리 연산자는 보통 사용될 때 불리언(논리) 값으로 사용되고, 불리언 값을 반환합니다.</p> + +<dl> + <dt>{{JSxRef("Operators/Logical_AND", "&&")}}</dt> + <dd>논리 AND.</dd> + <dt>{{JSxRef("Operators/Logical_OR", "||")}}</dt> + <dd>논리 OR.</dd> + <dt>{{JSxRef("Operators/Nullish_coalescing_operator", "??")}}</dt> + <dd>Nullish 통합 연산자.</dd> +</dl> + +<h3 id="조건부삼항_연산자">조건부(삼항) 연산자</h3> + +<dl> + <dt>{{JSxRef("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt> +</dl> + +<p>조건부 연산자는 조건의 논리값에 따라 두 값 중 하나를 반환합니다.</p> + +<h3 id="선택적_연결_연산자">선택적 연결 연산자</h3> + +<dl> + <dt>{{JSxRef("Operators/Optional_chaining", "?.")}}</dt> + <dd> + <p>선택적 연결 연산자는 참조가 <a href="https://developer.mozilla.org/en-US/docs/Glossary/nullish">nullish</a> (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a> 또는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>) 인 경우 오류를 발생시키는 대신 <code>undefined</code>를 반환합니다.</p> + </dd> +</dl> + +<h3 id="할당_연산자">할당 연산자</h3> + +<p>할당 연산자는 값을 그 우변 피연산자의 값에 따라 좌변 피연산자에 할당합니다.</p> + +<dl> + <dt>{{JSxRef("Operators/Assignment", "=")}}</dt> + <dd>할당 연산자.</dd> + <dt>{{JSxRef("Operators/Multiplication_assignment", "*=")}}</dt> + <dd>곱셈 할당.</dd> + <dt>{{JSxRef("Operators/Exponentiation_assignment", "**=")}}</dt> + <dd>Exponentiation assignment.</dd> + <dt>{{JSxRef("Operators/Division_assignment", "/=")}}</dt> + <dd>나눗셈 할당.</dd> + <dt>{{JSxRef("Operators/Remainder_assignment", "%=")}}</dt> + <dd>나머지 할당.</dd> + <dt>{{JSxRef("Operators/Addition_assignment", "+=")}}</dt> + <dd>덧셈 할당.</dd> + <dt>{{JSxRef("Operators/Subtraction_assignment", "-=")}}</dt> + <dd>뺄셈 할당</dd> + <dt>{{JSxRef("Operators/Left_shift_assignment", "<<=")}}</dt> + <dd>좌로 이동 할당.</dd> + <dt>{{JSxRef("Operators/Right_shift_assignment", ">>=")}}</dt> + <dd>우로 이동 할당.</dd> + <dt>{{JSxRef("Operators/Unsigned_right_shift_assignment", ">>>=")}}</dt> + <dd>부호 없는 우로 이동 할당.</dd> + <dt>{{JSxRef("Operators/Bitwise_AND_assignment", "&=")}}</dt> + <dd>비트 AND 할당.</dd> + <dt>{{JSxRef("Operators/Bitwise_XOR_assignment", "^=")}}</dt> + <dd>비트 XOR 할당.</dd> + <dt>{{JSxRef("Operators/Bitwise_OR_assignment", "|=")}}</dt> + <dd>비트 OR 할당.</dd> +</dl> + +<dl> + <dt>{{JSxRef("Operators/Logical_AND_assignment", "&&=")}}</dt> + <dd>논리적 AND 할당.</dd> + <dt>{{JSxRef("Operators/Logical_OR_assignment", "||=")}}</dt> + <dd>논리적 OR 할당.</dd> + <dt>{{JSxRef("Operators/Logical_nullish_assignment", "??=")}}</dt> + <dd>논리적 nullish 할당.</dd> +</dl> + +<dl> + <dt>{{JSxRef("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br> + {{JSxRef("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt> + <dd> + <p>구조 분해 할당은 배열 또는 객체의 속성을 배열 또는 객체 리터럴과 비슷해 보이는 구문을 사용하여 변수에 할당할 수 있게 합니다.</p> + </dd> +</dl> + +<h3 id="쉼표_연산자">쉼표 연산자</h3> + +<dl> + <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt> + <dd>쉼표 연산자는 여러 식을 단문으로 평가되게 하고 마지막 식의 결과를 반환합니다.</dd> +</dl> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.operators")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/연산자_우선순위">연산자 우선순위</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/instanceof/index.html b/files/ko/web/javascript/reference/operators/instanceof/index.html new file mode 100644 index 0000000000..0ac15b7ffe --- /dev/null +++ b/files/ko/web/javascript/reference/operators/instanceof/index.html @@ -0,0 +1,161 @@ +--- +title: instanceof +slug: Web/JavaScript/Reference/Operators/instanceof +tags: + - JavaScript + - Operator + - Reference + - Relational Operators +translation_of: Web/JavaScript/Reference/Operators/instanceof +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong><code>instanceof</code> 연산자</strong>는 생성자의 <code>prototype</code> 속성이 객체의 프로토타입 체인 어딘가 존재하는지 판별합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-instanceof.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><em>object</em> instanceof <em>constructor</em></pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>object</code></dt> + <dd>판별할 객체.</dd> + <dt><code>constructor</code></dt> + <dd>판별 목표 함수.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p><code>instanceof</code> 연산자는 <code>object</code>의 프로토타입 체인에 <code>constructor.prototype</code>이 존재하는지 판별합니다.</p> + +<pre class="brush: js">// 생성자 정의 +function C(){} +function D(){} + +var o = new C(); + +// true, 왜냐하면 Object.getPrototypeOf(o) === C.prototype +o instanceof C; + +// false, 왜냐하면 D.prototype이 o 객체의 프로토타입 체인에 없음 +o instanceof D; + +o instanceof Object; // true, 왜냐하면 +C.prototype instanceof Object // true + +C.prototype = {}; +var o2 = new C(); + +o2 instanceof C; // true + +// false, 왜냐하면 C.prototype이 +// 더 이상 o의 프로토타입 체인에 없음 +o instanceof C; + +D.prototype = new C(); // C를 D의 [[Prototype]] 링크로 추가 +var o3 = new D(); +o3 instanceof D; // true +o3 instanceof C; // true, 왜냐하면 이제 C.prototype이 o3의 프로토타입 체인에 존재 +</pre> + +<p><code>instanceof</code> 의 값은 생성자 <code>prototype</code> 프로퍼티의 변화에 따라 바뀔수 있으며, <code>Object.setPrototypeOf</code>의 사용함에 따라서도 바뀔 수 있음에 주의하세요. 또한 non-standard의 <code>__proto__ </code>슈도-프로퍼티도 사용할 수 있도록 만들어 줍니다.</p> + +<h3 id="instanceof_와_multiple_context_(예._프레임_또는_창)"><code>instanceof</code> 와 multiple context (예. 프레임 또는 창)</h3> + +<p>다른 스코프는 다른 실행 환경을 가집니다. 이것은 다른 스코프는 다른 고정된 요소들(다른 전역 오브젝트, 다른 생성자들 등)을 가지고 있음을 의미합니다. 이 사실은 예상치 못한 결과를 가져올 수도 있습니다. 예를 들면, [] <code>instanceof window.frames[0].Array</code>는 <code>false</code>를 리턴할 것입니다. 왜냐하면, <code>Array.prototype !== </code><code>window.frames[0].Array</code> 이며, arrays 는 상위로부터 상속받기 때문입니다. 이것은 처음에는 말이 되지 않을 수도 있습니다. 하지만, 스크립트에서 여러 프레임이나 창을 다루며, 객체를 함수를 통하여 하나의 컨텍스트에서 다른 컨텍스트로 오브젝트를 넘기게 된다면, 이건 충분히 일어날 수 있는 일이며, 아주 큰 이슈가 될 것입니다. 예를 들어, 주어진 오브젝트가 실제로 <code>Array.isArray(myObj)</code>를 사용한 Array인지 안전하게 확인 할 수 있습니다. </p> + +<div class="note"><strong>Mozilla 개발자들을 위한 메모:</strong><br> +XPCOM <code>instanceof</code> 을 사용하는 코드에서는 특별한 효과를 가집니다. : <code>obj instanceof </code><em><code>xpcomInterface </code></em>(예. <code>Components.interfaces.nsIFile</code>)가 <code>obj.QueryInterface(<em>xpcomInterface</em>)</code>를<code> </code>호출하고, 만약 QueryInterface 가 성공하면 <code>true</code> 를 리턴합니다. 이 호출의 부가 효과로는 <code>obj</code> 에서 성공적인 <code>instanceof</code> 테스트 후에 <em><code>xpcomInterface</code></em>'s의 프로퍼티를 사용할 수 있습니다. 스탠다드 JavaScript 전역속성들과는 달리, 테스트 <code>obj instanceof xpcomInterface</code>는 <code>obj</code>가 다른 스코프에 있더라도 작동합니다.</div> + +<h2 id="예제">예제</h2> + +<h3 id="String과_Date는_타입_Object이며_예외적인_경우임을_입증하기"><code>String</code>과 <code>Date</code>는 타입 <code>Object</code>이며, 예외적인 경우임을 입증하기</h3> + +<p>아래의 코드는 <code>instanceof</code> 를 <code>String</code> 과 <code>Date</code> 오브젝트도 타입 <code>Object</code>임을 확인하기 위해 사용합니다.(이 오브젝트들은 <code>Object </code>로부터 파생되었습니다.)</p> + +<p>그러나, 여기서 오브젝트 리터럴 노테이션으로 생성된 오브젝트는 예외적입니다. : 비록 프로토 타입이 정의되지 않았지만, <code>instanceof Object</code>는<code> true</code>를 리턴합니다.</p> + +<pre class="brush: js">var simpleStr = "This is a simple string"; +var myString = new String(); +var newStr = new String("String created with constructor"); +var myDate = new Date(); +var myObj = {}; + +simpleStr instanceof String; // returns false, prototype chain을 확인하고, undefined를 찾는다. +myString instanceof String; // returns true +newStr instanceof String; // returns true +myString instanceof Object; // returns true + +myObj instanceof Object; // returns true, undefined prototype 임에도 불구하고 true. +({}) instanceof Object; // returns true, 위의 경우와 동일. + +myString instanceof Date; // returns false + +myDate instanceof Date; // returns true +myDate instanceof Object; // returns true +myDate instanceof String; // returns false +</pre> + +<h3 id="mycar는_타입_Car와_타입_Object임을_입증하기"><code>mycar</code>는 타입 <code>Car</code>와 타입 <code>Object</code>임을 입증하기</h3> + +<p>다음의 코드는 <code>Car</code> 오브젝트 타입과 그 오브젝트 타입의 인스턴스 <code>mycar</code>를 생성합니다. <code>instanceof</code> 연산자는 <code>mycar</code> 오브젝트는 타입 <code>Car</code> 와 타입 <code>Object </code>라는 것은 보여줍니다.</p> + +<pre class="brush: js">function Car(make, model, year) { + this.make = make; + this.model = model; + this.year = year; +} +var mycar = new Car("Honda", "Accord", 1998); +var a = mycar instanceof Car; // returns true +var b = mycar instanceof Object; // returns true +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.8.6', 'The instanceof operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.8.6', 'The instanceof operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> + <p>초기 정의. JavaScript 1.4에서 구현됨.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.operators.instanceof")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Operators/typeof", "typeof")}}</li> + <li>{{jsxref("Symbol.hasInstance")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/new.target/index.html b/files/ko/web/javascript/reference/operators/new.target/index.html new file mode 100644 index 0000000000..9c480c1513 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/new.target/index.html @@ -0,0 +1,93 @@ +--- +title: new.target +slug: Web/JavaScript/Reference/Operators/new.target +tags: + - Classes + - ECMAScript 2015 + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Operators/new.target +--- +<div>{{JSSidebar("Operators")}}</div> + +<p><strong><code>new.target</code></strong> 속성(property)은 함수 또는 생성자가 <a href="/ko/docs/Web/JavaScript/Reference/Operators/new">new</a> 연산자를 사용하여 호출됐는지를 감지할 수 있습니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/new">new</a> 연산자로 인스턴스화된 생성자 및 함수에서, <code>new.target</code>은 생성자 또는 함수 참조를 반환합니다. 일반 함수 호출에서는, <code>new.target</code>은 {{jsxref("undefined")}}입니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-newtarget.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">new.target</pre> + +<h2 id="설명">설명</h2> + +<p><code>new.target</code> 구문은 키워드 "<code>new</code>", 점 및 속성명 "<code>target</code>"으로 구성됩니다. 보통 "<code>new.</code>"은 속성 접근을 위한 문맥(context)으로 제공하지만 여기서 "<code>new.</code>"은 정말 객체가 아닙니다. 그러나, 생성자 호출에서 <code>new.target</code>은 <code>new</code>에 의해 호출된 생성자를 가리키고 그래서 "<code>new.</code>"은 가상 문맥이 됩니다.</p> + +<p><code>new.target</code> 속성은 모든 함수가 이용할 수 있는 메타 속성입니다. <a href="/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션">화살표 함수</a>에서, <code>new.target</code>은 둘러싸는 함수의 <code>new.target</code>을 말합니다.</p> + +<h2 id="예">예</h2> + +<h3 id="함수_호출에서_new.target">함수 호출에서 new.target</h3> + +<p>일반 함수 호출(생성자 함수 호출과는 반대로)에서, <code>new.target</code>은 {{jsxref("undefined")}}입니다. 이는 함수가 생성자로서 <a href="/ko/docs/Web/JavaScript/Reference/Operators/new">new</a>로 호출된 경우를 감지할 수 있습니다.</p> + +<pre class="brush: js">function Foo() { + if (!new.target) throw "Foo() must be called with new"; + console.log("Foo instantiated with new"); +} + +Foo(); // throws "Foo() must be called with new" +new Foo(); // logs "Foo instantiated with new" +</pre> + +<h3 id="생성자에서_new.target">생성자에서 new.target</h3> + +<p>클래스 생성자에서, <code>new.target</code>은 <code>new</code>에 의해 직접 호출된 생성자를 가리킵니다. 이는 그 생성자가 부모 클래스에 있고 자식 생성자로부터 위임받은 경우도 그 경우입니다.</p> + +<pre class="brush: js">class A { + constructor() { + console.log(new.target.name); + } +} + +class B extends A { constructor() { super(); } } + +var a = new A(); // logs "A" +var b = new B(); // logs "B" +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.operators.new_target")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Reference/Functions">함수</a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Classes">클래스</a></li> + <li><code><a href="/ko/docs/Web/JavaScript/Reference/Operators/new">new</a></code></li> + <li><code><a href="/ko/docs/Web/JavaScript/Reference/Operators/this">this</a></code></li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/new/index.html b/files/ko/web/javascript/reference/operators/new/index.html new file mode 100644 index 0000000000..a28d21de18 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/new/index.html @@ -0,0 +1,187 @@ +--- +title: new operator +slug: Web/JavaScript/Reference/Operators/new +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/new +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong><code>new</code> 연산자</strong>는 사용자 정의 객체 타입 또는 내장 객체 타입의 인스턴스를 생성한다.</p> + +<p>{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}}</p> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">new <em>constructor</em>[([<em>arguments</em>])]</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>constructor</code></dt> + <dd>객체 인스턴스의 타입을 기술(명세)하는 함수</dd> +</dl> + +<dl> + <dt><code>arguments</code></dt> + <dd><code>constructor</code>와 함께 호출될 값 목록</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>사용자 정의 객체를 생성에는 두 단계가 필요하다:</p> + +<ol> + <li>함수를 작성하여 객체 타입을 정의한다.</li> + <li><code>new</code> 연산자로 객체의 인스턴스를 생성한다.</li> +</ol> + +<p>객체의 타입을 정의하기 위해, 객체의 이름과 속성을 명세하는 함수를 만든다. 객체는 그 자체가 또 다른 객체인 속성을 가질 수 있다. 아래의 예를 본다.</p> + +<p>코드 <code>new Foo(...)</code>가 실행될 때 다음과 같은 일이 발생한다:</p> + +<ol> + <li><code>Foo.prototype</code>을 상속하는 새로운 객체가 하나 생성된다.</li> + <li>명시된 인자 그리고 새롭게 생성된 객체에 바인드된 this와 함께 생성자 함수 <code>Foo</code>가 호출된다.<code>new Foo</code>는 <code>new Foo()</code>와 동일하다. 즉 인자가 명시되지 않은 경우, 인자 없이 <code>Foo</code>가 호출된다.</li> + <li>생성자 함수에 의해 리턴된 객체는 전체 <code>new</code> 호출 결과가 된다. 만약 생성자 함수가 명시적으로 객체를 리턴하지 않는 경우, 첫 번째 단계에서 생성된 객체가 대신 사용된다.(일반적으로 생성자는 값을 리턴하지 않는다. 그러나 일반적인 객체 생성을 재정의(override)하기 원한다면 그렇게 하도록 선택할 수 있다.)</li> +</ol> + +<p>언제든 이전에 정의된 객체에 속성을 추가할 수 있다. 예를 들면, <code>car1.color = "black"</code> 구문은 <code>color</code> 속성을 <code>car1</code>에 추가하고 해당 속성에 "<code>black</code>"이란 값을 할당한다. 그러나, 이것이 다른 객체들에게는 영향을 주지 않는다. 동일한 타입의 모든 객체들에게 새로운 속성을 추가하려면, <code>Car</code> 객체 타입의 정의에 이 속성을 추가해야한다.</p> + +<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">Function.prototype</a></code> 속성을 사용하여 이전에 정의된 객체 타입에 공유 속성을 추가할 수 있다. 이것은 객체 타입의 인스턴스 하나에만 적용되는 것이 아니라 이 함수로 생성하는 모든 객체와 공유하는 속성을 정의한다.</p> + +<p>다음의 코드는 <code>car</code> 타입의 모든 객체에 "<code>original color</code>" 값을 갖는 color 속성을 추가한다. 그리고 <code>car1</code> 객체 인스턴스에서만 이 값을 문자열 "<code>black</code>"으로 덮어쓴다. 더 많은 정보는 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">prototype</a>을 참조한다.</p> + +<pre class="brush: js">function Car() {} +car1 = new Car(); +car2 = new Car(); + +console.log(car1.color); // undefined + +Car.prototype.color = "original color"; +console.log(car1.color); // original color + +car1.color = 'black'; +console.log(car1.color); // black + +console.log(car1.__proto__.color) //original color +console.log(car2.__proto__.color) //original color +console.log(car1.color) // black +console.log(car2.color) // original color +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="객체_타입과_객체_인스턴스">객체 타입과 객체 인스턴스</h3> + +<p>cars를 위한 객체 타입을 생성하기 원한다고 가정해 보자. 이 객체 타입이 <code>car</code>로 불리기 원하고, make, model, 그리고 year 속성을 갖게 하고 싶다. 이렇게 하기 위해서 다음과 같은 함수를 작성할 것이다:</p> + +<pre class="brush: js">function Car(make, model, year) { + this.make = make; + this.model = model; + this.year = year; +} +</pre> + +<p>이제 다음과 같이, <code>mycar</code>로 불리는 객체를 생성할 수 있다:</p> + +<pre class="brush: js">var mycar = new Car("Eagle", "Talon TSi", 1993); +</pre> + +<p>이 구문은 <code>mycar</code> 를 생성하고 명시한 값을 속성값으로 설정한다. 그래서 <code>mycar.make</code>의 값은 문자열 "Eagle"이고, <code>mycar.year</code>는 정수 1993이며 나머지도 마찬가지이다.</p> + +<p><code>new</code>를 호출해서 얼마든지 <code>car</code> 객체를 생성할 수 있다. 예를 들면:</p> + +<pre class="brush: js">var kenscar = new Car("Nissan", "300ZX", 1992); +</pre> + +<h3 id="속성_그_자신이_다른_객체인_객체의_속성">속성 그 자신이 다른 객체인 객체의 속성</h3> + +<p><code>person</code>이라고 불리는 객체를 다음과 같이 정의한다고 가정해보자:</p> + +<pre class="brush: js">function Person(name, age, sex) { + this.name = name; + this.age = age; + this.sex = sex; +} +</pre> + +<p>그리고 다음과 같이 두 개의 <code>person</code> 객체 인스턴스를 새롭게 생성한다:</p> + +<pre class="brush: js">var rand = new Person("Rand McNally", 33, "M"); +var ken = new Person("Ken Jones", 39, "M"); +</pre> + +<p>그런 다음 <code>owner</code> 속성을 포함하는 <code>car</code>의 정의를 다시 쓸 수 있다. 이 owner 속성은 다음과 같은 person 객체를 취한다:</p> + +<pre class="brush: js">function Car(make, model, year, owner) { + this.make = make; + this.model = model; + this.year = year; + this.owner = owner; +} +</pre> + +<p>새로운 객체의 인스턴스를 생성하기 위해 다음과 같이 사용한다:</p> + +<pre class="brush: js">var car1 = new Car("Eagle", "Talon TSi", 1993, rand); +var car2 = new Car("Nissan", "300ZX", 1992, ken); +</pre> + +<p>새로운 객체를 생성할 때 문자열이나 숫자 값을 넘겨주는 대신에, 위의 구문은 owner를 위한 매개변수로 <code>rand</code>와 <code>ken</code> 객체를 넘겨준다. <code>car2</code>의 owner name을 확인해보기 위해서, 다음의 속성에 접근할 수 있다:</p> + +<pre class="brush: js">car2.owner.name +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-new-operator', 'The new Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-new-operator', 'The new Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.2.2', 'The new Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.2.2', 'The new Operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.2.2', 'The new Operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.operators.new")}}</p> + +<h2 id="관련_문서">관련 문서</h2> + +<ul> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Reflect.construct()")}}</li> + <li>{{jsxref("Object.prototype")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/nullish_coalescing_operator/index.html b/files/ko/web/javascript/reference/operators/nullish_coalescing_operator/index.html new file mode 100644 index 0000000000..cae74ea29d --- /dev/null +++ b/files/ko/web/javascript/reference/operators/nullish_coalescing_operator/index.html @@ -0,0 +1,161 @@ +--- +title: Nullish coalescing operator +slug: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator +translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator +--- +<p>{{JSSidebar("Operators")}}</p> + +<p><strong>널 병합 연산자 (<code>??</code>)</strong> 는 왼쪽 피연산자가 {{jsxref("null")}} 또는 {{jsxref("undefined")}}일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다.</p> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR_2">논리 연산자 OR (<code>||</code>)</a>와 달리, 왼쪽 피연산자가 <code>null</code> 또는 <code>undefined</code>가 아닌 <em><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Description">falsy</a> </em>값이면 반환된다. 즉, 만약 다른 변수 foo에게 기본 값을 제공하기 위해 <code>||</code>을 사용 경우, <em><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Description">falsy</a> </em>값( <code>''</code> 또는 <code>0</code>)을 사용하는 것을 고려했다면 예기치 않는 동작이 발생할 수 있다. 더 많은 예제는 아래를 보자.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-nullishcoalescingoperator.html")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.<br> + 이 예제의 추가는 <a href="https://github.com/mdn/interactive-examples/pull/1482#issuecomment-553841750">PR #1482</a>를 참조해라.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox notranslate"><var>leftExpr</var> ?? <var>rightExpr</var> +</pre> + +<h2 id="설명">설명</h2> + +<p>널 병합 연산자는 만약 왼쪽 표현식이 {{jsxref("null")}} 또는 {{jsxref("undefined")}}인 경우, 오른쪽 표현식의 결과를 반환한다.</p> + +<h3 id="변수에_기본값_할당">변수에 기본값 할당</h3> + +<p>이전에는 변수에 기본값을 할당하고 싶을 때, 논리 연산자 OR (<code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR_2">||</a></code>)을 사용하는 것이 일반적인 패턴이다:</p> + +<pre class="brush: js notranslate">let foo; +... +// foo is never assigned any value so it is still undefined +let someDummyText = foo || 'Hello!';</pre> + +<p>그러나 <code>||</code> boolean 논리 연산자 때문에, 왼쪽 피연산자는 boolean으로 강제로 변환되었고 <em>falsy</em> 한 값(<code>0</code>, <code>''</code>, <code>NaN</code>, <code>null</code>, <code>undefined</code>)은 반환되지 않았다. 이 동작은 만약 <code>0</code>, <code>''</code> or <code>NaN</code>을 유효한 값으로 생각한 경우 예기치 않는 결과를 초래할 수 있다.</p> + +<pre class="brush: js notranslate">let count; +let text; +... +count = 0; +text = ""; +... +let qty = count || 42; +let message = text || "hi!"; +console.log(qty); // 42 and not 0 +console.log(message); // "hi!" and not "" +</pre> + +<p>널 병합 연산자는 첫 번째 연산자가 <code>null</code> 또는 <code>undefined</code>로 평가될 때만, 두 번째 피연산자를 반환함으로써 이러한 위험을 피한다:</p> + +<pre class="brush: js notranslate">let myText = ''; // An empty string (which is also a falsy value) + +let notFalsyText = myText || 'Hello world'; +console.log(notFalsyText); // Hello world + +let preservingFalsy = myText ?? 'Hi neighborhood'; +console.log(preservingFalsy); // '' (as myText is neither undefined nor null) +</pre> + +<h3 id="단락">단락</h3> + +<p>OR과 AND 같은 논리 연산자들과 마찬가지로, 만약 왼쪽이 <code>null</code> 또는 <code>undefined</code>가 아님이 판명되면 오른쪽 표현식은 평가되지 않는다.</p> + +<pre class="brush: js notranslate">function A() { console.log('A was called'); return undefined;} +function B() { console.log('B was called'); return false;} +function C() { console.log('C was called'); return "foo";} + +console.log( A() ?? C() ); +// logs "A was called" then "C was called" and then "foo" +// as A() returned undefined so both expressions are evaluated + +console.log( B() ?? C() ); +// logs "B was called" then "false" +// as B() returned false (and not null or undefined), the right +// hand side expression was not evaluated +</pre> + +<h3 id="No_chaining_with_AND_or_OR_operators">No chaining with AND or OR operators</h3> + +<p>AND (<code>&&</code>) 와 OR 연산자 (<code>||</code>)를 <code>??</code>와 직접적으로 결합하여 사용하는 것은 불가능하다. 이 경우 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code>가 발생된다.</p> + +<pre class="brush: js notranslate">null || undefined ?? "foo"; // raises a SyntaxError +true || undefined ?? "foo"; // raises a SyntaxError</pre> + +<p>그러나 우선 순위를 명시적으로 나타내기 위해 괄호를 사용하면 가능하다:</p> + +<pre class="brush: js notranslate">(null || undefined ) ?? "foo"; // returns "foo" +</pre> + +<h3 id="Optional_chaining_연산자.와의_관계">Optional chaining 연산자(<code>?.</code>)와의 관계</h3> + +<p>널 병합 연산자는 명확한 값으로 <code>undefined</code>과 <code>null</code>을 처리하고, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining">optional chaining 연산자 (<code>?.</code>)</a>는 <code>null</code> or <code>undefined</code>일 수 있는 객체의 속성에 접근할 때 유용하다.</p> + +<pre class="brush: js notranslate">let foo = { someFooProp: "hi" }; + +console.log(foo.someFooProp?.toUpperCase()); // "HI" +console.log(foo.someBarProp?.toUpperCase()); // undefined +</pre> + +<h2 id="예제">예제</h2> + +<p>이 예제는 기본 값을 제공하지만 <code>null</code> or <code>undefined</code> 이외의 값을 를 유지한다. </p> + +<pre class="brush: js notranslate">function getMiscObj(){ + return { + aNullProperty: null, + emptyText: "", // this is not falsy + someNumber: 42 + }; +}; + +const miscObj = getMiscObj(); + +const newObj = {}; +newObj.propA = miscObj.aNullProperty ?? "default for A"; +newObj.propB = miscObj.emptyText ?? "default for B"; +newObj.propC = miscObj.someNumber ?? 0; + +console.log(newObj.propA); // "default for A" +console.log(newObj.propB); // "" (as the empty string is not null or undefined) +console.log(newObj.propC); // 42 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://tc39.es/proposal-nullish-coalescing/#top">Proposal for the "nullish coalescing" operator</a></td> + <td>Stage 3</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.operators.nullish_coalescing")}}</p> + +<h3 id="구현_진행">구현 진행</h3> + +<p>The following table provides a daily implementation status for this feature, because this feature has not yet reached cross-browser stability. The data is generated by running the relevant feature tests in <a href="https://github.com/tc39/test262">Test262</a>, the standard test suite of JavaScript, in the nightly build, or latest release of each browser's JavaScript engine.</p> + +<div>{{EmbedTest262ReportResultsTable("coalesce-expression")}}</div> + +<h2 id="참고">참고</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining">The optional chaining operator</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR_2">The logical OR (<code>||</code>) operator</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default paramaters in functions</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/object_initializer/index.html b/files/ko/web/javascript/reference/operators/object_initializer/index.html new file mode 100644 index 0000000000..825c854848 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/object_initializer/index.html @@ -0,0 +1,302 @@ +--- +title: 객체 초기자 +slug: Web/JavaScript/Reference/Operators/Object_initializer +tags: + - ECMAScript 2015 + - ECMAScript6 + - JSON + - JavaScript + - Literal + - Methods + - Object + - Primary Expression + - computed + - mutation + - properties +translation_of: Web/JavaScript/Reference/Operators/Object_initializer +--- +<div>{{JsSidebar("Operators")}}</div> + +<p>객체는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>new Object()</code></a>, <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a></code> 또는 <em>리터럴</em> 표기법 (<em>initializer</em> 표기법)을 사용하여 초기화될 수 있습니다. 객체 초기자(object initializer)는 0개 이상인 객체 속성명 및 관련값 쌍 목록이 콤마로 분리되어 중괄호(<code>{}</code>)로 묶인 형태입니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/expressions-objectinitializer.html", "taller")}}</p> + +<div class="hidden"> +<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="brush: js notranslate">var o = {}; +var o = { a: "foo", b: 42, c: {} }; + +var a = "foo", b = 42, c = {}; +var o = { a: a, b: b, c: c }; + +var o = { + <var>property: function </var>([<var>parameters</var>]) {}, + get <var>property</var>() {}, + set <var>property</var>(<var>value</var>) {}, +}; +</pre> + +<h3 id="ECMAScript_2015의_새로운_표기법">ECMAScript 2015의 새로운 표기법</h3> + +<p>이 표기법에 대한 지원은 호환성 표를 참조해 주세요. 비지원 환경에서, 이 표기법은 구문 오류로 이어집니다.</p> + +<pre class="brush: js notranslate">// 단축 속성명 (ES2015) +let a = "foo", b = 42, c = {} +let o = { a, b, c } + +// 단축 메서드명 (ES2015) +var o = { + <var>property</var>([<var>parameters</var>]) {} +} + +// 계산된 속성명 (ES2015) +var prop = 'foo' +var o = { + [prop]: 'hey', + ['b' + 'ar']: 'there' +}</pre> + +<h2 id="설명">설명</h2> + +<p>객체 초기자는 {{jsxref("Object")}}의 초기화를 기술하는 표현식(expression)입니다. 객체는 객체를 설명하는 데 사용되는<em>속성</em>으로 구성됩니다. 객체의 속성값은 {{Glossary("primitive")}} 데이터 형 또는 다른 객체를 포함할 수 있습니다.</p> + +<h3 id="객체_리터럴_표기법_vs_JSON">객체 리터럴 표기법 vs JSON</h3> + +<p>객체 리터럴 표기법은 <strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation (<a href="/ko/docs/Glossary/JSON">JSON</a>)과 같지 않습니다. 비슷해 보이지만, 차이가 있습니다:</p> + +<ul> + <li>JSON은 <code>"property": value</code> 구문을 사용한 속성 정의<em>만</em> 허용합니다. 속성명은 큰 따옴표로 묶여야 하고, 정의는 단축(명)일 수 없습니다.</li> + <li>JSON에서 값은 오직 문자열, 숫자, 배열, <code>true</code>, <code>false</code>, <code>null</code> 또는 다른 (JSON) 객체만 될 수 있습니다.</li> + <li>함수 값(아래 "메서드" 참조)은 JSON에서 값에 할당될 수 없습니다.</li> + <li>{{jsxref("Date")}} 같은 객체는 {{jsxref("JSON.parse()")}} 후에 문자열이 됩니다.</li> + <li>{{jsxref("JSON.parse()")}}는 계산된 속성명을 거부하고 오류를 발생합니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="객체_생성">객체 생성</h3> + +<p>속성이 없는 빈 객체는 다음과 같이 만들 수 있습니다:</p> + +<pre class="brush: js notranslate">var object = {};</pre> + +<p>그러나, 리터럴(<em>literal</em>) 또는 초기자(<em>initializer</em>) 표기법의 이점은, 빠르게 중괄호 내 속성이 있는 객체를 만들 수 있다는 것입니다. 당신은 그저 쉼표로 구분된 <strong><code>키: 값</code></strong> 쌍 목록을 표기합니다.</p> + +<p>다음 코드는 키가 <code>"foo"</code>, <code>"age"</code> 및 <code>"baz"</code>인 세 속성이 있는 객체를 만듭니다. 이들 키값은 문자열 <code>"bar"</code>, 숫자 <code>42</code> 그리고 세 번째 속성은 그 값으로 다른 객체를 갖습니다.</p> + +<pre class="brush: js notranslate">var object = { + foo: "bar", + age: 42, + baz: { myProp: 12 }, +}</pre> + +<h3 id="속성_접근">속성 접근</h3> + +<p>일단 객체를 생성하면, 읽거나 바꿀 수 있습니다. 객체 속성은 점 표기법 또는 각괄호 표기법을 사용하여 액세스될 수 있습니다. (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors" title="property accessors">속성 접근자</a> 참조.)</p> + +<pre class="brush: js notranslate">object.foo; // "bar" +object["age"]; // 42 + +object.foo = "baz"; +</pre> + +<h3 id="속성_정의">속성 정의</h3> + +<p>우리는 이미 초기자 구문을 사용한 속성 표기법을 배웠습니다. 가끔, 객체 안에 두고 싶은 코드 속 변수가 있습니다. 다음과 같은 코드가 보입니다:</p> + +<pre class="brush: js notranslate">var a = "foo", + b = 42, + c = {}; + +var o = { + a: a, + b: b, + c: c +};</pre> + +<p>ECMAScript 2015의 경우, 똑같은 일을 할 수 있는 더 짧은 표기법이 있습니다:</p> + +<pre class="brush: js notranslate">var a = "foo", + b = 42, + c = {}; + +// 단축 속성명 (ES6) +var o = { a, b, c } + +// 다시 말해서, +console.log((o.a === {a}.a)) // true +</pre> + +<h4 id="중복된_속성명">중복된 속성명</h4> + +<p>속성이 같은 이름을 쓰는 경우, 두 번째 속성은 첫 번째를 겹쳐씁니다.</p> + +<pre class="brush: js notranslate">var a = {x: 1, x: 2}; +console.log(a); // {x: 2} +</pre> + +<p>ECMAScript 5 엄격 모드 코드에서, 중복된 속성명은 {{jsxref("SyntaxError")}}로 간주됐습니다. 런타임에 중복을 가능케 하는 속성 계산명 도입으로, ECMAScript 2015는 이 제한을 제거했습니다.</p> + +<pre class="brush: js notranslate">function haveES6DuplicatePropertySemantics(){ + "use strict"; + try { + ({ prop: 1, prop: 2 }); + + // 오류 미 발생, 중복 속성명은 엄격 모드에서 허용됨 + return true; + } catch (e) { + // 오류 발생, 중복은 엄격 모드에서 금지됨 + return false; + } +}</pre> + +<h3 id="메서드_정의">메서드 정의</h3> + +<p>객체의 속성은 <a href="/ko/docs/Web/JavaScript/Reference/Functions">함수</a>나 <a href="/ko/docs/Web/JavaScript/Reference/Functions/get">getter</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Functions/set">setter</a> 메서드를 참조할 수도 있습니다.</p> + +<pre class="brush: js notranslate">var o = { + <var>property: function </var>([<var>parameters</var>]) {}, + get <var>property</var>() {}, + set <var>property</var>(<var>value</var>) {}, +};</pre> + +<p>ECMAScript 2015에서는, 단축 표기법을 이용할 수 있습니다, 그래서 키워드 "<code>function</code>"은 더 이상 필요치 않습니다.</p> + +<pre class="brush: js notranslate">// 단축 메서드 명 (ES6) +var o = { + <var>property</var>([<var>parameters</var>]) {}, +}</pre> + +<p>ECMAScript 2015에는 값이 생성기 함수인 속성을 간결하게 정의하는 법도 있습니다:</p> + +<pre class="brush: js notranslate">var o = { + *<var>generator</var>() { + ........... + } +};</pre> + +<p>ECMAScript 5에서는 다음과 같이 작성할 수 있습니다 (하지만 ES5는 생성기가 없음을 주의하세요):</p> + +<pre class="brush: js notranslate">var o = { + generator<var>Method: function* </var>() { + ........... + } +};</pre> + +<p>메서드에 관한 자세한 사항 및 예는, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions">메서드 정의</a> 참조.</p> + +<h3 id="계산된_속성명">계산된 속성명</h3> + +<p>ECMAScript 2015를 시작으로, 객체 초기화 구문은 계산된 속성명(computed property name)도 지원합니다. 각괄호 <code>[]</code> 안에 식을 넣을 수 있고, 식이 계산되고 그 결과가 속성명으로 사용됩니다. 이는 이미 속성을 읽고 설정하는 데 사용했을 수 있는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors" title="property accessor">속성 접근자</a> 구문의 각괄호 표기법을 연상시킵니다. </p> + +<p>이제 당신은 객체 리터럴에서도 같은 구문을 쓸 수 있습니다:</p> + +<pre class="brush: js notranslate">// 계산된 속성명 (ES6) +var i = 0; +var a = { + ["foo" + ++i]: i, + ["foo" + ++i]: i, + ["foo" + ++i]: i +}; + +console.log(a.foo1); // 1 +console.log(a.foo2); // 2 +console.log(a.foo3); // 3 + +var param = 'size'; +var config = { + [param]: 12, + ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4 +}; + +console.log(config); // { size: 12, mobileSize: 4 }</pre> + +<h3 id="전개_속성">전개 속성</h3> + +<p><a href="https://github.com/tc39/proposal-object-rest-spread">ECMASCript의 나머지/전개 속성</a> 제안 (stage 4) 으로 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">전개(spread)</a> 속성이 객체 리터럴에 추가됩니다. 이 속성은 제공된 객체의 열거 가능한(enumerable) 속성을 새 객체로 복사합니다.</p> + +<p>(<code>prototype</code>을 제외하는) 얕은 복제(Shallow-cloning) 나 객체 합침(merging objects)이 이제{{jsxref("Object.assign()")}} 보다 짧은 문법으로 가능해집니다.</p> + +<pre class="notranslate">let obj1 = { foo: 'bar', x: 42 } +let obj2 = { foo: 'baz', y: 13 } + +let clonedObj = { ...obj1 } +// Object { foo: "bar", x: 42 } + +let mergedObj = { ...obj1, ...obj2 } +// Object { foo: "baz", x: 42, y: 13 }</pre> + +<div class="blockIndicator warning"> +<p>{{jsxref("Object.assign()")}}는 <a href="https://wiki.developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/set">setters</a>를 작동시키지만, 전개 연산자(spread operator)는 아니라는 걸 주목하세요!</p> +</div> + +<h3 id="프로토타입_변이">프로토타입 변이</h3> + +<p><code>__proto__: value</code> 또는 <code>"__proto__": value</code> 형태의 속성 정의는 이름이 <code>__proto__</code>인 속성을 만들지 않습니다. 대신, 제공된 값이 객체 또는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>이면, 생성된 객체의 <code>[[Prototype]]</code>을 그 값으로 바꿉니다. (값이 객체나 null이 아니면, 객체는 바뀌지 않습니다.)</p> + +<pre class="brush: js notranslate">var obj1 = {}; +assert(Object.getPrototypeOf(obj1) === Object.prototype); + +var obj2 = { __proto__: null }; +assert(Object.getPrototypeOf(obj2) === null); + +var protoObj = {}; +var obj3 = { "__proto__": protoObj }; +assert(Object.getPrototypeOf(obj3) === protoObj); + +var obj4 = { __proto__: "not an object or null" }; +assert(Object.getPrototypeOf(obj4) === Object.prototype); +assert(!obj4.hasOwnProperty("__proto__")); +</pre> + +<p>단일 프로토타입 변이(mutation)만 객체 리터럴에 허용됩니다: 다중 프로토타입 변이는 구문 오류입니다.</p> + +<p>"colon" 표기법을 쓰지 않는 속성 정의는 프로토타입 변이가 아닙니다: 그들은 다른 이름을 사용하는 비슷한 정의와 동일하게 동작하는 속성 정의입니다.</p> + +<pre class="brush: js notranslate">var __proto__ = "variable"; + +var obj1 = { __proto__ }; +assert(Object.getPrototypeOf(obj1) === Object.prototype); +assert(obj1.hasOwnProperty("__proto__")); +assert(obj1.__proto__ === "variable"); + +var obj2 = { __proto__() { return "hello"; } }; +assert(obj2.__proto__() === "hello"); + +var obj3 = { ["__prot" + "o__"]: 17 }; +assert(obj3.__proto__ === 17); +</pre> + +<h2 id="스펙">스펙</h2> + +<table> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("javascript.operators.object_initializer")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a></li> + <li><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/get">get</a></code> / <code><a href="/ko/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions">메서드 정의</a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Lexical_grammar" title="Lexical grammar">어휘 문법</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/optional_chaining/index.html b/files/ko/web/javascript/reference/operators/optional_chaining/index.html new file mode 100644 index 0000000000..cdf88c138b --- /dev/null +++ b/files/ko/web/javascript/reference/operators/optional_chaining/index.html @@ -0,0 +1,187 @@ +--- +title: Optional chaining +slug: Web/JavaScript/Reference/Operators/Optional_chaining +translation_of: Web/JavaScript/Reference/Operators/Optional_chaining +--- +<div>{{JSSidebar("Operators")}}</div> + +<p>{{SeeCompatTable}}</p> + +<p><strong>optional chaining</strong> 연산자 <strong><code>?.</code></strong> 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. <span class="seoSummary"><code>?.</code> 연산자는 <code>.</code> 체이닝 연산자와 유사하게 작동하지만, 만약 참조가 {{glossary("nullish")}} ({{JSxRef("null")}} 또는 {{JSxRef("undefined")}})이라면, 에러가 발생하는 것 대신에 표현식의 리턴 값은 <code>undefined</code>로 단락된다.</span> 함수 호출에서 사용될 때, 만약 주어진 함수가 존재하지 않는다면, <code>undefined</code>를 리턴한다.</p> + +<p>이것은 참조가 누락될 가능성이 있는 경우 연결된 속성으로 접근할 때 더 짧고 간단한 표현식이 생성된다. 어떤 속성이 필요한지에 대한 보증이 확실하지 않는 경우 객체의 내용을 탐색하는 동안 도움이 될 수 있다.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html")}}</div> + +<div></div> + +<p class="hidden">이 대화식 예제의 소스는 GitHub repository에 저장된다. 만약 너가 대화식 예제 프로젝트에 기여하려면, <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>를 복제(clone)하고 풀 리퀘스트를 보내라.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><var>obj</var>?.<var>prop</var> +<var>obj</var>?.[<var>expr</var>] +<em>arr</em>?.[<var>index</var>] +<var>func</var>?.(<var>args</var>) +</pre> + +<h2 id="설명">설명</h2> + +<p>optional chaining 연산자는 참조나 기능이 <code>undefined</code> 또는 <code>null</code>일 수 있을 때 연결된 객체의 값에 접근하는 단순화할 수 있는 방법을 제공한다.</p> + +<p>예를 들어, 중첩된 구조를 가진 객체에서 <code>obj</code>가 있다. optional chaining이 없이 깊이 중첩된 하위 속성을 찾으려면, 다음과 같이 참조를 확인해야 한다:</p> + +<pre class="brush: js">let nestedProp = obj.first && obj.first.second;</pre> + +<p><code>obj.first</code>의 값은 <code>obj.first.second</code>의 값에 접근하기 전에 <code>null</code> (그리고 <code>undefined</code>)가 아니라는 점을 검증한다. 이는 만약에 <code>obj.first</code>를 테스트 없이 <code>obj.first.second</code> 에 직접 접근할 때 일어날 수 있는 에러를 방지한다. </p> + +<p>그러나 optional chaining 연산자(<code>?.</code>)를 사용하여, <code>obj.first.second</code> 에 접근하기 전에 <code>obj.first</code>의 상태에 따라 명시적으로 테스트하거나 단락시키지 않아도 된다:</p> + +<pre class="brush: js">let nestedProp = obj.first?.second;</pre> + +<p><code>.</code> 대신에 <code>?.</code> 연산자를 사용함으로써, 자바스크립트는 <code>obj.first.second</code>에 접근하기 전에 <code>obj.first</code>가 <code>null</code> 또는 <code>undefined</code>가 아니라는 것을 암묵적으로 확인하는 것을 알고 있다. 만약 <code>obj.first</code>가 <code>null</code> 또는 <code>undefined</code>이라면, 그 표현식은 자동으로 단락되어 <code>undefined</code>가 반환된다.</p> + +<p>이는 다음과 같다:</p> + +<pre class="brush: js">let nestedProp = ((obj.first === null || obj.first === undefined) ? undefined : obj.first.second);</pre> + +<h3 id="함수의_호출과_Optional_chaining">함수의 호출과 Optional chaining</h3> + +<p>존재하지 않을 수 있는 매서드를 호출할 때, optional chaining을 사용할 수 있다. 예를 들어, 구현 기간이나 사용자 장치에서 사용할 수 없는 기능 때문에 메서드를 사용할 수 없는 API를 사용할 경우, 유용할 수 있다.</p> + +<p>함수 호출과 optional chaining을 사용함으로써 메서드를 찾을 수 없는 경우에 예외를 발생시키는 것 대신에 그 표현식은 자동으로 <code>undefined</code>를 반환한다:</p> + +<pre class="brush: js">let result = someInterface.customMethod?.();</pre> + +<div class="blockIndicator note"> +<p><strong>메모:</strong> 만약 속성에 해당 이름이 있지만 함수가 아니라면, <code>?.</code>의 사용은 여전히 예외를 발생시킨다. {{JSxRef("TypeError")}} exception (<code>x.y</code><code> is not a function</code>).</p> +</div> + +<h4 id="optional_callbacks과_event_handlers_다루기">optional callbacks과 event handlers 다루기</h4> + +<p>만약 객체에서 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring">destructuring assignment</a>로 callbacks 또는 fetch 메서드를 사용한다면, 그 존재 여부를 테스트하지 않으면 함수로 호출할 수 없는 존재 하지 않는 값을 가질 수 있다. <code>?.</code>을 사용하면, 다음 추가 테스트를 피할 수 있다:</p> + +<pre class="brush: js">// Written as of ES2019 +function doSomething(onContent, onError) { + try { + // ... do something with the data + } + catch (err) { + if (onError) { // Testing if onError really exists + onError(err.message); + } + } +} +</pre> + +<pre class="brush: js">// Using optional chaining with function calls +function doSomething(onContent, onError) { + try { + // ... do something with the data + } + catch (err) { + onError?.(err.message); // no exception if onError is undefined + } +} +</pre> + +<h3 id="표현식에서_Optional_chaining">표현식에서 Optional chaining</h3> + +<p>optional chaining 연산자를 속성에 표현식으로 접근할 때 대괄호 표기법(<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Bracket_notation">the bracket notation of the property accessor</a>)을 사용할 수 있다:</p> + +<pre class="brush: js">let nestedProp = obj?.['prop' + 'Name']; +</pre> + +<h3 id="Optional_chaining으로_배열_항목에_접근하기">Optional chaining으로 배열 항목에 접근하기</h3> + +<pre class="brush: js">let arrayItem = arr?.[42];</pre> + +<h2 id="예제">예제</h2> + +<h3 id="기본_예제">기본 예제</h3> + +<p>이 예제는 해당 멤버가 없을 때, map에서 멤버 bar의 <code>name</code>의 속성 값을 찾는다. 그러므로 결과는 <code>undefined</code>이다.</p> + +<pre class="brush: js">let myMap = new Map(); +myMap.set("foo", {name: "baz", desc: "inga"}); + +let nameBar = myMap.get("bar")?.name;</pre> + +<h3 id="단락_평가">단락 평가</h3> + +<p>표현식에서 optional chaining을 사용할 때, 만약 왼쪽에 있는 피연산자가 <code>null</code> or <code>undefined</code>인 경우, 그 표현식은 평가되지 않는다. 예들 들어:</p> + +<pre class="brush: js">let potentiallyNullObj = null; +let x = 0; +let prop = potentiallyNullObj?.[x++]; + +console.log(x); // 0 x는 증가하지 않음 +</pre> + +<h3 id="optional_chaining_연산자_쌓기">optional chaining 연산자 쌓기</h3> + +<p>중첩된 구조에서는 optional chaining을 여러 번 사용할 수 있다:</p> + +<pre class="brush: js">let customer = { + name: "Carl", + details: { + age: 82, + location: "Paradise Falls" // detailed address is unknown + } +}; +let customerCity = customer.details?.address?.city; + +// … this also works with optional chaining function call +let duration = vacations.trip?.getTime?.(); +</pre> + +<h3 id="널_병합_연산자와_같이_사용하기">널 병합 연산자와 같이 사용하기</h3> + +<p>널 병합 연산자는 optional chaining를 사용한 후에 아무 값도 찾을 수 없을 때 기본 값을 주기 위해 사용될 수 있다:</p> + +<pre class="brush: js">let customer = { + name: "Carl", + details: { age: 82 } +}; +const customerCity = customer?.city ?? "Unknown city"; +console.log(customerCity); // Unknown city</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://tc39.es/proposal-optional-chaining/#top">Proposal for the "optional chaining" operator</a></td> + <td>Stage 4</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("javascript.operators.optional_chaining")}}</p> +</div> + +<h3 id="구현_진행">구현 진행</h3> + +<p>The following table provides a daily implementation status for this feature, because this feature has not yet reached cross-browser stability. The data is generated by running the relevant feature tests in <a href="https://github.com/tc39/test262">Test262</a>, the standard test suite of JavaScript, in the nightly build, or latest release of each browser's JavaScript engine.</p> + +<div>{{EmbedTest262ReportResultsTable("optional-chaining")}}</div> + +<h2 id="참고">참고</h2> + +<ul> + <li>The {{JSxRef("Operators/Nullish_Coalescing_Operator", "Nullish Coalescing Operator", '', 1)}}</li> + <li><a href="https://github.com/tc39/proposals">TC39 proposals</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/pipeline_operator/index.html b/files/ko/web/javascript/reference/operators/pipeline_operator/index.html new file mode 100644 index 0000000000..42eb62e545 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/pipeline_operator/index.html @@ -0,0 +1,76 @@ +--- +title: 파이프 연산자 +slug: Web/JavaScript/Reference/Operators/Pipeline_operator +tags: + - Experimental + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator +--- +<div>{{jsSidebar("Operators")}} {{SeeCompatTable}}</div> + +<p><span class="seoSummary"><strong>파이프 연산자</strong>(<code>|></code>)는 실험적 기능(stage 1)으로, 표현식의 값을 함수에 전달합니다. 파이프 연산자를 활용하면 중첩 함수 호출을 좀 더 읽기 좋은 형식으로 작성할 수 있습니다.</span> 결과물은 문법적 설탕<sup>syntactic sugar</sup>으로, 하나의 인수를 제공하는 함수 호출은 다음 코드처럼 쓸 수 있습니다.</p> + +<pre class="brush: js">let url = "%21" |> decodeURI;</pre> + +<p>전통적인 구문에서는 아래처럼 호출합니다.</p> + +<pre class="brush: js">let url = decodeURI("%21"); +</pre> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><em>expression</em> |> <em>function</em> +</pre> + +<p>지정한 <code>expression</code>의 값이 <code>function</code>의 유일한 매개변수로 전달됩니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="함수_체이닝">함수 체이닝</h3> + +<p>파이프 연산자를 사용해, 여러 번 중첩된 함수 호출을 읽기 편한 형태로 바꿀 수 있습니다.</p> + +<pre class="brush: js">const double = (n) => n * 2; +const increment = (n) => n + 1; + +// 파이프 연산자 없이 +double(increment(double(double(5)))); // 42 + +// 파이프 연산자 사용 +5 |> double |> double |> increment |> double; // 42 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://tc39.github.io/proposal-pipeline-operator/#sec-intro">Pipeline operator draft</a></td> + <td>Stage 1</td> + <td>Not part of the ECMAScript specification yet.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("javascript.operators.pipeline")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="https://github.com/tc39/proposal-pipeline-operator">Github - Proposal-pipeline-operator</a></li> + <li><a href="https://github.com/tc39/proposals">TC39 제안서</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/property_accessors/index.html b/files/ko/web/javascript/reference/operators/property_accessors/index.html new file mode 100644 index 0000000000..83ae2e0b80 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/property_accessors/index.html @@ -0,0 +1,153 @@ +--- +title: 속성 접근자 +slug: Web/JavaScript/Reference/Operators/Property_Accessors +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/Property_Accessors +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>속성 접근자</strong>는 점 또는 괄호 표기법으로 객체의 속성에 접근할 수 있도록 해줍니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-propertyaccessors.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">object.property +object['property'] +</pre> + +<h2 id="설명">설명</h2> + +<p>객체는 속성의 이름을 키로 사용하는 연관 배열(다른 이름으로는 맵, 딕셔너리, 해시, 룩업 테이블)로 생각할 수 있습니다. 보통 객체의 속성을 메서드와 구별해서 말하곤 하지만, 서로의 차이는 관례에 불과합니다. 메서드는 호출할 수 있는 속성일 뿐으로, 속성의 값이 {{jsxref("Function")}}을 가리키는 참조라면 그 속성을 메서드라고 합니다.</p> + +<p>속성에 접근하는 법은 점 표기법과 괄호 표기법 두 가지가 있습니다.</p> + +<h3 id="점_표기법">점 표기법</h3> + +<pre class="brush: js">get = object.property; +object.property = set; +</pre> + +<p>이 코드에서, <code>property</code>는 유효한 JavaScript {{glossary("identifier", "식별자")}}여야합니다. 따라서 <code>object.$1</code>은 유효하지만 <code>object.1</code>은 아닙니다.</p> + +<pre class="brush: js">document.createElement('pre'); +</pre> + +<p>여기서는 "createElement"라는 이름을 가진 메서드를 <code>document</code>에서 찾아 호출하고 있습니다.</p> + +<p>소숫점 없는 숫자 리터럴의 메서드를 호출하고 싶으면, 메서드의 접근자 앞에 공백을 한 칸 추가해 점이 소숫점으로 인식되지 않도록 해야 합니다.</p> + +<pre><code>77 .toExponential(); +// or +77 +.toExponential(); +// or +(77).toExponential(); +// or +77..toExponential(); +// or +77.0.toExponential(); +// because 77. === 77.0, no ambiguity</code> +</pre> + +<h3 id="괄호_표기법">괄호 표기법</h3> + +<pre class="brush: js">get = object[property_name]; +object[property_name] = set; +</pre> + +<p>괄호 표기법에서는 <code>property_name</code>으로 문자열이나 {{jsxref("Symbol")}}을 사용할 수 있습니다. 문자열은 유효한 식별자가 아니어도 괜찮습니다. "<code>1foo</code>", "<code>!bar!</code>", 심지어 "<code> </code>"(공백)도 가능합니다.</p> + +<pre class="brush: js">document['createElement']('pre'); +</pre> + +<p>이 코드는 점 표기법의 예시와 동일합니다.</p> + +<p>괄호 앞에 공백이 올 수도 있습니다.</p> + +<pre><code>document ['createElement']('pre');</code> +</pre> + +<h3 id="속성_이름">속성 이름</h3> + +<p>속성의 이름은 문자열이나 {{jsxref("Symbol")}}입니다. 숫자 등의 다른 자료형은 문자열로 변환됩니다.</p> + +<pre class="brush: js">var object = {}; +object['1'] = 'value'; +console.log(object[1]); +</pre> + +<p>위 코드의 <code>1</code>은 <code>'1'</code>로 변환되므로, 출력 결과는 "value"입니다.</p> + +<pre class="brush: js">var foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {}; +object[foo] = 'value'; +console.log(object[bar]); +</pre> + +<p>위의 코드 역시 <code>foo</code>와 <code>bar</code>가 같은 문자열(<a href="/ko/docs/SpiderMonkey">SpiderMonkey</a> JavaScript 엔진에서는 문자열 "<code>['object Object']</code>")로 변환되므로, 출력 결과는 동일하게 "value"입니다.</p> + +<h3 id="메서드_바인딩">메서드 바인딩</h3> + +<p>메서드는 해당 메서드의 객체에 바인딩되지 않습니다. 특히 <code>this</code>는 메서드 내에 고정되지 않으므로 <code>this</code>가 항상 현재 메서드를 포함하는 객체를 참조하는건 아닙니다. 대신, <code>this</code>는 함수 호출 방식에 따라 "전달"됩니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/this#bind_메서드" title="method binding">메서드 바인딩</a>을 참고하세요.</p> + +<h3 id="eval()_주의사항"><code>eval()</code> 주의사항</h3> + +<p>JavaScript 초심자로써는 괄호 표기법을 사용할 수 있는 장소에 {{jsxref("eval", "eval()")}}을 남용하기 쉽습니다. 간혹 스크립트에서 다음과 같은 구문을 찾아볼 수 있습니다.</p> + +<pre class="brush: js">x = eval('document.forms.form_name.elements.' + strFormControl + '.value'); +</pre> + +<p><code>eval()</code>은 느리고, 가능하다면 최대한 피해야 합니다. 또한, <code>strFormControl</code>은 유효한 식별자여야 하지만, 폼 컨트롤의 ID나 이름은 식별자가 아닐 수도 있습니다. 따라서 괄호 표기법을 대신 사용하는 것이 좋습니다.</p> + +<pre class="brush: js">x = document.forms["form_name"].elements[strFormControl].value; +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-property-accessors', 'Property Accessors')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-property-accessors', 'Property Accessors')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.2.1', 'Property Accessors')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.2.1', 'Property Accessors')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>초기 정의. JavaScript 1.0에서 구현됨.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.operators.property_accessors")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Object")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/remainder/index.html b/files/ko/web/javascript/reference/operators/remainder/index.html new file mode 100644 index 0000000000..beeb0033a3 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/remainder/index.html @@ -0,0 +1,73 @@ +--- +title: 나머지 연산자 (%) +slug: Web/JavaScript/Reference/Operators/Remainder +translation_of: Web/JavaScript/Reference/Operators/Remainder +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>나머지 연산자(<code>%</code>)는 피제수가 제수에 의해 나누어진 후, 그 나머지를 반환합니다. 항상 피제수의 부호를 따릅니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-remainder.html")}}</div> + +<div></div> + + + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>var1</var> % <var>var2</var> +</pre> + +<h2 id="예시">예시</h2> + +<h3 id="피제수의_나머지">(+)피제수의 나머지</h3> + +<pre class="brush: js notranslate"> 12 % 5 // 2 + 1 % -2 // 1 + 1 % 2 // 1 + 2 % 3 // 2 +5.5 % 2 // 1.5 +</pre> + +<h3 id="-피제수의_나머지">(-)피제수의 나머지</h3> + +<pre class="brush: js notranslate">-12 % 5 // -2 +-1 % 2 // -1 +-4 % 2 // -0</pre> + +<h3 id="NaN의_나머지">NaN의 나머지</h3> + +<pre class="brush: js notranslate">NaN % 2 // NaN</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Remainder operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.operators.remainder")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition">Addition operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division">Division operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Decrement">Decrement operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/spread_syntax/index.html b/files/ko/web/javascript/reference/operators/spread_syntax/index.html new file mode 100644 index 0000000000..d2174a53bb --- /dev/null +++ b/files/ko/web/javascript/reference/operators/spread_syntax/index.html @@ -0,0 +1,255 @@ +--- +title: 전개 구문 +slug: Web/JavaScript/Reference/Operators/Spread_syntax +tags: + - ECMAScript 2015 + - Iterator + - JavaScript + - Reference + - Spread + - 전개 연산자 +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>전개 구문</strong>을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<p>함수 호출:</p> + +<pre class="syntaxbox">myFunction(...iterableObj); +</pre> + +<p>배열 리터럴과 문자열:</p> + +<pre class="syntaxbox">[...iterableObj, '4', 'five', 6];</pre> + +<p>객체 리터럴(ECMAScript 2018에서 추가):</p> + +<pre class="syntaxbox">let objClone = { ...obj };</pre> + +<h2 id="예제">예제</h2> + +<h3 id="함수_호출에서의_전개">함수 호출에서의 전개</h3> + +<h4 id="apply()_대체"><code>apply()</code> 대체</h4> + +<p>일반적으로 배열의 엘리먼트를 함수의 인수로 사용하고자 할 때 {{jsxref( "Function.prototype.apply()")}} 를 사용하였습니다.</p> + +<pre class="brush: js">function myFunction(x, y, z) { } +var args = [0, 1, 2]; +myFunction.apply(null, args);</pre> + +<p>전개 구문을 사용해 위 코드는 다음과 같이 작성될 수 있습니다.</p> + +<pre class="brush: js">function myFunction(x, y, z) { } +var args = [0, 1, 2]; +myFunction(...args);</pre> + +<p>인수 목록의 모든 인수는 전개 구문을 사용할 수 있으며, 여러번 사용될 수도 있습니다.</p> + +<pre class="brush: js">function myFunction(v, w, x, y, z) { } +var args = [0, 1]; +myFunction(-1, ...args, 2, ...[3]);</pre> + +<h4 id="new에_적용"><code>new</code>에 적용</h4> + +<p>{{jsxref("Operators/new", "new")}}를 사용해 생성자를 호출 할 때, 배열과 <code>apply</code> (<code>apply</code> 는 <code>[[Call]]</code> 을 하지만 <code>[[Construct]]</code> 는 그렇지 않음) 를 <strong>직접</strong> 사용하는 것은 불가했습니다. 하지만, 전개 구문 덕분에 배열을 <code>new</code> 와 함께 쉽게 사용될 수 있습니다.</p> + +<pre class="brush: js">var dateFields = [1970, 0, 1]; // 1 Jan 1970 +var d = new Date(...dateFields); +</pre> + +<p>전개 구문 없이 파라미터의 배열과 함께 <code>new</code>를 사용하려면, 부분적인 어플리케이션을 통해 <strong>간접적</strong>으로 해야 합니다.</p> + +<pre class="brush: js">function applyAndNew(constructor, args) { + function partial () { + return constructor.apply(this, args); + }; + if (typeof constructor.prototype === "object") { + partial.prototype = Object.create(constructor.prototype); + } + return partial; +} + + +function myConstructor () { + console.log("arguments.length: " + arguments.length); + console.log(arguments); + this.prop1="val1"; + this.prop2="val2"; +}; + +var myArguments = ["hi", "how", "are", "you", "mr", null]; +var myConstructorWithArguments = applyAndNew(myConstructor, myArguments); + +console.log(new myConstructorWithArguments); +// (internal log of myConstructor): arguments.length: 6 +// (internal log of myConstructor): ["hi", "how", "are", "you", "mr", null] +// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}</pre> + +<h3 id="배열_리터럴에서의_전개">배열 리터럴에서의 전개</h3> + +<h4 id="더_강력한_배열_리터럴">더 강력한 배열 리터럴</h4> + +<p>전개 구문 없이, 이미 존재하는 배열을 일부로 하는 새로운 배열을 생성하기에, 배열 리터럴 문법은 더 이상 충분하지 않으며 {{jsxref("Array.prototype.push", "push()")}}, {{jsxref("Array.prototype.splice", "splice()")}}, {{jsxref("Array.prototype.concat", "concat()")}} 등의 조합을 사용하는 대신 명령형 코드를 사용해야 했습니다. 전개 구문으로 이는 훨씬 더 간결해졌습니다.</p> + +<pre class="brush: js">var parts = ['shoulders', 'knees']; +var lyrics = ['head', ...parts, 'and', 'toes']; +// ["head", "shoulders", "knees", "and", "toes"] +</pre> + +<p>인수 목록을 위한 spread 처럼, <code>...</code> 은 배열 리터럴의 어디에서든 사용될 수 있으며 여러번 사용될 수도 있습니다.</p> + +<h4 id="배열_복사">배열 복사</h4> + +<pre class="brush: js">var arr = [1, 2, 3]; +var arr2 = [...arr]; // arr.slice() 와 유사 +arr2.push(4); + +// arr2 은 [1, 2, 3, 4] 이 됨 +// arr 은 영향을 받지 않고 남아 있음 +</pre> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> Spread 문법은 배열을 복사할 때 1 레벨 깊이에서 효과적으로 동작합니다. 그러므로, 다음 예제와 같이 다차원 배열을 복사하는것에는 적합하지 않을 수 있습니다. ({{jsxref("Object.assign()")}} 과 전개 구문이 동일합니다)</p> +</div> + +<pre class="brush: js">var a = [[1], [2], [3]]; +var b = [...a]; +b.shift().shift(); // 1 +// 이제 배열 a 도 영향을 받음: [[], [2], [3]] +</pre> + +<h4 id="배열을_연결하는_더_나은_방법">배열을 연결하는 더 나은 방법</h4> + +<p>{{jsxref("Array.prototype.concat()")}} 은 배열을 존재하는 배열의 끝에 이어붙이는데 종종 사용됩니다. 전개 구문 없이, 이는 다음과 같이 작성됩니다.</p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +// arr2 의 모든 항목을 arr1 에 붙임 +arr1 = arr1.concat(arr2);</pre> + +<p>전개 구문을 사용해 이는 다음과 같아집니다.</p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +arr1 = [...arr1, ...arr2]; // arr1 은 이제 [0, 1, 2, 3, 4, 5] +</pre> + +<p>{{jsxref("Array.prototype.unshift()")}}는 존재하는 배열의 시작 지점에 배열의 값들을 삽입하는데 종종 사용됩니다. 전개 구문 없이, 이는 다음과 같이 작성됩니다.</p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +// arr2 의 모든 항목을 arr1 의 앞에 붙임 +Array.prototype.unshift.apply(arr1, arr2) // arr1 은 이제 [3, 4, 5, 0, 1, 2] 가 됨</pre> + +<p>전개 구문으로, 이는 다음과 같아집니다.</p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +arr1 = [...arr2, ...arr1]; // arr1 은 이제 [3, 4, 5, 0, 1, 2] 가 됨 +</pre> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: <code>unshift()</code>와 달리, 위 예제는 새로운 <code>arr1</code>을 만들며 기존 배열을 변형하지 않습니다.</p> +</div> + +<h3 id="객체_리터럴에서의_전개">객체 리터럴에서의 전개</h3> + +<p><a href="https://github.com/tc39/proposal-object-rest-spread">ECMAScript의 Rest/Spread 프로퍼티</a> 제안 (stage 4) 은 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer">객체 리터럴</a>에 속성 전개를 추가합니다. 이는 제공된 객체가 소유한 열거형 프로퍼티를 새로운 객체로 복사합니다.</p> + +<p>얕은 복제(prototype 제외) 또는 객체의 병합은 이제 {{jsxref("Object.assign()")}} 보다 더 짧은 문법을 사용해 가능합니다.</p> + +<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 }; +var obj2 = { foo: 'baz', y: 13 }; + +var clonedObj = { ...obj1 }; +// Object { foo: "bar", x: 42 } + +var mergedObj = { ...obj1, ...obj2 }; +// Object { foo: "baz", x: 42, y: 13 }</pre> + +<p>{{jsxref("Object.assign()")}} 은 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/set">setters</a> 를 트리거하지만 전개 구문은 그렇지 않음을 유의합니다.</p> + +<p>{{jsxref("Object.assign()")}} 함수를 대체하거나 흉내낼 수 없음을 유의합니다.</p> + +<pre><code>var obj1 = { foo: 'bar', x: 42 }; +var obj2 = { foo: 'baz', y: 13 }; +const merge = ( ...objects ) => ( { ...objects } ); + +var mergedObj = merge ( obj1, obj2); +// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } } + +var mergedObj = merge ( {}, obj1, obj2); +// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }</code></pre> + +<p>위 예제에서, 전개 구문은 예상대로 동작하지 않습니다. 나머지 매개변수로 인해, 인수 배열을 객체 리터럴로 전개합니다.</p> + +<h3 id="이터러블_전용">이터러블 전용</h3> + +<p>전개 구문 (spread 프로퍼티인 경우 제외) 은 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator">iterable</a> 객체에만 적용됩니다.</p> + +<pre class="brush: js">var obj = {'key1': 'value1'}; +var array = [...obj]; // TypeError: obj is not iterable +</pre> + +<h3 id="많은_값과_Spread">많은 값과 Spread</h3> + +<p>함수 호출에서 spread 문법을 사용할 때, 자바스크립트 엔진의 인수 길이 제한을 초과하지 않도록 주의합니다. 자세한 내용은 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object)."><code>apply()</code></a> 를 보세요.</p> + +<h2 id="나머지_구문_(매개변수)">나머지 구문 (매개변수)</h2> + +<p>나머지 구문은 전개 구문과 정확히 같아보이지만, 대신 배열이나 객체를 분해할 때 사용됩니다. 어떤 면에서, 나머지 구문은 전개 구문과 반대입니다. 전개는 배열을 그 엘리먼트로 '확장' 하는 반면, 나머지는 여러 엘리먼트를 수집하며 이를 하나의 엘리먼트로 '압축' 합니다. <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">나머지 매개변수</a> 문서를 보세요.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>명세의 여러 섹션에서 정의 됨: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Array Initializer</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Argument Lists</a></td> + </tr> + <tr> + <td>{{SpecName('ES2018', '#sec-object-initializer')}}</td> + <td>{{Spec2('ES2018')}}</td> + <td><a href="http://www.ecma-international.org/ecma-262/9.0/#sec-object-initializer">Object Initializer</a> 에서 정의됨</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>변동 없음.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>변동 없음.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.operators.spread")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">나머지 매개변수</a> (또한 ‘<code>...</code>’)</li> + <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">fn.apply</a> (또한 ‘<code>...</code>’)</li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/super/index.html b/files/ko/web/javascript/reference/operators/super/index.html new file mode 100644 index 0000000000..fbcb123c57 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/super/index.html @@ -0,0 +1,176 @@ +--- +title: super +slug: Web/JavaScript/Reference/Operators/super +tags: + - Classes + - JavaScript + - Left-hand-side expressions + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/super +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>super</strong> 키워드는 부모 오브젝트의 함수를 호출할 때 사용됩니다.</p> + +<p><code>super.prop</code> 와 <code>super[expr]</code> 표현식은 <a href="/ko/docs/Web/JavaScript/Reference/Classes">클래스</a> 와 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer">객체리터럴</a>의 어떠한 <a href="/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions">메서드 정의</a> 방법에서도 유효합니다.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox">super([arguments]); // 부모 생성자 호출 +super.functionOnParent([arguments]); +</pre> + +<h2 id="설명">설명</h2> + +<p>생성자에서는 <code>super</code> 키워드 하나만 사용되거나 <code>this</code> 키워드가 사용되기 전에 호출되어야 합니다. 또한 <code>super</code> 키워드는 부모 객체의 함수를 호출하는데 사용될 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="클래스에서_super_사용하기">클래스에서 <code>super</code> 사용하기</h3> + +<p>이 예제는 옆의 링크에서 발췌하였습니다. <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a>).</p> + +<pre class="brush: js">class Polygon { + constructor(height, width) { + this.name = 'Polygon'; + this.height = height; + this.width = width; + } + sayName() { + console.log('Hi, I am a ', this.name + '.'); + } +} + +class Square extends Polygon { + constructor(length) { + this.height; // 참조오류가 발생합니다. super가 먼저 호출되어야 합니다. + + // 여기서, 부모클래스의 생성자함수를 호출하여 높이값을 넘겨줍니다. + // Polygon의 길이와 높이를 넘겨줍니다. + super(length, length); + + // 참고: 파생 클래스에서 super() 함수가 먼저 호출되어야 + // 'this' 키워드를 사용할 수 있습니다. 그렇지 않을 경우 참조오류가 발생합니다. + this.name = 'Square'; + } + + get area() { + return this.height * this.width; + } + + set area(value) { + this.area = value; + } +}</pre> + +<h3 id="정적_메서드에서_Super_호출">정적 메서드에서 Super 호출</h3> + +<p><a href="/ko/docs/Web/JavaScript/Reference/Classes/static">static</a> 메서드에서도 super를 호출할 수 있습니다.</p> + +<pre class="brush: js">class Human { + constructor() {} + static ping() { + return 'ping'; + } +} + +class Computer extends Human { + constructor() {} + static pingpong() { + return super.ping() + ' pong'; + } +} +Computer.pingpong(); // 'ping pong' +</pre> + +<h3 id="super의_속성_삭제">super의 속성 삭제</h3> + +<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/delete">delete 연산자</a>를 사용할 수 없으며 <code>super.prop</code> 또는 <code>super[expr]</code> 표현식을 사용하여 부모 클래스의 속성을 삭제할 경우 {{jsxref("ReferenceError")}} 오류가 발생합니다.</p> + +<pre class="brush: js">class Base { + constructor() {} + foo() {} +} +class Derived { + constructor() {} + delete() { + delete super.foo; + } +} + +new Derived().delete(); // 참조오류: 'super'완 관련된 삭제가 유효하지 않습니다. </pre> + +<h3 id="Super.prop은_non-writable_속성을_덮어_쓸_수_없습니다"><code>Super.prop</code>은 non-writable 속성을 덮어 쓸 수 없습니다</h3> + +<p>예를 들어 {{jsxref("Object.defineProperty")}}로 속성을 정의할 때, <code>super</code>의 속성 값을 덮어 쓸 수 없습니다.</p> + +<pre class="brush: js">class X { + constructor() { + Object.defineProperty(this, "prop", { + configurable: true, + writable: false, + value: 1 + }); + } + f() { + super.prop = 2; + } +} + +var x = new X(); +x.f(); +console.log(x.prop); // 1 +</pre> + +<h3 id="객체_리터럴에서_super.prop_사용하기">객체 리터럴에서 <code>super.prop</code> 사용하기</h3> + +<p>Super는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer / literal</a> 표기법에서 사용할 수 있습니다. 아래의 예제에서, 두개의 객체는 메서드를 정의합니다. 두번째 객체에서, <code>super</code>는 첫번째 객체의 메서드를 호출합니다. 이 예제는 {{jsxref("Object.setPrototypeOf()")}}를 이용하여 obj2 prototype에 obj1을 세팅하여, <code>super</code>가 obj1의 method1을 찾을 수 있도록 합니다.</p> + +<pre class="brush: js">var obj1 = { + method1() { + console.log("method 1"); + } +} + +var obj2 = { + method2() { + super.method1(); + } +} + +Object.setPrototypeOf(obj2, obj1); +obj2.method2(); // logs "method 1" +</pre> + +<h2 id="명세서">명세서</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-super-keyword', 'super')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.operators.super")}}</p> + +<h2 id="참고">참고</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Reference/Classes">Classes</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/this/index.html b/files/ko/web/javascript/reference/operators/this/index.html new file mode 100644 index 0000000000..8a2807a5d8 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/this/index.html @@ -0,0 +1,398 @@ +--- +title: this +slug: Web/JavaScript/Reference/Operators/this +tags: + - JavaScript + - Operator + - Primary Expressions + - Reference +translation_of: Web/JavaScript/Reference/Operators/this +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>JavaScript에서 <strong>함수의 <code>this</code> 키워드</strong>는 다른 언어와 조금 다르게 동작합니다. 또한 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a>와 비엄격 모드에서도 일부 차이가 있습니다.</p> + +<p>대부분의 경우 <code>this</code>의 값은 함수를 호출한 방법에 의해 결정됩니다. 실행중에는 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있습니다. ES5는 {{jsxref('Operators/this', "함수를 어떻게 호출했는지 상관하지 않고 <code>this</code> 값을 설정할 수 있는")}} {{jsxref("Function.prototype.bind()", "bind")}} 메서드를 도입했고, ES2015는 스스로의 <code>this</code> 바인딩을 제공하지 않는 <a href="/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98">화살표 함수</a>를 추가했습니다(이는 렉시컬 컨텍스트안의 <code>this</code>값을 유지합니다).</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-this.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate">this</pre> + +<h3 id="값">값</h3> + +<p>실행 컨텍스트(global, function 또는 eval)의 프로퍼티는 비엄격 모드에서 항상 객체를 참조하며, 엄격 모드에서는 어떠한 값이든 될 수 있습니다.</p> + +<h2 id="전역_문맥">전역 문맥</h2> + +<p>전역 실행 문맥<sup>global execution context</sup>에서 <code>this</code>는 엄격 모드 여부에 관계 없이 전역 객체를 참조합니다.</p> + +<pre class="brush: js notranslate">// 웹 브라우저에서는 window 객체가 전역 객체 +console.log(this === window); // true + +a = 37; +console.log(window.a); // 37 + +this.b = "MDN"; +console.log(window.b) // "MDN" +console.log(b) // "MDN"</pre> + +<div class="blockIndicator note"> +<p><strong>노트:</strong> global {{jsxref("globalThis")}} 프로퍼티를 사용하여 코드가 실행중인 현재 컨텍스트와 관계없이 항상 전역 객체를 얻을 수 있습니다.</p> +</div> + +<h2 id="함수_문맥">함수 문맥</h2> + +<p>함수 내부에서 <code>this</code>의 값은 함수를 호출한 방법에 의해 좌우됩니다.</p> + +<h3 id="단순_호출">단순 호출</h3> + +<p>다음 예제는 엄격 모드가 아니며 <code>this</code>의 값이 호출에 의해 설정되지 않으므로, 기본값으로 브라우저에서는 {{domxref("Window", "window")}}인 전역 객체를 참조합니다.</p> + +<pre class="brush: js notranslate">function f1() { + return this; +} + +// 브라우저 +f1() === window; // true + +// Node.js +f1() === global; // true</pre> + +<p>반면에 엄격 모드에서 <code>this</code> 값은 실행 문맥에 진입하며 설정되는 값을 유지하므로 다음 예시에서 보여지는 것 처럼 <code>this</code>는 <code>undefined</code>로 남아있습니다.</p> + +<pre class="brush: js notranslate">function f2(){ + "use strict"; // 엄격 모드 참고 + return this; +} + +f2() === undefined; // true +</pre> + +<div class="blockIndicator note"> +<p>두번째 예제에서 <code>f2</code>를 객체의 메서드나 속성(예: <code>window.f2()</code>)으로써가 아닌 직접 호출했기 때문에 <code>this</code>는 {{jsxref("undefined")}}여야 합니다. 그러나 엄격 모드를 처음 지원하기 시작한 초기 브라우저에서는 구현하지 않았고, <code>window</code> 객체를 잘못 반환했습니다.</p> +</div> + +<p><code>this</code>의 값을 한 문맥에서 다른 문맥으로 넘기려면 다음 예시와 같이 {{jsxref("Function.prototype.call()", "call()")}}이나 {{jsxref("Function.prototype.apply", "apply()")}}를 사용하세요.</p> + +<p><strong>예시 1</strong></p> + +<pre class="brush: js notranslate" dir="rtl">// call 또는 apply의 첫 번째 인자로 객체가 전달될 수 있으며 this가 그 객체에 묶임 +var obj = {a: 'Custom'}; + +// 변수를 선언하고 변수에 프로퍼티로 전역 window를 할당 +var a = 'Global'; + +function whatsThis() { + return this.a; // 함수 호출 방식에 따라 값이 달라짐 +} + +whatsThis(); // this는 'Global'. 함수 내에서 설정되지 않았으므로 global/window 객체로 초기값을 설정한다. +whatsThis.call(obj); // this는 'Custom'. 함수 내에서 obj로 설정한다. +whatsThis.apply(obj); // this는 'Custom'. 함수 내에서 obj로 설정한다. +</pre> + +<p><strong>예시 2</strong></p> + +<pre class="brush: js notranslate">function add(c, d) { + return this.a + this.b + c + d; +} + +var o = {a: 1, b: 3}; + +// 첫 번째 인자는 'this'로 사용할 객체이고, +// 이어지는 인자들은 함수 호출에서 인수로 전달된다. +add.call(o, 5, 7); // 16 + +// 첫 번째 인자는 'this'로 사용할 객체이고, +// 두 번째 인자는 함수 호출에서 인수로 사용될 멤버들이 위치한 배열이다. +add.apply(o, [10, 20]); // 34 +</pre> + +<p>비엄격 모드에서 <code>this</code>로 전달된 값이 객체가 아닌 경우, <code>call</code>과 <code>apply</code>는 이를 객체로 변환하기 위한 시도를 합니다. <code>null</code>과 <code>undefined</code> 값은 전역 객체가 됩니다. <code>7</code>이나 <code>'foo'</code>와 같은 원시값은 관련된 생성자를 사용해 객체로 변환되며, 따라서 원시 숫자 <code>7</code>은 <code>new Number(7)</code>에 의해 객체로 변환되고 문자열 <code>'foo'</code>는 <code>new String('foo')</code>에 의해 객체로 변환됩니다.</p> + +<pre class="brush: js notranslate">function bar() { + console.log(Object.prototype.toString.call(this)); +} + +bar.call(7); // [object Number] +bar.call('foo'); // [object String] +bar.call(undefined); // [object global] +</pre> + +<h3 id="bind_메서드"><code>bind</code> 메서드</h3> + +<p>ECMAScript 5는 {{jsxref("Function.prototype.bind")}}를 도입했습니다. <code>f.bind(someObject)</code>를 호출하면 <code>f</code>와 같은 본문(코드)과 범위를 가졌지만 this는 원본 함수를 가진 새로운 함수를 생성합니다. 새 함수의 <code>this</code>는 호출 방식과 상관없이 영구적으로<code>bind()</code>의 첫 번째 매개변수로 고정됩니다.</p> + +<pre class="brush: js notranslate">function f() { + return this.a; +} + +var g = f.bind({a: 'azerty'}); +console.log(g()); // azerty + +var h = g.bind({a: 'yoo'}); // bind는 한 번만 동작함! +console.log(h()); // azerty + +var o = {a: 37, f: f, g: g, h: h}; +console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty</pre> + +<h3 id="화살표_함수">화살표 함수</h3> + +<p><a href="/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98">화살표 함수</a>에서 <code>this</code>는 자신을 감싼 정적 범위<sup>lexical context</sup>입니다. 전역 코드에서는 전역 객체를 가리킵니다.</p> + +<pre class="brush: js notranslate">var globalObject = this; +var foo = (() => this); +console.log(foo() === globalObject); // true</pre> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 화살표 함수를 <code>call()</code>, <code>bind()</code>, <code>apply()</code>를 사용해 호출할 때 <code>this</code>의 값을 정해주더라도 무시합니다. 사용할 매개변수를 정해주는 건 문제 없지만, 첫 번째 매개변수(<code>thisArg</code>)는 <code>null</code>을 지정해야 합니다.</p> +</div> + +<pre class="brush: js notranslate">// 객체로서 메서드 호출 +var obj = {func: foo}; +console.log(obj.func() === globalObject); // true + +// call을 사용한 this 설정 시도 +console.log(foo.call(obj) === globalObject); // true + +// bind를 사용한 this 설정 시도 +foo = foo.bind(obj); +console.log(foo() === globalObject); // true</pre> + +<p>어떤 방법을 사용하든 <code>foo</code>의 <code>this</code>는 생성 시점의 것으로 설정됩니다(위 예시에서는 global 객체). 다른 함수 내에서 생성된 화살표 함수에도 동일하게 적용됩니다. <code>this</code>는 싸여진 렉시컬 컨텍스트의 것으로 유지됩니다.</p> + +<pre class="brush: js notranslate">// this를 반환하는 메소드 bar를 갖는 obj를 생성합니다. +// 반환된 함수는 화살표 함수로 생성되었으므로, +// this는 감싸진 함수의 this로 영구적으로 묶입니다. +// bar의 값은 호출에서 설정될 수 있으며, 이는 반환된 함수의 값을 설정하는 것입니다. +var obj = { + bar: function() { + var x = (() => this); + return x; + } +}; + +// obj의 메소드로써 bar를 호출하고, this를 obj로 설정 +// 반환된 함수로의 참조를 fn에 할당 +var fn = obj.bar(); + +// this 설정 없이 fn을 호출하면, +// 기본값으로 global 객체 또는 엄격 모드에서는 undefined +console.log(fn() === obj); // true + +// 호출 없이 obj의 메소드를 참조한다면 주의하세요. +var fn2 = obj.bar; +// 화살표 함수의 this를 bar 메소드 내부에서 호출하면 +// fn2의 this를 따르므로 window를 반환할것입니다. +console.log(fn2()() == window); // true</pre> + +<p>위 예시에서, <code>obj.bar</code>에 할당된 함수(익명 함수 A라고 지칭)는 화살표 함수로 생성된 다른 함수(익명 함수 B라고 지칭)를 반환합니다. 결과로써 함수 B가 호출될 때 B의 <code>this</code>는 영구적으로 <code>obj.bar</code>(함수 A)의 <code>this</code>로 설정됩니다. 반환됨 함수(함수 B)가 호출될 때, <code>this</code>는 항상 초기에 설정된 값일 것입니다. 위 코드 예시에서, 함수 B의 <code>this</code>는 함수 A의 <code>this</code>인 <code>obj</code>로 설정되므로, 일반적으로 <code>this</code>를 <code>undefined</code>나 global 객체로 설정하는 방식으로 호출할 때도(또는 이전 예시에서처럼 global 실행 컨텍스트에서 다른 방법을 사용할 때에도) obj의 설정은 유지됩니다.</p> + +<h3 id="객체의_메서드로서">객체의 메서드로서</h3> + +<p>함수를 어떤 객체의 메서드로 호출하면 <code>this</code>의 값은 그 객체를 사용합니다.</p> + +<p>다음 예제에서 <code>o.f()</code>를 실행할 때 <code>o</code> 객체가 함수 내부의 <code>this</code>와 연결됩니다.</p> + +<pre class="brush: js notranslate">var o = { + prop: 37, + f: function() { + return this.prop; + } +}; + +console.log(o.f()); // 37 +</pre> + +<p>이 행동이 함수가 정의된 방법이나 위치에 전혀 영향을 받지 않는 것에 유의해라. 이전 예제에서, <code>o</code> 의 정의 중 <code>f</code> 함수를 구성원으로 내부에 정의 하였다. 그러나, 간단하게 함수를 먼저 정의하고 나중에 <code>o.f</code>를 추가할 수 있다. 이렇게 하면 동일한 동작 결과 이다 :</p> + +<pre class="brush: js notranslate">var o = {prop: 37}; + +function independent() { + return this.prop; +} + +o.f = independent; + +console.log(o.f()); // logs 37 +</pre> + +<p>이는 함수가 <code>o</code>의 멤버 <code>f</code>로 부터 호출 된 것만이 중요하다는 것을 보여준다.</p> + +<p>마찬가지로, 이 <code>this</code> 바인딩은 가장 즉각으로 멤버 대상에 영향을 받는다. 다음 예제에서, 함수를 실행할 때, 객체 <code>o.b</code>의 메소드 <code>g</code> 로서 호출한다. 이것이 실행되는 동안, 함수 내부의 <code>this</code>는 <code>o.b</code>를 나타낸다. 객체는 그 자신이 <code>o</code>의 멤버 중 하나라는 사실은 중요하지 않다. 가장 즉각적인 참조가 중요한 것이다.</p> + +<pre class="brush: js notranslate">o.b = {g: independent, prop: 42}; +console.log(o.b.g()); // logs 42 +</pre> + +<h4 id="객체의_프로토타입_체인에서의_this">객체의 프로토타입 체인에서의 <code>this</code></h4> + +<p>같은 개념으로 객체의 프로토타입 체인 어딘가에 정의한 메서드도 마찬가지입니다. 메서드가 어떤 객체의 프로토타입 체인 위에 존재하면, <code>this</code>의 값은 그 객체가 메서드를 가진 것 마냥 설정됩니다.</p> + +<pre class="brush: js notranslate">var o = { + f:function() { return this.a + this.b; } +}; +var p = Object.create(o); +p.a = 1; +p.b = 4; + +console.log(p.f()); // 5 +</pre> + +<p>이 예제에서, <code>f</code> 속성을 가지고 있지 않은 변수 <code>p</code>가 할당된 객체는, 프로토타입으로 부터 상속받는다. 그러나 그것은 결국 <code>o</code>에서 <code>f</code> 이름을 가진 멤버를 찾는 되는 문제가 되지 않는다 ; <code>p.f</code>를 찾아 참조하기 시작하므로, 함수 내부의 <code>this</code>는<code> p</code> 처럼 나타나는 객체 값을 취한다. 즉, <code>f</code>는 <code>p</code>의 메소드로서 호출된 이후로, <code>this</code>는 <code>p</code>를 나타낸다. 이것은 JavaScript의 프로토타입 상속의 흥미로운 기능이다.</p> + +<h4 id="접근자와_설정자의_this">접근자와 설정자의 <code>this</code></h4> + +<p>다시 한 번 같은 개념으로, 함수를 접근자와 설정자에서 호출하더라도 동일합니다. 접근자나 설정자로 사용하는 함수의 <code>this</code>는 접근하거나 설정하는 속성을 가진 객체로 묶입니다.</p> + +<pre class="brush: js notranslate">function sum() { + return this.a + this.b + this.c; +} + +var o = { + a: 1, + b: 2, + c: 3, + get average() { + return (this.a + this.b + this.c) / 3; + } +}; + +Object.defineProperty(o, 'sum', { + get: sum, enumerable: true, configurable: true}); + +console.log(o.average, o.sum); // 2, 6 +</pre> + +<h3 id="생성자로서">생성자로서</h3> + +<p>함수를 {{jsxref("Operators/new", "new")}} 키워드와 함께 생성자로 사용하면 <code>this</code>는 새로 생긴 객체에 묶입니다.</p> + +<div class="blockIndicator note"> +<p>While the default for a constructor is to return the object referenced by <code>this</code>, it can instead return some other object (if the return value isn't an object, then the <code>this</code> object is returned).</p> +</div> + +<pre class="brush: js notranslate">/* + * Constructors work like this: + * + * function MyConstructor(){ + * // Actual function body code goes here. + * // Create properties on |this| as + * // desired by assigning to them. E.g., + * this.fum = "nom"; + * // et cetera... + * + * // If the function has a return statement that + * // returns an object, that object will be the + * // result of the |new| expression. Otherwise, + * // the result of the expression is the object + * // currently bound to |this| + * // (i.e., the common case most usually seen). + * } + */ + +function C() { + this.a = 37; +} + +var o = new C(); +console.log(o.a); // 37 + + +function C2() { + this.a = 37; + return {a: 38}; +} + +o = new C2(); +console.log(o.a); // 38 +</pre> + +<h3 id="DOM_이벤트_처리기로서">DOM 이벤트 처리기로서</h3> + +<p>함수를 이벤트 처리기로 사용하면 this는 이벤트를 발사한 요소로 설정됩니다. 일부 브라우저는 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} 외의 다른 방법으로 추가한 처리기에 대해선 이 규칙을 따르지 않습니다.</p> + +<pre class="brush: js notranslate">// 처리기로 호출하면 관련 객체를 파랗게 만듦 +function bluify(e) { + // 언제나 true + console.log(this === e.currentTarget); + // currentTarget과 target이 같은 객체면 true + console.log(this === e.target); + this.style.backgroundColor = '#A5D9F3'; +} + +// 문서 내 모든 요소의 목록 +var elements = document.getElementsByTagName('*'); + +// 어떤 요소를 클릭하면 파랗게 변하도록 +// bluify를 클릭 처리기로 등록 +for (var i = 0; i < elements.length; i++) { + elements[i].addEventListener('click', bluify, false); +}</pre> + +<h3 id="인라인_이벤트_핸들러에서">인라인 이벤트 핸들러에서</h3> + +<p>코드를 인라인 이벤트 처리기로 사용하면 <code>this</code>는 처리기를 배치한 DOM 요소로 설정됩니다.</p> + +<pre class="brush: js notranslate"><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; })());"> + 내부 this 표시 +</button></pre> + +<p>위의 경우, 내부 함수의 this는 정해지지 않았으므로 전역/<code>window</code> 객체를 반환합니다. 즉 비엄격 모드에서 <code>this</code>를 설정하지 않은 경우의 기본값입니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-this-keyword', 'The this keyword')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-this-keyword', 'The this keyword')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.1', 'The this keyword')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.1.1', 'The this keyword')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.1.1', 'The this keyword')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.operators.this")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/typeof/index.html b/files/ko/web/javascript/reference/operators/typeof/index.html new file mode 100644 index 0000000000..acdd2eedbb --- /dev/null +++ b/files/ko/web/javascript/reference/operators/typeof/index.html @@ -0,0 +1,227 @@ +--- +title: typeof +slug: Web/JavaScript/Reference/Operators/typeof +tags: + - JavaScript + - Operator + - Reference + - Unary +translation_of: Web/JavaScript/Reference/Operators/typeof +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong><code>typeof</code></strong> 연산자는 피연산자의 평가 전 자료형을 나타내는 문자열을 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-typeof.html")}}</div> + +<p class="hidden">이 예제 소스는 GitHub repository에 존재합니다. 만약 이 예제에 기여하고 싶다면 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>를 클론해서 pull request를 보내주세요.</p> + +<h2 id="구문">구문</h2> + +<p><code>typeof</code> 연산자는 피연산자 앞에 위치합니다.</p> + +<pre>typeof <var>operand</var> +typeof(<var>operand</var>)</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>operand</code></dt> + <dd>자료형을 가져올 객체 또는 {{glossary("Primitive", "원시값")}}을 나타내는 표현식.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p><code>typeof</code>가 반환할 수 있는 값을 아래 표에서 볼 수 있습니다. 자료형과 원시값에 대한 자세한 정보는 <a href="/ko/docs/Web/JavaScript/Data_structures">JavaScript 자료형과 자료구조</a> 페이지를 참고하세요.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Type</th> + <th scope="col">Result</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{glossary("Undefined")}}</td> + <td><code>"undefined"</code></td> + </tr> + <tr> + <td>{{glossary("Null")}}</td> + <td><code>"object"</code> ({{anch("null", "아래")}} 참고)</td> + </tr> + <tr> + <td>{{glossary("Boolean")}}</td> + <td><code>"boolean"</code></td> + </tr> + <tr> + <td>{{glossary("Number")}}</td> + <td><code>"number"</code></td> + </tr> + <tr> + <td>{{glossary("BigInt")}}</td> + <td><code>"bigint"</code></td> + </tr> + <tr> + <td>{{glossary("String")}}</td> + <td><code>"string"</code></td> + </tr> + <tr> + <td>{{glossary("Symbol")}} (ECMAScript 2015에서 추가)</td> + <td><code>"symbol"</code></td> + </tr> + <tr> + <td>호스트 객체 (JS 환경에서 제공)</td> + <td><em>구현체마다 다름</em></td> + </tr> + <tr> + <td>{{glossary("Function")}} 객체 (ECMA-262 표현으로는 [[Call]]을 구현하는 객체)</td> + <td><code>"function"</code></td> + </tr> + <tr> + <td>다른 모든 객체</td> + <td><code>"object"</code></td> + </tr> + </tbody> +</table> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> ECMAScript 2019 and older permitted implementations to have <code>typeof</code> return any implementation-defined string value for non-callable non-standard exotic objects.</p> + +<p>The only known browser to have actually taken advantage of this is old Internet Explorer (see <a href="#IE-specific_notes">below</a>).</p> +</div> + +<h2 id="예제">예제</h2> + +<pre class="brush:js">// Numbers +typeof 37 === 'number'; +typeof 3.14 === 'number'; +typeof Math.LN2 === 'number'; +typeof Infinity === 'number'; +typeof NaN === 'number'; // Despite being "Not-A-Number" +typeof Number(1) === 'number'; // but never use this form! + +typeof 42n === 'bigint'; + + +// Strings +typeof "" === 'string'; +typeof "bla" === 'string'; +typeof (typeof 1) === 'string'; // typeof always returns a string +typeof String("abc") === 'string'; // but never use this form! + + +// Booleans +typeof true === 'boolean'; +typeof false === 'boolean'; +typeof Boolean(true) === 'boolean'; // but never use this form! + + +// Symbols +typeof Symbol() === 'symbol' +typeof Symbol('foo') === 'symbol' +typeof Symbol.iterator === 'symbol' + + +// Undefined +typeof undefined === 'undefined'; +typeof declaredButUndefinedVariable === 'undefined'; +typeof undeclaredVariable === 'undefined'; + + +// Objects +typeof {a:1} === 'object'; + +// use <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray">Array.isArray</a> or Object.prototype.toString.call +// to differentiate regular objects from arrays +typeof [1, 2, 4] === 'object'; + +typeof new Date() === 'object'; + + +// The following is confusing. Don't use! +typeof new Boolean(true) === 'object'; +typeof new Number(1) === 'object'; +typeof new String("abc") === 'object'; + + +// Functions +typeof function(){} === 'function'; +typeof class C {} === 'function'; +typeof Math.sin === 'function'; +</pre> + +<h2 id="추가_정보">추가 정보</h2> + +<h3 id="null"><code>null</code></h3> + +<pre class="brush:js">// This stands since the beginning of JavaScript +typeof null === 'object'; +</pre> + +<p>자바스크립트를 처음 구현할 때, 자바스크립트 값은 타입 태그와 값으로 표시되었습니다. 객체의 타입 태그는 0이었습니다. <code>null</code>은 Null pointer(대부분의 플랫폼에서 <code>0x00</code>)로 표시되었습니다. 그 결과 null은 타입 태그로 0을 가지며, 따라서 <code>typeof</code>는 object를 반환합니다. (<a href="https://2ality.com/2013/10/typeof-null.html">참고 문서</a>)</p> + +<p>ECMAScript에 수정이 제안(opt-in을 통해)되었으나 <a href="https://web.archive.org/web/20160331031419/http://wiki.ecmascript.org:80/doku.php?id=harmony:typeof_null">거절되었습니다</a>. 제안된 것은 다음과 같습니다. <code>typeof null === 'null'.</code></p> + +<h3 id="Regular_expressions">Regular expressions</h3> + +<p>Callable regular expressions were a non-standard addition in some browsers.</p> + +<pre class="brush:js">typeof /s/ === 'function'; // Chrome 1-12 Non-conform to ECMAScript 5.1 +typeof /s/ === 'object'; // Firefox 5+ Conform to ECMAScript 5.1 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-typeof-operator', 'The typeof Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-typeof-operator', 'The typeof Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.4.3', 'The typeof Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.4.3', 'The typeof Operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.4.3', 'The typeof Operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.operators.typeof")}}</p> + +<h2 id="IE_참고사항">IE 참고사항</h2> + +<p>On IE 6, 7, and 8 a lot of host objects are objects and not functions. For example:</p> + +<pre class="brush: js">typeof alert === 'object'</pre> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Operators/instanceof", "instanceof")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/void/index.html b/files/ko/web/javascript/reference/operators/void/index.html new file mode 100644 index 0000000000..79fe2c1837 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/void/index.html @@ -0,0 +1,122 @@ +--- +title: void +slug: Web/JavaScript/Reference/Operators/void +tags: + - JavaScript + - Operator + - Reference + - Unary +translation_of: Web/JavaScript/Reference/Operators/void +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong><code>void</code> 연산자</strong>는 주어진 표현식을 평가하고 {{jsxref("undefined")}}를 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-voidoperator.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">void <em>expression</em></pre> + +<h2 id="설명">설명</h2> + +<p><code>void</code>는 값을 생성하는 표현식을 평가해서 {{jsxref("undefined")}}를 반환합니다.</p> + +<p>오직 <code>undefined</code> 원시값을 얻기 위해 <code>void 0</code> 또는 <code>void(0)</code>처럼 사용하는 경우도 볼 수 있습니다. 이런 경우 전역 {{jsxref("undefined")}}를 대신 사용해도 됩니다.</p> + +<p><code>void</code> 연산자의 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">우선순위</a>도 유념해야 합니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/Grouping">그룹 연산자</a>(괄호)를 사용하면 <code>void</code> 연산자를 사용한 식의 평가 과정을 더 명확하게 보일 수 있습니다.</p> + +<pre class="brush: js">void 2 == '2'; // undefined == '2', false +void (2 == '2'); // void true, undefined +</pre> + +<h2 id="IIFE">IIFE</h2> + +<p>즉시 실행 함수 표현식({{Glossary("IIFE")}})을 사용할 때 <code>void</code>를 사용하면 <code>function</code> 키워드를 선언문이 아니라 표현식처럼 간주하도록 강제할 수 있습니다.</p> + +<pre class="brush: js">void function iife() { + var bar = function () {}; + var baz = function () {}; + var foo = function () { + bar(); + baz(); + }; + var biz = function () {}; + + foo(); + biz(); +}(); +</pre> + +<h2 id="JavaScript_URI">JavaScript URI</h2> + +<p><code>javascript:</code>로 시작하는 URI를 지원하는 브라우저에서는, URI에 있는 코드의 평가 결과가 {{jsxref("undefined")}}가 아니라면 페이지의 콘텐츠를 반환 값으로 대체합니다. <code>void</code> 연산자를 사용하면 <code>undefined</code>를 반환할 수 있습니다. 다음 예제를 확인하세요.</p> + +<pre class="brush: html"><a href="javascript:void(0);"> + 클릭해도 아무 일도 없음 +</a> +<a href="javascript:void(document.body.style.backgroundColor='green');"> + 클릭하면 배경색이 녹색으로 +</a> +</pre> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: <code>javascript:</code> 의사 프로토콜보다 이벤트 처리기와 같은 대체재 사용을 권장합니다.</p> +</div> + +<h2 id="새지_않는_화살표_함수">새지 않는 화살표 함수</h2> + +<p>Arrow functions introduce a short-hand braceless syntax that returns an expression. This can cause unintended side effects by returning the result of a function call that previously returned nothing. To be safe, when the return value of a function is not intended to be used, it can be passed to the void operator to ensure that (for example) changing APIs do not cause arrow functions' behaviors to change.</p> + +<pre class="brush: js">button.onclick = () => void doSomething();</pre> + +<p>This ensures the return value of <code>doSomething</code> changing from <code>undefined</code> to <code>true</code> will not change the behavior of this code.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-void-operator', 'The void Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-void-operator', 'The void Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.4.2', 'The void Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.4.2', 'The void Operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.4.2', 'The void Operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.operators.void")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("undefined")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/yield/index.html b/files/ko/web/javascript/reference/operators/yield/index.html new file mode 100644 index 0000000000..ef884816d2 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/yield/index.html @@ -0,0 +1,182 @@ +--- +title: yield +slug: Web/JavaScript/Reference/Operators/yield +tags: + - ECMAScript 2015 + - Generators + - Iterator + - JavaScript + - Operator + - 반복자 + - 생성기 +translation_of: Web/JavaScript/Reference/Operators/yield +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><code>yield </code>키워드는 제너레이터 함수 ({{jsxref("Statements/function*", "function*")}} 또는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">레거시 generator </a>함수)를 중지하거나 재개하는데 사용됩니다.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox">[<em>rv</em>] = <strong>yield</strong> [<em>expression</em>];</pre> + +<dl> + <dt><code>expression</code></dt> + <dd>제너레이터 함수에서 <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">제너레이터 프로토콜</a>을 통해 반환할 값을 정의합니다. 값이 생략되면, <code>undefined를 반환합니다.</code></dd> + <dt><code>rv</code></dt> + <dd> + <p>제너레이터 실행을 재개 하기 위해서, optional value을 제너레이터의 <code>next()</code> 메서드로 전달하여 반환합니다.</p> + </dd> +</dl> + +<h2 id="설명">설명</h2> + +<p><code>yield 키워드</code>는 제너레이터 함수의 실행을 중지시키거나 그리고 <code>yield</code> 키워드 뒤에오는 표현식[expression]의 값은 제너레이터의 caller로 반환된다. 제너레이터 버전의 <code>return</code> 키워드로 생각 할 수 있다.</p> + +<p><code>yield</code> 키워드는 실질적으로 value 와 done 이라는 두 개의 속성을 가진 <code>IteratorResult</code> 객체를 반환한다. <code>value</code> 속성은 <code>yield</code> 표현(expression)의 실행 결과를 나타내고, <code>done</code> 속성은 제너레이터 함수가 완전히 종료되었는지 여부를 불린(Boolean) 형태로 보여줍니다. </p> + +<p>yield 표현식에서 중지되면 ,제너레이터의 next()가 메서드가 호출될 때까지 제너레이터의 코드 실행이 중지된다. 제너레이터의 next()메서드를 호출할 때마다 제너레이터는 실행을 재개하며 그리고 다음의 같은 경우에 진행될 때 실행된다:</p> + +<ul> + <li> <code>yield 는</code> 제너레이터가 한번 멈추게 하고 제너레이터의 새로운 값을 반환한다. 다음번의 next()가 호출된 후, yield 이후에 선언된 코드가 바로 실행된다.</li> + <li>{{jsxref("Statements/throw", "throw")}}는 제네레이터에서 예외를 설정할 때 사용된다. 예외가 발생할 경우 제너레이터의 전체적으로 실행이 중지되고, 그리고 다시 켜는 것이 일반적으로 실행됩니다.</li> + <li> + <p>제너레이터 함수가 종료가 되었다; 이 경우, 제너레이터 실행이 종료되고 <code>IteratorResult는 </code>caller 로 값이 {{jsxref("undefined")}}이고 done의 값이 true 로 리턴한다.</p> + </li> + <li> + <p>{{jsxref("Statements/return", "return")}} 문에 도달했다. 이 경우에는, 이 값이 종료되고 <code>IteratorResult는 </code>caller 로<code> return</code> 문에 의해 반환되는 값과 done의 값이 true 로 리턴한다.</p> + </li> +</ul> + +<p>만약에 optional value가 제너레이터의 next() 메서드로 전달되면, optional value는 제너레이터의 현재 yield의 연산으로 반환되는 값이 된다.</p> + +<p>generator 코드 경로, yield연산자, {{jsxref("Generator.prototype.next()")}}에 이르기까지 새로운 시작 값을 지정할 수 있는 능력과 제네레이터는 커다란 힘과 제어를 제공한다.</p> + +<h2 id="예시">예시</h2> + +<p>다음 코드는 제너레이터 함수의 선언의 예시이다.</p> + +<pre class="brush: js">function* foo(){ + var index = 0; + while (index <= 2) // when index reaches 3, + // yield's done will be true + // and its value will be undefined; + yield index++; +}</pre> + +<p>제너레이터 함수가 정의되면 , 아래 코드와 보여지는 것처럼 iterator로 만들어 사용할 수 있다.</p> + +<pre class="brush: js">var iterator = foo(); +console.log(iterator.next()); // { value: 0, done: false } +console.log(iterator.next()); // { value: 1, done: false } +console.log(iterator.next()); // { value: 2, done: false } +console.log(iterator.next()); // { value: undefined, done: true }</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES6', '#', 'Yield')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#', 'Yield')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>39</td> + <td>{{CompatGeckoDesktop("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>IteratorResult</code> object instead of throwing</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("29.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>IteratorResult</code> object instead of throwing</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("29.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Firefox-specific_notes">Firefox-specific notes</h2> + +<ul> + <li>Starting with Gecko 29 {{geckoRelease(29)}}, the completed generator function no longer throws a {{jsxref("TypeError")}} "generator has already finished". Instead, it returns an <code>IteratorResult</code> object like <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</li> + <li>Starting with Gecko 33 {{geckoRelease(33)}}, the parsing of the <code>yield</code> expression has been updated to conform with the latest ES6 specification ({{bug(981599)}}): + <ul> + <li>The expression after the <code>yield</code> keyword is optional and omitting it no longer throws a {{jsxref("SyntaxError")}}: <code>function* foo() { yield; }</code></li> + </ul> + </li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li> + <li>{{jsxref("Statements/function*", "function*")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Operators/yield*", "yield*")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/yield_star_/index.html b/files/ko/web/javascript/reference/operators/yield_star_/index.html new file mode 100644 index 0000000000..3bbb10146d --- /dev/null +++ b/files/ko/web/javascript/reference/operators/yield_star_/index.html @@ -0,0 +1,164 @@ +--- +title: yield* +slug: Web/JavaScript/Reference/Operators/yield* +tags: + - ECMAScript 2015 + - Generators + - Iterable + - Iterator + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/yield* +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong><code>yield*</code> 표현식</strong>은 다른 {{jsxref("Statements/function*", "generator")}} 또는 이터러블(iterable) 객체에 yield를 위임할 때 사용됩니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-yieldasterisk.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">yield* [[<em>expression</em>]];</pre> + +<dl> + <dt><code>expression</code></dt> + <dd>이터러블(iterable) 객체를 반환하는 표현식.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>yield* 표현은 피연산자를 반복하고 반환되는 값을 yield합니다.</p> + +<p>yield* 표현 자체의 값은 반복자(iterator)가 종료될 때 반환되는 값입니다. (i.e., done이 true일 때)</p> + +<h2 id="예제">예제</h2> + +<h3 id="다른_생성기(generator)에_위임하기">다른 생성기(generator)에 위임하기</h3> + +<p>다음 코드는, next() 호출을 통해 g1()으로부터 yield 되는 값을 g2()에서 yield 되는 것처럼 만듭니다.</p> + +<pre class="brush: js">function* g1() { + yield 2; + yield 3; + yield 4; +} + +function* g2() { + yield 1; + yield* g1(); + yield 5; +} + +var iterator = g2(); + +console.log(iterator.next()); // { value: 1, done: false } +console.log(iterator.next()); // { value: 2, done: false } +console.log(iterator.next()); // { value: 3, done: false } +console.log(iterator.next()); // { value: 4, done: false } +console.log(iterator.next()); // { value: 5, done: false } +console.log(iterator.next()); // { value: undefined, done: true } +</pre> + +<h3 id="다른_이터러블(iterable)_객체">다른 이터러블(iterable) 객체</h3> + +<p>생성기 객체 말고도, yield*는 다른 반복 가능한 객체도 yield 할 수 있습니다. e.g. 배열, 문자열 또는 arguments 객체</p> + +<pre class="brush: js">function* g3() { + yield* [1, 2]; + yield* "34"; + yield* Array.from(arguments); +} + +var iterator = g3(5, 6); + +console.log(iterator.next()); // { value: 1, done: false } +console.log(iterator.next()); // { value: 2, done: false } +console.log(iterator.next()); // { value: "3", done: false } +console.log(iterator.next()); // { value: "4", done: false } +console.log(iterator.next()); // { value: 5, done: false } +console.log(iterator.next()); // { value: 6, done: false } +console.log(iterator.next()); // { value: undefined, done: true } +</pre> + +<h3 id="yield*_표현_자체의_값"><code>yield*</code> 표현 자체의 값</h3> + +<p><code>yield*</code> 는 구문이 아닌 표현입니다. 따라서 값으로 평가됩니다.</p> + +<pre class="brush: js">function* g4() { + yield* [1, 2, 3]; + return "foo"; +} + +var result; + +function* g5() { + result = yield* g4(); +} + +var iterator = g5(); + +console.log(iterator.next()); // { value: 1, done: false } +console.log(iterator.next()); // { value: 2, done: false } +console.log(iterator.next()); // { value: 3, done: false } +console.log(iterator.next()); // { value: undefined, done: true }, + // g4() 는 여기서 { value: "foo", done: true }를 반환합니다 + +console.log(result); // "foo" +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.operators.yield_star")}}</p> + +<h2 id="Firefox에_한정된_내용">Firefox에 한정된 내용</h2> + +<ul> + <li>Gecko 33 {{geckoRelease(33)}} 부터, yield 표현 구문 분석이 최신 ES6 표준에 맞추도록 업데이트 되었습니다 ({{bug(981599)}}): + <ul> + <li>개행 제한이 이제 구현되었습니다. 개행이 없는 "yield" 와 "*"만 인정됩니다. 다음과 같은 코드는 {{jsxref("SyntaxError")}}를 발생시킵니다: + <pre class="brush: js">function* foo() { + yield + *[]; +}</pre> + </li> + </ul> + </li> +</ul> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li> + <li>{{jsxref("Statements/function*", "function*")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Operators/yield", "yield")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/논리_연산자(logical_operators)/index.html b/files/ko/web/javascript/reference/operators/논리_연산자(logical_operators)/index.html new file mode 100644 index 0000000000..2e1140eed5 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/논리_연산자(logical_operators)/index.html @@ -0,0 +1,249 @@ +--- +title: 논리 연산자 +slug: Web/JavaScript/Reference/Operators/논리_연산자(Logical_Operators) +tags: + - JavaScript + - Logic + - Not + - Operator + - Reference + - and + - or + - 논리 +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>논리 연산자는 보통 {{jsxref("Boolean")}}(논리적) 값과 함께 쓰이며, 불리언 값을 반환합니다. 그런데, <code>&&</code>과 <code>||</code> 연산자는 사실 피연산자 중 하나의 값을 반환합니다. 그러므로 불리언 외의 다른 값과 함께 사용하면 불리언 값이 아닌 것을 반환할 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-logicaloperator.html")}}</div> + + + +<h2 id="설명">설명</h2> + +<p>다음 표는 논리 연산자의 종류입니다. (<code><em>expr</em></code>은 불리언을 포함해서 아무 자료형이나 가능합니다)</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>연산자</th> + <th>구문</th> + <th>설명</th> + </tr> + <tr> + <td>논리 AND (<code>&&</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>논리 OR (<code>||</code>)</td> + <td><code><em>expr1</em> || <em>expr2</em></code></td> + <td> + <p><code>expr1</code>을 <code>true</code>로 변환할 수 있으면 <code>expr1</code>을 반환하고, 그렇지 않으면 <code>expr2</code>를 반환합니다.</p> + </td> + </tr> + <tr> + <td>논리 NOT (<code>!</code>)</td> + <td><code>!<em>expr</em></code></td> + <td>단일 피연산자를 <code>true</code>로 변환할 수 있으면 <code>false</code>를 반환합니다. 그렇지 않으면 <code>true</code>를 반환합니다.</td> + </tr> + </tbody> +</table> + +<p>값을 <code>true</code>로 변환하면 값이 {{Glossary("truthy", "참")}}인 것입니다.<br> + 값을 <code>false</code>로 변환할 수 있으면 값이 {{Glossary("falsy", "거짓")}}인 것입니다.</p> + +<p>거짓으로 변환할 수 있는 표현의 예는 다음과 같습니다.</p> + +<ul> + <li><code>null</code></li> + <li><code>NaN</code></li> + <li><code>0</code></li> + <li>빈 문자열 (<code>"",</code> <code>''</code>, <code>``</code>)</li> + <li><code>undefined</code></li> +</ul> + +<p><code>&&</code> 연산자와 <code>||</code> 연산자를 불리언 값이 아닌 피연산자와 함께 사용될 수 있지만, 반환 값을 항상 <a href="/ko/docs/Web/JavaScript/Data_structures#Boolean_%ED%83%80%EC%9E%85">불리언 원시값</a>으로 변환할 수 있으므로 불리언 연산자로 생각할 수 있습니다. 반환 값을 직접 불리언으로 바꾸려면 {{jsxref("Boolean")}} 함수나 이중 부정 연산자를 사용하세요.</p> + +<h3 id="단락_평가">단락 평가</h3> + +<p>논리 표현식을 좌측부터 평가하므로, 아래 규칙에 따라 단락(short-circuit) 평가를 수행합니다.</p> + +<ul> + <li><code>(거짓 표현식) && expr</code>은 거짓 표현식으로 단락 평가됩니다.</li> + <li><code>(참 표현식) || expr</code>은 참 표현식으로 단락 평가됩니다.</li> +</ul> + +<p>"단락"이란, 위 규칙에서 <code>expr</code>을 평가하지 않는다는 뜻입니다. 따라서 평가 중 발생해야 할 부작용(예: <code>expr</code>이 함수 호출이면 절대 호출하지 않음)도 나타나지 않습니다. 단락 평가가 발생하는 원인은 첫 번째 피연산자를 평가한 순간 이미 연산자의 결과가 정해지기 때문입니다. 다음 예제를 살펴보세요.</p> + +<pre>function A(){ console.log('A 호출'); return false; } +function B(){ console.log('B 호출'); return true; } + +console.log( A() && B() ); +// 함수 호출로 인해 콘솔에 "A 호출" 기록 +// 그 후 연산자의 결과값인 "false" 기록 + +console.log( B() || A() ); +// 함수 호출로 인해 콘솔에 "B 호출" 기록 +// 그 후 연산자의 결과인 "true" 기록 +</pre> + +<h3 id="연산자_우선순위">연산자 우선순위</h3> + +<p>다음 두 식은 똑같아 보이지만, <code>&&</code> 연산자는 <code>||</code> 이전에 실행되므로 서로 다릅니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">연산자 우선순위</a>를 참고하세요.</p> + +<pre class="brush: js">true || false && false // returns true, because && is executed first +(true || false) && false // returns false, because operator precedence cannot apply</pre> + +<h3 id="논리_AND_()"><a name="Logical_AND">논리 AND (<code>&&</code>)</a></h3> + +<p>다음은 <code>&&</code>(논리 AND) 연산자의 예제입니다.</p> + +<pre class="brush: js">a1 = true && true // t && t returns true +a2 = true && false // t && f returns false +a3 = false && true // f && t returns false +a4 = false && (3 == 4) // f && f returns false +a5 = 'Cat' && 'Dog' // t && t returns "Dog" +a6 = false && 'Cat' // f && t returns false +a7 = 'Cat' && false // t && f returns false +a8 = '' && false // f && f returns "" +a9 = false && '' // f && f returns false</pre> + +<h3 id="논리_OR_()"><a name="Logical_OR">논리 OR (<code>||</code>)</a></h3> + +<p>다음은 <code>||</code>(논리 OR) 연산자의 예제입니다.</p> + +<pre class="brush: js">o1 = true || true // t || t returns true +o2 = false || true // f || t returns true +o3 = true || false // t || f returns true +o4 = false || (3 == 4) // f || f returns false +o5 = 'Cat' || 'Dog' // t || t returns "Cat" +o6 = false || 'Cat' // f || t returns "Cat" +o7 = 'Cat' || false // t || f returns "Cat" +o8 = '' || false // f || f returns false +o9 = false || '' // f || f returns "" +o10 = false || varObject // f || object returns varObject +</pre> + +<h3 id="논리_NOT_(!)"><a name="Logical_NOT">논리 NOT (<code>!</code>)</a></h3> + +<p>다음은 <code>!</code>(논리 NOT) 연산자의 예제입니다.</p> + +<pre class="brush: js">n1 = !true // !t returns false +n2 = !false // !f returns true +n3 = !'' // !f returns true +n4 = !'Cat' // !t returns false +</pre> + +<h4 id="이중_NOT_(!!)">이중 NOT (<code>!!</code>)</h4> + +<p>NOT 연산자 다수를 연속해서 사용하면 아무 값이나 불리언 원시값으로 강제 변환할 수 있습니다. 변환 결과는 피연산자 값의 "참스러움"이나 "거짓스러움"에 따릅니다. ({{Glossary("truthy", "참")}}과 {{Glossary("falsy", "거짓")}}을 참고하세요)</p> + +<p>동일한 변환을 {{jsxref("Boolean")}} 함수로도 수행할 수 있습니다.</p> + +<pre class="brush: js">n1 = !!true // !!truthy returns true +n2 = !!{} // !!truthy returns true: any object is truthy... +n3 = !!(new Boolean(false)) // ...even Boolean objects with a false .valueOf()! +n4 = !!false // !!falsy returns false +n5 = !!"" // !!falsy returns false +n6 = !!Boolean(false) // !!falsy returns false +</pre> + +<h3 id="불리언_변환_규칙">불리언 변환 규칙</h3> + +<h4 id="AND에서_OR로_변환">AND에서 OR로 변환</h4> + +<p>불리언 계산에서, 다음 두 코드는 항상 같습니다.</p> + +<pre class="brush: js">bCondition1 && bCondition2 +</pre> + +<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre> + +<h4 id="OR에서_AND로_변환">OR에서 AND로 변환</h4> + +<p>불리언 계산에서, 다음 두 코드는 항상 같습니다.</p> + +<pre class="brush: js">bCondition1 || bCondition2 +</pre> + +<pre class="brush: js">!(!bCondition1 && !bCondition2)</pre> + +<h4 id="NOT_간_변환">NOT 간 변환</h4> + +<p>불리언 계산에서, 다음 두 코드는 항상 같습니다.</p> + +<pre class="brush: js">!!bCondition +</pre> + +<pre class="brush: js">bCondition</pre> + +<h3 id="중첩_괄호_제거">중첩 괄호 제거</h3> + +<p>논리 표현식은 항상 왼쪽에서 오른쪽으로 평가되므로, 몇 가지 규칙을 따르면 복잡한 표현식에서 괄호를 제거할 수 있습니다.</p> + +<h4 id="중첩_AND_제거">중첩 AND 제거</h4> + +<p>불리언의 합성 계산에서, 다음 두 코드는 항상 같습니다.</p> + +<pre class="brush: js">bCondition1 || (bCondition2 && bCondition3) +</pre> + +<pre class="brush: js">bCondition1 || bCondition2 && bCondition3</pre> + +<h4 id="중첩_OR_제거">중첩 OR 제거</h4> + +<p>불리언의 합성 계산에서, 다음 두 코드는 항상 같습니다.</p> + +<pre class="brush: js">bCondition1 && (bCondition2 || bCondition3) +</pre> + +<pre class="brush: js">!(!bCondition1 || !bCondition2 && !bCondition3)</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.11')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Binary Logical Operators</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">Binary Logical Operators</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Defined in several sections of the specification: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Binary Logical Operators</a></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.operators.logical")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">비트 연산자</a></li> + <li>{{jsxref("Boolean")}}</li> + <li>{{Glossary("truthy", "참")}}</li> + <li>{{Glossary("falsy", "거짓")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/배열/index.html b/files/ko/web/javascript/reference/operators/배열/index.html new file mode 100644 index 0000000000..4bdd29b61c --- /dev/null +++ b/files/ko/web/javascript/reference/operators/배열/index.html @@ -0,0 +1,200 @@ +--- +title: 배열 내포 +slug: Web/JavaScript/Reference/Operators/배열 +tags: + - JavaScript + - Non-standard + - Obsolete + - Operator + - Reference +translation_of: Archive/Web/JavaScript/Array_comprehensions +--- +<div>{{jsSidebar("Operators")}}</div> + +<div class="warning"><strong>표준이 아닙니다. 사용하지 않는 것을 권장합니다!</strong><br> +Array comprehensions 문법은 비표준이며 Firefox 58부터는 제거됩니다. 향후 사용할 수 없게 되기 때문에 사용하지 않는것을 고려해보세요.<br> +{{jsxref("Array.prototype.map")}}, {{jsxref("Array.prototype.filter")}}, {{jsxref("Functions/Arrow_functions", "arrow functions", "", 1)}}, and {{jsxref("Operators/Spread_operator", "spread syntax", "", 1)}}.</div> + +<div>{{Obsolete_Header(58)}}</div> + +<p><strong>array comprehension </strong>문법은 기존의 배열을 기반으로 새로운 배열을 신속하게 어셈블 할 수 있는 JavaScript 표현식입니다. 그러나 표준 및 Firefox 구현에서 제거되었습니다. 사용하지 마세요!</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">[for (x of iterable) x] +[for (x of iterable) if (condition) x] +[for (x of iterable) for (y of iterable) x + y] +</pre> + +<h2 id="Description">Description</h2> + +<p>배열의 이해로 넘어가서, 다음 두가지의 요소들이 사용가능하다.</p> + +<ul> + <li>{{jsxref("Statements/for...of", "for...of")}} and</li> + <li>{{jsxref("Statements/if...else", "if")}}</li> +</ul> + +<p>for-of 반복문은 항상 첫번째 요소이다. 여러개의 for-of 반복문이나 if 제어문을 사용할 수 있다.</p> + +<p>배열 선언은 ECMAScript 2016에서 이전부터 표준으로 정립되어왔으며, 이는 다른 형태의 데이터(contents)를 이용해서 새로운 배열을 구성할 수 있게 해 준다.</p> + +<p>아래의 선언은 숫자로 이루어진 배열 내 각각의 숫자들을 이용해서 double형의 새로운 배열을 만들어준다.</p> + +<pre class="brush: js">var numbers = [1, 2, 3, 4]; +var doubled = [for (i of numbers) i * 2]; +console.log(doubled); // logs 2,4,6,8 +</pre> + +<p>이것은 {{jsxref("Array.prototype.map", "map()")}} 연산자와 같은 기능을 한다.</p> + +<pre class="brush: js">var doubled = numbers.map(i => i * 2); +</pre> + +<p>배열들은 또한 다양한 표현을 통해 몇몇개의 배열 원소들은 선택할 수 도 있다. 아래의 예제는 바로 홀수만 선택하는 예제이다.</p> + +<pre class="brush: js">var numbers = [1, 2, 3, 21, 22, 30]; +var evens = [for (i of numbers) if (i % 2 === 0) i]; +console.log(evens); // logs 2,22,30 +</pre> + +<p>{{jsxref("Array.prototype.filter", "filter()")}} 또한 같은 목적으로 얼마든지 사용가능하다.</p> + +<pre class="brush: js">var evens = numbers.filter(i => i % 2 === 0); +</pre> + +<p>{{jsxref("Array.prototype.map", "map()")}} 그리고 {{jsxref("Array.prototype.filter", "filter()")}} 스타일과 같은 연산자들은 단한 배열 선언과 결합할 수 있다. 아래는 짝수만 필터링하고, 그 원소들을 2배씩하는 배열들을 만드는 예제이다.</p> + +<pre class="brush: js">var numbers = [1, 2, 3, 21, 22, 30]; +var doubledEvens = [for (i of numbers) if (i % 2 === 0) i * 2]; +console.log(doubledEvens); // logs 4,44,60 +</pre> + +<p>배열에서의 [ ] (꺽쇠괄호) 는 범위의 목적으로 암시적인 괄호를 의미한다. {{jsxref("Statements/let","let")}}를 사용하면서 정의된다면, 예제의 i와 같은 변수들이 사용된다. 이는 배열 밖에서 사용할 수 없음을 나타낸다.</p> + +<p>배열의 원소에 넣어지는 것은 굳이 배열일 필요는 없다 <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators" title="en-US/docs/JavaScript/Guide/Iterators and Generators">iterators and generators</a> 물론 가능하다.</p> + +<p>심지어 문자열도 배열의 원소로 넣을 수 있다. 필터와 지도 액션과 같은 데에 이용할 수 있다.</p> + +<pre class="brush: js">var str = 'abcdef'; +var consonantsOnlyStr = [for (c of str) if (!(/[aeiouAEIOU]/).test(c)) c].join(''); // 'bcdf' +var interpolatedZeros = [for (c of str) c + '0' ].join(''); // 'a0b0c0d0e0f0' +</pre> + +<p>또한 입력 폼이 유지되지 않으므로, 문자열을 뒤집기 위해 {{jsxref("Array.prototype.join", "join()")}} 를 사용해야 한다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="단순_배열">단순 배열</h3> + +<pre class="brush:js">[for (i of [1, 2, 3]) i * i ]; +// [1, 4, 9] + +var abc = ['A', 'B', 'C']; +[for (letters of abc) letters.toLowerCase()]; +// ["a", "b", "c"]</pre> + +<h3 id="if문에서의_배열">if문에서의 배열</h3> + +<pre class="brush: js">var years = [1954, 1974, 1990, 2006, 2010, 2014]; +[for (year of years) if (year > 2000) year]; +// [ 2006, 2010, 2014 ] +[for (year of years) if (year > 2000) if (year < 2010) year]; +// [ 2006], the same as below: +[for (year of years) if (year > 2000 && year < 2010) year]; +// [ 2006] +</pre> + +<h3 id="map과_filter를_비교한_배열">map과 filter를 비교한 배열</h3> + +<p>배열문법을 가장 쉽게 이해하는 방법은, 배열에서 {{jsxref("Array.map", "map")}} 그리고 {{jsxref("Array.filter", "filter")}}메소드를 비교하는 것이다.</p> + +<pre class="brush: js">var numbers = [1, 2, 3]; + +numbers.map(function (i) { return i * i }); +numbers.map(i => i * i); +[for (i of numbers) i * i]; +// all are [1, 4, 9] + +numbers.filter(function (i) { return i < 3 }); +numbers.filter(i => i < 3); +[for (i of numbers) if (i < 3) i]; +// all are [1, 2] +</pre> + +<h3 id="2개의_배열">2개의 배열</h3> + +<p>2개의 배열과 2개의 for-of 반복문을 살펴본다.</p> + +<pre class="brush: js">var numbers = [1, 2, 3]; +var letters = ['a', 'b', 'c']; + +var cross = [for (i of numbers) for (j of letters) i + j]; +// ["1a", "1b", "1c", "2a", "2b", "2c", "3a", "3b", "3c"] + +var grid = [for (i of numbers) [for (j of letters) i + j]]; +// [ +// ["1a", "1b", "1c"], +// ["2a", "2b", "2c"], +// ["3a", "3b", "3c"] +// ] + +[for (i of numbers) if (i > 1) for (j of letters) if(j > 'a') i + j] +// ["2b", "2c", "3b", "3c"], the same as below: + +[for (i of numbers) for (j of letters) if (i > 1) if(j > 'a') i + j] +// ["2b", "2c", "3b", "3c"] + +[for (i of numbers) if (i > 1) [for (j of letters) if(j > 'a') i + j]] +// [["2b", "2c"], ["3b", "3c"]], not the same as below: + +[for (i of numbers) [for (j of letters) if (i > 1) if(j > 'a') i + j]] +// [[], ["2b", "2c"], ["3b", "3c"]] +</pre> + +<h2 id="명세">명세</h2> + +<p>ECMAScript 2015 초안에 있었지만 개정 27(2014년 8월)에서 삭제되었습니다. specification semantics에 대해서는 ES2015의 이전 버전을 참조하세요.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Compat("javascript.operators.array_comprehensions")}}</p> + +<h2 id="오래된_JS1.7JS1.8_comprehensions과의_차이점들">오래된 JS1.7/JS1.8 comprehensions과의 차이점들</h2> + +<div class="warning">Gecko에서 JS1.7 / JS1.8 comprehensions가 46 버전부터 제거되었습니다. ({{bug(1220564)}}).</div> + +<p><strong>이전에 사용된 문법입니다. (더 이상 사용되지 않음!):</strong></p> + +<pre class="brush: js example-bad">[X for (Y in Z)] +[X for each (Y in Z)] +[X for (Y of Z)] +</pre> + +<p>차이점:</p> + +<ul> + <li>ESNext comprehensions는 전체comprehension 대신 "for"노드마다 하나의 범위를 만듭니다. + <ul> + <li>Old: <code>[()=>x for (x of [0, 1, 2])][1]() // 2</code></li> + <li>New: <code>[for (x of [0, 1, 2]) ()=>x][1]() // 1, each iteration creates a fresh binding for x. </code></li> + </ul> + </li> + <li>ESNext comprehensions은 assignment expression대신 "for"로 시작합니다. + <ul> + <li>Old: <code>[i * 2 for (i of numbers)]</code></li> + <li>New: <code>[for (i of numbers) i * 2]</code></li> + </ul> + </li> + <li>ESNext comprehensions는 <code>if</code> 및 <code>for</code> 구성 요소를 여러 개 가질 수 있습니다.</li> + <li>ESNext comprehensions <code>{{jsxref("Statements/for...of", "for...of")}}</code>에서만 동작하고 <code>{{jsxref("Statements/for...in", "for...in")}}</code>에서는 동작하지 않습니다.</li> +</ul> + +<p>버그 업데이트에 대한 제안은 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1220564#c42">Bug 1220564, comment 42</a>를 참조하세요.</p> + +<h2 id="더보기">더보기</h2> + +<ul> + <li>{{jsxref("Statements/for...of", "for...of")}}</li> + <li>{{jsxref("Operators/Generator_comprehensions", "Generator comprehensions", "" ,1)}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/operators/연산자_우선순위/index.html b/files/ko/web/javascript/reference/operators/연산자_우선순위/index.html new file mode 100644 index 0000000000..7a82346d09 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/연산자_우선순위/index.html @@ -0,0 +1,462 @@ +--- +title: 연산자 우선순위 +slug: Web/JavaScript/Reference/Operators/연산자_우선순위 +tags: + - JavaScript + - Operator + - 연산자 + - 우선순위 +translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>연산자 우선순위</strong>는 연산자를 실행하는 순서를 결정합니다. 우선순위가 높은 연산자가 먼저 실행됩니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-operatorprecedence.html")}}</div> + + + +<h2 id="우선순위와_결합성">우선순위와 결합성</h2> + +<p>아래와 같이 표현할 수 있는 표현식을 생각해 봅시다. 연산자<sub>1</sub>과 연산자<sub>2</sub>의 자리에는 아무 연산자를 넣을 수 있습니다.</p> + +<pre class="syntaxbox">a 연산자<sub>1</sub> b 연산자<sub>2</sub> c</pre> + +<p>두 연산자의 우선순위(아래 표 참조)가 다를 경우, 우선순위가 높은 연산자가 먼저 실행되고 결합성은 영향을 미치지 않습니다. 아래 예제에서는 덧셈이 곱셈보다 먼저 쓰였음에도 곱셈의 우선순위가 높기 때문에 먼저 실행됩니다.</p> + +<pre class="brush: js">console.log(3 + 10 * 2); // 23을 출력 +console.log(3 + (10 * 2)); // 23을 출력, 괄호는 불필요함 +console.log((3 + 10) * 2); // 26을 출력, 괄호로 인해 실행 순서가 바뀜 +</pre> + +<p>좌결합성(왼쪽에서 오른쪽으로)은 표현식이 <code>(a 연산자<sub>1</sub> b) 연산자<sub>2</sub> c</code>와 같이, 우결합성(오른쪽에서 왼쪽으로)은 <code>a 연산자<sub>1</sub> (b 연산자<sub>2</sub> c)</code>와 같이 계산된다는 의미입니다. 대입 연산자는 우결합성이므로 다음과 같은 코드를 작성할 수 있습니다.</p> + +<pre class="brush: js">a = b = 5; // a = (b = 5);와 같음 +</pre> + +<p>이때 대입 연산자는 대입된 값을 반환하므로 <code>a</code>와 <code>b</code>의 값이 5가 됨을 예상할 수 있습니다. 우선 <code>b</code>의 값이 5로 설정되고, 그 다음에는 <code>a</code>의 값이 우변인 <code>b = 5</code>의 반환값 5로 설정됩니다.</p> + +<p>다른 예시로, 좌결합성인 다른 산술 연산자와 달리 거듭제곱 연산자 (<code>**</code>)만은 우결합성입니다. 흥미로운 점으로 표현식의 평가는 결합성과 무관하게 항상 왼쪽에서 오른쪽으로 진행됩니다.</p> + +<table class="standard-table"> + <tbody> + <tr> + <td>코드</td> + <td>출력</td> + </tr> + <tr> + <td> + <pre class="brush: js"> +function echo(name, num) { + console.log(name + " 항 평가함"); + return num; +} +// 나눗셈 연산자 (/)에 주목 +console.log(echo("첫째", 6) / echo("둘째", 2)); +</pre> + </td> + <td> + <pre> +첫째 항 평가함 +둘째 항 평가함 +3 +</pre> + </td> + </tr> + <tr> + <td> + <pre class="brush: js"> +function echo(name, num) { + console.log(name + " 항 평가함"); + return num; +} +// 거듭제곱 연산자 (**)에 주목 +console.log(echo("첫째", 2) ** echo("둘째", 3));</pre> + </td> + <td> + <pre> +첫째 항 평가함 +둘째 항 평가함 +8</pre> + </td> + </tr> + </tbody> +</table> + +<p>여러 연산자의 우선순위가 같을 때는 결합성을 고려합니다. 위에서와 같이 연산자가 하나이거나 연산자끼리 우선순위가 다를 경우에는 결합성이 결과에 영향을 미치지 않습니다. 아래의 예제에서 같은 종류의 연산자를 여러 번 사용했을 때 결합성이 결과에 영향을 미치는 것을 확인할 수 있습니다.</p> + +<table class="standard-table"> + <tbody> + <tr> + <td>코드</td> + <td>출력</td> + </tr> + <tr> + <td> + <pre class="brush: js"> +function echo(name, num) { + console.log(name + " 항 평가함"); + return num; +} +// 나눗셈 연산자 (/)에 주목 +console.log(echo("첫째", 6) / echo("둘째", 2) / echo("셋째", 3)); +</pre> + </td> + <td> + <pre> +첫째 항 평가함 +둘째 항 평가함 +셋째 항 평가함 +1 +</pre> + </td> + </tr> + <tr> + <td> + <pre class="brush: js"> +function echo(name, num) { + console.log(name + " 항 평가함"); + return num; +} +// 거듭제곱 연산자 (**)에 주목 +console.log(echo("첫째", 2) ** echo("둘째", 3) ** echo("셋째", 2)); +</pre> + </td> + <td> + <pre> +첫째 항 평가함 +둘째 항 평가함 +셋째 항 평가함 +512 +</pre> + </td> + </tr> + <tr> + <td> + <pre class="brush: js"> +function echo(name, num) { + console.log(name + " 항 평가함"); + return num; +} +// 첫 번째 거듭제곱 연산자 주변의 괄호에 주목 +console.log((echo("첫째", 2) ** echo("둘째", 3)) ** echo("셋째", 2));</pre> + </td> + <td> + <pre> +첫째 항 평가함 +둘째 항 평가함 +셋째 항 평가함 +64</pre> + </td> + </tr> + </tbody> +</table> + +<p>위의 예제에서 나눗셈은 좌결합성이므로 <code>6 / 3 / 2</code>는 <code>(6 / 3) / 2</code>와 같습니다. 한편 거듭제곱은 우결합성이므로 <code>2 ** 3 ** 2</code>는 <code>2 ** (3 ** 2)</code>와 같습니다. 그러므로 <code>(2 ** 3) ** 2</code>는 괄호로 인해 실행 순서가 바뀌기 때문에 위 표와 같이 64로 평가됩니다.</p> + +<p>우선순위는 결합성보다 항상 우선하므로, 거듭제곱과 나눗셈을 같이 사용하면 나눗셈보다 거듭제곱이 먼저 계산됩니다. 예를 들어 <code>2 ** 3 / 3 ** 2</code>는 <code>(2 ** 3) / (3 ** 2)</code>와 같으므로 0.8888888888888888로 계산됩니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">3 > 2 && 2 > 1 +// true를 반환 + +3 > 2 > 1 +// 3 > 2는 true인데, 부등호 연산자에서 true는 1로 변환되므로 +// true > 1은 1 > 1이 되고, 이는 거짓이다. +// 괄호를 추가하면 (3 > 2) > 1과 같다.</pre> + +<h2 id="표">표</h2> + +<p>다음 표는 우선순위 내림차순(21부터 1까지)으로 정렬되어 있습니다.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>우선순위</th> + <th>연산자 유형</th> + <th>결합성</th> + <th>연산자</th> + </tr> + <tr> + <td>21</td> + <td>{{jsxref("Operators/Grouping", "그룹", "", 1)}}</td> + <td>없음</td> + <td><code>( … )</code></td> + </tr> + <tr> + <td colspan="1" rowspan="5">20</td> + <td>{{jsxref("Operators/Property_Accessors", "멤버 접근", "#점_표기법", 1)}}</td> + <td>좌결합성</td> + <td><code>… . …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/Property_Accessors", "계산된 멤버 접근","#괄호_표기법", "1")}}</td> + <td>좌결합성</td> + <td><code>… [ … ]</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/new","new")}} (매개변수 리스트 존재)</td> + <td>없음</td> + <td><code>new … ( … )</code></td> + </tr> + <tr> + <td> + <p><a href="/ko/docs/Web/JavaScript/Guide/Functions">함수 호출</a></p> + </td> + <td>좌결합성</td> + <td><code>… ( <var>… </var>)</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Optional chaining</a></td> + <td>좌결합성</td> + <td><code>?.</code></td> + </tr> + <tr> + <td rowspan="1">19</td> + <td>{{jsxref("Operators/new","new")}} (매개변수 리스트 생략)</td> + <td>우결합성</td> + <td><code>new …</code></td> + </tr> + <tr> + <td rowspan="2">18</td> + <td>{{jsxref("Operators/Arithmetic_Operators","후위 증가","#Increment", 1)}}</td> + <td colspan="1" rowspan="2">없음</td> + <td><code>… ++</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/Arithmetic_Operators","후위 감소","#Decrement", 1)}}</td> + <td><code>… --</code></td> + </tr> + <tr> + <td colspan="1" rowspan="10">17</td> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">논리 NOT</a></td> + <td colspan="1" rowspan="10">우결합성</td> + <td><code>! …</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT">비트 NOT</a></td> + <td><code>~ …</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus">단항 양부호</a></td> + <td><code>+ …</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation">단항 부정</a></td> + <td><code>- …</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">전위 증가</a></td> + <td><code>++ …</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement">전위 감소</a></td> + <td><code>-- …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/typeof", "typeof")}}</td> + <td><code>typeof …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/void", "void")}}</td> + <td><code>void …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/delete", "delete")}}</td> + <td><code>delete …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/await", "await")}}</td> + <td><code>await …</code></td> + </tr> + <tr> + <td>16</td> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation">거듭제곱</a></td> + <td>우결합성</td> + <td><code>… ** …</code></td> + </tr> + <tr> + <td rowspan="3">15</td> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Multiplication">곱셈</a></td> + <td colspan="1" rowspan="3">좌결합성</td> + <td><code>… * …</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Division">나눗셈</a></td> + <td><code>… / …</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder">나머지</a></td> + <td><code>… % …</code></td> + </tr> + <tr> + <td rowspan="2">14</td> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition">덧셈</a></td> + <td colspan="1" rowspan="2">좌결합성</td> + <td><code>… + …</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Subtraction">뺄셈</a></td> + <td><code>… - …</code></td> + </tr> + <tr> + <td rowspan="3">13</td> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">비트 왼쪽 시프트</a></td> + <td colspan="1" rowspan="3">좌결합성</td> + <td><code>… << …</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">비트 오른쪽 시프트</a></td> + <td><code>… >> …</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">비트 부호 없는 오른쪽 시프트</a></td> + <td><code>… >>> …</code></td> + </tr> + <tr> + <td rowspan="6">12</td> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_operator">미만</a></td> + <td colspan="1" rowspan="6">좌결합성</td> + <td><code>… < …</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than__or_equal_operator">이하</a></td> + <td><code>… <= …</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_operator">초과</a></td> + <td><code>… > …</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_or_equal_operator">이상</a></td> + <td><code>… >= …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/in", "in")}}</td> + <td><code>… in …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/instanceof", "instanceof")}}</td> + <td><code>… instanceof …</code></td> + </tr> + <tr> + <td rowspan="4">11</td> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality">동등</a></td> + <td colspan="1" rowspan="4">좌결합성</td> + <td><code>… == …</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Inequality">부등</a></td> + <td><code>… != …</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity">일치</a></td> + <td><code>… === …</code></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Nonidentity">불일치</a></td> + <td><code>… !== …</code></td> + </tr> + <tr> + <td>10</td> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND">비트 AND</a></td> + <td>좌결합성</td> + <td><code>… & …</code></td> + </tr> + <tr> + <td>9</td> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">비트 XOR</a></td> + <td>좌결합성</td> + <td><code>… ^ …</code></td> + </tr> + <tr> + <td>8</td> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR">비트 OR</a></td> + <td>좌결합성</td> + <td><code>… | …</code></td> + </tr> + <tr> + <td>7</td> + <td><a href="https://wiki.developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">널 병합 연산자</a></td> + <td>좌결합성</td> + <td><code>… ?? …</code></td> + </tr> + <tr> + <td>6</td> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND">논리 AND</a></td> + <td>좌결합성</td> + <td><code>… && …</code></td> + </tr> + <tr> + <td>5</td> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR">논리 OR</a></td> + <td>좌결합성</td> + <td><code>… || …</code></td> + </tr> + <tr> + <td>4</td> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">조건</a></td> + <td>우결합성</td> + <td><code>… ? … : …</code></td> + </tr> + <tr> + <td rowspan="13">3</td> + <td rowspan="13"><a href="/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">할당</a></td> + <td rowspan="13">우결합성</td> + <td><code>… = …</code></td> + </tr> + <tr> + <td><code>… += …</code></td> + </tr> + <tr> + <td><code>… -= …</code></td> + </tr> + <tr> + <td><code>… **= …</code></td> + </tr> + <tr> + <td><code>… *= …</code></td> + </tr> + <tr> + <td><code>… /= …</code></td> + </tr> + <tr> + <td><code>… %= …</code></td> + </tr> + <tr> + <td><code>… <<= …</code></td> + </tr> + <tr> + <td><code>… >>= …</code></td> + </tr> + <tr> + <td><code>… >>>= …</code></td> + </tr> + <tr> + <td><code>… &= …</code></td> + </tr> + <tr> + <td><code>… ^= …</code></td> + </tr> + <tr> + <td><code>… |= …</code></td> + </tr> + <tr> + <td rowspan="2">2</td> + <td>{{jsxref("Operators/yield", "yield")}}</td> + <td colspan="1" rowspan="2">우결합성</td> + <td><code>yield …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/yield*", "yield*")}}</td> + <td><code>yield* …</code></td> + </tr> + <tr> + <td>1</td> + <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comma_Operator">쉼표 / 시퀀스</a></td> + <td>좌결합성</td> + <td><code>… , …</code></td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/javascript/reference/statements/async_function/index.html b/files/ko/web/javascript/reference/statements/async_function/index.html new file mode 100644 index 0000000000..5a986c8af4 --- /dev/null +++ b/files/ko/web/javascript/reference/statements/async_function/index.html @@ -0,0 +1,243 @@ +--- +title: async function +slug: Web/JavaScript/Reference/Statements/async_function +tags: + - Example + - JavaScript + - Promise + - async + - await +translation_of: Web/JavaScript/Reference/Statements/async_function +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><code><strong>async function</strong></code> 선언은 {{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}}객체를 반환하는 하나의 비동기 함수를 정의합니다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 {{jsxref("Promise")}}를 사용하여 결과를 반환합니다. 그러나 비동기 함수를 사용하는 코드의 구문과 구조는, 표준 동기 함수를 사용하는것과 많이 비슷합니다.</p> + +<div class="noinclude"> +<p>또한 {{jsxref("Operators/async_function", "async function expression", "", 1)}}을 사용해서 async function을 선언할 수 있습니다.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/statement-async.html", "taller")}}</div> + +<div class="hidden"> +<p>이 데모에 대한 소스가 여기에 있다. 기여하고싶다면 다음의 주소에서 Clone하고 pull request하라 : <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a></p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate" dir="rtl">async function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>name</code></dt> + <dd>함수의 이름.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>함수에게 전달되기 위한 인자의 이름.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd><font face="Consolas, Liberation Mono, Courier, monospace">함수본문을 구성하는 내용.</font></dd> + <dt> + <h3 id="반환_값"><font face="Consolas, Liberation Mono, Courier, monospace">반환 값</font></h3> + + <p>Promise : async 함수에 의해 반환 된 값으로 해결되거나 async함수 내에서 발생하는 캐치되지 않는 예외로 거부되는 값.</p> + </dt> +</dl> + +<h2 id="Description">Description</h2> + +<p><code>async</code> 함수에는 {{jsxref ( "Operators / await", "await")}}식이 포함될 수 있습니다. 이 식은 <code>async</code> 함수의 실행을 일시 중지하고 전달 된 <code>Promise</code>의 해결을 기다린 다음 <code>async</code> 함수의 실행을 다시 시작하고 완료후 값을 반환합니다.</p> + +<div class="blockIndicator note"> +<p><code>await</code> 키워드는 <code>async</code> 함수에서만 유효하다는 것을 기억하십시오. <code>async</code> 함수의 본문 외부에서 사용하면 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a>가 발생합니다.</p> +</div> + +<div class="note"> +<p>async/await함수의 목적은 사용하는 여러 promise의 동작을 동기스럽게 사용할 수 있게 하고, 어떠한 동작을 여러 promise의 그룹에서 간단하게 동작하게 하는 것이다.<br> + promise가 구조화된 callback과 유사한 것 처럼 async/await또한 제네레이터(generator)와 프로미스(promise)를 묶는것과 유사하다.</p> +</div> + +<p><code>async</code> 함수는 항상 promise를 반환합니다. 만약 <code>async</code> 함수의 반환값이 명시적으로 promise가 아니라면 암묵적으로 promise로 감싸집니다.</p> + +<p>예를 들어</p> + +<pre class="notranslate">async function foo() { + return 1 +}</pre> + +<p>위 코드는 아래와 같습니다.</p> + +<pre class="notranslate">function foo() { + return Promise.resolve(1) +}</pre> + +<p><code>async</code> 함수의 본문은 0개 이상의 <code>await</code> 문으로 분할된 것으로 생각할 수 있습니다. 첫번째 <code>await</code> 문을 포함하는 최상위 코드는 동기적으로 실행됩니다. 따라서 <code>await</code> 문이 없는 <code>async</code> 함수는 동기적으로 실행됩니다. 하지만 <code>await</code> 문이 있다면 <code>async</code> 함수는 항상 비동기적으로 완료됩니다.</p> + +<p>예를 들어</p> + +<pre class="notranslate">async function foo() { + await 1 +}</pre> + +<p>위 코드는 아래와 같습니다.</p> + +<pre class="notranslate">function foo() { + return Promise.resolve(1).then(() => undefined) +} +</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Simple_example">Simple example</h3> + +<pre class="notranslate"><code>var resolveAfter2Seconds = function() { + console.log("starting slow promise"); + return new Promise(resolve => { + setTimeout(function() { + resolve(20); + console.log("slow promise is done"); + }, 2000); + }); +}; + +var resolveAfter1Second = function() { + console.log("starting fast promise"); + return new Promise(resolve => { + setTimeout(function() { + resolve(10); + console.log("fast promise is done"); + }, 1000); + }); +}; + +var sequentialStart = async function() { + console.log('==SEQUENTIAL START=='); + + // If the value of the expression following the await operator is not a Promise, it's converted to a resolved Promise. + const slow = await resolveAfter2Seconds(); + console.log(slow); + + const fast = await resolveAfter1Second(); + console.log(fast); +} + +var concurrentStart = async function() { + console.log('==CONCURRENT START with await=='); + const slow = resolveAfter2Seconds(); // starts timer immediately + const fast = resolveAfter1Second(); + + console.log(await slow); + console.log(await fast); // waits for slow to finish, even though fast is already done! +} + +var stillConcurrent = function() { + console.log('==CONCURRENT START with Promise.all=='); + Promise.all([resolveAfter2Seconds(), resolveAfter1Second()]).then((messages) => { + console.log(messages[0]); // slow + console.log(messages[1]); // fast + }); +} + +var parallel = function() { + console.log('==PARALLEL with Promise.then=='); + resolveAfter2Seconds().then((message)=>console.log(message)); + resolveAfter1Second().then((message)=>console.log(message)); +} + +sequentialStart(); // after 2 seconds, logs "slow", then after 1 more second, "fast" +// wait above to finish +setTimeout(concurrentStart, 4000); // after 2 seconds, logs "slow" and then "fast" +// wait again +setTimeout(stillConcurrent, 7000); // same as concurrentStart +// wait again +setTimeout(parallel, 10000); // trully parallel: after 1 second, logs "fast", then after 1 more second, "slow"</code></pre> + +<div class="warning"> +<h4 id="await_와_Promisethen을_혼동하지_마세요"><code>await</code> 와 <code>Promise#then</code>을 혼동하지 마세요</h4> + +<p><code>sequentialStart</code> 에서, 첫 번째 <code>await</code>는 2초의 대기 시간을 갖고, 다시 두 번째 <code>await</code>에서 1초의 대기 시간을 갖습니다. 두 번째 타이머는 첫 번째 타이머가 완료될 때 까지 생성되지 않습니다.</p> + +<p><code>concurrentStart</code> 에서, 두 타이머 모두 생성 된 다음 <code>await</code> 합니다. 타이머가 동시에 실행되고 있지만, <code>await</code> 호출은 여전히 연속적 실행중이므로, 두 번째 <code>await</code> 는 첫 번째 호출이 끝날 때 까지 대기합니다. 이렇게하면 3초가 아니라, 가장 느린 타이머에 필요한 2초가 필요합니다. <code>stillConcurrent</code> 에서도 <code>Promise.all</code> 을 사용하여 같은 일이 발생합니다.</p> + +<p>두 개 이상의 프러미스를 동시에 wait 하고 싶다면, <code>Promise#then</code>을 사용하여 예제와 같이 <code>parallel</code> 를 수행할 수 있습니다.</p> +</div> + +<h3 id="async함수를_사용한_promise_chain_재작성"><code>async</code>함수를 사용한 promise chain 재작성</h3> + +<p>{{jsxref("Promise")}} 를 반환하는 API는 promise chain을 만들며 여러 파트의 함수로 나뉜다.<br> + 아래 코드를 보자.</p> + +<pre class="brush: js notranslate">function getProcessedData(url) { + return downloadData(url) // returns a promise + .catch(e => { + return downloadFallbackData(url) // returns a promise + }) + .then(v => { + return processDataInWorker(v); // returns a promise + }); +} +</pre> + +<p>위의 코드는 하나의 async함수로 아래와 같이 쓰여질 수도 있다.</p> + +<pre class="brush: js notranslate">async function getProcessedData(url) { + let v; + try { + v = await downloadData(url); + } catch (e) { + v = await downloadFallbackData(url); + } + return processDataInWorker(v); +} +</pre> + +<p>위 예제에서는 return 구문에 await 구문이 없다는 것에 주목하자. 이는 async function의 반환값이 암묵적으로 {{jsxref("Promise.resolve")}}로 감싸지기 때문이다.</p> + +<h2 id="Specifications">Specifications</h2> + +<table> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Initial definition in ES2017.</td> + </tr> + <tr> + <td>{{SpecName('ES8', '#sec-async-function-definitions', 'async function')}}</td> + <td>{{Spec2('ES8')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> +</div> + +<p>{{Compat("javascript.statements.async_function")}}</p> + +<h2 id="함께_보기">함께 보기</h2> + +<ul> + <li>{{jsxref("Operators/async_function", "async function expression")}}</li> + <li>{{jsxref("AsyncFunction")}} object</li> + <li>{{jsxref("Operators/await", "await")}}</li> + <li><a href="http://innolitics.com/10x/javascript-decorators-for-promise-returning-functions/">"Decorating Async Javascript Functions" on "innolitics.com"</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/block/index.html b/files/ko/web/javascript/reference/statements/block/index.html new file mode 100644 index 0000000000..aab5d0dc3f --- /dev/null +++ b/files/ko/web/javascript/reference/statements/block/index.html @@ -0,0 +1,132 @@ +--- +title: block +slug: Web/JavaScript/Reference/Statements/block +tags: + - JavaScript + - Reference + - Statement +translation_of: Web/JavaScript/Reference/Statements/block +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>블록문</strong>(또는 다른 언어에서는 복합문)은 0개 이상의 구문을 묶을 때 사용합니다. 블록은 한 쌍의 중괄호로 구성하며 선택적으로 {{jsxref("Statements/label", "이름", "", 0)}}을 붙일 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-block.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<h3 id="블록문">블록문</h3> + +<pre class="syntaxbox">{ + <em>StatementList</em> +}</pre> + +<h3 id="유명_블록문">유명 블록문</h3> + +<pre class="syntaxbox"><em>LabelIdentifier</em>: { + <em>StatementList</em> +} +</pre> + +<dl> + <dt><code>StatementList</code></dt> + <dd>블록문 내의 문.</dd> + <dt><code>LabelIdentifier</code></dt> + <dd>시각적인 구분, 또는 {{jsxref("Statements/break", "break")}}문의 대상으로 쓸 {{jsxref("Statements/label", "label")}}.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>다른 언어에서 블록문은 <strong>복합문</strong>이라고 부르기도 합니다. 블록문을 쓰면 JavaScript가 하나의 문을 기대하는 곳에서 다수의 문을 실행할 수 있습니다. JavaScript에서 이렇게 문을 묶는건 흔히 쓰이는 기법입니다. 반대 개념으로는 {{jsxref("Statements/empty", "공백문", "", 0)}}이 있으며, 이는 하나의 문을 기대하는 곳에 아무것도 제공하지 않는 것입니다.</p> + +<h3 id="블록_범위_규칙">블록 범위 규칙</h3> + +<h4 id="var_사용_시"><code>var</code> 사용 시</h4> + +<p>{{jsxref("Statements/var", "var")}}로 선언한 변수는 블록 범위를 <strong>가지지 않습니다</strong>. 블록 내에서 선언한 변수의 범위는 함수나 스크립트가 되어, 값 할당의 영향이 블록 바깥까지 미칩니다. 다른 말로는 블록문이 범위를 만들지 않습니다. "독립" 블록문도 유효한 구문이긴 하지만, C와 Java의 블록에 기대하는걸 JavaScript에서도 기대하면 안됩니다. 예를 들어보겠습니다.</p> + +<pre class="brush: js example-bad">var x = 1; +{ + var x = 2; +} +console.log(x); // 2 기록</pre> + +<p>콘솔 출력 결과는 2입니다. 블록 밖의 <code>var x</code>와 블록 안의 <code>var x</code>는 같은 범위에 속하기 때문입니다. C나 Java에서 같은 코드를 작성한다면 1을 출력할 것입니다.</p> + +<h4 id="let과_const_사용_시"><code>let</code>과 <code>const</code> 사용 시</h4> + +<p>반면 {{jsxref("Statements/let", "let")}}과 {{jsxref("Statements/const", "const")}}로 선언한 식별자는 블록 범위를 <strong>가집니다</strong>.</p> + +<pre class="brush: js">let x = 1; +{ + let x = 2; +} +console.log(x); // 1 기록 +</pre> + +<p><code>x = 2</code>는 선언한 블록으로 범위가 제한됩니다.</p> + +<p><code>const</code>도 마찬가지입니다.</p> + +<pre class="brush: js">const c = 1; +{ + const c = 2; +} +console.log(c); // 1 기록, SyntaxError 없음</pre> + +<p>블록 내의 <code>const c = 2</code>가 <code>SyntaxError: Identifier 'c' has already been declared</code>를 던지지 않는 점에 주목하세요. 블록 범위 안이라 별개의 식별자이기 때문입니다.</p> + +<p>ES2015의 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a>부터, 블록 내의 함수는 해당 블록으로 범위가 제한됩니다. ES2015 이전의 엄격 모드에서는 블록 레벨 함수를 사용할 수 없었습니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-block', 'Block statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-block', 'Block statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.1', 'Block statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.1', 'Block statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.1', 'Block statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.statements.block")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Statements/while", "while")}}</li> + <li>{{jsxref("Statements/if...else", "if...else")}}</li> + <li>{{jsxref("Statements/let", "let")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/break/index.html b/files/ko/web/javascript/reference/statements/break/index.html new file mode 100644 index 0000000000..fdbb79e719 --- /dev/null +++ b/files/ko/web/javascript/reference/statements/break/index.html @@ -0,0 +1,119 @@ +--- +title: break +slug: Web/JavaScript/Reference/Statements/break +tags: + - JavaScript + - Reference + - Statement +translation_of: Web/JavaScript/Reference/Statements/break +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong><code>break</code> 문</strong>은 현재 반복문, {{jsxref("Statements/switch", "switch")}} 문, 또는 {{jsxref("Statements/label", "label")}} 문을 종료하고, 그 다음 문으로 프로그램 제어를 넘깁니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-break.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">break [<em>label</em>];</pre> + +<dl> + <dt><code>label</code> {{optional_inline}}</dt> + <dd>문의 라벨에 연결한 {{glossary("identifier", "식별자")}}. 반복문이나 {{jsxref("Statements/switch", "switch")}}에서 사용하는게 아니면 필수로 제공해야 합니다.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p><code>break</code> 문은 프로그램이 label 달린 문에서 빠져나오게 하는 선택사항 label을 포함합니다. <code>break</code> 문은 참조되는 label 내에 중첩되어야 합니다. label 달린 문은 어떤 {{jsxref("Statements/block", "block")}} 문이든 될 수 있습니다. 꼭, loop 문을 달 필요가 없습니다.</p> + +<h2 id="예제">예제</h2> + +<p>다음 함수는 <code>i</code>가 3일 때 {{jsxref("Statements/while", "while")}} loop를 종료하는 break 문이 있고, 그러고는 3 * <code>x</code>값을 반환합니다.</p> + +<pre class="brush:js;highlight:[6];">function testBreak(x) { + var i = 0; + + while (i < 6) { + if (i == 3) { + break; + } + i += 1; + } + + return i * x; +}</pre> + +<p>다음 코드는 label 달린 블록이 있는 <code>break</code> 문을 사용합니다. <code>break</code> 문은 자신이 참조하는 label 내에 중첩되어야 합니다. <code>inner_block</code>은 <code>outer_block</code>내에 중첩되어야 함을 주의하세요.</p> + +<pre class="brush:js;highlight:[1,2,4];">outer_block: { + inner_block: { + console.log('1'); + break outer_block; // inner_block과 outer_block 둘다 빠져나옴 + console.log(':-('); // 건너뜀 + } + console.log('2'); // 건너뜀 +} +</pre> + +<p>다음 코드는 또한 label 달린 블록이 있는 break 문을 사용하지만 그 <code>break</code> 문이 <code>block_2</code>를 참조하지만 <code>block_1</code> 내에 있기에 구문 오류(Syntax Error)가 발생합니다. <code>break</code> 문은 항상 자신이 참조하는 label 내에 중첩되어야 합니다.</p> + +<pre class="brush:js;highlight:[1,3,6];">block_1: { + console.log('1'); + break block_2; // SyntaxError: label을 찾을 수 없음 +} + +block_2: { + console.log('2'); +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Unlabeled version.</td> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Labeled version added.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.8', 'Break statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-break-statement', 'Break statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-break-statement', 'Break statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.statements.break")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Statements/continue", "continue")}}</li> + <li>{{jsxref("Statements/label", "label")}}</li> + <li>{{jsxref("Statements/switch", "switch")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/class/index.html b/files/ko/web/javascript/reference/statements/class/index.html new file mode 100644 index 0000000000..bfb1c95027 --- /dev/null +++ b/files/ko/web/javascript/reference/statements/class/index.html @@ -0,0 +1,119 @@ +--- +title: class +slug: Web/JavaScript/Reference/Statements/class +tags: + - Classes + - Declaration + - ECMAScript 2015 + - JavaScript + - Reference + - Statement +translation_of: Web/JavaScript/Reference/Statements/class +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong><code>class</code> 선언</strong>은 프로토타입 기반 상속을 사용하여, 주어진 이름의 새로운 클래스를 만듭니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-class.html")}}</div> + + + +<div class="noinclude"> +<p>{{jsxref("Operators/class", "클래스 표현", "", 1)}}을 사용하여 클래스를 정의할 수도 있습니다. 표현식과 달리 선언문으로는 같은 클래스를 다시 선언하면 오류가 발생합니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">class <em>name</em> [extends] { + // class body +} +</pre> + +<h2 id="설명">설명</h2> + +<p>클래스 본문은 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a>에서 실행됩니다. 생성자 속성은 선택 사항입니다..</p> + +<p>클래스 선언은 {{jsxref("Statements/function", "함수 선언", "", 0)}}과 달리 {{Glossary("Hoisting", "호이스팅")}}의 대상이 아닙니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="간단한_클래스_선언">간단한 클래스 선언</h3> + +<p>다음 예제는 우선 <code>Polygon</code> 클래스를 정의하고, <code>Square</code>라는 이름의 새로운 클래스가 <code>Polygon</code>을 상속합니다. 생성자 내부의 <code>super()</code>는 생성자 내에서만, 그리고 {{jsxref("Operators/this", "this")}} 키워드를 사용하기 전에만 쓸 수 있다는 점을 주의하세요.</p> + +<pre class="brush: js">class Polygon { + constructor(height, width) { + this.name = 'Polygon'; + this.height = height; + this.width = width; + } +} + +class Square extends Polygon { + constructor(length) { + super(length, length); + this.name = 'Square'; + } +}</pre> + +<div class="warning"> +<h3 id="같은_클래스를_두_번_선언하려고_시도할_때">같은 클래스를 두 번 선언하려고 시도할 때</h3> + +<p>클래스 선언문으로 같은 클래스를 두 번 선언하면 오류가 발생합니다.</p> + +<pre class="brush: js">class Foo {}; +class Foo {}; // Uncaught SyntaxError: Identifier 'Foo' has already been declared +</pre> + +<p>이전에 표현식으로 정의한 경우에도 오류가 발생합니다.</p> + +<pre class="brush: js">var Foo = class {}; +class Foo {}; // Uncaught TypeError: Identifier 'Foo' has already been declared +</pre> +</div> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2017')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.statements.class")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Statements/function", "function")}} 선언문</li> + <li>{{jsxref("Operators/class", "class")}} 표현식</li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Classes">클래스</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/const/index.html b/files/ko/web/javascript/reference/statements/const/index.html new file mode 100644 index 0000000000..1cbd7ea7aa --- /dev/null +++ b/files/ko/web/javascript/reference/statements/const/index.html @@ -0,0 +1,136 @@ +--- +title: const +slug: Web/JavaScript/Reference/Statements/const +tags: + - ECMAScript 2015 + - JavaScript + - Reference + - Statement + - constants +translation_of: Web/JavaScript/Reference/Statements/const +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong><code>const</code> 선언</strong>은 블록 범위의 상수를 선언합니다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-const.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">const <em>name1 = <em>value1 [</em>, <em>name2</em> = <em>value2</em><em> [</em>, ... [</em>, <em>nameN</em> = <em>valueN]]]</em>;</pre> + +<dl> + <dt><code>nameN</code></dt> + <dd>상수의 이름. 아무 유효한 {{Glossary("identifier", "식별자")}}를 사용할 수 있습니다.</dd> + <dt><code>valueN</code></dt> + <dd>상수의 값. 아무 유효한 <a href="/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators#표현식">표현식</a>이나 가능합니다.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>이 선언은 선언된 함수에 전역 또는 지역일 수 있는 상수를 만듭니다. 상수 초기자(initializer)가 필요합니다. 즉 선언되는 같은 문에 그 값을 지정해야 합니다(이는 나중에 변경될 수 없는 점을 감안하면 말이 됩니다).</p> + +<p>상수는 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/let">let</a></code> 문을 사용하여 정의된 변수와 마찬가지로 블록 범위(block-scope)입니다. 상수의 값은 재할당을 통해 바뀔 수 없고 재선언될 수 없습니다.</p> + +<p><code><a href="/ko/docs/Web/JavaScript/Reference/Statements/let">let</a></code>에 적용한 "<a href="/ko/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let" title="temporal dead zone">일시적 사각 지대</a>"에 관한 모든 고려는, <code>const</code>에도 적용합니다.</p> + +<p>상수는 같은 범위의 상수 또는 변수와 그 이름을 공유할 수 없습니다.</p> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 상수가 어떻게 동작하는지 보입니다. 브라우저 콘솔에서 따라해보세요.</p> + +<pre class="brush:js">// 주의: 상수 선언에는 대소문자 모두 사용할 수 있지만, +// 일반적인 관습은 모두 대문자를 사용하는 것입니다. + +// MY_FAV를 상수로 정의하고 그 값을 7로 함 +const MY_FAV = 7; + +// 에러가 발생함 +MY_FAV = 20; + +// 7 출력 +console.log("my favorite number is: " + MY_FAV); + +// 상수를 재선언하려는 시도는 오류 발생 - Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared +const MY_FAV = 20; + +// MY_FAV라는 이름은 위에서 상수로 예약되어 있어서 역시 실패함. +var MY_FAV = 20; + +<code>// 역시 오류가 발생함 +let MY_FAV = 20; + +// 블록 범위의 특성을 아는게 중요 +if (MY_FAV === 7) { + // 블록 범위로 지정된 MY_FAV 라는 변수를 만드므로 괜찮습니다 + // (let으로 const 변수가 아닌 블록 범위를 선언하는 것과 똑같이 동작합니다) + let MY_FAV = 20; + + // MY_FAV는 이제 20입니다 + console.log('my favorite number is ' + MY_FAV); + + // 이 선언은 전역으로 호이스트되고 에러가 발생합니다. + var MY_FAV = 20; +} + +// MY_FAV는 여전히 7 +console.log('my favorite number is ' + MY_FAV); + +// const 선언시에 초기값을 생략해서 오류 발생 +const FOO; + +// const는 오브젝트에도 잘 동작합니다 +const MY_OBJECT = {'key': 'value'}; + +// 오브젝트를 덮어쓰면 오류가 발생합니다 +MY_OBJECT = {'OTHER_KEY': 'value'}; + +// 하지만 오브젝트의 키는 보호되지 않습니다. +// 그러므로 아래 문장은 문제없이 실행됩니다 +MY_OBJECT.key = 'otherValue'; // 오브젝트를 변경할 수 없게 하려면 Object.freeze() 를 사용해야 합니다 + +// 배열에도 똑같이 적용됩니다 +const MY_ARRAY = []; +// 배열에 아이템을 삽입하는 건 가능합니다 +MY_ARRAY.push('A'); // ["A"] +// 하지만 변수에 새로운 배열을 배정하면 에러가 발생합니다 +MY_ARRAY = ['B']</code></pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.statements.const")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/var"><code>var</code></a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a></li> + <li><a href="/ko/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Constants">JavaScript 안내서의 상수</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/continue/index.html b/files/ko/web/javascript/reference/statements/continue/index.html new file mode 100644 index 0000000000..f0d67deea2 --- /dev/null +++ b/files/ko/web/javascript/reference/statements/continue/index.html @@ -0,0 +1,164 @@ +--- +title: continue +slug: Web/JavaScript/Reference/Statements/continue +translation_of: Web/JavaScript/Reference/Statements/continue +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>continue</strong> 문은 현재 또는 레이블이 지정된 루프의 현재 반복에서 명령문의 실행을 종료하고 반복문의 처음으로 돌아가여 루프문의 다음 코드를 실행합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-continue.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">continue [<em>label</em>];</pre> + +<dl> + <dt><code>label</code></dt> + <dd> + <p>명령문의 레이블과 연관된 식별자.</p> + </dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>{{jsxref ( "Statements / break", "break")}} 문과 달리 <code>continue</code>는 루프의 실행을 완전히 종료하지 않고 <code>for</code>, <code>while</code>문에서 다음과 같이 동작합니다.</p> + +<ul> + <li>{{jsxref ( "Statements / while", "while")}} 루프에서는 다시 조건으로 점프합니다.</li> +</ul> + +<ul> + <li>{{jsxref ( "Statements / for", "for")}} 루프에서는 업데이트 표현식으로 점프합니다.</li> +</ul> + +<p><code>continue</code> 문에는 현재 루프 대신 레이블이 지정된 루프 문의 다음 반복으로 건너 뛰도록하는 선택적 레이블이 포함될 수 있습니다. 이 경우, <code>continue</code> 문은 이 레이블 된 명령문 내에 중첩되어야합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Using_continue_with_while">Using <code>continue</code> with <code>while</code></h3> + +<p>다음 예제에서는 <code>i</code>의 값이 3일 때 실행되는 <code>continue</code>문을 포함하는 {{jsxref("Statements/while", "while")}}을 보여줍니다. 따라서 n은 1, 3, 7 및 12 값을 갖습니다.</p> + +<pre class="brush: js">var i = 0; +var n = 0; + +while (i < 5) { + i++; + + if (i === 3) { + continue; + } + + n += i; +} +</pre> + +<h3 id="label과_함께_continue_사용하기">label과 함께 <code>continue</code> 사용하기</h3> + +<p>다음 예제에서 <code>checkiandj</code>라는 문에는 <code>checkj</code>라는 문이 있습니다. <code>continue</code>가 발생하면 프로그램은 <code>checkj</code> 문의 맨 위에서 계속됩니다. <code>continue</code>가 발생할 때마다 <code>checkj</code>는 조건이 false를 반환 할 때까지 반복합니다. false가 리턴되면 나머지 <code>checkiandj</code> 문이 완료됩니다.</p> + +<p><code>continue</code>에 <code>checkiandj</code> 레이블이 있으면이 프로그램은 <code>checkiandj</code> 문 맨 위에서 계속됩니다.</p> + +<p>See also {{jsxref("Statements/label", "label")}}.</p> + +<pre class="brush: js">var i = 0; +var j = 8; + +checkiandj: while (i < 4) { + console.log('i: ' + i); + i += 1; + + checkj: while (j > 4) { + console.log('j: ' + j); + j -= 1; + + if ((j % 2) == 0) + continue checkj; + console.log(j + ' is odd.'); + } + console.log('i = ' + i); + console.log('j = ' + j); +} +</pre> + +<p>출력:</p> + +<pre class="brush: js">i: 0 + +// start checkj +j: 8 +7 is odd. +j: 7 +j: 6 +5 is odd. +j: 5 +// end checkj + +i = 1 +j = 4 + +i: 1 +i = 2 +j = 4 + +i: 2 +i = 3 +j = 4 + +i: 3 +i = 4 +j = 4 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Unlabeled version.</td> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Labeled version added.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.7', 'Continue statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-continue-statement', 'Continue statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-continue-statement', 'Continue statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.statements.continue")}}</p> + +<h2 id="함께_보기">함께 보기</h2> + +<ul> + <li>{{jsxref("Statements/break", "break")}}</li> + <li>{{jsxref("Statements/label", "label")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/debugger/index.html b/files/ko/web/javascript/reference/statements/debugger/index.html new file mode 100644 index 0000000000..4f081282b9 --- /dev/null +++ b/files/ko/web/javascript/reference/statements/debugger/index.html @@ -0,0 +1,79 @@ +--- +title: debugger +slug: Web/JavaScript/Reference/Statements/debugger +tags: + - JavaScript + - Reference + - Statement +translation_of: Web/JavaScript/Reference/Statements/debugger +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong><code>debugger</code> 문</strong>은 중단점 설정 등 현재 사용할 수 있는 디버그 기능을 호출합니다. 사용할 수있는 디버깅 기능이 없으면 아무런 동작도 하지 않습니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">debugger;</pre> + +<h2 id="예제">예제</h2> + +<p>다음 예제에서는 함수가 호출 시 디버거를 활성화하도록 <code>debugger</code>를 삽입한 모습입니다.</p> + +<pre class="brush:js">function potentiallyBuggyCode() { + debugger; + // 버그가 있을 것으로 생각하는 코드를 분석하거나, 한 단계씩 진행해보거나... +}</pre> + +<p>디버거가 활성화되면 디버거 문의 위치에서 실행이 일시중지됩니다. 스크립트 소스의 중단점과 비슷합니다.</p> + +<p><a href="https://mdn.mozillademos.org/files/6963/Screen Shot 2014-02-07 at 9.14.35 AM.png"><img alt="Paused at a debugger statement." src="https://mdn.mozillademos.org/files/6963/Screen%20Shot%202014-02-07%20at%209.14.35%20AM.png" style="height: 371px; width: 700px;"></a></p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-debugger-statement', 'Debugger statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-debugger-statement', 'Debugger statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.15', 'Debugger statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-7.5.3', 'Debugger statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-7.4.3', 'Debugger statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Only mentioned as reserved word.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.statements.debugger")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Mozilla/Debugging/Debugging_JavaScript">JavaScript 디버깅</a></li> + <li><a href="/ko/docs/도구들/Debugger">Firefox 개발자 도구의 디버거</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/default/index.html b/files/ko/web/javascript/reference/statements/default/index.html new file mode 100644 index 0000000000..d8d107e774 --- /dev/null +++ b/files/ko/web/javascript/reference/statements/default/index.html @@ -0,0 +1,121 @@ +--- +title: default +slug: Web/JavaScript/Reference/Statements/default +tags: + - JavaScript + - Keyword + - Reference +translation_of: Web/JavaScript/Reference/Statements/switch +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><code><strong>default</strong></code> 키워드는 {{jsxref("Statements/switch", "switch")}} 구문과 {{jsxref("Statements/export", "export")}} 구문에서 사용할 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-default.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<p>{{jsxref("Statements/switch", "switch")}} 구문 내에서는 다음과 같이 사용합니다.</p> + +<pre class="syntaxbox">switch (expression) { + case value1: + //Statements executed when the result of expression matches value1 + [break;] + default: + //Statements executed when none of the values match the value of the expression + [break;] +}</pre> + +<p>{{jsxref("Statements/export", "export")}} 구문 내에서는 다음과 같이 사용합니다.</p> + +<pre class="syntaxbox">export default <em>nameN</em> </pre> + +<h2 id="설명">설명</h2> + +<p>세부사항을 보려면,</p> + +<ul> + <li>{{jsxref("Statements/switch", "switch")}} 구문,</li> + <li>{{jsxref("Statements/export", "export")}} 구문 페이지를 확인하세요.</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="switch에서_default_사용"><code>switch</code>에서 <code>default</code> 사용</h3> + +<p>아래 예제에서 <code>expr</code> 이 "오렌지" 또는 "사과"일 때, 프로그램은 값을 "오렌지" 또는 "사과"와 일치시키고 해당 명령문을 실행합니다. 기본(<code>default</code>) 키워드는 다른 경우에 도움이 되며 연관된 명령문을 실행합니다.</p> + +<pre class="brush: js">switch (expr) { + case '오렌지': + console.log('오렌지는 1000원입니다.'); + break; + case '사과': + console.log('사과는 500원입니다.'); + break; + default: + console.log('죄송합니다. ' + expr + '의 재고가 다 떨어졌습니다.'); +}</pre> + +<h3 id="export에서_default_사용"><code>export</code>에서 <code>default</code> 사용</h3> + +<p>단일 값을 내보내거나 모듈의 기본 값이 필요한 경우, 기본 내보내기를 사용할 수 있습니다.</p> + +<pre class="brush: js">// module "my-module.js" +let cube = function cube(x) { + return x * x * x; +}; +export default cube;</pre> + +<p>다른 스크립트에서 가져오는 건 간단합니다.</p> + +<pre class="brush: js">// module "my-module.js" +import cube from 'my-module'; //default export gave us the liberty to say import cube, instead of import cube from 'my-module' +console.log(cube(3)); // 27 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.statements.default")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Statements/export", "export")}}</li> + <li>{{jsxref("Statements/switch", "switch")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/do...while/index.html b/files/ko/web/javascript/reference/statements/do...while/index.html new file mode 100644 index 0000000000..f6d2e00c57 --- /dev/null +++ b/files/ko/web/javascript/reference/statements/do...while/index.html @@ -0,0 +1,78 @@ +--- +title: do...while +slug: Web/JavaScript/Reference/Statements/do...while +tags: + - 구문 + - 자바스크립트 +translation_of: Web/JavaScript/Reference/Statements/do...while +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong><code>do...while</code> 문은</strong> 테스트 조건이 거짓으로 평가될 때까지 지정된 구문을 실행하는 루프를 만듭니다.<br> + 단, 구문이 실행된 뒤에 테스트 조건이 평가됨으로 구문은 무조건 한 번은 실행됩니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-dowhile.html")}}</div> + +<div class="hidden">이 예제의 소스는 GitHub 저장소에 저장됩니다. 만약 이 프로젝트에 기여하고 싶으시다면, <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 를 복사하고 저희에게 pull request 를 보내주십시오.</div> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox notranslate">do<em>구문</em> +while (<em>조건식</em>); +</pre> + +<dl> + <dt><code><em>구문</em></code></dt> + <dd>테스트 조건이 참일 때마다 한 번이상 실행되는 구문입니다. 만약 루프 내에서 여러 구문을 반복 실행 시키고 싶으시다면, 다음 명령을 사용합니다.</dd> + <dd>{{jsxref("Statements/block", "block", "", 1)}} 구문을 활용하여 (<code>{ ... }</code>) 이런 식으로 그룹화합니다.</dd> +</dl> + +<dl> + <dt><code><em>조건식</em></code></dt> + <dd>루프가 실행될 때마다 평가되는 식입니다. 만약 조건식이 참으로 평가되었다면, <code>구문</code> 이 다시 실행됩니다. 만약 조건식이 거짓으로 평가되었다면, 자바스크립트는 <code>do...while</code>. 구문 밑에 있는 구문들을 실행시킵니다.</dd> +</dl> + +<h2 id="Examples" name="Examples">예제</h2> + +<h3 id="do...while"><code>do...while</code></h3> + +<p>예제에서 <code>do...while</code> 문은 적어도 한번 반복되고 i 변수가 5 보다 작을 때까지 실행됩니다.</p> + +<pre class="brush: js notranslate">var result = ''; +var i = 0; +do { + i += 1; + result += i + ' '; +} +while (i > 0 && i < 5); +// Despite i == 0 this will still loop as it starts off without the test + +console.log(result);</pre> + +<h2 id="자세한_내용">자세한 내용</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-do-while-statement', 'do-while statement')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">이 페이지의 브라우저 호환성 표는 구조화된 데이터에서 생성되었습니다. 만약 이 문서에 기여하고 싶으시다면, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 문서를 확인하고 수정한 뒤 pull request 를 보내주십시오.</div> + +<p>{{Compat("javascript.statements.do_while")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Statements/while", "while")}}</li> + <li>{{jsxref("Statements/for", "for")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/empty/index.html b/files/ko/web/javascript/reference/statements/empty/index.html new file mode 100644 index 0000000000..c986c6232a --- /dev/null +++ b/files/ko/web/javascript/reference/statements/empty/index.html @@ -0,0 +1,102 @@ +--- +title: empty +slug: Web/JavaScript/Reference/Statements/Empty +translation_of: Web/JavaScript/Reference/Statements/Empty +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>empty</strong> 문은 JavaScript 아무것도 동작하지 않습니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-empty.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">; +</pre> + +<h2 id="설명">설명</h2> + +<p>empty statement은 JavaScript구문에 하나가 필요할 때 어떤 문도 실행되지 않을 것이라는 것을 나타내는 세미 콜론(;)입니다. 여러개의 문장을 원하지만 JavaScript는 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/block">block statement</a>을 사용하여 하나만 허용하며 여러개의 문장을 하나로 결합합니다.</p> + +<h2 id="예제">예제</h2> + +<p>빈 문은 루프 문과 함께 사용되기도합니다. 빈 루프 본문이있는 다음 예제를 참조하십시오.</p> + +<pre class="brush: js">var arr = [1, 2, 3]; + +// Assign all array values to 0 +for (i = 0; i < arr.length; arr[i++] = 0) /* empty statement */ ; + +console.log(arr) +// [0, 0, 0] +</pre> + +<p><strong>참고:</strong> 정상적인 세미 콜론을 구분하는 것이 그리 쉽지 않기 때문에, empty statement를 사용할 때는 의도적으로 주석을 달아주는것이 좋습니다. 다음 예 에서는 의도한대로 코드가 동작하지 않을것입니다. 아마도 killTheUniverse()를 if문 안에서 실행하고자 했던것 같습니다.</p> + +<pre class="brush: js">if (condition); // Caution, this "if" does nothing! + killTheUniverse() // So this always gets executed!!! +</pre> + +<p>다른 예 : 중괄호 ({})가없는 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a> 문에서 <code>three</code>가 <code>true</code>이면 아무 일도 일어나지 않고 <code>four</code>를 건너 뛰고 else case의 launchRocket() 함수도 실행되지 않습니다.</p> + +<pre class="brush: js">if (one) + doOne(); +else if (two) + doTwo(); +else if (three) + ; // nothing here +else if (four) + doFour(); +else + launchRocket();</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-empty-statement', 'Empty statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-empty-statement', 'Empty statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.3', 'Empty statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.3', 'Empty statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.3', 'Empty statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.statements.empty")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Statements/block", "Block statement")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/export/index.html b/files/ko/web/javascript/reference/statements/export/index.html new file mode 100644 index 0000000000..1c15d4e7f9 --- /dev/null +++ b/files/ko/web/javascript/reference/statements/export/index.html @@ -0,0 +1,199 @@ +--- +title: export +slug: Web/JavaScript/Reference/Statements/export +tags: + - ECMAScript 2015 + - JavaScript + - Modules + - Reference + - Statement +translation_of: Web/JavaScript/Reference/Statements/export +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong><code>export</code></strong> 문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용합니다. 내보낸 값은 다른 프로그램에서 {{jsxref("Statements/import", "import")}} 문으로 가져가 사용할 수 있습니다.</p> + +<p>내보내는 모듈은 <code>"use strict"</code>의 존재 유무와 상관없이 무조건 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a>입니다. <code>export</code> 문은 HTML 안에 작성한 스크립트에서는 사용할 수 없습니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">// 하나씩 내보내기 +export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>; // var, const도 동일 +export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // var, const도 동일 +export function functionName(){...} +export class ClassName {...} + +// 목록으로 내보내기 +export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> }; + +// 내보내면서 이름 바꾸기 +export { <var>variable1</var> as <var>name1</var>, <var>variable2</var> as <var>name2</var>, …, <var>nameN</var> }; + +// 비구조화로 내보내기 +export const { <var>name1</var>, <var>name2: bar</var> } = o; + +// 기본 내보내기 +export default <em>expression</em>; +export default function (…) { … } // also class, function* +export default function name1(…) { … } // also class, function* +export { <var>name1</var> as default, … }; + +// 모듈 조합 +export * from …; // does not set the default export +export * as name1 from …; +export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> } from …; +export { <var>import1</var> as <var>name1</var>, <var>import2</var> as <var>name2</var>, …, <var>nameN</var> } from …; +export { default } from …;</pre> + +<dl> + <dt><code>nameN</code></dt> + <dd>내보낼 식별자 이름. {{jsxref("Statements/import", "import")}}를 사용해 다른 스크립트에서 가져갈 수 있습니다.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>내보내기에는 두 종류, <strong>유명</strong>(named)과 <strong>기본</strong>(default) 내보내기가 있습니다. 모듈 하나에서, 유명 내보내기는 여러 개 존재할 수 있지만 기본 내보내기는 하나만 가능합니다. 각 종류는 위의 구문 중 하나와 대응합니다.</p> + +<ul> + <li>유명 내보내기 + <pre class="brush: js">// 먼저 선언한 식별자 내보내기 +export { myFunction, myVariable }; + +// 각각의 식별자 내보내기 +// (변수, 상수, 함수, 클래스) +export let myVariable = Math.sqrt(2); +export function myFunction() { ... }; +</pre> + </li> + <li>기본 내보내기 + <pre class="brush: js">// 먼저 선언한 식별자 내보내기 +export { myFunction as default }; + +// 각각의 식별자 내보내기 +export default function () { ... }; +export default class { ... } +</pre> + </li> +</ul> + +<p>유명 내보내기는 여러 값을 내보낼 때 유용합니다. 가져갈 때는 내보낸 이름과 동일한 이름을 사용해야 합니다.</p> + +<p>반면 기본 내보내기는 어떤 이름으로도 가져올 수 있습니다.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// test.js</span> +<span class="keyword token">let</span> k<span class="punctuation token">;</span> <span class="keyword token">export</span> <span class="keyword token">default</span> k <span class="operator token">=</span> <span class="number token">12</span><span class="punctuation token">;</span></code></pre> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// 임의의 다른 파일</span> +<span class="keyword token">import</span> m <span class="keyword token">from</span> <span class="string token">'./test'</span><span class="punctuation token">;</span> <span class="comment token">// k가 기본 내보내기이므로, 가져오는 이름으로 k 대신 m을 사용해도 문제 없음</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>m<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 12 기록</span></code></pre> + +<p>식별자 충돌을 피하기 위해 유명 내보내기 중 이름을 바꿔줄 수도 있습니다.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">export</span> <span class="punctuation token">{</span> myFunction <span class="keyword token">as</span> function1<span class="punctuation token">,</span> + myVariable <span class="keyword token">as</span> variable <span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> + +<h3 id="다시_내보내기_조합">다시 내보내기 / 조합</h3> + +<p>부모 모듈이 자식 모듈을 가져와서 다시 내보낼 수도 있습니다. 즉, 여러 개의 모듈을 모아놓을 하나의 모듈을 만들 수 있습니다.</p> + +<pre class="brush: js">export foo from 'bar.js'; +</pre> + +<p>위 구문은 아래와 동일합니다.</p> + +<pre class="brush: js">import foo from 'bar.js'; +export foo; +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="유명_내보내기_사용">유명 내보내기 사용</h3> + +<p>어떤 모듈에서 다음과 같은 코드를 가진다고 해보겠습니다.</p> + +<pre class="brush: js">// module "my-module.js" +function cube(x) { + return x * x * x; +} +const foo = Math.PI + Math.SQRT2; +var graph = { + options: { + color:'white', + thickness:'2px' + }, + draw: function() { + console.log('From graph draw function'); + } +} +export { cube, foo, graph };</pre> + +<p>다른 스크립트에서는 아래와 같이 사용할 수 있습니다.</p> + +<pre class="brush: js">// You should use this script in html with the type module. +// For example: +// <script type="module" src="./demo.js"></script> +// +// Open the page in a http server, otherwise there will be a CORS policy error. +// +// script demo.js + +import { cube, foo, graph } from 'my-module'; +graph.options = { + color:'blue', + thickness:'3px' +}; +graph.draw(); +console.log(cube(3)); // 27 +console.log(foo); // 4.555806215962888</pre> + +<h3 id="기본_내보내기_사용">기본 내보내기 사용</h3> + +<p>단일 값을 내보낼 때나 모듈의 폴백<sup>fallback</sup> 값이 필요할 땐 기본 내보내기를 사용할 수 있습니다.</p> + +<pre class="brush: js">// module "my-module.js" +export default function cube(x) { + return x * x * x; +}</pre> + +<p>그런 다음, 다른 스크립트에서 가져오는건 간단합니다:</p> + +<pre class="brush: js">import cube from './my-module.js'; +console.log(cube(3)); // 27</pre> + +<p><code><font face="Open Sans, arial, sans-serif">e</font>xport default</code>를 사용할 때 <code>var</code>, <code>let</code>, <code>const</code>는 사용하지 못합니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.statements.export")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Statements/import", "import")}}</li> + <li><a href="/ko/docs/Web/JavaScript/Guide/Modules">JavaScript 모듈</a> 안내서</li> + <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li> + <li><a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">ES modules: A cartoon deep-dive</a>, Hacks blog post by Lin Clark</li> + <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/for-await...of/index.html b/files/ko/web/javascript/reference/statements/for-await...of/index.html new file mode 100644 index 0000000000..c52d226e27 --- /dev/null +++ b/files/ko/web/javascript/reference/statements/for-await...of/index.html @@ -0,0 +1,144 @@ +--- +title: for await...of +slug: Web/JavaScript/Reference/Statements/for-await...of +tags: + - 구문 + - 반복문 + - 비동기 + - 식 + - 열거 + - 열거자 +translation_of: Web/JavaScript/Reference/Statements/for-await...of +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong><code>for await...of</code> 구문</strong>은 보통 비동기에 대응하는 열거자를 나열할 때 쓰이지만, {{jsxref("String")}}, {{jsxref("Array")}}, <code>Array</code> 같은 객체 (e.g., {{jsxref("Functions/arguments", "arguments")}} or <a href="/en-US/docs/Web/API/NodeList" title="NodeList objects are collections of nodes, usually returned by properties such as Node.childNodes and methods such as document.querySelectorAll()."><code>NodeList</code></a>), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}} 같은 동기적으로 열거 가능한 객체 또한 가능하며, 사용자가 직접 정의한 동기 또는 비동기 객체도 나열할 수 있도록 해준다. 일반적인 <strong><code>for ...of</code></strong> 문과 마찬가지로 열거자 심볼이 정의한 속성을 실행하게 되어 열거한 값을 변수로 받아 처리한다.</p> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">for await (<var>variable</var> of <var>iterable</var>) { + <var>statement</var> +} +</pre> + +<dl> + <dt><code><var>variable</var></code></dt> + <dd>열거할 때마다 <code><var>variable</var></code>. 문을 통해 변수로 받을 수 있다. <code><var>variable</var></code> 문 안에서는 <code>const</code>, <code>let</code> 및 <code>var</code>. 문으로 선언된 변수 및 상수를 선언할 수 있다.</dd> + <dt><code><var>iterable</var></code></dt> + <dd>열거 가능한 속성이 들어가 있는 객체 및 식을 포함한다.</dd> +</dl> + +<h3 id="비동기_열거_속성을_통한_열거_식">비동기 열거 속성을 통한 열거 식</h3> + +<p>비동기 열거 프로토콜을 담은 객체를 아래와 같이 열거할 수 있다.</p> + +<pre class="brush:js">const asyncIterable = { + [Symbol.asyncIterator]() { + return { + i: 0, + next() { + if (this.i < 3) { + return Promise.resolve({ value: this.i++, done: false }); + } + + return Promise.resolve({ done: true }); + } + }; + } +}; + +(async function() { + for await (let num of asyncIterable) { + console.log(num); + } +})(); + +// 0 +// 1 +// 2 +</pre> + +<h3 id="비동기_생성자를_통한_열거_식">비동기 생성자를 통한 열거 식</h3> + +<p>비동기 생성자는 애초부터 비동기 열거 프로토콜을 탑재한 채로 정의한다.이를 <code>for await...of</code> 식으로 아래와 같이 사용할 수 있다.</p> + +<pre class="brush: js">async function* asyncGenerator() { + let i = 0; + while (i < 3) { + yield i++; + } +} + +(async function() { + for await (let num of asyncGenerator()) { + console.log(num); + } +})(); +// 0 +// 1 +// 2</pre> + +<p>좀 더 상세한 비동기 생성자를 통한 <code>for await...of </code>식의 사용법을 위해 기본 API를 통해 값을 비동기적으로 열거하는 방법을 알아본다.</p> + +<p>아래 예제를 통해 먼저 API를 사용하여 스트림 데이터를 통해 비동기 열거자를 만든 뒤, 스트림에서 응답이 끝나면 최종 응답 데이터 크기를 가져온다.</p> + +<pre class="brush: js">async function* streamAsyncIterator(stream) { + const reader = stream.getReader(); + try { + while (true) { + const { done, value } = await reader.read(); + if (done) { + return; + } + yield value; + } + } finally { + reader.releaseLock(); + } +} +// 주소로부터 데이터를 받아온 뒤, 응답 크기를 구하는 비동기 생성자 함수. +async function getResponseSize(url) { + const response = await fetch(url); + // 여기에 응답 크기를 바이트 단위로 적재한다. + let responseSize = 0; + // for-await-of 문을 통해 응답이 들어올 때마다 열거 프로토콜을 통해 반복문이 작동한다. + for await (const chunk of streamAsyncIterator(response.body)) { + // 총 응답 크기를 지속적으로 누적한다. + responseSize += chunk.length; + } + + console.log(`응답 크기: ${responseSize} 바이트`); + // 예상 출력: "응답 크기: 1071472 바이트" + return responseSize; +} +getResponseSize('https://jsonplaceholder.typicode.com/photos');</pre> + +<h2 id="규격">규격</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'ECMAScript Language: The for-in, for-of, and for-await-of Statements')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.statements.for_await_of")}}</p> + +<h2 id="같이보기">같이보기</h2> + +<ul> + <li>{{jsxref("Global_Objects/Symbol/asyncIterator", "Symbol.asyncIterator")}}</li> + <li>{{jsxref("Statements/for...of", "for...of")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/for...in/index.html b/files/ko/web/javascript/reference/statements/for...in/index.html new file mode 100644 index 0000000000..983e50c91f --- /dev/null +++ b/files/ko/web/javascript/reference/statements/for...in/index.html @@ -0,0 +1,176 @@ +--- +title: for...in +slug: Web/JavaScript/Reference/Statements/for...in +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/for...in +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><code>for...in</code>문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다. (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol">Symbol</a>로 키가 지정된 속성은 무시합니다.)</p> + +<p>{{EmbedInteractiveExample("pages/js/statement-forin.html")}}</p> + +<h2 id="Syntax" name="Syntax">문법</h2> + +<pre class="syntaxbox notranslate">for (<var>variable</var> in <var>object</var>) {<em> ... </em>}</pre> + +<h3 id="Parameters" name="Parameters">파라미터</h3> + +<dl> + <dt><code>variable</code></dt> + <dd>매번 반복마다 다른 속성이름(Value name)이 변수(<em>variable)</em>로 지정됩니다.</dd> + <dt><code>object</code></dt> + <dd>반복작업을 수행할 객체로 열거형 속성을 가지고 있는 객체.</dd> +</dl> + +<h2 id="Description" name="Description">설명</h2> + +<p><code>for...in</code>문은 열거 가능한 non-Symbol 속성에 대해서만 반복합니다.<br> + <code>Array</code>나 <code>Object</code> 등 내장 constructor를 통해 만들어진 객체는 {{jsxref("String")}}의 {{jsxref("String.indexOf", "indexOf()")}}, {{jsxref("Object")}}의 {{jsxref("Object.toString", "toString()")}}와 같이 <code>Object.prototype</code>, <code>String.prototype</code> 로부터 열거가 가능하지 않은 속성들을 상속해왔습니다. <code>for...in</code>문은 객체 자체의 모든 열거 가능한 속성들과 프로토타입 체인으로부터 상속받은 속성들에 대해 반복할 것입니다. (더 가까운 프로토타입의 속성들이 프로토타입 체인 객체로부터 더 멀리 떨어진 프로토 타입의 속성보다 더 우선합니다.)</p> + +<h3 id="속성의_삭제_추가_수정">속성의 삭제, 추가, 수정 </h3> + +<p><code>for..in</code> 문은 임의의 순서로 객체의 속성들에 대해 반복합니다. (적어도 <code>cross-browser</code> 설정에서는 왜 표면적으로 보이는 반복의 순서를 따를 수 없는지에 대해서 {{jsxref("Operators/delete", "delete")}} 를 참고하십시오.)</p> + +<p>만약 한 반복으로 속성이 수정된 후에 방문하는 경우, 반복문에서의 그 값은 나중의 값으로 정해집니다. 방문하기 전에 삭제된 속성에 대해서는 이후에 방문하지 않습니다. 반복이 발생하는 객체에 추가된 속성은 방문하거나 반복에서 생략할 수 있습니다.</p> + +<p>일반적으로 현재 방문 중인 속성 외에는 반복하는 동안 객체의 속성을 추가, 수정, 제거하지 않는 것이 가장 좋습니다. 추가된 속성을 방문할 것인지, 수정된 속성(현재의 속성 제외)을 수정 이전 혹은 이후에 방문할 것인지, 삭제된 속성을 삭제 이전에 방문할 것인지에 대해서는 보장할 수 없습니다.</p> + +<h3 id="배열의_반복과_for...in">배열의 반복과 for...in</h3> + +<div class="note" id="arrayNote"> +<p><strong>Note: <code>for...in</code>은</strong> 인덱스의 순서가 중요한<strong> </strong>{{jsxref("Array")}}에서 반복을 위해 사용할 수 없습니다.</p> +</div> + +<p>배열 인덱스는 정수로 된 열거 가능한 속성이며, 일반적인 객체의 속성들과 같습니다. <code>for...in</code>은 특정 순서에 따라 인덱스를 반환하는 것을 보장할 수 없습니다. <code>for...in</code>반복문은 정수가 아닌 이름을 가진 속성, 상속된 모든 열거 가능한 속성들을 반환합니다.</p> + +<p>반복되는 순서는 구현에 따라 다르기 때문에, 배열의 반복이 일관된 순서로 요소를 방문하지 못할 수도 있습니다. 그러므로 방문의 순서가 중요한 배열의 반복시에는 숫자 인덱스를 사용할 수 있는 <code>for</code> 반복문을 사용하는 것이 좋습니다.(또는 {{jsxref("Array.prototype.forEach()")}}, {{jsxref("Statements/for...of", "for...of")}}를 권장합니다.)</p> + +<h3 id="자체_속성만_반복">자체 속성만 반복</h3> + +<p>만약 당신이 객체의 프로토타입이 아닌 객체 자체에 연결된 속성만 고려한다면 {{jsxref("Object.getOwnPropertyNames", "getOwnPropertyNames()")}}나 {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}}를 사용하십시오.({{jsxref("Object.prototype.propertyIsEnumerable", "propertyIsEnumerable()")}} 또한 가능합니다.) 또는 외부적인 코드 간섭이 없다면 체크 메서드로 내장 프로토타입을 확장할 수 있습니다.</p> + +<h2 id="왜_for...in을_사용합니까">왜 for...in을 사용합니까?</h2> + +<p><code>for...in</code>이 객체의 반복을 위해 만들어졌지만, 배열의 반복을 위해서는 추천되지 않고, <code>Array.prototype.forEach()</code>, <code>for...of</code>가 이미 존재합니다. 그러면 for...in은 어떻게 사용하는 것이 좋을까요?</p> + +<p>이것은 쉽게 객체의 속성을 확인(콘솔이나 다른 방법으로 출력)할 수 있기 때문에 실질적으로 디버깅을 위해 사용될 수 있습니다. 배열이 데이터의 저장에 있어서는 더 실용적이지만, 키-값 쌍이 선호되는 데이터의 경우(속성이 "key"의 역할을 함) 특정 값을 가진 키가 있는지 확인하려는 경우에 for...in을 사용할 수 있습니다.</p> + +<h2 id="Example" name="Example">예제</h2> + +<h3 id="for...in의_사용">for...in의 사용</h3> + +<p>아래의 예는 열거 가능한 non-Symbol속성들을 반복해서 속성의 이름과 그 값을 기록합니다.</p> + +<pre class="notranslate"><code>var obj = {a: 1, b: 2, c: 3}; + +for (const prop in obj) { + console.log(`obj.${prop} = ${obj[prop]}`); +} + +// Output: +// "obj.a = 1" +// "obj.b = 2" +// "obj.c = 3"</code></pre> + +<h3 id="자체_속성_반복">자체 속성 반복</h3> + +<p>아래는 {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}} 를 사용하는 예를 보여주고 있습니다. 상속된 속성은 표시되지 않습니다.</p> + +<pre class="brush: js notranslate">var triangle = {a:1, b:2, c:3}; + +function ColoredTriangle() { + this.color = "red"; +} + +ColoredTriangle.prototype = triangle; + +function show_own_props(obj, objName) { + var result = ""; + + for (var prop in obj) { + if( obj.hasOwnProperty( prop ) ) { + result += objName + "." + prop + " = " + obj[prop] + "\n"; + } + } + + return result; +} + +o = new ColoredTriangle(); +alert(show_own_props(o, "o")); /* alerts: o.color = red */ +</pre> + +<h2 id="상세">상세</h2> + +<table> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.6.4', 'for...in statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.6.4', 'for...in statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.6.3', 'for...in statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.statements.for_in")}}</p> + +<h2 id="Compatibility_Initializer_expressions_in_strict_mode">Compatibility: Initializer expressions in strict mode</h2> + +<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}; +for (var i = 0 in obj) { + console.log(obj[i]); +} +// 1 +// 2 +// 3</code></pre> + +<p>This nonstandard behavior is now ignored in version 40 and later, and will present a {{jsxref("SyntaxError")}} ("<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_for-in_initializer">for-in loop head declarations may not have initializers</a>") error in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> ({{bug(748550)}} and {{bug(1164741)}}).</p> + +<p>Other engines such as v8 (Chrome), Chakra (IE/Edge), and JSC (WebKit/Safari) are investigating whether to remove the nonstandard behavior as well.</p> + +<h2 id="관련_문서">관련 문서</h2> + +<ul> + <li>{{jsxref("Statements/for...of", "for...of")}} – a similar statement that iterates over the property <em>values</em></li> + <li>{{jsxref("Statements/for_each...in", "for each...in")}} {{deprecated_inline}} – a similar but deprecated statement that iterates over the values of an object's properties, rather than the property names themselves</li> + <li>{{jsxref("Statements/for", "for")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Generator expressions</a> (uses the <code>for...in</code> syntax)</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/for...of/index.html b/files/ko/web/javascript/reference/statements/for...of/index.html new file mode 100644 index 0000000000..d082763616 --- /dev/null +++ b/files/ko/web/javascript/reference/statements/for...of/index.html @@ -0,0 +1,228 @@ +--- +title: for...of +slug: Web/JavaScript/Reference/Statements/for...of +tags: + - ECMAScript 2015 + - JavaScript + - Reference + - Statement +translation_of: Web/JavaScript/Reference/Statements/for...of +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong><code>for...of</code> 명령문</strong>은 <a href="/ko/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">반복가능한 객체</a> ({{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("String")}}, {{jsxref("TypedArray")}}, <a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a> 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-forof.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">for (<em>variable</em> of <em>iterable</em>) { + <em>statement +</em>} +</pre> + +<dl> + <dt><code>variable</code></dt> + <dd>각 반복에 서로 다른 속성값이 <em>variable</em>에 할당됩니다.</dd> + <dt><code>iterable</code></dt> + <dd>반복되는 열거가능(enumerable)한 속성이 있는 객체.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<h3 id="jsxrefArray에_대해_반복">{{jsxref("Array")}}에 대해 반복:</h3> + +<pre class="brush:js">let iterable = [10, 20, 30]; + +for (let value of iterable) { + console.log(value); +} +// 10 +// 20 +// 30 +</pre> + +<p><a href="/ko/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a> 대신 <a href="/ko/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a>도 사용할 수 있습니다, 블록 내부 변수를 수정하지 않는 경우.</p> + +<pre class="brush:js">let iterable = [10, 20, 30]; + +for (const value of iterable) { + console.log(value); +} +// 10 +// 20 +// 30 +</pre> + +<h3 id="jsxrefString에_대해_반복">{{jsxref("String")}}에 대해 반복:</h3> + +<pre class="brush:js">let iterable = "boo"; + +for (let value of iterable) { + console.log(value); +} +// "b" +// "o" +// "o" +</pre> + +<h3 id="jsxrefTypedArray에_대해_반복">{{jsxref("TypedArray")}}에 대해 반복:</h3> + +<pre class="brush:js">let iterable = new Uint8Array([0x00, 0xff]); + +for (let value of iterable) { + console.log(value); +} +// 0 +// 255 +</pre> + +<h3 id="jsxrefMap에_대해_반복">{{jsxref("Map")}}에 대해 반복:</h3> + +<pre class="brush:js">let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]); + +for (let entry of iterable) { + console.log(entry); +} +// [a, 1] +// [b, 2] +// [c, 3] + +for (let [key, value] of iterable) { + console.log(value); +} +// 1 +// 2 +// 3 +</pre> + +<h3 id="jsxrefSet에_대해_반복">{{jsxref("Set")}}에 대해 반복:</h3> + +<pre class="brush:js">let iterable = new Set([1, 1, 2, 2, 3, 3]); + +for (let value of iterable) { + console.log(value); +} +// 1 +// 2 +// 3 +</pre> + +<h3 id="DOM_컬렉션에_대해_반복">DOM 컬렉션에 대해 반복</h3> + +<p>{{domxref("NodeList")}} 같은 DOM 컬렉션에 대해 반복: 다음 예는 article의 직계 자손인 paragraph에 <code>read</code> 클래스를 추가합니다:</p> + +<pre class="brush:js">// 주의: 이는 NodeList.prototype[Symbol.iterator]가 +// 구현된 플랫폼에서만 작동합니다 +let articleParagraphs = document.querySelectorAll("article > p"); + +for (let paragraph of articleParagraphs) { + paragraph.classList.add("read"); +} +</pre> + +<h3 id="생성기에_대해_반복">생성기에 대해 반복</h3> + +<p><a href="/ko/docs/Web/JavaScript/Reference/Statements/function*">생성기</a>에 대해서도 반복할 수 있습니다:</p> + +<pre class="brush:js">function* fibonacci() { // 생성기 함수 + let [prev, curr] = [1, 1]; + while (true) { + [prev, curr] = [curr, prev + curr]; + yield curr; + } +} + +for (let n of fibonacci()) { + console.log(n); + // 1000에서 수열을 자름 + if (n >= 1000) { + break; + } +} +</pre> + +<h3 id="다른_반복가능_객체에_대해_반복">다른 반복가능 객체에 대해 반복</h3> + +<p><a href="/ko/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">iterable</a> 프로토콜을 명시해서 구현하는 객체에 대해서도 반복할 수 있습니다:</p> + +<pre class="brush:js">var iterable = { + [Symbol.iterator]() { + return { + i: 0, + next() { + if (this.i < 3) { + return { value: this.i++, done: false }; + } + return { value: undefined, done: true }; + } + }; + } +}; + +for (var value of iterable) { + console.log(value); +} +// 0 +// 1 +// 2 +</pre> + +<h3 id="for...of와_for...in의_차이"><code>for...of</code>와 <code>for...in</code>의 차이</h3> + +<p><code><a href="/ko/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> 루프는 객체의 모든 열거가능한 속성에 대해 반복합니다.</p> + +<p><code>for...of</code> 구문은 <strong>컬렉션</strong> 전용입니다. 모든 객체보다는, <code>[Symbol.iterator]</code> 속성이 있는 모든 컬렉션 요소에 대해 이 방식으로 반복합니다.</p> + +<p>다음 예는 <code>for...of</code> 루프와 <code>for...in</code> 루프의 차이를 보입니다.</p> + +<pre class="brush:js">Object.prototype.objCustom = function () {}; +Array.prototype.arrCustom = function () {}; + +let iterable = [3, 5, 7]; +iterable.foo = "hello"; + +for (let i in iterable) { + console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom" +} + +for (let i of iterable) { + console.log(i); // logs 3, 5, 7 +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.statements.for_of")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/for_each...in">for each...in</a> - 비슷한 문이지만, 속성 이름 자체보다는 객체의 속성값을 반복합니다 (사라짐).</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">Map.prototype.forEach()</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/for/index.html b/files/ko/web/javascript/reference/statements/for/index.html new file mode 100644 index 0000000000..cba49dbba6 --- /dev/null +++ b/files/ko/web/javascript/reference/statements/for/index.html @@ -0,0 +1,160 @@ +--- +title: for +slug: Web/JavaScript/Reference/Statements/for +tags: + - JavaScript + - Loop + - Reference + - Statement +translation_of: Web/JavaScript/Reference/Statements/for +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>for 문</strong>은 괄호로 감싸고 세미콜론으로 구분한 세 개의 선택식과, 반복을 수행할 문(주로 {{jsxref("Statements/block", "블럭문", "", 0)}})으로 이루어져 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-for.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">for ([<em>initialization</em>]; [<em>condition</em>]; [<em>final-expression</em>]) + <em>statement</em> +</pre> + +<dl> + <dt><code>initialization</code></dt> + <dd>식(할당식 포함) 또는 변수 선언. 주로 카운터 변수를 초기화할 때 사용합니다. <code>var</code> 또는 <code>let</code> 키워드를 사용해 새로운 변수를 선언할 수도 있습니다. <code>var</code> 키워드로 선언한 변수는 반복문에 제한되지 않습니다. 즉 <code>for</code> 문과 같은 범위<sup>scope</sup>에 위치합니다. <code>let</code> 키워드로 선언한 변수는 반복문의 지역 변수가 됩니다.<br> + <br> + 식의 결과는 버려집니다.</dd> + <dt><code>condition</code></dt> + <dd>매 반복마다 평가할 식. 평가 결과가 참이라면 <code>statement</code>를 실행합니다. 이 식을 넣지 않았을 때 계산 결과는 언제나 참이 됩니다. 계산 결과가 거짓이라면 <code>for</code> 문의 바로 다음 식으로 건너 뜁니다.</dd> + <dt><code>final-expression</code></dt> + <dd>매 반복 후 평가할 식. 다음번 <code>condition</code> 평가 이전에 발생합니다. 주로 카운터 변수를 증감하거나 바꿀 때 사용합니다.</dd> + <dt><code>statement</code></dt> + <dd>조건의 평가 결과가 참일 때 실행하는 문. 여러 문을 반복 실행하려면 {{jsxref("Statements/block", "블럭문", "", 0)}}(<code>{ ... }</code>)으로 묶어야 합니다. 아무것도 실행하지 않으려면 {{jsxref("Statements/empty", "공백문", "", 0)}} (<code>;</code>)을 사용하세요.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<h3 id="for_사용하기"><code>for</code> 사용하기</h3> + +<p>다음 <code>for</code> 문은 변수 <code>i</code>를 선언하고 0으로 초기화하여 시작합니다. <code>i</code>가 9보다 작은지를 확인하고 맞으면 명령문을 수행한 후 <code>i</code>의 값을 1 높입니다.</p> + +<pre class="brush: js">for (var i = 0; i < 9; i++) { + console.log(i); + // 기타 등등 +} +</pre> + +<h3 id="선택적_식_사용">선택적 식 사용</h3> + +<p><code>for</code> 반복문의 3개 식은 모두 선택 사항입니다.</p> + +<p>예를 들어, 변수를 초기화하려고 <code>initialization</code> 블럭을 사용할 필요는 없습니다.</p> + +<pre class="brush: js">var i = 0; +for (; i < 9; i++) { + console.log(i); + // 기타 등등 +} +</pre> + +<p><code>initialization</code> 블럭처럼 <code>condition</code> 블럭도 선택 사항입니다. 다만 이 경우, 반복문 본문에 무한 반복을 탈출할 수 있는 장치를 추가해야 합니다.</p> + +<pre class="brush: js">for (var i = 0;; i++) { + console.log(i); + if (i > 3) break; + // 기타 등등 +}</pre> + +<p>세 가지 모두 생략할 수도 있습니다. 위와 같이 {{jsxref("Statements/break", "break")}} 문을 사용해 반복을 탈출할 수 있도록 추가하고, 변수를 수정해 탈출 조건이 언젠가 참이 되도록 해야 합니다.</p> + +<pre class="brush: js">var i = 0; + +for (;;) { + if (i > 3) break; + console.log(i); + i++; +} +</pre> + +<h3 id="문_없이_for_사용하기">문 없이 <code>for</code> 사용하기</h3> + +<p>다음 <code>for</code> 반복 사이클은 노드의 위치 오프셋을 <code>final-expression</code>에서 계산해 문이나 블럭문이 필요하지 않으므로 세미콜론을 사용합니다.</p> + +<pre>function showOffsetPos(sId) { + var nLeft = 0, nTop = 0; + + for ( + var oItNode = document.getElementById(sId); /* initialization */ + oItNode; /* condition */ + nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent /* final-expression */ + ); /* semicolon */ + + console.log('Offset position of \'' + sId + '\' element:\n left: ' + nLeft + 'px;\n top: ' + nTop + 'px;'); +} + +/* Example call: */ + +showOffsetPos('content'); + +// Output: +// "Offset position of "content" element: +// left: 0px; +// top: 153px;"</pre> + +<div class="note"><strong>참고:</strong> 여기서 쓰인 세미콜론은, JavaScript가 <strong>필수로 요구하는 몇 안되는 세미콜론</strong>입니다. 물론 세미콜론 없이는 반복 사이클 선언의 바로 다음 줄을 반복 본문으로 인식합니다.</div> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.6.2', 'for statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.6.3', 'for statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.6.3', 'for statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-for-statement', 'for statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-for-statement', 'for statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.statements.for")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Statements/empty", "공백문", "", 0)}}</li> + <li>{{jsxref("Statements/break", "break")}}</li> + <li>{{jsxref("Statements/continue", "continue")}}</li> + <li>{{jsxref("Statements/while", "while")}}</li> + <li>{{jsxref("Statements/do...while", "do...while")}}</li> + <li>{{jsxref("Statements/for...in", "for...in")}}</li> + <li>{{jsxref("Statements/for...of", "for...of")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/for_each...in/index.html b/files/ko/web/javascript/reference/statements/for_each...in/index.html new file mode 100644 index 0000000000..9fa9901aae --- /dev/null +++ b/files/ko/web/javascript/reference/statements/for_each...in/index.html @@ -0,0 +1,85 @@ +--- +title: for each...in +slug: Web/JavaScript/Reference/Statements/for_each...in +tags: + - Deprecated + - E4X + - JavaScript + - Obsolete + - Statement +translation_of: Archive/Web/JavaScript/for_each...in +--- +<div>{{jsSidebar("Statements")}}</div> + +<div class="warning"> +<p>The <code>for each...in</code> statement is deprecated as the part of ECMA-357 (<a href="/en-US/docs/Archive/Web/E4X" title="/en-US/docs/E4X">E4X</a>) standard. E4X support has been removed. Consider using <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a> instead.<br> + <br> + <strong>Firefox now warns about the usage of <code>for each...in</code> and it no longer works starting with Firefox 57.<br> + Please see <a href="/en-US/docs/Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated">Warning: JavaScript 1.6's for-each-in loops are deprecated</a> for migration help.</strong></p> +</div> + +<p><code><strong>for each...in</strong></code> 문은 객체의 모든 속성 값에 대해 지정된 변수를 반복합니다. 각각의 고유한 특성에 대해 지정된 명령문이 실행됩니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">for each (<em>variable</em> in <em>object</em>) { + <em>statement</em> +}</pre> + +<dl> + <dt><code>variable</code></dt> + <dd>var 키워드로 선택적으로 선언된 속성 값을 반복하는 변수입니다. 이 변수는 루프가 아니라 함수의 local이 됩니다.</dd> +</dl> + +<dl> + <dt><code>object</code></dt> + <dd>반복될 객체입니다.</dd> +</dl> + +<dl> + <dt><code>statement</code></dt> + <dd>각 속성에 대해 실행할 명령문입니다. 루프 내에서 여러 명령문을 실행하려면 블록 명령문 ({...})을 사용하여 해당 명령문을 그룹화하십시오.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>일부 기본 제공 속성은 반복되지 않습니다. 여기에는 객체 기본 제공 메서드 전부가 포함됩니다.</p> + +<p>ex) String의 indexOf 메소드.</p> + +<p>그러나 사용자가 정의한 모든 속성은 반복됩니다.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_for_each...in">Using <code>for each...in</code></h3> + +<p><strong>Warning:</strong> Never use a loop like this on arrays. Only use it on objects. See <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a> for more details.</p> + +<p>The following snippet iterates over an object's properties, calculating their sum:</p> + +<pre class="brush:js">var sum = 0; +var obj = {prop1: 5, prop2: 13, prop3: 8}; + +for each (var item in obj) { + sum += item; +} + +console.log(sum); // logs "26", which is 5+13+8</pre> + +<h2 id="Specifications">Specifications</h2> + +<p>Not part of a current ECMA-262 specification. Implemented in JavaScript 1.6 and deprecated.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.statements.for_each_in")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> - a similar statement that iterates over the property <em>names</em>.</li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code> - a similar statement that iterates over the property <em>values</em> but can only be used for iteratable types, so not for generic objects</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Statements/for">for</a></code></li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/function/index.html b/files/ko/web/javascript/reference/statements/function/index.html new file mode 100644 index 0000000000..fe1eee366a --- /dev/null +++ b/files/ko/web/javascript/reference/statements/function/index.html @@ -0,0 +1,177 @@ +--- +title: 함수 선언 +slug: Web/JavaScript/Reference/Statements/function +tags: + - Function + - JavaScript + - Reference + - Statement +translation_of: Web/JavaScript/Reference/Statements/function +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>함수 선언(function declaration)</strong>은 지정된 매개변수(parameter)를 갖는 함수를 정의합니다.</p> + +<p>{{jsxref("Function")}} 생성자나 {{jsxref("Operators/function", "함수 표현식(function expression)")}}을 사용해서 정의할 수도 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-function.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">function <em>name</em>([<em>param</em>[, <em>param</em>,[..., <em>param</em>]]]) { [<em>statements</em>] } +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>함수 이름.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>함수로 전달되는 인수(argument)의 이름. 인수의 최대 개수는 엔진마다 다름.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>함수의 몸통(body)을 구성하는 문(statement).</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>함수 선언으로 생성된 함수는 <code>Function</code> 객체로, <code>Function</code> 객체의 모든 속성(property), 메서드 및 행위 특성(behavior)을 갖습니다. 함수에 관한 더 자세한 정보는 {{jsxref("Function")}} 참조하시기 바랍니다.</p> + +<p>함수는 또한 표현식({{jsxref("Operators/function", "함수 표현식")}} 참조)을 사용하여 생성될 수 있습니다.</p> + +<p>기본적으로 함수는 <code>undefined</code>를 반환합니다. 다른 값을 반환하기 위해서는, 함수는 반환값을 지정하는 {{jsxref("Statements/return", "return")}} 문이 있어야 합니다.</p> + +<h3 id="조건부로_생성되는_함수">조건부로 생성되는 함수</h3> + +<p>함수는 조건부로 선언될 수 있습니다. 즉, function 문은 <code>if</code> 문 안에 들어갈 수 있습니다. 하지만, 구현에 따라 결과에 일관성이 없으므로 이 패턴은 실제 코드에서는 사용해선 안됩니다. 조건부로 함수를 생성하고자 한다면, 함수 표현식(function expression)을 대신 사용하세요.</p> + +<pre class="brush: js">var hoisted = "foo" in this; +console.log(`'foo' name ${hoisted ? "is" : "is not"} hoisted. typeof foo is ${typeof foo}`); +if (false) { + function foo(){ return 1; } +} + +// In Chrome: +// 'foo' name is hoisted. typeof foo is undefined +// +// In Firefox: +// 'foo' name is hoisted. typeof foo is undefined +// +// In Edge: +// 'foo' name is not hoisted. typeof foo is undefined +// +// In Safari: +// 'foo' name is hoisted. typeof foo is function +</pre> + +<p>결과는 참으로 평가되는 조건과 정확하게 일치합니다.</p> + +<pre class="brush: js">var hoisted = "foo" in this; +console.log(`'foo' name ${hoisted ? "is" : "is not"} hoisted. typeof foo is ${typeof foo}`); +if (true) { + function foo(){ return 1; } +} + +// In Chrome: +// 'foo' name is hoisted. typeof foo is undefined +// +// In Firefox: +// 'foo' name is hoisted. typeof foo is undefined +// +// In Edge: +// 'foo' name is not hoisted. typeof foo is undefined +// +// In Safari: +// 'foo' name is hoisted. typeof foo is function +</pre> + +<h3 id="함수_선언_끌어올리기">함수 선언 끌어올리기</h3> + +<p>자바스크립트에서 함수 선언은 그 선언을 둘러싼 함수의 최상부나 전역 범위(global scope)로 끌어올려집니다.</p> + +<pre class="brush: js">hoisted(); // logs "foo" + +function hoisted() { + console.log("foo"); +} +</pre> + +<p>{{jsxref("Operators/function", "함수 표현식")}}은 끌어올려지지 않으므로 주의하세요:</p> + +<pre class="brush: js">notHoisted(); // TypeError: notHoisted is not a function + +var notHoisted = function() { + console.log("bar"); +}; +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="function_사용하기"><code>function</code> 사용하기</h3> + +<p>다음 코드는 제품 <code>a</code>, <code>b</code> 및 <code>c</code>의 단위 판매량이 주어졌을 때, 총 판매량을 반환하는 함수를 선언합니다.</p> + +<pre class="brush: js">function calc_sales(units_a, units_b, units_c) { + return units_a*79 + units_b * 129 + units_c * 699; +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>초기 정의. JavaScript 1.0에서 구현됨.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.statements.function")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Functions", "함수 및 함수 범위")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Operators/function", "함수 표현식")}}</li> + <li>{{jsxref("Statements/function*", "function* 문")}}</li> + <li>{{jsxref("Operators/function*", "function* 식")}}</li> + <li>{{jsxref("Functions/Arrow_functions", "화살표 함수")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/function_star_/index.html b/files/ko/web/javascript/reference/statements/function_star_/index.html new file mode 100644 index 0000000000..9178c28602 --- /dev/null +++ b/files/ko/web/javascript/reference/statements/function_star_/index.html @@ -0,0 +1,159 @@ +--- +title: function* +slug: Web/JavaScript/Reference/Statements/function* +tags: + - ECMAScript6 + - Generator + - Iterator + - JavaScript +translation_of: Web/JavaScript/Reference/Statements/function* +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><code><strong>function*</strong></code> 선언 (끝에 별표가 있는 <code>function</code> keyword) 은 <em>generator function</em> 을 정의하는데, 이 함수는 {{jsxref("Global_Objects/Generator","Generator")}} 객체를 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-functionasterisk.html")}}</div> + + + +<p>generator function 은 {{jsxref("Global_Objects/GeneratorFunction", "GeneratorFunction")}} 생성자와 {{jsxref("Operators/function*", "function* expression")}} 을 사용해서 정의할 수 있습니다.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>함수명.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>함수에 전달되는 인수의 이름. 함수는 인수를 255개까지 가질 수 있다.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>함수의 본체를 구성하는 구문들.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>Generator는 빠져나갔다가 나중에 다시 돌아올 수 있는 함수입니다. 이때 컨텍스트(변수 값)는 출입 과정에서 저장된 상태로 남아 있습니다.</p> + +<p>Generator 함수는 호출되어도 즉시 실행되지 않고, 대신 함수를 위한 <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">Iterator</a> 객체가 반환됩니다. Iterator의 <code>next()</code> 메서드를 호출하면 Generator 함수가 실행되어 <strong>{{jsxref("Operators/yield", "yield")}}</strong> 문을 만날 때까지 진행하고, 해당 표현식이 명시하는 Iterator로부터의 반환값을 반환합니다. <strong>{{jsxref("Operators/yield*", "yield*")}}</strong> 표현식을 마주칠 경우, 다른 Generator 함수가 위임(delegate)되어 진행됩니다.</p> + +<p>이후 <code>next()</code> 메서드가 호출되면 진행이 멈췄던 위치에서부터 재실행합니다. <code>next()</code> 가 반환하는 객체는 <code>yield</code>문이 반환할 값(yielded value)을 나타내는 <code>value</code> 속성과, Generator 함수 안의 모든 <code>yield</code> 문의 실행 여부를 표시하는 boolean 타입의 <code>done</code> 속성을 갖습니다. <code>next()</code> 를 인자값과 함께 호출할 경우, 진행을 멈췄던 위치의 <code>yield</code> 문을 <code>next()</code> 메서드에서 받은 인자값으로 치환하고 그 위치에서 다시 실행하게 됩니다.</p> + +<h2 id="예시">예시</h2> + +<h3 id="간단한_예제">간단한 예제</h3> + +<pre class="brush: js">function* idMaker(){ + var index = 0; + while(index < 3) + yield index++; +} + +var gen = idMaker(); + +console.log(gen.next().value); // 0 +console.log(gen.next().value); // 1 +console.log(gen.next().value); // 2 +console.log(gen.next().value); // undefined +// ... +</pre> + +<h3 id="yield*_를_사용한_예제">yield* 를 사용한 예제</h3> + +<pre class="brush: js">function* anotherGenerator(i) { + yield i + 1; + yield i + 2; + yield i + 3; +} + +function* generator(i){ + yield i; + yield* anotherGenerator(i); + yield i + 10; +} + +var gen = generator(10); + +console.log(gen.next().value); // 10 +console.log(gen.next().value); // 11 +console.log(gen.next().value); // 12 +console.log(gen.next().value); // 13 +console.log(gen.next().value); // 20 +</pre> + +<h3 id="Generator_에_인자값을_넘기는_예제">Generator 에 인자값을 넘기는 예제</h3> + +<pre class="brush: js">function* logGenerator() { + console.log(yield); + console.log(yield); + console.log(yield); +} + +var gen = logGenerator(); + +// the first call of next executes from the start of the function +// until the first yield statement +gen.next(); +gen.next('pretzel'); // pretzel +gen.next('california'); // california +gen.next('mayonnaise'); // mayonnaise +</pre> + +<h3 id="Generator_는_생성자로서_사용될_수_없다">Generator 는 생성자로서 사용될 수 없다</h3> + +<pre><code>function* f() {} +var obj = new f; // throws "TypeError: f is not a constructor"</code></pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#', 'function*')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Compat("javascript.statements.generator_function")}}</p> + +<h2 id="관련_항목">관련 항목</h2> + +<ul> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("GeneratorFunction")}} object</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li> + <li>{{jsxref("Operators/yield", "yield")}}</li> + <li>{{jsxref("Operators/yield*", "yield*")}}</li> + <li>{{jsxref("Function")}} object</li> + <li>{{jsxref("Statements/function", "function declaration")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li> + <li>Other web resources: + <ul> + <li><a href="http://facebook.github.io/regenerator/">Regenerator</a> an ES2015 generator compiler to ES5</li> + <li><a href="http://www.youtube.com/watch?v=qbKWsbJ76-s">Forbes Lindesay: Promises and Generators: control flow utopia -- JSConf EU 2013</a></li> + <li><a href="https://www.youtube.com/watch?v=ZrgEZykBHVo&list=PLuoyIZT5fPlG44bPq50Wgh0INxykdrYX7&index=1">Hemanth.HM: The New gen of *gen(){}</a></li> + <li><a href="http://taskjs.org/">Task.js</a></li> + </ul> + </li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/if...else/index.html b/files/ko/web/javascript/reference/statements/if...else/index.html new file mode 100644 index 0000000000..cde42b2a80 --- /dev/null +++ b/files/ko/web/javascript/reference/statements/if...else/index.html @@ -0,0 +1,177 @@ +--- +title: if...else +slug: Web/JavaScript/Reference/Statements/if...else +tags: + - JavaScript + - Reference + - Statement +translation_of: Web/JavaScript/Reference/Statements/if...else +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong><code>if</code> 문</strong>은 지정한 조건이 {{glossary("truthy", "참")}}인 경우 명령문(statement)을 실행합니다. 조건이 {{glossary("falsy", "거짓")}}인 경우 또 다른 명령문이 실행 될 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-ifelse.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">if (<em>condition</em>) + <em>statement</em><em>1</em> +[else + <em>statement2</em>] +</pre> + +<dl> + <dt><code>condition</code></dt> + <dd>참 또는 거짓으로 평가되는 <a href="/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators#표현식">표현식</a>입니다.</dd> +</dl> + +<dl> + <dt><code>statement1</code></dt> + <dd>조건이 참으로 평가될 경우 실행되는 문입니다.<br> + 중첩된 if구문을 포함하여 어떤 구문이든 쓸 수 있습니다. 다중구문을 사용할 경우 ({ ... })<a href="/en-US/docs/Web/JavaScript/Reference/Statements/block" title="en/JavaScript/Reference/Statements/block">블럭</a> 구문 으로 그룹화 하고 실행하지 않으려면 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Empty">빈</a> 구문을 사용합니다.</dd> +</dl> + +<dl> + <dt><code><em>statement</em>2</code></dt> + <dd>이 구문은 조건이 거짓일경우 다른 조항이 있을 때 실행되는 구문입니다. 블록 문과 if문의 중첩을 호함한 모든문이 될 수 있습니다.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>다중의 if...else 문은 else if 절을 만들기 위해 중첩될 수 있다.<br> + 자바스크립트에서는 elseif (하나의 단어) 키워드가 존재하지 않는다.</p> + +<pre class="eval">if (<em>조건1</em>) + <em>명령문1</em> +else if (<em>조건2</em>) + <em>명령문2</em> +else if (<em>조건3</em>) + <em>명령문3</em> +... +else + <em>명령문N</em> +</pre> + +<p>아래 작업한 것을 보면, if문을 중첩 사용하면 들여쓰기된 것이 제대로 보여집니다.</p> + +<pre class="eval">if (<em>조건1</em>) + <em>명령문1</em> +else + if (<em>조건2</em>) + <em>명령문2</em> + else + if (<em>조건3</em>) +... +</pre> + +<p>하나의 절에서 여러개의 명령문들을 실행하려면, 그 명령문들을 그룹화하는 블록 명령문 ({ ... }) 블럭구문을 사용한다.<br> + 일반적으로, 블럭구문을 항상 사용하는 것은 좋은 연습입니다. 특히 중첩된 if 문과 관련되어<br> + 있는 코드안에서 사용하면 더욱 좋습니다.</p> + +<pre class="eval">if (조건) { + <em>명령문들1</em> +} else { + <em>명령문들2</em> +} +</pre> + +<p>원시 불리언 값인 true (참) 과 false (거짓) 을 불리언 객체의 truthiness (참으로 보이는 것) 과 falsiness (거짓으로 보이는 것)으로 혼동하면 안된다. false, undefined, null, 0, NaN, 또는 빈 스트링 ("") 이 아닌 모든 값, 그리고 false 값인 불리언 객체를 포함하는 모든 객체는 조건으로 사용될 때 <a href="https://developer.mozilla.org/ko/docs/Glossary/Truthy">truthy</a> 로 간주된다. 예:</p> + +<pre class="brush: js">var b = new Boolean(false); +if (b) // 이 조건은 참으로 보이는 것 (truthy) 이다. +</pre> + +<h2 id="예시">예시</h2> + +<h3 id="if...else_사용하기"><code>if...else</code> 사용하기</h3> + +<pre class="brush: js">if (cipher_char === from_char) { + result = result + to_char; + x++; +} else { + result = result + clear_char; +} +</pre> + +<h3 id="else_if_사용하기"><code>else if</code> 사용하기</h3> + +<p>자바스크립트에는 elseif 구문이 없다. 그러나, else if 를 사용할 수 있다.</p> + +<pre class="brush: js">if (x > 5) { + +} else if (x > 50) { + +} else { + +}</pre> + +<h3 id="조건식의_값을_지정하기">조건식의 값을 지정하기</h3> + +<p>조건식을 단순하게 지정하는 것은 좋지 않습니다.<br> + 왜냐하면, 코드를 흘깃 보면 값을 지정한것을 평등한것으로 혼동할 수 있기 때문입니다. 예를들어, 다음코드를 사용하지 마세요:</p> + +<pre class="brush: js example-bad">if (x = y) { + /* do the right thing */ +} +</pre> + +<p>당신이 조건식에 값의 지정을 해야할 경우, 일반적인 관행은 그 할당된 것 주위에 추가 괄호를 넣어야 합니다. 예를들면:</p> + +<pre class="brush: js example-good">if ((x = y)) { + /* do the right thing */ +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-if-statement', 'if statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-if-statement', 'if statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.5', 'if statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.5', 'if statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.5', 'if statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.statements.if_else")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Statements/block", "block")}}</li> + <li>{{jsxref("Statements/switch", "switch")}}</li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">삼항 조건 연산자</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/import/index.html b/files/ko/web/javascript/reference/statements/import/index.html new file mode 100644 index 0000000000..ce3a1536cb --- /dev/null +++ b/files/ko/web/javascript/reference/statements/import/index.html @@ -0,0 +1,156 @@ +--- +title: import +slug: Web/JavaScript/Reference/Statements/import +tags: + - ECMAScript6 + - Modules + - import +translation_of: Web/JavaScript/Reference/Statements/import +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>정적 <strong><code>import</code></strong> 문은 다른 모듈에서 내보낸 바인딩을 가져올 때 사용합니다.</p> + +<p>가져오는 모듈은 <code>"use strict"</code>의 존재 유무와 상관없이 무조건 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a>입니다. HTML 안에 작성한 스크립트에서는 <code>import</code>를 사용할 수 없습니다.</p> + +<p>함수형 구문을 가진 동적 <strong><code>import()</code></strong>도 있으며, <code>type="module"</code>을 필요로 하지 않습니다.</p> + +<p>{{htmlelement("script")}} 태그의 <code>nomodule</code> 속성을 사용해 하위호환성을 유지할 수 있습니다.</p> + +<p>동적 가져오기는 모듈을 조건적으로 가져오고 싶거나, 필요할 때에만 가져올 때 유용합니다. 반면 초기 의존성을 불러올 때엔 정적 가져오기가 더 좋고, 정적 코드 분석 도구와 {{glossary("Tree shaking", "트리 셰이킹")}}을 적용하기 쉽습니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">import defaultExport from "module-name"; +import * as name from "module-name"; +import { export1 } from "module-name"; +import { export1 as alias1 } from "module-name"; +import { export1 , export2 } from "module-name"; +import { foo , bar } from "module-name/path/to/specific/un-exported/file"; +import { export1 , export2 as alias2 , [...] } from "module-name"; +import defaultExport, { export1 [ , [...] ] } from "module-name"; +import defaultExport, * as name from "module-name"; +import "module-name"; +var promise = import("module-name");</pre> + +<dl> + <dt><code>defaultExport</code></dt> + <dd>모듈에서 가져온 기본 내보내기를 가리킬 이름.</dd> + <dt><code>module-name</code></dt> + <dd>가져올 대상 모듈. 보통, 모듈을 담은 <code>.js</code> 파일로의 절대 또는 상대 경로입니다. 번들러에 따라 확장자를 허용하거나, 필요로 할 수도 있으므로 작업 환경을 확인하세요. 따옴표와 쌍따옴표 문자열만 사용 가능합니다.</dd> + <dt><code>name</code></dt> + <dd>가져온 대상에 접근할 때 일종의 이름공간으로 사용할, 모듈 객체의 이름.</dd> + <dt><code>exportN</code></dt> + <dd>내보낸 대상 중 가져올 것의 이름.</dd> + <dt><code>aliasN</code></dt> + <dd>가져온 유명 내보내기를 가리킬 이름.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p><code>name</code> 파라미터는 export 되는 멤버를 받을 오브젝트의 이름입니다. <code>member</code> 파라미터는 각각의 멤버를 지정하지만, <code>name</code> 파라미터는 모두를 가져옵니다. 모듈에서 <font face="Courier New, Andale Mono, monospace">name</font> 은 멤버 대신 하나의 default 파라미터를 통해 export 하는 경우에도 동작할 수 있습니다. 다음의 명확한 예제 문법을 살펴봅시다.</p> + +<p>모듈 전체를 가져옵니다. export 한 모든 것들을 현재 범위(스크립트 파일 하나로 구분되는 모듈 범위) 내에 <code>myModule</code> 로 바인딩되어 들어갑니다.</p> + +<pre class="brush: js">import * as <em>myModule</em> from "my-module.js"; +</pre> + +<p>모듈에서 하나의 멤버만 가져옵니다. 현재 범위 내에 <code>myMember</code> 이 들어갑니다.</p> + +<pre class="brush: js">import {myMember} from "my-module.js";</pre> + +<p>모듈에서 여러 멤버들을 가져옵니다. 현재 범위 내에 <code>foo</code> 와 <code>bar</code> 이 들어갑니다.</p> + +<pre class="brush: js">import {foo, bar} from "my-module.js";</pre> + +<p>멤버를 가져올 때 좀 더 편리한 별명을 지정해줍니다. 현재 범위 내에 <code>shortName</code> 이 들어갑니다.</p> + +<pre class="brush: js">import {reallyReallyLongModuleMemberName as shortName} from "my-module.js";</pre> + +<p>모듈에서 여러 멤버들을 편리한 별명을 지정하며 가져옵니다.</p> + +<pre>import {reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short} from "my-module.js";</pre> + +<p>어떠한 바인딩 없이 모듈 전체의 사이드 이펙트만 가져옵니다.</p> + +<pre class="brush: js">import "my-module.js";</pre> + +<h3 id="기본값_가져오기">기본값 가져오기</h3> + +<p>default export 를 통해 내보낸 것을 기본값으로 가져올 수 있습니다. (object, function, class 등). export 와 상반된 <code>import</code> 명령어를 통해 기본값을 가져오는 것이 가능합니다.</p> + +<p>기본값으로 바로 가져오는 가장 간단한 버전:</p> + +<pre class="brush: js">import myModule from "my-module.js";</pre> + +<p>위와 함께 기본 구문도 같이 사용할 수 있습니다 (namespace 가져오기 또는 이름 지정하여 가져오기). 이러한 경우, 기본값 가져오는 부분을 먼저 선언해야 할 것입니다. 예를 들어:</p> + +<pre class="brush: js">import myDefault, * as myModule from "my-module.js"; +// myModule used as a namespace</pre> + +<p>또는</p> + +<pre class="brush: js">import myDefault, {foo, bar} from "my-module.js"; +// specific, named imports +</pre> + +<h2 id="예제">예제</h2> + +<p>AJAX JSON 리퀘스트 처리를 돕는 보조 파일을 가져옵니다.</p> + +<pre class="brush: js; highlight: [14]">// --file.js-- +function getJSON(url, callback) { + let xhr = new XMLHttpRequest(); + xhr.onload = function () { + callback(this.responseText) + }; + xhr.open("GET", url, true); + xhr.send(); +} + +export function getUsefulContents(url, callback) { + getJSON(url, data => callback(JSON.parse(data))); +} + +// --main.js-- +import { getUsefulContents } from "file.js"; +getUsefulContents("http://www.example.com", data => { + doSomethingUseful(data); +});</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-imports', 'Imports')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-imports', 'Imports')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.statements.import")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Statements/export", "export")}}</li> + <li><a href="https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/">Previewing ES6 Modules and more from ES2015, ES2016 and beyond</a></li> + <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li> + <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/index.html b/files/ko/web/javascript/reference/statements/index.html new file mode 100644 index 0000000000..cd83b9f1c0 --- /dev/null +++ b/files/ko/web/javascript/reference/statements/index.html @@ -0,0 +1,143 @@ +--- +title: 문 및 선언 +slug: Web/JavaScript/Reference/Statements +tags: + - JavaScript + - Reference + - statements +translation_of: Web/JavaScript/Reference/Statements +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>JavaScript 응용 프로그램은 적절한 구문을 갖는 문으로 구성됩니다. 한 문이 여러 줄에 걸칠 수 있습니다. 여러 문은 각 문이 세미콜론으로 구분된 경우 한 줄에 나올 수 있습니다. 이는 키워드 하나가 아니라, 키워드 그룹입니다.</p> + +<h2 id="항목별_문_및_선언">항목별 문 및 선언</h2> + +<p>알파벳순 목록은 왼쪽 사이드바를 보세요.</p> + +<h3 id="흐름_제어">흐름 제어</h3> + +<dl> + <dt>{{jsxref("Statements/block", "Block")}}</dt> + <dd>블록문은 0개 이상의 문을 묶을 때 쓰입니다. 블록은 중괄호 한 쌍으로 구분됩니다.</dd> + <dt>{{jsxref("Statements/break", "break")}}</dt> + <dd>현재 루프, <code>switch</code> 또는 <code>label</code> 문을 종료하고 프로그램 제어를 종료된 문의 다음 문으로 넘겨줍니다.</dd> + <dt>{{jsxref("Statements/continue", "continue")}}</dt> + <dd>현재 또는 레이블 달린 루프의 현재 반복 중인 문의 실행을 종료하고 루프의 실행은 다음 반복으로 이어집니다.</dd> + <dt>{{jsxref("Statements/Empty", "empty")}}</dt> + <dd>empty 문은 내용이 없는 빈 문을 제공하기 위해 사용됩니다, 비록 JavaScript 구문이 문을 기대할 것이지만.</dd> + <dt>{{jsxref("Statements/if...else", "if...else")}}</dt> + <dd>지정된 조건이 true면 문을 실행. 조건이 false인 경우, 다른 문이 실행될 수 있습니다.</dd> + <dt>{{jsxref("Statements/switch", "switch")}}</dt> + <dd>식의 값이 case 절과 일치하는지 식을 평가하고 case 절과 관련된 문을 실행합니다.</dd> + <dt>{{jsxref("Statements/throw", "throw")}}</dt> + <dd>사용자 정의 예외가 발생합니다.</dd> + <dt>{{jsxref("Statements/try...catch", "try...catch")}}</dt> + <dd>시도(try)할 문 블록을 표시하고 예외가 발생되어야 하는 응답을 지정합니다.</dd> +</dl> + +<h3 id="선언">선언</h3> + +<dl> + <dt>{{jsxref("Statements/var", "var")}}</dt> + <dd>변수를 선언합니다, 변수를 값으로 초기화할 수 있습니다.</dd> + <dt>{{jsxref("Statements/let", "let")}}</dt> + <dd>블록 범위 지역 변수를 선언합니다, 변수를 값으로 초기화할 수 있습니다.</dd> + <dt>{{jsxref("Statements/const", "const")}}</dt> + <dd>읽기 전용 유명(named) 상수를 선언합니다.</dd> +</dl> + +<h3 id="함수_및_클래스">함수 및 클래스</h3> + +<dl> + <dt>{{jsxref("Statements/function", "function")}}</dt> + <dd>지정된 매개변수를 갖는 함수를 선언합니다.</dd> + <dt>{{jsxref("Statements/function*", "function*")}}</dt> + <dd><a href="/ko/docs/Web/JavaScript/Guide/The_Iterator_protocol" title="iterators">반복기</a>를 더 쉽게 작성할 수 있게 하는 생성기 함수.</dd> + <dt>{{jsxref("Statements/return", "return")}}</dt> + <dd>함수에 의해 반환되는 값을 지정합니다.</dd> + <dt>{{jsxref("Statements/class", "class")}}</dt> + <dd>클래스를 선언합니다.</dd> +</dl> + +<h3 id="반복">반복</h3> + +<dl> + <dt>{{jsxref("Statements/do...while", "do...while")}}</dt> + <dd>테스트 조건이 거짓으로 평가될 때까지 지정된 문을 실행하는 루프를 만듭니다. 조건은 문을 실행한 후 평가됩니다, 그 결과 지정된 문은 적어도 한 번 실행됩니다.</dd> + <dt>{{jsxref("Statements/for", "for")}}</dt> + <dd>괄호로 묶이고 세미콜론으로 구분된 선택사항 식 셋으로 구성된 루프를 만듭니다, 루프에서 실행되는 문이 뒤따릅니다.</dd> + <dt>{{jsxref("Statements/for_each...in", "for each...in")}} {{deprecated_inline}} {{non-standard_inline}}</dt> + <dd>객체의 모든 속성값에 대해 지정된 변수를 반복합니다. 각 개별 속성에 대해, 지정된 문이 실행됩니다.</dd> + <dt>{{jsxref("Statements/for...in", "for...in")}}</dt> + <dd>임의의 순서로 객체의 열거 속성을 반복합니다. 각 개별 속성에 대해, 문은 실행될 수 있습니다.</dd> + <dt>{{jsxref("Statements/for...of", "for...of")}}</dt> + <dd>반복 가능한 객체 ({{jsxref("Global_Objects/Array","배열","","true")}}, 배열 같은 객체, <a href="/ko/docs/Web/JavaScript/Guide/Iterators_and_Generators">반복기 및 생성기</a> 포함) 를 반복합니다, 각 개별 속성값에 대해 실행되는 문을 가진 사용자 정의 반복 후크를 호출하는.</dd> + <dt>{{jsxref("Statements/while", "while")}}</dt> + <dd>테스트 조건이 true로 평가되는 한 지정된 문을 실행하는 루프를 만듭니다. 조건은 문을 실행하기 전에 평가됩니다.</dd> +</dl> + +<h3 id="기타">기타</h3> + +<dl> + <dt>{{jsxref("Statements/debugger", "debugger")}}</dt> + <dd>이용 가능한 디버깅 기능을 호출합니다. 이용 가능한 기능이 없는 경우, 이 문은 아무 효과가 없습니다.</dd> + <dt>{{jsxref("Statements/export", "export")}}</dt> + <dd>외부 모듈, 다른 스크립트에 가져올(import) 수 있도록 함수를 내보내(export)는데 사용됩니다.</dd> + <dt>{{jsxref("Statements/import", "import")}}</dt> + <dd>외부 모듈, 다른 스크립트에서 내보낸 함수를 가져오는데 사용됩니다.</dd> + <dt>{{jsxref("Statements/label", "label")}}</dt> + <dd><code>break</code> 또는 <code>continue</code> 문을 사용하여 참조할 수 있는 식별자 있는 문을 제공합니다.</dd> +</dl> + +<dl> + <dt>{{jsxref("Statements/with", "with")}} {{deprecated_inline}}</dt> + <dd>문의 스코프 체인을 확장합니다.</dd> +</dl> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>초기 정의</td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>신규: function*, let, for...of, yield, class</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.statements")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Reference/Operators">연산자</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/label/index.html b/files/ko/web/javascript/reference/statements/label/index.html new file mode 100644 index 0000000000..49d6054031 --- /dev/null +++ b/files/ko/web/javascript/reference/statements/label/index.html @@ -0,0 +1,241 @@ +--- +title: label +slug: Web/JavaScript/Reference/Statements/label +translation_of: Web/JavaScript/Reference/Statements/label +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>레이블 구문</strong>은 {{jsxref("Statements/break", "break")}}나 {{jsxref("Statements/continue", "continue")}} 구문과 함께 사용할 수 있다. 원하는 식별자로 구문 앞에 레이블을 추가할 수 있다.</p> + +<div class="note"> +<p>레이블을 붙인 반복문이나 블록가 자주 사용되는 것은 아니다. 반복문으로 점프하는 대신에 함수를 호출할 수도 있다.</p> +</div> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><em>label</em> : + <em>statement</em> +</pre> + +<dl> + <dt><code>label</code></dt> + <dd>자바스크립트에서 사용할 수 있는 식별자면 모두 가능하다.</dd> + <dt><code>statement</code></dt> + <dd>구문. break는 모든 레이블 구문에서 사용될 수 있으며, continue는 반복 레이블 구문에서만 사용할 수 있다.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>반복문에 레이블을 붙이고, break나 continue 구문을 사용해 반복문의 어느 위치에서 작업을 멈추고 어느 위치에서 다시 수행할지를 알려줄 수 있다.</p> + +<p>자바스크립트에는 goto 구문이 없다는 것에 주의. break나 continue에서만 레이블을 사용할 수 있다.</p> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> 코드에서 "let"을 레이블 이름으로 사용할 수 없다. {{jsxref("SyntaxError")}}를 발생시킨다. (let은 허용되지 않는 식별자이다.)</p> + +<h2 id="예제">예제</h2> + +<h3 id="for문에서_레이블_continue_사용하기">for문에서 레이블 continue 사용하기</h3> + +<pre class="brush: js">var i, j; + +loop1: +for (i = 0; i < 3; i++) { //첫번째 for문은 "loop1" 레이블을 붙였다. + loop2: + for (j = 0; j < 3; j++) { //두번째 for문은 "loop2" 레이블을 붙였다. + if (i === 1 && j === 1) { + continue loop1; + } + console.log('i = ' + i + ', j = ' + j); + } +} + +// 출력 결과: +// "i = 0, j = 0" +// "i = 0, j = 1" +// "i = 0, j = 2" +// "i = 1, j = 0" +// "i = 2, j = 0" +// "i = 2, j = 1" +// "i = 2, j = 2" +// 다음 두 경우를 어떻게 스킵하는지 주목 : "i = 1, j = 1", "i = 1, j = 2" +</pre> + +<h3 id="레이블_continue문_사용하기">레이블 continue문 사용하기</h3> + +<p>items, tests 배열을 보면 이 예제는 tests를 통과하는 items의 수를 세고 있다.</p> + +<pre class="brush: js">var itemsPassed = 0; +var i, j; + +top: +for (i = 0; i < items.length; i++) { + for (j = 0; j < tests.length; j++) { + if (!tests[j].pass(items[i])) { + continue top; + } + } + + itemsPassed++; +}</pre> + +<h3 id="for문에_레이블_break문_사용하기">for문에 레이블 break문 사용하기</h3> + +<pre class="brush: js">var i, j; + +loop1: +for (i = 0; i < 3; i++) { //The first for statement is labeled "loop1" + loop2: + for (j = 0; j < 3; j++) { //The second for statement is labeled "loop2" + if (i === 1 && j === 1) { + break loop1; + } + console.log('i = ' + i + ', j = ' + j); + } +} + +// Output is: +// "i = 0, j = 0" +// "i = 0, j = 1" +// "i = 0, j = 2" +// "i = 1, j = 0" +// Notice the difference with the previous continue example</pre> + +<h3 id="레이블_break문_사용하기">레이블 break문 사용하기</h3> + +<p>items, tests 배열을 보면, 다음 예제는 items가 tests를 모두 통과하는지 판단한다.</p> + +<pre class="brush: js">var allPass = true; +var i, j; + +top: +for (i = 0; items.length; i++) + for (j = 0; j < tests.length; i++) + if (!tests[j].pass(items[i])) { + allPass = false; + break top; + }</pre> + +<h3 id="레이블_붙인_블록에_break_사용하기">레이블 붙인 블록에 break 사용하기</h3> + +<p>간단한 블록에도 레이블을 사용할 수 있지만, 반복문 아닌 레이블에는 break문만 사용할 수 있다.</p> + +<pre class="brush: js">foo: { + console.log('face'); + break foo; + console.log('this will not be executed'); +} +console.log('swap'); + +// 로그는 이렇게 출력된다: + +// "face" +// "swap </pre> + +<h3 id="레이블_붙인_함수_선언문">레이블 붙인 함수 선언문</h3> + +<p>ECMAScript 2015에서, 레이블 붙인 함수 선언문은 <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-labelled-function-declarations">web compatibility annex of the specification</a>의 non-strict 모드에서 표준화되어 있다.</p> + +<pre class="brush: js">L: function F() {}</pre> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> 에서는 {{jsxref("SyntaxError")}}를 발생시킨다.</p> + +<pre class="brush: js">'use strict'; +L: function F() {} +// SyntaxError: functions cannot be labelled</pre> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">Generator functions</a>는 strict code도 non-strict code에서도 레이블 붙일 수 없다.</p> + +<pre class="brush: js">L: function* F() {} +// SyntaxError: generator functions cannot be labelled +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.12', 'Labelled statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-labelled-statements', 'Labelled statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-labelled-statements', 'Labelled statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="더_알아보기">더 알아보기</h2> + +<ul> + <li>{{jsxref("Statements/break", "break")}}</li> + <li>{{jsxref("Statements/continue", "continue")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/let/index.html b/files/ko/web/javascript/reference/statements/let/index.html new file mode 100644 index 0000000000..3d02a34fba --- /dev/null +++ b/files/ko/web/javascript/reference/statements/let/index.html @@ -0,0 +1,246 @@ +--- +title: let +slug: Web/JavaScript/Reference/Statements/let +translation_of: Web/JavaScript/Reference/Statements/let +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong><code>let</code></strong> 구문은 블록 유효 범위를 갖는 지역 변수를 선언하며, 선언과 동시에 임의의 값으로 초기화할 수도 있다.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-let.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>var1</code>, <code>var2</code>, …, <code>varN</code></dt> + <dd>변수명. 유효한 식별자이면 가능하다.</dd> + <dt><code>value1</code>, <code>value2</code>, …, <code>valueN</code></dt> + <dd>변수의 초기값. 유효한 표현식이면 가능하다.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p><strong><code>let</code></strong>은 변수가 선언된 블록, 구문 또는 표현식 내에서만 유효한 변수를 선언한다. 이는 <strong><a href="/en-US/docs/JavaScript/Reference/Statements/var"><code>var</code></a></strong> 키워드가 블록 범위를 무시하고 전역 변수나 함수 지역 변수로 선언되는 것과 다른 점이다.</p> + +<p>"<strong>let</strong>"을 사용해야 하는 이유에 대해서는 이어지는 <a href="https://stackoverflow.com/questions/37916940/why-was-the-name-let-chosen-for-block-scoped-variable-declarations-in-javascri">링크</a>를 참조하시오.</p> + +<h3 id="유효_범위_규칙">유효 범위 규칙</h3> + +<p><strong><code>let</code></strong> 으로 선언된 변수는 변수가 선언된 블록 내에서만 유효하며, 당연하지만 하위 블록에서도 유효하다. 이러한 점에서는 <strong><code>let</code></strong> 과 <strong><a href="/en-US/docs/JavaScript/Reference/Statements/var"><code>var</code></a></strong>는 유사하지만, <strong><a href="/en-US/docs/JavaScript/Reference/Statements/var"><code>var</code></a></strong>는 함수 블록 이외의 블록은 무시하고 선언된다는 점이 다르다.</p> + +<pre class="brush:js">function varTest() { + var x = 1; + if (true) { + var x = 2; // 상위 블록과 같은 변수! + console.log(x); // 2 + } + console.log(x); // 2 +} + +function letTest() { + let x = 1; + if (true) { + let x = 2; // 상위 블록과 다른 변수 + console.log(x); // 2 + } + console.log(x); // 1 +} +</pre> + +<p id="Scoping_rules">프로그램이나 함수의 최상위에서는 <strong><code>let</code></strong>과 <strong><a href="/en-US/docs/JavaScript/Reference/Statements/var"><code>var</code></a></strong>은 서로 다르게 행동한다. <strong><code>let</code></strong>은 전역 객체의 속성 값을 생성하지 않는다.</p> + +<pre class="brush:js">var x = 'global'; +let y = 'global'; +console.log(this.x); // "global" 전역 객체의 속성 x를 생성 +console.log(this.y); // undefined 전역 객체의 속성 y를 생성하지 않음 +</pre> + +<h3 id="비공개_변수_모사">비공개 변수 모사</h3> + +<p><a href="/en-US/docs/Glossary/Constructor">생성자</a>와 함께 사용하여 <a href="/en-US/docs/Web/JavaScript/Closures">클로저</a>를 사용하지 않고 비공개 변수를 만들고 접근할 수 있다.</p> + +<pre class="brush:js">var Thing; + +{ + let privateScope = new WeakMap(); + let counter = 0; + + Thing = function() { + this.someProperty = 'foo'; + + privateScope.set(this, { + hidden: ++counter, + }); + }; + + Thing.prototype.showPublic = function() { + return this.someProperty; + }; + + Thing.prototype.showPrivate = function() { + return privateScope.get(this).hidden; + }; +} + +console.log(typeof privateScope); +// "undefined" + +var thing = new Thing(); + +console.log(thing); +// Thing {someProperty: "foo"} + +thing.showPublic(); +// "foo" + +thing.showPrivate(); +// 1 +</pre> + +<h3 id="임시적인_사각_지역과_오류">임시적인 사각 지역과 오류</h3> + +<p>같은 변수를 같은 함수나 블록 범위 내에서 재선언하면 {{jsxref("SyntaxError")}}가 발생한다.</p> + +<pre class="brush: js example-bad">if (x) { + let foo; + let foo; // SyntaxError thrown. +}</pre> + +<p>ECMAScript 2015에서는<strong><code>let</code></strong>은 <strong>선언 끌어올리기</strong>의 적용을 받지 않습니다. 이는 <strong><code>let</code></strong> 선언이 현재 실행되는 구간의 최상위로 옮겨지지 않는다는 것을 의미합니다. 따라서 변수가 초기화(선언)되기 전에 참조할 경우 <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/ReferenceError">ReferenceError</a></code>가 발생합니다.(<strong><a href="/en-US/docs/JavaScript/Reference/Statements/var"><code>var</code></a></strong>로 선언된 변수는 undefined 값을 가지는 것과는 대조적입니다.) "임시적인 사각 지역"은 블록 시작 부분부터 변수 선언이 실행되기 전까지 입니다.</p> + +<p>(<strong><code>let</code></strong>들의 정의가 평가되기까지 초기화가 되지 않는다는 의미이지. 호이스팅이 되지않아 정의가 되지 않는다는 의미와는 다르다고 생각함_헷갈리면 안된다.)</p> + +<pre class="brush: js example-bad">function do_something() { + console.log(bar); // undefined + console.log(foo); // ReferenceError + var bar = 1; + let foo = 2; +}</pre> + +<p><a href="/en-US/docs/JavaScript/Reference/Statements/switch"><code>switch</code></a> 구문을 사용할 때는 실제 블록이 하나 뿐이므로 중복 선언 오류가 발생하기 쉽습니다.</p> + +<pre class="brush: js example-bad">let x = 1; +switch(x) { + case 0: + let foo; + break; + + case 1: + let foo; // 재선언에 의한 SyntaxError. + break; +}</pre> + +<p>하지만 case 조건을 새로운 블록으로 감싸면 위의 코드와는 다르게 재선언 오류가 발생하지 않습니다.</p> + +<pre class="brush: js">let x = 1; + +switch(x) { + case 0: { + let foo; + break; + } + case 1: { + let foo; + break; + } +}</pre> + +<h3 id="임시적인_사각_지역과_typeof">임시적인 사각 지역과 <code>typeof</code></h3> + +<p>선언되지 않은 변수와 <code>undefined</code> 값을 지닌 변수와는 다르게, 임시적인 사각 지역에 있는 변수에 변수형 확인을 위해 <code>typeof</code>을 사용하면 <code>ReferenceError</code>가 발생합니다:</p> + +<pre class="brush: js">// 'undefined' 출력 +console.log(typeof undeclaredVariable); +// 'ReferenceError' 발생 +console.log(typeof i); +let i = 10;</pre> + +<h3 id="정적_유효_범위와_결합된_임시적인_사각_지역_예시">정적 유효 범위와 결합된 임시적인 사각 지역 예시</h3> + +<p>정적 유효 범위로 인해, 표현 <code>(foo + 55)</code> 내부의 "<strong>foo</strong>"는 33을 값으로 가지는 <u>상위 블록의 foo</u>가 아니라 <u>if 블록의 foo</u>로 해석됩니다. 해당 행에서 <u>if 블록의 "foo"</u>는 이미 정적 유효 범위에 생성되었지만, 선언의 초기화가 완료(선언 구문의 <strong>종료</strong>)되지 않았습니다. 따라서 여전히 임시적인 사각 지역에 해당됩니다.</p> + +<pre class="brush: js example-bad">function test(){ + var foo = 33; + if (true) { + let foo = (foo + 55); // ReferenceError + } +} +test();</pre> + +<p>이 현상은 다음과 같은 상황에서 혼란을 유발할 수 있습니다. 지시 구문 <code>let n of n.a</code>은 이미 for loop 블록에 속해 있으며, 구문자 "<strong>n.a</strong>"는 속성 'a'를 지시 구문 자기자신의 앞부분에 위치한 객체 'n'에서 참조하려 합니다. 해당 객체 'n'은 위와 마찬가지로 선언이 <strong>종료</strong>되지 않았기에 임시적인 사각 지역에 해당합니다.</p> + +<pre class="brush: js example-bad">function go(n) { + // 정의되어 있는 n! + console.log(n); // Object {a: [1,2,3]} + + for (let n of n.a) { // ReferenceError + console.log(n); + } +} + +go({a: [1, 2, 3]}); +</pre> + +<h2 id="그_외_상황들">그 외 상황들</h2> + +<p>블록을 사용할 때, <strong><code>let</code></strong>은 변수의 유효 범위를 블록으로 제한합니다. 함수 내 또는 전역을 유효 범위로 가지는 <code><strong>var</strong></code>와의 차이점을 숙지하세요.</p> + +<pre class="brush: js">var a = 1; +var b = 2; + +if (a === 1) { + var a = 11; // 전역 변수 + let b = 22; // if 블록 변수 + + console.log(a); // 11 + console.log(b); // 22 +} + +console.log(a); // 11 +console.log(b); // 2</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition. Does not specify let expressions or let blocks.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.statements.let")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var"><code>var</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a></li> + <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-let-and-const/">ES6 In Depth: <code>let</code> and <code>const</code></a></li> + <li><a href="https://blog.mozilla.org/addons/2015/10/14/breaking-changes-let-const-firefox-nightly-44/">Breaking changes in <code>let</code> and <code>const</code> in Firefox 44</a></li> + <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch3.md">You Don't Know JS: Scope & Closures: Chapter 3: Function vs. Block Scope</a></li> + <li><a href="https://stackoverflow.com/a/33198850/1125029">StackOverflow: What is the Temporal Dead Zone. </a></li> + <li><a href="https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var-to-declare-a-variable">StackOverflow: What is the difference between using let and var?</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/return/index.html b/files/ko/web/javascript/reference/statements/return/index.html new file mode 100644 index 0000000000..e865cb9a65 --- /dev/null +++ b/files/ko/web/javascript/reference/statements/return/index.html @@ -0,0 +1,159 @@ +--- +title: return +slug: Web/JavaScript/Reference/Statements/return +tags: + - JavaScript + - Reference + - Statement +translation_of: Web/JavaScript/Reference/Statements/return +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong><code>return</code> 명령문</strong>은 함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-return.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">return [[expression]]; </pre> + +<dl> + <dt><code>expression</code></dt> + <dd>반환할 값으로 사용할 표현식. 생략할 경우 {{jsxref("undefined")}}를 대신 반환합니다.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>함수 본문에서 <code>return</code> 명령문에 도달하면 함수의 실행은 그 지점에서 중단됩니다. 값을 제공한 경우 함수를 호출한 곳에 그 값을 반환합니다. 예를 들어, 다음 함수는 숫자 매개변수 <code>x</code>의 제곱을 반환합니다.</p> + +<pre class="brush: js">function square(x) { + return x * x; +} +var demo = square(3); +// demo는 9</pre> + +<p>값을 명시하지 않으면 대신 <code>undefined</code>를 반환합니다.</p> + +<p>다음 <code>return</code> 명령문 모두 함수 실행을 끊습니다.</p> + +<pre class="brush: js">return; +return true; +return false; +return x; +return x + y / 3; +</pre> + +<h3 id="자동_세미콜론_삽입">자동 세미콜론 삽입</h3> + +<p><code>return</code> 명령문은 <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">자동 세미콜론 삽입(ASI)</a>의 영향을 받습니다. <code>return</code> 키워드와 표현식 사이에는 줄바꿈 문자가 올 수 없습니다.</p> + +<pre class="brush: js">return +a + b; +</pre> + +<p>위 코드는 ASI로 인해 아래처럼 처리됩니다.</p> + +<pre class="brush: js">return; +a + b; +</pre> + +<p>콘솔이 "unreachable code after return statement" 경고를 출력할 것입니다.</p> + +<div class="note">Gecko 40 {{geckoRelease(40)}}부터, <code>return</code> 이후에 위치하여 도달할 수 없는 코드를 발견하면 콘솔에 경고를 출력합니다.</div> + +<p>문제를 해결하려면 괄호를 사용해 ASI를 방지해야 합니다.</p> + +<pre class="brush: js">return ( + a + b +); +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="함수_중단">함수 중단</h3> + +<p>함수는 <code>return</code>을 호출하는 지점에서 즉시 실행을 멈춥니다.</p> + +<pre class="brush: js">function counter() { + for (var count = 1; ; count++) { // 무한 반복 + console.log(count + "A"); // 5까지 + if (count === 5) { + return; + } + console.log(count + "B"); // 4까지 + } + console.log(count + "C"); // 절대 나타나지 않음 +} + +counter(); + +// 출력: +// 1A +// 1B +// 2A +// 2B +// 3A +// 3B +// 4A +// 4B +// 5A +</pre> + +<h3 id="함수_반환하기">함수 반환하기</h3> + +<p><a href="/ko/docs/Web/JavaScript/Guide/Closures">클로저</a>에 대해서도 더 알아보세요.</p> + +<pre class="brush: js">function magic(x) { + return function calc(x) { return x * 42 }; +} + +var answer = magic(); +answer(1337); // 56154 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.9', 'Return statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-return-statement', 'Return statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.statements.return")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Reference/Functions">함수</a></li> + <li><a href="/ko/docs/Web/JavaScript/Guide/Closures">클로저</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/switch/index.html b/files/ko/web/javascript/reference/statements/switch/index.html new file mode 100644 index 0000000000..b4eb68e5a7 --- /dev/null +++ b/files/ko/web/javascript/reference/statements/switch/index.html @@ -0,0 +1,306 @@ +--- +title: switch +slug: Web/JavaScript/Reference/Statements/switch +translation_of: Web/JavaScript/Reference/Statements/switch +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><span class="seoSummary">The <strong><code>switch</code> statement</strong> evaluates an <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">expression</a>, matching the expression's value to a <code>case</code> clause, and executes <a href="/en-US/docs/Web/JavaScript/Reference/Statements">statements</a> associated with that case, as well as statements in cases that follow the matching case.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/statement-switch.html")}}</div> + + + +<h2 id="문법">문법</h2> + +<pre class="brush: js">switch (expression) { + case value1: + //Statements executed when the + //result of expression matches value1 + [break;] + case value2: + //Statements executed when the + //result of expression matches value2 + [break;] + ... + case valueN: + //Statements executed when the + //result of expression matches valueN + [break;] + [default: + //Statements executed when none of + //the values match the value of the expression + [break;]] +}</pre> + +<dl> + <dt><code>expression</code></dt> + <dd><br> + 각각의 case 절에 맞추어볼 결과에 대한 <code>expression</code></dd> + <dt><code>case valueN</code> {{optional_inline}}</dt> + <dd>어떤 <code>case</code> 절은 <code>expression</code>와 맞추어보는데 사용된다. 만약 <code>expression</code> 이 특정 <code>valueN</code>과 일치 된다면, <code>switch</code> statement 문이 끝나거나 <code>break</code>가 오떄까지 case 절 내부가 실행된다.</dd> + <dt><code>default</code> {{optional_inline}}</dt> + <dd><code>default</code> 절; 만약 있다면, 어떤 <code>case</code>의 절도 <code>expression</code> 값과 일치되지 않는다면, default 절이 실행된다.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>A switch statement first evaluates its expression. It then looks for the first <code>case</code> clause whose expression evaluates to the same value as the result of the input expression (using the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">strict comparison</a>, <code>===</code>) and transfers control to that clause, executing the associated statements. (If multiple cases match the provided value, the first case that matches is selected, even if the cases are not equal to each other.)</p> + +<p>If no matching <code>case</code> clause is found, the program looks for the optional <code>default</code> clause, and if found, transfers control to that clause, executing the associated statements. If no <code>default</code> clause is found, the program continues execution at the statement following the end of <code>switch</code>. By convention, the <code>default</code> clause is the last clause, but it does not need to be so.</p> + +<p>The optional <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break" title="JavaScript/Reference/Statements/break">break</a></code> statement associated with each case label ensures that the program breaks out of switch once the matched statement is executed and continues execution at the statement following switch. If <code>break</code> is omitted, the program continues execution at the next statement in the <code>switch</code> statement.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Using_switch">Using <code>switch</code></h3> + +<p>In the following example, if <code>expr</code> evaluates to "Bananas", the program matches the value with case "Bananas" and executes the associated statement. When <code>break</code> is encountered, the program breaks out of <code>switch</code> and executes the statement following <code>switch</code>. If <code>break</code> were omitted, the statement for case "Cherries" would also be executed.</p> + +<pre class="brush: js">switch (expr) { + case 'Oranges': + console.log('Oranges are $0.59 a pound.'); + break; + case 'Apples': + console.log('Apples are $0.32 a pound.'); + break; + case 'Bananas': + console.log('Bananas are $0.48 a pound.'); + break; + case 'Cherries': + console.log('Cherries are $3.00 a pound.'); + break; + case 'Mangoes': + case 'Papayas': + console.log('Mangoes and papayas are $2.79 a pound.'); + break; + default: + console.log('Sorry, we are out of ' + expr + '.'); +} + +console.log("Is there anything else you'd like?"); +</pre> + +<h3 id="break를_쓰지않으면_어떻게_되는가">break를 쓰지않으면 어떻게 되는가?</h3> + +<p>If you forget a break then the script will run from the case where the criterion is met and will run the case after that regardless if criterion was met. See example here:</p> + +<pre class="brush: js">var foo = 0; +switch (foo) { + case -1: + console.log('negative 1'); + break; + case 0: // foo is 0 so criteria met here so this block will run + console.log(0); + // NOTE: the forgotten break would have been here + case 1: // no break statement in 'case 0:' so this case will run as well + console.log(1); + break; // it encounters this break so will not continue into 'case 2:' + case 2: + console.log(2); + break; + default: + console.log('default'); +}</pre> + +<h3 id="Can_I_put_a_default_between_cases">Can I put a default between cases?</h3> + +<p>Yes, you can! JavaScript will drop you back to the default if it can't find a match:</p> + +<pre class="brush: js">var foo = 5; +switch (foo) { + case 2: + console.log(2); + break; // it encounters this break so will not continue into 'default:' + default: + console.log('default') + // fall-through + case 1: + console.log('1'); +} +</pre> + +<p>It also works when you put default before all other cases.</p> + +<h3 id="Methods_for_multi-criteria_case">Methods for multi-criteria case</h3> + +<p>Source for this technique is here:</p> + +<p><a href="http://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript">Switch statement multiple cases in JavaScript (Stack Overflow)</a></p> + +<h4 id="Multi-case_-_single_operation">Multi-case - single operation</h4> + +<p>This method takes advantage of the fact that if there is no break below a case statement it will continue to execute the next case statement regardless if the case meets the criteria. See the section titled "What happens if I forgot a break?"</p> + +<p>This is an example of a single operation sequential switch statement, where four different values perform exactly the same.</p> + +<pre class="brush: js">var Animal = 'Giraffe'; +switch (Animal) { + case 'Cow': + case 'Giraffe': + case 'Dog': + case 'Pig': + console.log('This animal will go on Noah\'s Ark.'); + break; + case 'Dinosaur': + default: + console.log('This animal will not.'); +}</pre> + +<h4 id="Multi-case_-_chained_operations">Multi-case - chained operations</h4> + +<p>This is an example of a multiple-operation sequential switch statement, where, depending on the provided integer, you can receive different output. This shows you that it will traverse in the order that you put the case statements, and it does not have to be numerically sequential. In JavaScript, you can even mix in definitions of strings into these case statements as well.</p> + +<pre class="brush: js">var foo = 1; +var output = 'Output: '; +switch (foo) { + case 0: + output += 'So '; + case 1: + output += 'What '; + output += 'Is '; + case 2: + output += 'Your '; + case 3: + output += 'Name'; + case 4: + output += '?'; + console.log(output); + break; + case 5: + output += '!'; + console.log(output); + break; + default: + console.log('Please pick a number from 0 to 5!'); +}</pre> + +<p>이 예제의 결과:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Value</th> + <th scope="col">Log text</th> + </tr> + <tr> + <td>foo is NaN or not 1, 2, 3, 4, 5 or 0</td> + <td>Please pick a number from 0 to 5!</td> + </tr> + <tr> + <td>0</td> + <td>Output: So What Is Your Name?</td> + </tr> + <tr> + <td>1</td> + <td>Output: What Is Your Name?</td> + </tr> + <tr> + <td>2</td> + <td>Output: Your Name?</td> + </tr> + <tr> + <td>3</td> + <td>Output: Name?</td> + </tr> + <tr> + <td>4</td> + <td>Output: ?</td> + </tr> + <tr> + <td>5</td> + <td>Output: !</td> + </tr> + </tbody> +</table> + +<h3 id="Block-scope_variables_within_switch_statements">Block-scope variables within <code>switch</code> statements</h3> + +<p>With ECMAScript 2015 (ES6) support made available in most modern browsers, there will be cases where you would want to use <a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a> statements to declare block-scoped variables.</p> + +<p>Take a look at this example:</p> + +<pre class="brush: js">const action = 'say_hello'; +switch (action) { + case 'say_hello': + let message = 'hello'; + console.log(message); + break; + case 'say_hi': + let message = 'hi'; + console.log(message); + break; + default: + console.log('Empty action received.'); + break; +}</pre> + +<p>This example will output the error <code>Uncaught SyntaxError: Identifier 'message' has already been declared</code> which you were not probably expecting.</p> + +<p>This is because the first <code>let message = 'hello';</code> conflicts with second let statement <code>let message = 'hi';</code> even they're within their own separate case statements <code>case 'say_hello':</code> and <code>case 'say_hi':</code>; ultimately this is due to both <code>let</code> statements being interpreted as duplicate declarations of the same variable name within the same block scope.</p> + +<p>We can easily fix this by wrapping our case statements with brackets:</p> + +<pre class="brush: js">const action = 'say_hello'; +switch (action) { + case 'say_hello': <strong>{ // added brackets</strong> + let message = 'hello'; + console.log(message); + break; + <strong>} // added brackets</strong> + case 'say_hi': <strong>{ // added brackets</strong> + let message = 'hi'; + console.log(message); + break; + <strong>} // added brackets</strong> + default: <strong>{ // added brackets</strong> + console.log('Empty action received.'); + break; + <strong>} // added brackets</strong> +}</pre> + +<p>This code will now output <code>hello</code> in the console as it should, without any errors at all.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.11', 'switch statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.statements.switch")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a></li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/throw/index.html b/files/ko/web/javascript/reference/statements/throw/index.html new file mode 100644 index 0000000000..ff5ccb2333 --- /dev/null +++ b/files/ko/web/javascript/reference/statements/throw/index.html @@ -0,0 +1,198 @@ +--- +title: throw +slug: Web/JavaScript/Reference/Statements/throw +translation_of: Web/JavaScript/Reference/Statements/throw +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong><code>throw</code> </strong>문은 사용자 정의 예외를 던질 수 있습니다. 현재 함수의 실행이 중지되고 (<code>throw</code> 이후의 명령문은 실행되지 않습니다.), 컨트롤은 콜 스택의 첫 번째 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>catch</code></a> 블록으로 전달됩니다. 호출자 함수 사이에 <code>catch</code> 블록이 없으면 프로그램이 종료됩니다. </p> + +<div>{{EmbedInteractiveExample("pages/js/statement-throw.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">throw <em>expression</em>; </pre> + +<dl> + <dt><code>expression</code></dt> + <dd>예외를 던지는 구문</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>예외를 발생하기 위해 <code>throw</code> 문을 사용하세요. <br> + 예외를 던지면 <code>expression</code>은 예외 값을 지정합니다.<br> + 다음 각각은 예외를 던집니다:</p> + +<pre class="brush: js">throw 'Error2'; // generates an exception with a string value +throw 42; // generates an exception with the value 42 +throw true; // generates an exception with the value true</pre> + +<p>또한 <code>throw</code> 문은 <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">자동 세미콜론 삽입</a> (ASI)에 의해 영향을 받으며 <code>throw</code> 키워드와 표현식 사이에 줄 종결자는 허용되지 않으므로 주의해야합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="객체_throw_하기">객체 throw 하기</h3> + +<p>예외를 던질 때 객체를 지정할 수 있습니다. 그러면 <code>catch</code> 블록에서 객체의 속성을 참조 할 수 있습니다.<br> + 다음 예제에서는 <code>UserException</code> 유형의 객체를 만들고 <code>throw</code> 구문에서 이 객체를 사용합니다.</p> + +<pre class="brush: js">function UserException(message) { + this.message = message; + this.name = 'UserException'; +} +function getMonthName(mo) { + mo = mo - 1; // Adjust month number for array index (1 = Jan, 12 = Dec) + var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', + 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; + if (months[mo] !== undefined) { + return months[mo]; + } else { + throw new UserException('InvalidMonthNo'); + } +} + +try { + // statements to try + var myMonth = 15; // 15 is out of bound to raise the exception + var monthName = getMonthName(myMonth); +} catch (e) { + monthName = 'unknown'; + console.log(e.message, e.name); // pass exception object to err handler +} +</pre> + +<h3 id="객체를_throw_하는_다른_예제">객체를 throw 하는 다른 예제</h3> + +<p>다음 예제는 입력 문자열에서 미국 우편 번호를 테스트합니다.<br> + 우편 번호가 잘못된 형식을 사용하는 경우 throw 문은 <code>ZipCodeFormatException</code> 유형의 개체를 만들어 예외를 던집니다.</p> + +<pre class="brush: js">/* + * Creates a ZipCode object. + * + * Accepted formats for a zip code are: + * 12345 + * 12345-6789 + * 123456789 + * 12345 6789 + * + * If the argument passed to the ZipCode constructor does not + * conform to one of these patterns, an exception is thrown. + */ + +function ZipCode(zip) { + zip = new String(zip); + pattern = /[0-9]{5}([- ]?[0-9]{4})?/; + if (pattern.test(zip)) { + // zip code value will be the first match in the string + this.value = zip.match(pattern)[0]; + this.valueOf = function() { + return this.value + }; + this.toString = function() { + return String(this.value) + }; + } else { + throw new ZipCodeFormatException(zip); + } +} + +function ZipCodeFormatException(value) { + this.value = value; + this.message = 'does not conform to the expected format for a zip code'; + this.toString = function() { + return this.value + this.message; + }; +} + +/* + * This could be in a script that validates address data + * for US addresses. + */ + +const ZIPCODE_INVALID = -1; +const ZIPCODE_UNKNOWN_ERROR = -2; + +function verifyZipCode(z) { + try { + z = new ZipCode(z); + } catch (e) { + if (e instanceof ZipCodeFormatException) { + return ZIPCODE_INVALID; + } else { + return ZIPCODE_UNKNOWN_ERROR; + } + } + return z; +} + +a = verifyZipCode(95060); // returns 95060 +b = verifyZipCode(9560); // returns -1 +c = verifyZipCode('a'); // returns -1 +d = verifyZipCode('95060'); // returns 95060 +e = verifyZipCode('95060 1234'); // returns 95060 1234 +</pre> + +<h3 id="Rethrow_an_exception">Rethrow an exception</h3> + +<p><code>throw</code>를 사용하여 예외를 잡은 후에 예외를 다시 던질 수 있습니다.<br> + 다음 예제에서는 숫자 값으로 예외를 잡고 값이 50 이상이면 예외를 다시 throw합니다.<br> + 반환 된 예외는 둘러싸는 함수 또는 최상위 수준으로 전파되어 사용자가 볼 수 있도록합니다</p> + +<pre class="brush: js">try { + throw n; // throws an exception with a numeric value +} catch (e) { + if (e <= 50) { + // statements to handle exceptions 1-50 + } else { + // cannot handle this exception, so rethrow + throw e; + } +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.4</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.statements.throw")}}</p> + +<h2 id="추가적으로_볼_것">추가적으로 볼 것</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>try...catch</code></a></li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/try...catch/index.html b/files/ko/web/javascript/reference/statements/try...catch/index.html new file mode 100644 index 0000000000..c7cdf05b1f --- /dev/null +++ b/files/ko/web/javascript/reference/statements/try...catch/index.html @@ -0,0 +1,273 @@ +--- +title: try...catch +slug: Web/JavaScript/Reference/Statements/try...catch +translation_of: Web/JavaScript/Reference/Statements/try...catch +--- +<div> +<p>{{jsSidebar("Statements")}}</p> + +<p><strong><code>try...catch</code></strong> 문은 실행할 코드블럭을 표시하고 예외(exception)가 발생(throw)할 경우의 응답을 지정합니다.</p> + +<p>{{EmbedInteractiveExample("pages/js/statement-trycatch.html")}}</p> +</div> + +<h2 id="문법">문법</h2> + +<pre class="notranslate">try { + <em>try_statements</em> +} +[catch (<em>exception_var</em>) { + <em>catch_statements</em> +}] +[finally { + <em>finally_statements</em> +}]</pre> + +<dl> + <dt><code>try_statements</code></dt> + <dd>실행될 선언들</dd> +</dl> + +<dl> + <dt><code>catch_statements</code></dt> + <dd>try 블록에서 예외가 발생했을 때 실행될 선언들</dd> +</dl> + +<dl> + <dt><code>exception_var</code></dt> + <dd>catch 블록과 관련된 예외 객체를 담기 위한 식별자</dd> +</dl> + +<dl> + <dt><code>finally_statements</code></dt> + <dd>try 선언이 완료된 이후에 실행된 선언들. 이 선언들은 예외 발생 여부와 상관없이 실행된다.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>try 선언의 구성은 하나 혹은 그 이상의 선언을 포함한 try 블록 및 catch 항목이나 finally 항목 중 최소한 하나 혹은 둘 다 포함하여 이루어진다. 즉, try 선언에는 세 가지 형식이 존재한다.</p> + +<ol> + <li><code>try...catch</code></li> + <li><code>try...finally</code></li> + <li><code>try...catch...finally</code></li> +</ol> + +<p><code>catch</code> 블록은 <code>try</code> 블록 안에서 예외가 발생(throw)하는 경우 무엇을 할지 명시하는 코드를 포함합니다. <code>try</code> 블록 (또는 <code>try</code> 블록 내에서 호출된 함수) 내의 명령문이 예외를 throw 하면 제어가 <code>catch</code> 블록으로 이동합니다. <code>try</code> 블록에 예외가 발생하지 않으면 <code>catch</code> 블록을 건너뜁니다.</p> + +<p><code>finally</code> 블록은 <code>try</code> 블록과 <code>catch</code> 블록(들)이 실행을 마친 후 항상 실행됩니다. 예외가 발생했는지에 관계없이 항상 실행됩니다.</p> + +<p>하나 이상의 <code>try</code> 문을 중첩 할 수 있습니다. 내부의 <code>try</code> 문에 <code>catch</code> 블록이 없으면, 둘러싼 <code>try</code> 문의 <code>catch</code> 블록이 입력됩니다.</p> + +<p>또한 <code>try</code> 문을 사용하여 예외처리를 합니다. 예외처리에 대해 더 알고 싶다면, <a href="/en-US/docs/Web/JavaScript/Guide" title="en/JavaScript/Guide">JavaScript Guide</a> 를 참고하세요.</p> + +<h3 id="무조건적_catch_문">무조건적 <code>catch</code> 문</h3> + +<p><code>try</code>-block 내에서 예외가 발생하면 <code>catch</code>-block이 실행됩니다. 예를 들어, 다음 코드에서 예외가 발생하면 제어가 <code>catch</code> 블록으로 전송됩니다.</p> + + + +<pre class="brush: js notranslate">try { + throw "myException"; // generates an exception +} +catch (e) { + // statements to handle any exceptions + logMyErrors(e); // pass exception object to error handler +} +</pre> + +<h3 id="조건적_catch_문">조건적 <code>catch</code> 문</h3> + +<p>다음과 같이 <code>try...catch</code>블록을 <code>if...else if...else</code> 구조와 결합하여 '조건부 <code>catch</code>-blocks'을 만들 수 있습니다.</p> + + + +<pre class="notranslate">try { + myroutine(); // may throw three types of exceptions +} catch (e) { + if (e instanceof TypeError) { + // statements to handle TypeError exceptions + } else if (e instanceof RangeError) { + // statements to handle RangeError exceptions + } else if (e instanceof EvalError) { + // statements to handle EvalError exceptions + } else { + // statements to handle any unspecified exceptions + logMyErrors(e); // pass exception object to error handler + } +} +</pre> + + + +<p>이에 대한 일반적인 사용 사례는 예상 오류의 작은 하위 집합 만 포착 (및 침묵) 한 다음 다른 경우에 오류를 다시 발생시키는 것입니다.</p> + +<pre class="notranslate">try { + myRoutine(); +} catch (e) { + if (e instanceof RangeError) { + // statements to handle this very common expected error + } else { + throw e; // re-throw the error unchanged + } +}</pre> + +<h3 id="The_exception_identifier">The exception identifier</h3> + +<p><code>try</code>-block에서 예외가 발생하면 <code>exception_var</code> (즉, <code>catch (e)</code>내부의 <code>e</code>)가 예외 값을 보유합니다. 이 식별자를 사용하여 발생한 예외에 대한 정보를 얻을 수 있습니다. 이 식별자는 <code>catch</code>-block의 {{Glossary("Scope", "scope")}}에서만 사용할 수 있습니다.</p> + + + +<pre class="notranslate">function isValidJSON(text) { + try { + JSON.parse(text); + return true; + } catch { + return false; + } +}</pre> + +<h3 id="The_finally-block">The finally-block</h3> + +<p>The <code>finally</code>-block contains statements to execute after the <code>try</code>-block and <code>catch</code>-block(s) execute, but before the statements following the <code>try...catch...finally</code>-block. Note that the <code>finally</code>-block executes regardless of whether an exception is thrown. Also, if an exception is thrown, the statements in the <code>finally</code>-block execute even if no <code>catch</code>-block handles the exception.</p> + + + +<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(); +try { + // tie up a resource + writeMyFile(theData); +} +finally { + closeMyFile(); // always close the resource +}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Nested_try-blocks">Nested try-blocks</h3> + +<p>First, let's see what happens with this:</p> + +<pre class="notranslate">try { + try { + throw new Error('oops'); + } + finally { + console.log('finally'); + } +} +catch (ex) { + console.error('outer', ex.message); +} + +// Output: +// "finally" +// "outer" "oops" +</pre> + +<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 { + try { + throw new Error('oops'); + } + catch (ex) { + console.error('inner', ex.message); + } + finally { + console.log('finally'); + } +} +catch (ex) { + console.error('outer', ex.message); +} + +// Output: +// "inner" "oops" +// "finally" +</pre> + +<p>And now, let's rethrow the error.</p> + +<pre class="notranslate">try { + try { + throw new Error('oops'); + } + catch (ex) { + console.error('inner', ex.message); + throw ex; + } + finally { + console.log('finally'); + } +} +catch (ex) { + console.error('outer', ex.message); +} + +// Output: +// "inner" "oops" +// "finally" +// "outer" "oops" +</pre> + +<p>Any given exception will be caught only once by the nearest enclosing <code>catch</code>-block unless it is rethrown. Of course, any new exceptions raised in the "inner" block (because the code in <code>catch</code>-block may do something that throws), will be caught by the "outer" block.</p> + +<h3 id="Returning_from_a_finally-block">Returning from a finally-block</h3> + +<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() { + try { + try { + throw new Error('oops'); + } + catch (ex) { + console.error('inner', ex.message); + throw ex; + } + finally { + console.log('finally'); + return; + } + } + catch (ex) { + console.error('outer', ex.message); + } +})(); + +// Output: +// "inner" "oops" +// "finally"</pre> + +<p>The outer "oops" is not thrown because of the return in the <code>finally</code>-block. The same would apply to any value returned from the <code>catch</code>-block.</p> + +<h2 id="Specifications">Specifications</h2> + +<table> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-try-statement', 'try statement')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.statements.try_catch")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("Statements/throw", "throw")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/var/index.html b/files/ko/web/javascript/reference/statements/var/index.html new file mode 100644 index 0000000000..4366c3ed73 --- /dev/null +++ b/files/ko/web/javascript/reference/statements/var/index.html @@ -0,0 +1,195 @@ +--- +title: var +slug: Web/JavaScript/Reference/Statements/var +tags: + - JavaScript + - Reference + - Statement +translation_of: Web/JavaScript/Reference/Statements/var +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><code><strong>var</strong></code>문은 변수를 선언하고, 선택적으로 초기화할 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-var.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">var <em>varname1 [</em>= <em>value1 [</em>, <em>varname2 [</em>, <em>varname3 ... [</em>, <em>varnameN]]]]</em>;</pre> + +<dl> + <dt><code>varnameN</code></dt> + <dd>변수 이름. 어떤 유효한 식별자도 될 수 있습니다.</dd> +</dl> + +<dl> + <dt><code>valueN</code></dt> + <dd>변수의 초기값. 어떤 유효한 표현도 될 수 있습니다.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>어디에 선언이 되어있든 간에 변수들은 어떠한 코드가 실행되기 전에 처리가 됩니다. var로 선언된 변수의 범위는 현재 실행 문맥인데, 그 문맥은 둘러싼 함수, 혹은 함수의 외부에 전역으로 선언된 변수도 될 수 있습니다.</p> + +<p>선언된 변수들의 값 할당은 할당이 실행될 때 전역변수(이것은 전역 오브젝트의 프로퍼티가 됩니다)처럼 생성이 됩니다. 선언된 변수들과 선언되지 않은 변수들의 차이점은 다음과 같습니다:</p> + +<p>1. 선언된 변수들은 변수가 선언된 실행 콘텍스트(execution context) 안에서 만들어집니다. 선언되지 않은 변수들은 항상 전역변수 입니다.</p> + +<pre class="brush: js">function x() { + y = 1; // strict 모드에서는 ReferenceError를 출력합니다. + var z = 2; +} + +x(); + +console.log(y); // 로그에 "1" 출력합니다. +console.log(z); // ReferenceError: z is not defined outside x를 출력합니다. +</pre> + +<p>2. 선언된 변수들은 어떠한 코드가 실행되기 전에 만들어집니다. 선언되지 않은 변수들은 변수들을 할당하는 코드가 실행되기 전까지는 존재하지 않습니다.</p> + +<pre class="brush: js">console.log(a); // ReferenceError를 출력합니다. +console.log('still going...'); // 결코 실행되지 않습니다.</pre> + +<pre class="brush: js">var a; +console.log(a); // 브라우저에 따라 로그에 "undefined" 또는 "" 출력합니다. +console.log('still going...'); // 로그에 "still going..." 출력합니다.</pre> + +<p>3. 선언된 변수들은 변수들의 실행 콘텍스트(execution context)의 프로퍼티를 변경되지 않습니다. 선언되지 않은 변수들은 변경 가능합니다. (e.g 삭제 될 수도 있습니다.)</p> + +<pre class="brush: js">var a = 1; +b = 2; + +delete this.a; // strict 모드에서는 TypeError를 출력합니다. 그렇지 않으면 자동적으로 실패합니다. +delete this.b; + +console.log(a, b); // ReferenceError를 출력합니다. +// 'b' 프로퍼티는 삭제되었고, 어디에도 존재하지 않습니다.</pre> + +<p>이러한 세가지 다른점 때문에, 변수 선언 오류는 예기치않은 결과로 이어질 가능성이 높습니다. 그러므로 <strong>함수 또는 전역 범위인지 여부와 상관없이, 항상 변수를 선언 하는 것을 추천합니다.</strong> 그리고 ECMAScript 5 안에 <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a>, 선언되지 않은 변수에 할당하면 오류를 출력합니다.</p> + +<h3 id="var_호이스팅(hoisting)">var 호이스팅(hoisting)</h3> + +<p>변수 선언들 (그리고 일반적인 선언)은 어느 코드가 실행 되기 전에 처리하기 때문에, 코드 안에서 어디서든 변수 선언은 최상위에 선언한 것과 동등합니다. 이것은 변수가 선언되기 전에 사용 될 수 있다는 것을 의미합니다. 변수 선언이 함수 또는 전역 코드의 상단에 이동하는 것과 같은 행동을 "호이스팅(hoisting)"이라고 불립니다.</p> + +<pre class="brush: js">bla = 2 +var bla; +// ... + +// 위 선언을 다음과 같이 암묵적으로 이해하면 됩니다: + +var bla; +bla = 2; +</pre> + +<p>이러한 이유로, 그들의 범위(전역 코드의 상단 그리고 함수 코드의 상단) 상단에 변수를 항상 선언하기를 권장합니다. 그러면 변수는 함수 범위 (지역)이 되며, 스코프 체인으로 해결될 것이 분명합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="두_변수들의_선언_및_초기화">두 변수들의 선언 및 초기화</h3> + +<pre class="brush: js">var a = 0, b = 0; +</pre> + +<h3 id="단일_문자열_값으로_두_변수들_할당">단일 문자열 값으로 두 변수들 할당</h3> + +<pre class="brush: js">var a = "A"; +var b = a; + +// 다음과 같음: + +var a, b = a = "A"; +</pre> + +<p>순서에 유의:</p> + +<pre class="brush: js">var x = y, y = 'A'; +console.log(x + y); // undefinedA +</pre> + +<p>여기, x와 y는 어떠한 코드 실행하기 전에 선언되었다, 할당은 후에 발생하였다. "<code>x = y</code>"가 실행될 때, <code>y<font face="Open Sans, Arial, sans-serif">는 존재하여 </font></code><code>ReferenceError를 출력하진 않고</code> 값은 '<code>undefined</code>' 입니다. 그래서, <code>x는</code> undefined 값이 할당 됩니다. 그리고나서, <code>y는 </code>'A' 값이 할당 됩니다. 결과적으로, 첫번째 줄 이후에, <code>x === undefined && y === 'A'</code>, 이와 같은 결과가 됩니다.</p> + +<h3 id="다수의_변수들의_초기화">다수의 변수들의 초기화</h3> + +<pre class="brush: js">var x = 0; + +function f(){ + var x = y = 1; // x는 지역변수로 선언됩니다. y는 아닙니다! +} +f(); + +console.log(x, y); // 0, 1 +// x는 예상대로 전역이다 +// y leaked outside of the function, though! </pre> + +<h3 id="암묵적인_전역변수와_외부_함수_범위">암묵적인 전역변수와 외부 함수 범위</h3> + +<p>암묵적인 전역변수가 될 것으로 보이는 변수는 함수 범위 밖에서 변수들을 참조할 수 있다.</p> + +<pre class="brush: js">var x = 0; // x는 전역으로 선언되었고, 0으로 할당됩니다. + +console.log(typeof z); // undefined, z는 아직 존재하지 않습니다. + +function a() { // a 함수를 호출했을 때, + var y = 2; // y는 함수 a에서 지역변수로 선언되었으며, 2로 할당됩니다. + + console.log(x, y); // 0 2 + + function b() { // b 함수를 호출하였을때, + x = 3; // 존재하는 전역 x값에 3을 할당, 새로운 전역 var 변수를 만들지 않습니다. + y = 4; // 존재하는 외부 y값에 4를 할당, 새로운 전역 var 변수를 만들지 않습니다. + z = 5; // 새로운 전역 z 변수를 생성하고 5를 할당 합니다. + } // (strict mode에서는 ReferenceError를 출력합니다.) + + b(); // 호출되는 b는 전역 변수로 z를 생성합니다. + console.log(x, y, z); // 3 4 5 +} + +a(); // 호출되는 a는 또한 b를 호출합니다. +console.log(x, z); // 3 5 +console.log(typeof y); // undefined y는 function a에서 지역 변수입니다.</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.2', 'var statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-variable-statement', 'variable statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-variable-statement', 'variable statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.statements.var")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Statements/let", "let")}}</li> + <li>{{jsxref("Statements/const", "const")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/while/index.html b/files/ko/web/javascript/reference/statements/while/index.html new file mode 100644 index 0000000000..5509404ed6 --- /dev/null +++ b/files/ko/web/javascript/reference/statements/while/index.html @@ -0,0 +1,142 @@ +--- +title: while +slug: Web/JavaScript/Reference/Statements/while +tags: + - 반복문 + - 자바스크립트 +translation_of: Web/JavaScript/Reference/Statements/while +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>while문</strong>은 조건문이 참일 때 실행되는 반복문이다. 조건은 문장안이 실행되기 전에 참, 거짓을 판단한다.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox">while (<em>condition</em>) + <em>statement</em> +</pre> + +<dl> + <dt><code>조건</code></dt> + <dd>반복이 시작되기 전에 조건문은 참,거짓을 판단받게 된다. 만약 조건문이 참이라면, while문 안의 문장들이 실행된다. 거짓이라면, 문장은 그냥 while 반복문 후로 넘어간다.</dd> + <dt><code>문장</code></dt> + <dd>조건문이 참일 때만 while문 속의 문장들이 실행된다. 반복문 속에 여러개의 문장을 사용하고 싶다면 중괄호 { } 를 통해 문장들을 하나로 묶어야 한다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<p>다음의 while문은 n이 3보다 작을 때까지 반복한다.</p> + +<pre class="brush:js">var n = 0; +var x = 0; + +while (n < 3) { + n++; + x += n; +}</pre> + +<p>반복을 살펴보면, n을 x에 계속 더하게 된다. 그러므로 x와 n 변수는 다음의 값을 갖는다.</p> + +<ul> + <li>첫번째 반복; n=1 과 x=1</li> + <li>두번째 반복; n=2 과 x=3</li> + <li>세번째 반복; n=3 과 x=6</li> +</ul> + +<p>세번째 반복후, n<3 이라는 초건은 더 이상 참이아니가 되므로 반복은 종료된다</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-while-statement', 'while statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-while-statement', 'while statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.6.2', 'while statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.6.2', 'while statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.6.1', 'while statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while"><code>do...while</code></a></li> + <li>{{jsxref("Statements/for", "for")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/statements/with/index.html b/files/ko/web/javascript/reference/statements/with/index.html new file mode 100644 index 0000000000..30940cc297 --- /dev/null +++ b/files/ko/web/javascript/reference/statements/with/index.html @@ -0,0 +1,127 @@ +--- +title: with +slug: Web/JavaScript/Reference/Statements/with +translation_of: Web/JavaScript/Reference/Statements/with +--- +<div class="warning">Use of the <code>with</code> statement is not recommended, as it may be the source of confusing bugs and compatibility issues. See the "Ambiguity Contra" paragraph in the "Description" section below for details.</div> + +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>with statement</strong> 는 명령문의 범위 체인을 확장합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">with (expression) + <em>statement</em> +</pre> + +<dl> + <dt><code>expression</code></dt> + <dd>명령문을 평가할 때 사용되는 범위 체인에 지정된 표현식을 추가합니다. 표현식을 중괄호로 감싸는 것은 필수입니다.</dd> + <dt><code>statement</code></dt> + <dd>모든 구문을 말합니다. 여러개의 명령문을 실행하려면 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/block" title="JavaScript/Reference/Statements/block">블록</a>명령문 ({...})을 사용하여 해당 명령문을 그룹화 하세요.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>JavaScript는 규정되지 않은 이름을 포함하는 스크립트 또는 함수의 실행 컨텍스트와 연관된 범위 체인을 검색하여 규정되지 않은 이름을 찾습니다. 'with'문은 해당 개체를 평가하는 동안 이 개체를 해당 범위 체인의 머리글에 추가합니다. 본문에 사용된 규정되지 않은 이름이 범위 체인의 속성과 일치하는 경우 이름은 속성과 속성이 포함 된 개체에 바인딩 됩니다. 그렇지 않으면, {{jsxref("ReferenceError")}} 가 발생됩니다.</p> + +<div class="note"><code>with</code> 를 사용하는 것은 권장하지 않으며, ECMAScript 5 <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="JavaScript/Strict mode">strict mode</a>에서는 금지되어 있습니다. 임시 변수에 액세스 하려는 속성이 있는 객체를 할당하는 것이 좋습니다.</div> + +<h3 id="Performance_pro_contra">Performance pro & contra</h3> + +<p><strong>Pro:</strong> <code>with</code> 구문은 성능저하 없이 긴 객체 참조를 반복해야할 필요를 줄여서 파일 크기를 감소 시킬 수 있습니다. 'with'에 필요한 스코프 체인 변경은 연산 비용이 들지 않습니다. 'with'를 사용하면 반복되는 객체 참조를 파싱하는 인터프리터가 해소됩니다. 하지만 대게의 경우에 이 이점은 임시변수를 사용하여 원하는 객체에 대한 참조를 저장함으로써 얻을 수 있습니다.</p> + +<p><strong>Contra:</strong> The <code>with</code> statement forces the specified object to be searched first for all name lookups. Therefore all identifiers that aren't members of the specified object will be found more slowly in a 'with' block. Where performance is important, 'with' should only be used to encompass code blocks that access members of the specified object.</p> + +<h3 id="Ambiguity_contra">Ambiguity contra</h3> + +<p><strong>Contra:</strong> The <code>with</code> statement makes it hard for a human reader or JavaScript compiler to decide whether an unqualified name will be found along the scope chain, and if so, in which object. So given this example:</p> + +<pre class="brush: js">function f(x, o) { + with (o) { + console.log(x); + } +}</pre> + +<p>Only when <code>f</code> is called is <code>x</code> either found or not, and if found, either in <code>o</code> or (if no such property exists) in <code>f</code>'s activation object, where <code>x</code> names the first formal argument. If you forget to define <code>x</code> in the object you pass as the second argument, or if there's some similar bug or confusion, you won't get an error -- just unexpected results.</p> + +<p><strong>Contra: </strong>Code using <code>with</code> may not be forward compatible, especially when used with something other than a plain object. Consider this example:</p> + +<div> +<pre class="brush:js">function f(foo, values) { + with (foo) { + console.log(values); + } +} +</pre> + +<p>If you call <code>f([1,2,3], obj)</code> in an ECMAScript 5 environment, then the <code>values</code> reference inside the <code>with</code> statement will resolve to <code>obj</code>. However, ECMAScript 6 introduces a <code>values</code> property on {{jsxref("Array.prototype")}} (so that it will be available on every array). So, in a JavaScript environment that supports ECMAScript 6, the <code>values</code> reference inside the <code>with</code> statement could resolve to <code>[1,2,3].values</code>. However, in this particular example, {{jsxref("Array.prototype")}} has been defined with <code>values</code> in its {{jsxref("Symbol.unscopables")}} object. If it were not, one can see how this would be a difficult issue to debug.</p> +</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_with">Using <code>with</code></h3> + +<p>The following <code>with</code> statement specifies that the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math" title="JavaScript/Reference/Global_Objects/Math"><code>Math</code></a> object is the default object. The statements following the <code>with</code> statement refer to the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/PI" title="JavaScript/Reference/Global_Objects/Math/PI"><code>PI</code></a> property and the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/cos" title="JavaScript/Reference/Global_Objects/Math/cos"><code>cos</code></a> and <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin" title="JavaScript/Reference/Global_Objects/Math/sin"><code>sin</code></a> methods, without specifying an object. JavaScript assumes the <code>Math</code> object for these references.</p> + +<pre class="brush:js">var a, x, y; +var r = 10; + +with (Math) { + a = PI * r * r; + x = r * cos(PI); + y = r * sin(PI / 2); +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-with-statement', 'with statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-with-statement', 'with statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.10', 'with statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Now forbidden in strict mode.</td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.10', 'with statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.10', 'with statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.statements.with")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Statements/block", "block")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">Strict mode</a></li> + <li>{{jsxref("Symbol.unscopables")}}</li> + <li>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</li> +</ul> diff --git a/files/ko/web/javascript/reference/strict_mode/index.html b/files/ko/web/javascript/reference/strict_mode/index.html new file mode 100644 index 0000000000..50cac47a52 --- /dev/null +++ b/files/ko/web/javascript/reference/strict_mode/index.html @@ -0,0 +1,383 @@ +--- +title: Strict mode +slug: Web/JavaScript/Reference/Strict_mode +tags: + - ECMAScript 5 + - JavaScript + - 엄격모드 +translation_of: Web/JavaScript/Reference/Strict_mode +--- +<div>{{JsSidebar("More")}}</div> + +<div class="callout-box">가끔 엄격하지 않은 기본값을 "<strong><a href="https://developer.mozilla.org/ko/docs/Glossary/Sloppy_mode">느슨한 모드</a></strong>(sloppy mode)"라고 부르기도 합니다. 공식적인 용어는 아니지만 혹시 모르니 알아두세요.</div> + +<div><a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript 5</a> 에서 소개된 JavaScript 의 엄격모드는 JavaScript 의 제한된 버전을 선택하여 암묵적인 "<strong><a href="https://developer.mozilla.org/ko/docs/Glossary/Sloppy_mode">느슨한 모드</a></strong>(sloppy mode)" 를 해제하기 위한 방법입니다. 엄격 모드는 단지 부분적인 것이 아니며, 이것은 <em>고의적으로 </em>일반 코드와 다른 시멘틱을 가지고 있습니다. 엄격모드를 지원하지 않는 브라우저에서는 엄격 모드의 코드가 다른 방식으로 동작할 것입니다, 그 때문에 엄격 모드가 적절하게 적용된 피쳐 테스트 없이 엄격 모드에 의존하면 안됩니다. 엄격 모드의 코드와 비-엄격 모드의 코드는 공존할 수 있으며, 때문에 스크립트의 엄격 모드를 취사 선택하는 것이 점진적으로 가능하게 되었습니다.</div> + +<div></div> + +<p>엄격 모드는 평범한 JavaScript 시멘틱스에 몇가지 변경이 일어나게 합니다.</p> + +<ol> + <li>기존에는 조용히 무시되던 에러들을 throwing합니다.</li> + <li>JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡습니다. 가끔씩 엄격 모드의 코드는 비-엄격 모드의 동일한 코드보다 더 빨리 작동하도록 만들어집니다.</li> + <li>엄격 모드는 ECMAScript의 차기 버전들에서 정의 될 문법을 금지합니다.</li> +</ol> + +<p>코드를 JavaScript의 변형이 제한된 환경에서 동작하도록 하고 싶다면, 엄격 모드로의 변환(<a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode">transitioning to strict mode</a>)을 참고하세요.</p> + +<h2 id="엄격모드_적용하기">엄격모드 적용하기</h2> + +<p>엄격모드는 <em>전체 스크립트</em> 또는 <em>부분 함수</em>에 적용가능합니다. 단, <code>{}</code> 괄호로 묶여진 블럭문에는 적용되지 않습니다. 컨텍스트와 같은곳에 적용을 시도하면 동작하지 않습니다. <code>eval</code> 코드, <code>Function</code> 코드, 이벤트 핸들러 속성, {{domxref("WindowTimers.setTimeout()")}} 과 연관된 함수들에 전달된 문자열이 전체 스크립트이며 여기에서 엄격모드가 예상대로 동작합니다. </p> + +<h3 id="스크립트_엄격_모드">스크립트 엄격 모드</h3> + +<p>엄격모드를 전체 스크립트에 적용하기 위해, 정확한 구문 <code>"use strict";</code>(또는 <code>'use strict';</code>) 을 다른 구문 작성 전에 삽입합니다.</p> + +<pre class="brush: js notranslate">// 전체 스크립트 엄격 모드 구문 +'use strict'; +var v = "Hi! I'm a strict mode script!"; +</pre> + +<p><span style='background-color: transparent; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;'>이 구문은 이미 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=627531">유명한 웹사이트</a>에서 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=579119">문제를 일으킨 전적</a>이 있습니다. </span>상충되지 않는 스크립트들 끼리 맹목적인 연결이 불가능하기 때문입니다. 엄격 모드의 스크립트와 비-엄격 모드의 스크립트의 연결은 심사숙고 하시기를 바랍니다. 이렇게 되면 전체 연결은 엄격으로 보입니다! 엄격 모드에 다른 엄격모드 들을 결합하는 것은 괜찮습니다. 그리고, 비-엄격 스크립트 사이의 결합도 괜찮습니다. 분명한건, 스크립트를 결합하는 것이 절대 이상적인 것이 아니라는 것이지만, 그래야 한다면 함수를 기준으로 엄격모드 사용을 고려하시기 바랍니다.</p> + +<p>또한 함수 내부의 전체 스크립트 내용에 접근할 수 있으며, 엄격모드를 사용하는 외부 함수를 가질 수 있습니다. 이는 결합 문제를 없애주기도 하지만, 이것이 스코프 바깥에 위치한 어떤 전역 변수든 확실하게 밖으로 추출할 수 있음을 의미합니다 . </p> + +<h3 id="함수에_strict_mode_적용">함수에 strict mode 적용</h3> + +<p>마찬가지로, 함수에 strict mode를 적용하기 위해, 함수 본문 처음에 다음의 구문을 넣습니다. <code>"use strict";</code> (또는 <code>'use strict';</code>).</p> + +<pre class="brush: js notranslate">function strict() { + // 함수-레벨 strict mode 문법 + 'use strict'; + function nested() { return "And so am I!"; } + return "Hi! I'm a strict mode function! " + nested(); +} +function notStrict() { return "I'm not strict."; } +</pre> + +<h3 id="모듈에_strict_mode_적용">모듈에 strict mode 적용</h3> + +<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() { + // 모듈이기때문에 기본적으로 엄격합니다 +} +export default strict;</code> +</pre> + +<h2 id="엄격한_모드_변경">엄격한 모드 변경</h2> + +<p>엄격한 모드는 구문과 런타임 동작을 모두 변경합니다.<br> + 일반적으로 이러한 유형의 변화가 발생합니다: 변환 실수를 오류로 해석하거나(문법 오류 또는 런타임에 오류 발생), 특정 이름의 특정 용도에 대한 특정 변수를 계산하는 방법을 단순화하며, <code>eval</code> 과 <code>arguments</code> 를 단순화하고,"안전한 "자바 스크립트를 작성하도록 돕고, 미래 ECMAScript의 진화에 대비합니다.</p> + +<h3 id="실수를_에러로_바꾸는_것">실수를 에러로 바꾸는 것</h3> + +<p>엄격한 모드는 일부 이전에 허용되었던 실수를 오류로 바꿔 놓습니다. 자바 스크립트는 초보 개발자에게 쉬운 것이 되도록 설계되었으며, 때로는 오류를 일으킬만한 동작을 에러없이 시행합니다. 때때로 이것은 즉각적인 문제를 해결하지만, 때때로 이것은 더 심각한 문제를 만들어 냅니다. 엄격한 모드는 이러한 실수를 <span style='background-color: transparent; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;'>오류로 처리해서</span> 그것을 발견하고 즉시 고칠 수 있도록 합니다.</p> + +<p>첫째로, 엄격모드는 실수로 글로벌 변수를 생성하는 것을 불가능하게 만듭니다. 일반적인 JavaScript에서 변수를 잘못 입력하면 전역 객체에 대한 새 속성이 만들어지고 그대로 "동작" (미래의 오류가 발생할 수 있음: modern 자바 스크립트처럼) 합니다. 전역 변수를 생성하는 할당은 엄격 모드에선 오류를 발생시킵니다.</p> + +<pre class="brush: js notranslate">"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"; + +// 쓸 수 없는 프로퍼티에 할당 +var undefined = 5; // TypeError 발생 +var Infinity = 5; // TypeError 발생 + +// 쓸 수 없는 프로퍼티에 할당 +var obj1 = {}; +Object.defineProperty(obj1, "x", { value: 42, writable: false }); +obj1.x = 9; // TypeError 발생 + +// getter-only 프로퍼티에 할당 +var obj2 = { get x() { return 17; } }; +obj2.x = 5; // TypeError 발생 + +// 확장 불가 객체에 새 프로퍼티 할당 +var fixed = {}; +Object.preventExtensions(fixed); +fixed.newProp = "ohai"; // TypeError 발생 +</pre> + +<p>셋째로, 엄격 모드는 삭제할 수 없는 프로퍼티를 삭제하려할 때 예외를 발생시킵니다(시도가 어떤 효과도 없을 때).</p> + +<pre class="brush: js notranslate">"use strict"; +delete Object.prototype; // TypeError 발생 +</pre> + +<p>넷째로, Gecko 34 이전의 엄격모드는 객체 리터럴의 모든 프로퍼티의 이름이 유니크해도록 요구합니다. 일반 코드는 프로퍼티의 값이 나중에 정해진 프로퍼티 이름으로 중복할 것입니다. 하지만 마지막 인스턴스 만 변경했기 때문에 코드를 수정하여 마지막 인스턴스를 변경하는 것 이외의 속성 값을 변경하면 복제는 버그의 벡터가됩니다. 엄격모드에서는 프로퍼티 이름을 중복하는 것은 구문 에러입니다.</p> + +<div class="note"> +<p>ECMAScript 2015부터는 에러가 아닙니다. ({{bug(1041128)}}).</p> +</div> + +<pre class="brush: js notranslate">"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){ // !!! 구문 에러 + "use strict"; + return a + b + c; // 코드가 실행되면 잘못된 것임 +} +</pre> + +<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> + +<p>초보 개발자들은 가끔 앞에 붙은 0 이 무의미하다고 생각하여, 이를 정렬용으로 사용합니다 — 하지만 이는 숫자의 의미를 바꿔버립니다! 이 8진수 문법은 거의 무용하며 잘못 사용될 수 있으므로 엄격모드에서 이 구문은 에러입니다.</p> + +<pre class="brush: js notranslate">"use strict"; +var sum = 015 + // !!! 구문 에러 + 197 + + 142; +</pre> + +<p>일곱째로, ECMAScript 6 의 엄격모드는 {{Glossary("primitive")}} 값에 프로퍼티를 설정하는 것을 금지합니다. 엄격모드가 아닐 때에는 프로퍼티 설정이 간단하게 무시되지만(no-op), 엄격모드에서는 {{jsxref("TypeError")}} 를 발생시킵니다.</p> + +<pre class="brush: js notranslate">(function() { +"use strict"; + +false.true = ""; // TypeError +(14).sailing = "home"; // TypeError +"with".you = "far away"; // TypeError + +})();</pre> + +<h3 id="변수_사용_단순화">변수 사용 단순화</h3> + +<p>엄격모드는 코드상의 변수 이름을 특정 변수 정의로 매핑하는 방법을 단순화합니다. 많은 컴파일러 최적화는 변수 X 가 어떤 위치에 저장되어 있는지를 말해주는 능력에 의존하고 있습니다. 이는 자바스크립트 코드를 완전히 최적화하는데 중요합니다. 자바스크립트는 때때로 이름을 코드상의 변수 정의로 기본 매핑하는 것을 런타임때까지 실행이 불가하게합니다. 엄격모드는 이것이 발생하는 대부분의 경우를 제거하여 컴파일러가 엄격모드 코드를 더 잘 최적화 할 수 있게합니다.</p> + +<p>첫째로, 엄격모드는 <code>with</code> 를 사용하지 못하게합니다. <code>with</code> 사용의 문제는 런타임중에 블록안의 모든 이름이 전달된 객체의 프로퍼티나 인근 (또는 심지어 전역) 스코프 내의 변수로 매핑될 수도 있다는 것입니다. 이는 사전에 아는 것이 불가합니다. 엄격 모드는 <code>with</code> 를 구문 에러로 만들어, <code>with</code> 의 이름이 런타임에 알 수 없는 위치를 참조하지 않도록합니다.</p> + +<pre class="brush: js notranslate">"use strict"; +var x = 17; +with (obj) // !!! 구문 에러 +{ + // 엄격모드가 아니라면, 이는 var x 가 되어야 하나요, + // obj.x 가 되어야 하나요? + // 일반적으로는 코드를 실행하지 않고 이를 말하는 것은 불가하므로, + // 이름을 최적화 할 수 없습니다. + x; +} +</pre> + +<p>이름이 짧은 변수에 객체를 할당한 후, 변수에 해당하는 프로퍼티에 접근하는 간단한 대안은 <code>with</code> 를 대체할 준비가 되었습니다.</p> + +<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>. 일반적인 코드에서 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">eval("var x;")</span></font> 는 변수 <code>x</code> 를 주위 함수나 전역 스코프에 추가합니다. 이는, 일반적으로 <code>eval</code> 호출을 포함하는 함수에서 인수나 지역 변수를 참조하지 않는 모든 이름은 런타임에 특정 정의에 반드시 매핑되어야 함을 의미합니다(<code>eval</code> 이 외부 변수를 숨기는 새로운 변수를 추가했기 때문입니다). 엄격모드에서 <code>eval</code> 은 evaluated 된 코드에서만 변수를 생성하므로, 외부 변수나 일부 로컬 변수에 참조하는지에 영향을 주지 않습니다.</p> + +<pre class="brush: js notranslate">var x = 17; +var evalX = eval("'use strict'; var x = 42; x"); +console.assert(x === 17); +console.assert(evalX === 42); +</pre> + +<p>이와 관련해서, <code>eval</code> 함수가 엄격모드 코드 내에서 <code>eval(...)</code> 형태의 표현으로 적용되었다면, 코드는 엄격모드 코드로 evaluated 됩니다. 코드는 명시적으로 엄격모드를 적용할 수 있지만, 필수적인 것은 아닙니다.</p> + +<pre class="brush: js notranslate">function strict1(str){ + "use strict"; + return eval(str); // str 은 엄격모드 코드로 다뤄짐 +} +function strict2(f, str){ + "use strict"; + return f(str); // eval(...) 이 아님: + // str 은 엄격모드를 적용한 경우에만 엄격함 +} +function nonstrict(str){ + return eval(str); // str 은 엄격모드를 적용한 경우에만 엄격함 +} + +strict1("'엄격모드 코드!'"); +strict1("'use strict'; '엄격모드 코드!'"); +strict2(eval, "'느슨한 코드.'"); +strict2(eval, "'use strict'; '엄격모드 코드!'"); +nonstrict("'느슨한 코드.'"); +nonstrict("'use strict'; '엄격모드 코드!'"); +</pre> + +<p>따라서 엄격모드 <code>eval</code> 코드 내의 이름은 엄격모드 코드 내의 이름이 <code>eval</code> 의 결과로 evaluated 되지 않은 것과 동일하게 동작합니다.</p> + +<p>셋째로, 엄격모드는 일반 이름을 제거하는 것을 금지합니다. 엄격 모드에서 <code>delete name</code> 은 구문 에러입니다.</p> + +<pre class="brush: js notranslate">"use strict"; + +var x; +delete x; // !!! 구문 에러 + +eval("var y; delete y;"); // !!! syntax error</pre> + +<h3 id="eval_과_arguments_를_더_간단하게_하기"><code>eval</code> 과 <code>arguments</code> 를 더 간단하게 하기</h3> + +<p>엄격모드는 <code>arguments</code> 와 <code>evel</code> 을 덜 기괴하고 마법적으로 만듭니다. 둘은 일반 코드에서 상당히 많은 마법적인 동작들을 갖고 있습니다: 바인딩을 추가하거나 삭제하고 바인딩 값을 변경하기위한 <code>eval</code>, 명명된 인수를 앨리어스하는 인덱싱된 프로퍼티 <code>arguments</code>. 엄격모드는 ECMAScript 의 미래 버전까지는 모든 수정이 이루지지는 않겠지만 <code>eval</code> 과 <code>arguments</code> 를 키워드로 다루기 위한 훌륭한 큰 걸음을 내딛었습니다.</p> + +<p>첫째로, 변수명 eval 과 arguments 는 언어 문법에 바운드되거나 할당될 수 없습니다. 다음 시도들은 모두 구문 에러입니다.</p> + +<pre class="brush: js notranslate">"use strict"; +eval = 17; +arguments++; +++eval; +var obj = { set p(arguments) { } }; +var eval; +try { } catch (arguments) { } +function x(eval) { } +function arguments() { } +var y = function eval() { }; +var f = new Function("arguments", "'use strict'; return 17;"); +</pre> + +<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){ + "use strict"; + a = 42; + return [a, arguments[0]]; +} +var pair = f(17); +console.assert(pair[0] === 42); +console.assert(pair[1] === 17); +</pre> + +<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"; +var f = function() { return arguments.callee; }; +f(); // TypeError +</pre> + +<h3 id="JavaScript_보안">JavaScript "보안"</h3> + +<p>엄격모드는 "보안된" 자바스크립트를 작성하기 쉽게 해줍니다. 일부 웹사이트들은 사용자가 다른 사용자들을 대신하여 웹사이트에서 실행시키는자바스크립트를 작성하는 방법을 제공합니다. 브라우저에서 자바스크립트는 사용자의 개인정보에 접근할수 있기 때문에, 자바스크립트는 금지된 기능에 대한 검열을 하기위해 반드시 실행전에 부분적으로 변경되어야 합니다. 자바스크립트의 유연성으로 인해 많은 런타임 체크없이 이것을 수행하는것은 사실상 불가능합니다. 특정 언어의 기능들이 너무 광범위하여 런타임 검사 수행은 상당한 성능비용이 생깁니다. 엄격모드의 작은 수정과 사용자가 제출한 자바스크립트가 엄격모드가 되면 특정 방식으로 호출되므로 런타임 검사의 필요성이 크게 줄어 듭니다. </p> + +<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"; +function fun() { return this; } +console.assert(fun() === undefined); +console.assert(fun.call(2) === 2); +console.assert(fun.apply(null) === null); +console.assert(fun.call(undefined) === undefined); +console.assert(fun.bind(true)() === true); +</pre> + +<p>즉, 브라우저에서 엄격모드의 함수내 에서는 더 이상 <code>window</code> 객체를 <code>this</code> 를 통해 참조할 수 없습니다.</p> + +<p>둘째로, 엄격모드에서는 ECMAScript의 일반적으로 구현된 확장을 통해 자바스크립트 스택을 "걷는"것이 불가능합니다. 이러한 일반적인 확장 코드는, 함수 <code>fun</code> 이 호출되는 중간에, <code>fun.caller</code> 는 가장 최근에 <code>fun</code> 을 호출한 함수이고 <code>fun.arguments</code> 는 <code>fun</code>을 호출하기 위한 <code>인</code><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">수</span></font> 입니다. "권한있는"함수와 (잠재적으로 보안되지 않은) 인수에 접근을 허용하기때문에 두가지 확장 모두 자바스크립트의 "보안" 문제가 됩니다. <code>fun</code> 이 엄격모드인경우, both <code>fun.caller</code> 와 <code>fun.arguments</code> 모두 설정 또는 검색될때 삭제 불가능한 속성이 됩니다.</p> + +<pre class="brush: js notranslate">function restricted() +{ + "use strict"; + restricted.caller; // throws a TypeError + restricted.arguments; // throws a TypeError +} +function privilegedInvoker() +{ + return restricted(); +} +privilegedInvoker(); +</pre> + +<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"; +function fun(a, b) +{ + "use strict"; + var v = 12; + return arguments.caller; //TypeError 가 발생. +} +fun(1, 2); // doesn't expose v (or a or b) +</pre> + +<h3 id="미래의_ECMAScript_버전을_위한_준비">미래의 ECMAScript 버전을 위한 준비</h3> + +<p>새롭게 선보일 ECMAScript 버전은 새로운 구문을 소개할 것이고, ECMAScript5에서의 엄격 모드는 변환을 쉽게 하기 위해 몇 가지의 제한을 적용할 것으로 예상되고 있습니다. 만약 이 변화들이 엄격 모드에서의 제한을 기반으로 한다면, 더 바꾸기 쉬워질 것입니다.</p> + +<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){ // !!! + "use strict"; + var implements; // !!! + + interface: // !!! + while (true){ + break interface; // !!! + } + + function private() { } // !!! +} +function fun(static) { 'use strict'; } // !!! + +</pre> + +<p>Mozilla의 특별 지시 두 가지 : 먼저, 코드가 JavaScript 1.7 또는 그보다 높고 (예를 들어, 크롬 코드 또는 <code><script type=""></code> 를 바로 사용할 때) 엄격 모드의 코드라면, <code>let</code> 와 <code>yield</code>는 처음 소개되었을 때의 그 기능을 가진다. 그러나 웹에서의 엄격 모드 코드는, <code><script src=""></code>나 <code><script>...</script></code>로 로딩되지, <code>let</code>/<code>yield</code>를 식별자로 사용할 수가 없을 것이다. 그리고 나서는, ES5 가 <code>class</code>, <code>enum</code>, <code>export</code>, <code>extends</code>, <code>import</code>, and <code>super</code> 와 같은 예약어들을 무조건 리저브함에도 불구하고, 먼저 Firefox 5 Mozilla 는 그것들을 엄격 모드에서만 리저브한다.</p> + +<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"; +if (true){ + function f() { } // !!! syntax error + f(); +} + +for (var i = 0; i < 5; i++){ + function f2() { } // !!! syntax error + f2(); +} + +function baz(){ // kosher + function eit() { } // also kosher +} +</pre> + +<p>이 규제는 엄밀히 말하면 엄격 모드가 아닌데, 저런 함수 표현식들은 기본 ECMAScript5의 확장이기 때문입니다. 그러나 이것이 ECMAScript 협회가 권장하는 방식이며, 브라우저들이 이를 지원할 것입니다. </p> + +<h2 id="브라우저에서의_엄격_모드">브라우저에서의 엄격 모드</h2> + +<p>현재 주류의 브라우저들은 엄격 모드를 지원하고 있습니다. 하지만, 아직도 현실에서 사용되는 수 많은 브라우저의 버전들은 엄격 모드를 부분적으로만 지원하거나(<a href="http://caniuse.com/use-strict" rel="external" title="caniuse.com availability of strict mode">Browser versions used in the wild that only have partial support for strict mode</a>), 아예 지원을 하지 않고 있기 때문에, 맹목적으로 여기에 의지할 수는 없습니다. (예를 들면, Internet Explorer 10 버전 이하!) <em>엄격 모드는 시멘틱을 바꿉니다. </em>이 변화들에 의지하는 것은 실수와 엄격 모드를 지원하지 않는 브라우저의 에러를 야기할 것입니다. 엄격 모드를 사용하는 데에 주의하는 것을 익히세요, 그리고 피쳐 테스트로 엄격 모드를 사용하기에 적절한 부분인지 확인하고 보완하세요. 마지막으로, <em>엄격 모드를 지원하는 브라우저와 그렇지 않은 브라우저에서 작성한 코드의 테스트를 확실히 하도록 하세요.</em> </p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-10.1.1', 'Strict Mode Code')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>초기 정의. 참조 : <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-C">Strict mode restriction and exceptions</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-strict-mode-code', 'Strict Mode Code')}}</td> + <td>{{Spec2('ES6')}}</td> + <td><a href="http://www.ecma-international.org/ecma-262/6.0/#sec-strict-mode-of-ecmascript">Strict mode restriction and exceptions</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-strict-mode-code', 'Strict Mode Code')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td><a href="https://tc39.github.io/ecma262/#sec-strict-mode-of-ecmascript">Strict mode restriction and exceptions</a></td> + </tr> + </tbody> +</table> + +<h2 id="함께_보기">함께 보기</h2> + +<ul> + <li><a class="external" href="http://whereswalden.com/2010/09/08/new-es5-strict-mode-support-now-with-poison-pills/" title="http://whereswalden.com/2010/09/08/new-es5-strict-mode-support-now-with-poison-pills/">Where's Walden? » New ES5 strict mode support: now with poison pills!</a></li> + <li><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/" title="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/">Where's Walden? » New ES5 strict mode requirement: function statements not at top level of a program or function are prohibited</a></li> + <li><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/" title="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/">Where's Walden? » New ES5 strict mode support: new vars created by strict mode eval code are local to that code only</a></li> + <li><a href="http://qnimate.com/javascript-strict-mode-in-nutshell/">JavaScript "use strict" tutorial for beginners.</a></li> + <li><a class="external" href="http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/" title="http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/">John Resig - ECMAScript 5 Strict Mode, JSON, and More</a></li> + <li><a class="external" href="http://dmitrysoshnikov.com/ecmascript/es5-chapter-2-strict-mode/">ECMA-262-5 in detail. Chapter 2. Strict Mode.</a></li> + <li><a class="external" href="http://kangax.github.io/compat-table/es5/#Strict_mode">Strict mode compatibility table</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode">Transitioning to strict mode</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html b/files/ko/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html new file mode 100644 index 0000000000..bc45f85cac --- /dev/null +++ b/files/ko/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html @@ -0,0 +1,137 @@ +--- +title: Transitioning to strict mode(엄격모드로 전환) +slug: Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode +translation_of: Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode +--- +<div>{{jsSidebar("More")}}</div> + +<div>ECMAScript 5에서 <a href="/en-US/docs/JavaScript/Strict_mode" title="/en-US/docs/JavaScript/Strict_mode">strict mode</a>이 도입이 되었다. 이제는 모든 주요 브라우저에서 사용이 가능하다(IE10 포함) 웹 브라우저가 엄격한 코드를 해석하도록 만들어준다. (소스 코드의 맨 위에 'use strict'를 추가하는 것만으로), 기존 코드 기반을 엄격 모드로 전환하는 것은 좀 더 많은 작업을 한다.</div> + +<div> </div> + +<div>이 글은 개발자의 안내서에 초점이 맞춰져있다.</div> + +<h2 id="Gradual_transition">Gradual transition</h2> + +<p>Strict 모드는 점진적으로 전환 할 수 있도록 설계되었다. 개별 파일을 개별적으로 변경하거나 코드를 엄격 모드에서 함수 단위로 전환 할 수도 있다.</p> + +<h2 id="strict_와_non-strict의_차이점">strict 와 non-strict의 차이점</h2> + +<h3 id="Syntax_errors">Syntax errors</h3> + +<p><code>'use strict';</code> 를 추가하게 되면, 아래의 경우에는 스크립트가 실행되기 전에{{jsxref("SyntaxError")}} 에러를 던진다.</p> + +<ul> + <li>Octal syntax <code>var n = 023;</code></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with" title="/en-US/docs/JavaScript/Reference/Statements/with"><code>with</code></a> statement</li> + <li>Using <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="/en-US/docs/JavaScript/Reference/Operators/delete">delete</a></code> on a variable name <code>delete myVariable</code>;</li> + <li>Using <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval"><code>eval</code></a> or <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a> as variable or function argument name</li> + <li>Using one of the newly <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">reserved keywords</a> (in prevision for ECMAScript 2015): <code>implements</code>, <code>interface</code>, <code>let</code>, <code>package</code>, <code>private</code>, <code>protected</code>, <code>public</code>, <code>static</code>, and <code>yield</code></li> + <li>Declaring function in blocks <code>if (a < b) { function f() {} }</code></li> + <li>Obvious errors + <ul> + <li>Declaring twice the same name for a property name in an object literal <code>{a: 1, b: 3, a: 7}</code> This is no longer the case in ECMAScript 2015 ({{bug(1041128)}}).</li> + <li>Declaring two function parameters with the same name <code>function f(a, b, b) {}</code></li> + </ul> + </li> +</ul> + +<p>우리들의 명백한 에러나 나쁜 실수들이 드러나기 때문에 이러한 에러들은 좋다. 이러한 것들은 코드가 실행되기 전에 실행이 된다.</p> + +<h3 id="New_runtime_errors">New runtime errors</h3> + +<p>JavaScript는 컨테스트에서 조용한 실패에 익숙해져 있다. Strict mode는 이 같은 경우에는 던졌다. 만약 너의 코드베이스에 이 같은 경우가 포함되어있다면, 잘못된 것이 있는지 확인하기 위해 테스트가 필요할 것이다. 다시 한번, 함수 세분화된 단계에서 발생할 수 있다.</p> + +<h4 id="값을_선언되지_않은_변수로_설정하기">값을 선언되지 않은 변수로 설정하기</h4> + +<pre class="brush: js">function f(x) { + 'use strict'; + var a = 12; + b = a + x * 35; // error! +} +f(42); +</pre> + +<p>이것은 예상된 효과가 드문 전역객체의 변수를 변경하는 데 사용된다. 만약에 정말로 전역객체의 변수를 부여하고 싶다면, 그것을 인수, 그것을 argument로 넘기고 property로 명시적 할당을 한다.</p> + +<pre class="brush: js">var global = this; // in the top-level context, "this" always + // refers to the global object +function f(x) { + 'use strict'; + var a = 12; + global.b = a + x * 35; +} +f(42); +</pre> + +<h4 id="구성할_수_없는_속성을_삭제하려고_한다.">구성할 수 없는 속성을 삭제하려고 한다.</h4> + +<pre class="brush: js">'use strict'; +delete Object.prototype; // error! +</pre> + +<p>비-엄격모드에서는 조용한 실패였으나 사용자의 기대에는 맞지 않다.</p> + +<h4 id="중독_된_인수_및_함수_속성">중독 된 인수 및 함수 속성</h4> + +<p>엄격모드에서 <code>arguments.callee</code>, <code>arguments.caller</code>, <code>anyFunction.caller</code>, or <code>anyFunction.arguments</code> 접근하려고 하면 에러를 던진다. 합법적인 사용 사례는 다음과 같은 함수를 다시 사용하는 것이다 : </p> + +<pre class="brush: js">// example taken from vanillajs: http://vanilla-js.com/ +var s = document.getElementById('thing').style; +s.opacity = 1; +(function() { + if ((s.opacity-=.1) < 0) + s.display = 'none'; + else + setTimeout(arguments.callee, 40); +})();</pre> + +<p>이것을다음과 같이 재 작성할 수 있다 :</p> + +<pre class="brush: js">'use strict'; +var s = document.getElementById('thing').style; +s.opacity = 1; +(function fadeOut() { // name the function + if((s.opacity-=.1) < 0) + s.display = 'none'; + else + setTimeout(fadeOut, 40); // use the name of the function +})();</pre> + +<h3 id="문법적_차이">문법적 차이</h3> + +<p>매우 미묘한 차이점들이 있다. 테스트 단위가 이런 종류의 미묘한 차이를 잡지 못할 수 있다. 이러한 차이점이 너의 코드의 의미에 영향을 주지 않도록, 코드 기반을 신중하게 검토해야 할 것이다. 다행히도,이 세심한 검토는 함수 세분성을 점차적으로 줄일 수 있다.</p> + +<h4 id="함수내부에서_불리는_this">함수내부에서 불리는 <code>this</code></h4> + +<p><code>f()</code> 라는 함수가 있을 때, <code>this</code> 값은 당연히 전역객체이다. stict mode에서는 <code>undefined</code> 이다. 값은 원시값이고, 함수가 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="/en-US/docs/Core_JavaScript_1.5_Reference/Global_Objects/Function/call">call</a></code> 나 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="/en-US/docs/Core_JavaScript_1.5_Reference/Global_Objects/Function/apply">apply</a></code> 화 함께 불리게 된다면 값은 이것은 하나의 객체이다.(또는 <code>undefined</code> , <code>null</code> 인 전역객체). stict mode에서, 값은 변환이나 대체없이 직접 전달된다.</p> + +<h4 id="arguments_명명_된_함수_인수를_별명으로_지정하지_않습니다."><code>arguments</code> 명명 된 함수 인수를 별명으로 지정하지 않습니다.</h4> + +<p>비-엄격모드에서, <code>arguments</code>객체의 값을 수정하면 해당 명명 된 인수가 수정된다. 이로 인해 자바 스크립트 엔진에 대한 최적화가 복잡해지고 코드를 읽기 / 이해하기가 더 어려워졌다. 엄격모드에서, arguments 객체는 명명 된 인수와 동일한 값으로 만들어지고 초기화되지만 arguments 객체 또는 명명 된 인수에 대한 변경 사항은 서로 반영되지 않는다.</p> + +<h4 id="eval바꾸기"><code>eval</code>바꾸기</h4> + +<p>엄격모드에서, <code>eval</code> 은 그것이 불린 범위안에서 새로운 변수를 만들지 않는다. 또한 물론 엄격모드에서, 문자열은 엄격모드 규칙으로 평가된다. 아무 문제가 없는지 확인하기 위해서는 철저한 테스트를 수행해야 한다. 정말로 필요하지 않다면 eval을 사용하지 않는 것이 실용적인 해결책이 될 수 있다.</p> + +<h2 id="Strictness-neutral_code">Strictness-neutral code</h2> + +<p>A potential "downside" of moving strict code to strict mode is that the semantics may be different in legacy browsers which do not implement strict mode. In some rare occasions (like bad concatenation or minification), your code also may not run in the mode you wrote and tested it in. Here are the rules to make your code strictness-neutral:</p> + +<ol> + <li>코드를 엄격하게 작성하고 (위의 "New runtime errors" 섹션의) 엄격한 오류가 발생하지 않았는지 확인하십시오.</li> + <li>semantic 차이점으로 부터 멀리하라 + <ol> + <li><code>eval</code>: 당신이 하는 일을 안다면, 그것을 사용해라</li> + <li><code>arguments</code>: 함수의 첫 번째 줄로 이름을 통해 항상 함수 인수에 액세스하거나 인수 객체의 복사본을 수행합니다 :<br> + <code>var args = Array.prototype.slice.call(arguments)</code></li> + <li><code>this</code>: <code>this</code> 당신이 만든 대상을 가리킬 때 사용해라</li> + </ol> + </li> +</ol> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/template_literals/index.html b/files/ko/web/javascript/reference/template_literals/index.html new file mode 100644 index 0000000000..3eaf2beb13 --- /dev/null +++ b/files/ko/web/javascript/reference/template_literals/index.html @@ -0,0 +1,254 @@ +--- +title: Template literals +slug: Web/JavaScript/Reference/Template_literals +tags: + - Template +translation_of: Web/JavaScript/Reference/Template_literals +--- +<div>{{JsSidebar("More")}}</div> + +<p>템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문자열) 라고 불려 왔습니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">`string text` + +`string text line 1 + string text line 2` + +`string text ${expression} string text` + +tag `string text ${expression} string text` +</pre> + +<h2 id="Description">Description</h2> + +<p>템플릿 리터럴은 이중 따옴표 나 작은 따옴표 대신 백틱(` `) (<a href="http://en.wikipedia.org/wiki/Grave_accent">grave accent</a>) 을 이용합니다. 템플릿 리터럴은 또한 플레이스 홀더를 이용하여 표현식을 넣을 수 있는데, 이는 $와 중괄호( <code>$ {expression}</code> ) 로 표기할 수 있습니다. 플레이스 홀더 안에서의 표현식과 그 사이의 텍스트는 함께 함수로 전달됩니다. 기본 함수는 단순히 해당 부분을 단일 문자열로 연결시켜 줍니다. 템플릿 리터럴 앞에 어떠한 표현식이 있다면(여기에서는 태그), 템플릿 리터럴은 "태그가 지정된 템플릿"이라고 불리게 됩니다. 이 때, 태그 표현식 (주로 함수)이 처리된 템플릿 리터럴과 함께 호출되면, 출력하기 전에 조작할 수 있습니다. 템플릿 리터럴 안에서 백틱 문자를 사용하려면 백틱 앞에 백슬러쉬(\)를 넣으십시오.</p> + +<pre class="brush: js notranslate">`\`` === "`" // --> true</pre> + +<h3 id="Multi-line_strings">Multi-line strings</h3> + +<p>source 내에 삽입되는 newline characters(\n)은 template literal의 일부가 됩니다.</p> + +<p>일반 string 들을 사용하여, multi-line strings 들을 얻기 위해서는 아래와 같은 문법을 사용해야 할 것입니다.</p> + +<pre class="brush: js notranslate">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 +string text line 2`); +// "string text line 1 +// string text line 2"</pre> + +<h3 id="Expression_interpolation표현식_삽입법">Expression interpolation(표현식 삽입법)</h3> + +<p>표현식(expression)을 일반 문자열(normal strings)에 삽입하기 위해서, 당신은 다음의 문법을 사용할 수 있을 것입니다.</p> + +<pre class="brush: js notranslate">var a = 5; +var b = 10; +console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + "."); +// "Fifteen is 15 and +// not 20."</pre> + +<p>template literals을 이용하면, 이를 더욱 읽기 쉽도록 다음과 같은 문법 설탕(syntactic sugar) 을 활용할 수 있습니다.</p> + +<pre class="brush: js notranslate">var a = 5; +var b = 10; +console.log(`Fifteen is ${a + b} and +not ${2 * a + b}.`); +// "Fifteen is 15 and +// not 20."</pre> + + + +<h3 id="Nesting_templates">Nesting templates</h3> + +<p>특정한 경우 템플릿을 중첩하는 것이 구성 가능한 문자열을 읽는 읽기 가장 쉬운 방법입니다. 백 스페이스 템플릿 내에서 템플릿 내의 자리 표시자<code>${}</code>에 내부 백틱을 사용하는 것이 쉽습니다. 예를 들어, 조건 a가 참이면:이 템플릿을 문자 그대로 반환합니다.</p> + +<p>In ES5:</p> + +<pre class="notranslate"><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() ? '' : + (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;</code></pre> + +<p>ES2015에서 중첩된(nested) 템플릿 리터럴을 사용한 경우:</p> + +<pre class="notranslate"><code>const classes = `header ${ isLargeScreen() ? '' : + `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;</code></pre> + + + +<h3 id="Tagged_templates">Tagged templates</h3> + +<p>template literals 의 더욱 발전된 한 형태는 <em>tagged</em> templates 입니다. 태그를 사용하면 템플릿 리터럴을 함수로 파싱 할 수 있습니다. 태그 함수의 첫 번째 인수는 문자열 값의 배열을 포함합니다. 나머지 인수는 표현식과 관련됩니다. 결국 함수는 조작 된 문자열을 반환 할 수 있습니다 (또는 다음 예제에서 설명하는 것과 완전히 다른 결과를 반환 할 수 있습니다). function 이름은 원하는 어떤 것이든 가능합니다.</p> + +<pre class="notranslate"><code>var person = 'Mike'; +var age = 28; + +function myTag(strings, personExp, ageExp) { + + var str0 = strings[0]; // "that " + var str1 = strings[1]; // " is a " + + // 사실 이 예제의 string에서 표현식이 두 개 삽입되었으므로 + // ${age} 뒤에는 ''인 string이 존재하여 + // 기술적으로 strings 배열의 크기는 3이 됩니다. + // 하지만 빈 string이므로 무시하겠습니다. + // var str2 = strings[2]; + + var ageStr; + if (ageExp > 99){ + ageStr = 'centenarian'; + } else { + ageStr = 'youngster'; + } + + // 심지어 이 함수내에서도 template literal을 반환할 수 있습니다. + return str0 + personExp + str1 + ageStr; + +} + +var output = myTag`that ${ person } is a ${ age }`; + +console.log(output); +// that Mike is a youngster</code></pre> + +<p>다음 예시에서 보여지듯이, Tag function 들은 string 을 반환할 필요는 없습니다.</p> + +<pre class="brush: js notranslate">function template(strings, ...keys) { + return (function(...values) { + var dict = values[values.length - 1] || {}; + var result = [strings[0]]; + keys.forEach(function(key, i) { + var value = Number.isInteger(key) ? values[key] : dict[key]; + result.push(value, strings[i + 1]); + }); + return result.join(''); + }); +} + +var t1Closure = template`${0}${1}${0}!`; +t1Closure('Y', 'A'); // "YAY!" +var t2Closure = template`${0} ${'foo'}!`; +t2Closure('Hello', {foo: 'World'}); // "Hello World!" +</pre> + +<h3 id="Raw_strings">Raw strings</h3> + +<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) { + console.log(strings.raw[0]); +} + +tag`string text line 1 \n string text line 2`; +// logs "string text line 1 \n string text line 2" , +// including the two characters '\' and 'n'</code></pre> + +<p>추가로, default template function 과 string 병합으로 생성될 것 같은 raw string 을 생성하기 위한 {{jsxref("String.raw()")}} method가 존재합니다.</p> + +<pre class="notranslate"><code>var str = String.raw`Hi\n${2+3}!`; +// "Hi\n5!" + +str.length; +// 6 + +str.split('').join(','); +// "H,i,\,n,5,!"</code></pre> + + + +<h3 id="Tagged_templates_and_escape_sequences">Tagged templates and escape sequences</h3> + +<h4 id="ES2016_behavior">ES2016 behavior</h4> + +<p>ECMAScript 2016에서 tagged templates은 다음 escape sequences의 규칙을 따릅니다.</p> + +<ul> + <li>Unicode escapes started by "\u", for example <code>\u00A9</code></li> + <li>Unicode code point escapes indicated by "\u{}", for example <code>\u{2F804}</code></li> + <li>Hexadecimal escapes started by "\x", for example <code>\xA9</code></li> + <li>Octal literal escapes started by "\" and (a) digit(s), for example <code>\251</code></li> +</ul> + +<p>이는 다음과 같은 tagged template이 문제가 된다는 것을 의미하는데, ECMAScript문법에 따라, parser는 유효한 유니 코드 탈출 시퀀스가 있는지 확인하지만 형식이 잘못되었기 때문에 오류가 발생합니다.</p> + +<pre class="notranslate"><code>latex`\unicode` +// Throws in older ECMAScript versions (ES2016 and earlier) +// SyntaxError: malformed Unicode character escape sequence</code></pre> + +<h4 id="ES2018_revision_of_illegal_escape_sequences">ES2018 revision of illegal escape sequences</h4> + +<p>Tagged templates은 다른 escapes sequences가 일반적으로 사용되는 언어 (예 : <a href="https://en.wikipedia.org/wiki/Domain-specific_language">DSLs</a> 또는 <a href="https://en.wikipedia.org/wiki/LaTeX">LaTeX</a>)의 임베딩을 허용해야합니다. ECMAScript proposal <a href="https://tc39.github.io/proposal-template-literal-revision/">Template Literal Revision</a> (4 단계, ECMAScript 2018 표준에 통합됨)은 tagged templates에서 ECMAScript escape sequences의 구문 제한을 제거합니다.</p> + +<p>그러나 illegal escape sequences는 여전히 "cooked"라고 표현되어야합니다. "cooked"배열의 {{jsxref ( "undefined")}} 요소로 나타납니다 :</p> + +<pre class="notranslate"><code>function latex(str) { + return { "cooked": str[0], "raw": str.raw[0] } +} + +latex`\unicode` + +// { cooked: undefined, raw: "\\unicode" }</code></pre> + +<p>escape sequence 제한은 <em>tagged</em> templates에만 적용되며 <em>untagged</em> template literals에는 적용되지 않습니다.</p> + +<div class="warning"> +<p>let bad = `bad escape sequence: \unicode`;</p> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-template-literals', 'Template Literals')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition. Defined in several section of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-template-literals">Template Literals</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-tagged-templates">Tagged Templates</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-template-literals', 'Template Literals')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Defined in several section of the specification: <a href="https://tc39.github.io/ecma262/#sec-template-literals">Template Literals</a>, <a href="https://tc39.github.io/ecma262/#sec-tagged-templates">Tagged Templates</a></td> + </tr> + <tr> + <td><a href="https://tc39.github.io/proposal-template-literal-revision/">Template Literal Revision</a></td> + <td>Stage 4 draft</td> + <td>Drops escape sequence restriction from tagged templates</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("javascript.grammar.template_literals")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("String.raw()")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li> + <li><a href="https://gist.github.com/WebReflection/8f227532143e63649804">Template-like strings in ES3 compatible syntax</a></li> + <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-template-strings-2/">"ES6 in Depth: Template strings" on hacks.mozilla.org</a></li> +</ul> diff --git a/files/ko/web/javascript/reference/trailing_commas/index.html b/files/ko/web/javascript/reference/trailing_commas/index.html new file mode 100644 index 0000000000..aeaded7640 --- /dev/null +++ b/files/ko/web/javascript/reference/trailing_commas/index.html @@ -0,0 +1,185 @@ +--- +title: Trailing commas +slug: Web/JavaScript/Reference/Trailing_commas +tags: + - Comma + - ECMAScript + - ECMAScript2017 + - ECMAScript5 + - JavaScript + - Language feature + - Syntax + - Trailing comma + - 구문 + - 자바스크립트 + - 콤마 + - 트레일링 콤마 +translation_of: Web/JavaScript/Reference/Trailing_commas +--- +<div>{{JsSidebar("More")}}</div> + +<p><strong>Trailing commas</strong> ("final commas"라고도 불립니다)는 새로운 엘리먼트나 매개변수, 속성을 JavaScript 코드에 추가할 때 유용합니다. 새로운 속성을 추가할 때, 마지막 줄에 trailing comma가 있다면 그 줄을 수정 없이 그대로 복사해 쓸 수 있습니다. 이외에도 버전 관리 이력이 간단해지고 코드 편집이 더 편해진다는 장점이 있습니다.</p> + +<p>JavaScript는 초기부터 배열 리터럴에 trailing comma를 허용했으며, ECMAScript 5부터는 객체 리터럴, ECMAScript 2017부터는 함수의 매개변수에도 허용하기 시작했습니다.</p> + +<p>그러나 {{Glossary("JSON")}}에서는 trailing comma를 허용하지 않습니다.</p> + +<h2 id="리터럴에서의_trailing_comma">리터럴에서의 trailing comma</h2> + +<h3 id="배열">배열</h3> + +<p>JavaScript는 배열에 나타나는 trailing comma를 무시합니다.</p> + +<pre class="brush: js notranslate">var arr = [ + 1, + 2, + 3, +]; + +arr; // [1, 2, 3] +arr.length; // 3</pre> + +<p>trailing comma가 여러 개 있을 경우 빈 슬롯("구멍")이 생깁니다. 구멍이 있는 배열을 성기다<sup>sparse</sup>고 합니다(조밀한<sup>dense</sup> 배열에는 구멍이 없습니다). {{jsxref("Array.prototype.forEach()")}}나 {{jsxref("Array.prototype.map()")}}을 이용해 배열을 순회할 때는 빈 슬롯을 무시합니다.</p> + +<pre class="brush: js notranslate">var arr = [1, 2, 3,,,]; +arr.length; // 5 +</pre> + +<h3 id="객체">객체</h3> + +<p>ECMAScript 5부터는 객체 리터럴에도 trailing comma를 사용할 수 있습니다.</p> + +<pre class="brush: js notranslate">var object = { + foo: "bar", + baz: "qwerty", + age: 42, +};</pre> + +<h2 id="함수에서의_trailing_comma">함수에서의 trailing comma</h2> + +<p>ECMAScript 2017에서는 함수의 매개변수 목록에 trailing comma를 허용합니다.</p> + +<h3 id="매개변수_정의">매개변수 정의</h3> + +<p>아래의 두 함수 정의는 모두 유효하며, 서로 같습니다. Trailing comma는 함수 정의의 <code>length</code> 속성이나 <code>arguments</code> 객체에 영향을 주지 않습니다.</p> + +<pre class="brush: js notranslate">function f(p) {} +function f(p,) {} + +(p) => {}; +(p,) => {}; +</pre> + +<p>Trailing comma는 클래스나 객체의 <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">메소드 정의</a>에도 사용할 수 있습니다.</p> + +<pre class="brush: js notranslate">class C { + one(a,) {}, + two(a, b,) {}, +} + +var obj = { + one(a,) {}, + two(a, b,) {}, +}; +</pre> + +<h3 id="함수_호출">함수 호출</h3> + +<p>아래의 두 함수 호출은 모두 유효하며, 서로 같습니다.</p> + +<pre class="brush: js notranslate">f(p); +f(p,); + +Math.max(10, 20); +Math.max(10, 20,); +</pre> + +<h3 id="잘못된_trailing_comma">잘못된 trailing comma</h3> + +<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 +(,) => {}; // SyntaxError: expected expression, got ',' +f(,) // SyntaxError: expected expression, got ',' + +function f(...p,) {} // SyntaxError: parameter after rest parameter +(...p,) => {} // SyntaxError: expected closing parenthesis, got ',' +</pre> + +<h2 id="구조_분해_할당에서의_trailing_comma">구조 분해 할당에서의 trailing comma</h2> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">구조 분해 할당</a>의 좌변에도 trailing comma를 사용할 수 있습니다.</p> + +<pre class="brush: js notranslate">// Trailing comma가 있는 배열 구조 분해 +[a, b,] = [1, 2]; + +// Trailing comma가 있는 객체 구조 분해 +var o = { + p: 42, + q: true, +}; +var {p, q,} = o; +</pre> + +<p>Rest 원소가 있을 경우 역시 {{jsxref("SyntaxError")}}가 발생합니다.</p> + +<pre class="brush: js example-bad notranslate">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> + +<p>객체 안에서의 trailing comma는 ECMAScript 5에 와서야 추가되었습니다. JSON은 ES5 이전의 JavaScript 문법을 기초로 하므로 <strong>JSON에서는 trailing comma를 사용할 수 없습니다</strong>.</p> + +<p>아래의 두 줄 모두 <code>SyntaxError</code>를 발생합니다.</p> + +<pre class="brush: js example-bad notranslate">JSON.parse('[1, 2, 3, 4, ]'); +JSON.parse('{"foo" : 1, }'); +// SyntaxError JSON.parse: unexpected character +// at line 1 column 14 of the JSON data +</pre> + +<p>JSON을 올바르게 파싱하려면 trailing comma를 제거해야 합니다.</p> + +<pre class="brush: js example-good notranslate">JSON.parse('[1, 2, 3, 4 ]'); +JSON.parse('{"foo" : 1 }');</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName('ES5.1')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>객체 리터럴 trailing comma 추가</td> + </tr> + <tr> + <td>{{SpecName('ES6')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>변화 없음</td> + </tr> + <tr> + <td>{{SpecName('ESDraft')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>ES2017에서 함수 trailing comma 추가</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("javascript.grammar.trailing_commas")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>Initial ECMAScript proposal: <a href="https://github.com/tc39/proposal-trailing-function-commas">trailing function commas</a> by Jeff Morrison</li> +</ul> |