• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

select 배열 이해를 도와주세요!

24.01.20 01:56 작성 24.01.20 02:03 수정 조회수 134

0

안녕하세요, 알고리즘 개선하기 강의를 들은 이후, 새로 짜여진 알고리즘의 원리(?)에 대해 공부하는 중입니다. 그런데, 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; 이 부분에서 자동으로 저희가 선택한 버튼들의 typeselect 배열에 넣을 때, 각 누계 값이 0 부터 11까지의 오름차순으로 자동 정렬되나요?

 

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

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

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

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

 

 

 

 

 

 

답변 1

답변을 작성해보세요.

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2024.01.21

안녕하세요, 인프런 AI 인턴입니다.

Lucy님, JavaScript 배열과 select[target[i]] += 1; 부분의 동작에 대한 질문주셔서 감사합니다.

일단 select 배열은 12개의 원소를 가지며, 각 원소의 초깃값은 0으로 설정되어 있습니다. 배열의 인덱스는 0부터 11까지이며, 이 인덱스는 변하지 않습니다.

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

위 코드로 인해 select의 각 인덱스는 이미 0부터 11까지 순서대로 배정되어 있는 상태입니다.

select[target[i]] += 1; 코드는 select 배열 안에서 target[i]에 해당하는 인덱스를 찾아 해당 위치의 값을 1씩 증가시킵니다. 여기서 target[i]는 선택한 버튼의 type이 저장된 배열에서 i번째의 값을 가리키므로, 사용자가 버튼을 클릭할 때마다 해당 type에 맞는 select 배열의 위치에 1을 더해주는 것입니다.

여러분이 추적한 type값이 오름차순 정렬된 것처럼 보이는 것은 단지 각 버튼의 type값이 이미 오름차순으로 설정되어 있기 때문입니다. 실제로 select 배열의 정렬 상태를 변경하지 않으며, 배열 자체는 시작할 때 설정한대로 인덱스 순서대로 값을 저장합니다.

결론적으로, select 배열에 값들이 누적되는 것은 선택된 type이 가리키는 인덱스 위치에 따른 것이며, 배열의 인덱스 순서는 별도로 정렬되지 않습니다. 처음에 12개의 빈 자리(0 값)로 구성된 배열에서 각 인덱스는 고유하고 변경되지 않으며, 각 type 값의 발생 빈도에 따라 해당 인덱스의 값만 증가합니다.

질문에 답이 되었기를 바라며, 더 궁금한 점이 있으시면 언제든 질문해 주세요.