약간 복잡한 Array & Object 데이터바인딩 질문

안녕하세요. 선생님 강의 재미있게 수강하고 있습니다. 

여기서 부모를 먼저 잡은 후 아래요소들을 찾는 방식으로 데이터바인딩에 접근을 했습니다.
  
let a = document.querySelector('.card-group')
    console.log(a.querySelectorAll('.card'), '두번째', a.querySelectorAll('.card')[0])

그런데 이렇게 작성하고 f5누른 후 콘솔로그로 보면

이렇게 나올때도 있고, 

다음과 같이 태그들을 같이 나오는 경우가 있더라구요. 

Q1 : 왜 그런건가요?

++그런데 동작을 잘합니다. 단순히 콘솔에만 저렇게 찍히는것 같아요. 
    let initial = document.querySelectorAll('.card-group .card')
    for (i = 0; i < 3; i++) {
      initial[i].querySelector('h5').innerText = products[i].title
      initial[i].querySelector('p').innerText = products[i].price
    }
    console.log(initial, initial[0])