Shallow Copying & Deep Copying - Javascript

 _____ _           _ _                 _____                   _              
/  ___| |         | | |               /  __ \                 (_)             
\ `--.| |__   __ _| | | _____      __ | /  \/ ___  _ __  _   _ _ _ __   __ _  
 `--. \ '_ \ / _` | | |/ _ \ \ /\ / / | |    / _ \| '_ \| | | | | '_ \ / _` | 
/\__/ / | | | (_| | | | (_) \ V  V /  | \__/\ (_) | |_) | |_| | | | | | (_| | 
\____/|_| |_|\__,_|_|_|\___/ \_/\_/    \____/\___/| .__/ \__, |_|_| |_|\__, | 
                                                  | |     __/ |         __/ | 
                                                  |_|    |___/         |___/
                                                  
                               ____                     ______                  _            
                              / __ \___  ___  ____     / ____/___  ____  __  __(_)___  ____ _
                             / / / / _ \/ _ \/ __ \   / /   / __ \/ __ \/ / / / / __ \/ __ `/
                            / /_/ /  __/  __/ /_/ /  / /___/ /_/ / /_/ / /_/ / / / / / /_/ / 
                           /_____/\___/\___/ .___/   \____/\____/ .___/\__, /_/_/ /_/\__, /  
                                          /_/                  /_/    /____/        /____/

Mutable

Ví dụ khi gặp vấn đề - (Mutable)

const a = {
  en: 'Hello',
  vi: 'Xin chào'
}

let b = a
b.vi = 'Chào xin'
console.log(b.vi) // Chào xin
console.log(a.vi) // Chào xin

Immutable - Spread operator

Cách 1: Chúng ta sẽ xử lý bằng cách clone spread operator - (Immutable)

const a = {
  en: 'Hello',
  vi: 'Xin chào'
}

let b = {...a}
b.vi = 'Chào xin'
console.log(b.vi) // Chào xin
console.log(a.vi) // Xin chào

Immutable - Object.assign()

Cách 2: Chúng ta sẽ xử lý bằng cách clone Object.assign() - (Immutable)

const a = {
  en: 'Hello',
  vi: 'Xin chào'
}

let b = Object.assign({}, a)
b.vi = 'Chào xin'
console.log(b.vi) // Chào xin
console.log(a.vi) // Xin chào

Shallow copying

Cạm bẫy Object lồng nhau thì clone bằng 2 cách trên là không thể - (Shallow copying)

const a = {
  languages: {
    vi: 'Xin chào'
  }
}
let b = {...a} 
// hoặc let b = Object.assign({}, a)
b.languages.vi = 'Chào xin'
console.log(b.languages.vi) // Chào xin
console.log(a.languages.vi) // Chào xin

Deep copying

Cách khắc phục - (Deep copying)

const a = {
  languages: {
    vi: 'Xin chào'
  }
}
let b = JSON.parse(JSON.stringify(a)) // lodash cũng có một func hỗ trợ việc này! import { cloneDeep } from 'lodash';
b.languages.vi = 'Chào xin'
console.log(b.languages.vi) // Chào xin
console.log(a.languages.vi) // Xin chào

Author: DaiDH

view raw copying.md hosted with ❤ by GitHub