In this tutorial, we will learn everything about JavaScript DataTypes. We will get to know the different kinds of data types, how to determine data types, and how to convert them into other data types.

In short, JavaScript has seven primitive data types, namely: String, Number, BigInt, Boolean, undefined, null, and Symbol.

Besides that, there are JavaScript objects, but they will be part of another JavaScript tutorial. This tutorial will focus on primitive data types exclusively.

We determine the data type of a variable with the typeof operator.

And since JavaScript is a dynamically typed language, we do not have to specify the data type of a newly created variable.

Also, data types are automatically converted when we reassign a variable to a new value of a different data type.  

Great documentation about JavaScript data types can be found here.

This is part of our Learn JavaScript series:

1. JavaScript Intro – How to See Your Code Output?
2. JavaScript Syntax, Statements, Variables, and Comments
3. JavaScript Assignment and Arithmetic Operators
4. JavaScript Data Types

Primitive Data Types

Primitive data types are types that are already built into the programming language. They are the most basic form of data type, and they are very different from each other. JavaScript treats variables differently depending on the data type these variables have.

There are seven primitive data types which we will now discuss one after the other.

String

A string is just a series of characters used to represent some form of text.

Let’s have a look at an example:

let word1 = "Hello!";

We create the variable word1 using the keyword let. We assign this variable the value "Hello!" which is a string. We put the content of the text inside double-quotes.

Alternatively, we can use single quotes as well:

let word2 = 'House';

Whether we use double quotes or single quotes is a matter of taste. However, when we have apostrophes in our text, it’s necessary to use double quotes:

let sentence = "It's nice to meet you!";

because this would not work:

let sentence = 'It's nice to meet you!';

The computer thinks that the string ends after "It" and does not know what to do with the rest of the line of code.

Thus, if we create our string with double quotes, we cannot use double quotes within the string, and if we create our string with single quotes, we cannot use single quotes within the string.

Number

The Number data type is one of two numeric data types that JavaScript provides us with.

A number can be an integer or a decimal:

let x = 5;
let y = 2.1;

Here, we declare two variables x and y. Variable x is assigned the integer value 5 and y is assigned the decimal value 2.1.

With numbers, we can perform arithmetic operations, like addition, subtraction, multiplication, division, etc.

let z = x + y;
console.log(z);
>>> 7.1

We declare the variable z and assign it the sum of x and y. When we output z with console.log(), we can see that the sum of x and y is 7.1.

BigInt

The other numeric data type is BigInt which can represent integer values of arbitrary length. The Number data type, however, has limitations.

We create BigInt numbers by adding the letter n to the end of an integer value:

let a = 43158490244031231567560143649357809134n;
console.log(a);
>>> 43158490244031231567560143649357809134n

We create this huge integer number and add the letter n as a suffix. When we output the value of the variable that we assigned this value, the output shows the exact same number.

When we do the same without an n, this is what we get:

let b = 43158490244031231567560143649357809134;
console.log(b);
>>> 4.315849024403123e+37

This way, the output is much less precise than before.

Boolean

A Boolean can have two values: true or false.

let booleanValue1 = true;
let booleanValue2 = false;

The first variable has the value true and the second one has the value false. We can use boolean expressions in if statements or in loops.

For example:

if (booleanValue2) {
    console.log("Hey guys!");
}
>>> 

As we can see, this code snippet does not produce any output.

The if statement checks if the statement inside the parenthesis is true or false. Since booleanValue2 is set to false, the console.log() statement is not executed.

Let’s have a look at another example:

if (booleanValue1) {
    console.log("Hey guys!");
}
>>> Hey guys!

The only thing we changed here was we replaced booleanValue2 with booleanValue1. Since booleanValue1 is true, the console.log() statement will be executed and we get an output.

Undefined

When we declare a variable and we do not assign it a value, the value of this variable is undefined:

let d;
console.log(d);
>>> undefined

When we assign this variable for example a numeric value it is not undefined anymore:

d = 4;
console.log(d);
>>> 4

However, we can set the variable back to undefined:

d = undefined;
console.log(d);
>>> undefined

Null

The null value in JavaScript represents a value that is nonexistent.

let n = null;
console.log(n);
>>> null

One might think that null is the same as undefined.

But there are differences between these two. We must explicitly set a variable to null to make it null, whereas a variable is automatically set to undefined when we do not assign it a value.

So, null values are nonexistent and undefined values are not yet existent.

Symbol

Symbols can be used as unique values. They are created with the Symbol() function:

let symbol1 = Symbol("Symbol");
let symbol2 = Symbol("Symbol");

Here, we create two symbols: symbol1 and symbol2. Both symbols contain the same description ("Symbol").

Let’s check if they are unique. We achieve that with the strict equality operator ===:

console.log(symbol1 === symbol2);
>>> false

When we compare the symbols with the strict equality operator, we get the result false. That shows us that these two symbols are unique.

This is where Symbols differ from strings because if we do the same with strings, this happens:

let string1 = "Hi!";
let string2 = "Hi!";
console.log(string1 === string2);
>>> true

We create two identical strings. When we compare them with the strict equality operator, the result is true since these strings are actually identical.

Determine Data Type with typeof Operator

We use the typeof operator to determine the data type of a variable. This is useful when we don’t know what data type a certain variable has.

let x1 = 5;
console.log(typeof (x1));
>>> number

We assign the newly declared variable x1 the number 5.

Then we check the type of x1 with the typeof operator and put it inside a console.log() statement to output the type.

The output says that the type of x1 is number.

Data Type Conversion

Since JavaScript is a dynamic language, we do not have to specify the type of a variable when declaring it:

let v = 3;
console.log(typeof(v));
>>> number

We declare the variable v and assign it the value 3. When we output the type of this variable, we can see that the type of v is number although we never specified that.

Due to these dynamic features, we can reassign the variable v a value of another type easily:

v = "Hello";
console.log(typeof(v));
>>> string

We assign the variable the string "Hello". And when we output the type of v now, we can see that we successfully changed the type to string.

Summary

All in all, we learned about the different data types that JavaScript provides us with. We learned the data type’s characteristics, how to determine the data type of a variable, and how to reassign variables to values of another data type.

If you wish to learn more about JavaScript, stay tuned for the other tutorials that are being released to Finxter.

And for more tutorials about other computer and data science-related topics, check out the Finxter email academy!

Happy Coding!

The post JavaScript Primitive Data Types appeared first on Be on the Right Side of Change.

In this JavaScript tutorial, we will learn all about the assignment and arithmetic operators that we can use when programming with JavaScript.

In short, with the arithmetic operators, we can perform arithmetic operations like addition, subtraction, multiplication, division, remainder, and exponentiation.

We use the assignment operators to assign values to variables.

Great documentations about JavaScript operators can be found here and here.

This is part of our Learn JavaScript series:

1. JavaScript Intro – How to See Your Code Output?
2. JavaScript Syntax, Statements, Variables, and Comments
3. JavaScript Assignment and Arithmetic Operators

Arithmetic Operators

We will start with the arithmetic operators. As stated in the introduction, these operators are used to perform arithmetic operations.

We create two initial variables and give each a numerical value:

let x = 2;
let y = 7;

So, x has the value 2 and y has the value 7. We will work with these values throughout this section.

We also create the variable z which is supposed to hold the resulting values:

let z;

We only need to declare the variables once with the keyword let. For the following examples, we can just reassign them to other values.

Now, we can perform the actual operations. We start with addition:

Addition Operator

z = x + y;

We assign the variable z the addition of x and y. x and y are the operands and + is the operator.

We will now output z to see what value it has:

console.log(z);
// 9

As we can see, we successfully added x and y since 2+7 is indeed 9.

Likewise, we can perform the other arithmetic operations like

Subtraction Operator

z = y - x;
console.log(z);
// 5

Multiplication Operator

z = y * x;
console.log(z);
// 14

Division Operator

z = y / x;
console.log(z);
// 3.5

So, the difference between these statements is the arithmetic operator. In addition, we use +, in subtraction, we use -, in multiplication, we use *, and in division, we use /.

There are two remaining arithmetic operators: exponentiation and remainder.

Exponentiation Operator

The exponentiation operator raises the first operand to the power of the second one:

z = y ** x;
console.log(z);
// 49

So, we calculate 7² which is 49.

Remainder Operator

The last operator, the remainder operator, returns this value:

z = y % x;
console.log(z);
// 1

This operator is used to calculate the remaining value after a division.

The example says the following: 7 / 2 = 3 and the remainder is 1. So, the 2 fits into the 7 three whole times and there is 1 remaining. The remainder operation only outputs the remainder itself.

Maybe you have come across the remainder operator under its other term “modulo“.  

Increment and Decrement

