변수 관련 질문

Question

아래와 같이 어레이 내에 오브젝트를 만들어주고 소팅을 한 뒤, 콘솔로그로 변수를 불러오고나서 리버스를 해주고 그 다음 다시 콘솔로그로 변수를 불러오는 코드를 짰습니다. 첫번째 콘솔로그에서는 오름차순으로 나오고, 두번째 콘솔로그에서는 내림차순으로 나와야한다고 생각했는데요, 실제로는 둘 다 리버스가 적용된 내용이 출력되는데 이유가 무엇일까요. // 어레이 안에 오브젝트를 넣는다. var persons = [ {name: "유재석", point:78}, {name: "김종국", point:92}, {name: "양세찬", point:76}, {name: "하하", point:81}, ]; // point를 기준으로 오름차순으로 정렬한다. persons.sort(function(a,b){ return a.point > b.point ? 1 : a.point < b.point ? -1 : 0; }) // 리버스가 콘솔로그 밑 줄에 쓰여있어도 위에 있는 콘솔로그도 함께 바뀜 console.log("1번 콘솔로그 : ", persons); // 여기는 오름차순으로 나와야함 persons.reverse(); console.log("2번 콘솔로그 : ", persons); // 여기는 내림차순으로 나와야함   그래서 아래와 같이 또 한 번 숫자가 들어간 어레이를 통해 실험을 해봤습니다. var arr_test = [100, 90, 55, 10, 33]; arr_test.sort(function(a, b){ return a-b; }) console.log("arr_test 1번 ", arr_test); // 오름차순으로 불러옴 arr_test.reverse(); console.log("arr_test 2번", arr_test); // 내림차순으로 불러옴 아까전에 리버스가 그 윗줄의 콘솔로그 안에 있는 변수에 영향을 끼친 것으로 보였다면, 이번에는 콘솔로그 1번과 2번 내의 변수가 따로따로 출력되는 것을 확인할 수 있었습니다. 만약에 리버스가 변수 자체에 영향을 미치는 것이라면 아래의 실험도 콘솔로그 위아래 모두 내림차순으로 불러와야 정상인데 혼란스럽네요. 질문에 대한 답변 주시면 감사하겠습니다.

realprogrammers · Answer

console.log 코드가 있다고 해서 실제적으로 이 코드가 먼저 실행되지는 않습니다. 이 현상은 실제 console.log로 내용을 출력하기 전에 이미 reverse()로 내용이 변경이 일어났기 때문에 console.log 내용이 동일하게 찍히게 됩니다. 왜냐하면 sort()와 reverse() 모두 같은 배열을 바라보기 때문입니다. 그리고 밑에 숫자가 배열에 들어간것은 1번과 2번이 따로 나온 것은 아래 reverse 결과 계산 보다 위에 있는 console.log 출력이 운좋게 더 빨리 이루어졌기 때문입니다. 결국 연산 성능에 따른 시차 문제입니다. 그래서 이론 코드를 작성해서 사용하실 거면 아래와 같이 배열을 깊은 복사하고 사용해야 합니다. // 어레이 안에 오브젝트를 넣는다. var persons = [ { name: "유재석", point: 78 }, { name: "김종국", point: 92 }, { name: "양세찬", point: 76 }, { name: "하하", point: 81 }, ]; // point를 기준으로 오름차순으로 정렬한다. const persons_sort = [...persons].sort(function (a, b) { return a.point > b.point ? 1 : a.point < b.point ? -1 : 0; }); // 리버스가 콘솔로그 밑 줄에 쓰여있어도 위에 있는 콘솔로그도 함께 바뀜 console.log("1번 콘솔로그 : ", persons_sort); // 여기는 오름차순으로 나와야함 const persons_reverse = [...persons].reverse(); console.log("2번 콘솔로그 : ", persons_reverse); // 여기는 내림차순으로 나와야함 var arr_test = [100, 90, 55, 10, 33]; const arr_test_sort = [...arr_test].sort(function (a, b) { return a - b; }); console.log("arr_test 1번 ", arr_test_sort); // 오름차순으로 불러옴 const arr_test_reverse = [...arr_test].reverse(); console.log("arr_test 2번", arr_test_reverse); // 내림차순으로 불러옴