JavaScript Objects

실생활에서 자동차는 객체(Object)입니다.

자동차에는 무게 및 색상과 같은 속성(properties)과 시작 및 중지와 같은 메서드(methods)가 있습니다.

모든 자동차는 동일한 속성(properties)을 갖지만, 속성 값(property values)은 자동차마다 다릅니다.

모든 자동차에는 동일한 메서드(methods)가 있지만, 메서드는 다른 시간에 수행됩니다.

JavaScript 변수가 데이터 값을 위한 컨테이너라는 것을 이미 배웠습니다.

다음의 코드는 car라는 변수(variable)에 간단한 값 (Fiat)을 할당합니다.

// Create and display a variable:
let car = "Fiat";
document.getElementById("demo").innerHTML = car;  // Fiat

객체(objects)도 변수(variables)입니다. 그러나 객체는 많은 값을 포함할 수 있습니다.

아래의 코드는 car라는 변수에 많은 값 (Fiat, 500, white)을 할당합니다.

// 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 */

값(value)은 이름:값(name:value) 쌍(pairs) (콜론으로 구분된 이름과 값)으로 기록됩니다.

JavaScript 객체는 속성 또는 메서드라고 하는 명명된 값(named values)을 위한 컨테이너입니다.

객체 리터럴(object literal)을 사용하여 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. */

공백(spaces)과 줄 바꿈(line breaks)은 중요하지 않습니다. 객체 정의는 여러 줄에 걸쳐있을 수 있습니다.

// 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. */

JavaScript 객체에서 이름:값(name:value) 쌍(pairs)은 속성(properties)이라고 합니다:

두 가지 방식으로 객체 속성(object properties)에 엑세스 할 수 있습니다:

objectName.propertyName

또는

objectName["propertyName"]

// 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 */

// 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 */

객체는 메서드를 가질 수도 있습니다.

메서드는 객체에 대해 수행할 수 있는 작업(actions)입니다.

메서드는 함수 정의(function definition)로 속성(properties)에 저장됩니다.

메서드(Method)는 속성(property)으로 저장되는 함수입니다.

let person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

함수 정의에서, this는 함수의 “소유자”를 나타냅니다.

위의 예에서, this는 fullName 함수를 “소유”하는 person object입니다.

즉, this.firstName은 이 객체(this object)의 firstName 속성을 의미합니다.

this 키워드에 대한 자세한 내용은 The JavaScript this Keyword를 참조하십시오.

다음 구문을 사용하여 객체 메서드(object method)에 액세스합니다.

objectName.methodName()

// 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 */

( ) 괄호 없이 메서드에 액세스하면, 메서드는 함수 정의를 반환합니다.

// 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; } */

JavaScript 변수가 “new“키워드로 선언되면, 변수가 객체로 생성됩니다.

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

String, Number, Boolean 객체를 피하십시오. 코드가 복잡해지고 실행 속도가 느려집니다.