jQuery (제이쿼리) - jQuery map()

지금까지 공부한 제이쿼리 함수 중 이번에 작성하는 map() 함수는 이해하기가 유난히 난해 했는데 

뭐 어찌저찌 나름대로 이해를 했으니 여기다가 후다닥 정리해보도록 하겠다.

다른 블로그들을 찾아보니 무슨 배열의 길이를 유지를 하고 어쩌고 저쩌고 값을 조작이 어쩌고 저쩌고

값을 배열로 가져오는데 어쩌고 저쩌고 써 있는 것들이 뭔가 전혀 와닿지 않는 함수는 이번이 처음이다.

거기다 예제도 별로 없... 

그래서 나름대로 이해를 한 것이 map() 함수는 선택자의 새로운 배열을 만들면서 값을 조작 또는 지정 할 수 있다. 정도 되겠다.

뭐... 항상 하는 말이지만 아니면 말고!!

split(), join() 함수를 공부하면서 사용했던 예제를 가지고 다시 한 번 공부해보자.

$(document).ready(function() {
	//var tableRow = $("#testResultTable > tbody > tr");
    //var resultArr = [];

    //tableRow.each(function(i) {
    //	var tdData = $(tableRow[i]).children();
	//	var tdArr = [];
	//
	//	tdData.each(function(j) {
    //    	tdArr.push($(tdData[j]).text());
    //  });
        
    //  resultArr.push(tdArr.join("^"));
    //});
    //alert(resultArr.join("|"));

	var tableRow = $("#testResultTable > tbody > tr");
	var newResult = tableRow.map(function() {
    	return $(this).children().map(function() {
        	return $(this).html();
        }).get().join("^");
    }).get().join("|");
    
    alert(newResult);
});


    

        
세종대왕
90
        
이순신
78
        
장영실
100
        
김정호
98
        
신사임당
95
    

주석 처리 한 기존 소스와 나중에 추가한 map() 함수를 사용한 소스는 동일한 결과를 리턴한다.

하지만 쓸데없는 변수들의 선언이 없어졌고 소스 또한 매우 간결해졌으며 알아보기 또한 어려워졌다(-_-).

그럼 도대체 차이가 뭐냐 하면 기존 each 문은 단순한 for 문의 역할이기 때문에 결과값(return 값)을 지정하거나 할 수 없었지만

map() 함수는 리턴되는 값을 지정할 수 있기 때문에 map() 함수를 두 번 사용해 각각 children 과 parent 의 반복 결과값을 리턴해

위와 같은 결과값이 나온 효과가 나오는 것이다.

즉, 위의 구문을 풀면 다음과 같다.

$(tableRow[0]).children().map(function() {
        return $(this).html();
}).get();
// ["세종대왕", "90"]

$(tableRow[0]).children().map(function() {
        return $(this).html();
}).get().join("^");
// ["세종대왕^90"]

// map 으로 인해 for 문이 돌면서 최종적으로 다음과 같은 결과값이 나온다.
// tableRow[0], tableRow[1], tableRow[2], tableRow[3], tableRow[4] 
// ["세종대왕^90", "이순신^78", "장영실^100", "김정호^98", "신사임당^95"]

tableRow.map(function() {
    return $(this).children().map(function() {
       	return $(this).html();
    }).get().join("^");
}).get().join("|");
// "세종대왕^90|이순신^78|장영실^100|김정호^98|신사임당^95"