Scribd
Upload
4K views

ITEC54 - JavaScript Variable and Data Types

A JavaScript variable is a name that refers to a memory location used to store a value. There are two types of variables: local variables declared inside functions or blocks, and global variables declared outside functions and accessible from anywhere. Variables must start with a letter, underscore, or dollar sign and can include numbers but not symbols or spaces. Variables are case sensitive. JavaScript has primitive data types like strings, numbers, Booleans, undefined, and null to represent different types of values.

Uploaded by

Rs
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4K views

ITEC54 - JavaScript Variable and Data Types

A JavaScript variable is a name that refers to a memory location used to store a value. There are two types of variables: local variables declared inside functions or blocks, and global variables declared outside functions and accessible from anywhere. Variables must start with a letter, underscore, or dollar sign and can include numbers but not symbols or spaces. Variables are case sensitive. JavaScript has primitive data types like strings, numbers, Booleans, undefined, and null to represent different types of values.

Uploaded by

Rs
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 17

JAVASCRIPT VARIABLE

A JavaScript variable is simply a name of storage location. There are two types of variables in JavaScript : local
variable and global variable.

There are some rules while declaring a JavaScript variable (also known as identifiers). ✓
Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign. ✓
After first letter we can use digits (0 to 9), for example value1.
✓ JavaScript variables are case sensitive, for example x and X are different variables.

Correct JavaScript variables


var x = 10;
var _value = "bsit";

Incorrect JavaScript variables


var 123 = 30;
var *aa = 320;

Example of JavaScript variable


Let’s see a simple example of JavaScript variable.

<html>
<body>
<script>
var x = 10;
var y = 20;
var z = x + y;
document.write(z);
</script>
</body>
</html>

JavaScript local variable


A JavaScript local variable is declared inside block or function. It is accessible within the function or block only.

For example:

<script>
function myEx() {
var x = 10; //local variable
}
</script>
Or,

<script>
If(10 < 13) {
var y = 20; //JavaScript local variable
}
</script>

JavaScript global variable


A JavaScript global variable is accessible from any function. A JavaScript global variable is declared outside the
function or declared with window object. For example:

Example 1:
<html>
<body>
<script>
var data = 200; //global variable
function a(){
document.writeln(data);
}
function b(){
document.writeln(data);
}
a(); //calling JavaScript function
b();

</script>
</body>
</html>

Example 2:
<html>
<body>
<script>
var value=50; //global variable
function a(){
alert(value);
}
function b(){
alert(value);
}
a(); //calling JavaScript function
</script>
</body>
</html>
Declaring JavaScript global variable within function
To declare JavaScript global variables inside function, you need to use window object. For example:

window.value = 90;

Now it can be declared inside any function and can be accessed from any function. For example:

<html>
<body>
<script>
function m(){
window.value = 100; //declaring global variable by window object
}
function n(){
alert(window.value); //accessing global variable from other function
}
m();
n();
</script>
</body>
</html>

Internals of global variable in JavaScript


When you declare a variable outside the function, it is added in the window object internally. You can access it
through window object also. For example:

<html>
<body>
<script>
var value = 50;
function a(){
alert(window.value); //accessing global variable
}
a(); //calling JavaScript function
</script>
</body>
</html>

JavaScript Data Types


JavaScript variables can hold many data types: numbers, strings, objects and more:
var length = 16; // Number
var lastName = "Johnson"; // String
var x = {firstName: "John", lastName: "Doe"}; // Object
The Concept of Data Types
In programming, data types is an important concept.
To be able to operate on variables, it is important to know something about the type.

Without data types, a computer cannot safely solve this:


var x = 16 + "Volvo";
Does it make any sense to add "Volvo" to sixteen? Will it produce an error or will it produce a result?

JavaScript will treat the example above as:


var x = "16" + "Volvo";

When adding a number and a string, JavaScript will treat the number as a string.

Example: Result:
<html>
<body>
<h2>JavaScript</h2>
<p id="sample"></p>
<script>
var x = 16 + "Volvo";
document.getElementById("sample").innerHTML = x;
</script>
</body>
</html>

