4.17 Shallow and Deep copy¶

Warm-up¶

Task 1: Display the key-value pairs of the object below in an array.

var myFood = {
  group: "vegetables",
  name: "Leafy green"
}

console.log(Object.entries(myFood));

The result is as follows:

(2) [Array(2), Array(2)]
    0: (2) ["group", "vegetables"]
    1: (2) ["name", "Leafy green"]
    length: 2
    __proto__: Array(0)

Task 2: Refer to task 1; display each the keys and the values of myFood in an array.

var myFood = {
  group: "vegetables",
  name: "Leafy green"
}

console.log(Object.keys(myFood));
console.log(Object.values(myFood));

The result is as follows:

(2) ["group", "name"]
(2) ["vegetables", "Leafy green"]

Task 3: Display the key-value pairs of the object below in an array. Display also each of the keys and the values in a separate array.

var user = {
  firstName: "Ali",
  lastName: "Zaki",
  username: "AliZaki88",
  email: "alizaki@mail.com"
}

console.log(Object.entries(user));
console.log(Object.keys(user));
console.log(Object.values(user));

The result is as follows:

(4) [Array(2), Array(2), Array(2), Array(2)]
(4) ["firstName", "lastName", "username", "email"]
(4) ["Ali", "Zaki", "AliZaki88", "alizaki@mail.com"]

Task 4: Display the keys array of the object below.

var book = {
  weight: 0.5,
  pages: 500
};

console.log(Object.keys(book));

The result is: (2) ["weight", "pages"]

Task 5: Display the values array of the object below.

var video = {
  length: "30min",
  host: "Nawras Ali",
  category: "Education",
  title: "Create a WordPress Theme",
  language: "Arabic"
};

console.log(Object.values(video));

The result is: (5) ["30min", "Nawras Ali", "Education", "Create a WordPress Theme", "Arabic"]

Task 6: Display the key-value pairs of the object below in an array.

var phone = {
  os: "Andriod",
  ram: "8GB",
  storage: "512GB"
};

console.log(Object.entries(phone));

The result is as follows:

(3) [Array(2), Array(2), Array(2)]
    0: (2) ["os", "Andriod"]
    1: (2) ["ram", "8GB"]
    2: (2) ["storage", "512GB"]
    length: 3
    __proto__: Array(0)

Shallow Copy¶

Task 7: Create a copy from the object below.

var obj1 = {
  a: 1,
  b: 2
};

var obj2 = obj1;

console.log(obj1, obj2);

The result is: {a: 1, b: 2} {a: 1, b: 2}

Task 8: Refer to task 7; add c:3 key-value pair to obj2, and log the value of obj1 and obj2 in the console.

var obj1 = {
  a: 1,
  b: 2
};

var obj2 = obj1;
obj2.c = 3;

console.log(obj1, obj2);

The result is: {a: 1, b: 2, c: 3} {a: 1, b: 2, c: 3}

Task 9: Make a copy of the following array.

var arr1 = [1, 2, 3];

var arr2 = arr1;

console.log(arr1, arr2);

The result is: (3) [1, 2, 3] (3) [1, 2, 3]

Task 10: Refer to task 9; add 4 to arr1, and log arr1 and arr2 in the console.

var arr1 = [1, 2, 3];

var arr2 = arr1;
arr1.push(4);

console.log(arr1, arr2);

The result is: (4) [1, 2, 3, 4] (4) [1, 2, 3, 4]

Deep Copying¶

Spread Operator¶

Task 11: Make a copy of the following array using the spread operator.

var arr1 = [1, 2, 3];

var arr2 = [...arr1];

console.log(arr1, arr2);

The result is: (3) [1, 2, 3] (3) [1, 2, 3]

Task 12: Refer to task 11; add 4 to arr1, and log arr1 and arr2 in the console.

var arr1 = [1, 2, 3];

var arr2 = [...arr1];
arr1.push(4);

console.log(arr1, arr2);

The result is: (4) [1, 2, 3, 4] (4) [1, 2, 3]

