2 - 25 July 2021 Coding Creativo 1

JavaScript slice

by Cristina | Jul 25, 2021 | JavaScript

In this lesson we will talk about the JavaScript slice method useful for selecting elements of an array.

This method returns a new array with the selected elements.

The syntax of slice() is as follows: array.slice(start, end).

The start and end parameters are optional. The beginning is a numerical value that indicates where the selection starts from, while the end is always a numerical value that indicates where the selection ends.

Be careful though. The initial array will not be modified, so to get the selection we can store it in a variable and then use it where needed.

JavaScript slice – first example

Take an array of 7 elements as input and select only the second and fourth.

First we take our array of 7 numbers as input.



var numbers = [5,4,3,2,6,9,62];

Then, using the slice method, we select the required elements or the second and fourth. We store the selection made in a variable, for example a result name.

Finally we display the result in the browser console.



var result = numbers.slice(2,4);
console.log(result);

As we can see by testing it, an array with the selected elements will appear in the console.

JavaScript slice – second example

We select all the elements of an array of strings starting from the second.

Suppose we have this array of strings:



var objectsSchools = ['pencil', 'eraser', 'sharpener', 'notebook', 'pencil'];

Then we use the slice method by specifying only the first parameter.



var result = objectsSchools.slice(2);
console.log(result);

In the console we will see all the elements starting from the second: Array (3) [“sharpener”, “notebook”, “pencil”].

So if we do not specify the second parameter, all the elements are selected up to the end of the array.

If, on the other hand, we do not even specify the first parameter, we will clearly have a copy of the starting array.

Conclusion

In this lesson we have approached the slice method of JavaScript through practical examples.

Prev lesson: splice

Next lesson: toString

Some useful links

JavaScript forEach

by Cristina | Jul 25, 2021 | JavaScript

JavaScript forEach method is used over arrays to iterate and apply a function to each element.

This method was introduced starting with ECMAScript 5 (ES5), along with other features.

The syntax is as follows: array.forEach(function(currentValue, index, array), thisValue).

Where the function is required, therefore mandatory, while thisValue is optional and represents the value to pass to the function as this value. If not specified, undefined is passed as thisValue .

The function specified as an argument to the forEach method has 3 parameters:

currentValue which is required and represents the current value of the array element;
index is optional and represents the index of the current element of the array;
array, optional, represents the array to which the element under consideration belongs.

JavaScript forEach – Difference with the for loop

We loop an array with the for loop and then the foreach.

So, suppose we have an array of numbers and print them using a for loop:



var numbers = [13, 25, 8, 9, 12, 9];

for (let i = 0; i < numbers.length; i++){
  console.log(numbers[i])
}

Now we print the same result using forEach this time.



var numbers = [13, 25, 8, 9, 12, 9];

numbers.forEach(function(number){
  console.log(number);
});
}

We passed a function with the currentValue which in our case represents the element contained in the array.

What if I also want to print the index with the forEach loop?

Just add the second parameter of the function or the index, which represents the index of each element.



var numbers = [13, 25, 8, 9, 12, 9];

numbers.forEach(function(number, index){
  console.log('index ' + index + ' number: ' + number);
});

Finally, we use the last parameter which is the array itself to print it out.



var numbers = [13, 25, 8, 9, 12, 9];

numeri.forEach(function(array){
  console.log(array);
});

JavaScript forEach – first example

Let’s now take some examples of the application of the forEach loop.

Having as input an array of numbers, we add separately the elements of even place from those of odd place, using the forEach loop.

So let’s create an array of numbers and check the odd or even position using the modulo operator.



let sumEven = 0, sumOdd = 0;
let numbers = [13, 25, 8, 9, 12, 9];

numbers.forEach(sumEvenOdd);

function sumEvenOdd(element, index) {
  if (index % 2 == 0){
     sumEven += element;
  }
  else {
     sumOdd += element;
  }
  document.getElementById("sum-even").innerHTML = sumEven;
  document.getElementById("sum-odd").innerHTML = sumOdd;
}

Upon entering the calculation made in the html page.

So for example in two different divs we insert the different calculated sums:

<div id="sum-even"></div>
<div id="sum-odd"></div>

The same algorithm could also be solved with a for loop. Let’s implement it to see the difference in use of the two loops.



let sumEven = 0, sumOdd = 0;
let numbers = [13, 25, 8, 9, 12, 9];

for(let i = 0; i < numbers.length; i++){
  if (index % 2 == 0){
    sumEven += numbers[i];
  }
 else {
    sumOdd += numbers[i];
 }
 document.getElementById("sum-even").innerHTML = sumEven;
 document.getElementById("sum-odd").innerHTML = sumOdd;
}

JavaScript forEach – second example

In this second example we will also use the third parameter, which is the array to which the element refers.

Given an array of numbers, for each element add a random number.

So let’s create a function where we add a random number to each element.

Here is the complete algorithm:



let numbers = [65, 44, 12, 4];

numbers.forEach(addRandom)

function addRandom(element, index, array) {
  array[index] = element + Math.floor(Math.random()*9);
}

document.getElementById("random").innerHTML = numbers;

In the html we then write the div where to display the result:

<div id="random"></div>

Conclusion

In this lesson we have studied the JavaScript forEach method through practical examples.

Prev lesson: join

Next lesson: isArray

Some useful links

JavaScript splice

by Cristina | Jul 25, 2021 | JavaScript

The JavaScript splice method adds and removes elements to an array starting from a specified location.

The syntax is as follows: array.splice(index, q, element1,…, elementN).

Where index represents the index from which to start and can be a negative value, which indicates that it starts from the end of the array.

The quantity q represents the quantity of items to be deleted, and if it is set to 0, or an unspecified value, no items are deleted. Otherwise, as many elements as specified are deleted.

Finally element1 … elementN are the elements to be included in the array.

The index parameter is required, while q and elements are optional parameters.

JavaScript splice – first example

Remove 3 elements from a 7-element array, starting at position 1, using the splice() method.

Let’s start with the following array of 7 numbers:



var numbers = [5,4,3,2,6,9,62];

Now to delete the elements starting from position 1, we use the splice () method and then we display the result, for convenience, in the browser console.



numbers.splice(1,3);
console.log(numbers);

So we used the splice method using the optional q parameter.

JavaScript splice – second example

Add 2 elements to an array of 7 numbers, starting from position 3 and eliminating only the third.

So, always starting from this array of numbers:



var numbers = [5,4,3,2,6,9,62];

Then, we apply the splice method to insert two values, for example 15 and 20 and delete the third, in our case the number 3.

After we always display the result in the browser console.

Here is the sample code:



numbers.splice(2,1,15,20);
console.log(numbers);

Conclusion

In this lesson we have seen how to use the splice method of JavaScript, in the next lesson we will see how to deal with other methods through numerous examples.

Prev lesson: reverse

Next lesson: slice

Some useful links