datatypes-and-operators in wed development.pptx

The document contains a detailed explanation of the different data types and operators used in web development.

1. Operators and Data types Session 4

2. Data types A value in JavaScript is always of a certain type. JavaScript supports multiple data types. JavaScript data types are broadly categorized into primitive and non-primitive types. The primitive data types include Number, String, Boolean, Null, Undefined, and Symbol. Non-primitive types include Object, Array, and Function. The predefined data types provided by JavaScript language are known as primitive data types. Primitive data types are also known as in-built data types.

3. We can put any type in a variable. For example, a variable can at one moment be a string and then store a number: For instance: // no error let message = " hello " ; message = 123456 ;

4. Number Data type The number type in JavaScript contains both integer and floating-point numbers. let num = 2 ; // Integer let num2 = 1.3 ; // Floating point number Exponential Notation Extra large or extra small numbers can be written with scientific (exponential) notation: let y = 123e5 ; // 12300000 let z = 123e-5 ; // 0.00123

5. String Data type A String in javascript is basically a series of characters that are surrounded by quotes. There are three types of quotes in Javascript, which are: let str = " Hello There "; let str2 = ' Single quotes works fine '; let phrase = ` can embed $ { str } `; There’s no difference between ‘single’ and “double” quotes in javascript. Backticks are “extended functionality” quotes. They allow us to embed variables and expressions into a string by wrapping them in ${…} , for example: let name = " John " ; // embed a variable alert ( `Hello, ${name}!` ); // Hello, John! // embed an expression alert ( `the result is ${1 + 2}` ); // the result is 3

6. The expression inside ${…} is evaluated and the result becomes a part of the string. We can put anything in there: a variable like name or an arithmetical expression like 1 + 2 or something more complex. Please note that this can only be done in backticks. Other quotes don’t have this embedding functionality! alert ( "the result is ${1 + 2}" ); // the result is ${1 + 2} (double quotes do nothing)

7. Boolean (Logical) Data type The boolean type has only two values: true and false . This type is commonly used to store yes/no values: true means “yes, correct”, and false means “no, incorrect”. Example: let nameFieldChecked = true; // yes, name field is checked let ageFieldChecked = false; // no, age field is not checked Boolean values also come as a result of comparisons: let isGreater = 4 > 1 ; alert ( isGreater ); // true (the comparison result is "yes")

8. Null Data type The special null value does not belong to any of the default data types. It forms a separate type of its own which contains only the null value: let age = null ; The ‘null’ data type basically defines a special value that represents ‘nothing’, ’empty’, or ‘value unknown’. Undefined : J ust like null, Undefined makes its own type. The meaning of undefined is ‘value is not assigned’. If a variable is declared, but not assigned, then its value is undefined : let x ; console.log ( x ); // undefined

9. Non-primitive data types JavaScript Non-Primitive Data Types Examples: All other types are called “primitive” because their values can contain only a single thing (be it a string or a number or whatever). In contrast, objects are used to store collections of data and more complex entities. Object: JavaScript objects are fundamental data structures used to store collections of data. They consist of key-value pairs and can be created using curly braces {} or the new keyword. Understanding objects is crucial, as everything in JavaScript is essentially an object.

10. Object creation: Using the “object constructor” syntax: let person = new Object () ; Using the “object literal” syntax: let person = {} ; We can add properties to the object like so: const person = { firstName : "John" , lastName : "Doe" , age : 50 , eyeColor : "blue" };

11. Arrays If you have a list of items (a list of car names, for example), storing the cars in single variables could look like this: let car1 = "Saab" ; let car2 = "Volvo" ; let car3 = "BMW" ; However, what if you want to loop through the cars and find a specific one? And what if you had not 3 cars, but 300? The solution is an array! An array can hold many values under a single name, and you can access the values by referring to an index number. Creating an Array Using an array literal is the easiest way to create a JavaScript Array. Syntax: const array_name = [ item1 , item2 , ... ]; Example: const cars = [ "Saab" , "Volvo" , "BMW" ];

12. Task What is the output of the script? let name = "Ilya"; alert( `hello ${1}` ); // ? alert( `hello ${"name"}` ); // ? alert( `hello ${name}` ); // ?

