JavaScript - 값 복사 , 참조 복사 / filter()

값 복사 , 참조 복사

알고리즘 문제를 풀다가 배열의 복사에 대한 개념을 다시 잡아보았습니다 !

let arr = [1,2,3];
let arr2 = arr;
 
arr.length = 0;
 
cosole.log(arr2.length); // 3이 나올거라고 생각했지만 0이 나왔습니다.
 
 

arr과 arr2가 서로 다른 변수로 각자의 메모리 공간을 따로 가지면서 독립적인 상태라고 생각하여 arr2.length는

3이 출력될거라 생각했지만 , 0이 출력되었습니다. 결국 arr2 = arr이 메모리를 공유(참조)하는 것인지, 단순히 값을

복사하는 것인지 헷갈렸기 때문에 이에 관한 개념을 찾아서 학습한 것을 정리해보려 합니다.

 

자료형의 값 복사(깊은 복사)

자바스크립트에서는 기본 자료형(숫자, 문자열, boolean)의 값을 복사할 때, 값을 완전히 복사합니다.

let value1 = 10;
let value2 = value1;
 
value1 = 20;
 
console.log(value1);
console.log(value2);

10이라는 숫자를 담고있는 value1을 value2에 복사했습니다. 

value1을 20으로 변경하더라도 value2는 변경 전의 값인 10을 복사했기 때문에 value2의 값은 그대로 10을 유지합니다.

즉, 두 변수는 서로 독립적인 존재라는 뜻 입니다. 서로 다른 메모리 공간에서 각자만의 값을 가집니다.

위와 같은 복사의 형태를 '값 복사' 혹은 '깊은 복사'라고 합니다. 서로 영향을 주지 않습니다.

 

객체의 참조 복사(얕은 복사)

기존에 객체의 경우에는 복사가 일어났을 때, 값이 아닌 메모리 주소를 복사하기 때문에 기존의 변수에 변동이 생기면

복사한 변수에도 영향을 준다는 사실을 인지하고 있었습니다. 배열의 경우가 헷갈렸었는데, 배열 역시 객체이기 때문에

비록 중괄호 { }로 감싸져 있지 않더라도 객체처럼 복사 시 참조 복사가 일어납니다.

let array1 = [1,2,3,4,5];
let array2 = array1
 
array1[0] = 11;
 
console.log(array2[0]); // 11이 출력됩니다.

array1의 0번 인덱스의 값을 바꿨지만, array2가 같은 메모리 공간을 참조하고 있기 때문에 array2[0]을 출력하면 11이

출력됩니다. 위와 같은 복사의 형태를 참조 복사(얕은 복사)라고 합니다. array1의 변화가 전혀 다른 변수인 array2에도 영향을 끼칩니다.

 

값 복사 , 참조 복사 참고 블로그 : https://wanna-b.tistory.com/18

 

Array.prototype.filter()

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

새로운 배열로 반환하기 때문에 기존의 배열을 훼손시키지 않습니다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result) //['exuberant', 'destruction', 'present']

filter() 함수의 인자로 함수를 전달하는 콜백 형태입니다.

걸러내다라는 filter 단어의 뜻처럼 새롭게 만들어질 배열에는 filter의 인자로 전달하는 함수를 만족하는

filter를 호출한 배열의 요소들만 담겨서 만들어집니다.

 

위 내용은 MDN을 참고했습니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter