diff options
Diffstat (limited to 'files/ko/web/javascript/reference/global_objects/object')
28 files changed, 4624 insertions, 0 deletions
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> |