Call by reference와 Call by value

변수의 조작

자바스크립트는 세가지 주요한 방식을 통해 데이터의 값을 조작할 수 있다.

  1. 값을 새로운 변수에 할당하여 사용할 수 있다.
  2. 값을 함수나 메서드의 전달인자로 넘겨줄 수 있다.
  3. 데이터의 두 값이 동일한지를 알아보기 위해 한 값과 다른 값을 비교할 수 있다.

이러한 데이터 값을 조작하는 방식은 2가지로 나뉘는데, 그것이 기본형 데이터(값에 의한-by value)참조형 데이터(by-reference) 이다.

기본형 데이터(값에 의한-by value)

종류- Number, String, boolean, null, undefined

기본형 데이터를 조작할 때 가장 중요한 것은 데이터 값이다. 값을 할당할 때에 기본형 데이터의 경우 실제 그 값이 복사되며, 복사시 해당 데이터는 변수, 객체 프로퍼티, 배열 원소에 저장되어 원본 데이터와는 별도의 독립적인 값이 된다. 따라서 값을 변경한다고 하여 원본 데이터에는 아무런 영향을 미치지 않는다.

1
2
3
4
5
var original = 1;
var copy = original;
original = 2;
console.log(original); //result : 2
console.log(copy); //result : 1

위의 소스에서 보면 ‘original’ 이라는 변수에서 값을 할당한 후, ‘copy’ 라는 변수에 ‘original’ 변수의 값을 복사하였다. 그 후 원본 ‘original’ 변수의 값을 바꾸고 나서 값을 보면 원본은 변경이 되었지만 ‘copy’ 라는 변수의 값은 변경되지 않았다.

이러한 데이터는 함수 내에서 값을 변경하면 함수에 전달된 데이터만 변경될 뿐 함수 전달된 원본 복사본에는 아무런 영향을 미치지 않는다.

1
2
3
4
5
6
7
8
9
// input your code herevar original = 1;
var copy = original;
function add(x,y){
return x = x +y;
}
add(original, copy);

console.log(original); //result : 1
console.log(copy); //result : 1

참조형 데이터(by-reference)

종류- Object, Array, function

참조형 데이터의 경우는 값에 대한 실제 복사본이 오직 하나만 존재하며, 참조형 데이터는 그 값의 주소를 말 그대로 참조 할 값의 복사본이나 값 자체가 할당되지 않는다. 참조에 의해 할당된 새 변수는 원본 변수가 가르키는 값과 동일한 값을 가르킨다. 원본 변수와 할당된 변수는 모두 동등하며, 값을 조작하는데 사용될 수 있다. 그래서 할당된 변수(참조)가 변경되면 원본 변수에서도 동일하게 변경된다.

1
2
3
4
5
6
var original = [1,2,3,4,5];
var copy = original;

copy[0] = undefined;
console.log(copy); //result : [undefined, 2, 3, 4, 5]
console.log(original); //result : [undefined, 2, 3, 4, 5]
현재 이커머스회사에서 frontend 개발자로 업무를 진행하고 있는 Martin 입니다. 글을 읽으시고 궁금한 점은 댓글 혹은 메일(hoons0131@gmail.com)로 연락해주시면 빠른 회신 드리도록 하겠습니다. 이 외에도 네트워킹에 대해서는 언제나 환영입니다.:Martin(https://github.com/martinYounghoonKim
겸손한 자바스크립트
VueJS란 무엇인가?