For incrementing and decrementing, JavaScript provides us with the operators of the same name. But there is a difference between using them as prefixes or postfixes.

Let’s create a new variable x:

let x = 5;

Now, we perform a postfix incrementation of x and assign this value to a newly created variable y:

let y = x++;

Let’s see what value y has:

console.log(y);
// 5

x has the following value:

console.log(x);
// 6

So, with the postfix incrementation, y was not affected, but x was incremented by one.

Let’s do the same again, but this time with prefix incrementation:

x = 5;
y = ++x;

We set x back to 5 and we perform a prefix incrementation of x and assign this value to y.

y now has this value:

console.log(y);
// 6

And x has this value:

console.log(x);
// 6

As we can see, y was also affected by the incrementation because with prefix incrementation the values for both x and y were incremented by 1.

Postfix Decrementation Operator

The same applies to decrementing. We start with postfix decrementation:

x = 5;
y = x--;

We set x back to 5 and we perform a postfix decrementation that we assign to y.

y has this value:

console.log(y);
// 5

And x has this value:

console.log(x);
// 4

So, y was not affected.

Prefix Decrementation Operator

Whereas, with the prefix decrementation, it looks like this:

x = 5;
y = --x;

x is again set back to 5 and we perform a prefix decrementation that we set to y.

y has this value:

console.log(y);
// 4

And x has this value:

console.log(x);
// 4

Thus, y is also affected by the prefix decrementation as was the case with prefix incrementation.

Assignment operators

We use assignment operators to assign values to variables.

Simple Assignment Operator

The equal sign = is known as the assignment operator:

let a = 4;

Here, we create the variable a, and we assign it the numeric value 4.

Addition Assignment Operator

We can also use the assignment operator to add a value to a variable:

a += 1;

Here, we assign the variable a the new value which is the initial value plus 1. Let’s check what value a now has:

console.log(a);
// 5

a has the value 5 because it was initially 4 and we added 1 to it.

The statement

a += 1;

is the same as

a = a + 1;

because we set the variable equal to the initial variable’s value and add 1.

Subtraction Assignment Operator

With subtraction, it looks like similar:

a = 4;
a -= 1;
console.log(a);
// 3

First, we set a back to 4. Then we subtract 1 from a and assign the new value to a. Then we output the value of a which is 3. And as with addition, the statement

a -= 1;

is the same as

a = a - 1;

Multiplication Assignment Operator

Multiplication looks like this:

a = 4;
a *= 2;
console.log(a);
// 8

Again, we set a back to the value 4. Then, we multiply a by 2 and add the new value to a. Next, we output the new value of a and we can see that it is now 8.

Division Assignment Operator

Division also works like this:

a = 4;
a /= 2;
console.log(a);
// 2

After setting a back to 4, we divide it by 2 and assign the new value to a. The output shows that we did this successfully as we get 2 as the output which is the result of dividing 4 by 2.

Remainder Assignment Operator

We do the same with the remainder:

a = 4;
a %= 2;
console.log(a);
// 0

We set a back to 4 and then we calculate the remainder of dividing 4 by 2 and set this value to a.

Since 2 fits into 4 two times and there is no remaining value, a has the value 0 which is confirmed by outputting a.

Exponentiation Assignment Operator

The exponentiation assignment works the same way:

a = 4;
a **= 3;
console.log(a);
// 64

a is set back to 4. Afterward, we calculate 4 to the power of 3 and assign the new value to the variable a. The output is 64 because 4³ equals 64.

The remaining assignment operators are a bit different from the ones we have seen by now.

Left-Shift Assignment Operator

We will start with the left shift assignment:

a = 5;
a <<= 2;
console.log(a);
// 20

So, what is happening here? We set the variable a that we already declared to the value 5. Then we perform the left shift. In this case, we move the bits 2 to the left and assign the new value to our variable a.

The 2-bit representation of the number 5 is 00101 because 1*2² + 1*2⁰ = 5.

And we shift these bits 2 to the left, so now we have got this 2-bit number: 10100 which is 1*2⁴ + 1*2² = 20.

Right-Shift Assignment Operator

Similarly, we can perform a right shift assignment:

a = 9;
a >>= 2;
console.log(a);
// 2

We set a to 9. Then, we perform the right shift assignment where we shift the bits 2 to the right. The 2-bit representation of 9 is: 01001.

When we shift the bits 2 to the right, we get 00010 which is 2. The other 1 is outside the scope and is therefore not taken into account.

The remaining assignment operators are bitwise assignment operators.

Bitwise AND Assignment Operator

The first one is the bitwise AND assignment operator:

a = 5;
a &= 2;
console.log(a);
// 0

a is set to 5. Then we perform a bitwise and operation of 5 and 2 and the result is then set as the new value for a. The output value of a is 0.

The 2-bit representation of 5 is 00101 and the 2-bit representation of 2 is 00010. When we put these 2-bit numbers above each other and perform a bitwise and operation, we get 00000 which is 0.

Bitwise OR Assignment Operator

Likewise, we do the same for the bitwise OR assignment operation.

a = 5;
a |= 4;
console.log(a);
// 5

We set a back to 5 again and then we perform a bitwise or operation of 5 and 4 and the result is assigned to a. The result is 5.

The 2-bit representation of 5 is 00101 and the 2-bit representation of 4 is 00100. When we put these 2-bit numbers above each other and perform a bitwise OR operation, we get 00101 which is 5.

Bitwise XOR Assignment Operator

There is also a bitwise XOR assignment operation:

a = 5;
a ^= 4;
console.log(a);
// 1

a is set back to 5 again. Then we perform the bitwise XOR operation of 5 and 4 and we assign the result to a.

The result of a bitwise xor operation of 5 and 4 is binary 00001 which is decimal 1.

Summary

In this tutorial, we learned all about JavaScript’s assignment and arithmetic operators. We learned how to perform different kinds of arithmetic operations, and how to assign values in different ways.

If you wish to learn more about JavaScript, stay tuned for the other tutorials that are being released to Finxter.

And for more tutorials about other computer and data science-related topics, check out the Finxter email academy!

Happy Coding!

The post JavaScript Assignment and Arithmetic Operators appeared first on Be on the Right Side of Change.

In this JavaScript tutorial, we will learn about the language’s syntax and statements, how to declare variables, and how to create comments.

• In short, statements are separated by semicolons (";"), but they do not have to when the statements are in separate lines.
• Variables are mostly declared with either the keyword “const” or “let“.
• Regarding comments, there are two ways to produce comments: one-line comments ("//") and multi-line comments “(/* * */“).

A great reference to read more about these topics can be found here.

Syntax and statements

The syntax of a programming language is a set of rules that describe how a program should be structured. We have got a sequence of instructions that we can execute.

In JavaScript, these instructions are called statements.

Let’s have a look at an example statement:

let x = 42;

Here, we declare the variable “x” with the keyword “let” and assign it the value “42“.

Note: If you do not understand what “let“, “x“, and “42” mean here, don’t worry. We will look at variables in more detail in the next section.

The important thing here is the semicolon (“;“) at the end of the code line.

A semicolon determines the end of a statement.

However, if there is only one statement written in one code line, we do not necessarily have to set the semicolon:

let x = 42

That being said, if we put multiple statements into one line of code, the statements have to be separated by semicolons:

let x = 42; let y = 0;

Variables

As mentioned in the previous section, we will now shift our focus towards variables.

A variable is used to store data.

The name of a variable can be freely chosen but it has to start with a letter, an underscore, or a dollar sign.

Since JavaScript is case-sensitive, a variable called “jeff” is not the same as “Jeff” because the second “Jeff” starts with a capital letter and the other one does not.

In JavaScript there are four ways to declare variables:

• with the keywords “var“,
• “let“,
• “const“, or
• with no keyword at all.

When we declare a variable with no keyword, it looks like this:

a = 10;

The name of the variable here is “a” and we assign it the number “10” using the assignment operator “=“. However, using no keyword at all can lead to errors and should be avoided.

That’s why we should always use a keyword for the variable declaration.

One keyword is “var“:

var b = "Hello";

The “var” keyword is the original way to declare a variable in JavaScript. Using this keyword, we create function-scoped variables. Here, we declare a variable called “b” and assign it the string "Hello".

We can check the current value for “b” by outputting the value of the variable:

console.log(b);

Result: Hello

We use the “console.log()” statement for producing output. And as we can see, the value of “b” is "Hello".

However, when using “var” we can change the value of an existing variable.

b = 40;

We reassign the value of “b” to the number “40“. Let’s see what the output is now:

console.log(b);

Result: 40

We successfully reassigned the variable “b” to another value.

Also, when declaring a variable with “var“, we do not immediately have to set a value for that variable:

var c;

When we output “c“, this is what happens:

console.log(c);

