Object-Oriented JavaScript - Second Edition: If you've limited or no experience with JavaScript, this book will put you on the road to being an expert. A wonderfully compiled introduction to objects in JavaScript, it teaches through examples and practical play. , Second Edition

Stoyan STEFANOV

€8.98~~€32.99~~

4.6(11 Ratings)

eBookJul 2013382 pages2nd Edition

Stoyan STEFANOV

€8.98~~€32.99~~

4.6(11 Ratings)

eBookJul 2013382 pages2nd Edition

What do you get with eBook?

Instant access to your Digital eBook purchase

Download this book inEPUB andPDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Contact Details

Payment Processing...

Completed

Billing Address

View table of contents Preview book icon

Preview Book

Object-Oriented JavaScript - Second Edition

Chapter 2. Primitive Data Types, Arrays, Loops, and Conditions

Before diving into the object-oriented features of JavaScript, let's first take a look at some of the basics. This chapter walks you through the following:

The primitive data types in JavaScript, such as strings and numbers
Arrays
Common operators, such as+,-,delete, andtypeof
Flow control statements, such as loops and if-else conditions

Variables

Variables are used to store data; they are placeholders for concrete values. When writing programs, it's convenient to use variables instead of the actual data, as it's much easier to writepi instead of3.141592653589793, especially when it happens several times inside your program. The data stored in a variable can be changed after it was initially assigned, hence the name "variable". You can also use variables to store data that is unknown to you while you write the code, such as the result of a later operation.

Using a variable requires two steps. You need to:

Declare the variable
Initialize it, that is, give it a value

To declare a variable, you use thevar statement, like this:

var a;var thisIsAVariable; var _and_this_too; var mix12three;

For the names of the variables, you can use any combination of letters, numbers, the underscore character, and the dollar sign. However, you can't start with a number, which means that this is invalid:

var 2three4five...

Operators

Operators take one or two values (or variables), perform an operation, and return a value. Let's check out a simple example of using an operator, just to clarify the terminology:

> 1 + 2;3

In this code:

+ is the operator
The operation is addition
The input values are1 and2 (the input values are also called operands)
The result value is3
The whole thing is called an expression

Instead of using the values1 and2 directly in the expression, you can use variables. You can also use a variable to store the result of the operation, as the following example demonstrates:

> var a = 1;> var b = 2;> a + 1;2> b + 2;4> a + b;3> var c = a + b;> c;3

The following table lists the basic arithmetic operators:

Operator symbol	Operation	Example
`+`	Addition	> 1 + 2;3
`-`	Subtraction	> 99.99 – 11;88.99
`*`	Multiplication	> 2 * 3;6
`/`	Division	> 6 / 4;1.5
`%`	Modulo, the remainder of a division	>...

Primitive data types

Any value that youuse is of a certain type. In JavaScript, there are just a few primitive data types:

Number: This includes floating point numbers as well as integers. For example, these values are all numbers:1,100,3.14.
String: These consist of any number of characters, for example"a","one", and"one 2 three".
Boolean: This can be eithertrue orfalse.
Undefined: When you try to access a variable that doesn't exist, you get the special valueundefined. The same happens when you declare a variable without assigning a value to it yet. JavaScript initializes the variable behind the scenes with the valueundefined. The undefined data type can only have one value – the special valueundefined.
Null: This is another special data type that can have only one value, namely thenull value. It means no value, an empty value, or nothing. The difference withundefined is that if a variable has a valuenull, it's still defined, it...

Strings

A string is a sequence of characters used to represent text. In JavaScript, any value placed between single or doublequotes is considered a string. This means that1 is a number, but"1" is a string. When used with strings,typeof returns the string"string":

> var s = "some characters";> typeof s;"string"> var s = 'some characters and numbers 123 5.87';> typeof s;"string"

Here's an example of a number used in the string context:

> var s = '1';> typeof s;"string"

If you put nothing in quotes, it's still a string (an empty string):

> var s = ""; typeof s;"string"

As you already know, when you use the plus sign with two numbers, this is the arithmetic addition operation. However, if you use the plus sign with strings, this is a string concatenation operation, and it returns the two strings glued together:

> var s1 = "web"; > var s2...

Booleans

There are only twovalues that belong to the Boolean data type: the valuestrue andfalse, used without quotes:

> var b = true; > typeof b;"boolean"> var b = false; > typeof b;"boolean"

If you quotetrue orfalse, they become strings:

> var b = "true"; > typeof b;"string"

Variables

Using a variable requires two steps. You need to:

Declare the variable
Initialize it, that is, give it a value

To declare a variable, you use thevar statement, like this:

