인프런 커뮤니티 질문&답변

안녕하세요, 알고리즘 개선하기 강의를 들은 이후, 새로 짜여진 알고리즘의 원리(?)에 대해 공부하는 중입니다. 그런데, select 부분에 대한 이해가 어려워 질문 올려봐요 ㅠㅠ

 answer.addEventListener("click", function(){ //'answer' 버튼을 클릭했을 때 4
    var children = document.querySelectorAll('.answerList');
    for(let i = 0; i < children.length; i++){
      children[i].disabled = true; // 버튼 비활성화
      children[i].style.WebkitAnimation = "fadeOut 0.5s"; // 0.5초동안 main 섹션이 사라지면 
      children[i].style.animation = "fadeOut 0.5s"
    // 사용자가 어떤 한 버튼만 클릭해도, 다른 버튼들은 다 무시가 되고 모든 버튼들이 사라진다.
    }
    setTimeout(() => {
      var target = qnaList[qIdx].a[idx].type; // 우리가 선택한 버튼이 가지고 있는 타입이 target에 할당됨.
      //버튼을 클릭하는 순간에 바로 값 증가
      for(let i = 0; i < target.length; i++){ 
        select[target[i]] += 1; // 이 반복문이 돌고나면 사용자가 버튼을 클릭하였을 때, 12간지의 순서대로 해당하는 type의 값이 1씩 증가 
      }
        for(let i = 0; i < children.length; i++){
          children[i].style.display = 'none'; // 버튼이 보이지 않게
        }

        goNext(++qIdx);
        console.log(target);
        console.log(children.length);
    },450); //450 경과 시 
  }, false);

저는 이 for문 안에 들어있는 select[target[i]] += 1; 이 부분을 이해하기 위해

calResult() 부분에 console.log(select);를 작성하였고, 임의로 선택된 모든 버튼에 대한 select값을 받을 수 있었습니다.

// console.log(select);
[2, 4, 3, 4, 4, 3, 4, 4, 2, 5, 1, 6]

우선 저는 처음에 이 숫자들이 select 값이라는 것은 알고 있었으나 진짜 무엇을 의미 하는 지 알 수 없어 수기로 디버깅을 해보았습니다. 모든 버튼에 대한 type 값을 추적해가며 적어보았는데

qIdx  선택한 버튼       type
 0         a       [1, 2, 4, 9]
 1         c       [7, 4, 9, 11]
 2         b       [7, 9 ,11]
 3         c       [0, 3, 6, 5]
 4         c       [2, 5, 8]
 5         b       [0, 3, 6, 10]
 6         a       [1, 7, 11]
 7         c       [1, 7, 11]
 8         b       [1, 3, 6, 11]
 9         a       [4, 9, 11]
 10        c       [2, 5, 8]
 11        a       [3, 6, 4, 9]

선택한 버튼에 대한 type 값의 누계를 도출해보니 [2, 4, 3, 4, 4, 3, 4, 4, 2, 5, 1, 6] // select console에 제가 요청했던 select 값과 동일한 배열이 나왔습니다. 또한 0~11까지의 띠 순서 그대로 오름차순으로 배정된 것을 발견할 수 있었습니다.

제가 부족한 지식을 동원하여 생각한 바로는 type값을 누계할 때 오름차순으로 정렬하라는 어떤 메세지가 있지 않으면 [4, 2, 3, 4, 4, 3, 1, 4, 2, 6, 4, 5] 이런식으로 순서에 상관없이 해당 값에 대한 누계만 select에 담길 것으로 예상하였으나 오름차순으로 배열이 정리되어 정렬 원리가 궁금하였습니다.

select[target[i]] += 1; 이 부분에서 자동으로 저희가 선택한 버튼들의 type을 select 배열에 넣을 때, 각 누계 값이 0 부터 11까지의 오름차순으로 자동 정렬되나요?

const select = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

아니면 저희가 초반에 select에 0값으로 총 12개의 빈자릿수를 만들어 주었을 때부터

각 자리당 0부터 11까지의 인덱스 주소가 자동 배정되는 건가요?

아니면 이 배열(select)의 정렬방식에 대하여 놓친 부분이 있을까요? 도와주세요 ㅠㅠ