Example: Result:
<html>
<body>
<h2>JavaScript</h2>
<p id="sample"></p>
<script>
var x = "Volvo" + 16;
document.getElementById("sample").innerHTML = x;
</script>
</body>
</html>

Note: JavaScript evaluates expressions from left to right. Different sequences can produce different results:
Example 1: Result:
<html>
<body>
<h2>JavaScript</h2>
<p id="sample"></p>
<script>
var x = 16 + 4 + "Volvo";
document.getElementById("sample").innerHTML = x;
</script>
</body>
</html>

Example 2: Result:

<html>
<body>
<h2>JavaScript</h2>
<p id="sample"></p>
<script>
var x = "Volvo" + 16 + 4;
document.getElementById("sample").innerHTML = x;
</script>

</body>
</html>

In the first example, JavaScript treats 16 and 4 as numbers, until it reaches "Volvo". In the
second example, since the first operand is a string, all operands are treated as strings.

JavaScript Strings
A string (or a text string) is a series of characters like "John Doe".
Strings are written with quotes. You can use single or double quotes.
You can use quotes inside a string, as long as they don't match the quotes surrounding the string:

Example:
var answer1 = "It's alright"; // Single quote inside double quotes
var answer2 = "He is called 'Johnny'"; // Single quotes inside double quotes
var answer3 = 'He is called "Johnny"'; // Double quotes inside single quotes

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

➢ Primitive data type


➢ Non-primitive (reference) data type
JavaScript is a dynamic type language, means you don't need to specify type of the variable because it is
dynamically used by JavaScript engine. You need to use var here to specify the data type. It can hold any type
of values such as numbers, strings etc. For example:

var a = 40; //holding number


var b = "Rahul"; //holding string

JavaScript primitive data types


There are five types of primitive data types in JavaScript. They are as follows:
Data Type Description
String represents sequence of characters e.g. "hello"
Number represents numeric values e.g. 100
Boolean represents boolean value either false or true
Undefined represents undefined value
Null represents null i.e. no value at all

String: Result:
<html>
<body>
<h2>JavaScript Strings</h2>
<p id="sample"></p>
<script>
var carName1 = "Juan";
var carName2 = 'Dela Cruz';
document.getElementById("sample").innerHTML =
carName1 + "<br>" +
carName2;
</script>
</body>
</html>

Number: Result:
<html>
<body>
<h2>JavaScript Numbers</h2>
<p id="sample"></p>
<script>
var x1 = 34.00;
var x2 = 34;
var x3 = 3.14;
document.getElementById("sample").innerHTML =
x1 + "<br>" + x2 + "<br>" + x3;
</script>
</body>
</html>
Boolean: Result:
<html>
<body>
<h2>JavaScript Booleans</h2>
<p id="sample"></p>
<script>
var x = 5;
var y = 5;
var z = 6;
document.getElementById("sample").innerHTML =
(x == y) + "<br>" + (x == z);
</script>
</body>
</html>

Undefined: Result:
<html>
<body>
<h2>JavaScript Undefined</h2>
<p id="demo"></p>
<script>
var car;
document.getElementById("demo").innerHTML =
car + "<br>" + typeof car;
</script>
</body>
</html>

Null: Result:
<html>
<body>
<h2>JavaScript</h2>
<p id="sample"></p>
<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
person = null;
document.getElementById("sample").innerHTML = typeof person;
</script>
</body>
</html>
The “typeof” operator
<html>
<body>
<h2>JavaScript typeof</h2>
<p>The typeof operator returns the type of a variable or an
expression.</p> <p id="sample"></p>
<script>
document.getElementById("sample").innerHTML =
typeof "john" + "<br>" +
typeof 3.14 + "<br>" +
typeof true + "<br>" +
typeof false + "<br>" +
typeof x;
</script>
</body>
</html> Result:

JavaScript non-primitive data types


The non-primitive data types are as follows:

Data Type Description


Object represents instance through which we can access members Array
represents group of similar values
RegExp represents regular expression

Object: Result:
<html>
<body>
<h2>JavaScript Objects</h2>
<p id="sample"></p>
<script>
var person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};

document.getElementById("sample").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>
Array: Result:
<html>