var a;var thisIsAVariable; var _and_this_too; var mix12three;

var 2three4five;

To initialize avariable...

Operators

Operators take one or two values (or variables), perform an operation, and return a value. Let's check out a simple example of using an operator, just to clarify the terminology:

> 1 + 2;3

In this code:

+ is the operator
The operation is addition
The input values are1 and2 (the input values are also called operands)
The result value is3
The whole thing is called an expression

Instead of using the values1 and2 directly in the expression, you can use variables. You can also use a variable to store the result of the operation, as the following example demonstrates:

> var a = 1;> var b = 2;> a + 1;2> b + 2;4> a + b;3> var c = a + b;> c;3

The following table lists the basic arithmetic operators:

Operator symbol	Operation	Example
`+`	Addition	> 1 + 2;3
`-`	Subtraction	> 99.99 – 11;88.99
`*`	Multiplication	> 2 * 3;6
`/`	Division	> 6 / 4;1.5
`%`	Modulo, the remainder of a division	> 6 % 3;0&gt...

Primitive data types

Any value that youuse is of a certain type. In JavaScript, there are just a few primitive data types:

Number: This includes floating point numbers as well as integers. For example, these values are all numbers:1,100,3.14.
String: These consist of any number of characters, for example"a","one", and"one 2 three".
Boolean: This can be eithertrue orfalse.
Undefined: When you try to access a variable that doesn't exist, you get the special valueundefined. The same happens when you declare a variable without assigning a value to it yet. JavaScript initializes the variable behind the scenes with the valueundefined. The undefined data type can only have one value – the special valueundefined.
Null: This is another special data type that can have only one value, namely thenull value. It means no value, an empty value, or nothing. The difference withundefined is that if a variable has a valuenull, it's still defined, it just so happens that its value is nothing. You...

Strings

> var s = "some characters";> typeof s;"string"> var s = 'some characters and numbers 123 5.87';> typeof s;"string"

Here's an example of a number used in the string context:

> var s = '1';> typeof s;"string"

If you put nothing in quotes, it's still a string (an empty string):

> var s = ""; typeof s;"string"

> var s1 = "web"; > var s2 = "site"; > var s = s1 + s2; > s;"website"> typeof s;"string"

The dual purpose of the+ operator is a source...

Booleans

There are only twovalues that belong to the Boolean data type: the valuestrue andfalse, used without quotes:

> var b = true; > typeof b;"boolean"> var b = false; > typeof b;"boolean"

If you quotetrue orfalse, they become strings:

> var b = "true"; > typeof b;"string"

Logical operators

There are three operators,called logical operators, that work with Boolean values. These are:

! – logical NOT (negation)
&& – logical AND
|| – logical OR

You know that when something is not true, it must be false. Here's how this is expressed using JavaScript and the logical! operator:

> var b = !true;> b;false

If you use the logical NOT twice, you get the original value:

> var b = !!true;> b;true

If you use a logical operator on a non-Boolean value, the value is converted to Boolean behind the scenes:

> var b = "one";> !b;false

In the precedingcase, the string value"one" is converted to a Boolean,true, and then negated. The result of negatingtrue isfalse. In the next example, there's a double negation, so the result istrue:

> var b = "one";> !!b;true

You can convert any value to its Boolean equivalent using a double negation. Understanding how any value converts to a Boolean is important. Most values convert totrue with the exception...

Comparison

There's another set of operators that all return a Boolean value as a result of the operation. These are the comparison operators. The following table lists them together with example uses:

Operator symbol	Description	Example
`==`	Equality comparison: Returns true when both operands are equal. The operands are converted to the same type before being compared. Also called loose comparison.	> 1 == 1;true > 1 == 2;false > 1 == '1';true
`===`	Equality and type comparison: Returns`true` if both operands are equal and of the same type. It's better and safer to compare this way because there's no behind-the-scenes type conversions. It is also called strict comparison.	> 1 === '1';false > 1 === 1;true
`!=`	Non-equality comparison: Returns`true` if the operands are not equal to each other (after a type conversion).	> 1 != 1;false > 1 != '1';false > 1 != '2';true
`!==`	Non-equality comparison without type conversion: Returns...

Primitive data types recap

Let's quickly summarizesome of the main points discussed so far:

There are fiveprimitive data types in #"bullet">
Number
String
Boolean
Undefined
Null

Everything that is not a primitive data type is an object

The primitive number data type can store positive and negative integers or floats, hexadecimal numbers, octal numbers, exponents, and the special numbersNaN,Infinity, and–Infinity

The string data type contains characters in quotes

The only values of the Boolean data type aretrue andfalse

The only value of the null data type is the valuenull

The only value of the undefined data type is the valueundefined

