treemap 구현

treemap.. 두 번 풀었는데도 끝까지 하나를 몰라 가지고 다시. 세 번이면 안다. 알아야 한다. 잊지 말자. 다음엔 알려 주는 사람이 되자.

일단 지성인께 받은 답변을 토하자면, treemap은 그냥 단순히 배열의 map을 구현하는 건데, 그 배열이 tree 형식일 뿐 다를 게 전혀 없다는 조언을 받고, 일반적인 array map부터 구현을 해 봤다.

let arr = [1, 2, [3, 4, 5], 6];
//1차원이 아니라 2차원 정도로 만들어 보았음.

function arrMap(callback, arr) {
  let result = [];
  //arr를 forEach로 돌려서 한번씩 callback
  arr.forEach((ele, i) => {
    result.push(callback(ele));
    //만약 ele가 원소가 아니고 array다?
if(Array.isArray(ele)) {
result[i] = arrMap(callback, ele)
}
    //[1, 2] 그리고 2번째 인덱스에서
    //arrMap을 도니까 [3, 4, 5]가 들어가고
    //result 2는 3, 4, 5
    //계속 도니까
    //결국엔 똑같이 만들어서??
    //리턴
  })
    return result;
}

내가 제일 어려웠던 건 2차원 배열의 구현이었는데 (어떻게 안으로 들어가지?) 생각해 보니까 참 단순. 어차피 하나의 인덱스 안에 다 들어가는 것이기 때문에 그 인덱스를 걸어 주면 되었다.

자, 그러면 treemap을 구현.
tree는 child가 있으면 그 부분만 따로 세미 트리가 된다는 것을 기억하자.

긁어서 사용하지 않고, 여기서 내가 다시 풀겠다. 방식은 수도클래식.

function Tree(value) {
  this.value = value;
  this.children = [];
}

Tree.prototype.addChild = function(value) {
  //어차피 하나의 객체가 들어가는 것이기 때문에 new Tree
  //tree형식은 children이 항상 있어야 함.
  let leaf = new Tree(value);
  this.children.push(leaf);
  //children에 붙이는 형식으로.
}

Tree.prototype.map = function(callback) {
  //뿌리가 될 트리를 일단 하나 만들기. value는 this의 값
  //그런데 우리는 map을 만드는 것이기 때문에
  //callback을 사용해서 value를 재정비를 할 것이다.
  //callback은 arr.map(ele => ele *2) <여기안의 것이랑 똑같다.
  let cloneTree = new Tree(callback(this.value));
  let child = this.children;
  //tree의 children이 있으면 거기를 돌아 줘야 되기 때문에?
  //children을 for문을 활용하여 돌린다. (forEach도 가능)
  //맵도 사용이 가능한데?? 맵을 풀기 위해서 맵을 쓰는 느낌..
  //그래서 일단 반복문으로 사용을 하고 맵을 사용하는 방식을 연구
   child.forEach((ele, i) => {
     //클론트리에 차일드노드의 값을 붙이는데,
     //이 값도 callback을 받아야 된다
     cloneTree.addChild(callback(ele.value));
     
     //만약에 차일드 노드의 길이가 0 이상이라면?
     if(ele.length > 0) {
       //클론트리의 해당 칠드런에다가 칠드런 map을 돌림. 이유는..
       //그 0번 인덱스 안에 들어가고, 들어가고, 들어가는 식으로 해서
       //마지막까지 간 다음에 다시 위로 올라와서 다음 인덱스를 가게
       cloneTree.children[i] = ele.map(callback);
     }});
  //리턴해줌
  return cloneTree;
}

function callback(value) {
  return value * 2;
}

구현하면서 궁금했었던 반복문 부분의 코드 오류를 질문했고, 받은 답변을 토대로 어떻게 이해를 했는지 답했던 분들에게 내 이해의 상황(?)과 함께 감사 인사를 전했다.