array, object 콘솔에서 출력할 때 신기한 점 - console lazy evaluation

여러분들 이 코드 간단하니까 한번만 보세여

    <script>
      const items = [
        { name: 'Coconut', value: 45 },
        { name: 'Banana', value: 37 },
        { name: 'Five', value: 37 },
        { name: 'Donut', value: -12 },
        { name: 'Apple', value: 21 },
        { name: 'Egg', value: 13 },
      ];
      console.log(items); // ----------------------------------1
      items.sort(function (a, b) {
        return a.name > b.name ? 1 : a.name < b.name ? -1 : 0;
      });
      console.log(items); //-----------------------------------2
    </script>

자바스크립트는 코드를 위에서부터 한줄 한줄씩 해석하고, 

sort함수는 원본 배열을 바꿔버리니까

상식적으로 생각해보면  1번 콘솔로그는 원본 items 를 출력하고 

2번 콘솔로그는 sort 된 items 를 출력할거 같지 않음 ?

근데요

 

콘솔에서 배열 펼쳐보면 같다고 나옴

 

엥? 콘솔 이새끼 이거 구라치네 내 언젠간 걸릴줄 알았다 

 

여러분들 컴터는 거짓말 안함 그냥 입력되있는대로, 설정되있는대로 계산 해 줄뿐

그냥 내가 모르는거였음

 

여기에 Array(6) i 되있는 부분에 하늘색 네모 안에 있는 i 에다가 마우스 올려보면 이런글이 나옵니다.

영어 이런거 잘 모르지만 대충 읽어보면 

이 값은 처음 펼칠때 검사되었습니다. 값이 변했을 수 있습니다. 

라고 하는거 같네요

 

이게 정확히 왜 그런거냐면 브라우저가 스크립트를 한줄한줄 해석하는건 맞는데요

콘솔이 객체나 배열의 참조를 받는거는 동기적으로 처리되는데 그 값을 바로 보여주지는 않아요

우리 왜 객체나 배열 콘솔찍어보면 항상 닫혀있어서 값 볼려면 마우스로 클릭해서 열어봐야 되잖아요 ?

근데 객체나 배열의 값을 검사하는 행위는 비동기적으로 동작해서 그렇습니다.

 

그래서 객체나 배열의 값을 콘솔에서 검사하기전에 데이터가 바뀌면 바뀐 값을 보여줍니다.

 

근데 그냥 다 동기적으로 처리해서 한번에 보여주면 되지 왜 이렇게 귀찮게 굳이 비동기적으로 하느냐면

lazy evaluation (지연 평가)를 하면 성능이 좋아지기 때문에 그렇습니다.