javascript clone

Jan 14, 2020

 javascript  clone

clone 을 하는 이유

  • 우리는 흔히 값을 배정 혹은 변수에 넣을 때 = 연산자를 사용 한다.
    • 예를 들면 var number_val = 1;
  • 다른 변수를 지정을 하고 그 값을 또 다른 변수에 = 연산자를 이용하여 지정한다면?
    • var number_val2 = 0;
    • number_val = number_val2
    • 이렇게 지정을 한다면 두 변수에 값은 어찌 될까?
    • 두 변수에 값은 나중에 지정 된 0 값으로 변동 된다.
      • 0가 된 이유는 = 연산자는 오른쪽에 있는 값을 왼쪽으로 넣는다 라는 의미이기 떄문이다.
  • 이렇게 값을 지정하는 경우는 = 연산자를 통해 가능하다
  • 이런 복사를 하는 과정에 배열이라는 그릇이 들어오면 이야기가 달라진다.
    • 1차원 배열 { 1, 2, 3, 4} 와 같은 경우는 문제가 없지만
    • 2차원 이상의 배열 { 1 , {2,3}, 4} 이런 배열의 경우는 = 연산자로 복사 할 수 없다.
  • 해당 페이지는 아래 코드를 script 형태로 코딩해 놓았으므로 F12를 이용해 값을 console 에서 확인 할 수 있다.
  • _.clone 처럼 사용하기 clone 함수를 사용하기 위해선 lodash 라는 라이브러리가 필요하고 해당 블로그에는 lodash.js 가 로딩되어 있다.
    • lodash 라이브러리가 없다면 _.clone 은 사용할 수 없다.

const externalObject = {
  color: 'red'
}

const original = {
  a: new Date(),
  b: NaN,
  c: new Function(),
  d: undefined,
  e: function() {},
  f: Number,
  g: false,
  h: Infinity,
  i: externalObject
}

const cloned = _.clone(original)

externalObject.color = 'blue'

console.info('⬇️ shallow cloning 🌈')
console.info(
  '✏️ Notice the i.color property we changed on original is also changed in the shallow copy'
)
console.log(original)
console.log(cloned)

const deepcloned = _.cloneDeep(original)

externalObject.color = 'yellow'
console.log('')
console.info('⬇️ deep cloning 🌈')
console.info('✏️ Notice the i.color property does not propagate any more')
console.log(original)
console.log(deepcloned)
 Toc
 Tags
 Related