객체리터럴-리터럴과 생성자

게시자: 대문 demun 카테고리: 퍼블리셔/javascript 2014.05.29 06:00

리터럴과 생성자

Object() 나 Array() 등의 내장 생성자 함수에 비해 리터럴 표기법을 쓰는 게 더 좋다.
왜 좋은지는 아래글에서 보기 바란다.

객체 리터럴

자바스크립트에서 '객체'라고 하면 단순히 이름-값 쌍의 테이블을 생각하면 된다. 객체 리터럴 표기법은 아래처럼 객체를 생성할때 이상적이다.

// 빈 객체에서 시작한다.
var dog = {};

// 프로퍼팉 하나를 추가한다.
dog.name = "Benji";

// 이번에는 메서드를 추가한다.
dog.getName = function () {
    return dog.name;
};

이 예제는 빈 객체에서 시작해서 프로퍼티와 매서드를 추가하면서 많은 변화를 줄 수 있다.

// 프로퍼티와 매서드 값을 변경할 수 있다.
dog.getName = function () {
    // 매서드가 하드코딩된 값을 반환하도록 재정의한다.
    return "Fido";
};

// 프로퍼티나 매서드를 완전히 삭제한다.
delete dog.name;

// 다른 프로퍼티나 매서드를 추가한다.
dog.say = function () {
    return "Woof!";
};
dog.fleas = true;

객체 리터럴 표기법을 쓰면 다음 예제처럼 생성 시점에 객체에 생성 시점에 기능을 추가할 수 있다.

var dog = {
    name: "Benji",
    getName: function () {
        return this.name;
    }
};

객체 리터럴 문법

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

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

객체를 생성할 때는 직접 만든 생성자 함수를 사용할 수도 있고, Object(), Date(), String() 등 내장 생성자를 사용할 수도 있다.
다음 예제는 동일한 객체를 생성하는 두가지 방법을 보여준다.

// 리터럴 사용
var car = {goes: "far"};


// 다른방법 - 내장 생성자 사용
// 경고:안티패턴
var car = new Object();
car.goes = "far";

보다시피 객체 리터럴 표기법의 장점은 더 짧다는 거다.
리터럴 표기법을 쓰면 유효범위 판별 작업도 발생하지 않는다.

객체 생성자의 함정.

객체 생성자를 사용할 필요가 없다고 말하지만, 코드를 물려받을수도 있기 때문에 알아두어야 한다.
생성자를 물려 받으면 생성자뿐만 아니라 인자까지 물려 받는다는 점이다.
인자로 전달되는 값에 따라 생성자 함수가 다른 내장 생성자에 객체 생성을 위임할 수 있고, 따라서 기대한 것과는 다른 객체가 반환되기도 한다.

결론적으로 new Object() 를 사용하지 마라는 이야기다. 더 간단하고 안정적인 객체 리터럴을 사용하라.

출처 : JavaScript Patterns


신고

댓글