Output: undefined

We get “undefined” as output because the variable does not hold any value yet. But we can, of course, give that variable a value now:

c = 5;
console.log(c);
// Output: 5

There are two remaining ways to declare a variable: “const” and “let“. These keywords were added to JavaScript a couple of years ago and they declare block-scoped variables.

Declaring a variable with “let” seems to be the same as declaring with “var“:

let d = true;
console.log(d);
// true

Here, we initially gave the new variable “d” the boolean value “true“. And as with “var“, we can change this variable’s value to another value:

d = false;
console.log(d);
// false

We can also declare a variable without an initial value:

let e;
console.log(e);
// undefined

So, we declare a variable that we optionally give a value and that we can change later just as we did with “var“.

The remaining keyword “const” is used to declare a constant:

const pi = 3.14;
console.log(pi);
// 3.14

We declare a variable called “pi” and give it the value “3.14“.

Compared to “var” and “let” we are not able to reassign another value to the variable because it is a constant.

In addition to that, we immediately have to give a “const” variable a value. We cannot declare it without a value.

When to use which variable declaration

We learned different ways to declare variables in JavaScript. So, when should we use which type of declaration?

A general rule of thumb is to always declare variables with the keyword “const” first. And if we think a variable’s value should be able to change and be reassigned, we declare this variable with “let“.

But why not with “var“?

“var” and “let” seem to work the same way. However, the scoping behavior of “var” can lead to errors which is why “let” and “const” were created. Thus, it is not necessary to use “var” at all. Any variable declaration can be done with either “const” or “let“.

Comments

We always want to document what our code is doing and why our code is doing what it does. Comments are great for explaining our code and they are mandatory to use in any code project, especially in large ones.

We can insert comments anywhere in our code and that does not change our program in any way. They are just there for making the code easier to understand.

In JavaScript, we have got two types of comments:

• one-line comments and
• multi-line comments.

One-line comments start with two slashes:

//This is a one-line comment

As we stated above, comments can be inserted anywhere in our code:

const pi = 3.14; // declare variable "pi" as constant

The comment does not change the code in any way.

Multi-line comments, as the name suggests, extend over several lines.

They can be used to create a comment block where we explain something in more detail. They start like this “/*” and end like this “*/” and anything that stands between that will be treated as a comment:

/*
The following code will
calculate some values and 
assign these values to 
new variables.
*/

Summary

All in all, we learned the basics about the programming language JavaScript in this article. We learned about statements, how to declare variables, and how to apply comments to our code.

For more tutorials about other computer and data science-related topics, check out the Finxter email academy!

Happy Coding!

Related Tutorial:

• TypeScript Developer — Income and Opportunity

The post JavaScript: Syntax, Statements, Variables, and Comments appeared first on Be on the Right Side of Change.

In this article, we will get an overview of the programming language JavaScript and we will learn how to see our code output and results when working with JavaScript.

In short, the easiest and most convenient way to see our JavaScript output is to use the console.log() method which shows a message in our web console:

console.log('Hello, world!');

A great JavaScript documentation can be found here.

This article is the first part of a JavaScript series here on Finxter. Feel free to check out the other articles after going through this one!

Feel free to skip ahead to the different ways to see your output in JavaScript—we’ll start slowly with some introductory material next.

What is JavaScript?

JavaScript is a programming language that was created in 1995 to make websites interactive and more dynamic. Together with HTML and CSS, it defines one of the three core technologies for the front-end of the web. If you used any kind of website where you interacted with the website in some way, you definitely came across JavaScript, maybe without knowing it.

So, why should you learn JavaScript? According to the “Stack Overflow Developer Survey 2021” JavaScript continues to be the most commonly used programming language.

Thus, although the language was created almost 30 years ago, it is still very much in demand.

There are countless libraries and frameworks built on top of JavaScript, such as React.js or Vue.js.

Hence, there are plenty of options to dive into after learning the language itself.

JavaScript and HTML

As we already know, JavaScript is mainly used for web development. So, when we are working on a web project, we have an HTML file that looks something like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My homepage</title>
  </head>

  <body>
    <h1>Hello, there!</h1>
    <p id="p1">A paragraph.</p>
    
    <script src="main.js"></script>
  </body>
</html>

This is not an HTML tutorial. However, we will briefly go through what’s happening here.

The HTML file starts with a document type declaration which tells the browser what kind of document to expect.

All the actual information about our website is nested in the <html> tag.

The <head> tag contains the <meta> charset tag which specifies the character encoding.

It also contains the <title> tag which is the title of our homepage and can be seen in the browser’s title bar.

Then comes the <body> tag where we find the actual content of our webpage. Here, we can see a header tag <h1>, a paragraph tag <p> with the ID p1, and the <script> tag.

If we applied some form of CSS, we would link it in the “<head>” tag, but we will not do that here since it would be a bit too much for this tutorial.

The really interesting part of the HTML file for us is the “<script>” tag because it links to our JavaScript file with the src attribute. As we can see, we set the src attribute equal to "main.js" since this is the name of our JavaScript file. When we link a file this way, it means that the HTML file and the JavaScript file have to be in the same folder:

I’m using the code editor Visual Studio Code for development.

Here, I created the folder “JavaScript” and created two files: “index.html” which contains the content we saw above, and the “main.js” file.

Modify the HTML Document with JavaScript

In this section, we will see how to change the HTML document using JavaScript.

To be able to see the changes, we will have to open the HTML file in some way. There are different ways to do so: We can open the folder where our HTML file and JavaScript file are stored.

Here, we can just double-click on the “index.html” file. On my computer, this opens the Chrome browser by default. However, if you want to use another browser, you can right-click on the “index.html” file and open the file with another browser.

Doing it this way, we always have to reload our browser window when we make changes to our files. Thus, this method is not that convenient.

Using the code editor VS code that I already referred to, we can download the extension “Live Server”. To do so, we go to the “Extensions” symbol on the left-hand side and type in “Live Server“.

After clicking “Install” you might have to restart VS code in order to make the extension work properly.

Once we did that, this symbol should appear on the bottom-right corner:

When we click that, it opens the HTML file in our browser.

And now, anytime we make changes to the files and save the changes, the changes appear automatically without refreshing the page manually.

This is what the web page looks like at the moment:

Now, we head over to the “main.js” file and type in our first line of JavaScript code:

document.write('JavaScript is awesome!');

This method writes the String "JavaScript is awesome!" to our HTML document.

Notice that we end the command line with a semicolon to define the end of this statement.

So, when we save the “main.js” file and have a look at our browser again, we can see the following web page:

Compared to the initial web page, we can see that we added the sentence "JavaScript is awesome!" below the rest of the document’s content. Thus, we successfully modified our HTML document using JavaScript.

We can also change an existing HTML element. Therefore, we use this method:

document.getElementById('p1').innerHTML = 'A great paragraph';

Here we access an HTML element by its ID, namely “p1” and change the inner HTML to something new, in this case: "A great paragraph".

When we save the JavaScript file and have a look at our browser again, we can see that the paragraph indeed has changed from "A paragraph" to "A great paragraph":

Display Output with the Console

By now, we saw how to use JavaScript to modify our HTML files and view the changes in our browser.

However, we will often want to get some JavaScript output without modifying an HTML file.

In fact, we do not always work with any kind of HTML when working with JavaScript. A great way to do that is to use the “console” object which gives us access to our browser’s debugging console.

Let’s see how that works. We add a line to our “main.js” file:

console.log('I am in the console!');

We apply the console method “log” here which outputs a message to the browser’s console.

The console.log() method is the most commonly used way to produce JavaScript output and it is especially useful for testing and debugging.

When we have a look at our web page again, we can see that nothing has changed:

That’s because we did not modify the HTML file in any way.

But when we press CTRL + SHIFT + J on Windows or CMD + SHIFT + J on Mac, the browser console opens:

And there we can see the text "I am in the console!" that we put in the “console.log()” statement.  

Inside the console, we can also input JavaScript code:

However, especially for larger projects, it is recommended to use a code editor for development. Using the browser console for coding is good for quick testing.

If we do not want to use the browser at all for getting JavaScript output, we can produce the output within VS code directly.

Therefore, we need to install the “Code Runner” extension:

And we need Node.js to be installed.

Our “main.js” file now only contains this one line of code:

console.log('I am in the console!');

When the JavaScript file is opened, we press CTRL + ALT + N on Windows or CMD + OPTIONS + N on Mac. This runs the JavaScript code and the output will be shown in the output window at the bottom of VS Code:

This method for creating output is also great to use when we have got a lot of code, but we only want to run a part of it.

We will now add a new line of code to the “main.js” file:

console.log('I am in the console!');
console.log('Hi console!');

If we ran the whole code, both messages would be shown.

