[Javascript] Array methods in depth - slice

Array slice creates a shallow copy of an array. In this lesson we cover, in detail, exactly what a 'shallow' copy is and how it can trip people up. We go on to look at examples that show to how to copy only the first item, the last item and even how to copy a sub-section of an array excluding the first and last. We end the lesson with a practical example that shows how slice fits into a workflow that contains other array methods such as map & reduce.

It make a copy of array:

let ary = [1,2,3,4,5];
let copy = ary.slice();

console.log(copy); //[1, 2, 3, 4, 5]

Copy doesn't affect the old one if we push or modify one value (shallow copy)

let ary = [1,2,3,4,5];
let copy = ary.slice();

copy.push(6);

console.log(ary); //[1, 2, 3, 4, 5]
console.log(copy); //[1, 2, 3, 4, 5, 6]

So what is shallow copy?:

Let's say inside the array, there is a reference to an object:

let person = {name: "Shane"};
let ary = [1,person];
let copy = ary.slice();

copy[1].name = "Kelly";

console.log(ary);
/*[1, [object Object] {
  name: "Kelly"
}]
*/

console.log(copy);
/*
[1, [object Object] {
  name: "Kelly"
}]
*/

If we modify the name prop of the object on the 'copy' array, it actually affect both array. So shadow copy -- if there is an referce of an object inside of array, it just copy the referece, not the actual object. That means, if change the object in one place, all the other places will change also.

More often use case is to take piece of array:

slice(startIndex, endIndex)

let ary = [1,2,3,4,5];
let copy1 = ary.slice(0,1);
let copy2 = ary.slice(2,3);

console.log(copy1); //[1]
console.log(copy2); //[3]

If don't give the endIndex, it will take the rest of element:

let ary = [1,2,3,4,5];
let copy = ary.slice(2);

console.log(copy); //[3, 4, 5]

let ary = [1,2,3,4,5];
let copy = ary.slice(-2);

console.log(copy); //[4, 5]

let ary = [1,2,3,4,5];
let copy = ary.slice(1, -1);

console.log(copy); //[2, 3, 4]

Example:

let person = {
  name: 'Zhentian-Wan'
};

let filters = {
  'desluglify': x => x.replace('-', ' '),
  'uppercase': x => x.toUpperCase(),
  'hello':  x => "Hello, " + x + '!'
}

let input = 'name | desluglify | uppercase | hello'; // ZHENTIAN WAN!

let ary = input.split('|').map(x => x.trim());

let ref = person[ary[0]];

let res = ary.slice(1)
  .reduce( (prev, next) => {
    if(filters[next]){
       return filters[next].call(null, prev);
    }
  }, ref);

console.log(res);