객체

자바스크립트 객체는 이름이 지정된 값(키-값의 쌍)의 모음을 나타낸다. 보통 객체의 값을 객체의 프로퍼티(property)라고 한다. 자바스크립트 객체의 프로퍼티에는 함수, 배열, 다른 객체를 비롯해 어떤 타입의 데이터도 담을 수 있다.

Object() 생성자를 이용한 자바스크립트 객체 생성

자바스크립트 객체는 Object() 생성자 함수를 호출해 생성할 수 있으며, 객체를 생성하고 나면 점(.) 연산을 이용해 해당 객체에 프로퍼티를 추가하거나 삭제할 수 있다. 다음 예제를 보자.

var object1 = new Object();         // 빈 객체 생성
object1.name = "itinpractice.com";  // 프로퍼티 추가
console.log(object1.name);          // itinpractice.com
delete object1.name;                // 프로퍼티 삭제
console.log(object1.name);          // undefined

점(.) 대신 대괄호([])로도 자바스크립트 객체의 프로퍼티에 접근할 수 있다. 다음 예제를 보자.

var object1 = new Object();             // 빈 객체 생성
object1['name'] = "itinpractice.com";   // 프로퍼티 추가
console.log(object1['name']);           // itinpractice.com
delete object1['name'];                 // 프로퍼티 삭제
console.log(object1['name']);           // undefined

리터럴 문법을 이용한 자바스크립트 객체 생성

리터럴 문법을 이용해 자바스크립트 객체를 생성한 후 해당 객체의 프로퍼티를 지정할 수도 있는데, 객체 리터럴은 객체 초기화자(initializer)라고도 한다.

객체 리터럴은 콜론으로 분리된 키-값의 쌍을 콤마로 분리한 목록으로 구성되며, 이것들은 모두 중괄호로 감싼다. 예를 들어, 다음과 같이 빈 자바스크립트 객체를 생성한다.

var object1 = {};                       // 빈 객체 생성
object1['name'] = "tom";                // 프로퍼티 추가
console.log(object1['name']);           // tom
delete object1['name'];                 // 프로퍼티 삭제
console.log(object1['name']);           // undefined

아울러 다음과 같이 중첩된 자바스크립트 객체를 생성할 수도 있다.

var user = {
    name: "tom",
    id: 123,
    address: {
        city: 'San Francisco',
        street: '101 street'
    },
    email: ''
};          
console.log(user.name);         // tom
console.log(user.address.city); // San Francisco

생성자 함수와 "new" 연산자

자바스크립트 객체를 생성하기 위해 "new" 연산자와 함께 생성자 함수를 호출할 수도 있다. 다음 예제를 보자.

function User(name){
    this.name = name;
    this.id = 123;
    this.sayHello = function(){
        console.log("Hello, I am " + name);
    };
};

var user1 = new User("Tom");    
var user2 = new User("Jerry");  

user1.sayHello();   // Hello, I am Tom
user2.sayHello();   // Hello, I am Jerry

생성자 함수는 다음과 같은 단계를 거친다.

참고: 어떤 함수가 "new" 연산자와 함께 자바스크립트 객체를 생성하는 데 사용되면 대개 해당 함수의 첫 번째 글자는 대문자로 쓴다.

생성자 함수가 객체를 반환하면 this는 무시된다.

function User(name){
    this.name = name;
    return {name: "Jerry"};
};

var user1 = new User("Tom");    
console.log(user1.name);        // Jerry

존재하지 않은 프로퍼티에 접근하기

자바스크립트 객체의 프로퍼티에 접근하려고 시도해볼 수 있는데, 만약 프로퍼티가 존재하지 않으면 undefined가 반환된다.

var user = {};                  // 빈 객체를 생성
console.log(user.name);         // undefined

프로퍼티가 존재하는지 검사하기

자바스크립트 객체에 프로퍼티가 존재하는지 검사하기 위해 "in" 연산자를 사용할 수 있다. 다음 예제를 보자.

var user = {name:'Jack'};       
console.log('name' in user);        // true
console.log('address' in user);     // false

객체의 프로퍼티 순회하기

for…in 문법릉 이용해 자바스크립트 객체의 모든 프로퍼티를 나열할 수 있다. 다음 예제를 보자.

var user = {
    name: "tom",
    id: 123,
    address: {
        city: 'San Francisco',
        street: '101 street'
    },
    email: ''
};          
for (var key in user){
    console.log("key = " + key + ", value = " + user[key]);
}

실행 결과는 다음과 같다.

key = name, value = tom
key = id, value = 123
key = address, value = [object Object]
key = email, value =

객체 참조

객체를 변수에 할당할 때 해당 변수는 객체에 대한 참조를 유지한다. 이 변수를 사용해 객체의 프로퍼티를 변경하면 객체를 참조하고 있던 다른 곳에도 영향을 미친다. 다음 예제를 보자.

var user = {
    name: "tom",
    id: 123,
};
var user2 = user;
user2.name = "Jack";
console.log(user.name);     // Jack

객체를 함수에 인자로 전달할 경우 값이 아닌 참조가 전달된다. 다음 예제를 보자.

var user = {
    name: "tom"
};
function changeName(obj){
    obj.name = "Jack";
}
changeName(user);
console.log(user.name);     // Jack, 이름이 바뀜

함수에 원시 값을 인자로 전달하면 값이 전달되고, 값이 바뀌어도 다른 값에는 영향을 주지 않는다. 다음 예제를 보자.

var user = "Tom";
function changeName(val){
    val = "Jack";
};
changeName(user);
console.log(user);      // Tom, 이름이 바뀌지 않음

객체 메서드

자바스크립트 객체에는 함수를 저장할 수도 있는데, 이러한 함수를 보통 메서드(method)라 한다.

var user = {
    name: "tom and jerry",
    changeName: function(){
        this.name = this.name.toUpperCase();
    },
    printName: function(){
        console.log(this.name);
    }
};
user.changeName();
user.printName();   // TOM AND JERRY

객체로부터 어떤 메서드가 호출될 경우 this는 해당 객체에 대한 참조가 된다.

관련 수업

← 이전홈다음 →