비동기로 데이터를 받아서 처리하는 부분을 그릴 때 전통적으로 for 를 이용한 방법을 많이 쓰게 된다.

for

var arrData = []; //ajax 같은 비동기 통신으로 자료를 받아서 넣어둠. 
var template = '';
for (i=0; i < arrData.length; i++) {
    // 여기에 template에 채울 내용을 마크업과 함께 문자열 + 변수 등으로 만들어서 촥촥촥 쌓아서 만듬
}
// jquery를 예로 사용함.
$('#something').append(template);

뭐 이런 방식이다. 직관적인 만큼 코드가 길어지고 보기 흉해지는 단점도 있으며 데이터 양이 엄청날 경우 성능문제도 생긴다.

Array.map()

map의 경우 es5부터인가 추가된 메소드로 생각보다 간단하고 빠른 성능을 제공한다. 물론 나같은 머리가 잘 안돌아가는 개발자들은 처음에 접하면 그 방법을 이해하는데 조금 시간이 걸린다.

var arrData = []; // 역시나 ajax 같은 비동기 통신으로 자료를 받아서 넣어둠
var template = arrData.map(function(v, i) { // es6의 arrow function 을 쓰면 더 간략하게 할 수 있으나 내가 처한 환경은 아직 그렇지 못하다 ㅠ
    return '<div>'+v.Name+'</div>'; // div 태그 사이에 템플릿과 데이터를 문자열과 변수로 만들어서 template 라는 함수에 retun 시킴. 첫번째로 받는 v인자 위치에 arrData 가 들어온다고 보면 된다. 그래서 보통 v(alue)라는 약칭으로 쓰는 거 같다.
});

$('#something').append(template);

이렇게 하는 방법이 가능해진다. 물론 조금 더 개량하면

arrData.map(function(v, i) {
    $('#something').append('<div>'+v.Name+'</div>'); // div 태그 사이에 템플릿과 데이터를 문자열과 변수로 만들어서 template 라는 함수에 retun 시킴.
});

이렇게도 된다. 방법은 사용자가 편한대로 쓰는게 제일 좋은 것 같다. 다만 for를 사용할 때와 map을 사용할 때를 구분해야할 거 같은데

for의 경우 전달받은 데이터를 어떠한 기준에 의거 판별해야하는.. 즉, if else 문 로직을 태워야 할 경우 for가 유리하고 (if / else if / else 처럼 복잡한 상황을 판별해야할 경우..)

map()의 경우는 단순 3항연산식 정도로 값이나 상태의 판별이 가능할 경우 유리하다.

나는 정규 컴퓨터공학 교육을 받은 개발자가 아니다. 어디까지나 약간의 학원과 철저한 독학으로 여기까지 온 사람인데 시행착오가 엄청났다. 한글로 써 있지만 내가 알아들을 수 없는 말들로 된 설명을 이해하는 과정에서 한자와 영어가 섞인 고급진 단어로 설명하는게 아닌 나만의 글자와 언어로 설명하는 내용의 글들을 종종 남겨보고자 한다. 오늘 예로 들은 map()의 경우도 이해하는데 꽤나 시간이 걸렸다. 이유는 역시나 저 위치에 있는 v는 뭐고 i는 뭐지? 이런 궁금증에 대해 답을 잘 찾지 못했기 때문이다. (멍청하다는 얘기다.)

앞으로도 종종 나만의 쉬운 언어로 이런 글들을 남겨보고자 한다. 이 벨로그를 만들어준 벨로퍼트님도 그렇고 제로초님. 이 두분이 그나마 그런 컨셉으로 잘 설명해주는 거 같아서 그런 방향으로 글을 남겨보고자 한다.

오늘 알게된 또 하나의 사실

Array.map() 을 사용하여 데이터를 받을 때 boolean 값이 있다면 그건 다 문자열로 바뀜 ㅠㅠ 해결책을 찾아봐야 할 듯 싶음 ㅠ