What is an Array Arrays are complex variables that allow us to store more than one value or a group of values under a single variable name. JavaScript arrays can store any valid value, including strings, numbers, objects, functions, and even other arrays, thus making it possible to create more complex data structures such as an array of objects or an array of arrays. Let’s suppose you want to store the name of colors in your JavaScript code. Storing the color names one by one in a variable could look something like this: Example But what happens if you need to store the state or city names of a country in variables and this time this not just three may be hundred. It is quite hard and boring to store each of them in a separate variable. Also, using so many variables simultaneously and keeping track of them all will be a very difficult task. And here array comes into play. Arrays solve this problem by providing an ordered structure for storing multiple values or a group of values. Creating an Array The simplest way to create an array in JavaScript is enclosing a comma-separated list of values in square brackets ([]), as shown in the following syntax: var myArray = [element0, element1, …, elementN]; Array can also be created using the Array() constructor as shown in the following syntax. However, for the sake of simplicity previous syntax is recommended. var myArray = new Array(element0, element1, …, elementN); Here are some examples of arrays created using array literal syntax: Example Note: An array is an ordered collection of values. Each value in an array is called an element, and each element has a numeric position in an array, known as its index. Accessing the Elements of an Array Array elements can be accessed by their index using the square bracket notation. An index is a number that represents an element’s position in an array. Array indexes are zero-based. This means that the first item of an array is stored at index 0, not 1, the second item is stored at index 1, and so on. Array indexes start at 0 and go up to the number of elements minus 1. So, array of five elements would have indexes from 0 to 4. The following example will show you how to get individual array element by their index. Example Note: In JavaScript, arrays are really just a special type of objects which has numeric indexes as keys. The typeof operator will return “object” for arrays. Getting the Length of an Array The length property returns the length of an array, which is the total number of elements contained in the array. Array length is always greater than the index of any of its element. Example Looping Through Array Elements You can use for loop to access each element of an array in sequential order, like this: Example ECMAScript 6 has introduced a simpler way to iterate over array element, which is for-of loop. In this loop you don’t have to initialize and keep track of the loop counter variable (i). Here’s the same example rewritten using the for-of loop: Example You can also iterate over the array elements using for-in loop, like this: Example Note: The for-in loop should not be used to iterate over an array where the index order is important. The for-in loop is optimized for iterating over object’s properties, you should better use a for loop with a numeric index or for-of loop. Adding New Elements to an Array To add a new element at the end of an array, simply use the push() method, like this: Example Similarly, to add a new element at the beginning of an array use the unshift() method, like this: Example You can also add multiple elements at once using the push() and unshift() methods, like this: Example Removing Elements from an Array To remove the last element from an array you can use the pop() method. This method returns the value that was popped out. Here’s an example: Example Similarly, you can remove the first element from an array using the shift() method. This method also returns the value that was shifted out. Here’s an example: Example Tip: The push() and pop() methods runs faster than unshift() and shift(). Because push() and pop() methods simply add and remove elements at the end of an array therefore the elements do not move, whereas unshift() and shift() add and remove elements at the beginning of the array that require re-indexing of whole array. Adding or Removing Elements at Any Position The splice() method is a very versatile array method that allows you to add or remove elements from any index, using the syntax arr.splice(startIndex, deleteCount, elem1, …, elemN). This method takes three parameters: the first parameter is the index at which to start splicing the array, it is required; the second parameter is the number of elements to remove (use 0 if you don’t want to remove any elements), it is optional; and the third parameter is a set of replacement elements, it is also optional. The following example shows how it works: Example The splice() method returns an array of the deleted elements, or an empty array if no elements were deleted, as you can see in the above example. If the second argument is omitted, all elements from the start to the end of the array are removed. Unlike slice() and concat() methods, the splice() method modifies the array on which it is called on. Creating a String from an Array There may be situations where you simply want to create a string by joining the elements of an array. To do this you can use the join() method. This method takes an optional parameter which is a separator string that is added in between each element. If you omit the separator, then JavaScript will use comma (,) by default. The following example shows how it works: Example You can also convert an array to a comma-separated string using the toString(). This method does not accept the separator parameter like join(). Here’s an example: Example Extracting a Portion of an Array If you want to extract out a portion of an array (i.e. subarray) but keep the original array intact you can use the slice() method. This method takes 2 parameters: start index (index at which to begin extraction), and an optional end index (index before which to end extraction),

