Home

Welcome to the Javascript-slicing- wiki!

_{This repository is part of a larger project!}

◀️ PREVIOUS PROJECT| NEXT PROJECT ▶️

---

In Javascript there exists a method called slice which should enable the coder to select an area of an array content.

The slice method takes either one or two arguments to define in which interval a sample in an array should be taken.

1. Extracting elements with two positive arguments

---

In this case the first argument should be the beginning and the second should define the ending of the chosen area. Value 0 as argument conforms the first value of the array which is sliced. The ending argument which indicates to a value in the array is not included in the resulting slice.

var R = [1,2,3,4,5,6,7,8];

//Doesn`t really slice, because beginning and ending arguments are not valid
console.log( R.slice(2,1) );//Outputs:[]
console.log( R.slice(0,0) );//Outputs:[]

//Legit
console.log( R.slice(0,1) );//Outputs:[1]
console.log( R.slice(1,2) );//Outputs:[2]
console.log( R.slice(2,3) );//Outputs:[3]
console.log( R.slice(3,4) );//Outputs:[4]
console.log( R.slice(4,5) );//Outputs:[5]
console.log( R.slice(5,6) );//Outputs:[6]
console.log( R.slice(6,7) );//Outputs:[7]
console.log( R.slice(7,8) );//Outputs:[8]

2. Extracting elments with two negative arguments

---

The negative value -1 seems the index value of the last element. Value 0 as argument conforms the first value of the array which is sliced. The ending argument which indicates to a value in the array is not included in the resulting slice.

var R = [1,2,3,4,5,6,7,8];

//Doesn`t really slice, because beginning and ending arguments are not valid
console.log( R.slice(-1,-2) );//Outputs:[]

//Legit
console.log( R.slice(0,-1) );//Outputs:[1, 2, 3, 4, 5, 6, 7]
console.log( R.slice(-2,-1) );//Outputs:[7]
console.log( R.slice(-3,-2) );//Outputs:[6]
console.log( R.slice(-4,-3) );//Outputs:[5]
console.log( R.slice(-5,-4) );//Outputs:[4]
console.log( R.slice(-6,-5) );//Outputs:[3]
console.log( R.slice(-7,-6) );//Outputs:[2]
console.log( R.slice(-8,-7) );//Outputs:[1]

3. Extracting elments with one positive argument

---

If the ending is not defined, which is the case here, then its default value will be the length of the array.

var R = [1,2,3,4,5,6,7,8];

//Legit
console.log( R.slice(1) );//Outputs:[2, 3, 4, 5, 6, 7, 8]
console.log( R.slice(2) );//Outputs:[3, 4, 5, 6, 7, 8]
console.log( R.slice(3) );//Outputs:[4, 5, 6, 7, 8]
console.log( R.slice(4) );//Outputs:[5, 6, 7, 8]
console.log( R.slice(5) );//Outputs:[6, 7, 8]
console.log( R.slice(6) );//Outputs:[7, 8]
console.log( R.slice(7) );//Outputs:[8]

//Doesn`t really slice, because argument is not valid
console.log( R.slice(0) );//Outputs:[1, 2, 3, 4, 5, 6, 7, 8]
console.log( R.slice(8) );//Outputs:[]

4. Extracting elments with one negative argument

---

If the ending is not defined, which is the case here, then its default value will be the length of the array.

var R = [1,2,3,4,5,6,7,8];

//LEGIT
console.log( R.slice(-1) );//Outputs:[8]
console.log( R.slice(-2) );//Outputs:[7, 8]
console.log( R.slice(-3) );//Outputs:[6, 7, 8]
console.log( R.slice(-4) );//Outputs:[5, 6, 7, 8]
console.log( R.slice(-5) );//Outputs:[4, 5, 6, 7, 8]
console.log( R.slice(-6) );//Outputs:[3, 4, 5, 6, 7, 8]
console.log( R.slice(-7) );//Outputs:[2, 3, 4, 5, 6, 7, 8]

//Doesn`t really slice, because argument is not valid
console.log( R.slice(-8) );//Outputs:[1, 2, 3, 4, 5, 6, 7, 8]
console.log( R.slice(-9) );//Outputs:[1, 2, 3, 4, 5, 6, 7, 8]

5. Extracted objects refer to the same objects

---

Objects in an array should be the same after the array is sliced. That should mean, that the changes should be global.

//An array with objects
var R =[ {'Hello': 2}, {'How':4}, {'Are':6}, {'You':8}];

//New Array - Contains: "[{'Hello': 2}, {'How':4}]"
var Reference = R.slice(0, 2);

//Overwriting a new value to the object "{'Hello': 2}"
Reference[0]['Hello'] = 10;

//'R' and 'Reference' refer to the same objects which they have within
console.log(Reference[0]);//Outputs: {'Hello': 10}
console.log(R[0]);        //Outputs: {'Hello': 10}

6. Extracting values to a new array is a copy not a reference

---

In this case the elements of an array are not the same as the sliced result.

var R = [1,2,3,4,5,6,7,8];

//Contains:[7, 8]
var aCopy = R.slice(-2) ;

//Overwriting value "7"
aCopy[0] = 42;

console.log(aCopy[0]);//Outputs: 42
console.log(R[6]);    //Outputs: 7 

Content

The user interaction part, after chosing some inputs, could look like the content as seen below by starting "index.html" in a web browser.

• The whole cake symbolizes the array which will be sliced
• The left drop list symbolizes the beginning
• The right drop list could symbolize the ending if so wished
• 🅱️ utton "SLICE" slices the cake and distributes them on to the plates
• Also the sliced slices will be visibly brightend

The numbers in the second picture above show the position of the cake slices in the array.

The colored areas are just for a better readability in the wiki and are not part of the content. To use the project just download the files and execute "index.html". Note that all files(folders "wiki_images" and "PaintNET" excluded) should be placed in the same folder so that the functionality of the code is guaranteed.

The "PaintNet" folder contains a .pdn file which can be opened and altered with PaintNET for simple picture editing.