JavaScript is one of the most popular skills in today’s job market. It allows you to create both client- and server-side applications quickly and easily. Having a solid understanding of this powerful and versatile language is essential to anyone who uses it. “Practical JavaScript Programming” does not only focus on best practices, but also introduces the fundamental concepts. This course will take you from JavaScript basics to advanced. You’ll learn about topics like Data Types, Functions, Events, AJAX and more.

1. Practical JavaScript Programming
Session 2
Wilson Su

2. 2
https://www.slideshare.net/sweekson/

3. Outline
3
Practical JavaScript Programming
Chapter 3.
● Objects
● Arrays
● Destructuring
● JSON
Data Structures
Chapter 4.
Operators
● Comparison Operators
● Type Operators
● Logical Operators
● Bitwise Operators
● Miscellaneous

4. 4
Wilson Su
Front-end Developer, HIE
● 6 years in web design
● Specialize in JavaScript /
CSS / HTML / OOP / Git
● Familiar with PHP / Design
Pattern
● Interested in UI & Ix Design
wilson_su@trend.com.tw

5. Chapter 3.
Data Structures
5

6. Objects
6

7. Object Literals
7
1. var profile = {
2. "first-name": "Will",
3. 'last_name': 'Lee',
4. title: 'FED',
5. $age: 18,
6. _hasCar: false
7. };

8. Setting And Getting Object Properties
8
1. var data = {}, none = {};
2. data.id = 100;
3. data[0] = 0;
4. data[''] = 'empty';
5. data[none] = 'object';
6. data['default'] = 'Default';
7.
8. console.log(data); // Object {0: 0, id: 100, '': 'empty',
[object Object]: 'object', default: 'Default'}
9. console.log(data['default']); // 'Default'
10. console.log(data.default); // ?
11. console.log(data.name); // undefined
12. console.log(data.phone.extension); // ?
1. var data = {}, none = {};
2. data.id = 100;
3. data[0] = 0;
4. data[''] = 'empty';
5. data[none] = 'object';
6. data['default'] = 'Default';
7.
8. console.log(data); // Object {0: 0, id: 100, '': 'empty',
[object Object]: 'object', default: 'Default'}
9. console.log(data['default']); // 'Default'
10. console.log(data.default); // 'Default'
11. console.log(data.name); // undefined
12. console.log(data.phone.extension); // ?
1. var data = {}, none = {};
2. data.id = 100;
3. data[0] = 0;
4. data[''] = 'empty';
5. data[none] = 'object';
6. data['default'] = 'Default';
7.
8. console.log(data); // Object {0: 0, id: 100, '': 'empty',
[object Object]: 'object', default: 'Default'}
9. console.log(data['default']); // 'Default'
10. console.log(data.default); // 'Default'
11. console.log(data.name); // undefined
12. console.log(data.phone.extension); // TypeError

9. Property order in objects
is NOT guaranteed.
9

10. Setting Object Properties From Variables
10
1. const PROP_NAME = 'name';
2.
3. var title = 'FED';
4. var name = 'Nick';
5.
6. console.log({ title: title, name: name });
7. // Object {title: 'FED', name: 'Nick'}
8.
9. console.log({ title, [PROP_NAME]: name });
10. // Object {title: 'FED', name: 'Nick'}

11. Call / Pass By Value VS By Reference
11
1. var profile = { title: 'FED', phone: { extension: 9900 } };
2. var title = profile.title;
3. var phone = profile.phone;
4.
5. profile.title = 'RD':
6. profile.phone.extension = 6633;
7.
8. console.log(profile.title); // 'RD'
9. console.log(title); // ?
10. console.log(profile.phone.extension); // 6633
11. console.log(phone.extension); // ?
1. var profile = { title: 'FED', phone: { extension: 9900 } };
2. var title = profile.title;
3. var phone = profile.phone;
4.
5. profile.title = 'RD':
6. profile.phone.extension = 6633;
7.
8. console.log(profile.title); // 'RD'
9. console.log(title); // 'FED'
10. console.log(profile.phone.extension); // 6633
11. console.log(phone.extension); // ?
1. var profile = { title: 'FED', phone: { extension: 9900 } };
2. var title = profile.title;
3. var phone = profile.phone;
4.
5. profile.title = 'RD':
6. profile.phone.extension = 6633;
7.
8. console.log(profile.title); // 'RD'
9. console.log(title); // 'FED'
10. console.log(profile.phone.extension); // 6633
11. console.log(phone.extension); // 6633

12. Object Variable Re-assignment
12
1. var profile = { title: 'FED', name: 'Will' };
2. var reference = profile;
3.
4. profile = { title: 'RD', name: 'Rico' };
5.
6. console.log(profile); // Object {title: 'RD', name: 'Rico'}
7. console.log(reference); // Object {title: 'FED', name: 'Will'}

13. Reflecting
13
1. var profile = { title: 'FED', name: undefined };
2.
3. console.log(typeof profile.title); // 'string'
4. console.log(typeof profile.name); // 'undefined'
5. console.log(typeof profile.phone); // 'undefined'
6.
7. console.log(data.hasOwnProperty('title')); // true
8. console.log(data.hasOwnProperty('name')); // true
9. console.log(data.hasOwnProperty('phone')); // false

14. Unset And Deleting Property
14
1. var profile = { title: 'FED', name: 'Will' };
2.
3. profile.title = undefined;
4.
5. console.log(profile);
6. // Object {title: undefined, name: 'Will'}
7.
8. delete profile.title;
9. console.log(profile); // Object {name: 'Will'}
10. console.log(profile.hasOwnProperty('title')); // false

