ToWis.net(블러그 정리중 40% 완료)

제목 그대로 함수의 값을 넘길 때 객체를 만들어 넘긴다는 말입니다.
이런 방법은 이미 많은 Javascript의 Framework에서 사용되고 있는 방법입니다. 사실 특이할 것도 없습니다.
그리고 파라메터 변수를 객체로 넘긴다고 했는데... 정확히는 리터럴 형식으로 사용한다는 표현이 더 정확 할 것입니다.

일단 예제를 보면 아래와 같습니다.

function tTest1(param1,options){
	var print = "param1 : " + param1;
	print += "ZIP1 : " + options.zip1;
	print += "ZIP2 : " + options.zip2;
	print += "ADDRESS : " + options.address;
	print += "CNT : " + options.cnt;
    alert(print);
}

함수는 이렇게 만들고 이 함수에 값을 넘길 때 options에 객체를 넘기면 됩니다. 물론 options에 들어갈 properties는 알려 줘야 겠죠.(참고로 일반적인 Framework의 함수에 값을 넘길 때 이런 방법을 사용합니다. 그리고 저 options에 해당되는 명을 API로 알려줍니다.)

위와 같이 함수를 만들었다면 함수 호출을 아래와 같이 합니다.

fTest1(“값”,{
    zip1:’100’,
    zip2:’200’,
    address:’우리집’,
    cnt:3
});

어디서 많이 보던 방법이죠? var val = {x:1, x:2}; 바로 리터럴 형식입니다.
리터럴에 관해서는 간단히 언급 하고 넘어 가려고 했는데.... 이왕 언급이 되었으니 한번 집고 넘어가도록 하겠습니다.
2010.06.15 원래 여기 까지 언급 안하려고 했는데 ㅠ.ㅠ 쓰다보니 점점 늘어나네요.

용어상으론 이렇습니다.
일단 현재 작성하고 있는 내용이 자바스크립트이니 자바스크립트의 리터럴 형식에 대해 몇자 언급 하겠습니다. 사실 리터럴 형식에 대해 작성 하자면 그 내용 자체가 이 글과 성격이 맞지 않기 때문에 간단히 자바스크립의 리터럴 형식으로 설명하겠습니다.

자바스크립트에서 일반적으로 통용되고 있는 형식은 총 3가지 입니다.
배열 리터럴, 객체 리터럴, 혼합 리터럴 입니다.

소스 예제를 보여드리자면....
1. 배열 리터럴 형식

// 자바스크립트 배열 Array 생성자 이용
var aValues = new Array("string" , 24 , true , null);
// JSON 배열 표현식
var aNames = ["Benjamin" , "Michael" , "Scott"];

alert(aNames[0]); // Benjamin 출력
alert(aNames[1]); // Michael 출력
alert(aNames[2]); // Scott 출력

// 여러 가지 데이터 형식 저장
var aValues = ["string" , 24 , true , null ];

2. 객체 리터럴

// 자바스크립트 객체 Object 생성자 이용
var oCar = new Object();
oCar.color = "red";
oCar.doors = 4;
oCar.paidFor = true;

// JSON 객체 표현식
var oCar = {
  "color" : "red",
  "doors" : 4,
  "paidFor" : true
};

alert(oCar.color); // "red" 출력
alert(oCar.doors); // "4" 출력
alert(oCar.paidFor); // "true" 출력

// 또는

alert(oCar["color"]);
alert(oCar["doors"]);
alert(oCar["paidFor"]);

3. 혼합 리터럴

var aCars = [
  {
    "color" : "red",
    "doors" : 2,
    "paidFor" : true
  },
  {
    "color" : "blue",
    "doors" : 4,
    "paidFor" : true
  },
  {
    "color" : "white",
    "doors" : 2,
    "paidFor" : false
  }
];

일단 리터럴 형식까지 보여드렸고 다시 원점으로 돌아와서 이와같은 리터럴형식으로 값을 넘겼을때 좋은 점은 매개변수 활용성이 높아집니다. 뿐만 아니라 사람이 읽기도 편해지죠.... 그리고 함수 값의 변경시 사용하고 있는 함수에서 변경이 용이 하다는 점입니다.

예를 들어 위와 같이 리터럴형식으로 넘기지 않는다면 함수의 매개변수는 총 5개가 되고 만약 중간에 필요 없는 값이 있을 경우 null처리를 해서 값을 보내야 한다는 점입니다.

객체가 아닌 값을 넘겼다면 함수는 이렇게 만들어야 합니다.

function fTest1(param1, zip1,zip2,address,cnt){
//code...
}
fTest1(“값”,”100”,”200”,”우리집”,3)

뿐만 아니라 만약 함수의 매개변수 순서가 바뀐다면 그 함수를 부른 모든 값을 변경해야 합니다. 즉 함수를 선언한 매개변수 순서를 꼭 지켜야 한다는 말이죠. 하지만 리터럴 형식으로 값을 넘기면 그럴 필요도 없고 값이 빠지면 빠진 값만 undefined가 나옵니다.

만약 Jquery를 사용하면 extend라는 util을 통해서 객체로 넘어온 값을 합병해서 사용할 수도 있습니다.

Jquery를 사용한 객체 합병은 다음 포스트에서 다루도록 하겠습니다.