차이

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

--- wiki:javascript:javascript_note:js_objects [2021/05/20 10:25]
emblim98 만듦
+++ wiki:javascript:javascript_note:js_objects [2023/01/13 18:44] (현재)
@@ 줄 31: / 줄 31: @@
 다음의 코드는 car라는 **변수(variable)**에 **간단한 값 (Fiat)**을 할당합니다.\\
+<code javascript>
+// Create and display a variable:
+let car = "Fiat";
+document.getElementById("demo").innerHTML = car;  // Fiat
+</code>
+\\
+객체(objects)도 변수(variables)입니다. 그러나 객체는 많은 값을 포함할 수 있습니다.\\
+\\
+아래의 코드는 car라는 변수에 **많은 값** (Fiat, 500, white)을 할당합니다.\\
+<code javascript>
+// Create an object
+let car = { type: 'Fiat', model: '500', color: 'white' };
+// Display some data from the object:
+document.getElementById('demo').innerHTML = 'The car type is ' + car.type;
+/* The car type is Fiat */
+</code>
+\\
+값(value)은 **이름:값(name:value) 쌍(pairs)** (콜론으로 구분된 이름과 값)으로 기록됩니다.\\
+\\
+%%JavaScript%% 객체는 속성 또는 메서드라고 하는 **명명된 값(named values)**을 위한 컨테이너입니다.\\
+=====Object Definition=====
+객체 리터럴(object literal)을 사용하여 %%JavaScript%% 객체를 정의(및 생성)합니다.\\
+====Example====
+<code javascript>
+// Create an object
+let person = { firstName: 'John', lastName: 'Doe', age: 50, eyeColor: 'blue' };
+// Display some data from the object:
+document.getElementById('demo').innerHTML = person.firstName + " is " + person.age + " years old.";
+/* John is 50 years old. */
+</code>
+\\
+공백(spaces)과 줄 바꿈(line breaks)은 중요하지 않습니다. 객체 정의는 여러 줄에 걸쳐있을 수 있습니다.\\
+====Example====
+<code javascript>
+// Create an object
+let person = {
+  firstName: 'John',
+  lastName: 'Doe',
+  age: 50,
+  eyeColor: 'blue'
+};
+// Display some data from the object:
+document.getElementById('demo').innerHTML = person.firstName + " is " + person.age + " years old.";
+/* John is 50 years old. */
+</code>
+=====Object Properties=====
+%%JavaScript%% 객체에서 **이름:값(name:value) 쌍(pairs)**은 속성(properties)이라고 합니다:\\
+^ Property   ^ Property Value  ^
+| firstName  | John            |
+| lastName   | Doe             |
+| age        | 50              |
+| eyeColor   | blue            |
+\\
+=====Accessing Object Properties=====
+두 가지 방식으로 객체 속성(object properties)에 엑세스 할 수 있습니다:
+<code javascript>
+objectName.propertyName
+</code>
+\\
+또는\\
+\\
+<code javascript>
+objectName["propertyName"]
+</code>
+====Example 1====
+<code javascript>
+// Create an object:
+let person = {
+  firstName: "John",
+  lastName: "Doe",
+  id: 5566
+};
+// Display some data from the object:
+document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName;
+/* John Doe */
+</code>
+====Example 2====
+<code javascript>
+// Create an object:
+let person = {
+  firstName: "John",
+  lastName: "Doe",
+  id: 5566
+};
+// Display some data from the object:
+document.getElementById("demo").innerHTML = person["firstName"] + " " + person["lastName"]
+/* John Doe */
+</code>
+=====Object Methods=====
+객체는 메서드를 가질 수도 있습니다.\\
+\\
+메서드는 객체에 대해 수행할 수 있는 **작업(actions)**입니다.\\
+\\
+메서드는 **함수 정의(function definition)**로 속성(properties)에 저장됩니다.\\
+\\
+^ Property   ^ Property Value                                             ^
+| firstName  | John                                                       |
+| lastName   | Doe                                                        |
+| age        | 50                                                         |
+| eyeColor   | blue                                                       |
+| fullName   | function() {return this.firstName + " " + this.lastName;}  |
+\\
+  메서드(Method)는 속성(property)으로 저장되는 함수입니다.
+====Example====
+<code javascript>
+let person = {
+  firstName: "John",
+  lastName : "Doe",
+  id       : 5566,
+  fullName : function() {
+    return this.firstName + " " + this.lastName;
+  }
+};
+</code>
+=====The this Keyword=====
+함수 정의에서, ''%%this%%''는 함수의 "소유자"를 나타냅니다.\\
+\\
+위의 예에서, ''%%this%%''는 ''%%fullName%%'' 함수를 "소유"하는 **person object**입니다.\\
+\\
+즉, ''%%this.firstName%%''은 **이 객체(this object)**의 ''%%firstName%% '' 속성을 의미합니다.\\
+\\
+''%%this%%'' 키워드에 대한 자세한 내용은 [[https://www.w3schools.com/js/js_this.asp|The JavaScript this Keyword]]를 참조하십시오.\\
+=====Accessing Object Methods=====
+다음 구문을 사용하여 객체 메서드(object method)에 액세스합니다.\\
+<code javascript>
+objectName.methodName()
+</code>
+====Example====
+<code javascript>
+// Create an object:
+let person = {
+  firstName: "John",
+  lastName: "Doe",
+  id: 5566,
+  fullName: function () {
+    return this.firstName + " " + this.lastName;
+  }
+};
+// Display data from the object:
+document.getElementById("demo").innerHTML = person.fullName();
+/* John Doe */
+</code>
+\\
+( ) 괄호 없이 메서드에 액세스하면, 메서드는 함수 정의를 반환합니다.\\
+====Example====
+<code javascript>
+// Create an object:
+let person = {
+  firstName: "John",
+  lastName: "Doe",
+  id: 5566,
+  fullName: function () {
+    return this.firstName + " " + this.lastName;
+  }
+};
+// Display data from the object:
+document.getElementById("demo").innerHTML = person.fullName;
+/* function () { return this.firstName + " " + this.lastName; } */
+</code>
+=====Do Not Declare Strings, Numbers, and Booleans as Object!=====
+%%JavaScript%% 변수가 "''%%new%%''"키워드로 선언되면, 변수가 객체로 생성됩니다.\\
+\\
+<code javascript>
+let x = new String();     // Declares x as a String object
+let y = new Number();     // Declares y as a Number object
+let z = new Boolean();    // Declares z as a Boolean object
+</code>
+\\
+''%%String%%'', ''%%Number%%'', ''%%Boolean%%'' 객체를 피하십시오. 코드가 복잡해지고 실행 속도가 느려집니다.\\
+\\
 {{tag>오션 Javascript Objects}}

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

사용자 도구

사이트 도구

차이

문서 도구