JavaScript Tutorial

It is a simple JavaScript tutorial for anyone who wants to learn JavaScript. Right now I am learning JavaScript and thought to share with you whatever I am learning.

Photo by Greg Rakozy on Unsplash

I am taking a JS lesson from Jonas Schmedtmann from Udemy and if you like you can check out his course here: Learn Modern Javascript (Build and Test Apps) — Full Course | Udemy

Let’s Get Started

To run your first code, go to the console section of your browser. Here I am using Microsoft Edge browser and you can go to the upper right three dots … > more tools > Developer tools > console or type F12 to go to the developer console

To print anything, we can use the alert function in JS.

alert("JS is Good")

after writing the code, click enter to see the output below.

JavaScript alert

or use console.log to print anything on the console.

console.log("JS is good");

do some simple mathematics

console.log(2+3);
//output
5

either you can directly write in console (in that case you will just write the code like 2+3) or create a simple HTML page and link your JavaScript script to it, to show the JavaScript output to the console of the website. You can just follow this simple JavaScript setup to go forward: JavaScript Tutorials for Beginners — Part 1 — How to Setup JavaScript — YouTube

Variables:

In any programming language, the variable is something like a container or space to store something. Here in JavaScript, it is a simple value. It could be a string or some decimal or float number or some other data type. Let’s quickly store your name and print it in the console.

let myFirstName = "Soumyabrata";
console.log(myFirstName);

To declare the variable name, you should use camelCasing (first letter in a word in the capital) as I do it here for variable declaration. but you can not use numbers or some special characters to declare the variables like #myFirstName or 12myFirst etc.

In JavaScript, there are 7 data types. Some of them are Numbers, String, Boolean, etc. But all of them are dynamic. Like other low-level languages, you don’t have to mention them in the variable declaration.

Each data type is different, you could find the type of data you have. You can simply use, type of operator to find the data type. Suppose I would like to find the data type of myFirstName, I will write

console.log(typeof myFirstName);
//output
string

By the way, to comment out something, you could use // or /* code */ in JavaScript.

Variable Declaration

There are four ways you can declare variables in JavaScript

//way-1
let myFirstName = "Soumyabrata";
//way-2
const myFirstName = "Soumyabrata";
//way-3
myFirstName = "Soumyabrata";
//way-4
var myFirstName = "Soumyabrata";

way-1, which is dynamic declarations. You can reassign other values to the same variables

myFirstName = "Sam";

but for way-2, const, JavaScript will show you the error, if you ever try to reassign the variable to other values.

way-3 is similar to way-1, you can reassign the variable to any values but here you don’t have to mention the let at the beginning of the variable declaration.

way-4 is the old way of doing things in JavaScript. It is obsolete now. It works in the same way as the let. You should avoid it too.

By the way, you can assign an empty variable in JavaScript without any value. You can assign the value later.

Let yourFirstName
yourFirstName = "Your Name"

Operators

Like other programming languages, JavaScript has some built-in operators. Like multiplication(*), summation (+), subtraction (-) etc. Here I have given some of the operations in the variable and its meanings commented here.

variable = 2 + 3
variable = variable - 1
variable *= 5 //variable = variable * 5
variable /= 2 //variable = variable / 2
variable += 5 //variable = variable + 5
variable++ // = variable + 1
variable-- //variable = variable - 1
console.log(variable)
// output
15

String and Literals

In JavaScript, you can handle string in many ways. The most efficient way would be literals. Through the below examples, you will understand it better. I will give the same example using the traditional approach and literals approach, and explain both.

const myName = "Soumyabrata Roy "
const birthYear = 1990
const passion = " Data Technology and Music"
//traditional
console.log("My name is " + myName + " and my year of birth is " + birthYear+ " and I'am passionate about "+passion)
//literals. Check here I have used backticks inside the bracket
console.log(`My name is ${myName} and my year of birth is ${birthYear} and I am passionate about ${passion}`)
//output
My name is Soumyabrata Roy and my year of birth is 1990 and I'am passionate about  Data Technology and Music

You can see that the output is the same but the approaches are different. The first one is the traditional approach and the second one is the literals approach. For the first part, I have to use + and spaces to manage the output sentence but in the second part I don’t have to do anything, just use backticks (`) and ${} sign to create the sentence.

For new lines also you can use the same approach.

//traditional
console.log("Hello" + myName +"\n\How are you?")
//using literals
console.log(`Hello ${myName}
How are you?`)
//output
Hello Soumyabrata Roy 
How are you?

In the first example, I have used the \n\ for new line creation but for the second approach, I have written the sentence in a normal way using enter for the new line and I get a similar result at the output.

Here you may have noticed that in JavaScript, I can directly concatenate strings and numbers (myName + “ and my year of birth is “ + birthYear) and JavaScript doesn’t complain anything about it. but in other languages like Python, you have to convert numbers into strings and then you can add them together to get the output.

If Else Statement

What if you could do some conditional operations in JavaScript. It will immensely help you in the future to solve a lot of scenarios. Like other programming languages, you can use If else in JavaScript. In the below example you will find it easily.

const yourName = "Soumyabrata"
if(yourName == "Soumyabrata"){
console.log("His nick name is Raju")
}
else{
console.log(`Don't know the Nick name`)
}
//output
His nick name is Raju

