Module II: Variables in JavaScript

U23CS381 - ADD Session by

Dr. S. Sampath Kumar, AP/CSE

31-10-2023 Variables in JavaScript 1

 2 31-10-2023

Agenda
 JavaScript Variables
 Rules to be followed While Declaring a Variable
 Syntax (Correct & Incorrect)
 Valid and Invalid Declaration
 Initializing a Variable
 Javascript Dynamic Typing
 JavaScript Variable Scope
 JavaScript Data Types
 JavaScript Arithmetic
 When to Use var, let, or const?

Variables in JavaScript
 3 31-10-2023

Module II: Interactive Web Design using JavaScript

Introduction - JavaScript including Techniques -

Variables and Operators - Conditional and Control
Statements - Data Types and Functions – Events - Form
Validation - Page Redirect - Java Script Exception
Handling - Document Object Model (DOM)

Variables in JavaScript
 4 31-10-2023

Course Outcomes:
CO. Outcome K Level

CO1 (Apply) Understand and apply HTML and CSS concepts K3

(Apply) Understand and apply JavaScript concepts for dynamic web page
CO2 K3
design

CO3 (Apply) Understand and apply shell commands and GIT workflow K2

CO4 (Apply) Design and develop mobile applications K3

CO5 (Apply) Design and develop mobile applications K2

Variables in JavaScript
 5 31-10-2023

Challenge time:
➢ Different ways to include JS in HTML
➢ Tag to include JS in HTML
➢ How to display alert message using JS?

Variables in JavaScript
 6 31-10-2023

JavaScript Variables:
➢ Variable is a name given to a memory location that is used to
store any type of data.
➢ As the name suggests, variables mean it can vary, i.e., data
stored in a variable can be changed or updated later in the
program if required.
➢ Highlight: A Javascript variable is a container, not a value; this
means that variables aren’t themselves values; they are a
container for values.

Variables in JavaScript
 7 31-10-2023

Rules to be followed While Declaring a Variable:

➢ Variables are case-sensitive in Javascript. (This means that
schoolName and schoolname are considered different
variables).
➢ We can use letters, digits, symbols like dollar sign ($) and
underscore ( _ ) in a variable name.
➢ We cannot start a variable name with a digit.
➢ We cannot use any of the reserved keywords (function, return,
typeof, break, etc.) of Javascript as a variable name.

Variables in JavaScript
 9 31-10-2023

Syntax (Correct & Incorrect)

➢ Correct Syntax:
var <variable-name>;
var <variable-name> = <value>;
Examples:
var aVariable;
var name = 'Mark';
➢ Incorrect Syntax:
aVariable; // This is not a valid declaration,
name var; //"var" keyword should be written first.
var 'Mark' = name; //value should be on the right-
// hand side of the equals sign
Variables in JavaScript
 10 31-10-2023

Example Declaration:
➢ Declaring a JavaScript variable using line breaks and spaces:
var a = 25;
➢ Declaring two variables in a single line separated by a comma:
var b=1, c=2;
➢ Using reserve keywords while declaring a variable:
var return = 5;
//Will give an error, as the return is a keyword
//in Javascript

Variables in JavaScript
 11 31-10-2023

Valid and Invalid Declaration:

➢ var my_school; //using underscore
➢ var one$23; //using digit and dollar sign
➢ var 123name;
//variable cannot start with a digit
➢ var variable@ ;
//variable cannot contain '@' symbol
➢ var break;
//break is a reserved keyword in JS, so we can't use
it as a variable

Variables in JavaScript
 12 31-10-2023

Initializing a Variable:
➢ After you have declared a variable, you can initialise that
variable with a value.
➢ This initialisation can be done by just writing the variable name
followed by an equals sign and then the value you want the
variable to store.
//declaring and initializing at the same time
var age = 20;
schoolName = 'XYZ School’;
//address stores "abc"
address = 'abc’; //Global Variable

Variables in JavaScript
 13 31-10-2023

Javascript Dynamic Typing:

 The data type of a variable is not fixed.
 A variable can store any type of data, and the user can
achieve this without specifying the type of data he/she wants
to store(eg: number, string, objects, arrays, etc).
 Also, one can change the stored value to any type of data,
anytime freely.

Variables in JavaScript
 14 31-10-2023

JavaScript Variable Scope:

➢ Scope of a variable means the visibility of a variable. That is, the
parts of our program where you can use a variable.
➢ In JavaScript, there are only two types of variable scopes:
❖ Local Scope
❖ Global Scope

Variables in JavaScript
 15 31-10-2023

JavaScript Data Types:

➢ JavaScript variables can hold numbers like 100 and text values
like “Pooja Sri".
➢ Strings are written inside double or single quotes. Numbers are
written without quotes.
➢ If you put a number in quotes, it will be treated as a text string.

const pi = 3.14;
let person = “Karthi";
let answer = 'Yes I am!';

Variables in JavaScript
 16 31-10-2023

JavaScript Arithmetic
➢ let x = 5 + 2 + 3;
➢ let x = “Karthick" + " " + “Raja";
➢ let x = "5" + 2 + 3; //Any Guess
➢ let x = 2 + 3 + "5";

Variables in JavaScript
 17 31-10-2023

When to Use var, let, or const?

➢ Always declare variables
➢ Always use const if the value should not be changed
➢ Always use const if the type should not be changed (Arrays and
Objects)
➢ Only use let if you can't use const
➢ Variables defined with let can not be redeclared.
➢ Only use var if you MUST support old browsers.
➢ var has global scope, and let has block scope.

Variables in JavaScript
 18 31-10-2023

Summary:
➢ Variables are containers that store values.
➢ Variables can be declared using var and let keywords.
➢ Variables can be updated or modified anytime and anywhere
in its scope.
➢ We cannot use any javascript reserved keywords as a variable
name.
➢ In JavaScript, there are only two types of variable scopes:
➢ Global scope
➢ Local scope
➢ Constants in JavaScript are those values that do not change
throughout the code.
Variables in JavaScript
 19 31-10-2023

Text Books & References

TEXT BOOKS:
➢ Internet & World Wide Web How to Program, 5th edition, by Paul Deitel Harvey
Deitel, Abbey Deitel, Pearson Publication, 2018.
➢ App Inventor 2: Create Your Own Android Apps 2nd Edition by David Wolber,
Hal Abelson, Ellen Spertus, Liz Looney, 2014.
REFERENCES:
➢ CS50's Web Programming with Python and JavaScript -
https://cs50.harvard.edu/web/2020
➢ “Get Coding! Learn HTML, CSS & JavaScript & Build a Website, App & Game”
by Young Rewired State, Walker Books, 2016.
➢ Version Control with Git, by Jon Loeliger, Matthew McCullough, 2nd Edition,
2012.
➢ Ultimate web design course: https://university.webflow.com/courses/ultimate-
web-design-course . Variables in JavaScript
20 31-10-2023

Variables in JavaScript
21 31-10-2023

Variables in JavaScript