본문으로 바로가기

객체(Object) 리터럴 방식의 클래스




문법


var 인스턴스 = {
프로퍼티 : 초기값,
. . .
메서드 : function(){
. . .
}
}



특징 (객체 리터럴일 경우를 일컫는다.)

1) 인스턴스를 만드는 구문을 작성하지 않아도 되는 장점이 있습니다.

인스턴스를 만드는 구문

var 인스턴스 = new 클래스이름();

객체 리터럴 방식은 정의함과 동시에 인스턴스가 자동으로 만들어지기 때문에 인스턴스를 만드는 구문을 작성하지 않아도 되는 장점이 있습니다.


2) 이에 반면 인스턴스를 여러 개 만들 수 없는 단점이 있습니다.

예를 들어 여러 개의 탭 메뉴가 있을 경우

객체 리터럴 방식의 클래스 방법을 사용할 경우 인스턴스가 자동으로 생성되기 때문에 코드의 재사용성이 떨어지는 단점을 가지고 있습니다.




주 용도는 여러 개의 데이터 포장용

객체 안의 데이터를 만들어서 인스턴스로 전달하는 역할만 한다.


실무에서 객체 리터럴은 다음과 같이 사용되고 있습니다.


var $ch=$("#ch1");
$ch.css("position","absolute");
$ch.css("left",100);
$ch.css("top",100);

/* 객체 리터럴 방식 */
var $ch=$("#ch1");
$ch.css({
position:"absolute",
left:100,
top:100

})




다음의 예제는 사용자 이름, 아이디, 별명, 나이, 주소를 매개변수 값으로 받아서 콘솔창에 출력하는 함수입니다.


1) 방법  - 객체 리터럴 사용 전


/* 객체 리터럴 사용 전 */
function showInfo(userName, id, nickName, age, address) {
console.log("name = " + userName, "\nid = " + id, "\nnickName = " + nickName, "\nage = "
+ age, "\naddress = " + address);
}

showInfo("김재희", "jaehee", "재야", 20, "잠실");




2) 방법  - 객체 리터럴 사용 후 


/* 객체 리터럴 사용 후 */
var userInfo = {
userName : "재희",
id : "jaehee",
address : "잠실",
age : 20,
nickName : "재야"
};

// 함수에서 객체 리터털의 데이터를 받도록 합니다.
function showInfo(info) {
console.log("name = " + info.userName, "\nid = " + info.id, "\nnickName = " + info.nickName,

"\nage = " + info.age, "\naddress = " + info.address);
}

// 함수 호출에 객체 리터럴 데이터를 넘겨줍니다.
showInfo(userInfo);




3)  방법 - 객체 리터럴 방식에 extend 를 적용


/* 객체 리터럴방식에 extend 적용  */

// 기본 사용자 정보 값을 설정합니다.
var defaults = {
userName : '미정',
id : '아이디??',
age : 0,
address : "어디에 사세요?",
nickName : ""
}

// 사용자 정의의 정보 갑을 설정합니다.
var userInfo = {
userName : "김재희",
id : "jaehee",
address : '잠실'
}

// 함수에서 데이터 사용을 위한 로직
function showInfo(info) {
// 기본 사용자 정보와 사용자 정의된 정보를 합치기(확장)
info = $.extend({}, defaults, userInfo);
console.log("name = " + info.userName, " id = " + info.id, "nickName = " + info.nickName,

" age = " + info.age, " address = " + info.address);
}

// 함수 호출(사용자 정의 정보값 전달)

showInfo(userInfo);



Jaehee's WebClub



댓글을 달아 주세요

  1. ㅇㅇ 2020.05.21 11:57

    와.. 모던 자바스크립트 고작 4챕터까지만 읽었는데 멘붕와서 구글링 엄청했네요 하도 이해 안돼서 역자 문제인줄알았는데 그냥 용어자체가 생소한거였네요 ㅋㅋㅋ