15. Recognizing An Object
15
1. var data = {};
2.
3. typeof data; // 'object';
4. data instanceof Object; // true
5. data.constructor === Object; // true
6. Object.getPrototypeOf(data) === Object.prototype; // true

16. Retrieving Object Properties
16
1. var baby = { age: 2, 1: 1, cry: function () {} };
2.
3. console.log(Object.keys(baby)); // (3) ['1', 'age', 'cry']
4. console.log(Object.values(baby)); // (3) [1, 2, function]
5. console.log(baby.toString);
6. // function toString() { [native code] }
7. console.log(baby.propertyIsEnumerable('cry')); // true
8. console.log(baby.propertyIsEnumerable('toString')); // false

17. Cloning Objects
17
1. var dog = { type: 'Husky' };
2. Object.assign(dog, { name: 'Wolf' }, { age: 5 });
3. console.log(dog);
4. // Object {type: 'Husky', name: 'Wolf', age: 5}
5.
6. var cat = { type: 'Munchkin', name: 'Molly' };
7. var clone = Object.assign({}, cat, { age: 3 });
8. console.log(clone);
9. // {type: 'Munchkin', name: 'Molly', age: 3};
10. console.log(cat);
11. // ?
1. var dog = { type: 'Husky' };
2. Object.assign(dog, { name: 'Wolf' }, { age: 5 });
3. console.log(dog);
4. // Object {type: 'Husky', name: 'Wolf', age: 5}
5.
6. var cat = { type: 'Munchkin', name: 'Molly' };
7. var clone = Object.assign({}, cat, { age: 3 });
8. console.log(clone);
9. // {type: 'Munchkin', name: 'Molly', age: 3};
10. console.log(cat);
11. // {type: 'Munchkin', name: 'Molly'};

18. Extends Objects With Object.assign()
18
1. var coke = { detail: { name: 'Coke', price: 30 } };
2. var sprite = { detail: { name: 'Sprite' } };
3. var copy = Object.assign({}, coke, sprite);
4.
5. console.log(copy.detail); // ?
1. var coke = { detail: { name: 'Coke', price: 30 } };
2. var sprite = { detail: { name: 'Sprite' } };
3. var copy = Object.assign({}, coke, sprite);
4.
5. console.log(copy.detail); // {name: 'Sprite'}

19. Object.assign() only makes
a shallow copy.
19

20. Warning For Deep Clone
20
1. var fed = {
2. title: 'FED',
3. skills: { html: true, java: false }
4. };
5. var rd = Object.assign({}, fed);
6.
7. rd.title = 'RD';
8. console.log(rd.title); // 'RD'
9. console.log(fed.title); // 'FED'
10.
11. rd.skills.java = true;
12. console.log(rd.skills); // Object {html: true, java: true}
13. console.log(fed.skills); // ?
1. var fed = {
2. title: 'FED',
3. skills: { html: true, java: false }
4. };
5. var rd = Object.assign({}, fed);
6.
7. rd.title = 'RD';
8. console.log(rd.title); // 'RD'
9. console.log(fed.title); // 'FED'
10.
11. rd.skills.java = true;
12. console.log(rd.skills); // Object {html: true, java: true}
13. console.log(fed.skills); // Object {html: true, java: true}

21. Using The Map Object
21
1. var developer = new Map(), title = 'FED', skills = {};
2.
3. developer.set(title, 'a string');
4. developer.set(skills, 'skills');
5. developer.set(1, 1);
6.
7. console.log(developer.size); // 3
8. console.log(developer.get('FED')); // 'a string'
9. console.log(developer.get(skills)); // 'skills'
10. console.log(developer.get({})); // ?
11. console.log(developer.keys());
12. // MapIterator {'FED', Object {}, 1}
1. var developer = new Map(), title = 'FED', skills = {};
2.
3. developer.set(title, 'a string');
4. developer.set(skills, 'skills');
5. developer.set(1, 1);
6.
7. console.log(developer.size); // 3
8. console.log(developer.get('FED')); // 'a string'
9. console.log(developer.get(skills)); // 'skills'
10. console.log(developer.get({})); // undefined
11. console.log(developer.keys());
12. // MapIterator {'FED', Object {}, 1}

22. Arrays
22

23. Array Literals
23
1. var empty = [];
2. var foods = ['pizza', 'noddle', 'hamburger'];
3. var drinks = [ ,'coffee', , , 'coke'];
4. var numbers = [100, 200,];
5. var scores = [,];
6.
7. console.log(drinks.length); // ?
8. console.log(drinks);
9. // ?
10. console.log(numbers); // ?
11. console.log(scores); // ?
1. var empty = [];
2. var foods = ['pizza', 'noddle', 'hamburger'];
3. var drinks = [ ,'coffee', , , 'coke'];
4. var numbers = [100, 200,];
5. var scores = [,];
6.
7. console.log(drinks.length); // 5
8. console.log(drinks);
9. // ?
10. console.log(numbers); // ?
11. console.log(scores); // ?
1. var empty = [];
2. var foods = ['pizza', 'noddle', 'hamburger'];
3. var drinks = [ ,'coffee', , , 'coke'];
4. var numbers = [100, 200,];
5. var scores = [,];
6.
7. console.log(drinks.length); // 5
8. console.log(drinks);
9. // (5) [undefined × 1, 'coffee', undefined × 2, 'coke']
10. console.log(numbers); // ?
11. console.log(scores); // ?
1. var empty = [];
2. var foods = ['pizza', 'noddle', 'hamburger'];
3. var drinks = [ ,'coffee', , , 'coke'];
4. var numbers = [100, 200,];
5. var scores = [,];
6.
7. console.log(drinks.length); // 5
8. console.log(drinks);
9. // (5) [undefined × 1, 'coffee', undefined × 2, 'coke']
10. console.log(numbers); // (2) [100, 200]
11. console.log(scores); // ?
1. var empty = [];
2. var foods = ['pizza', 'noddle', 'hamburger'];
3. var drinks = [ ,'coffee', , , 'coke'];
4. var numbers = [100, 200,];
5. var scores = [,];
6.
7. console.log(drinks.length); // 5
8. console.log(drinks);
9. // (5) [undefined × 1, 'coffee', undefined × 2, 'coke']
10. console.log(numbers); // (2) [100, 200]
11. console.log(scores); // [undefined × 1]