In this example you can see that if the yourName variable equals to “Soumyabrata”, it is showing the appropriate nickname else it shows “Don’t know the Nickname”. This is how if-else works in JavaScript.

Always remember this format for if-else in JavaScript.

if(condition){
result
}
else{
other result
}

Type Conversion in JavaScript

In JavaScript or in other programming languages, conversion mean a change in data types. Like string to number or number to string. In JavaScript there are three types of conversion is available. string to a number, number to a string, Boolean conversion.

Here I am going to show you the conversion between number and string.

// giving input year as quoted string
const inputYear = '1990'
// converting it to number and show both results side by side
console.log(Number(inputYear), inputYear)
//output
1990 "1990"

You can see the Number function successfully converted the string into a number. Now we can do some calculations on it.

console.log(Number(inputYear) + 18)
//output
2008

similar to this, we can also convert numbers into strings using the String function.

console.log(String(30), 30)
//output
30 30

But if you try to convert in the wrong way, JavaScript will produce NaN at the output.

console.log(Number("Soumyabrata"))
//output
NaN

Type Coercion in JavaScript

In type conversion, we have to convert different data types manually but JavaScript can change the data types automatically. This phenomenon is called type coercion.

In JS, if you write string and number at the same time, JavaScript automatically detects the data type and produces the output. I am giving you an example.

console.log('I am '+30+' years old')
//output
I am 30 years old

In the above example, 30 is a number. JS automatically converted 30 to a string and giving the output.

Let’s see some other examples

console.log('23'-10-2)
console.log('23'/'2')
console.log('23'>'18')
//output
11
11.5
true

Here JS converted the string into a number automatically and giving you the output and it is only applicable for other numerical operators except the + sign.

When you use the + sign, you can see that the output becomes different.

console.log('9'+'5'-2)
console.log('23'/'2'+1)
//output
93
12.5

for + sign, JavaScript always converts the values into string data type irrespective of the operation.

for the first example, ‘9’ + ‘5’ becomes ‘95’ and then JS converted it to numerical value because of the — 2 operations and giving you the 93 output.

It is a little confusing at first but once you are habituated, it will become much easier.

JavaScript Falsy Values

In JavaScript there are 5 falsy values are available: 0, ‘ ’, undefined, null, NaN

Whenever you try to convert it through the Boolean function in JS, it gives you a False as a result.

console.log(Boolean(0));
console.log(Boolean(undefined));
console.log(Boolean(null));
console.log(Boolean(NaN));
console.log(Boolean(''));
//output
false
false
false
false
false

You can see that it always gives you false as an output. You can use this feature for your benefit.

If we use these objects 0 or undefined or null or NaN in an if, else statement, the Boolean function gets applied automatically and gives you the result. The below examples will help you.

const weight = 0
if(weight){
console.log("You have some weight")
}
else{
console.log("Your weight is zero")
}
//output
Your weight is zero

Can you tell me why it gives the answer to the else statement? Because weight is defined as 0 and from the above example we can see that, Boolean of 0 is False and that’s why it gives you Your weight is zero as output. Let’s change the weight.

const weight = 70
if(weight){
console.log("You have some weight")
}
else{
console.log("Your weight is zero")
}
//output
You have some weight

You can clearly see how it gonna change the output.

Similar to this, you can take the benefits of other falsy values too. I will give you another example of undefined below.

let height; //here the height is undefined
if(height){
console.log(`Your height is defined`)
}
else{
console.log("Your height is undefined")
}
//output
Your height is undefined

If I define the height, I get different output.

let height=10; //here the height is defined
if(height){
console.log(`Your height is defined`)
}
else{
console.log("Your height is undefined")
}
//output
Your height is defines

Strict and loose equality in JavaScript:

In JavaScript, there are two kind of equality is available, == (loose), === (strict)

In loose equality, JS does the type coercion, which means it automatically convert the data. Suppose you are given a number as a string, JS will automatically convert the string to a number and then do the conversion. But in the case of strict equality (===), JS doesn’t do anything. It will take the data as it is presented. It can be easily understandable using the below examples.

const age = Number(prompt(`What is your age?`));
if (age===18) console.log('You just become an adult (strict)');
if (age==18) console.log('You just become an adult (loose)');

If you run the code, it will prompt in your browser asking you your age. Once you have given the age, will show you respective results. Let's see the output result.

//given age is 18.
//output
You just become an adult (strict)
You just become an adult (loose)

Here as I have converted the input using the Number function, it gives you the above two outputs. Now if I remove the Number function, it gives you the below output.

const age = prompt(`What is your age?`);
if (age===18) console.log('You just become an adult (strict)');
if (age==18) console.log('You just become an adult (loose)');
//output
You just become an adult (loose)

You can see that for the second scenario, JS has done the type coercion and gives you the result.

Similar to type equality, nonequality has also have the loose (!=) and strict (!==)

Below examples will tell you.

weight = `55`
if (weight !=55) console.log(`Your weight is not 55 (loose)`)
if (weight !==55) console.log(`Your weight is not 55 (strict)`)
//output
Your weight is not 55 (strict)

Whenever possible, you should always use the strict methodology in the code. A loose structure could bring a lot of undetectable bugs to your code.

Boolean Operators in JavaScript:

In JS and any programming language in general, has three logical operators, AND, OR, NOT.

AND means if both are true, OR is either one needs to be true, NOT will give you the opposite of the Boolean value.

In JavaScript, AND is represented as &&, OR as ||, NOT as !. from the below code, you will understand it better.

console.log(true && true)
console.log(true || true)
console.log(true && false)
console.log(true || false)
console.log(!true)
//output
true
true
false
true
false

from above you can clearly see, for OR either one needs to be true but for AND operator both of them need to be true to give true as an output.

Now we can use this property for our benefits in code

isTiredd = false
console.log(isTiredd)
if(isTiredd){
console.log(`Don't go to bed`)
}
else{
console.log(`Go to bed`)
}
//output
Go to bed

but for below

isTiredd = false
console.log(!isTiredd)
if(!isTiredd){
console.log(`Don't go to bed`)
}
else{
console.log(`Go to bed`)
}
//output
Don't go to bed

Strict Mode in JavasScript:

In JavaScript we can use strict mode to reduce unnecessary errors in JavaScipt. from the following example, you will understand it better.

//strict mode is active
'use strict';
let hasDriversLicense = false;
hasDriverLicense = true; //omitted the s in DriversLicense
if (hasDriversLicense) console.log(' I can drive :D');
//output
script.js:10 Uncaught ReferenceError: hasDriverLicense is not defined
//strict mode is inactive
//'use strict';
let hasDriversLicense = false;
hasDriverLicense = true; //not omitted the s in DriversLicense
if (hasDriversLicense) console.log(' I can drive :D');
//output
blank space

You can see that when we use strict mode, JS is complaining about the error but without the strict mode, it doesn’t do anything. So using strict mode, we can do a lot of things with proper notification about the error which helps create bug-free code.

Function

Similar to other programming languages, you can write functions in JavaScript. It is pretty simple to write and it is a powerful technique.

It encourages the programmer to follow the dry (do not repeat yourself) concenpt. Once you write a piece of code, you can just call the same code if you need it again and again. The below example will tell you.

//code to made a delicious juice for everyone
function fruitProcessors(apples, oranges){
console.log(apples,oranges)
return `A delicious juice made up of ${apples} Apples and ${oranges} Oranges`
}
console.log(fruitProcessors(5,3))
//output
A delicious juice made up of 5 Apples and 3Oranges

If you run the above code, you will get the statement. Every time you run the function fruitProcessors(), you will get a similar statement. Think how beautiful it is. You just write once and call it as many times as you want.

That is the beauty of function. Remember whatever you write inside the function, stays inside of the function.

function state(a){
const k = a
console.log(k)
}
state("Hi this is sam")
console.log(k)
//output
Hi this is sam
script.js:36 Uncaught ReferenceError: k is not defined
at script.js:36

You can see that when we call the function state(), we get the output of the function “Hi this is sam” but when we call the k variable separately, we get the above error.

Function Expression

What we have done earlier is that we have declared the function. But we can create function in a different way and that will also work. It is called function expression. From below code you will understand it better.

//function declaration
function hello(your_age){
return (60-your_age)
}
console.log(hello(30))
//function expression (here I have only used function keyword)
const t = function (your_age){
return (60-your_age)
}
console.log(t(30))
//output
30
30

Here I have created the same function with function declaration called hello() and another one with function expression which I have saved in a variable t and then called the variable as a function. It is called function expression.

It is up to you which method you prefer but you can use function expression for your code.

Arrow (=>) functions

In JS, you can write the function in a different way called arrow function. for simple functions with only one argument you can write the function in a single line of code. See below.

// creating function called age to calculate age of a person
const age = birthYear => 2037-birthYear
console.log(age(1990))
//output
47

See how simple it is to create a function with only one argument birthYear. However, for more complex functions where there are multiple arguments, the structure is little different. Let’s create a function to calculate a persons remaining age to retire.

//Function which takes two arguments birthYear and personName
const retirementAge = (birthYear, personName) => {
const currentAge = 2021-birthYear
const retirementAge = 60-currentAge
return `${personName} has ${retirementAge} years to retire.`
}
console.log(retirementAge(1990,"Sam"))
//output
Sam has 29 years to retire.

See how different it is to calculate the retirement age of the person using arrow function.

This is what I have learned as of now. I will share my new findings on JavaScript next week. I hope you have enjoyed JavaScript so far.