자바스크립트 코딩 기법과 핵심 패턴 - 객체 리터럴

객체 리터럴

자바스크립트에서 객체 라고 하면 단순히 이름-쌍 해시 테이블을 생각하면 된다. 다른 언어에서 연관배열이라 불리는것과 유사하다.

빈 객체를 정의해놓고 기능을 추가해 나갈 수도 있다. 객체 리터럴 표기법은 이처럼 필요에 따라 객체를 생성할 때 이상적이다.

다음 예제를 보자.

// 빈 객체에서 시작한다.

var dog = {};

// 프로퍼티 하나를 추가한다.

dog.name = "Benji";

// 이번에는 메서드를 추가한다.

dog.getName = function(){

return dog.name;

}

console.log(dog.getName());

• 프로퍼티와 메서드 값을 변경할 수 있다.

dog.getName = function(){

// 메서드가 하드코딩된 값을 반환하도록 재정의한다.

return "Fido";

}

• 프로퍼티나 메서드를 완전히 삭제한다.

delete dog.name;

• 다른 프로퍼티나 메서드를 추가한다.

dog.say = function(){

return "Woof!";

}

dog.fleas = true;

반드시 빈 객체에서 시작해야 하는 것은 아니다. 객체 리터럴 표기법을 쓰면 다음 예제처럼 생성 시점에 객체에 기능을 추가할 수 있다.

var dog = {

name : "Benjo",

getName : function(){

return this.name;

}

};

객체 리터럴 문법

• 객체를 중괄호( { 와 } )로 감싼다.
• 객체 내의 프로퍼티와 메서드를 쉼표(,)로 분리한다. 마지막 이름-값 쌍 뒤에 쉼표가 들어가면 IE에서는 에러가 발생하므로, 마지막에는 사용하지 말아야 한다.
• 프로퍼티명과 프로퍼티 값은 콜론으로 분리한다.
• 객체를 변수에 할당할 때는 닫는 중괄호 뒤에 세미콜론을 빼먹지 말아야 한다.

생성자 함수로 객체 생성하기

자바스크립트에도 자바와 같은 클래스 기반 객체 생성과 비슷한 문법을 가지는 생성자 함수가 존재한다.

객체를 생성할 때는 직접 만든 생성자 함수를 사용할 수도 있고, Object(), Date(), String() 등 내장 생성자를 사용할 수도 있다.

다음 예제는 동일한 객체를 생성하는 두가지 방법을 보여준다.

// 첫 번째 방법 - 리터럴 사용

var car = {goes : "far"}

// 다른 방법 - 내장 생성자 사용

// 경고 : 이 방법은 안티패턴이다.

var car = new Object();

car.goes = "far";