======JavaScript Objects======
<WRAP left notice 70%>
  * description : JavaScript Objects
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-05-20
</WRAP>
<WRAP clear></WRAP>
\\
====The Source of this article===
[[https://www.w3schools.com/js/js_objects.asp|JavaScript Objects]]

=====Real Life Objects, Properties, and Methods=====
실생활에서 자동차는 객체(Object)입니다.\\
\\
자동차에는 무게 및 색상과 같은 **속성(properties)**과 시작 및 중지와 같은 **메서드(methods)**가 있습니다.\\
{{:wiki:javascript:javascript_note:objectexplained.gif?200 |}}
^ Properties          ^ Methods        ^
| car.name = Fiat     | car.start ( )  |
| car.model = 500     | car.drive ( )  |
| car.weight = 850kg  | car.brake ( )  |
| car.color = white   | car.stop ( )   |
\\
모든 자동차는 동일한 **속성(properties)**을 갖지만, 속성 값(property values)은 자동차마다 다릅니다.\\
\\
모든 자동차에는 동일한 메서드(methods)가 있지만, 메서드는 다른 시간에 수행됩니다.\\

=====JavaScript Objects=====
%%JavaScript%% 변수가 데이터 값을 위한 컨테이너라는 것을 이미 배웠습니다.\\
\\
다음의 코드는 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}}