웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > angularjs

angularjs 객체 복사 copy() 활용하기

Last Modified : 2017-08-07 / Created : 2017-02-22
7,340
View Count
AngularJS에서 객체를 복사하기 위하여 copy() 메소드를 사용할 수 있다. copy()메소드는 동일한 프로퍼티와 메소드를 가진 새로운 객체를 만들어 준다.

간단한 사용 방법은 아래와 같다.

var myFruit = angular.copy("fruit");

위 코멘드를 통해 새로운 객체 myFruit이 생성되게 된다. 그럼 아래에 더 자세하게 알아보자.


# 객체를 복사하는 이유

객체를 복사하는 이유는 무엇일까? 가장 큰 이유는 복사한 객체를 유지하거나 또는 일부 값을 변환하기 위함이다. 객체를 변수에 선언할 경우 참조가 일어나게 되어 원시값이 아닌 경우에는 그 값을 그대로 유지하기 어렵게 된다. 이때 변수를 선언하는 것이 아니라 새로운 객체로 복사하는 방법이 사용된다.


# angularjs copy() 예제보기

그럼 간단한 예제를 통해 copy()가 어떻게 동작하는지 알아보자. 아래의 fruit 객체는 다양한 정보를 가지고 있는데 동일한 내용이 필요한 book이라는 객체가 있다고 가정해보자.

book 역시 사용될 아이템 정보와 함수들을 담으며 이를 새로 선언하는 것 보다 기존의 fruit객체를 복사하고 아이템만 변경하는 것을 생각해 볼 수 있다.

var fruit = {
  item: [ "banana", "apple", "strawberry"],
  getItem: function() {
return this.item;
  }
};

위 객체를 이제 복사해보자.

// 새로운 book객체를 기존 fruit을 사용하여 복사
var book = angular.copy(fruit);
book.item = [ "html", "css", "js" ];

이제 위 book 객체는 기존의 apple의 프로퍼티와 메소드들을 모두 카피하여 사용할 서 있다.

사실 생성자를 만들어 사용하는 것이 당연할 수 있거나 예를들기 위하여 사용하였으며 기존의 코드를 변경하지 않거나 추가될 객체가 하나, 둘인 경우 즉, 많지 않은 경우 위 방법이 사용될 수 있다.

Previous

ng-class 속성 사용하기 ngClass 디렉티브 사용방법

Previous

AngularJS에서 jsonPadding 실행시 undefined 에러가 나는 경우