Variables, Operators,

and Statements

Lecturer: David Marangu

EMAIL:
[email protected]
Working with Variables

 Variables (or identifiers)

 Values stored in computer memory locations
 Value can vary over time
 Cannot use reserved words as variables
 Reserved Words or Keywords are part of the
JavaScript language syntax
 Variable Example:
 employeeName

2
Rules while declaring a JavaScript
variables (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.
 Reserved words (JavaScript keywords) and spaces cannot
be used as variable names.

Correct JavaScript variable Incorrect JavaScript variable

Declaration: Declaration:
Var x = 10; var 123=30;
var_value="sonoo"; var *aa=320;

3
JS Reserved Words
 InJavaScript the following reserved words
cannot be used as variables, labels, or
function names:
 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.

4
Variables Convention
 Use underscore or capitalization to separate
words of an identifier
 employee_first_name
 employeeFirstName

5
Working with Variables
 Variables
 To create:
 Use keyword var to declare the variable
 Use the assignment operator to assign the variable a
value
 Declare, then assign value (initialize)
 var employeeName;
 employeeName = “Jeff”;
 Declare and assign variable in a single
statement
 var employeeName = “Jeff”;

6
Working with Variables
 Variables
 To create:
 Use keyword var to declare the variable
 Use the assignment operator to assign the variable a
value
 Declare, then assign value (initialize)
 var employeeName;
 employeeName = “Jeff”;
 Declare and assign variable in a single
statement
 var employeeName = “Jeff”;

7
Working with Variables

 Variables
 Once created:
 May be changed at any point in the program
 Use variable name and assignment operator
 employeeName = “Aeneas”;

8
9
10
JavaScript local variable
A JavaScript local variable is declared inside
block or function. It is accessible within the
function or block only.
 Example:
<script>
function abc(){
var x=10; //local variable
}
</script>

11
 JavaScript global variable
 A JavaScript global variable is accessible from
any function. A variable declared outside a
function or declared with window object is known
as global variable.
 Example:

<script> function b(){

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

12
 JavaScript global variable
 To declare JavaScript global variables inside
a function, a window object is used.
 Example:
function m(){
window.value=100;// value declared as global variable by
window object
}
function n(){
alert(window.value);//
accessing global variable from other function
}

13
 JavaScript global variable
 A variable declared outside a function, is added
in the window object internally and can also be
accessed through the window object.
 Example:

var value=50;
function a(){
alert(window.value);//accessing global variable
}

14
Javascript Data Types
 There are two types of data types in JavaScript.
 Primitive data type
 Non-primitive (reference) data type
 JavaScript is a dynamic type language, means there is
no 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

15
Javascript primitive Data Types
 There are five types of primitive data types in JavaScript
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

16
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

17
Javascript Operators
 Operators are symbols 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 in JavaScript.
- Arithmetic Operators; - Comparison
(Relational) Operators; - Bitwise Operators; -
Logical Operators; - Assignment Operators; -
Special Operators.

18
Javascript Arithmetic Operators
 Arithmetic operators are used to perform
arithmetic operations on the operands.
 Following are JavaScript arithmetic operators:
Operator Description Example
+ Addition 10+20 = 30
- Subtraction 20-10 = 10
* Multiplication 10*20 = 200
/ Division 20/10 = 2
% Modulus 20%10 = 0
(Remainder)
++ Increment var a=10; a++; Now a = 11
-- Decrement var a=10; a--; Now a = 9

19
Javascript Comparison Operators
 Comparison operator compares 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

20
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

21
JavaScript Logical Operators
Logical operators are used to determine the
logic between variables or values.
Operator Description Example
&& Logical AND (10==20 && 20==33) = false
|| Logical OR (10==20 || 20==33) = false
! Logical Not !(10==20) = true

Given that x = 6 and y = 3, the table below

explains the logical operators:
Operator Description Example
&& and (x < 10 && y > 1) is true
|| or (x == 5 | | y == 5) is false
! not !(x == y) is true

22
Conditional (Ternary) Operator
 JavaScript also contains a conditional
operator that assigns a value to a variable
based on some condition.
 Syntax
 variablename = (condition) ? value1:value2
 Example
 let voteable = (age < 18) ? "Too young":"Old
enough";

23
JavaScript Assignment Operators
Assignment operators assign values to
JavaScript variables.
The **= operator is a part of ECMAScript 2016.
Operator Example Same As Operator Example Same As

= x=y x=y <<= x <<= y x = x << y

>>= x >>= y x = x >> y
+= x += y x=x+y
>>>= x >>>= y x = x >>> y
-= x -= y x=x- y
&= x &= y x=x&y
*= x *= y x=x* y
^= x ^= y x=x^y
/= x /= y x=x/ y |= x |= y x=x| y
%= x %= y x=x% y **= x **= y x = x ** y

24
Assignment Examples
• The = assignment operator assigns a value to
a variable. Eg. let x = 10;
• The += assignment operator adds a value to a
variable. Eg let x = 10;
x += 5;
• The -= assignment operator subtracts a value from a
variable. Eg. let x = 10;
x -= 5;
• The *= assignment operator multiplies a variable.
Eg. let x = 10;
x *= 5;
• The /= assignment divides a variable.
Eg. let x = 10;
x /= 5;
25
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.
checks what is returned in a generator by the
yield
generator's iterator.

26
JavaScript Statements
A computer program is a list of
"instructions" to be "executed" by a
computer.
 In a programming language, these

programming instructions are called

statements.
 A JavaScript program is a list of

programming statements.

27
JavaScript If-else Statements
 The JavaScript if-else statement is
used to execute the code when the
condition is true or false.
 There are three forms of if statement in

JavaScript.
 If Statement
 If else statement
 if else if statement

28
JavaScript If Statement
 Itevaluates the content only if expression
is true. The signature of JavaScript if
statement is given below.
if(expression){
//content to be evaluated
}
 Example of if statement in javascript.
<script> document.write("value of a is
var a=20; greater than 10");
if(a>10){ }
</script>
29
JavaScript If ...else Statement
 Itevaluates the content whether
condition is true or 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
}

30
JavaScript If ...else Statement
Example
Example of if-else statement in JavaScript to find
out if a number is even or odd.
<script>
var a=20;
if(a%2==0){
document.write("a is even number");
}
else{
document.write("a is odd number");
}
</script>
31
JavaScript If ...else Statement
Illustration
 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.

else if(expression3){ if(expression1){

// //
content to be evaluated if ex content to be evaluated if
pression3 is true expression1 is true
} }
else{ else if(expression2){
// //
content to be evaluated if no content to be evaluated if
expression is true expression2 is true
32
} }
JavaScript Switch
The JavaScript switch statement is used to execute one code
from multiple expressions. It is just like else if statement that we
have learned in previous page. But it is convenient
than if..else..if because it can be used with numbers, characters
etc.

The signature of JavaScript switch statement is given below.

switch(expression){
…
case value1: default:
code to be executed; code to be executed if above
break; values are not matched;
case value2: }
code to be executed;
break;
33
JavaScript switch statement
Example

<script> break;
var grade='B'; case 'C':
var result; result="C Grade";
switch(grade){ break;
case 'A': default:
result="A Grade"; result="No Grade";
break; }
case 'B': document.write(result);
result="B Grade"; </script>

34