JavaScript Programming Basics

Variables

Often, Variables are said to be empty boxes in which data can be stored. However, its not quite right as data is actually stored in the memory and variable is just a label that point towards the memory location.

Syntax of variables is :

var name;

Eg :- Think of Memory locations as boxes that can store information and think of variables as name tags that help us remember which variable has which kind of data stored in it.

📦 Memory1 <- 🏷️(Dress) = 👗 
📦 Memory2 <- 🏷️(Yo-Yo) = 🪀
📦 Memory3 <- 🏷️(Hammer) = 🔨

DataTypes

JavaScript has different data types to hold different types of values. There are two types of data type in JavaScript.

Primitive data type
Non-Primitive data type

Since JS is a dynamic type language, we don't need to specify type of the variable because it is dynamically used by JS engine.

Eg :-

var a = 1 ; //holding a number
var b= "Gaurav"; //holding a string

Below are types of Primitive and Non-Primitive Data types used in JavaScript :-

Primitive Data Type		Non-Primitive Data Type
Data Type	Description	Data Type	Description
String	represents sequence of characters	Object	represents instance through which we can access members
Number	represents numeric value	Array	represents group of similar values
Boolean	represents boolean value ie true or false	RegExp	represents regular expression
Undefined	represents undefined value
Null	represents no value at all

Variable scope

Scope refers to the visibility of variables. In other words, which parts of your program can see or use it. We can understand it using laws.

Global Scope - Just like laws at global level are applicable to all, in same way variables declared in global scope can be accessed in all other scope.

Function Scope - Laws that are applicable at National level may not be applicable at World level. Just like that whenever we declare a variable in a function, the variable is visible only within the function.

Lexical Scope :- Each State can have their own laws but a State must implement their own set of law while adding the laws at National level. And Just like a State is bound to their National laws, children functions are bound to their parents Scope. Lexical scope means the children scope have the access to the variables defined in the parent scope.

Identifiers

All variables in Javascript must be identified with a unique name. These unique names are called identifiers.

The general rules for constructing identifiers name are :-

Names must contain letters, digits, underscores, dollar sign
Names must begin with a letter
Names can also begin with $ and _
Names are case sensitive
Reserved words cannot be used as names

Eg :-

var x = 4; or var sum = 4;//Identifiers can be short names (x and y) or can be detailed (age, sum, total)

var x = 4; and var X = 4; //x and X are considered to be different variables due to case sensitivity

Reserved words

JavaScript has certain words that must not be used as variables. These words are known as Reserved words.

Reserved words
abstract	arguments	await	boolean	break	byte	case	catch
char	class	const	continue	debugger	default	delete	do
double	else	enum	eval	export	extends	false	final
finally	float	for	function	goto	if	implements	import
in	instanceof	int	interface	let	long	native	new
null	package	private	protected	public	return	short	static
super	switch	synchronized	this	throw	throws	transient	true
try	typeof	var	void	volatile	while	with	yield

Operators

An Operator performs some operation on single or multiple operand(some data) and produces a result. Javascript has two types of operator :-

Unary - operates on one operand. Eg :- x++
Binary - operates on multiple operand. Eg :- x + y

Arithmetic Operator

Operator	Description
+	Addition
-	Subtraction
*	Multiplication
**	Exponentiation
/	Division
%	Modulus
++	Increment
--	Decrement

Assignment Operator

For below example consider :- var x = 5, y = 10, z = 15;

Operator	Description	Example
=	Assigns right operand value to left operand	`x = y; // x will be 10`
+=	Sums up left and right operand values and assign the result to left operand	`x += 1; // x will be 6`
-=	Subtract right operand value from left operand value and assign the result to left operand	`x -= 1; // x will be 4`
*=	Multiply left and right operand values and assign the result to the left operand	`x *= 5; // x will be 25`
/=	Divide left operand value by right operand value and assign the result to the left operand	`x /= 5; // x will be 1`
%=	Get the modulus of left operand divide by right operand and assign result modulus to left operand	`x %= 2; // x will be 1`

Comparison Operator

Operator	Description
==	equal to
===	equal value and equal type
!=	not equal
!==	not equal value or not equal type
>	greater than
>=	greater than or equal to
<=	less than or equal to
?	ternary operator

Logical Operator

Operator	Description
&&	logical and
\|\|	logical or
!	logical not

Bitwise Operator

