JavaScript -

JavaScript splice

da Cristina | Lug 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

JavaScript reverse

da Cristina | Lug 25, 2021 | JavaScript

In this lesson we study JavaScript reverse method, which is useful for reversing the elements of an array.

The syntax is as follows: array.reverse().

So let’s take some examples to understand how it works.

JavaScript reverse – first example

Reverse the order of an array of strings taken as input, using the reverse() method.

So let’s take our array as input, for example an array made up of school objects like the following:



var objectsSchool = ['eraser', 'notebook', 'pencil'];

Then we simply use the reverse method on the given array, following its syntax and view the result in the browser console.

Here is the example code for using the reverse() method of JavaScript:



objectsSchool.reverse();
console.log(objectsSchool);

In this way, in the console we will see the contents of the starting array in reverse order.

JavaScript reverse – second example

Sort an array of numbers and then reverse it using the reverse() method.

So this time we take an array of numbers as input, as shown in the example below:



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

We also remember that in order to perform a numerical sorting of an array we must use the syntax array.sort(comparison function), as explained in this lesson: sort javascript.

Then we order it following the specifications indicated in the previous lesson:



numerbs.sort(function(a, b) {
  return a - b;
});

Finally we apply the reverse method of JavaScript and display the result, for convenience, in the console of our browser.



numerbs.reverse();
console.log(numerbs);

If we reflect in this case, the same result could be obtained simply by performing a descending ordering of the starting array.

Below I therefore present a possible alternative solution to the proposed algorithm that does not use the reverse method of JavaScript.



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

numbers.sort(function(a, b) {
  return b - a;
});

console.log(numbers);

Conclusion

In this lesson we have simply seen some very simple examples of using the JavaScript reverse method. In the next lessons we will face still other methods, through the study of practical examples.

Prev lesson: map

Next lesson: splice

Some useful links

Lezione successiva: reverse

JavaScript sort

da Cristina | Lug 25, 2021 | JavaScript

In this article we will talk about the JavaScript sort method, which is useful for sorting the elements of an array.

The syntax of the sort() method is as follows: array.sort().

You can also indicate a comparison function for which the syntax becomes: array.sort(comparison function).

The comparison function is therefore optional and therefore the sorting takes place based on the value of the Unicode characters.

Now let’s do some practical examples of use.

JavaScript sort – first example

Sort an array of strings in ascending order.

So, first let’s create our example array:



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

Then, with the sort method we sort it, then displaying the result in the browser console.



objectsSchools.sort();
console.log(objectsSchools);

But be careful! If the initials of the names are not all uppercase or lowercase, the ordering may not be what you want.

In fact, the Unicode encodings for example of the letter a or A are different binary sequences.

Furthermore, if we try to sort an array made up of numbers, we will not have the desired result. We will discuss this in detail in the next example.

JavaScript sort – second example

Sort an array of numbers with the sort() method.

First we provide our array of numbers:



var numbers = [4,1,6,8,9,62];

Then let’s try to sort it with JavaScript sort method:



numbers.sort();
console.log(numbers);

The result obtained, visible in the browser console, will be: array(6) [1, 4, 6, 62, 8, 9]. Therefore the ordering is not correct.

In order to use the sort method with numbers then it is necessary to use a function that makes a comparison between the numbers themselves.

So in this case we use the JavaScript sort method with this syntax: array.sort(comparison function).

The comparison function returns a negative, zero, or positive value. This value depends on the comparison between two adjacent values.

function (a, b) {return a – b}

If a is less than b then the result is negative and therefore a is sorted before b. If a is greater than b the result is negative and therefore b is sorted before a. Finally, if it is 0 it means that a and b are equal and therefore it is indifferent to write one number or the other first.

Here is the simple algorithm that allows you to sort a numeric array.



var numbers = [4,1,6,8,9,62];

numbers.sort(function (a, b) {
  return a - b;
});
console.log(numbers);

Conclusion

In this lesson we talked about the JavaScript sort method and how to sort arrays of strings and numbers. In the next few lessons we will cover other methods on arrays in JavaScript.

Lezione precedente: map

Some useful links

JavaScript map

da Cristina | Lug 25, 2021 | JavaScript

In this lesson we will talk about the JavaScript map method, used with arrays. This method creates a new array with the results of calling a function for each element of the starting array.

The syntax is as follows: array.map(function)

Where function can be an already existing function such as the absolute value function: Math.abs. Or it can also be a user-defined function.

The method returns a new array.

Also you can specify an optional value array.map (function, thisValue) which indicates the value to pass to the function to use as this value. Otherwise the passed value will be undefined.

Let’s take examples of using the map() method.

JavaScript map – first example

Apply the cube function to all elements of an array.

In this first example we first create an array of numbers.

Then we implement a cube function which simply returns the cube of a number. Then we want to apply it to all the elements of the array. Well we can use the map method on the starting array.

The result will be a new array where each element has been raised to the third.

Here is the simple example code:



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

function cube(n) {
  return n * n * n;
}

var cubeNumbers = numbers.map(cube);
console.log(cubeNumbers);

For simplicity, we always display the result in the browser console.

JavaScript map – second example

Transform an array of numbers into an array of strings with the odd or even word.

In this second example we take an array of numbers.

Then we create a function that checks whether a number is even or odd. If it is even we return the even word, if instead the word odd is odd.

So we apply this function with the map method to each element of the array. As a result we will have an array where the odd or even value will appear instead of numbers.

Here is the complete code of the example that illustrates how the map method works in JavaScript.



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


function evenOdd(n) {
  if (n % 2 == 0) {
    return 'even';
  }
  return 'odd';
}

var arrayStringa = numbers.map(evenOdd);
console.log(arrayString);

As usual, we display the modified array in the console.

Conclusion

These are just some simple examples of using the JavaScript map method, we will see other fields of application later.

Prev lesson: indexOf

Next lesson: sort

Some useful links