Javascript의 Array 의 concat, $.extend 메소드 알아보기

참조링크 => 라셍님 블로그

Javascript의 Array 타입이 제공해주는 기본 메소드 중에서 유용한 메소드인

push, concat 

에 대하여 알아보고, jQuery의 extend를 이하여 배열을 합친것과 concat의 차이점을 알아보자.

우선 기본적인 Array 타입의 형태를 알아보자.

// 영화 Object 선언
	var shiri = { name: '쉬리', year: '1998' };
	var oldboy = { name: '올드보이', year: '2003' };
	var myway = { name: '마이웨이', year: '2011' };
	var masqurade = { name: '광해', year: '2012' };
	var ironman3 = { name: '아이언맨3', year: '2013' };
	
	// array 형식 직접생성
	var arr1 = [];
	// 배열을 이용한 간접 생성
	var arr2 = new Array(2);
	
	// arr1에 데이터 입력
	arr1.push(shiri);
	arr1[1] = oldboy;
	arr1.push(myway);
	
	// 결과 : [Object, Object, Object]
	console.log(arr1);
	
	arr2[0] = shiri;
	arr2.push(masqurade);
	var index = arr2.push(ironman3);
	
	// 결과 : 4
	console.log(index);
	// 결과 : [Object, 2: Object, 3: Object]
	// push 로 데이터를 입력하면 현재 존재하는 배열의 마지막에 값을 추가한다.
	console.log(arr2);
	
	
	
	// 결과 :[Object, Object, Object, Object, 5: Object, 6: Object]
	// concat 은 배열의 데이터를 합쳐서 새로운 배열을 만든다.
	console.log(arr1.concat(arr2));
	// 결과 : [Object, Object, Object]
	console.log(arr1);
	// 결과 : [Object, 2: Object, 3: Object]
	console.log(arr2);
	
	
	
	
	// 결과 : [Object, Object, Object, Object]
	// $.extend 를 사용하여 배열을 합치면 기존의 배열에 값을 복사하고, 
	// 값들을 비교하여 중복된 값을 제거한다. 
	console.log($.extend(arr1, arr2));
	// 결과 : [Object, Object, Object, Object]
	console.log(arr1);
	// 결과 : [Object, 2: Object, 3: Object]
	console.log(arr2);

위의 결과에서 주목할 것은 3가지가 있다. 

우선 push로 데이터를 입력한 것과 [0] 처럼 배열의 인덱스를 직접 지정하여 데이터를 입력한 것의 차이다. 

push는 현재 배열 인덱스에 1을 추가하고 값을 입력한다. 따라서 arr2 의 결과처럼 arr2[1]의 결과값이 비게 되는 것이다. 

두번째는 concat 로 배열을 합치면 현재 배열의 값을 복사하여 새로운 배열을 생성하는 것이다. 

arr1, arr2를 합친 배열의 결과값이 변하지 않은 것을 확인할 수 있다. 

세번째는 $.extend 를 이용하여 배열을 합치면 각 배열의 중복값을 제거하고 배열을 생성한다는 것이다. 

물론 $.extend의 첫번째 인자로 빈 배열을 입력할 수도 있겠지만, extend를 이용하면 배열의 중복값이 제거 된다는 것을 알아야 하겠다. 

마지막으로 concat, $.extend 는 기본적으로 얕은 복사다. Object 를 이용했을 때 잘 구분해서 처리해야 하겠다. 

concat과 $.extend를 비슷하다고 생각하겠지만 결정적인 차이가 있기 때문에 잘 구분해서 사용해야 하겠다.