Operator	Description	Example	Same as	Result	Decimal
&	AND	5 & 1	0101 & 0001	0001	1
\|	OR	5 \| 1	0101	0001	0101
~	NOT	~5	~0101	1010	10
^	XOR	5 ^ 1	0101 ^ 0001	0100	4
<<	Zero fill left shift	5 << 1	0101 << 1	1010	10
>>	Signed right shift	5 >> 1	0101 >> 1	0010	2
>>>	Zero fill right shift	5 >>> 1	0101 >>> 1	0010	2

Type Operator

Operator	Description
typeof	Returns the type of a variable
instanceof	Returns true if an object is an instance of an object type

Ternary Operator

JavaScript includes special operator called ternary operator : ? that assigns a value to a variable based on some condition.

Syntax :-

<condition> ? <value1> : <value2>;

Conditional Statement

Conditional statements are used to perform different actions based on different conditions.

if

Use the if statement to specify a block of JavaScript code to be executed if a condition is true.

Syntax :-

if(condition){
  // block of code to be executed if the condition is true.
}

else

Use the else statement to specify a block of code to be executed if the condition is false.

Syntax :-

if(condition){
  // block of code to be executed if the condition is true.
} else {
  // block of code to be executed if the condition is false.
}

else-if

Use the else-if statement to specify a new condition if the first condition is false.

Syntax :-

if(condition){
  // block of code to be executed if condition 1 is true.
} else if(condition){
  // block of code to be executed if condition 1 is false and condition 2 is true.
} else {
  // block of code to be executed if the condition 1 is false and condition 2 is false.
}

Switch-Case

Use the switch statement to select one of many code blocks to be executed.

Syntax :-

switch(expression){
case 1 :
  // some code
  break;
case 2 :
  // some code
  break;
default:
  // code block  
}

Loop Control

break

When JS reaches a break keyword, it breaks out of the switch block. This will stop the execution inside the switch block. If we don't write the break statement, the next case will be executed even if evaluation does not match.

default

The default keyword specifies the code to run if there is no case match. Most of the times we write default case at the end of switch block, but it does not have to be the last case. We can write it anywhere other than at the end too although we must remember to include break statement.

Continue

The continue statement breaks one iteration, if a specified condition occur, and continues with the next iteration in the loop.

Labels

With a label reference, the break or continue statement can be used to jump out of any code block. It is used to prefix a label to an identifier.

While loop

These are loops that can execute a block of code as long as a specified condition is true.

While Loop

The while loop will loop through a block of code as long as specified condition is true.

Syntax :-

while(condition){
  // code block to be executed
}

Do-while

The do-while loop is just a variant of while loop. This loop will execute code block once, before checking if the condition is true, then it will repeat the loop as long as the condition is true.

Syntax :-

do {
  // code block to be executed
}
while(condition);

For Loop

For loops are handy, if we want to run the same code over and over again

For

The for loop will loop through a block of code a number of times.

Syntax :-

for(initialization, condition, incrementation/decrementation){
  // code block
}

For-In

The for-In statement will loop through the properties of an Object/Array

Syntax for Object :-

for(key in object){
  // Code block
}

Syntax for Array :-

for(variable in array){
  // Code block
}

For-Each

The forEach() method calls a function once for each array element. This is also known as Enhanced For loop.

Syntax :-

for(type var: array){
  statement using var;
}

For-Of

for-of will loop through the values of an iterable object.

Syntax :-

for (variable of iterable) {
 // code block to be executed
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

JavaScript Programming Basics

Variables

DataTypes

Variable scope

Identifiers

Reserved words

Operators

Arithmetic Operator

Assignment Operator

Comparison Operator

Logical Operator

Bitwise Operator

Type Operator

Ternary Operator

Conditional Statement

if

else

else-if

Switch-Case

Loop Control

break

default

Continue

Labels

While loop

While Loop

Do-while

For Loop

For

For-In

For-Each

For-Of

FilesExpand file tree

javascriptBasics.md

Latest commit

History

javascriptBasics.md

File metadata and controls

JavaScript Programming Basics

Variables

DataTypes

Variable scope

Identifiers

Reserved words

Operators

Arithmetic Operator

Assignment Operator

Comparison Operator

Logical Operator

Bitwise Operator

Type Operator

Ternary Operator

Conditional Statement

if

else

else-if

Switch-Case

Loop Control

break

default

Continue

Labels

While loop

While Loop

Do-while

For Loop

For

For-In

For-Each

For-Of