However, we might only want to show the second line. Therefore, we highlight the second line, and then we hit CTRL + ALT + N on Windows or CMD + OPTIONS + N on Mac.

This way, we are able to run only a fraction of our code which is especially useful when we are working on a big project and we want to test a part of our code.

Summary

In this tutorial, we learned what JavaScript is, how to modify HTML documents with it, and how to view JavaScript output in the browser and in our code editor.

If you wish to learn more about JavaScript, stay tuned for the other tutorials that are being released to Finxter.

And for more tutorials about other computer and data science-related topics, check out the Finxter email academy!

Happy Coding!

The post [JavaScript Intro] How to See Your Code Output? appeared first on Be on the Right Side of Change.

In this tutorial, we will learn all about the Pandas function get_dummies(). This method converts categorical data into dummy or indicator variables.

Here are the parameters from the official documentation:

The Basic Functionality of get_dummies()

We will start with a simple example to get to understand how and where we can apply the get_dummies() method and how exactly it works:

import pandas as pd
x = ['a', 'b', 'c', 'a', 'c']
pd.get_dummies(x)

Output:

First, we import the Pandas library to be able to use the method.

Second, we create a simple Python list that contains several characters and we assign this list to the variable “x“.

Third, we apply the get_dummies() function and inside the function’s parenthesis, we put in the list “x” as the argument.

The output is a Pandas data frame.

The data frame consists of the columns “a“, “b“, and “c” and the rows “0“, “1“, “2“, “3“, and “4“. The cell entries are either “0” or “1“.

So, what exactly is happening here?

The column labels "a", "b", and "c" are the unique characters from the list that we applied (['a', 'b', 'c', 'a', 'c']).

The number of rows in the data frame equals the length of the list. There are five rows and five characters. The ones and zeros in the data frame are the actual dummy variables.

When we have a look at the first entry (column: “a“, row: “0“), we observe that this value is a “1“. That means that the first entry of the list is the character "a" because it is in row “0” (remember: a computer program starts counting at 0) and in column “a“.

Another example is the data frame entry in row “2” and column “c“: This entry is also “1” because in the list there is a "c" in third place.   

Handling NaN Values

In this section, we will find out how the get_dummies() function handles NaN values.

For that reason, we create another Python list. This list contains the same values as the one from the first example, only the last character gets replaced with a NaN value:

import numpy as np
y = ['a', 'b', 'c', 'a', np.nan]
pd.get_dummies(y)

Output:

The new list is assigned to the variable y.

As we can see, the list contains the unique values "a", "b", "c", and "np.nan". The latter is a NaN value that we created using the Numpy library which is why we had to import that library here.

The get_dummies() function creates a data frame just like in the first example.

Again, we get three columns "a", "b", and "c" and five rows. The only difference compared to the first example is the last row. Here, we have zeros exclusively. That’s because the last value from the list is a NaN value which we can’t assign to either "a", "b", or "c".

However, we can make the NaN value visible in the resulting data frame by applying the dummy_na parameter:

pd.get_dummies(y, dummy_na=True)

Output:

We set this parameter to True. That way, we add another column with the label NaN.

In the resulting data frame, the last row’s NaN entry is now 1 because of the NaN value in the list.

Apply get_dummies() to a DataFrame

By now, we have seen how to apply the get_dummies() function on lists.

However, we can also apply this function to DataFrames. So, let’s create a simple data frame:

df = pd.DataFrame({'A': ['a', 'b', 'b'], 'B': ['a', 'c', 'b'], 'C': [1,2,3], 'D': [4,5,6]})
print(df)

We get four columns "A", "B", "C", and "D" and three rows "0", "1", and "2". The columns "A" and "B" contain characters, whereas columns "C" and "D" contain integer values.

Now, we apply get_dummies() with this DataFrame:

pd.get_dummies(df)

Result:

The columns "C" and "D" remain unchanged because only columns with either “object” or “category” data type will be converted.

We also get two "A_" columns and three "B_" columns. That’s because in the initial data frame there are only two unique values in column "A" and three unique values in column "B".

The ones and zeros in the resulting data frame are the dummy variables, just as in the examples above where we applied the get_dummies() function on lists.

For example, the "1" in the first row of the "A_a" column means that the first value from the "A" column in the initial data frame is the character "a".

The “columns” parameter

Especially in large data frames, it might be that we only want to convert specific columns instead of converting every possible column. Therefore, we use the “columns” parameter which we assign the labels of the columns that we want to convert.

We use the data frame again that we created in the previous section:

But now, when applying the get_dummies() function, we add the “columns” parameter and assign it a list with the list entry "B" to state that we only want to get the dummy variables of this column:

pd.get_dummies(df, columns=['B'])

Result:

The first three columns of the resulting data frame are the unchanged columns. They are the same as in the initial data frame.

The columns "C" and "D" are unchanged because they are neither from the “object” data type nor from the “category” data type.

And "A" remains unchanged because we did not add it to our “columns” parameter’s list.

The last three columns in the resulting data frame are the encoded variables from column "B".

By default, the columns parameter is set to None. This way, all columns with either “object” or “category” data type will be converted. We saw that in the previous examples where we did not set the columns parameter.

Changing the Prefixes

We can change the prefixes for our new columns in the resulting data frames by adding the prefix parameter.

Again, we use the data frame df for this purpose:

Now, we perform the get_dummies() operation on this data frame and add the prefix parameter which we assign a list with the prefix labels for the converted columns.

This list should be the same length as the number of columns that get converted:

pd.get_dummies(df, prefix=['column1', 'column2'])

Since two columns get encoded ("A" and "B"), we apply two prefixes to the prefix parameter, "column1" and "column2".

The resulting data frame shows the new prefixes for the encoded columns.

If we want to, we can also change the prefix separator by adding the prefix_sep parameter:

pd.get_dummies(df, prefix=['column1', 'column2'], prefix_sep=':')

Result:

We perform the same get_dummies() operation as before, but we add the prefix_sep parameter and set it to ":".

By default, the separator is "_", but we can change it to whatever we want.

Summary

All in all, we learned all about the Pandas function get_dummies().

We learned the basic functionality of this method, how to handle NaN values, how to perform the function on data frames as well as lists, how to only encode specific columns, and how to set different prefixes.

For more tutorials about Pandas, Python libraries, Python in general, or other computer science-related topics, check out the Finxter email academy.

Happy Coding!          

The post Pandas get_dummies() – A Simple Guide with Video appeared first on Be on the Right Side of Change.

Here are the parameters from the official documentation:

The Basic Functionality of factorize()

To get started, we will start with a coding example that explains how the factorize() function works:

import pandas as pd
codes, uniques = pd.factorize(['c', 'c', 'b', 'd', 'a', 'c', 'a'])

We import the Pandas library at first. Then, we apply the factorize function which we assign a list of characters. We set this function equal to the two variables “codes” and “uniques” because we will get two return values.

This is how the return values look like:

>>> codes
array([0, 0, 1, 2, 3, 0, 3], dtype=int64)
>>> uniques
array(['c', 'b', 'd', 'a'], dtype=object)

Variable codes is an array that contains the numeric values from the initial list.

The best way to see what these numeric values represent is when we put the numeric array below the initial list:

['c', 'c', 'b', 'd', 'a', 'c', 'a']
[0, 0, 1, 2, 3, 0, 3]

We observe that the numeric values are assigned to each unique character in the original list. Since "c" is the first value from the original list, it is assigned the numeric value “0” and so on.

Remember: a computer program starts counting at “0”.

The data type for the “codes” array is “int64” because we get integer values exclusively.

Variable “uniques” shows the unique values from the initial list which are "c", "b", "d", and "a".

The unique values are presented in that order because they occur in that order in the initial list.

The “sort” Parameter

The list we put in the factorize() function in the previous section (['c', 'c', 'b', 'd', 'a', 'c', 'a']) represents some letters from the alphabet. However, the letters here are not ordered alphabetically.

When we apply the sort parameter, factorize() outputs the list in the same order but enumerates the characters in a sorted way:

>>> codes, uniques = pd.factorize(['c', 'c', 'b', 'd', 'a', 'c', 'a'], sort=True)
>>> codes
array([2, 2, 1, 3, 0, 2, 0], dtype=int64)

We perform the same factorize() function as before, but this time, we use the sort parameter and set it equal to True.

Variable codes now shows the array with the numbers for the unique characters being alphabetically ordered.

For example, the "c" is assigned the numeric value 2 because it is the third letter in the alphabet.

Remember: computer programs start counting at 0, so 2 is the third value and not the second one.

The variable uniques now shows the unique values in an alphabetically sorted way:

>>> uniques
array(['a', 'b', 'c', 'd'], dtype=object)

Handling Missing Values