Task 13: Create a copy from the object below using the spread operator.

var obj1 = {
  a: 1,
  b: 2
};

var obj2 = {...obj1};

console.log(obj1, obj2);

The result is: {a: 1, b: 2} {a: 1, b: 2}

Task 14: Refer to task 13; add c:3 key-value pair to obj2, and log the value of obj1 and obj2 in the console.

var obj1 = {
  a: 1,
  b: 2
};

var obj2 = {...obj1};
obj2.c = 3;

console.log(obj1, obj2);

The result is: {a: 1, b: 2} {a: 1, b: 2, c: 3}

Object.assign()¶

Task 15: Create a copy from obj1. Hint: use Object.assign(obj2, obj1).

var obj1 = {
  a: 1,
  b: 2
};

var obj2 = {};

Object.assign(obj2, obj1);
console.log(obj1, obj2);

The result is: {a: 1, b: 2} {a: 1, b: 2}

Task 16: Refer to task 15; add c:3 key-value pair to obj1, and log the value of obj1 and obj2 in the console.

var obj1 = {
  a: 1,
  b: 2
};

var obj2 = {};
Object.assign(obj2, obj1);
obj1.c = 3;

console.log(obj1, obj2);

The result is: {a: 1, b: 2, c: 3} {a: 1, b: 2}

Task 17: Create a copy of the object below using Object.assign().

var obj = {
  firstName: "Ali",
  lastName: "Zaki"
};

var copy = Object.assign({}, obj);
console.log(copy);

The result is: {firstName: "Ali", lastName: "Zaki"}

Task 18 Refer to task 17; add groupId:5 key-value pair to copy. Log both Obj and copy in the console.

var obj = {
  firstName: "Ali",
  lastName: "Zaki"
};

var copy = Object.assign({}, obj);
copy.groupId = 5;

console.log(obj, copy);

The result is: {firstName: "Ali", lastName: "Zaki"} {firstName: "Ali", lastName: "Zaki", groupId: 5}

Task 19: Make a copy from the object below using Object.assign().

var obj = {
  os: "Andriod",
  ram: "8GB",
  storage: "512GB"
};

var copy = Object.assign({}, obj);

console.log(copy);

The result is: {os: "Andriod", ram: "8GB", storage: "512GB"}

Task 20: Add the properties of obj2 to obj1 using Object.assign().

var obj1 = {
  a: 1,
  b: 2,
  c: 3
};

var obj2 = {
  d: 4,
  e: 5
};


Object.assign(obj1, obj2);

console.log(obj1);

The result is: {a: 1, b: 2, c: 3, d: 4, e: 5}

Task 21: Add the properties of obj2 to obj1 using Object.assign().

var obj1 = {
  prop1: "val1",
  prop2: "val2",
};

var obj2 = {
  prop3: "val3",

};

Object.assign(obj1, obj2);

console.log(obj1);

The result is: {prop1: "val1", prop2: "val2", prop3: "val3"}

Task 22: Add the properties of obj2, obj3, and obj4 to obj1 using Object.assign().

var obj1 = {
  a: 1
};
var obj2 = {
  b: 2,
  c: 3
};
var obj3 = {
  d: 4,
  e: 5,
  f: 6
};
var obj4 = {
  g: 7,
  h: 8,
  i: 9,
  j: 10
};

Object.assign(obj1, obj2, obj3, obj4);

console.log(obj1);

The result is: {a: 1, b: 2, c: 3, d: 4, e: 5, …}

Task 23: Add the properties of obj2 and obj3 to obj1 using Object.assign().

var obj1 = {
  prop1: "val1"
};
var obj2 = {
  prop2: "val2",
  prop3: "val3"
};
var obj3 = {
  prop4: "val4",
  prop5: "val5",
  prop6: "val6"
};

Object.assign(obj1, obj2, obj3);

console.log(obj1);

The result is: {prop1: "val1", prop2: "val2", prop3: "val3", prop4: "val4", prop5: "val5", …}