javascript : variable (4) (array, shallow copy)

array

const fruits = new Array('apple', 'banana', 'cherry');

console.log(fruits); // [ 'apple', 'banana', 'cherry' ]

const fruits1 = ['apple', 'banana', 'cherry'];

console.log(fruits1); // [ 'apple', 'banana', 'cherry' ]

console.log(fruits[0]); // apple


// 'from' has the iterable property, so it iterates.
array = Array.from('text'); // copy
console.log(array); // [ 't', 'e', 'x', 't' ]

array = Array.from({
  0: '안',
  1: '녕',
  length: 2, // length must be indicated
});
console.log(array); // [ '안', '녕' ]

Shallow Copy

// Due to the mutability of reference types, care must be taken when copying data.

// Shallow Copy = Copy only one-dimensional data of reference type
// Deep Copy = Copy all dimension data of reference type

let a = 1;
let b = a;

b = 2;

console.log(b); // 2
console.log(a); // 1

b = 3;

console.log(b); // 3
console.log(a); // 1

// shallow copy
const c = { x: 1 };
const d = Object.assign({}, c);
const e = { ...c };

d.x = 2;
e.x = 3;

console.log(c); // { x: 1 }
console.log(d); // { x: 2 }
console.log(e); // { x: 3 }

// Shallow copying is only possible in one dimension, as shown below.
const f = { x: { y: 1 } };
const g = { ...f };

g.x.y = 2;

console.log(f); // { x: { y: 2 } }
console.log(g); // { x: { y: 2 } }

// deep copy => copy all dimensions
import cloneDeep from 'lodash/cloneDeep';

const h = { x: { y: 1 } };
const i = cloneDeep(h);

i.x.y = 2;

console.log(h);
console.log(i);

// array

const j = [1, 2, 3];
const k = j.concat([]);
const l = [...j];

k[0] = 4;
l[0] = 5;

console.log(j); // [1, 2, 3]
console.log(k); // [4, 2, 3]
console.log(l); // [5, 2, 3]

const m = [[1, 2], [3]];
const n = cloneDeep(m);

n[0][0] = 4;

console.log(m); // [[1, 2], [3]]
console.log(n); // [[4, 2], [3]]




// Shallow Copy - object passed memory address
// When copying in JavaScript, a shallow copy is always done!

const pizza = { name: '🍕', price: 2, owner: { name: 'Youjun' } };
const ramen = { name: '🍜', price: 3 };
const sushi = { name: '🍣', price: 1 };
const store1 = [pizza, ramen];
const store2 = Array.from(store1);
console.log('store1', store1);
/*
store1 [
  { name: '🍕', price: 2, owner: { name: 'Youjun' } },
  { name: '🍜', price: 3 }
] 
*/
console.log('store2', store2);
/*
store2 [
  { name: '🍕', price: 2, owner: { name: 'Youjun' } },
  { name: '🍜', price: 3 }
]
*/

store2.push(sushi);
console.log('store1', store1);
/*
store1 [
  { name: '🍕', price: 2, owner: { name: 'Youjun' } },
  { name: '🍜', price: 3 }
]
*/
console.log('store2', store2);
/**
store2 [
  { name: '🍕', price: 2, owner: { name: 'Youjun' } },
  { name: '🍜', price: 3 },
  { name: '🍣', price: 1 }
]
 */

pizza.price = 4;
console.log('store1', store1);
/**
store1 [
  { name: '🍕', price: 4, owner: { name: 'Youjun' } },
  { name: '🍜', price: 3 }
]
 */
console.log('store2', store2);
/*
store2 [
  { name: '🍕', price: 4, owner: { name: 'Youjun' } },
  { name: '🍜', price: 3 },
  { name: '🍣', price: 1 }
]
*/