It might be the case that we have some missing values in our list that we want to perform the factorize() operation on.

We will change our initial list by replacing one character with a None value. Let’s see how the factorize() method handles this case:

>>> codes, uniques = pd.factorize(['c', None, 'b', 'd', 'a', 'c', 'a'])
>>> codes
array([ 0, -1, 1, 2, 3, 0, 3], dtype=int64)
>>> uniques
array(['c', 'b', 'd', 'a'], dtype=object)

The second value in the initial list is None.

In the outputted codes array we can see that the None value gets assigned the numeric value -1.

The function’s parameter na_sentinel is used to handle missing values. And since we do not specify this parameter here, the function takes the parameter’s default value which is -1.

However, we can change this value by applying the na_sentinel parameter and assigning it a custom value:

>>> codes, uniques = pd.factorize(['c', None, 'b', 'd', 'a', 'c', 'a'], na_sentinel=-10)
>>> codes
array([ 0, -10, 1, 2, 3, 0, 3], dtype=int64)
>>> uniques
array(['c', 'b', 'd', 'a'], dtype=object)

Here, the None value from the initial list was assigned the numeric value -10 because we set na_sentinel equal to -10.  

In both examples, the uniques array was the same ['c', 'b', 'd', 'a'] because the None value does not count as a unique value.

We can also set the na_sentinel parameter equal to None:

>>> codes, uniques = pd.factorize(['c', None, 'b', 'd', 'a', 'c', 'a'], na_sentinel=None)
>>> codes
array([0, 4, 1, 2, 3, 0, 3], dtype=int64)
>>> uniques
array(['c', 'b', 'd', 'a', nan], dtype=object)

Doing so, the None value in the initial list gets assigned the numeric value 4 in the codes array.

That’s because by setting the na_sentinel parameter equal to None we do not drop the None value, but we count it in.

Since the other characters "c", "b", "d", and "a" get the numeric values 0, 1, 2, and 3 respectively, the None value gets the next numeric value which is 4. Thus, in the uniques array, we can find the value nan after the other characters.

Factorizing Other Pandas Objects

By now, we have only factorized lists. When we factorize other Pandas objects, we get a different type for uniques:

>>> series = pd.Series(['a', 'b', 'a', 'd'])
>>> codes, uniques = pd.factorize(series)
>>> codes
array([0, 1, 0, 2], dtype=int64)
>>> uniques
Index(['a', 'b', 'd'], dtype='object')

Here, we factorize a Pandas series.

The resulting codes array is structured the same way as in the examples before since we get numeric representations for our characters combined in an array.

However, the uniques output has changed because the type of the output is now Index instead of “array” like in the examples above.

We can also factorize a Categorical object:

>>> category = pd.Categorical(['a', 'b', 'a', 'd'])
>>> codes, uniques = pd.factorize(category)
>>> codes
array([0, 1, 0, 2], dtype=int64)
>>> uniques
['a', 'b', 'd'] Categories (3, object): ['a', 'b', 'd']

Again, the codes array is from the type array just like before. But uniques is now from the type Categories.

One special thing about Categorical happens when we assign the parameter categories to it:

>>> category = pd.Categorical(['a', 'b', 'a', 'd'], categories=['a', 'b', 'c', 'd'])
>>> codes, uniques = pd.factorize(category)
>>> codes
array([0, 1, 0, 2], dtype=int64)
>>> uniques
['a', 'b', 'd'] Categories (4, object): ['a', 'b', 'c', 'd']

We take the same characters for the factorization as in the two examples before.

But this time, we apply the categories parameter and assign it the list ['a', 'b', 'c', 'd'] to determine which categories we want to get.

As we can see, in the category list, there is a "c". However, there is no "c" in the list that gets factorized ['a', 'b', 'a', 'd'].

Variable codes remains unchanged, but uniques now has the c added to the Categories list although there is no c to be factorized.

Summary

All in all, we learned all about the Pandas function factorize() in this tutorial. We learned the basic functionality of this method, how to sort the values, how to handle missing values, and how to factorize different kinds of Pandas objects.

For more tutorials about Pandas, Python libraries, Python in general, or other computer science-related topics, check out the Finxter email academy.

Happy Coding!

The post Pandas factorize() – A Simple Guide with Video appeared first on Be on the Right Side of Change.

In this tutorial, we will learn how to apply the merge_asof() function. Described in one sentence, this method performs a merge similar to a left join where we match on near keys instead of equal keys. Thus, the function is especially useful when working with time-series data.

Here are the parameters from the official documentation:

Basic Functionality of merge_asof()

To get started, we will create two data frames “df1” and “df2“:

import pandas as pd
df1 = pd.DataFrame({
        'time':[pd.Timestamp('2021-12-15 12:00:00'), 
                pd.Timestamp('2021-12-15 12:00:01'), 
                pd.Timestamp('2021-12-15 12:00:05'), 
                pd.Timestamp('2021-12-15 12:00:07'), 
                pd.Timestamp('2021-12-15 12:00:09'), 
                pd.Timestamp('2021-12-15 12:00:12')],
        'price': [12, 14, 8, 7, 11, 15]   
    })

print(df1)

Output:

Let’s have a look at the second DataFrame:

df2 = pd.DataFrame({
        'time':[pd.Timestamp('2021-12-15 12:00:00'), 
                pd.Timestamp('2021-12-15 12:00:02'), 
                pd.Timestamp('2021-12-15 12:00:04'), 
                pd.Timestamp('2021-12-15 12:00:08'), 
                pd.Timestamp('2021-12-15 12:00:10'), 
                pd.Timestamp('2021-12-15 12:00:11')],
        
        'price': [5, 7, 9, 12, 8, 12]   
    })

print(df2)

Output:

Both data frames contain a “time” column and a “price” column respectively. However, the prices and timestamps from both data frames differ from each other.

Now that we created the data frames, we are ready to do our first merge_asof() operation:

pd.merge_asof(df1, df2, on='time')

Output:

We put three arguments inside the merge_asof() function. The first two arguments are the two data frames that we want to merge, “df1” and “df2“. The third argument is the “on” parameter which expects the label of the column that we want to merge on. We set this parameter equal to “time“, thus we want to merge on the “time” column.

The resulting data frame has two price columns “price_x” and “price_y“. The “time” column here contains the same timestamps as “df1“. That’s because we set this data frame as the first argument and thus the left data frame. And since the asof merge is similar to a left join, we get the values from the left data frame.

When we take a look at the new price columns, we observe that the “price_x” values equal the price values from “df1“. That’s also the case because “df1” is the left data frame.

The interesting column here is the “price_y” column. The “price_y” value in the first row equals the price value from “df2” in that same row. That’s because the first timestamps from “df1” and “df2” match (they are both "2021-12-15 12:00:00").

However, the timestamps in the second row from both data frames differ from each other ("df1": "2021-12-15 12:00:01", "df2": "2021-12-15 12:00:02").

The “price_y” value in the second row in the resulting data frame is 5 and thus unequal to the price value in “df2” in the same row.

By default, the merge_asof() function performs a backward search. Thus, it takes the price assigned to the backward nearest timestamp from “df2” ("2021-12-15 12:00:00") which is 5 in this case:

Similarly, the “price_y” value in the third row is 9 because the timestamps from “df1” and “df2” in that row don’t match and the function looks backward for the next value.

Since the timestamp for the third row in the resulting data frame is "2021-12-15 12:00:05", it looks for the next value which is backward the nearest to this timestamp in “df2“. The backward nearest timestamp from “df2” is "2021-12-15 12:00:04".

Thus, the function takes this row’s price value:

Parameter “direction”

As mentioned in the previous section, the merge_asof() operation performs a backward search by default because the value for the direction parameter is automatically set to "backward" if not specified otherwise.

The other two options for the direction parameter are "forward" and "nearest". We will start with "forward". As the name suggests, this is the opposite of the backward search, so, we are looking for subsequent matches instead of prior ones.

We will perform the same merge_asof() operation as before, but this time, with a forward search:

pd.merge_asof(df1, df2, on='time', direction='forward')

Output:

And we compare it to the initial merge_asof() operation with a default backward search:

pd.merge_asof(df1, df2, on='time')

Output:

The “time” and “price_x” columns remain unchanged. However, some values in the “price_y” column are different now.

For example, the “price_y” value in the second row is now 7 instead of 5. The timestamp "2021-12-15 12:00:01" does not exist in “df2“, so the function now looks for the next timestamp in “df2” instead of the previous one.

The next timestamp is "2021-12-15 12:00:02", so the function takes this row’s price value which is 7.

The last option for the “direction” parameter is "nearest":

pd.merge_asof(df1, df2, on='time', direction='nearest')

Output:

The only value that changed here compared to the backward search is the “price_y” value in the fourth row which is now 12 instead of 9.

