먼저 Parameter와 Arguments의 차이를 알아보자면 Parameter는 함수 선언부에서, Arguments는 함수 호출부에서 사용된다.

var a = 1;
function test(b) {  // Parameter
    b = b+1;
}
test(a);  // Arguments


CallByValue

: Arguments의 값을 복사하여 함수로 전달한다.
var a = 10;
function add(b) {
    b = b + 10;
    console.log(b); // 20
}
add(a); 
console.log(a); // 10

마지막 log에서 10이 출력되는 이유는 무엇일까? 


 그것은 add함수를 호출할 때 a의 값을 "복사"하여 전달하기 때문이다. add함수의 b는 a의 복사된 값이기 때문에 b에 10을 더하더라도 a에게는 영향을 미치지 않기때문에 10이 출력되는 것이다. 


 기본적으로 자바스크립트에서는 함수를 호출할 때 기본형(number, string, boolean, null, undefined)을 Arguments로 사용하면 CallByValue방식으로 함수가 호출된다. 


CallByReference

: Arguments의 참조값을 함수로 전달한다.
var a = { };
function add(b) {
    b.test = 1;
} 
add(a);
console.log(a.test); // 1

add함수를 호출할 때 a의 참조값을 전달하였기 때문에 add함수에서 새로운 프로퍼티를 추가하면 a에도 적용되는 것을 확인해 볼 수 있다. 정확히 말하자면 a의 참조값을 전달하는 것이 아니라 a의 참조값을 복사한 뒤 전달한다. 


var a = {};
function change(b) {
    b = 1;
    console.log(b); // 1
}
change(a);
console.log(a); // {}

위의 예제를 하나씩 분석해보자.


[ 1 ]. a에는 {} 를 가리키는 0x12라는 참조값을 저장하고 있다.

[ 5 ]. change 함수를 호출하는데 a를 전달하는 것이 아니라 a가 저장하고 있는 0x12라는 참조값을 복사하여 arguments로 사용한다.

[ 2~4 ]. a의 참조값을 복사한값을 저장하는 새로운 변수 b에는 b=1를 실행하기 이전에는 a와 b모두 {} 를 가리키고 있다. 하지만 b = 1을 실행하면서 b에는 1을 가리키는 참조값 0x13이 저장된다.

[ 6 ]. 즉, change 함수에서는 0x12를 1로 가리키도록 바꾼 것이 아니라, b라는 변수에 1을 가리키는 참조값을 저장한 것이다. 따라서 a에는 변화가 없다.


자바 기본서나 여러책에서도 위와 같은 내용이 많이 나오니 참고바란다.












'웹 개발 > 자바스크립트' 카테고리의 다른 글

정규식 (작성중)  (0) 2018.04.25

+ Recent posts