24. Avoid new Array()
24

25. Create Array Using new Array()
25
1. var list1 = new Array(10, 20, 30);
2. console.log(list1[0]); // 10
3. console.log(list1.length); // 3
4.
5. var list2 = new Array(10);
6. console.log(list2[0]); // ?
7. console.log(list2.length); // ?
1. var list1 = new Array(10, 20, 30);
2. console.log(list1[0]); // 10
3. console.log(list1.length); // 3
4.
5. var list2 = new Array(10);
6. console.log(list2[0]); // undefined
7. console.log(list2.length); // ?
1. var list1 = new Array(10, 20, 30);
2. console.log(list1[0]); // 10
3. console.log(list1.length); // 3
4.
5. var list2 = new Array(10);
6. console.log(list2[0]); // undefined
7. console.log(list2.length); // 10

26. Recognizing An Array
26
1. var foods = ['pizza', 'noddle', 'hamburger'];
2.
3. typeof foods; // 'object'
4. Array.isArray(foods); // true
5. foods instanceof Array; // true

27. Looping Array Elements
27
1. var fruits = ['Apple', 'Orange'];
2.
3. fruits.forEach(function (fruit, index) {
4. console.log(index, fruit);
5. });
6. // 0 'Apple'
7. // 1 'Orange'
8.
9. var drinks = fruits.map(function (fruit) {
10. return fruit + ' Juice';
11. });
12. console.log(fruits); // (2) ['Apple', 'Orange']
13. console.log(drinks); // (2) ['Apple Juice', 'Orange Juice']

28. Handle Array Items
28
1. var pets = ['Dog', 'Cat', 'Rabbit'];
2.
3. console.log(pets.concat(['Fish']));
4. // (4) ['Dog', 'Cat', 'Rabbit', 'Fish']
5. console.log(pets); // ?
6.
7. console.log(pets.slice(0, 2)); // (2) ['Dog', 'Cat']
8. console.log(pets); // ?
1. var pets = ['Dog', 'Cat', 'Rabbit'];
2.
3. console.log(pets.concat(['Fish']));
4. // (4) ['Dog', 'Cat', 'Rabbit', 'Fish']
5. console.log(pets); // (3) ['Dog', 'Cat', 'Rabbit']
6.
7. console.log(pets.slice(0, 2)); // (2) ['Dog', 'Cat']
8. console.log(pets); // ?
1. var pets = ['Dog', 'Cat', 'Rabbit'];
2.
3. console.log(pets.concat(['Fish']));
4. // (4) ['Dog', 'Cat', 'Rabbit', 'Fish']
5. console.log(pets); // (3) ['Dog', 'Cat', 'Rabbit']
6.
7. console.log(pets.slice(0, 2)); // (2) ['Dog', 'Cat']
8. console.log(pets); // (3) ['Dog', 'Cat', 'Rabbit']

29. Deleting Elements From An Array
29
1. var numbers = [1, 2, 3, 4, 5];
2.
3. delete numbers[2];
4. console.log(numbers.length); // ?
5. console.log(numbers); // ?
6.
7. numbers.splice(2, 1);
8. console.log(numbers.length); // 4
9. console.log(numbers); // (4) [1, 2, 4, 5]
1. var numbers = [1, 2, 3, 4, 5];
2.
3. delete numbers[2];
4. console.log(numbers.length); // 5
5. console.log(numbers); // ?
6.
7. numbers.splice(2, 1);
8. console.log(numbers.length); // 4
9. console.log(numbers); // (4) [1, 2, 4, 5]
1. var numbers = [1, 2, 3, 4, 5];
2.
3. delete numbers[2];
4. console.log(numbers.length); // 5
5. console.log(numbers); // (5) [1, 2, undefined × 1, 4, 5]
6.
7. numbers.splice(2, 1);
8. console.log(numbers.length); // 4
9. console.log(numbers); // (4) [1, 2, 4, 5]

30. Array Methods
30
1. var numbers = [40, 20, 70, 30, 90];
2.
3. numbers.some(function (number) { return number > 80; });
4. // true
5.
6. numbers.every(function (number) { return number < 50; });
7. // false
8.
9. numbers.filter(function (number) { return number > 60; });
10. // (2) [70, 90]
11.
12. console.log(numbers); // ?
1. var numbers = [40, 20, 70, 30, 90];
2.
3. numbers.some(function (number) { return number > 80; });
4. // true
5.
6. numbers.every(function (number) { return number < 50; });
7. // false
8.
9. numbers.filter(function (number) { return number > 60; });
10. // (2) [70, 90]
11.
12. console.log(numbers); // (5) [40, 20, 70, 30, 90]