That’s because the "nearest" search looks for the closest match. The timestamp "2021-12-15 12:00:07" does not exist in “df2“, so the function looks for the timestamp that is closest to "2021-12-15 12:00:07". And that is timestamp "2021-12-15 12:00:08".

So, the function takes this row’s price value which is 12.

Allowing Exact Matches

It might be that we do not want to include exact matches in our merges, for example, if we only want to get values from unique timestamps. Therefore, we apply the “allow_exact_matches” parameter. This parameter expects a boolean value and is set to “True” by default.

Again, we perform the initial merge_asof() operation but this time with the “allow_exact_matches” parameter set to “False“:

pd.merge_asof(df1, df2, on='time', allow_exact_matches=False)

Output:

And we compare it to the initial merge_of() operation:

pd.merge_asof(df1, df2, on='time')

Output:

The only value that changed is the first “price_y” value which is “NaN” instead of 5. That’s because the timestamps in the first row of “df1” and in the one in the first row of “df2” match. And since we do not allow exact matches here, the resulting value is “NaN“.

Selecting the Tolerance

The merge_asof() function provides the “tolerance” parameter. Using this parameter, we can determine how much tolerance we want to allow between our timestamps:

pd.merge_asof(df1, df2, on='time', tolerance=pd.Timedelta('1s'))

Output:

The initial merge_asof():

pd.merge_asof(df1, df2, on='time')

Output:

The only difference is that we apply the “tolerance” parameter and set it equal to a Timedelta of one second.

In the fourth row at the timestamp "2021-12-15 12:00:07" we find a “NaN” value which was 9 in the initial merge_asof() operation. The reason behind that is that the timestamp "2021-12-15 12:00:07" does not exist in “df2“.

So, the merge_asof() looks for the previous timestamp in “df2“. However, the previous timestamp is "2021-12-15 12:00:04" which lies not within the tolerance of one second. Thus, the price value from that row is not used. So, we get a “NaN” value in the resulting data frame.

Matching by a Specific Column

For this section, we will modify “df1” and “df2” a little bit:

df1['category'] = ['A', 'A', 'A', 'A', 'B', 'B']
print(df1)

Output:

Also:

df2['category'] = ['A', 'A', 'B', 'B', 'B', 'B']
print(df2)

Output:

We assigned both data frames a “category” column and added the categories “A” and “B”. Notice that the categories are different in “df1” and “df2“.

Now, we perform a merge_asof() operation again and we add the “by” parameter.

pd.merge_asof(df1, df2, on='time', by='category')

Result:

We merge the data frames on the “time” column and by the “category” column.

This was the initial merge_asof() operation:

pd.merge_asof(df1, df2, on='time')

As we can see, some “price_y” values have changed again.

For example, the value in the third row is now 7 instead of 9. The category in the third row in the resulting data frame is “A“.  And since the timestamp "2021-12-15 12:00:05" from the third row in the resulting data frame does not exist in “df2“, the function looks backward for the next timestamp. The next timestamp backward would be "2021-12-15 12:00:04" and the assigned price value for this timestamp in “df2” is 9. But the category for this timestamp is “B“.

However, the function looks for the next timestamp from the same category which is “A“. And this timestamp is "2021-12-15 12:00:02" with a price value of 7. Thus, the “price_y” value in the merged data frame in the third row is 7 and not 9.

Summary

All in all, we studied the Pandas function merge_asof(). We learned the basic functionality of this function, how to search in different directions, whether to allow exact matches or not, how to specify a tolerance, and how to perform merge_asof() by specific columns.

For more tutorials about Pandas, Python libraries, Python in general, or other computer science-related topics, check out the Finxter Blog page.

Happy Coding!

The post Pandas merge_asof() – A Simple Guide with Video appeared first on Be on the Right Side of Change.

Syntax and Parameters

Here are the parameters from the official documentation:

Basic Example

To get started, we will create two data frames:

import pandas as pd
df1 = pd.DataFrame({
    'Date': ['15/01/2019', '16/01/2019', '17/01/2019', '18/01/2019', 
    '19/01/2019', '20/01/2019'],
    'Price': [16.7, 18.4, 20.0, 19.3, 17.1, 21.2]
    })
print(df1)

df2 = pd.DataFrame({
    'Date': ['15/01/2019', '17/01/2019', '18/01/2019', '20/01/2019', 
    '21/01/2019', '22/01/2019'],
    'Price': [14.6, 19.8, 21.9, 20.2, 17.4, 18.0]
})

print(df2)

Here, we import the Pandas library as the first step. Then, we create the two data frames “df1” and “df2” which contain a “Date” column and a “Price” column respectively.

Now that we created these data frames, in the next step we can perform our first merge_ordered() operation:

pd.merge_ordered(df1, df2, on='Date')

We apply the merge_ordered() function and put in the two data frames as the first two arguments of the function. That’s because these are the data frames that we want to merge. The third parameter is the “on” parameter. This parameter expects the column or a list of columns that we want to perform the merge on. We choose the “Date” column here.

The outputted data frame is longer than each of the two initial data frames. That’s because, by default, the merge_ordered() function performs a so-called “outer” join. That means, we use the union of keys from both our data frames. Since there are eight unique dates, the resulting data frame has eight rows in total.

We also get two price columns: “Price_x” and “Price_y“. For each date, we get a price from the left data frame (“Price_x“) and the right data frame (“Price_y“). If there is a “NaN” value, that means, for this specific date, we have only one price value. For example, for the "16.01.2019", we do not get a “Price_y” value because this date is only found in the first data frame.

The “fill_method” parameter

As we saw in the example above, there were some missing values labeled with “NaN“:

We can get rid of these “NaN” values by replacing these values with the previous value. We achieve that by applying the “fill_method” parameter and assigning it to “ffill“:

pd.merge_ordered(df1, df2, on='Date', fill_method='ffill')

Now, we do not have any more missing values here. For example, the “NaN” value in the “Price_y” column for the date "16.01.2019" was replaced with the previous value from that column (“14.6“).

If multiple values are missing directly one after the other, all missing values get replaced by the last available value. For example, the last two values from the “Price_x” column were missing. They were both replaced by the value of the third last row which was "21.2".

The “suffixes” parameter

In the previous example, the two price columns were named “Price_x” and “Price_y” by default. However, we can change these labels by applying the “suffixes” parameter:

pd.merge_ordered(df1, df2, on='Date', fill_method='ffill', suffixes=['_leftDF', '_rightDF'])

We performed the same merge_ordered() operation as before. But this time, we added the “suffixes” parameter and assigned it a list with the strings “_leftDF” and “_rightDF“. The two price columns in the resulting data frame are now called “Price_leftDF” and “Price_rightDF“.

As the name of the parameter suggests, we only change the suffixes here, not the whole label. That’s why the column labels still say “Price” before the suffixes because the initial column label said “Price” and we only added the suffixes after that label.

The different kinds of joins

As mentioned in the introduction, by default the merge_ordered() function performs an outer join. That means we take the union of keys from both data frames.

But we can change that by using the “how” parameter.

Another type of join is the “inner” join which uses the intersection of keys from both data frames:

pd.merge_ordered(df1, df2, on='Date', fill_method='ffill', how='inner')

That means, we only get the dates that are found in both data frames.

The remaining two options the “how” parameter provides us with are the “left” join and the “right” join. The left join uses only the keys from the left data frame.

pd.merge_ordered(df1, df2, on='Date', fill_method='ffill', how='left')

Whereas the right join only uses the keys from the right data frame.

pd.merge_ordered(df1, df2, on='Date', fill_method='ffill', how='right')

Grouping by group columns

For this section, we will modify “df1” a little bit:

df1['Category'] = ['A', 'A', 'A', 'B', 'B', 'B']
print(df1)

We added a column called “Category” and assigned the categories “A” or “B” to each row.

“df2” remains unchanged:

Now, we apply the “left_by” parameter and assign it the value column label “Category“:

pd.merge_ordered(df1, df2, on='Date', left_by="Category")

This way, we group the left data frame by the “Category” column and merge that piece by piece with the right data frame.

When we look at the resulting data frame, we can observe that, for example, the “Price_x” entry for the date "18.01.2019" in row 3 is “NaN” although there is an entry for that date in “df1“. However, in “df1“, the date is assigned to the category “B“. So, in the merged data frame, the “Price_x” value for the date "18.01.2019" is found in row 9 with category “B“.

If we had a group column in the right data frame, we could do the same with the “right_by” parameter.

Summary

All in all, we learned how to use the Pandas function merge_ordered(). We saw how to apply the various parameters, how to use the different types of joins, and how to group by group columns.

For more tutorials about Pandas, Python libraries, Python in general, or other computer science-related topics, check out the Finxter Blog page.

