[제이쿼리] 배열 관련 메서드 : Programming Story

제이쿼리에는 배열을 다루는 메서드들이 있다. 오늘은 배열을 다루는 메서드와 이것을 언제 어떻게 사용하는지에 대해서 알아보겠다.

1. each() 메서드

var obj = [
			{"city":"Seoul"},
			{"city":"New York"},
			{"city":"Sydney"}
		];

위와 같은 배열이 있다고 해보자.

이러한 배열 이후에,

$(obj).each(function(i, o){
				console.log(i + ":", o);
		});

이런식의 코드가 있다고 하면 콘솔에서는 어떤 식으로 나올까?

결과는 위와 같이 나온다.

즉 여기서 function (i,o) 부분의 각각의 parameter가 의미하는 것을 생각해보면 i는 배열의 index를 의미하는 것을 알 수 있고, o는 배열에 저장된 객체 그 자체를 나타낸다고 볼 수 있다.

그렇다면, html 코드에서도 each()를 쓸 수 있을까?

쓸 수 있다.

<body>
	<h1>탐색 선택자</h1>
	<ul id="a1">
		<li>내용1-1</li>
		<li>내용1-2</li>
		<li>내용1-3</li>
	</ul>
	<ul id="a2">
		<li>내용2-1</li>
		<li>내용2-2</li>
		<li>내용2-3</li>
	</ul>
</body>

위와 같은 html 코드가 있다고 했을 때

만약 a2 안의 li 들에 대해서 console에 log를 찍어보고 싶다면 다음과 같이 하면 된다.

$.each($("#a2 li"), function(i,o){
   console.log(i,":", o);
   });

콘솔창에는 위와 같이 적히게 된다. 즉 여기서도 마찬가지로 i는 태그의 인덱스, o는 배열 객체를 의미한다는 것을 알 수 있다.

2. $.map() 메서드

사용법은 $.map(Array,function(매개변수 1, 매개변수 2){ return 데이터;});

이런 식으로 사용을 한다. 배열에 저장된 데이터의 수만큼 해당 method가 반복적으로 실행되는 것이다. 반복실행되면서 함수에서 반환된 데이터는 새 배열에 순서대로 저장이 되고, 새로 저장된 배열 객체를 반환해주는 메서드라고 할 수 있다.

여기서 매개변수 1에는 배열의 데이터가 저장되고, 매개변수 2에는 인덱스 값이 저장된다.

var array=[
			{
				"city":"Seoul",
				"name":"Kim"
			},
			{
				"city": "LA",
				"name":"Josh"
			},
			{
				"city":"Paris",
				"name":"Emily"
			}
		]

위와 같은 배열이 있다고 하자.

여기서 우리는 city가 Seoul인 사람만을 골라서 새로운 배열을 만들고 싶다. 그럴 때 map을 유용하게 사용할 수 있는 것이다.

var arr2 = $.map(array, function(a, b){
			if(a.city == "Seoul") {
				return a;
			}
		});
console.log(arr2);

이 경우에는 위의 식으로 코드를 작성할 수 있다.

보면 $.map(Array, function(매개변수 1, 매개변수2){

return 데이터;

});

라는 map의 기본형을 잘 따른 것을 알 수 있다.

이런식으로 해서 찍힌 콘솔의 값을 확인해보면,

예상한 대로 city가 Seoul인 사람만 새로운 배열에 잘 들어간 것을 확인할 수 있다.

3. $.grep() 메서드

grep() 메서드의 경우에도 map() 메서드처럼 배열에 저장된 데이터 수만큼 메서드가 반복 실행된다. 하지만 차이점은 이 경우 데이터를 반환하는 것이 아니라 true / false를 반환하여 반환값이 true인 경우에만 배열의 데이터가 새 배열에 저장이 된다는 차이점이 있다.

기본형은

$.grep(Array, function(매개변수 1, 매개변수2){

return [true|false];

});

grep을 사용하여도 map()과 같은 효과를 볼 수 있다.

var arr3 = $.grep(array, function(a, b){
			if(a.city == "Seoul") {
				return true;
			} else {
				return false;
			}
		});
console.log(arr3);

이런식으로 도시가 Seoul일때만 true를 반환해주면 같은 결과의 console 창을 볼 수 있을 것이다.

4. $.inArray() / $.isArray() / $.merge() 메서드

기타로 자주 쓰이는 메서드 세개를 추가로 소개하려고 한다.

1) $.inArray(data, Array, starting_index):

배열에 저장된 데이터 중 해당 데이터를 가장 먼저 찾은 데이터의 인덱스 값을 반환해줌. 즉, 해당 데이터가 배열의 어느 인덱스에서 가장 먼저 나오는지를 알려주는 메서드라고 할 수 있음.

2) $.isArray(object):

해당 객체가 배열객체인지 아닌지를 판단해주는 메서드임. 해당 객체가 배열 객체면 true, 아니면 false를 반환해준다.

3) $.merge(Array1, Array2):

이름에서도 알 수 있듯이 두 배열 객체를 하나로 합치는 과정이다.