중괄호를 안에 프로퍼티(속성)와 값(value)을 입력하여 객체를 생성하는 방식입니다. 자바스크립트에서 객체를 정의할 때 가장 많이 쓰이는 방법이며 사용도 간편합니다.
기본 사용법
var 객체명 = {
속성명1: 값1,
속성명2: 값2,
...
};
예시
var object = {
name : "name", // 문자열
number : 6, // 숫자
func : function() { // 함수
return null;
},
data : { // 객체
property : 1;
}
};
위와 같이 하나의 객체 안에 여러 가지 프로퍼티와 값들을 정의했습니다. 특이한 점은 함수도 객체로 취급되기 때문에 프로퍼티로 사용 가능하고 또 하나의 객체 리터럴 방식으로 객체를 정의할 수 있다느 점입니다. 이와 같이 객체 안에 객체를 정의할 수도 있습니다.
속성 접근 방법1
object.name = "kim";
object.number = 1;
object.func = func2();
object.data.property = 2;
이렇게 생성한 프로퍼티의 값들은 해당 객체에 접근하여 다른 값을 대입하고 사용할 수 있습니다.
속성 접근 방법2
object[name] = "string";
object[number] = 1;
object[func] = func2();
object[data[property]] = 2;
배열처럼 대괄호 안에 프로퍼티를 적어서 접근하는 것도 가능합니다.
자바스크립트에서 지원하는 기본 객체 생성자인 Object() 생성자를 이용하는 방법입니다. object에는 빈 객체를 먼저 대입하고 프로퍼티를 추가해야 합니다.
예시
var object = new Object();
object.name = "name";
object.number = 6;
사용자가 직접 생성자 함수를 정의하여 그 함수를 이용해 객체를 생성하는 방법입니다.
예시
// 생성자 함수
function NewObj(name, number) {
this.name = name;
this.number = number;
}
// 객체 생성
var object1 = new NewObj("name", 6);
var object2 = new NewObj("string", 1);
위와 같이 인스턴스를 생성하여 객체를 생성하고 있습니다. 객체 리터럴과는 다르게 객체를 생성할 때마다 인자 값을 변경할 수 있습니다. 만들어진 object1과 object2에 연결 연산자('.')를 이용해 접근하여 각각의 프로퍼티를 사용할 수 있습니다.
[JavaScript] 자바스크립트 이벤트의 정의와 이벤트 등록 방법 (0) | 2020.10.24 |
---|---|
[JavaScript] 자바스크립트로 DOM 접근하기 (2) | 2020.10.23 |
[JavaScript] 자바스크립트 클로저의 의미와 사용하는 이유 (0) | 2020.10.22 |
[JavaScript] 자바스크립트 콜백(callback)함수란? (0) | 2020.10.12 |
[JavaScript] 자바스크립트 JSON의 정의와 메서드 (0) | 2020.10.02 |