Happy Coding!

The post Pandas merge_ordered() – A Simple Guide with Video appeared first on Be on the Right Side of Change.

As you go through the tutorial, you can watch the following video guide for ease of understanding:

Syntax and Parameters

pandas.merge(left, right, how='inner', on=None, left_on=None, 
             right_on=None, left_index=False, right_index=False, 
             sort=False, suffixes=('_x', '_y'), copy=True, 
             indicator=False, validate=None)

Here are the parameters from the official documentation:

The return value of the merge() function is a DataFrame consisting of the two merged objects.

Basic Example

To get started, we will first create two data frames that we will be merging in several ways throughout this tutorial:

import pandas as pd

df1 = pd.DataFrame({'Player': ['Jeremy', 'Alice', 'Bob', 'John', 'Mary'],
                    'Age': [31, 25, 27, 28, 21]})
df2 = pd.DataFrame({'Player': ['Alice', 'John', 'Mary'],
                    'Position': ['Pitcher', 'Catcher', 'Center Field'],
                    'Throwing Speed': [71, 80, 81]})
print(df1)
print()
print(df2)

Output:

… and …

First, we import the Pandas library. Then we create the two data frames “df1” and “df2“. The first data frame contains the player’s names of a Baseball team, as well as the player’s age.

The second data frame also contains a part of the player’s names of the first data frame and these player’s position and their throwing speed.

We finally output the data frames and see the mentioned information in a compact way.

Now, we apply the merge() function:

pd.merge(df1, df2, on="Player")

Output:

The first two arguments are the names of the data frames that we want to merge. The third argument is the “on” parameter. The “on” parameter expects the column names to join on and we set it equal to “Player”.

Thus, Pandas merges these data frames on the “Player” column. The merged data frame only contains the players “Alice”, “John”, and “Mary” because these are the only players contained in both data frames. So, “Jeremy” and “Bob” from the first data frame are dropped.

The “left_on” and “right_on” Parameters

For this section, we will modify the data frame “df2” a little bit:

df2 = pd.DataFrame({'Name': ['Alice', 'John', 'Mary'],
                    'Position': ['Pitcher', 'Catcher', 'Center Field'],
                    'Throwing Speed': [71, 80, 81]})
print(df2)

Output:

The only difference is that we changed the label of the “Player” column to “Name”.

Now, we want to merge the data frames “df1” and “df2” again. However, we cannot do so by applying the “on” parameter and assigning it to “Player” since “df2” does not have a “Player” column anymore.

Therefore, we use the two parameters “left_on” and “right_on“. We set the “left_on” parameter equal to the column label that we want to use for merging from the first data frame and we do the same with the “right_on” parameter for the second data frame:

pd.merge(df1, df2, left_on="Player", right_on="Name")

Output:

This way, we can merge data frames by columns with different column labels.

Since the “Player” column and the “Name” column contain the same information, we might want to get rid of one of them:

df = pd.merge(df1, df2, left_on="Player", right_on="Name")
df = df.drop("Name", axis=1)
print(df)

Output:

We assign the merged data frame to a new variable called “df” and then we apply the drop() function and assign it the “Name” column. The “axis” parameter is set to “1” to state that we want to drop a column and not a row.

The outputted data frame now misses the “Name” column.

Merge Using Different Joins

In this next step, we will learn about the different types of merges and how to apply them using the “how” parameter.

Therefore, we change “df2” again. We rename the “Name” column back to “Player”. Also, we add two new players, “Jane” and “Mick”:

df2 = pd.DataFrame({'Player': ['Alice', 'John', 'Mary', 
                               'Jane', 'Mick'],
                    'Position': ['Pitcher', 'Catcher', 
                                 'Center Field', 'Pitcher', 'Catcher'],
                    'Throwing Speed': [71, 80, 81, 79, 75]})

“df1” still looks like this:

print(df1)

We start with the so-called “inner” join.

Here, we use the intersection of keys from both our data frames:

pd.merge(df1, df2, how="inner", on="Player")

As before, we assign the “on” parameter the value “Player” to specify what column we want to join on. We set the “how” parameter equal to "inner" to state that we want to perform an inner join.

The outputted data frame contains only the players that occur in both data frames. When we compare that merge to the merge we did in the first section, we can see that they are the same. That’s because "inner" is the default value for the “how” parameter.

The next type of merge we are looking at is the “outer” join.

The outer join is the union of keys from both our data frames:

pd.merge(df1, df2, how="outer", on="Player")

The data frame contains all players from both data frames. Bob, for example, has no value for position and throwing speed because he is only contained in “df1” where we don’t get position and throwing speed values. Similarly, Jane does not have an age value here since she is only found in “df2” which does not provide age information.

The next merge type is the "left" join.

Here, we use the keys from the left data frame exclusively:

pd.merge(df1, df2, how="left", on="Player")

This data frame contains all the players from the left data frame which is “df1” in our case. Thus, Jeremy and Bob have no position and throwing speed values.

The "right" join is similar to the left join:

We are using the keys from the right data frame only:

pd.merge(df1, df2, how="right", on="Player")

After merging, the data frame contains all the players from the right data frame which is “df2“. That’s why Jane and Mick have no age values here.

The last join, we are learning about, is a bit special. It is called “cross” join and it creates the cartesian product from both data frames while keeping the order of the keys from the left data frame:

pd.merge(df1, df2, how="cross")

We can observe that we have two “Player” columns now, “Player_x” and “Player_y”. Each player of “df2” is assigned to each player of “df1“. Since both data frames contain five rows, the resulting data frame now has 25 rows (5×5).

The “indicator” Parameter

When we merge two data frames, it might be useful to gain information about the source of the merge keys, whether they were observed only in the left data frame, only in the right data frame, or in both. Therefore, we use the “indicator” parameter:

pd.merge(df1, df2, how="outer", on="Player", indicator=True)

We perform an outer join on the “Player” column and add the “indicator” and we set it to “True“. This way, we get an additional column called “_merge” with the entries “left_only“, “right_only“, and “both“.

For example, Jeremy gets assigned the value “left_only” because he only appears in the left data frame “df1“. And Mary’s “_merge” value is set to “both” because she is found in both data frames.

Summary

In this tutorial, we learned about the Pandas function merge(). We learned how to perform different kinds of merges using the function’s various parameters.

For more tutorials about Pandas, Python libraries, Python in general, or other computer science-related topics, check out the Finxter Blog page.

Happy Coding!

The post Pandas merge() – A Simple Illustrated Guide with Video appeared first on Be on the Right Side of Change.

Here are the parameters from the official documentation:

Basic Example

Let’s create a data frame that we will be using throughout the tutorial:

import pandas as pd

df = pd.DataFrame({'Competitor':['Alice', 'Mary', 'John', 'Ann', 'Bob', 'Jane', 'Tom', 'Vincent', 'Ella'],
                    'Score':[1,6,11,2,9,16,5,2,19]})
print(df)

We import the Pandas library and then we create a Pandas data frame which we assign to the variable “df“. The outputted data frame provides information about several competitors and a score that each competitor reached.

Now, we apply the qcut() function:

pd.qcut(x = df['Score'], q = 3)

Inside the function, we put in “df['Score']” as the value for the parameter “x” to state that this is the column that we want to use to calculate the bins on. The second argument is “3” which we assign to the “q” parameter. This is the number of quantiles.

The output assigns each score to an interval. There are a few things to observe here.

First, we can see at the bottom of the output the intervals in order (“(0.999, 4.0] < (4.0, 9.667] < (9.667, 19.0]“). The intervals start with parenthesis and end with square brackets. That means that the left value is not included in the interval, but the right one is. For example, “0.999” is not included, whereas “4.0” is included.

Additionally, we can see that the intervals do not have the same size. The first interval has a size of 3, the second has a size of 5.667 and the third one has a size of 9.333. Why are the intervals these particular sizes?

To answer that, we have to take a look at the number of values in each interval:

pd.qcut(x = df['Score'], q = 3).value_counts()

We use the value_counts() function to achieve that. We can see that each bin has an equal amount of values. By assigning “3” to the “q” parameter we state that we want to get three intervals. And each interval should contain just as many values as the others. So, the interval sizes adjust to that.

To make it better visible which interval belongs to which score, we create a new column for the data frame:

df['Category'] = pd.qcut(x = df['Score'], q = 3)
print(df)

We create a new column called “Category” which contains the intervals and we add it to the existing data frame.

The “q” parameter

In the previous example, we set the “q” parameter equal to “3”. Of course, we can also assign other values here. Apart from an integer value, we can assign this parameter a list:

pd.qcut(x = df['Score'], q = [0, .25, .5, .75, 1.])

Output:

0	(0.999, 2.0]
1	(2.0, 6.0]
2	(6.0, 11.0]
3	(0.999, 2.0]
4	(6.0, 11.0]
5	(11.0, 19.0]
6	(2.0, 6.0]
7	(0.999, 2.0]
8	(11.0, 19.0]
Name: Score, dtype: category
Categories: (4, interval[float64, right]): [(0.999, 2.0] < (2.0, 6.0] < (6.0, 11.0] < (11.0, 19.0]]

This way, we directly determine how many percent of the values are included in each interval. For example, the first interval (0.999, 2.0] contains the first 25% of the score values. Since the intervals we created here all have the same length of 25%, we should get an equal amount of values in each interval.

Let’s see if that’s the case:

pd.qcut(x = df['Score'], q = [0, .25, .5, .75, 1.]).value_counts()

Output:

(0.999, 2.0]	3
(2.0, 6.0]	2
(6.0, 11.0]	2
(11.0, 19.0]	2
Name: Score, dtype: int64

We make use of the value_counts() function again. As we can see, the first interval contains one value more than the other ones. That’s because we have nine scores in total and nine cannot be divided by four. Consequently, the number of values per interval cannot be the same in all intervals.

The distance between the quantiles in the array does not have to be even:

pd.qcut(x = df['Score'], q = [0, .5, .7, .85, 1.])

Output:

0	(0.999, 6.0]
1	(0.999, 6.0]
2	(10.2, 15.0]
3	(0.999, 6.0]
4	(6.0, 10.2]
5	(15.0, 19.0]
6	(0.999, 6.0]
7	(0.999, 6.0]
8	(15.0, 19.0]
	
Name: Score, dtype: category
Categories: (4, interval[float64, right]): [(0.999, 6.0] < (6.0, 10.2] < (10.2, 15.0] < (15.0, 19.0]]

The first interval is way bigger than the other ones. Thus, the number of values per interval is not evenly distributed:

pd.qcut(x = df['Score'], q = [0, .5, .7, .85, 1.]).value_counts()

Output:

(0.999, 6.0]	5
(15.0, 19.0]	2
(6.0, 10.2]	1
(10.2, 15.0]	1
Name: Score, dtype: int64

As we can observe, the first interval contains the most score values.

Determine the Interval Precision

By now, the intervals we created all had a specific precision:

pd.qcut(x = df['Score'], q = 3)

Output:

0	(0.999, 4.0]
1	(4.0, 9.667]
2	(9.667, 19.0]
3	(0.999, 4.0]
4	(4.0, 9.667]
5	(9.667, 19.0]
6	(4.0, 9.667]
7	(0.999, 4.0]
8	(9.667, 19.0]
	
Name: Score, dtype: category
Categories (3, interval[float64, right]): [(0.999, 4.0] < (4.0, 9.667] < (9.667, 19.0]]

As we can see, there are three decimal places except for the integer values that only have “.0” as the decimal place.

We can change that precision using the “precision” parameter. This parameter expects an integer value which determines how many decimal places we want to get.

Let’s assign “5” here to get five decimal places:

pd.qcut(x = df['Score'], q = 3, precision=5)

Output:

0	(0.99999, 4.0]
1	(4.0, 9.66667]
2	(9.66667, 19.0]
3	(0.99999, 4.0]
4	(4.0, 9.66667]
5	(9.66667, 19.0]
6	(4.0, 9.66667]
7	(0.99999, 4.0]
8	(9.66667, 19.0]
		
Name: Score, dtype: category
Categories: (3, interval[float64, right]): [(0.99999, 4.0] < (4.0, 9.66667] < (9.66667, 19.0]]

In this manner, we create more precise intervals. How precise we should create them depends on the use case.

Print out the bins

If we want to print out the bins that we created, we apply the “retbins” parameter and set it to “True“:

pd.qcut(x = df['Score'],q = 3, retbins=True)

Output:

0	(0.999, 4.0]
1	(4.0, 9.667]
2	(9.667, 19.0]
3	(0.999, 4.0]
4	(4.0, 9.667]
5	(9.667, 19.0]
6	(4.0, 9.667]
7	(0.999, 4.0]
8	(9.667, 19.0]
	
Name: Score, dtype: category
Categories (3, interval[float64, right]): [(0.999, 4.0] < (4.0, 9.667] < (9.667, 19.0]]
array([1., 4., 9.66666667, 19.]))

The only difference here compared to when we did not apply the “retbins” parameter is the additional line “array” at the bottom of the output. Here, we get the resulting bins inside an array.

This can be useful especially when we assign the “q” parameter an integer as we did here instead of a list.

Define labels for the categories

We already saw how to create a new column to our data frame to see which score belongs to which interval:

df['Category'] = pd.qcut(x = df['Score'], q = 3)
print(df)

Output:

	Competitor	Score	Category
0	Alice	1	(0.999, 4.0]
1	Mary	6	(4.0, 9.667]
2	John	11	(9.667, 19.0]
3	Ann	2	(0.999, 4.0]
4	Bob	9	(4.0, 9.667]
5	Jane	16	(9.667, 19.0]
6	Tom	5	(4.0, 9.667]
7	Vincent	2	(0.999, 4.0]
8	Ella	19	(9.667, 19.0]

This way, we get a great overview of our data. However, assigning the intervals to the scores can be a bit confusing as we do not clearly see what a good score is and what isn’t.

This is where the “labels” parameter comes into play. We can give each interval a label to categorize our data:

df['Category'] = pd.qcut(x = df['Score'], q = 3, labels=['bad', 'good', 'exceptional'])
print(df)

Output:

	Competitor	Score	Category
0	Alice	1	bad
1	Mary	6	good
2	John	11	exceptional
3	Ann	2	bad
4	Bob	9	good
5	Jane	16	exceptional
6	Tom	5	good
7	Vincent	2	bad
8	Ella	19	exceptional

The “labels” parameter expects a list of the labels. We choose the labels "bad", "good", and "exceptional". So, the smallest interval is assigned the label "bad", the middle interval is assigned the label "good", and the biggest interval is assigned the label "exceptional".

Thus, we can categorize our data in a more user-friendly way.

Comparison with the cut() function

Chances are when you work with the qcut() function, you have come across the cut() function as well.

In this final section, we will see the difference between the qcut() and the cut() function.

Let’s refer to our initial example of the qcut() function where we assigned the “q” parameter the value “3”:

pd.qcut(x = df['Score'], q = 3)

Output:

0	(0.999, 4.0]
1	(4.0, 9.667]
2	(9.667, 19.0]
3	(0.999, 4.0]
4	(4.0, 9.667]
5	(9.667, 19.0]
6	(4.0, 9.667]
7	(0.999, 4.0]
8	(9.667, 19.0]
	
Name: Score, dtype: category
Categories (3, interval[float64, right]): [(0.999, 4.0] < (4.0, 9.667] < (9.667, 19.0]]

We created three quantiles in a way that each interval now contains the same amount of score values:

pd.qcut(x = df['Score'], q = 3).value_counts()

Output:

(0.999, 4.0]	3
(4.0, 9.667]	3
(9.667, 19.0]	3
Name: score, dtype: int64

Now we do essentially the same with the cut() function:

pd.cut(x = df['Score'], bins = 3)

Output:

0	(0.982, 7.0]
1	(0.982, 7.0]
2	(7.0, 13.0]
3	(0.982, 7.0]
4	(7.0, 13.0]
5	(13.0, 19.0]
6	(0.982, 7.0]
7	(0.982, 7.0]
8	(13.0, 19.0]
	
Name: Score, dtype: category
Categories: (3, interval[float64, right]): [(0.982, 7.0] < (7.0, 13.0] < (13.0, 19.0]]

The cut() function does not provide a “q” parameter, instead, it has the “bins” parameter which we also assign the value “3” to create three bins.

As we can see, the intervals are different from the ones from the qcut() function. Compared to the qcut() function, these intervals all have the same size. They are all six units long.

However, the number of values in each interval is different:

pd.cut(x = df['Score'], bins = 3).value_counts()

Output:

(0.982, 7.0]	5
(7.0, 13.0]	2
(13.0, 19.0]	2
Name: Score, dtype: int64

Thus, qcut() creates intervals that are not equally long but they all contain the same number of values. Whereas the cut() function creates equal-sized intervals that don’t necessarily have the same number of values in them.

Summary

In this tutorial, we learned about the qcut() function. We saw how to create intervals in several ways, how to determine the interval’s precision, how to label our categories, and we determined the differences to the cut() function.

For more tutorials about Pandas, Python libraries, Python in general, or other computer science-related topics, check out the Finxter Blog page.

Happy Coding!

The post Pandas qcut() – A Simple Guide with Video appeared first on Be on the Right Side of Change.