JavaScript: Values, Types and Variables

Values, Types, and Variables

Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

Objectives


Objectives
• Learn about JavaScript types and comparisons


Objectives
• Understand both implicit and explicit type
conversions


Objectives
• Understand both implicit and explicit type
conversions
• See how to declare and use variables, as well as
their scope


Introduction to Values, Types, and


• Handling data is the fundamental task of
programming languages


 Values


 Values
 Types


 Values
 Types
 Variables


 Values
 Types
 Variables
• JavaScript may seem limited and confining


 Values
 Types
 Variables
 Weakly typed language, so variables are untyped


 Values
 Types
 Variables
 Object-oriented language


 Values
 Types
 Variables
 Object-oriented language
• Type system is definitely one of the good parts
of the language

JavaScript Types


JavaScript Types
• Defines types you can use to work with values of
different kinds


JavaScript Types
different kinds
• Categorizing types


JavaScript Types
different kinds
 Primitive and object types


JavaScript Types
different kinds
 With or without methods


JavaScript Types
different kinds
 With or without methods
 Mutable or immutable


Primary Types in JavaScript


Type Category Methods Mutability
number Primitive Yes Immutable
string Primitive Yes Immutable
Boolean Primitive Yes Immutable
null Primitive No Immutable
undefined Primitive No Immutable
object Object Yes Mutable


• Bad part is that it will liberally convert values
from one type to another


• Bad part is that it will liberally convert values
from one type to another
• Special === operator


JavaScript Numbers


JavaScript Numbers
• All numbers are 64-bit floating-point values


JavaScript Numbers
 IEEE 754 standard


JavaScript Numbers
 Numbers as large as ±1.7976931348623157x10308 to
as small as ±5x10-324


JavaScript Numbers
 Integers between -9,007,199,254,740,992 (-253) and
9,007,199,254,740,992 (253), inclusive


JavaScript Numbers
 Integers between -9,007,199,254,740,992 (-253) and
9,007,199,254,740,992 (253), inclusive
 If you work with numbers outside integer range, you’ll
lose precision


Integer Literals


Integer Literals
• Represent either as base 10 or hexadecimal


Integer Literals
• All these are valid base 10 values


Integer Literals
 5, 100, 123456789, 0, -100


Integer Literals
 5, 100, 123456789, 0, -100
• Valid hex values


Integer Literals
 5, 100, 123456789, 0, -100
 0x1a5f, 0X1A5F, 0x10cd4


Integer Literals
 5, 100, 123456789, 0, -100
 0x1a5f, 0X1A5F, 0x10cd4
• ECMAScript doesn’t support octal (base 8)


Integer Literals
 5, 100, 123456789, 0, -100
 0x1a5f, 0X1A5F, 0x10cd4
 Some JavaScript implementations support


Integer Literals
 5, 100, 123456789, 0, -100
 0x1a5f, 0X1A5F, 0x10cd4
 Number starts with a leading zero, followed by digits from 0 to 7


Integer Literals
 5, 100, 123456789, 0, -100
 0x1a5f, 0X1A5F, 0x10cd4
 Code won’t be portable


Integer Literals
 5, 100, 123456789, 0, -100
 0x1a5f, 0X1A5F, 0x10cd4
 Code won’t be portable
 ECMAScript 5/Strict forbids


Real Number Literals


• Express either as real number or exponential


• Real numbers


• Real numbers
 1.0, 1.349201942, .3333333333,
125959403.39201488, 56.


• Real numbers
 1.0, 1.349201942, .3333333333,
125959403.39201488, 56.
 Omit either integral or fractional part


• Real numbers
 1.0, 1.349201942, .3333333333,
125959403.39201488, 56.
• Exponential numbers


• Real numbers
 1.0, 1.349201942, .3333333333,
125959403.39201488, 56.
 1.23e12 // 1.23 x 1012


• Real numbers
 1.0, 1.349201942, .3333333333,
125959403.39201488, 56.
 1.23e12 // 1.23 x 1012
 1.23e-12 // 1.23 x 10-12


• Real numbers
 1.0, 1.349201942, .3333333333,
125959403.39201488, 56.
 1.23e12 // 1.23 x 1012
 1.23e-12 // 1.23 x 10-12
 5.90849203e5 // 5.90849203 x 105


Arithmetic in JavaScript


• Expected set of arithmetic operators


 Including + (addition), - (subtraction),
* (multiplication), / (division), and % (modulo)


 No integral division


 No integral division
• Math object for other operations


JavaScript Strings


JavaScript Strings
• Ordered, immutable sequence of 16-bit Unicode
characters


JavaScript Strings
characters
 From zero to as many as will fit in memory


JavaScript Strings
characters
 Consist of letters, numbers, punctuation, and spaces


JavaScript Strings
characters
 Zero-based indexing


JavaScript Strings
characters
 Empty string (“”) has length of zero


JavaScript Strings
characters
 No special type to represent a single character


JavaScript Strings
characters
• Delimit with single ' or double " quotes


JavaScript Strings
characters
 Can’t mix to delimit string


