JS/Javascript

[Javascript] 배열과 객체 복사

ui-o 2024. 1. 31. 16:10
반응형

값에 의한 전달 (Copy by Value)

  • 값에 의한 전달
  • 기본적으로 모든 primitive 값은 copy by value
  • 원본 데이터와 복사본의 데이터가 서로 따로 제어 됨
let origin = 'hi'
let clone = origin

clone +=' john'

console.log(origin); // hi
console.log(clone); // hi john

참조에 의한 전달(Copy by Reference)

  • 참조에 의한 전달
  • 원본 데이터와 복사본의 데이터가 같이 제어 됨
const newObj = {
	name  :'john'
}

originObj.name = 'Mike'
console.log(originObj.name); // Mike
console.log(cloneObj.name);  // Mike

console.log(originObj === cloneObj); // true

// 값이 같다 할지라도 해당 주소값이 다르므로 서로 다름
console.log(originObj === newObj); // false
console.log(cloneObj === newObj); // false

 


얕은 복사 (Shallow Copy)

  • 객체를 복사할 경우 값이 아닌 같은 메모리 주소를 참조하고 있는 것으로 완전히 동일한 데이터로 관리 됨
  • 원본 데이터 변경 시 복사본의 데이터도 변경
  • 얕은 복사의 경우라도 새로운 배열 객체로 반환될 경우 원본 데이터가 변경되지 않음
    concat(), map(), filter(), recuce(), from(),slice()
  • 스프레드 연산자 역시 얕은 복사에 해당

얕은 복사 유형

  1. concat()
  2. slice()
  3. map() 
  4. filter()
  5. reduce()
  6. from()

깊은 복사 

  • 원본 데이터가 변경 되어도 복사본의 데이터가 변경되지 않음

깊은 복사 유형

  1. JSON.parse()
  2. JSON.stringify()

 

반응형

'JS > Javascript' 카테고리의 다른 글

[Javascript] 브라우저 객체 모델 (BOM)  (0) 2024.06.05
[Javascript] addEventListener()  (0) 2024.05.29
[Javascript] 데이터와 데이터 타입  (0) 2024.01.24
[Javascript] 배열  (0) 2024.01.20
[Javascript] 문자 관련 메서드  (0) 2024.01.20