Using the Switch…Case Statement The switch..case statement is an alternative to the if…else if…else statement, which does almost the same thing. The switch…case statement tests a variable or expression against a series of values until it finds a match, and then executes the block of code corresponding to that match. It’s syntax is: switch(x){case value1:        // Code to be executed if x === value1        break;case value2:        // Code to be executed if x === value2        break;    …default:        // Code to be executed if x is different from all values} Consider the following example, which display the name of the day of the week. Example The getDay() method returns the weekday as a number from 0 and 6, where 0 represents Sunday. See the JavaScript date and time chapter to learn more about date methods. Note: In a switch…case statement, the value of the expression or variable is compared against the case value using the strict equality operator (===). That means if x = “0”, it doesn’t match case 0:, because their data types are not equal. The switch…case statement differs from the if…else statement in one important way. The switch statement executes line by line (i.e. statement by statement) and once JavaScript finds a case clause that evaluates to true, it’s not only executes the code corresponding to that case clause, but also executes all the subsequent case clauses till the end of the switch block automatically. To prevent this you must include a break statement after each case (as you can see in the above example). The break statement tells the JavaScript interpreter to break out of the switch…case statement block once it executes the code associated with the first true case. The break statement is however not required for the case or default clause, when it appears at last in a switch statement. Although, it a good programming practice to terminate the last case, or default clause in a switch statement with a break. It prevents a possible programming error later if another case statement is added to the switch statement. The default clause is optional, which specify the actions to be performed if no case matches the switch expression. The default clause does not have to be the last clause to appear in a switch statement. Here’s an example, where default is not the last clause. Example Multiple Cases Sharing Same Action Each case value must be unique within a switch statement. However, different cases don’t need to have a unique action. Several cases can share the same action, as shown here: Example

JavaScript Conditional Statements Like many other programming languages, JavaScript also allows you to write code that perform different actions based on the results of a logical or comparative test conditions at run time. This means, you can create test conditions in the form of expressions that evaluates to either true or false and based on these results you can perform certain actions. There are several conditional statements in JavaScript that you can use to make decisions: We will discuss each of these statements in detail in the coming sections. The if Statement The if statement is used to execute a block of code only if the specified condition evaluates to true. This is the simplest JavaScript’s conditional statements and can be written like: if(condition) {// Code to be executed} The following example will output “Have a nice weekend!” if the current day is Friday: Example The if…else Statement You can enhance the decision making capabilities of your JavaScript program by providing an alternative choice through adding an else statement to the if statement. The if…else statement allows you to execute one block of code if the specified condition is evaluates to true and another block of code if it is evaluates to false. It can be written, like this: if(condition) {// Code to be executed if condition is true} else {// Code to be executed if condition is false} The JavaScript code in the following example will output “Have a nice weekend!” if the current day is Friday, otherwise it will output the text “Have a nice day!”. Example The if…else if…else Statement The if…else if…else a special statement that is used to combine multiple if…else statements. if(condition1) {// Code to be executed if condition1 is true} else if(condition2) {// Code to be executed if the condition1 is false and condition2 is true} else {// Code to be executed if both condition1 and condition2 are false} The following example will output “Have a nice weekend!” if the current day is Friday, and “Have a nice Sunday!” if the current day is Sunday, otherwise it will output “Have a nice day!” Example You will learn about the JavaScript switch-case statement in the next chapter. The Ternary Operator The ternary operator provides a shorthand way of writing the if…else statements. The ternary operator is represented by the question mark (?) symbol and it takes three operands: a condition to check, a result for true, and a result for false. Its basic syntax is: let result = (condition) ? value1 : value2 If the condition is evaluated to true the value1 will be returned, otherwise value2 will be returned. To understand how this operator works, consider the following examples: Example Using the ternary operator the same code could be written in a more compact way: Example As you can see in the above example, since the specified condition evaluated to false the value on the right side of the colon (:) is returned, which is the string ‘Adult’.

Working with Numbers JavaScript supports both integer and floating-point numbers that can be represented in decimal, hexadecimal or octal notation. Unlike other languages, JavaScript does not treat integer and floating-point numbers differently. All numbers in JavaScript are represented as floating-point numbers. Here’s an example demonstrating the numbers in different formats: Example Extra large numbers can be represented in exponential notation e.g. 6.02e+23 (same as 6.02×1023). Example Tip: The biggest safe integer in JavaScript is 9007199254740991 (253-1), whereas the smallest safe integer is -9007199254740991 (-(253-1)). Numbers can also be represented in hexadecimal notation (base 16). Hexadecimal numbers are prefixed with 0x. They are commonly used to represent colors. Here’s an example: Example Note: Integers can be represented in decimal, hexadecimal, and octal notation. Floating-point numbers can be represented in decimal or exponential notation. Operating on Numbers and Strings As you know from the previous chapters, the + operator is used for both addition and concatenation. So, performing mathematical operations on numbers and strings may produce interesting results. The following example will show you what happens when you add numbers and strings: Example If you observe the above example carefully, you will find that the result of the last operation is not just a simple string concatenation, because operators with the same precedence are evaluated from left to right. That’s why, since variables x and y both are numbers they are added first then the result is concatenated with the variable z which is a string, hence final result is 30 + “30” = “3030”. But, if you perform other mathematical operations like multiplication, division, or subtraction the result will be different. JavaScript will automatically convert numeric strings (i.e. strings containing numeric values) to numbers in all numeric operations, as shown in the following example: Example Moreover, if you try to multiply or divide numbers with strings that are not numeric, it returns NaN (Not a Number). Also, if you use NaN in a mathematical operation, the result will also be NaN. Example Representing Infinity Infinity represents a number too big for JavaScript to handle. JavaScript has special keyword Infinity and -Infinity to represent positive and negative infinity respectively. For example, dividing by 0 returns Infinity, as demonstrated below: Example Note: Infinity is a special value that represents the mathematical Infinity ∞, which is greater than any number. The typeof operator return number for an Infinity value. Avoiding Precision Problems Sometimes, operations on floating-point numbers produce unexpected results, as shown here: Example As you can see the result is 0.30000000000000004 rather than the expected 0.3. This difference is called representation error or roundoff error. It occurs because JavaScript and many other languages uses binary (base 2) form to represent decimal (base 10) numbers internally. Unfortunately, most decimal fractions can’t be represented exactly in binary form, so small differences occur. To avoid this problem you can use the solution something like this: Example Try this code » JavaScript round floating-point numbers to 17 digits, which is enough precision or accuracy in most cases. Also, in JavaScript integers (numbers without fractional parts or exponential notation) are accurate is up to 15 digits, as demonstrated in the following example: Example Performing Operations on Numbers JavaScript provides several properties and methods to perform operations on number values. As you already know from the previous chapters, in JavaScript primitive data types can act like objects when you refer to them with the property access notation (i.e. dot notation). In the following sections, we will look at the number methods that are most commonly used. Parsing Integers from Strings The parseInt() method can be used to parse an integer from a string. This method is particularly handy in situations when you are dealing with the values like CSS units e.g. 50px, 12pt, etc. and you would like to extract the numeric value out of it. If the parseInt() method encounters a character that is not numeric in the specified base, it stops parsing and returns the integer value parsed up to that point. If the first character cannot be converted into a number, the method will return NaN (not a number). Leading and trailing spaces are allowed. Here’s an example: Example Note: The parseInt() method truncates numbers to integer values, but it should not be used as a substitute for Math.floor() method. Similarly, you can use the parseFloat() method to parse floating-point number from a string. The parseFloat() method works the same way as the parseInt() method, except that it retrieves both integers and numbers with decimals. Example Converting Numbers to Strings The toString() method can be used to convert a number to its string equivalent. This method optionally accepts an integer parameter in the range 2 through 36 specifying the base to use for representing numeric values. Here’s an example: Example Formatting Numbers in Exponential Notation You can use the toExponential() method to format or represent a number in exponential notation. This method optionally accepts an integer parameter specifying the number of digits after the decimal point. Also, the returned value is a string not a number. Here’s an example: Example Note: Exponential notation is useful for representing numbers that are either very large or very small in magnitude. For example, 62500000000 can be written as 625e+8 or 6.25e+10. Formatting Numbers to Fixed Decimals You can use the toFixed() method when you want to format a number with a fixed number of digits to the right of the decimal point. The value returned by this method is a string and it has exactly specified number of digits after the decimal point. If the digits parameter is not specified or omitted, it is treated as 0. Here’s an example: Example Formatting Numbers with Precision If you want most appropriate form of a number, you can use the toPrecision() method instead. This method returns a string representing the number to the specified precision. If precision is large enough to include all the digits of the integer part of number, then the number is formatted using fixed-point notation. Otherwise, the number is formatted using exponential notation. The precision parameter is optional. Here’s an example: Example Finding the Largest and Smallest Possible Numbers The Number object also has several properties associated with it. The Number.MAX_VALUE and Number.MIN_VALUE properties of the Number object represent the largest and smallest (closest to zero, not most negative) possible positive numbers that JavaScript can handle. They are constants and their actual values are 1.7976931348623157e+308, and 5e-324, respectively. A number that

What is String in JavaScript A string is a sequence of letters, numbers, special characters and arithmetic values or combination of all. Strings can be created by enclosing the string literal (i.e. string characters) either within single quotes (‘) or double quotes (“), as shown in the example below: Example You can use quotes inside a string, as long as they don’t match the quotes surrounding the string: Example However, you can still use single quotes inside a single quoted strings or double quotes inside double quoted strings by escaping the quotes with a backslash character (\), like this: Example The backslash (\) is called an escape character, whereas the sequences \’ and \” that we’ve used in the example above are called escape sequences. JavaScript Escape Sequences Escape sequences are also useful for situations where you want to use characters that can’t be typed using a keyboard. Here are some other most commonly used escape sequences. Here’s an example to clarify the how escape sequences actually works: Example Performing Operations on Strings JavaScript provides several properties and methods to perform operations on string values. Technically, only objects can have properties and methods. But in JavaScript primitive data types can act like objects when you refer to them with the property access notation (i.e. dot notation). JavaScript making it possible by creating a temporary wrapper object for primitive data types. This process is done automatically by the JavaScript interpreter in the background. Getting the Length of a String The length property returns the length of the string, which is the number of characters contained in the string. This includes the number of special characters as well, such as \t or \n. Example Note: Since length is a property, not a function, so don’t use parentheses after it like str.length(). Instead just write str.length, otherwise it will produce an error. Finding a String Inside Another String You can use the indexOf() method to find a substring or string within another string. This method returns the index or position of the first occurrence of a specified string within a string. Example Similarly, you can use the lastIndexOf() method to get the index or position of the last occurrence of the specified string within a string, like this: Example Both the indexOf(), and the lastIndexOf() methods return -1 if the substring is not found. Both methods also accept an optional integer parameter which specifies the position within the string at which to start the search. Here’s an example: Example Note: Characters in a string are indexed from left to right. The index of the first character is 0, and the index of the last character of a string called myStr is myStr.length – 1. Searching for a Pattern Inside a String You can use the search() method to search a particular piece of text or pattern inside a string. Like indexOf() method the search() method also returns the index of the first match, and returns -1 if no matches were found, but unlike indexOf() method this method can also take a regular expression as its argument to provide advanced search capabilities. Example Note: The search() method does not support global searches; it ignores the g flag or modifier (i.e. /pattern/g) of its regular expression argument. You will learn more about regular expressions in the upcoming chapters. Extracting a Substring from a String You can use the slice() method to extract a part or substring from a string. This method takes 2 parameters: start index (index at which to begin extraction), and an optional end index (index before which to end extraction), like str.slice(startIndex, endIndex). The following example slices out a portion of a string from position 4 to position 15: Example You can also specify negative values. The negative value is treated as strLength + startIndex, where strLength is the length of the string (i.e. str.length), for example, if startIndex is -5 it is treated as strLength – 5. If startIndex is greater than or equal to the length of the string, slice() method returns an empty string. Also, if optional endIndex is not specified or omitted, the slice() method extracts to the end of the string. Example You can also use the substring() method to extract a section of the given string based on start and end indexes, like str.substring(startIndex, endIndex). The substring() method is very similar to the slice() method, except few differences: The following example will show you how this method actuallty works: Example Extracting a Fixed Number of Characters from a String JavaScript also provide the substr() method which is similar to slice() with a subtle difference, the second parameter specifies the number of characters to extract instead of ending index, like str.substr(startIndex, length). If length is 0 or a negative number, an empty string is returned. The following example demonstrates how it works: Example Replacing the Contents of a String You can use the replace() method to replace part of a string with another string. This method takes two parameters a regular expression to match or substring to be replaced and a replacement string, like str.replace(regexp|substr, newSubstr). This replace() method returns a new string, it doesn’t affect the original string that will remain unchanged. The following example will show you how it works: Example By default, the replace() method replaces only the first match, and it is case-sensitive. To replace the substring within a string in a case-insensitive manner you can use a regular expression (regexp) with an i modifier, as shown in the example below: Example Similarly, to replace all the occurrences of a substring within a string in a case-insensitive manner you can use the g modifier along with the i modifier, like this: Example Converting a String to Uppercase or Lowercase You can use the toUpperCase() method to convert a string to uppercase, like this: Example Similarly, you can use the toLowerCase() to convert a string to lowercase, like this: Example Concatenating Two or More Strings You can concatenate or combine two or more strings using the + and += assignment operators. Example JavaScript also provides concat() method to combine strings, but it is not recommended. Accessing Individual Characters from a String You can use the charAt() method to access individual character from a string, like str.charAt(index). The index specified should be an integer between 0 and str.length – 1. If no index is provided the first character in the string is returned, since the default is 0. Example There is even better way to do this. Since ECMAScript 5, strings can be treated like read-only arrays, and you can access individual characters from a string using square brackets ([]) instead of the charAt() method, as demonstrated in the following example: Example Note: The only difference

Understanding Events and Event Handlers An event is something that happens when user interact with the web page, such as when he clicked a link or button, entered text into an input box or textarea, made selection in a select box, pressed key on the keyboard, moved the mouse pointer, submits a form, etc. In some cases, the Browser itself can trigger the events, such as the page load and unload events. When an event occur, you can use a JavaScript event handler (or an event listener) to detect them and perform specific task or set of tasks. By convention, the names for event handlers always begin with the word “on”, so an event handler for the click event is called onclick, similarly an event handler for the load event is called onload, event handler for the blur event is called onblur, and so on. There are several ways to assign an event handler. The simplest way is to add them directly to the start tag of the HTML elements using the special event-handler attributes. For example, to assign a click handler for a button element, we can use onclick attribute, like this: Example However, to keep the JavaScript seperate from HTML, you can set up the event handler in an external JavaScript file or within the <script> and </script> tags, like this: Example Note: Since HTML attributes are case-insensitive so onclick may also be written as onClick, OnClick or ONCLICK. But its value is case-sensitive. In general, the events can be categorized into four main groups — mouse events, keyboard events, form events and document/window events. There are many other events, we will learn about them in later chapters. The following section will give you a brief overview of the most useful events one by one along with the real life practice examples. Mouse Events A mouse event is triggered when the user click some element, move the mouse pointer over an element, etc. Here’re some most important mouse events and their event handler. The Click Event (onclick) The click event occurs when a user clicks on an element on a web page. Often, these are form elements and links. You can handle a click event with an onclick event handler. The following example will show you an alert message when you click on the elements. Example The Contextmenu Event (oncontextmenu) The contextmenu event occurs when a user clicks the right mouse button on an element to open a context menu. You can handle a contextmenu event with an oncontextmenu event handler. The following example will show an alert message when you right-click on the elements. Example The Mouseover Event (onmouseover) The mouseover event occurs when a user moves the mouse pointer over an element. You can handle the mouseover event with the onmouseover event handler. The following example will show you an alert message when you place mouse over the elements. Example The Mouseout Event (onmouseout) The mouseout event occurs when a user moves the mouse pointer outside of an element. You can handle the mouseout event with the onmouseout event handler. The following example will show you an alert message when the mouseout event occurs. Example Keyboard Events A keyboard event is fired when the user press or release a key on the keyboard. Here’re some most important keyboard events and their event handler. The Keydown Event (onkeydown) The keydown event occurs when the user presses down a key on the keyboard. You can handle the keydown event with the onkeydown event handler. The following example will show you an alert message when the keydown event occurs. Example The Keyup Event (onkeyup) The keyup event occurs when the user releases a key on the keyboard. You can handle the keyup event with the onkeyup event handler. The following example will show you an alert message when the keyup event occurs. Example The Keypress Event (onkeypress) The keypress event occurs when a user presses down a key on the keyboard that has a character value associated with it. For example, keys like Ctrl, Shift, Alt, Esc, Arrow keys, etc. will not generate a keypress event, but will generate a keydown and keyup event. You can handle the keypress event with the onkeypress event handler. The following example will show you an alert message when the keypress event occurs. Example Form Events A form event is fired when a form control receive or loses focus or when the user modify a form control value such as by typing text in a text input, select any option in a select box etc. Here’re some most important form events and their event handler. The Focus Event (onfocus) The focus event occurs when the user gives focus to an element on a web page. You can handle the focus event with the onfocus event handler. The following example will highlight the background of text input in yellow color when it receives the focus. Example Note: The value of this keyword inside an event handler refers to the element which has the handler on it (i.e. where the event is currently being delivered). The Blur Event (onblur) The blur event occurs when the user takes the focus away from a form element or a window. You can handle the blur event with the onblur event handler. The following example will show you an alert message when the text input element loses focus. Example To take the focus away from a form element first click inside of it then press the tab key on the keyboard, give focus on something else, or click outside of it. The Change Event (onchange) The change event occurs when a user changes the value of a form element. You can handle the change event with the onchange event handler. The following example will show you an alert message when you change the option in the select box. Example The Submit Event (onsubmit) The submit event only occurs when the user submits a form on a web page. You can handle the submit event with the onsubmit event handler. The following example will show you an alert message while submitting the form to the server. Example Document/Window Events Events are also triggered in situations when the page has loaded or when user resize the browser window,

What are Operators in JavaScript Operators are symbols or keywords that tell the JavaScript engine to perform some sort of actions. For example, the addition (+) symbol is an operator that tells JavaScript engine to add two variables or values, while the equal-to (==), greater-than (>) or less-than (<) symbols are the operators that tells JavaScript engine to compare two variables or values, and so on. The following sections describe the different operators used in JavaScript. JavaScript Arithmetic Operators The arithmetic operators are used to perform common arithmetical operations, such as addition, subtraction, multiplication etc. Here’s a complete list of JavaScript’s arithmetic operators: Operator Description Example Result + Addition x + y Sum of x and y – Subtraction x – y Difference of x and y. * Multiplication x * y Product of x and y. / Division x / y Quotient of x and y % Modulus x % y Remainder of x divided by y The following example will show you these arithmetic operators in action: Example JavaScript Assignment Operators The assignment operators are used to assign values to variables. Operator Description Example Is The Same As = Assign x = y x = y += Add and assign x += y x = x + y -= Subtract and assign x -= y x = x – y *= Multiply and assign x *= y x = x * y /= Divide and assign quotient x /= y x = x / y %= Divide and assign modulus x %= y x = x % y The following example will show you these assignment operators in action: Example JavaScript String Operators There are two operators which can also used be for strings. Operator Description Example Result + Concatenation str1 + str2 Concatenation of str1 and str2 += Concatenation assignment str1 += str2 Appends the str2 to the str1 The following example will show you these string operators in action: Example Try this code » JavaScript Incrementing and Decrementing Operators The increment/decrement operators are used to increment/decrement a variable’s value. Operator Name Effect ++x Pre-increment Increments x by one, then returns x x++ Post-increment Returns x, then increments x by one –x Pre-decrement Decrements x by one, then returns x x– Post-decrement Returns x, then decrements x by one The following example will show you how increment and decrement operators actually work: Example JavaScript Logical Operators The logical operators are typically used to combine conditional statements. Operator Name Example Result && And x && y True if both x and y are true || Or x || y True if either x or y is true ! Not !x True if x is not true The following example will show you how these logical operators actually work: Example You will learn about conditional statements in JavaScript if/else chapter. JavaScript Comparison Operators The comparison operators are used to compare two values in a Boolean fashion. Operator Name Example Result == Equal x == y True if x is equal to y === Identical x === y True if x is equal to y, and they are of the same type != Not equal x != y True if x is not equal to y !== Not identical x !== y True if x is not equal to y, or they are not of the same type < Less than x < y True if x is less than y > Greater than x > y True if x is greater than y >= Greater than or equal to x >= y True if x is greater than or equal to y <= Less than or equal to x <= y True if x is less than or equal to y The following example will show you these comparison operators in action: Example

Data Types in JavaScript Data types basically specify what kind of data can be stored and manipulated within a program. There are six basic data types in JavaScript which can be divided into three main categories: primitive (or primary), composite (or reference), and special data types. String, Number, and Boolean are primitive data types. Object, Array, and Function (which are all types of objects) are composite data types. Whereas Undefined and Null are special data types. Primitive data types can hold only one value at a time, whereas composite data types can hold collections of values and more complex entities. Let’s discuss each one of them in detail. The String Data Type The string data type is used to represent textual data (i.e. sequences of characters). Strings are created using single or double quotes surrounding one or more characters, as shown below: Example You can include quotes inside the string as long as they don’t match the enclosing quotes. Example You will learn more about the strings in JavaScript strings chapter. The Number Data Type The number data type is used to represent positive or negative numbers with or without decimal place, or numbers written using exponential notation e.g. 1.5e-4 (equivalent to 1.5×10-4). Example The Number data type also includes some special values which are: Infinity, -Infinity and NaN. Infinity represents the mathematical Infinity ∞, which is greater than any number. Infinity is the result of dividing a nonzero number by 0, as demonstrated below: Example While NaN represents a special Not-a-Number value. It is a result of an invalid or an undefined mathematical operation, like taking the square root of -1 or dividing 0 by 0, etc. Example You will learn more about the numbers in JavaScript numbers chapter. The Boolean Data Type The Boolean data type can hold only two values: true or false. It is typically used to store values like yes (true) or no (false), on (true) or off (false), etc. as demonstrated below: Example Boolean values also come as a result of comparisons in a program. The following example compares two variables and shows the result in an alert dialog box: Example You will learn more about the comparisons in JavaScript if/else chapter. The Undefined Data Type The undefined data type can only have one value-the special value undefined. If a variable has been declared, but has not been assigned a value, has the value undefined. Example The Null Data Type This is another special data type that can have only one value-the null value. A null value means that there is no value. It is not equivalent to an empty string (“”) or 0, it is simply nothing. A variable can be explicitly emptied of its current contents by assigning it the null value. Example The Object Data Type The object is a complex data type that allows you to store collections of data. An object contains properties, defined as a key-value pair. A property key (name) is always a string, but the value can be any data type, like strings, numbers, booleans, or complex data types like arrays, function and other objects. You’ll learn more about objects in upcoming chapters. The following example will show you the simplest way to create an object in JavaScript. Example You can omit the quotes around property name if the name is a valid JavaScript name. That means quotes are required around “first-name” but are optional around firstname. So the car object in the above example can also be written as: Example You will learn more about the objects in JavaScript objects chapter. The Array Data Type An array is a type of object used for storing multiple values in single variable. Each value (also called an element) in an array has a numeric position, known as its index, and it may contain data of any data type-numbers, strings, booleans, functions, objects, and even other arrays. The array index starts from 0, so that the first array element is arr[0] not arr[1]. The simplest way to create an array is by specifying the array elements as a comma-separated list enclosed by square brackets, as shown in the example below: Example You will learn more about the arrays in JavaScript arrays chapter. The Function Data Type The function is callable object that executes a block of code. Since functions are objects, so it is possible to assign them to variables, as shown in the example below: Example In fact, functions can be used at any place any other value can be used. Functions can be stored in variables, objects, and arrays. Functions can be passed as arguments to other functions, and functions can be returned from functions. Consider the following function: Example You will learn more about the functions in JavaScript functions chapter. The typeof Operator The typeof operator can be used to find out what type of data a variable or operand contains. It can be used with or without parentheses (typeof(x) or typeof x). The typeof operator is particularly useful in the situations when you need to process the values of different types differently, but you need to be very careful, because it may produce unexpected result in some cases, as demonstrated in the following example: Example As you can clearly see in the above example when we test the null value using the typeof operator (line no-22), it returned “object” instead of “null”. This is a long-standing bug in JavaScript, but since lots of codes on the web written around this behavior, and thus fixing it would create a lot more problem, so idea of fixing this issue was rejected by the committee that design and maintains JavaScript.

Generating Output in JavaScript There are certain situations in which you may need to generate output from your JavaScript code. For example, you might want to see the value of variable, or write a message to browser console to help you debug an issue in your running JavaScript code, and so on. In JavaScript there are several different ways of generating output including writing output to the browser window or browser console, displaying output in dialog boxes, writing output into an HTML element, etc. We’ll take a closer look at each of these in the following sections. Writing Output to Browser Console You can easily outputs a message or writes data to the browser console using the console.log() method. This is a simple, but very powerful method for generating detailed output. Here’s an example: Example Tip: To access your web browser’s console, first press F12 key on the keyboard to open the developer tools then click on the console tab. It looks something like the screenshot here. Displaying Output in Alert Dialog Boxes You can also use alert dialog boxes to display the message or output data to the user. An alert dialog box is created using the alert() method. Here’s is an example: Example Writing Output to the Browser Window You can use the document.write() method to write the content to the current document only while that document is being parsed. Here’s an example: Example If you use the document.write() method method after the page has been loaded, it will overwrite all the existing content in that document. Check out the following example: Example Inserting Output Inside an HTML Element You can also write or insert output inside an HTML element using the element’s innerHTML property. However, before writing the output first we need to select the element using a method such as getElementById(), as demonstrated in the following example: Example You will learn about manipulating HTML element in detail in JavaScript DOM manipulation chapter.

What is Variable? Variables are fundamental to all programming languages. Variables are used to store data, like string of text, numbers, etc. The data or value stored in the variables can be set, updated, and retrieved whenever needed. In general, variables are symbolic names for values. There are three ways to declare variables in JavaScript: var, let and const. The var keyword is the older way of declaring variables, whereas the let and const keywords are introduced in JavaScript ES6. The main difference between them is the variables declared with the let and const keywords are block scoped ({}), that means they will only be available inside the code blocks (functions, loops and conditions) where they are declared and it sub-blocks, whereas the variables declared with the var keyword are function scoped or globally scoped, depending on whether they are declared within a function or outside of any function. We’ll learn more about them in upcoming chapters. Now let’s take a look at the following example where we’ve created some variables with the let keyword, and simply used the assignment operator (=) to assign values to them, like this: let varName = value; Example Tip: Always give meaningful names to your variables. Additionally, for naming the variables that contain multiple words, camelCase is commonly used. In this convention all words after the first should have uppercase first letters, e.g. myLongVariableName. In the above example we have created three variables, first one has assigned with a string value, the second one has assigned with a number, whereas the last one assigned with a boolean value. Variables can hold different types of data, we’ll learn about them in later chapter. In JavaScript, variables can also be declared without having any initial values assigned to them. This is useful for variables which are supposed to hold values like user inputs. Example Note: In JavaScript, if a variable has been declared, but has not been assigned a value explicitly, is automatically assigned the value undefined. The const keyword works exactly the same as let, except that variables declared using const keyword cannot be reassigned later in the code. Here’s an example: Example Note: The let and const keywords are not supported in older browsers like IE10. IE11 support them partially. See the JS ES6 features chapter to know how to start using ES6 today. Declaring Multiple Variables at Once In addition, you can also declare multiple variables and set their initial values in a single statement. Each variable are separated by commas, as demonstrated in the following example: Example Naming Conventions for JavaScript Variables These are the following rules for naming a JavaScript variable: