Home » JavaScript

An Introduction to JavaScript (Vanilla JS)

In this tutorial, we are going to learn about JavaScript (Vanilla JS) - its introduction, data types, keywords, variable declarations using var/let.
Submitted by Himanshu Bhatt, on September 15, 2018

JavaScript is one of the top programming languages in recent years. It is the most popular programming languages in 2018. You might be surprised knowing that today JavaScript is used by most popular sites like Google.com, Youtube.com, Facebook.com, Amazon.com, Wikipedia.com, Twitter or Linkedin, … and so on, are using JavaScript. So JavaScript is a must have a programming language in your arsenal.

I will cover here Vanilla JavaScript.

The terms Vanilla JavaScript or Vanilla JS refer to JavaScript not extended by any Frameworks or additional libraries. Scripts written in Vanilla JS are plain JavaScript code.

Source: https://en.wikipedia.org/wiki/JavaScript

Before we dive into the programming of JS(JavaScript), one thing to remember: Javascript is NOT Java. We are covering the basics of Javascript, that is building basic concepts.

Lesson 1:

Let's start with the Hello world...

    console.log("Hello world")

And this will print "Hello world" (without "") on the console.

We can print a different kind of statements as...

    console.log(5+7) //output:13
    console.log(2-5) //output:-3
    console.log("3+5") //output:3+5

Here is a screenshot of the above code of lines and output (on a CLI)...

If you don't understand it yet and don't worry, I am going to explain Data type first.

Unlike humans, the machine interprets everything with 0 and 1 at the hardware level, but in high-level programming, there are data types by which computer store data. If you are familiar with programming languages like C/C++, Java you must know it. We have the following:

• int as integers ......-2,-1,0,1,2.......
• float, 3.132 1.001 etc
• double, 1.2313231232 (same as float but with more precision)
• boolean that is either true or false
• char as a character, it holds only one character 'a','A','#', '3' etc.
• String, it is a collection of characters "HelloWorld", "IncludeHelp" etc.

Strings are usually encased in double quotes " " and characters with single ' ', These are some fundamental data types that are usually the same in most of the programming languages. But JS take cares about the data types by itself so we do not need to explicitly tell it about the type of data we are handling. Now let's have some codes enough theory.

    var foo = "hi"
    var bar = 567
    console.log(foo,bar) //output: hi 567

Now here we created two variables foo and bar, declared with keyword var.

Ok here is some new vocabs variables and keywords. Keywords are fixed words in JS with special meanings like here we used var to declare a variable.

Now, what a variable is? Just like variables in math these variable are used to store data. We saw two different variables in above code snippet foo and bar. Can you guess there type?

Yes, foo is a string and bar is an integer value.

const: In the following code snippet, we declared a single variable, let's see what it is:

let name = 'Alex'
let name2 = "Smith"
const score=12

console.log(name+" "+name2,score)

var a = 25;
var b = 2.0;

function printValue( input1, input2) {
    console.log("This is input 1: " + input1 + " this is " + input2 + " input2");
}

printValue(a, b);

Now the output of the above code snippet is given below:

const score is a constant variable whose value cannot be changed, after it initialized. Like in the above code snippet we have score = 12.

Task: Let's try above code and try to change value of score at end of the program and print it, see what happens.

Yes, you will receive an error, again this is because const cannot be changed.

You might be thinking then why to use const when you cannot change its value.

Well, let's say we won't make a website with 2 account types either customer or administrator. Now a customer cannot become an administrator or vice-versa. So we prefer to use const keyword to fix an account type. Similarly, const can come handy at several places.

JavaScript Tutorial »

---