31. Using The Set Object
31
1. var data = new Set(), stars = { val: 4 };
2.
3. data.add(9); // Set(1) {9}
4. data.add(9); // Set(1) {9}
5. data.add('cat'); // Set(2) {9, 'cat'}
6. data.add(stars); // Set(3) {9, 'cat', Object {val: 4}}
7. data.add({ val: 4 });
8. // ?
9. data.has('cat'); // true
10. data.has(stars); // true
11. data.has({ val: 4 }); // ?
1. var data = new Set(), stars = { val: 4 };
2.
3. data.add(9); // Set(1) {9}
4. data.add(9); // Set(1) {9}
5. data.add('cat'); // Set(2) {9, 'cat'}
6. data.add(stars); // Set(3) {9, 'cat', Object {val: 4}}
7. data.add({ val: 4 });
8. // Set(4) {9, 'cat', Object {val: 4}, Object {val: 4}}
9. data.has('cat'); // true
10. data.has(stars); // true
11. data.has({ val: 4 }); // ?
1. var data = new Set(), stars = { val: 4 };
2.
3. data.add(9); // Set(1) {9}
4. data.add(9); // Set(1) {9}
5. data.add('cat'); // Set(2) {9, 'cat'}
6. data.add(stars); // Set(3) {9, 'cat', Object {val: 4}}
7. data.add({ val: 4 });
8. // Set(4) {9, 'cat', Object {val: 4}, Object {val: 4}}
9. data.has('cat'); // true
10. data.has(stars); // true
11. data.has({ val: 4 }); // false

32. Destructuring
32

33. Object Destructuring
33
1. var { name } = { name: 'Zack', title: 'PM' };
2. // name = 'Zack'
3.
4. var { id = 100 } = {}; // id = 100
5.
6. var { number = Math.pow(2, 3) } = {}; // number = 8
7.
8. var food, drink;
9. ({ food, drink } = { food: 'Cookie', drink: 'Sprite' });
10. // food = 'Cookie', drink = 'Sprite'

34. Object Destructuring
34
1. var { launch: dinner } = { launch: 'pizza' };
2. // dinner = 'pizza'
3.
4. var { index: $index = 0 } = {}; // $index = 0
5.
6. var { ['length']: len } = { length: 2 }; // len = 2
7.
8. var { family: { father } } = { family: { father: 'John' } };
9. // father = 'John'
10.
11. var { length } = 'abcde'; // ?
1. var { launch: dinner } = { launch: 'pizza' };
2. // dinner = 'pizza'
3.
4. var { index: $index = 0 } = {}; // $index = 0
5.
6. var { ['length']: len } = { length: 2 }; // len = 2
7.
8. var { family: { father } } = { family: { father: 'John' } };
9. // father = 'John'
10.
11. var { length } = 'abcde'; // length = 5

35. Array Destructuring
35
1. var [blue, green] = ['blue', 'green'];
2. // blue = 'blue', green = 'green'
3.
4. var [,, third] = [1, 2, 3, 4]; // third = 3
5.
6. var [one, two, ...rest] = '100,200,300,400'.split(',');
7. // one = '100', two = '200', rest = ['300', '400']
8.
9. var [score = 100] = [, 200]; // ?
10.
11. var [number = Math.sqrt(81)] = []; // number = 9
1. var [blue, green] = ['blue', 'green'];
2. // blue = 'blue', green = 'green'
3.
4. var [,, third] = [1, 2, 3, 4]; // third = 3
5.
6. var [one, two, ...rest] = '100,200,300,400'.split(',');
7. // one = '100', two = '200', rest = ['300', '400']
8.
9. var [score = 100] = [, 200]; // score = 100
10.
11. var [number = Math.sqrt(81)] = []; // number = 9

36. Array Destructuring
36
1. var [index = 0, id = index] = [9]; // index = 9, id = 9
2.
3. var [{ name: cat } = { name: 'Kitty' }] = []; // cat = 'Kitty'
4.
5. var [{ name: dog = 'Doggy' }] = [{ name: dog = 'Puppy' }];
6. // dog = 'Puppy'
7.
8. var [n1, n2, ...others] = '12345';
9. // ?
10.
11. var [x, y, ...z] = ['x'];
12. // ?
1. var [index = 0, id = index] = [9]; // index = 9, id = 9
2.
3. var [{ name: cat } = { name: 'Kitty' }] = []; // cat = 'Kitty'
4.
5. var [{ name: dog = 'Doggy' }] = [{ name: dog = 'Puppy' }];
6. // dog = 'Puppy'
7.
8. var [n1, n2, ...others] = '12345';
9. // n1 = '1', n2 = '2', others = ['3', '4', '5']
10.
11. var [x, y, ...z] = ['x'];
12. // ?
1. var [index = 0, id = index] = [9]; // index = 9, id = 9
2.
3. var [{ name: cat } = { name: 'Kitty' }] = []; // cat = 'Kitty'
4.
5. var [{ name: dog = 'Doggy' }] = [{ name: dog = 'Puppy' }];
6. // dog = 'Puppy'
7.
8. var [n1, n2, ...others] = '12345';
9. // n1 = '1', n2 = '2', others = ['3', '4', '5']
10.
11. var [x, y, ...z] = ['x'];
12. // x = 'x', y = undefined, z = []

37. 37
TAKE A BREAK

38. JSON
38

39. What Is JSON?
39
JSON
● JSON stands for JavaScript Object Notation
● It is derived from JavaScript
● JSON uses the file extension .json
● The official MIME type for JSON is application/json

40. JSON String - Object Example
40
1. {
2. "name": "Nick",
3. "age": 20,
4. "alive": true,
5. "spouse": null,
6. "phone": [{ "type": "home" }, { "type": "office" }],
7. "address": { "country": "Taiwan", "city": "Taipei" }
8. }

41. JSON String - Array Example
41
1. [
2. {
3. "message": "Nick logged in.",
4. "ts": 1498220927003
5. },
6. {
7. "message": "Nick logged out.",
8. "ts": 1498223927003
9. }
10. ]