<body>
<h2>JavaScript Arrays</h2>
<p id="sample"></p>
<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("sample").innerHTML = cars[0];
</script>
</body>
</html>

JavaScript Operators
JavaScript operators are symbols that are used to perform operations on operands. For example:
var sum = 10 + 20;

Here, + is the arithmetic operator and = is the assignment operator.

Types of Operators
There are following types of operators in JavaScript.

1. Arithmetic Operators
2. Comparison (Relational) Operators
3. Bitwise Operators
4. Logical Operators
5. Assignment Operators
6. Special Operators

JavaScript Arithmetic Operators


Arithmetic operators are used to perform arithmetic operations on the operands. The following operators are
known as JavaScript arithmetic operators.

Operator Description Example


+ Addition 10+20 = 30
- Subtraction 20-10 = 10
* Multiplication 10*20 = 200
/ Division 20/10 = 2
% Modulus (Remainder) 20%10 = 0
++ Increment var a=10; a++; Now a = 11
-- Decrement var a=10; a--; Now a = 9
Example:
<html>
<body>
<script>
var a = 20;
var b = 10;
var c = "Test";
var linebreak = "<br />";
document.write("a + b = ");
result = a + b;
document.write(result);
document.write(linebreak);
document.write("a - b = ");
result = a - b;
document.write(result);
document.write(linebreak);
document.write("a / b = ");
result = a / b;
document.write(result);
document.write(linebreak);
document.write("a % b = ");
result = a % b;
document.write(result);
document.write(linebreak);
document.write("a + b + c = ");
result = a + b + c;
document.write(result);
document.write(linebreak);
a = ++a;
document.write("++a = ");
result = ++a;
document.write(result);
document.write(linebreak);
b = --b;
document.write("--b = ");
result = --b;
document.write(result);
document.write(linebreak);
</script>
</body>
</html>

JavaScript Comparison Operators


The JavaScript comparison operator compares the two operands. The comparison operators are as follows:

Operator Description Example


== Is equal to 10==20 = false
=== Identical (equal and of same type) 10==20 = false
!= Not equal to 10!=20 = true
!== Not Identical 20!==20 = false
> Greater than 20>10 = true
>= Greater than or equal to 20>=10 = true
< Less than 20<10 = false
<= Less than or equal to 20<=10 = false

Example:
<html>
<body>
<script>
var a = 10;
var b = 20;
var linebreak = "<br />";

document.write("(a == b) => ");


result = (a == b);
document.write(result);
document.write(linebreak);

document.write("(a < b) => ");


result = (a < b);
document.write(result);
document.write(linebreak);

document.write("(a > b) => ");


result = (a > b);
document.write(result);
document.write(linebreak);

document.write("(a != b) => ");


result = (a != b);
document.write(result);
document.write(linebreak);

document.write("(a >= b) => ");


result = (a >= b);
document.write(result);
document.write(linebreak);

document.write("(a <= b) => ");


result = (a <= b);
document.write(result);
document.write(linebreak);
</script>
</body>
</html>

JavaScript Bitwise Operators


The bitwise operators perform bitwise operations on operands. The bitwise operators are as follows:

Operator Description Example


& Bitwise AND (10==20 & 20==33) = false
| Bitwise OR (10==20 | 20==33) = false
^ Bitwise XOR (10==20 ^ 20==33) = false
~ Bitwise NOT (~10) = -10
<< Bitwise Left Shift (10<<2) = 40
>> Bitwise Right Shift (10>>2) = 2
>>> Bitwise Right Shift with Zero (10>>>2) = 2

Example:
<html>
<body>
<script>
var a = 2; // Bit presentation 10
var b = 3; // Bit presentation 11
var linebreak = "<br />";

document.write("(a & b) => ");


result = (a & b);
document.write(result);
document.write(linebreak);

document.write("(a | b) => ");


result = (a | b);
document.write(result);
document.write(linebreak);

document.write("(a ^ b) => ");


result = (a ^ b);
document.write(result);
document.write(linebreak);

document.write("(~b) => ");


result = (~b);
document.write(result);
document.write(linebreak);

document.write("(a << b) => ");


result = (a << b);
document.write(result);
document.write(linebreak);

document.write("(a >> b) => ");