All values becometrue when converted to a Boolean, with the exception of the six falsy values:

""
null
undefined
0
NaN
false

Arrays

Now that you know about the basic primitive data types in JavaScript, it's time to move to a more powerfuldata structure—the array.

So, what is an array? It's simply a list (a sequence) of values. Instead of using one variable to store one value, you can use one array variable to store any number of values as elements of the array.

To declare a variable that contains an empty array, you use square brackets with nothing between them:

> var a = [];

To define an array that has three elements, you do this:

> var a = [1, 2, 3];

When you simply type the name of the array in the console, you get the contents of your array:

> a;[1, 2, 3]

Now thequestion is how to access the values stored in these array elements. The elements contained in an array are indexed with consecutive numbers starting from zero. The first element has index (or position) 0, the second has index 1, and so on. Here's the three-element array from the previous example:

Index	Value
`0`	`1`
`1`	`2`
`2`	`3`

To...

Conditions and loops

Conditions provide a simple but powerful way to control the flow of code execution.Loops allow you to perform repetitive operations with less code. Let's take a look at:

if conditions
switch statements
while,do-while,for, andfor-in loops

Note

The examples in the following sections require you to switch to the multiline Firebug console. Or, if you use the WebKit console, useShift +Enter instead ofEnter to add a new line.

The if condition

Here's a simple exampleof anif condition:

var result = '', a = 3;if (a > 2) {  result = 'a is greater than 2';}

The parts of theif condition are:

Theif statement
A condition in parentheses—"isa greater than 2?"
A block of code wrapped in{} that executes if the condition is satisfied

The condition (the part in parentheses) always returns a Boolean value, and may also contain the following:

A logical operation:!,&&, or||
A comparison, such as===,!=,>, and so on
Any value or variable that can be converted to a Boolean...

Code blocks

In the preceding examples, you saw the use of code blocks. Let's take a moment to clarify what a block of code is,because you use blocks extensively when constructing conditions and loops.

A block of code consists of zero or more expressions enclosed in curly brackets:

{  var a = 1;  var b = 3;}

You can nest blocks within each other indefinitely:

{  var a = 1;  var b = 3;  var c, d;  {    c = a + b;    {      d = a - b;    }  }}

Tip

Best practice tips

Use end-of-line semicolons, as discussed previously in the chapter. Although the semicolon is optional when you have only one expression per line, it's good to develop the habit of using them. For best readability, the individual expressionsinside a block should be placed one per line and separated by semicolons.
Indent any code placed within curly brackets. Some programmers like one tab indentation, some use four spaces, and some use two spaces. It really doesn't matter, as long as you're consistent. In the preceding example...

Page1 of 17

Key benefits

Think in JavaScript
Make object-oriented programming accessible and understandable to web developers
Apply design patterns to solve JavaScript coding problems
Learn coding patterns that unleash the unique power of the language
Write better and more maintainable JavaScript code
Type in and play around with examples that can be used in your own scripts

Description

JavaScript is the behavior, the third pillar in today's paradigm that looks at web pages as something that consists of clearly distinguishable parts: content (HTML), presentation (CSS) and behavior (JavaScript). Using JavaScript, you can create not only web pages but also desktop widgets, browser and application extensions, and other pieces of software. It's a pretty good deal: you learn one language and then code all kinds of different applications. While there's one chapter specifically dedicated to the web browser environment including DOM, Events and AJAX tutorials, the rest is applicable to the other environmentsMany web developers have tried coding or adopting some bits of JavaScript, but it is time to "man up" and learn the language properly because it is the language of the browser and is, virtually, everywhere. This book starts from zero, not assuming any prior JavaScript programming knowledge and takes you through all the in-depth and exciting futures hidden behind the facade. Once listed in the "nice to have" sections of job postings, these days the knowledge of JavaScript is a deciding factor when it comes to hiring web developers. After reading this book you'll be prepared to ace your JavaScript job interview and even impress with some bits that the interviewer maybe didn't know. You should read this book if you want to be able to take your JavaScript skills to a new level of sophistication.

Who is this book for?

For new to intermediate JavaScript developer who wants to prepare themselves for web development problems solved by smart JavaScript!

What you will learn

The basics of object-oriented programming, and how to apply it in the JavaScript environment
How to set up and use your training environment (Firebug)
In depth discussion of data types, operators, and flow control statements in JavaScript
In depth discussion of functions, function usage patterns, and variable scope
Understand how prototypes work
Reuse code with common patterns for inheritance
Make your programs cleaner, faster and compatible with other programs and libraries
Use object-oriented JavaScript for improving script performance
Achieve missing object-oriented features in JavaScript