42. Incorrect Format
42
1. {
2. 'index': 1,
3. id: undefined,
4. name: 05512,
5. title: "", // Comments
6. phone: "0987654321",
7. }

43. Stringify Values To JSON Strings
43
1. JSON.stringify('ABC'); // '"ABC"'
2. JSON.stringify(99); // '99'
3. JSON.stringify(true); // 'true'
4. JSON.stringify({ n: 1 }); // '{"n":1}'
5. JSON.stringify([1, 2, 3]); // '[1,2,3]'
6. JSON.stringify(new Sting('XYZ')); // '"XYZ"'
7. JSON.stringify(new Date(2017, 1, 1, 12, 34, 56));
8. // '"2017-02-01T04:34:56.000Z"'
9. JSON.stringify(undefined); // undefined
10. JSON.stringify(null); // 'null'

44. Parsing JSON And Stringify Objects
44
1. var content = '{"title":"FED"}';
2. var data = JSON.parse(content);
3.
4. console.log(data); // Object {title: 'FED'}
5.
6. data[0] = 0;
7. data.name = 'Will';
8. content = JSON.stringify(data);
9.
10. console.log(content); // '{"0":0,"title":"FED","name":"Will"}'

45. Stringify An Object Using toJSON()
45
1. var car = { brand: 'audi', color: 'BLACK' };
2.
3. car.toJSON = function () {
4. return {
5. brand: car.brand.toUpperCase(),
6. color: car.color.toLowerCase()
7. };
8. };
9.
10. JSON.stringify(car); // {"brand":"AUDI","color":"black"}'

46. Stringify An Object Using Replacer
46
1. var book = {
2. title: 'JavaScript: The Good Parts',
3. price: 20
4. };
5. var replacer = function (key, value) {
6. return key === 'price' ? value * 30 : value;
7. };
8.
9. JSON.stringify(book, replacer);
10. // {"title":"JavaScript: The Good Parts","price":600}

47. Parsing JSON Using Reviver
47
1. var book = '{"title":"JS: The Good Parts","price":600}';
2.
3. JSON.parse(book, function (key, value) {
4. return key === 'price' ? value / 30 : value;
5. });
6. // {title: 'JS: The Good Parts', price: 20}

48. Stringify Objects And Arrays To JSON String
48
1. var pet = {
2. id: 0xff,
3. name: null,
4. type: undefined,
5. eat: function () {}
6. };
7. var misc = [ 0b11, null, undefined, function () {} ];
8.
9. JSON.stringify(pet); // ?
10. JSON.stringify(misc); // ?
1. var pet = {
2. id: 0xff,
3. name: null,
4. type: undefined,
5. eat: function () {}
6. };
7. var misc = [ 0b11, null, undefined, function () {} ];
8.
9. JSON.stringify(pet); // '{"id":255,"name":null}'
10. JSON.stringify(misc); // ?
1. var pet = {
2. id: 0xff,
3. name: null,
4. type: undefined,
5. eat: function () {}
6. };
7. var misc = [ 0b11, null, undefined, function () {} ];
8.
9. JSON.stringify(pet); // '{"id":255,"name":null}'
10. JSON.stringify(misc); // '[3,null,null,null]'

49. Chapter 4.
Operators
49

50. Comparison Operators
50

51. Falsy And Truthy Values
51
1. function falsy (value) { return value ? 'Truthy' : 'Falsy'; }
2.
3. falsy(0); // 'Falsy'
4. falsy(-0); // 'Falsy'
5. falsy(''); // 'Falsy'
6. falsy(false); // 'Falsy'
7. falsy(undefined); // 'Falsy'
8. falsy(null); // 'Falsy'
9. falsy(NaN); // 'Falsy'
10.
11. falsy('0'); // 'Truthy'
12. falsy(' '); // 'Truthy'

52. Strict Equality Comparison
52
1. 0 === false; // false
2. 0 === '0'; // false
3. 0 === ''; // false
4. 0 === new String('0'); // false
5. '' === false; // false
6. '' === '0'; // false
7. '0' === false; // false
8. '0' === new String('0'); // false
9. false === 'false'; // false
10. false === new String('0'); // false
11. undefined === false; // false
12. undefined === null; // false
13. NaN === NaN; // ?
1. 0 === false; // false
2. 0 === '0'; // false
3. 0 === ''; // false
4. 0 === new String('0'); // false
5. '' === false; // false
6. '' === '0'; // false
7. '0' === false; // false
8. '0' === new String('0'); // false
9. false === 'false'; // false
10. false === new String('0'); // false
11. undefined === false; // false
12. undefined === null; // false
13. NaN === NaN; // * false

