아무생각없이 변수를 초기화시켰는데, 더이상 AngularJS에서 값을 추적하지 못하는 경우 혹은, 다른 용도로 사용하기위해 배열 중 일부 요소를 다른 변수에 복사해서 변경했는데, 원본까지 변경되는 경우를 만날 수 있다.
JavaScript 코딩을 할 때에도 종종 만나는 상황이지만, AngularJS는 $scope에 할당된 변수에 대해 계속해서 observe 하고 있기 때문에 더욱 주의해야할 필요가 있다. 이런 현상이 일어나는 원인을 이해하기 위해서는 C를 배울때 우리를 골치 아프게 했던 이른바 포인터 개념을 먼저 이해하고 있어야 한다.
call by reference, call by value
간단한 숫자나 boolean 등 primitive type (undefined, null, boolean, number, string) 은 굳이 레퍼런스(메모리 주소)를 전달하기 보다는 그냥 값을 전달하는 것이 자바스크립트 엔진 입장에서도 훨씬 수월하다. 하지만 call by reference가 성립될 수 있는 변수의 타입인 객체(Object)의 경우에는 숫자나 boolean에 비해 워낙 구조가 크기 때문에 값을 전달하기보다는 레퍼런스를 전달하는 것으로 처리된다.
일반적으로 숫자나 boolean처럼 직접 값을 전달하는 경우를 Deep Copy, 문자열이나 객체처럼 레퍼런스만 전달하는 경우를 Shallow Copy 라고 칭한다. 그런데 종종 문자열이나 객체의 경우에도 Deep Copy가 필요한 경우가 생기는데, 이때 사용할 수 있는 것이 angular.copy 이다.
다시 정리하면 아래와 같다.
마치며
Deep Copy와 Shallow Copy의 개념에 대해서 명확히 이해할 수 있었기를 기대한다.
참고
http://stackoverflow.com/questions/184710/what-is-the-difference-between-a-deep-copy-and-a-shallow-copy
http://stackoverflow.com/questions/728360/most-elegant-way-to-clone-a-javascript-object
JavaScript 코딩을 할 때에도 종종 만나는 상황이지만, AngularJS는 $scope에 할당된 변수에 대해 계속해서 observe 하고 있기 때문에 더욱 주의해야할 필요가 있다. 이런 현상이 일어나는 원인을 이해하기 위해서는 C를 배울때 우리를 골치 아프게 했던 이른바 포인터 개념을 먼저 이해하고 있어야 한다.
call by reference, call by value
간단한 숫자나 boolean 등 primitive type (undefined, null, boolean, number, string) 은 굳이 레퍼런스(메모리 주소)를 전달하기 보다는 그냥 값을 전달하는 것이 자바스크립트 엔진 입장에서도 훨씬 수월하다. 하지만 call by reference가 성립될 수 있는 변수의 타입인 객체(Object)의 경우에는 숫자나 boolean에 비해 워낙 구조가 크기 때문에 값을 전달하기보다는 레퍼런스를 전달하는 것으로 처리된다.
일반적으로 숫자나 boolean처럼 직접 값을 전달하는 경우를 Deep Copy, 문자열이나 객체처럼 레퍼런스만 전달하는 경우를 Shallow Copy 라고 칭한다. 그런데 종종 문자열이나 객체의 경우에도 Deep Copy가 필요한 경우가 생기는데, 이때 사용할 수 있는 것이 angular.copy 이다.
다시 정리하면 아래와 같다.
Shallow Copy
말 그대로 레퍼런스를 복사하는 경우이다. C언어에서 흔히 포인터값만 넘기는 경우와 같다. 다른 용도로 사용하기 위해 배열 중 일부를 가져왔을 때 Shallow Copy가 될 확률이 높으며 이 경우 원하는 대로 동작하지 않을 수 있다.
이 때에는 angular.copy API를 활용해서 복사를 해주면 Shallow Copy가 아닌 Deep Copy를 수행할 수 있다.
Deep Copy
레퍼런스가 아니라 내용을 복사하는 경우이다. 앞서 언급한 것처럼 angular.copy 를 사용하면 Deep copy를 할 수 있다.
마치며
Deep Copy와 Shallow Copy의 개념에 대해서 명확히 이해할 수 있었기를 기대한다.
참고
http://stackoverflow.com/questions/184710/what-is-the-difference-between-a-deep-copy-and-a-shallow-copy
http://stackoverflow.com/questions/728360/most-elegant-way-to-clone-a-javascript-object