JavaScript Strings
characters
 Can’t mix to delimit string
 Can embed quote not used to delimit string


String Delimiters


String Delimiters
• Either string is valid


String Delimiters
 "'Don't use that food to feed the dog,'
she said. 'It's been recalled by the
manufacturer.'"


String Delimiters
manufacturer.'"
 '"Don"t use that food to feed the dog,"
she said. "It"s been recalled by the
manufacturer."'


String Delimiters
manufacturer.'"
manufacturer."'
• Not valid


String Delimiters
manufacturer.'"
manufacturer."'
• Not valid
 '"Don't use that food to feed the dog,"
she said. "It has been recalled by the
manufacturer."'


String Literals


String Literals
• All the following are valid string literals


String Literals
 "" // an empty string


String Literals
 '' // another empty string


String Literals
 "Don Kiely"


String Literals
 "Don Kiely"
 '1.414' // a number represented
as a string


String Literals
 "Don Kiely"
 '1.414' // a number represented
as a string
 "My password is 'beetle$%^Bailey392'"


Line Breaks in String Literals


• ECMAScript 3 requires string literal on one line


 ECMAScript 5 allows break with at end of line


• Problem in ECMAScript 3 but fine in 5:


"Four score and seven years ago our fathers
brought forth on this continent, a new nation,
conceived in Liberty, and dedicated to the
proposition that all men are created equal."



• Following is invalid…see the difference?


Escape Sequences in String Literals


• Include characters that have special meaning by
using an escape sequence


 Backslash identifies the special character


 Backslash identifies the special character
 '"Don't use that food to feed the dog,"
she said. "It's been recalled by the
manufacturer."‘


JavaScript Escape Sequences


JavaScript Escape Sequences
Escape Sequence Description
' Single quote or apostrophe
" Double quote
Backslash
0 Nul character (that’s a backslash-zero)
b Backspace
f Form feed
n Newline
r Carriage return
t Horizontal tab
v Vertical tab
xXX The Latin-1 character specified by the two
uXXXX hexadecimal digits XX between 00 and ff. For example,
The Unicode character specified by the four
the copyrightdigits dddd. For example, the π symbol is
hexadecimal symbol is xa9.

JavaScript Boolean Values


• Represents true or false


 Usually the result of some logical comparison


• JavaScript can convert any value to a Boolean


 These are all false


0 (zero)


0 (zero)
-0 (negative zero)


0 (zero)
-0 (negative zero)
"" (empty string)


0 (zero)
-0 (negative zero)
"" (empty string)
NaN


0 (zero)
-0 (negative zero)
"" (empty string)
NaN
null


0 (zero)
-0 (negative zero)
"" (empty string)
NaN
null
undefined


0 (zero)
-0 (negative zero)
"" (empty string)
NaN
null
undefined
 All other values are true


Truthy and Falsy


Truthy and Falsy
• Any value that converts to true is truthy


Truthy and Falsy
• Any value that converts to false is falsy


Truthy and Falsy
• When JavaScript expects a Boolean value


Truthy and Falsy
 Truthy value works like true


Truthy and Falsy
 Falsy value works like false


Truthy and Falsy
• These are generally equivalent


Truthy and Falsy
 if (result !== 0)


Truthy and Falsy
 if (result)


Truthy and Falsy
 if (result)
• But be careful!


Truthy and Falsy
 if (result)
• But be careful!
 The result variable could hold other truthy or falsy values


Boolean Methods and Logical


• Boolean values have two methods


 toString() returns "true" or "false"


 valueOf() returns true of false


• Logical operators


 && AND


 && AND
 || OR


 && AND
 || OR
 ! NOT


Special Values: null and undefined


• null


• null
 Language keyword


• null
 An object, but considered a separate type


• null
 Absence of a value


• null
• undefined


• null
• undefined
 Also means absence of value, but in a deeper way


• null
• undefined
 Predefined global variable


• null
• undefined
 Predefined global variable
 Type is undefined (literally, that’s its type)


undefined


undefined
• JavaScript uses in a few different ways


undefined
 Variable that has been declared but not yet assigned
a value


undefined
a value
 Function parameter that the calling code doesn’t
provide a value for


undefined
a value
provide a value for
 Property that doesn’t exist on an object


undefined
a value
provide a value for
 Array element that doesn’t exist


undefined
a value
provide a value for
 Function that doesn’t return a value


undefined
a value
provide a value for
 Function that doesn’t return a value
• undefined is read/write in ECMAScript 3, read-
only in ECMAScript 5


Use null or undefined?


• Both mean absence of value


 Can often use interchangeably


 In fact, null == undefined


 But null !== undefined


• Best advice


• Best advice
 Use undefined to represent system-level, unexpected, or
erroneous absence of value


• Best advice
 Use null to represent a program-level normal, or expected
absence of value


• Best advice
absence of value
• In other words, use null when you need to express
missing value


• Best advice
absence of value
• In other words, use null when you need to express
missing value
 Let JavaScript manage use of undefined


Type Comparisons


Type Comparisons
• JavaScript compares primitive values and object
values differently


Type Comparisons
values differently
 Primitive values by value