53. Equality Comparison
53
1. 0 == false; // ?
2. 0 == '0'; // ?
3. 0 == ''; // ?
4. 0 == new String('0'); // ?
5. '' == false; // ?
6. '' == '0'; // ?
7. '0' == false; // ?
8. '0' == new String('0'); // ?
9. false == 'false'; // ?
10. false == new String('0'); // ?
11. undefined == false; // ?
12. undefined == null; // ?
13. NaN == NaN; // ?
1. 0 == false; // true
2. 0 == '0'; // true
3. 0 == ''; // true
4. 0 == new String('0'); // true
5. '' == false; // ?
6. '' == '0'; // ?
7. '0' == false; // ?
8. '0' == new String('0'); // ?
9. false == 'false'; // ?
10. false == new String('0'); // ?
11. undefined == false; // ?
12. undefined == null; // ?
13. NaN == NaN; // ?
1. 0 == false; // true
2. 0 == '0'; // true
3. 0 == ''; // true
4. 0 == new String('0'); // true
5. '' == false; // true
6. '' == '0'; // false
7. '0' == false; // true
8. '0' == new String('0'); // true
9. false == 'false'; // ?
10. false == new String('0'); // ?
11. undefined == false; // ?
12. undefined == null; // ?
13. NaN == NaN; // ?
1. 0 == false; // true
2. 0 == '0'; // true
3. 0 == ''; // true
4. 0 == new String('0'); // true
5. '' == false; // true
6. '' == '0'; // false
7. '0' == false; // true
8. '0' == new String('0'); // true
9. false == 'false'; // false
10. false == new String('0'); // true
11. undefined == false; // ?
12. undefined == null; // ?
13. NaN == NaN; // ?
1. 0 == false; // true
2. 0 == '0'; // true
3. 0 == ''; // true
4. 0 == new String('0'); // true
5. '' == false; // true
6. '' == '0'; // false
7. '0' == false; // true
8. '0' == new String('0'); // true
9. false == 'false'; // false
10. false == new String('0'); // true
11. undefined == false; // false
12. undefined == null; // true
13. NaN == NaN; // ?
1. 0 == false; // true
2. 0 == '0'; // true
3. 0 == ''; // true
4. 0 == new String('0'); // true
5. '' == false; // true
6. '' == '0'; // false
7. '0' == false; // true
8. '0' == new String('0'); // true
9. false == 'false'; // false
10. false == new String('0'); // true
11. undefined == false; // false
12. undefined == null; // true
13. NaN == NaN; // * false

54. Detecting An Illegal Number Using Global isNaN()
54
1. isNaN(NaN); // true
2. isNaN(0 / 0); // true
3. isNaN(undefined); // true
4. isNaN({}); // true
5. isNaN(true); // ?
6. isNaN(null); // ?
7. isNaN(37); // ?
8. isNaN(''); // ?
9. isNaN(' '); // ?
10. isNaN('37'); // ?
11. isNaN('123ABC'); // ?
12. isNaN(new Date()); // ?
13. isNaN('blabla'); // ?
1. isNaN(NaN); // true
2. isNaN(0 / 0); // true
3. isNaN(undefined); // true
4. isNaN({}); // true
5. isNaN(true); // false
6. isNaN(null); // false
7. isNaN(37); // ?
8. isNaN(''); // ?
9. isNaN(' '); // ?
10. isNaN('37'); // ?
11. isNaN('123ABC'); // ?
12. isNaN(new Date()); // ?
13. isNaN('blabla'); // ?
1. isNaN(NaN); // true
2. isNaN(0 / 0); // true
3. isNaN(undefined); // true
4. isNaN({}); // true
5. isNaN(true); // false
6. isNaN(null); // false
7. isNaN(37); // false
8. isNaN(''); // false
9. isNaN(' '); // false
10. isNaN('37'); // false
11. isNaN('123ABC'); // ?
12. isNaN(new Date()); // ?
13. isNaN('blabla'); // ?
1. isNaN(NaN); // true
2. isNaN(0 / 0); // true
3. isNaN(undefined); // true
4. isNaN({}); // true
5. isNaN(true); // false
6. isNaN(null); // false
7. isNaN(37); // false
8. isNaN(''); // false
9. isNaN(' '); // false
10. isNaN('37'); // false
11. isNaN('123ABC'); // true
12. isNaN(new Date()); // ?
13. isNaN('blabla'); // ?
1. isNaN(NaN); // true
2. isNaN(0 / 0); // true
3. isNaN(undefined); // true
4. isNaN({}); // true
5. isNaN(true); // false
6. isNaN(null); // false
7. isNaN(37); // false
8. isNaN(''); // false
9. isNaN(' '); // false
10. isNaN('37'); // false
11. isNaN('123ABC'); // true
12. isNaN(new Date()); // false
13. isNaN('blabla'); // true

55. Detecting An Illegal Number Using Number.isNaN()
55
1. Number.isNaN(NaN); // true
2. Number.isNaN(0 / 0); // true
3. Number.isNaN(undefined); // ?
4. Number.isNaN({}); // ?
5. Number.isNaN(true); // ?
6. Number.isNaN(null); // ?
7. Number.isNaN(37); // ?
8. Number.isNaN(''); // ?
9. Number.isNaN(' '); // ?
10. Number.isNaN('37'); // ?
11. Number.isNaN('123ABC'); // ?
12. Number.isNaN(new Date()); // ?
13. Number.isNaN('blabla'); // ?
1. Number.isNaN(NaN); // true
2. Number.isNaN(0 / 0); // true
3. Number.isNaN(undefined); // * false
4. Number.isNaN({}); // * false
5. Number.isNaN(true); // * false
6. Number.isNaN(null); // * false
7. Number.isNaN(37); // false
8. Number.isNaN(''); // * false
9. Number.isNaN(' '); // * false
10. Number.isNaN('37'); // * false
11. Number.isNaN('123ABC'); // * false
12. Number.isNaN(new Date()); // * false
13. Number.isNaN('blabla'); // * false

56. The easiest way
to detect NaN is
x !== x
56

57. Type Operators
57

