[JS] 함수에서 배열 리턴을 return [...arr]로 해야 하는 이유

원시타입과 객체타입의 전달 방법의 차이 때문이다. 

return arr => arr 배열 객체 자체를 return
return [...arr] => 원시 값으로 복사된 배열 객체를 return

 

원시타입이란, 변경 불가능한 값이다. 변수가 선언하고 변수를 할당할 때 실제 값이 저장된다. string, integer와 같은 타입이 원시 타입이다.

객체 타입이란, 변경 가능한 값이다. 객체를 선언하고 별수를 할당할 때 참조 값이 저장된다.

 

따라서 

return arr => 참조 값을 가져와서 함수 안쪽, 바깥쪽에서 수정했을 때 동시에 수정된다.
return [...arr] => 복사된 값이기 때문에 한쪽을 수정해도 영향 X

 

출처 : 모던 자바스크립트

 

값에 의한 전달은 위와 같이 값을 복사해서 다른 주소값을 할당하기 때문에 연결성이 끊어지고 각각의 분리된 값이 되게 된다. 만약 함수를 통해 배열을 return받고 싶다면

function arrReturn(){
    let arr = [1, 2, 3, 4, 5];
    return [...arr];
}

이런 식으로 return하면 된다. (JS를 사용하는 프로그래머들이 자연스럽게 쓰는 관념적인 표현이라고 한다.)

 

 

 

출처

모던 자바스크립트