Type Comparisons
values differently
 Primitive values by value
 Object values by reference


Object Comparisons


Object Comparisons
• JavaScript compares objects by reference


Object Comparisons
 Equal only if the two variables hold a reference to the
same object in memory


Object Comparisons
 Equal only if the two variables hold a reference to the
same object in memory
 If hold a reference to two different objects, even if
objects are the exact same, they are not equal


Type Conversions


Type Conversions
• Feature that makes JavaScript easy and hard


Type Conversions
 Does everything it can to implicitly convert values to
make useable in a statement


Type Conversions
 Doesn’t always do what you want


Type Conversions
• Automatic type conversions


Type Conversions
 Convert to truthy or falsy when expects Boolean


Type Conversions
 Converts anything to a string when expects string


Type Conversions
 Tries to convert to a number when expects number


Type Conversions
 Tries to convert to a number when expects number
• Also supports explicit type conversions


Explicit Type Conversions


• You can do it yourself explicitly


 Use when implicit conversions don’t work for you


 Or you want cleaner and clearer code


• Various ways


• Various ways
 Wrapper objects


• Various ways
 Wrapper objects
 Type methods


• Various ways
 Wrapper objects
 Type methods
 Global functions


• Various ways
 Wrapper objects
 Type methods
 Global functions
 …among others


Formatting Methods and Parsing
Functions


Functions
• Don’t have much control with other conversion
techniques


Functions
techniques
 Get a reasonable value in the type you want


Functions
techniques
 Get a reasonable value in the type you want
• JavaScript has specialized methods and functions
that give you control


Conversions Using Wrapper Objects


• Number, String, Boolean, and Object wrapper
objects


objects
 Provide properties and methods for corresponding
types


objects
types
 Creates a String object and uses length property


objects
types
o "AppDev".length


objects
types
o "AppDev".length

• Can use these functions for explicit conversion


Number Formatting Methods


• Give more control than toString()


 toFixed()


 toFixed()
 toPrecision()


 toFixed()
 toPrecision()
 toExponential()


 toFixed()
 toPrecision()
 toExponential()
• All three round number or pad with zeros as
necessary


Using Variables


Using Variables
• Way to temporarily store bits of data


Using Variables
• Necessity in almost every language


Using Variables
• Necessity in almost every language
• JavaScript variables are a bit different


Variable Declaration


• Not required, but you should do it


• Untyped, so simple: use var with identifier


 var count;


 var count;
 var minMsgID;


 var count;
 var minMsgID;
 var lastName;


 var count;
 var minMsgID;
 var lastName;
• Undefined until initialized


 var count;
 var minMsgID;
 var lastName;
• Can declare and initialize in one statement


 var count;
 var minMsgID;
 var lastName;
 var count = 0;


 var count;
 var minMsgID;
 var lastName;
 var count = 0;
 var minMsgID = 32629;


 var count;
 var minMsgID;
 var lastName;
 var count = 0;
 var minMsgID = 32629;
 var lastName = "Kiely";


• Multiple variables in single var statement


 var count = 0, minMsgID = 32629, lastName = "Kiely";



• Break onto multiple lines



 var count = 0,
minMsgID = 32629,
lastName = "Kiely";



 var count = 0,
minMsgID = 32629,
lastName = "Kiely";
• Declare and initialize within loops



 var count = 0,
minMsgID = 32629,
lastName = "Kiely";
• Declare and initialize within loops
 for (var i = 2; i <= 36; i++)
console.log("Base " + i + ": " +
num.toString(i));


Variable Cautions and Gotchas


• Variable can hold any type during execution


 var count = 0;
<program code>
count = "Don";
<more program code>
count = false
<yet more code>
count = "The Duke of Windsor";


 var count = 0;
<program code>
count = "Don";
<more program code>
count = false
<yet more code>
• Be careful splitting across multiple lines!


 var count = 0;
<program code>
count = "Don";
<more program code>
count = false
<yet more code>
• Be careful splitting across multiple lines!
 var count = 0
minMsgID = 32629,
lastName = "Kiely";


Variable Scope


Variable Scope
• Scope is section of code where variable is
defined and accessible


Variable Scope
• Two scopes in JavaScript


Variable Scope
 Global


Variable Scope
 Global
 Local


Variable Scope
 Global
 Local
• Local variable has function scope in JavaScript


Variable Hoisting


Variable Hoisting
• Function scope has an important implication


Variable Hoisting
• All local variables declared within a function


Variable Hoisting
 Visible throughout the body of the function


Variable Hoisting
 Visible throughout the body of the function
• Side effect: all local variables are visible even
before they are declared


Learn More!


Learn More!
• This is an excerpt from a larger course. Visit
www.learnnowonline.com for the full details!


Learn More!

• Learn more about JavaScript on SlideShare!


Learn More!

• Learn more about JavaScript on SlideShare!
• Introduction to JavaScript


JavaScript: Values, Types and Variables

More Related Content

What's hot

Similar to JavaScript: Values, Types and Variables

More from LearnNowOnline

Recently uploaded

JavaScript: Values, Types and Variables

Editor's Notes