58. The typeof Operator
58
1. typeof 'John'; // 'string'
2. typeof true; // 'boolean'
3. typeof 9; // 'number'
4. typeof NaN; // 'number'
5. typeof Infinity; // 'number'
6. typeof [1, 2, 3]; // ?
7. typeof {}; // 'object'
8. typeof new Date(); // 'object'
9. typeof /a-z/i; // ?
10. typeof function () {}; // ?
11. typeof undeclared; // ?
12. typeof unassigned; // 'undefined'
13. typeof null; // ?
1. typeof 'John'; // 'string'
2. typeof true; // 'boolean'
3. typeof 9; // 'number'
4. typeof NaN; // 'number'
5. typeof Infinity; // 'number'
6. typeof [1, 2, 3]; // 'object'
7. typeof {}; // 'object'
8. typeof new Date(); // 'object'
9. typeof /a-z/i; // ?
10. typeof function () {}; // ?
11. typeof undeclared; // ?
12. typeof unassigned; // 'undefined'
13. typeof null; // ?
1. typeof 'John'; // 'string'
2. typeof true; // 'boolean'
3. typeof 9; // 'number'
4. typeof NaN; // 'number'
5. typeof Infinity; // 'number'
6. typeof [1, 2, 3]; // 'object'
7. typeof {}; // 'object'
8. typeof new Date(); // 'object'
9. typeof /a-z/i; // 'object'
10. typeof function () {}; // ?
11. typeof undeclared; // ?
12. typeof unassigned; // 'undefined'
13. typeof null; // ?
1. typeof 'John'; // 'string'
2. typeof true; // 'boolean'
3. typeof 9; // 'number'
4. typeof NaN; // 'number'
5. typeof Infinity; // 'number'
6. typeof [1, 2, 3]; // 'object'
7. typeof {}; // 'object'
8. typeof new Date(); // 'object'
9. typeof /a-z/i; // 'object'
10. typeof function () {}; // 'function'
11. typeof undeclared; // ?
12. typeof unassigned; // 'undefined'
13. typeof null; // ?
1. typeof 'John'; // 'string'
2. typeof true; // 'boolean'
3. typeof 9; // 'number'
4. typeof NaN; // 'number'
5. typeof Infinity; // 'number'
6. typeof [1, 2, 3]; // 'object'
7. typeof {}; // 'object'
8. typeof new Date(); // 'object'
9. typeof /a-z/i; // 'object'
10. typeof function () {}; // 'function'
11. typeof undeclared; // 'undefined'
12. typeof unassigned; // 'undefined'
13. typeof null; // ?
1. typeof 'John'; // 'string'
2. typeof true; // 'boolean'
3. typeof 9; // 'number'
4. typeof NaN; // 'number'
5. typeof Infinity; // 'number'
6. typeof [1, 2, 3]; // 'object'
7. typeof {}; // 'object'
8. typeof new Date(); // 'object'
9. typeof /a-z/i; // 'object'
10. typeof function () {}; // 'function'
11. typeof undeclared; // 'undefined'
12. typeof unassigned; // 'undefined'
13. typeof null; // 'object'

59. The instanceof Operator
59
1. '0' instanceof String; // false
2. String('0') instanceof String; // false
3. new String('0') instanceof String; // true
4. new String('0') instanceof Object; // true
5. ([]) instanceof Array; // true
6. ([]) instanceof Object; // true
7. ({}) instanceof Object; // true
8. new Date() instanceof Date; // true
9. new Date() instanceof Object; // true
10. (function () {}) instanceof Function; // true
11. (function () {}) instanceof Object; // true

60. Logical Operators
60

61. Logical AND
61
1. function truthy () { return 1; }
2. function falsy () { return 0; }
3.
4. true && true; // true
5. true && false; // false
6. false && true; // false
7. false && (3 == 3); // false
8. 'A' && 'B'; // ?
9. false && 'A'; // ?
10. 'A' && false; // false
11. truthy() && falsy(); // 0
12. falsy() && truthy(); // 0
1. function truthy () { return 1; }
2. function falsy () { return 0; }
3.
4. true && true; // true
5. true && false; // false
6. false && true; // false
7. false && (3 == 3); // false
8. 'A' && 'B'; // 'B'
9. false && 'A'; // ?
10. 'A' && false; // false
11. truthy() && falsy(); // 0
12. falsy() && truthy(); // 0
1. function truthy () { return 1; }
2. function falsy () { return 0; }
3.
4. true && true; // true
5. true && false; // false
6. false && true; // false
7. false && (3 == 3); // false
8. 'A' && 'B'; // 'B'
9. false && 'A'; // false
10. 'A' && false; // false
11. truthy() && falsy(); // 0
12. falsy() && truthy(); // 0

62. Logical OR
1. function truthy () { return 1; }
2. function falsy () { return 0; }
3.
4. true || true; // true
5. true || false; // true
6. false || true; // true
7. false || (3 == 3); // true
8. 'A' || 'B'; // ?
9. false || 'A'; // ?
10. 'A' || false; // ?
11. truthy() || falsy(); // 1
12. falsy() || truthy(); // 1
62
1. function truthy () { return 1; }
2. function falsy () { return 0; }
3.
4. true || true; // true
5. true || false; // true
6. false || true; // true
7. false || (3 == 3); // true
8. 'A' || 'B'; // 'A'
9. false || 'A'; // ?
10. 'A' || false; // ?
11. truthy() || falsy(); // 1
12. falsy() || truthy(); // 1
1. function truthy () { return 1; }
2. function falsy () { return 0; }
3.
4. true || true; // true
5. true || false; // true
6. false || true; // true
7. false || (3 == 3); // true
8. 'A' || 'B'; // 'A'
9. false || 'A'; // 'A'
10. 'A' || false; // ?
11. truthy() || falsy(); // 1
12. falsy() || truthy(); // 1
1. function truthy () { return 1; }
2. function falsy () { return 0; }
3.
4. true || true; // true
5. true || false; // true
6. false || true; // true
7. false || (3 == 3); // true
8. 'A' || 'B'; // 'A'
9. false || 'A'; // 'A'
10. 'A' || false; // 'A'
11. truthy() || falsy(); // 1
12. falsy() || truthy(); // 1

