Raj's Blog

JavaScript intro from a NEWBIE

JavaScript intro from a NEWBIE

Raj Kiran Chaudhary's photo
Raj Kiran Chaudhary
·

4 min read

Learning JavaScript is hard 😭 (at least for me.) But if we keep thinking it is hard and then never learn it then it will remain a Herculean task forever. So let's simplify it by digging the basic things of JavaScript first.

What is JavaScript?

JavaScript is an object-oriented programming language developed in 1995 commonly used to add interactivity within our browsers. JS can be used to create:

  • websites
  • web applications
  • server-side applications using Node.js
  • create mobile applications using React Native
  • create programs for microcontrollers and countless others.

No, these two are completely different from each other. When JS was first created, it was known as LiveScript.

But at that time Java was extremely popular and thought may be giving the name JavaScript may help in some way.

As it evolved, it has now become a fully independent and one of the most popular programming languages.

Variables

Variables are a key part of all programming languages and JavaScript is no exception. But what exactly is variable?

A variable is used to store information so that you can use it later.

We use assignment operator = to assign a value to a variable. For example:

let age = 25;

Following things should be considered while naming a variable:

  • Variable names must start with either a letter, an underscore _, or the dollar sign $. For example:
let a = 'hi';
let _a = 'h1';
let $a = 'hi';
  • Variable name can't start with numbers.
let 1a = 'hi'; // you will get an error
  • JavaScript is case-sensitive hence x and X are different from each other. You will get different values if you print these on console.
let x = 'morning'; // console.log(x) => morning
let X = 9; // console.log(X) => 9
  • As the code grows, there will be several variables. Hence to keep track of those variables always provide a descriptive name. 
let name = 'Raj';

Variable declaration

We can declare variables in JavaScript either by using the var, let or const keyword.

However, there are some significant differences between these and we achieve different results based on what we are using for variable declaration.

âž¡ Declaration by var

  • var is used in the older version of JavaScript.

  • var is global scoped. But... what😕 does that mean? It means the variable declared using var is accessibe from everywhere.

var a = 5;

function foo() {
  console.log(a); // 5
}

foo();

console.log(a); // 5
  • Variable declared with var can be reassigned.
var person = "Coco";
console.log(person); // Coco
person = "Tommy";
console.log(person); //Tommy

âž¡ Declaration by let

  • let is the new way of declaring variables and was introduced in ES6 (2015).

  • Variables declared with let can't be redeclared as var. 

let x = 'John Doe';
let x = 5; //console.log(x) => error

  • let is block scoped. It means unlike var, it is accessible only inside a block of code and that variable is not visible outside of that particular block of code.

  • In simple terms, say, whenever you see {curly brackets}, it is a block. For example: if statement, for loop etc.

function foo() {
  if (true) {
    let c = 7;
    console.log(c); // 7
  }
}

foo();
console.log(c); // error because we can't access the variable outside the block

âž¡ Declaration by const

  • const holds constant values and cannot be updated once declared.
  • Like let declarations, const are also block scoped.

Placing of script tag

All the codes are placed in separate script.js file and linked in HTML as <script src="script.js></script>. But where should we place this in HTML?

You can place script tag either in <head> or <body> section of HTML page.

However, the best practice is to put the <script> tag just before the closing </body> tag rather than in the <head> section of your HTML because

  • HTML loads from the top to bottom. The head loads first, then the body, and then everything inside the body. If we put our <script> tag in the head section, the entire JavaScript will load before loading any of the HTML which may cause issues.

  • When we place the <script> tag before the closing </body> tag first HTML is loaded and then only JavaScript. This in turn can prevent errors and speed up website response time.

That's it guys. Thank you😊 for reading. Catch you soon.

hashnodebootcampJavaScriptBeginner Developers