차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:javascript:javascript_note:js_object_definitions [2021/04/29 11:21]
emblim98 만듦
+++ wiki:javascript:javascript_note:js_object_definitions [2023/01/13 18:44] (현재)
@@ 줄 57: / 줄 57: @@
 =====Objects are Variables=====
-%%JavaScript%% 변수는 하나의 값을 가질 수 있습니다.\\
+%%JavaScript%% 변수는 하나의 값을 포함할 수 있습니다.\\
 <code javascript>
+// Create and display a variable:
+let person = "John Doe";
+document.getElementById("demo").innerHTML = person;
+</code>
+\\
+오브젝트도 변수입니다. 그러나 오브젝트는 많은 값을 포함할 수 있습니다.\\
+\\
+값은 **name : value** 쌍 (콜론으로 구분된 이름과 값)으로 작성합니다.\\
+\\
+<code javascript>
+let person = {
+  firstName: "John",
+  lastName: "Doe",
+  age: 50,
+  eyeColor: "blue"
+};
+document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName;  // John Doe
 </code>
+\\
+  JavaScript 객체는 명명된 값의 모음입니다.
+\\
+=====Object Properties=====
+%%JavaScript%% 오브젝트에서 명명된 값을 **속성(properties)**이라고 합니다.\\
+\\
+^ Property   ^ Value  ^
+| firstName  | John   |
+| lastName   | Doe    |
+| age        | 50     |
+| eyeColor   | blue   |
+\\
+이름 값 쌍(name value pairs)으로 작성된 오브젝트는 다음과 유사합니다:
+  * PHP의 연관 배열(Associative arrays)
+  * Python의 사전(Dictionaries)
+  * C의 해시 테이블(Hash tables)
+  * Java의 해시 맵(Hash maps)
+  * Ruby 및 Perl의 해시(Hashes)
+=====Object Methods=====
+메서드는 오브젝트에 대해 수행할 수 있는 **작업(actions)**입니다.\\
+\\
+원시 값, 다른 오브젝트 및 함수는 오브젝트 속성이 될 수 있습니다.\\
+\\
+**오브젝트 메서드**는 **함수 정의(function definition)**를 포함하는 개체 속성입니다.\\
+\\
+^ Property   ^ Value                                                      ^
+| firstName  | John                                                       |
+| lastName   | Doe                                                        |
+| age        | 50                                                         |
+| eyeColor   | blue                                                       |
+| fullName   | function() {return this.firstName + " " + thisllastName;}  |
+\\
+%%JavaScript%%는 속성(properties)과 메서드(methods)라고 불리는 명명된 값(named values)의 컨테이너입니다.\\
+\\
+=====Creating a JavaScript Object=====
+%%JavaScript%%를 사용하면 자신 만의 오브젝트를 정의하고 만들 수 있습니다.\\
+\\
+새로운 오브젝트를 만드는 여러 가지의 방법들이 있습니다.\\
+\\
+  * 오브젝트 리터럴을 사용하여 단일 오브젝트를 정의하고 만듭니다.
+  * ''new'' 키워드를 사용하여 단일 오브젝트를 정의하고 만듭니다.
+  * 오브젝트 생성자를 정의한 다음, 생성된 타입의 오브젝트를 만듭니다.
+  ECMAScript 5에서는 ''Object.create()'' 함수를 사용하여 객체를 만들 수도 있습니다.
+=====Using an Object Literal=====
+이것은 %%JavaScript%% 오브젝트를 만드는 가장 쉬운 방법입니다.\\
+\\
+오브젝트 리터럴을 사용하면 하나의 스테이트먼트에서 오브젝트를 정의하고 만들 수 있습니다.\\
+\\
+오브젝트 리터럴은 중괄호 %%{}%% 안에 있는 이름:값 쌍 (예, age:50)의 목록입니다.\\
+\\
+다음 예제는 네 가지 속성을 가진 새로운 %%JavaScript%% 오브젝트를 생성합니다.\\
+\\
+<code javascript>
+let person = { firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue" };
+document.getElementById("demo").innerHTML = person.firstName + " is " + person.age + " years old.";
+</code>
+\\
+공백(spaces)과 줄 바꿈(line breaks)은 중요하지 않습니다. 오브젝트 정의는 여러 줄에 걸쳐있을 수 있습니다.\\
+\\
+<code javascript>
+let person = {
+  firstName: "John",
+  lastName: "Doe",
+  age: 50,
+  eyeColor: "blue"
+};
+document.getElementById("demo").innerHTML = person.firstName + " is " + person.age + " years old.";  // John is 50 years old.
+</code>
+\\
+=====Using the JavaScript Keyword new=====
+다음의 예제도 4개의 속성(properties)을 가진 새로운 %%JavaScript%% 오브젝트를 생성합니다.\\
+\\
+<code javascript>
+let person = new Object();
+person.firstName = "John";
+person.lastName = "Doe";
+person.age = 50;
+person.eyeColor = "blue";
+document.getElementById("demo").innerHTML = person.firstName + " is " + person.age + " years old.";  // John is 50 years old.
+</code>
+\\
+  위의 두 예제는 정확히 동일합니다. ''new Object()''를 사용할 필요가 없습니다.
+  단순성(simplicity), 가독성(readability) 및 실행 속도(execution speed)를 위해서는, 첫 번째 방법 (오브젝트트 리터럴 방법)을 사용하십시오.
+\\
+=====JavaScript Objects are Mutable=====
+오브젝트는 변경할 수 있습니다: 오브젝트는 값(value)이 아닌 참조(reference)로 처리됩니다.\\
+\\
+person이 오브젝트인 경우, 다음의 스테이트먼트는 person의 사본을 생성하지 않습니다.\\
+\\
+<code javascript>
+var x = person; // This will not create a copy of person.
+</code>
+\\
+오브젝트 x는 person의 복사본이 아닙니다. person입니다. x와 person은 모두 같은 오브젝트입니다.\\
+\\
+x를 변경하면 person도 변경됩니다. x와 person은 같은 오브젝트이기 때문입니다.\\
+\\
+<code javascript>
+let person = { firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue" }
+let x = person;
+x.age = 10;
+document.getElementById("demo").innerHTML = person.firstName + " is " + person.age + " years old.";  // John is 10 years old.
+console.log(person); // {firstName: "John", lastName: "Doe", age: 10, eyeColor: "blue"}
+console.log(x);      // {firstName: "John", lastName: "Doe", age: 10, eyeColor: "blue"}
+</code>
 {{tag>오션 Javascript Objects Definitions}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구