63. An Example Using Logical OR
63
1. /* WARNING: The Logical OR operator returns the value of its
second operand, if the first one is falsy, otherwise the value
of the first operand is returned. */
2. function create (options) {
3. return {
4. type: options.type || 'button'
5. active: options.active || true
6. };
7. }
8.
9. create({ active: false });
10. // ?
1. /* WARNING: The Logical OR operator returns the value of its
second operand, if the first one is falsy, otherwise the value
of the first operand is returned. */
2. function create (options) {
3. return {
4. type: options.type || 'button'
5. active: options.active || true
6. };
7. }
8.
9. create({ active: false });
10. // {type: 'button', active: true}

64. Logical NOT
1. !true; // false
2. !false; // true
3. !0; // true
4. !''; // true
5. !'0'; // false
6. !undefined; // true
7. !!undefined; // false
8. !null; // true
9. !NaN; // true
64

65. Bitwise Operators
65

66. An Example Using Bitwise AND
66
1. var hex = 'ffaadd';
2. var rgb = parseInt(hex, 16); // 16755421
3. var R = rgb >> 16 & 0xff; // 255
4. var G = rgb >> 8 & 0xff; // 170
5. var B = rgb & 0xff; // 221

67. An Example Using Bitwise NOT
67
1. Math.floor(2.5); // 2
2. Math.floor(2.1); // 2
3. Math.floor(-2.5); // -3
4.
5. ~~(2.5); // 2
6. ~~(2.1); // 2
7. ~~(-2.5); // -2

68. An Example Using Bitwise NOT
68
1. var numbers = [100, 200, 300];
2.
3. if (numbers.indexOf(200) > -1) { // Condition is truthy }
4. if (numbers.indexOf(500) === -1) { // Condition is truthy }
5.
6. if (~numbers.indexOf(200)) { // Condition is truthy }
7. if (!~numbers.indexOf(500)) { // Condition is truthy }

69. 69
Miscellaneous

70. in Operator VS hasOwnProperty()
70
1. var wolf = { name: 'Teddy', howl: function () {} };
2.
3. 'name' in wolf; // true
4. 'howl' in wolf; // true
5. 'toString' in wolf; // true
6.
7. wolf.hasOwnProperty('name'); // true
8. wolf.hasOwnProperty('howl'); // true
9. wolf.hasOwnProperty('toString'); // ?
1. var wolf = { name: 'Teddy', howl: function () {} };
2.
3. 'name' in wolf; // true
4. 'howl' in wolf; // true
5. 'toString' in wolf; // true
6.
7. wolf.hasOwnProperty('name'); // true
8. wolf.hasOwnProperty('howl'); // true
9. wolf.hasOwnProperty('toString'); // false

71. in Operator - Examples of An Object
71
1. var rabbit = { name: 'Luna' };
2.
3. 'name' in rabbit; // true
4.
5. rabbit.name = undefined;
6. 'name' in rabbit; // true
7.
8. delete rabbit.name;
9. 'name' in rabbit; // false

72. in Operator - Examples of An Array
72
1. var colors = ['red', 'green', 'blue'];
2.
3. 1 in colors; // true
4. 5 in colors; // false
5. 'green' in colors; // ?
6.
7. delete colors[1];
8. console.log(colors); // ?
9. 1 in colors; // ?
1. var colors = ['red', 'green', 'blue'];
2.
3. 1 in colors; // true
4. 5 in colors; // false
5. 'green' in colors; // false
6.
7. delete colors[1];
8. console.log(colors); // ?
9. 1 in colors; // ?
1. var colors = ['red', 'green', 'blue'];
2.
3. 1 in colors; // true
4. 5 in colors; // false
5. 'green' in colors; // false
6.
7. delete colors[1];
8. console.log(colors); // (3) ['red', undefined × 1, 'blue']
9. 1 in colors; // ?
1. var colors = ['red', 'green', 'blue'];
2.
3. 1 in colors; // true
4. 5 in colors; // false
5. 'green' in colors; // false
6.
7. delete colors[1];
8. console.log(colors); // (3) ['red', undefined × 1, 'blue']
9. 1 in colors; // false

73. You must
specify an object
on the right side
of the in operator.
73

74. in Operator - Examples of Strings
74
1. var baseball = new String('Baseball');
2. 'length' in baseball; // true
3. 'ball' in baseball; // false
4.
5. var basketball = 'Basketball';
6. 'length' in basketball; // ?
1. var baseball = new String('Baseball');
2. 'length' in baseball; // true
3. 'ball' in baseball; // false
4.
5. var basketball = 'Basketball';
6. 'length' in basketball; // TypeError

75. void Operator
75
1. void 0; // undefined
2. void(0); // undefined
3. void({}); // undefined

76. JavaScript URIs
76
1. <a href="javascript:void(0);">
2. Click here to do nothing
3. </a>
4.
5. <a href="javascript:;">
6. Click here to do nothing
7. </a>
8.
9. <a href="javascript:void(alert('Hello!'));">
10. Click here to display a alert box
11. </a>

77. The strength of JavaScript is
that you can do anything. The
weakness is that you will.
- REG BRAITHWAITE
77

78. Questions?
78

79. Reference
79
● JavaScript Fundamentals | Microsoft Docs
● JavaScript Guide - JavaScript | MDN
● JavaScript Tutorial | W3Schools
● JSON - Wikipedia
Practical JavaScript Programming

80. Reference Books
● JavaScript: The Good Parts
● Effective JavaScript
80
Practical JavaScript Programming

81. 81
THANK YOU