Javascript Cookbook

함수에 복잡한 데이터 객체 전달하기

문제

함수에 더 복잡한 데이터를 전달해야 한다.

해결

배열과 같은 객체를 함수의 인수로 사용한다.

function makeHello(name){
    name[name.length] = "Hello " + name[0] + " " + name[1];
}
var name = new Array('Ima', 'Reader');
makeHello(name);
alert(name[2]);     //'Hello Ima Reader' 표시

'makeHello' 함수에는 배열이 전달되었는데, 이 함수는 값을 반환하지 않는다. 그러나 객체는 함수에 참조로 전달되기 때문에 함수에서 만들어진 값이 배열에 추가되었고 함수를 호출한 프로그램은 이 값을 사용할 수 있다.

설명

문자열이나 숫자는 값으로 전달되는데, 이는 곧 함수에 복사된 값이 전달된다는 뜻이다. 따라서 함수 안에서 인수를 바꾸어도 호출한 프로그램에는 반영되지 않는다. 반면 객체는 참조로 전달되기 때문에 함수안에서 인수를 바꾸면 호출한 프로그램에도 반영된다.

아래 코드는 문자열이나 숫자와 복잡한 객체를 함수 인수로 사용했을 때의 차이점을 보여준다. 예제의 함수는 두 개의 인수를 받는데, 각각 문자열 리터럴과 배열이다. 두 개의 인수는 모두 함수 안에서 수정되며, 그 결과 배열에는 함수에서 변경된 내용이 반영된 반면 문자열 인수에는 변경된 내용이 반영되지 않아서 구분자는 여전히 별표(*)로만 구성된다.

<!DOCTYPE html>
<html>
  <head>
    <script>
      window.onload = function(){
        var items = new Array('apple','orange','cherry','lime');
        var sep = '*';
        concatenateString(items,sep);
        alert(items);
        alert(sep);
      }

      function concatenateString(strings,separator){
        var result = "";
        for(var i=0; i<strings.length; i++){
          result += strings[i] + separator;
        }

        //결과를 separator에 할당
        separator = result;

        //배열에도 할당
        strings[strings.length] = result;
      }

    </script>
  </head>
  <body>
  </body>
</html>

예제보기 http://embed.plnkr.co/GXsVysYNNwVNfsrf5UeC/preview