Dot Syntax

What is the meaning of the dot?
The dot signifies that we want to use something that’s inside something else.

console.log("log is inside of a console");

myObject.search("Tony de Araujo");
// search is a method which is inside of object myObject

Hope it helps!

Advertisements

JavaScript method slice

Today I’m bringing a section from my eBook where we cover the JavaScript library String method slice.

The method slice( ) extracts the text from one string and returns a new string with the extracted text. There is no change to the original variable unless of course the method is applied to itself. This is the same as taking a slice of cake but the cake stays intact. We must give this copy of sliced cake to another variable in order to reuse it.

This method uses up to two parameters. The first parameter indicates the zero based first character to be sliced (copied from). The second parameter indicates the first character to be excluded from the action of slicing. (included from, excluded from).

Sample scripts:

1- Declare a variable:

var xpt = "red,blue,white,black";

2- Extracting the word “blue” into another variable:

var xpt = "red,blue,white,black";
var xpt2 = xpt.slice(4,8);

3- Call xpt2;

It returns “blue”. The first character to be included is on position 4 ( as in 0,1,2,3,4), and the first to be excluded is on position 8, which is the comma.

Using negative numbers:

As an alternative, if we apply a negative number to the second parameter, it changes its meaning: now it means to start excluding from the right, based on the number of characters indicated. Commas and spaces count as characters.

4- For example: excluding the last color (black and the comma to its left) from our slicing):

var xpt = "red,blue,white,black";
var xpt3 = xpt.slice(0,-6);

5- Call the variable: xpt3;

It returns “red, blue, white”. In other words, it includes all characters from position zero on, except the last 6 from the end. This also means that we could exclude some characters from the extreme left, if instead of zero we entered some other number as the left parameter.

Using just one parameter:

When using just one positive parameter, this parameter represents the first character position to be included on the slice which extends all the way to the end.

1- For example:

var xpt = "red,blue,white,black";
var x = xpt.slice(3);

// returns “,blue,white,black”, which means that “red” was cutoff.

If the single parameter is negative, it has an opposite effect: it tells JavaScript how many characters to include from the right and exclude all else.

2- Example:

var xpt = "red,blue,white,black";
var x = xpt.slice(-3);

// it returns “ack” from “black”. It counted from the right to the left 3 characters and cutoff all the others at the left.

3- One more example. Extract the “e” from ecmascript:

"ecmascript".slice(1);

// returns “cmascript”.
This is actually useful to remove the first character and replace it with another similar character capitalized, as we will see later in the eBook

Using JavaScript to filter even numbers from an array

JavaScript has some cool new array iteration methods such as forEach, map, every, some and filter.
I write about them with easy to understand examples on my latest book JavaScript Objects Functions and Arrays Explained.

Today I am going to spend a bit of time introducing filter by giving an example where filter works very well: filtering out items from an array by returning a new array.

We know how to check if a certain number is odd or even, right?

x = 4 % 2 === 0; // returns true
y = 5 % 2 ==== 0; // returns false

When JavaScript see a % it knows we want the modulus of the two numbers. As you remember from arithmetic, the modulus (sometimes called modulo) operation finds the remainder of division of one number by another. In our example, JavaScript verifies if 4 / 2 has a remainder of zero. If it does, the number is an even number, and because the condition matches, it returns the Boolean true. Else, it returns false and we know the number is odd.

So knowing this, we could build a function that checks for even numbers:

var even = function (num) {
return num % 2 === 0;
};

If we fire up our Google Chrome or Opera console by pressing CTRL j we could plug in the above function and call it with an argument that feeds num. An argument of  3 would return false and a 6 would return true, meaning 6 is an even number.

Now let’s look at a more complex data system such as an array:

var myArray = [1,2,3,4,5,6,7,8,9,10,11,12];

If we wanted to get all the even (or odd) numbers, we could use the above function “even”. However, we need to feed into the function each array item to be evaluated. In the olden days we would create a for loop. Today we have something better thanks to the latest ECMAScript standard. We have filter().

Filter returns a new array with the results of the function we feed it as an argument.

So we could create a new array and assign it the results of filtering out myArray with the help of our previous function.

Here’s how the filter assignment is coded:

var myEvenArray = myArray.filter(even);
// even is the function name we coded above
// returns [2, 4, 6, 8, 10, 12]

If you want to learn more about these cool new methods take a look at my latest book at Amazon.

Note: A more common way to include a function as an argument to filter() is to code the function inside the filter’s parentheses as an anonymous function. It will work the same way and it will be destroyed in the end, clearing out memory space in the browser.

You can see a sample on the following text file: JavaScript filter sample file.