13. Operators As with algebra, you can do arithmetic with JavaScript variables, using operators like = and + . JavaScript Operators are symbols used to perform specific mathematical, comparison, assignment, and logical computations on operands. Divided based on the type of operations they perform into: Arithmetic Operators Assignment Operators Comparison Operators Logical Operators Ternary Operators Type Operators

14. Arithmetic operators These operators are frequently used with number data types Addition + The addition operator (+) is used to add two or more numbers together. Subtraction - The subtraction operator is marked by the minus sign (− ) is used to subtract the right operand from the left operand Multiplication * The multiplication operator is marked by the asterisk ( * ) symbol, and is used to multiply the value on the left by the value on the right of the operator. Division / The division operator( / ) is used to divide the left operand by the right operand.

15. Remainder (modulus) % : The remainder operator ( % ) is also known as the modulo or modulus operator. This operator is used to calculate the remainder after a division has been performed. This operator is commonly used when you want to check if a number is even or odd. If a number is even, dividing it by 2 will result in a remainder of 0, and if it's odd, the remainder will be 1. Exponentiation ** : The exponentiation operator is marked by two asterisks (**). It's one of the newer JavaScript operators and you can use it to calculate the power of a number (based on its exponent). Increment ++ : The increment (++) operator is used to increase the value of a number by one. This operator gives you a faster way to increase a variable value by one. Decrement - - : The decrement ( -- )operator is used to decrease the value of a number by one.

16. Operator precedence The order of operations in JavaScript is the same as in mathematics. If an expression has more than one operator, the execution order is defined by their precedence , or, in other words, the default priority order of operators. Multiplication, division, and exponentiation take a higher priority than addition or subtraction (remember that acronym BODMAS?). You can use parentheses () to change the order of the operations. Parentheses override any precedence, so if we’re not satisfied with the default order, we can use them to change it. For example, write ( 1 + 2 ) * 2 .

17. Assignment Operators Assignment operators are used to assign a specific value to a variable. The basic assignment operator is marked by the equal ( = ) symbol let x = 5 ; Modify in-place: We often need to apply an operator to a variable and store the new result in that same variable. let n = 2 ; n = n + 5 ; n = n * 2 ;

18. This notation can be shortened using the operators += and *= : let n = 2 ; n += 5 ; // now n = 7 (same as n = n + 5) n *= 2 ; // now n = 14 (same as n = n * 2) alert ( n ); // 14 Short “modify-and-assign” operators exist for all arithmetical /=, -=, etc.

19. Comparison Operators As the name implies, comparison operators are used to compare one value or variable with something else. The operators in this category always return a boolean value: either true or false. For example, suppose you want to compare if a variable's value is greater than 1. Here's how you do it: let x = 5 ; alert ( x > 1 ); // true alert ( x > 7 ); // false

20. Logical Operators JavaScript Logical Operators perform logical operations: AND (&&), OR (||), and NOT (!) , evaluating expressions and returning boolean values. Logical operators are used to check whether one or more expressions result in either true or false. AND operator ( && ) – if any expression returns false, the result is false OR operator ( || ) – if any expression returns true, the result is true NOT operator ( ! ) – negates the expression, returning the opposite. Example: a lert ( 7 > 2 && 5 > 4 ); // true

21. These logical operators will come in handy when you need to assert that a specific requirement is fulfilled in your code. Let's say a happyLife requires a job with highIncome and supportiveTeam: let highIncome = true ; let supportiveTeam = true ; let happyLife = highIncome && supportiveTeam ; alert ( happyLife ) ; // true Based on the requirements, you can use the logical AND operator to check whether you have both requirements. When one of the requirements is false, then happyLife equals false as well.

22. Ternary Operator The ternary operator (also called the conditional operator) is the only JavaScipt operator that requires 3 operands to run. Let's imagine you need to implement some specific logic in your code. Suppose you're opening a shop to sell fruit. You give a 3% discount when the total purchase is $20 or more. Otherwise, you give a 1% discount. You can implement the logic using an if..else statement as follows:

23. let totalPurchase = 15 ; let discount; if ( totalPurchase >= 20 ) { discount = 0.03 ; } else { discount = 0.0 1 ; }

24. The code above works fine, but you can use the ternary operator to make the code shorter and more concise as follows: let totalPurchase = 15 ; let discount = totalPurchase >= 20 ? 0.03 : 0.01 ; The syntax for the ternary operator is : condition ? expression1 : expression2

25. Practice: Try out tasks at the bottom of this page: https://javascript.info/operators