JavaScript Variables, Data Types and 8 more concepts for beginners

Variables:

A variable is like a container which can store something which can be a number, a string, an object or even a function. Variables are declared using the var keyword. Lets declare a variable

var user = ‘John’;

Here the name of the variable is user and value of user is ‘John’. You can use any name for variable names but some reserved keywords. For a list of reserve keywords see mdn documentation. You cannot use reserved keywords for variable names.

Variable names cannot start with numbers, special characters — !, @, #, %, ^, &, *, (, ). But you can start with underscore(_) and dollar($) sign.

var person = ‘John Snow’; // valid
var _person = ‘John Snow’ // valid
var #person = ‘John Snow’ // invalid

You cannot use space inside variable name. If you need to use multiple words for variable names you can use CamelCase or an underscore between word. Example:

var my name = 'Ashik'; // not allowed
// Instead declare variable like this
var my_name = 'Ashik'; // allowed
var myName = 'Ashik'; // allowed

Data Type:

JavaScript has two types of data type: Primitive Data Type and Reference Data Type. We will discuss only about primitive data type here.

Primitive Data Type:

1. Number: The number can be integer or floating point type.

var a = 10;
var b = 10.5;

Both a and b are numbers here. Various mathematical operations like addition(+), subtraction(-), multiplication(*), division(/) can be performed on numbers.

2. String: Strings are enclosed in (‘ ’) or (“ ”). Example:

var text = 'Hello world";

3. Boolean: The boolean type has only two possible values: true and false. The falsy values are: false, 0, empty string(‘’), NaN, null and undefined. Except these six values, everything is truthy.

var a = true;
var b = flase;

4. undefined: When a variable is declared but no value is assigned to that variable then the value of that variable is undefined;

var number; // number undefined here
number = 6; // number has a value

5. null: Null means that the value is unknown or nothing.

var name = null; // the name is unknown

Event Bubble

When an event occurs on a DOM element, that event does not entirely occur on that just one element. In the Bubbling Phase, the event bubbles up or it goes to its parent, to its grandparents, to its grandparent’s parent until it reaches all the way to the window.

Event Propagation

When an event occurs on a DOM element, that event does not entirely occur on that just one element. In the Bubbling Phase, the event bubbles up or it goes to its parent, to its grandparents, to its grandparent’s parent until it reaches all the way to the window while in the Capturing Phase the event starts from the window down to the element that triggered the event or the event.target.

== and ===

== will not check types and === will check whether both sides are of same type. So, == is tolerant. But under the hood it converts to its convenient type to have both in same type and then do the comparison.

=== compares the types and values. Hence, if both sides are not same type, answer is always false. For example, if you are comparing two strings, they must have identical character sets. For other primitives (number, boolean) must share the same value.

Hoisting

Hoisting is the term used to describe the moving of variables and functions to the top of their (global or function) scope on where we define that variable or function.

Scope

Scope in JavaScript is the area where we have valid access to variables or functions. JavaScript has three types of Scopes. Global Scope, Function Scope, and Block Scope(ES6).

"use strict"

"use strict" is a ES5 feature in JavaScript that makes our code in Strict Mode in functions or entire scripts. Strict Mode helps us avoid bugs early on in our code and adds restrictions to it.

IIFE

An IIFE or Immediately Invoked Function Expression is a function that is gonna get invoked or executed after its creation or declaration. The syntax for creating IIFE is that we wrap the function (){} inside a parentheses () and after that we invoke it with another parentheses () .

Higher Order Functions

Higher-Order Function are functions that can return a function or receive argument or arguments which have a value of a function.

Conclusion

Among the two types of data types only primitive types are discussed here. The reference types will be discussed in another article.