[JS]Function(함수) part.3

JS에서의 CallByValue와 CallByReference는 Java와 동일하다.

 

 

1) CallByValue

var param=100,args=1;

//CallByValue]-값에 의한 호출.값이 전달

function callByValue(param,args){//매개변수 param,args는 지역변수
  var temp =param;
  param = args;
  args = temp;
  console.log('callByValue함수 안:param-%s,args-%s',param,args);
  }
   
window.callByValue(param,window.args);
console.log('callByValue함수 밖:param-%s,args-%s',window.param,window.args);

▲ 값을 전달하는 CallByValue는 함수안에서만 값이 스와핑되고 외부에서는 기존 값 그대로 출력된다.

 

 

 

2) CallByReference

//CallByReference]-참조에 의한 호출.값이 아닌 객체의 주소 전달.

var array = [100,1];
var callByRef= function(arr){
	var temp = arr[0];
    arr[0]=arr[1];
    arr[1]=temp;
    console.log('callByRef함수 안:arr[0]-%s,arr[1]-%s',arr[0],arr[1]);
   };
   
window.callByRef(array);
console.log('callByRef함수 밖:array[0]-%s,array[1]-%s',array[0],array[1]);

 

 

 

---

 

//※지역변수와 전역변수 충돌시 지역변수가 우선

var mVar =100;//전역 변수
function conflict(mVar){//매개변수는 지역변수
   //mVar = mVar*2;//매개변수 = 매개변수 *2
   console.log(this);//this는 window객체
   this.mVar = mVar*2;//this.mvar는 함수밖의 전역변수를 지칭한다
   console.log('conflict 함수 안:',mVar);
  }

conflict(mVar);
console.log('conflict 함수 밖:',mVar);

▲  Java는 block scope 즉, { }블락을 기준으로 지역변수와 전역변수가 나뉘는 반면에 JS는 함수 안과 밖을 기준으로 나뉘기 때문에 function scope 즉, 함수스코프라고 한다.

 

위 코드에서 var mVar는 함수 밖에서 선언되었으므로 전역변수 즉 해당 페이지 어디에서든지 사용가능한 변수이다. 하지만 함수 conflict의 매개변수는 해당 함수안에서만 사용가능한 지역변수이다. 변수 이름이 똑같기 때문에 헷갈릴 수 있다.

 

이럴 때 this를 사용해서 어디소속의 변수인지를 명확히 할 수 있다. 현재 함수안에서의 this는 해당 함수를 호출한 곳 즉, window가 된다. 따라서 this.mVar는 window.mVar와 동일하므로 this.mVar는 함수가 호출이 될 때 window객체의 속성이 되므로 함수 밖에서 선언된 mVar를 가리킨다.

 

▲함수내에 있는 this는 window객체이며 따라서 함수안에서의 mVar는 매개변수로 받은 100이되고, 함수를 호출한 뒤에는 mVar가 함수내의 연산결과에 의해 200이 되므로 함수밖에서 mVar는 200이 된다.

 

 

 

---

 

 //참조에 의한 호출 예제]

var member=[];
function setMember(numberOfMember,member){
   for(var i=0;i < numberOfMember;i++){
       member.push(prompt(i+1+'번째 이름 입력?',''));
       member.push(prompt(i+1+'번째 나이 입력?',''));
       member.push(prompt(i+1+'번째 주소 입력?',''));
      }
    }
    
var numberOfMember=parseInt(prompt('인원을 입력하세요?',1));
setMember(numberOfMember,member);
member.forEach(function(item){
  console.log(item);
})

▲ 사용자에게 인원을 입력받고 입력받은 인원수만큼 이름,나이,주소를 다시 입력받아서 member배열에 누적한다.