result = (a >> b);
document.write(result);
document.write(linebreak);
</script>
</body>
</html>

JavaScript Logical Operators


The following operators are known as JavaScript logical operators.

Operator Description Example


&& Logical AND (10==20 && 20==33) = false || Logical
OR (10==20 || 20==33) = false ! Logical Not !(10==20) =
true

Example:
<html>
<body>
<script>
var a = true;
var b = false;
var linebreak = "<br />";

document.write("(a && b) => ");


result = (a && b);
document.write(result);
document.write(linebreak);

document.write("(a || b) => ");


result = (a || b);
document.write(result);
document.write(linebreak);

document.write("!(a && b) => ");


result = (!(a && b));
document.write(result);
document.write(linebreak);
</script>
</body>
</html>

JavaScript Assignment Operators


The following operators are known as JavaScript assignment operators.

Operator Description Example


= Assign 10+10 = 20
+= Add and assign var a=10; a+=20; Now a = 30 -= Subtract and
assign var a=20; a-=10; Now a = 10 *= Multiply and assign var
a=10; a*=20; Now a = 200 /= Divide and assign var a=10; a/=2;
Now a = 5 %= Modulus and assign var a=10; a%=2; Now a = 0

Example:
<html>
<body>
<script>
var a = 33;
var b = 10;
var linebreak = "<br />";

document.write("Value of a => (a = b) => ");


result = (a = b);
document.write(result);
document.write(linebreak);

document.write("Value of a => (a += b) => ");


result = (a += b);
document.write(result);
document.write(linebreak);

document.write("Value of a => (a -= b) => ");


result = (a -= b);
document.write(result);
document.write(linebreak);

document.write("Value of a => (a *= b) => ");


result = (a *= b);
document.write(result);
document.write(linebreak);

document.write("Value of a => (a /= b) => ");


result = (a /= b);
document.write(result);
document.write(linebreak);

document.write("Value of a => (a %= b) => ");


result = (a %= b);
document.write(result);
document.write(linebreak);
</script>
</body>
</html>

JavaScript Special Operators


The following operators are known as JavaScript special operators.

Operator Description
(?:) Conditional Operator returns value based on the condition. It is like if-else. , Comma
Operator allows multiple expressions to be evaluated as single statement. delete Delete
Operator deletes a property from the object.
in In Operator checks if object has the given property
instanceof checks if the object is an instance of given type
new creates an instance (object)
typeof checks the type of object.
void it discards the expression's return value.
yield checks what is returned in a generator by the generator's iterator.

JavaScript If statement
It evaluates the content only if expression is true. The signature of JavaScript if statement is given below.

if(expression){
//content to be evaluated
}

Example:
<html>
<body>
<script>
var age = 20; //Set the variable to different value and then try
if( age > 18 ) {
document.write("<b>Qualifies for driving</b>");
}
</script>
</body>
</html>

JavaScript If...else Statement


It evaluates the content whether condition is true of false. The syntax of JavaScript if-else statement is given
below.

if(expression){
//content to be evaluated if condition is true
}
else{
//content to be evaluated if condition is false
}

Example:
<html>
<body>
<script>
var age = 15; // Set the variable to different value and then try
if( age > 18 ){
document.write("<b>Qualifies for driving</b>");
}
else{
document.write("<b>Does not qualify for driving</b>");
}
</script>
</body>
</html>

JavaScript If...else if statement


It evaluates the content only if expression is true from several expressions. The signature of JavaScript if else if
statement is given below.

if(expression1){
//content to be evaluated if expression1 is true
}
else if(expression2){
//content to be evaluated if expression2 is true
}
else if(expression3){
//content to be evaluated if expression3 is true
}
else{
//content to be evaluated if no expression is true
}

Example:
<html>
<body>
<script>
var book = "maths"; //Set the variable to different value and then try if( book
== "history" ) {
document.write("<b>History Book</b>");
}

else if( book == "maths" ) {


document.write("<b>Maths Book</b>");
}

else if( book == "economics" ) {


document.write("<b>Economics Book</b>");
}

else {
document.write("<b>Unknown Book</b>");
}
</script>
</body>
<html>

You might also like