자바스크립트에서 객체(objects)가 왕입니다. 객체를 이해해야 자바스크립트를 이해할 수 있습니다.
자바스크립트의 거의 “모든 것(everything)”이 객체입니다.
- Booleans는 객체가 될 수 있습니다 (new 키워드와 함께 정의하면)
- Numbers는 객체가 될 수 있습니다 (new 키워드와 함께 정의하면)
- Strings는 객체가 될 수 있습니다 (new 키워드와 함께 정의하면)
- Dates는 항상 객체입니다.
- Maths는 항상 객체입니다.
- Regular expressions는 항상 객체입니다.
- Arrays는 항상 객체입니다.
- Functions는 항상 객체입니다.
- Objects는 항상 객체입니다.
primitives를 제외한 모든 자바스크립트 값(values)은 객체입니다.
자바스크립트 Primitives
primitive value는 속성이나 메소드(properties or methods)가 없는 값입니다.
primitive data type은 primitive value의 데이터 유형입니다.
자바스크립트는 primitive data types을 5가지 유형(types)으로 정의하고 있습니다(:
- string
- number
- boolean
- null
- undefined
Primitive values는 불변(immutable)입니다 (이것은 하드 코딩되어 있으므로 변경할 수 없습니다).
x = 3.14이면, x의 값을 변경할 수 있습니다. 그러나 3.14의 값을 변경할 수는 없습니다.
| Value | Type | Comment |
|---|---|---|
| “Hello" | string | "Hello" is always "Hello" |
| 3.14 | number | 3.14 is always 3.14 |
| true | boolean | true is always true |
| false | boolean | false is always false |
| null | null (object) | null is always null |
| undefined | undefined | undefined is always undefined |
객체(Objects)는 변수를 포함하는 변수(Variables)입니다
자바스크립트 변수는 하나의 값(single values)을 포함할 수 있습니다:
Example
John Doe
|
1 2 3 4 5 6 7 8 |
<p id="demo"></p> <script> var person = "John Doe"; document.getElementById("demo").innerHTML = person; </script> |
객체도 역시 변수입니다. 그러나 객체는 여러 값을 포함할 수 있습니다.
값은 name : value 쌍입니다 (name과 value는 콜론으로 구분합니다).
Example
John Doe
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<p>자바스크립트 객체 생성.</p> <p id="demo"></p> <script> var person = { firstName : "John", lastName : "Doe", age : 50, eyeColor : "blue" }; document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName; </script> |
자바스크립트 객체는 named values의 모음입니다.
객체 속성
자바스크립트 객체에서 named values는 속성(properties)이라고 합니다.
| Property | Value |
|---|---|
| firstName | John |
| lastName | Doe |
| age | 50 |
| eyeColor | blue |
name value 쌍으로 작성된 객체는 다음과 유사합니다:
- Associative arrays in PHP
- Dictionaries in Python
- Hash tables in C
- Hash maps in Java
- Hashes in Ruby and Perl
객체 메소드(Object Methods)
메소드는 객체(objects)에 수행되는 작업(actions)입니다.
객체 속성(Object properties)은 primitive values, 다른 객체(objects) 및 함수(functions)가 될 수 있습니다.
객체 메소드(object method)는 함수 정의(function definition)를 포함하는 객체 속성입니다.
| Property | Value |
|---|---|
| firstName | John |
| lastName | Doe |
| age | 50 |
| eyeColor | blue |
| fullName | function() {return this.firstName + " " + this.lastName;} |
자바스크립트 객체(objects)는 속성과 메소드(properties and methods)라는 named values를 위한 컨테이너입니다.
다음 장에서 메소드(methods)에 대해 더 배웁니다.
자바스크립트 객체(Object) 생성
자바스크립트로 자신의 객체(objects)를 정의하고 생성할 수 있습니다.
새 객체(objects)를 만드는 방법은 여러가지입니다:
- 객체 리터럴(object literal)을 사용하여, 하나의 객체(single object)를 정의하고 생성합니다.
- new 키워드를 사용하여 하나의 객체(single object)를 정의하고 생성합니다.
- 객체 생성자(object constructor)를 정의하고, 생성된 유형(constructed type)의 객체(objects)를 생성합니다.
ECMAScript 5에서, 객체(object)는 Object.create() 함수를 사용하여 생성할 수도 있습니다.
Object Literal 사용
이것이 자바스크립트 객체를 생성하는 가장 쉬운 방법입니다.
object literal을 사용하면, 하나의 문(statement)으로 객체를 정의하고 생성할 수
있습니다.
object literal은 중괄호 {} 안에 있는 name:value 쌍(예: age:50)의 목록입니다.
다음 예제는 4개의 속성으로 새 자바스크립트 객체를 생성합니다:
Example
John is 50 years old.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<p>Creating a JavaScript Object.</p> <p id="demo"></p> <script> var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; document.getElementById("demo").innerHTML = person.firstName + " is " + person.age + " years old."; </script> |
공백(Spaces)과 줄바꿈(line breaks)을 중요하지 않습니다. 객체 정의는 여러 행으로 작성할 수 있습니다:
Example
John is 50 years old.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<p>Creating a JavaScript Object.</p> <p id="demo"></p> <script> var person = { firstName : "John", lastName : "Doe", age : 50, eyeColor : "blue" }; document.getElementById("demo").innerHTML = person.firstName + " is " + person.age + " years old."; </script> |
자바스크립트 new 키워드 사용
다음 예제도 4개의 속성을 가진 새 자바스크립트 객체를 생성합니다:
Example
John is 50 years old.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<p id="demo"></p> <script> var 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."; </script> |
위 두 예제는 똑같습니다. new Object()를 사용할 필요가 없습니다.
간단함, 가독성, 실행속도를 위해, 첫 번재(object literal method)를 사용하십시오.
자바스크립트 객체는 변경할 수(Mutable) 있습니다
객체는 변경할 수(mutable) 있습니다: 이것은 값(value)이 아닌 참조(reference)로 다룹니다.
person 객체라면, 다음 문(statement)은 person의 사본을 생성하지 않습니다:
|
1 2 3 |
var x = person; // This will not create a copy of person. |
객체 x는 person의 사본이 아닙니다(not a copy)). 이것은 person 입니다. x와 person은 같은 객체입니다.
x를 변경하면 person도 변경됩니다. x와 person은 같은 객체이기 때문입니다.
Example
John is 10 years old.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<p>자바스크립트 객체는 변경할 수 있습니다.</p> <p>객체의 사본을 변경하면, 원본(original)도 변경됩니다.</p> <p id="demo"></p> <script> var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"} var x = person; x.age = 10; document.getElementById("demo").innerHTML = person.firstName + " is " + person.age + " years old."; </script> |
주의: 자바스크립트 변수(variables)는 변경할 수 없습니다(not mutable). 자바스크립트 객체(objects) 만 변경할 있습니다.