Thanks to visit codestin.com
Credit goes to www.slideshare.net

Wilson Su, profile picture
Uploaded byWilson Su
PDF, PPTX378 views

Practical JavaScript Programming - Session 2/8

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.

Download as PDF, PPTX
Practical JavaScript Programming Session 2 Wilson Su
2 https://www.slideshare.net/sweekson/
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 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
Chapter 3. Data Structures 5
Objects 6
Object Literals 7 1. var profile = { 2. "first-name": "Will", 3. 'last_name': 'Lee', 4. title: 'FED', 5. $age: 18, 6. _hasCar: false 7. };
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
Property order in objects is NOT guaranteed. 9
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'}
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
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'}
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
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
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
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
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'};
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'}
Object.assign() only makes a shallow copy. 19
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}
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}
Arrays 22
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]
Avoid new Array() 24
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
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
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']
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']
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]
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]
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
Destructuring 32
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'
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
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
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 TAKE A BREAK
JSON 38
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
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. }
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. ]
Incorrect Format 42 1. { 2. 'index': 1, 3. id: undefined, 4. name: 05512, 5. title: "", // Comments 6. phone: "0987654321", 7. }
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'
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"}'
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"}'
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}
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}
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]'
Chapter 4. Operators 49
Comparison Operators 50
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'
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
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
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
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
The easiest way to detect NaN is x !== x 56
Type Operators 57
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'
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
Logical Operators 60
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
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
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}
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
Bitwise Operators 65
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
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
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 Miscellaneous
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
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
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
You must specify an object on the right side of the in operator. 73
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
void Operator 75 1. void 0; // undefined 2. void(0); // undefined 3. void({}); // undefined
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>
The strength of JavaScript is that you can do anything. The weakness is that you will. - REG BRAITHWAITE 77
Questions? 78
Reference 79 ● JavaScript Fundamentals | Microsoft Docs ● JavaScript Guide - JavaScript | MDN ● JavaScript Tutorial | W3Schools ● JSON - Wikipedia Practical JavaScript Programming
Reference Books ● JavaScript: The Good Parts ● Effective JavaScript 80 Practical JavaScript Programming
81 THANK YOU

More Related Content

PDF
Practical JavaScript Programming - Session 3/8
byWilson Su
 
PPTX
es6.concurrency()
byIngvar Stepanyan
 
PDF
Iteratory
byŁukasz Kużyński
 
TXT
Index2
bygrateful7
 
PDF
Testování prakticky
byFilip Procházka
 
PDF
RxSwift 예제로 감잡기
byYongha Yoo
 
PDF
HTTP Interceptors com AngularJS
byRodrigo Branas
 
PPTX
6. separation, namespace, error
byVahid Heidari
 
Practical JavaScript Programming - Session 3/8
byWilson Su
 
es6.concurrency()
byIngvar Stepanyan
 
Iteratory
byŁukasz Kużyński
 
Index2
bygrateful7
 
Testování prakticky
byFilip Procházka
 
RxSwift 예제로 감잡기
byYongha Yoo
 
HTTP Interceptors com AngularJS
byRodrigo Branas
 
6. separation, namespace, error
byVahid Heidari
 

What's hot

PDF
Aller plus loin avec Doctrine2
byAndré Tapia
 
PPT
Юнит тестирование в Zend Framework 2.0
byzfconfua
 
PDF
Silex al límite
byJavier Eguiluz
 
PDF
Android Fast Track CRUD Android PHP MySql
byAgus Haryanto
 
PDF
Introduction to Service Worker
byShogo Sensui
 
PDF
Introdução a python módulo c
byJader Gabriel
 
PDF
Javascript and jQuery for Mobile
byIvano Malavolta
 
DOC
Sumahexavector
byjbersosa
 
PDF
Analizador sintáctico de Pascal escrito en Bison
byEgdares Futch H.
 
DOC
Sumahex
byjbersosa
 
PPT
Wek14 mysql 2
byRani Sarungallo Rombe
 
DOCX
Simular un next del recordset en php de forma rudimentaria
byjbersosa
 
PDF
Assalamualaykum warahmatullahi wabarakatuu
byiswan_di
 
PDF
Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей ...
byOntico
 
PDF
Working With Ajax Frameworks
byJonathan Snook
 
PDF
1- Sourcecode Array
byFajar Baskoro
 
PDF
Sis quiz
byClesio Veloso
 
PDF
Юнит тестирование в Zend Framework 2.0
byzfconfua
 
PDF
UISearchController par Stéphane sudre
byCocoaHeads France
 
TXT
With enter
byAni Mikaelyan
 
Aller plus loin avec Doctrine2
byAndré Tapia
 
Юнит тестирование в Zend Framework 2.0
byzfconfua
 
Silex al límite
byJavier Eguiluz
 
Android Fast Track CRUD Android PHP MySql
byAgus Haryanto
 
Introduction to Service Worker
byShogo Sensui
 
Introdução a python módulo c
byJader Gabriel
 
Javascript and jQuery for Mobile
byIvano Malavolta
 
Sumahexavector
byjbersosa
 
Analizador sintáctico de Pascal escrito en Bison
byEgdares Futch H.
 
Sumahex
byjbersosa
 
Wek14 mysql 2
byRani Sarungallo Rombe
 
Simular un next del recordset en php de forma rudimentaria
byjbersosa
 
Assalamualaykum warahmatullahi wabarakatuu
byiswan_di
 
Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей ...
byOntico
 
Working With Ajax Frameworks
byJonathan Snook
 
1- Sourcecode Array
byFajar Baskoro
 
Sis quiz
byClesio Veloso
 
Юнит тестирование в Zend Framework 2.0
byzfconfua
 
UISearchController par Stéphane sudre
byCocoaHeads France
 
With enter
byAni Mikaelyan
 

More from Wilson Su

PDF
Mirage For Beginners
byWilson Su
 
PDF
NestJS
byWilson Su
 
PDF
The Jira How-To Guide
byWilson Su
 
PDF
The Future of Web Development
byWilson Su
 
PDF
Web Usability
byWilson Su
 
PDF
Puppeteer - Headless Chrome Node API
byWilson Su
 
PDF
Practical JavaScript Programming - Session 8/8
byWilson Su
 
PDF
Practical JavaScript Programming - Session 7/8
byWilson Su
 
PDF
Practical JavaScript Programming - Session 6/8
byWilson Su
 
PDF
Practical JavaScript Programming - Session 5/8
byWilson Su
 
PDF
Practical JavaScript Programming - Session 4/8
byWilson Su
 
PDF
Practical JavaScript Programming - Session 1/8
byWilson Su
 
Mirage For Beginners
byWilson Su
 
NestJS
byWilson Su
 
The Jira How-To Guide
byWilson Su
 
The Future of Web Development
byWilson Su
 
Web Usability
byWilson Su
 
Puppeteer - Headless Chrome Node API
byWilson Su
 
Practical JavaScript Programming - Session 8/8
byWilson Su
 
Practical JavaScript Programming - Session 7/8
byWilson Su
 
Practical JavaScript Programming - Session 6/8
byWilson Su
 
Practical JavaScript Programming - Session 5/8
byWilson Su
 
Practical JavaScript Programming - Session 4/8
byWilson Su
 
Practical JavaScript Programming - Session 1/8
byWilson Su
 

Practical JavaScript Programming - Session 2/8

  • 1.
  • 2.
  • 3.
    Outline 3 Practical JavaScript Programming Chapter3. ● 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 [email protected]
  • 5.
  • 6.
  • 7.
    Object Literals 7 1. varprofile = { 2. "first-name": "Will", 3. 'last_name': 'Lee', 4. title: 'FED', 5. $age: 18, 6. _hasCar: false 7. };
  • 8.
    Setting And GettingObject 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 inobjects is NOT guaranteed. 9
  • 10.
    Setting Object PropertiesFrom 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 / PassBy 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 DeletingProperty 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. vardog = { 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 WithObject.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.
  • 20.
    Warning For DeepClone 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 MapObject 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.
  • 23.
    Array Literals 23 1. varempty = []; 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.
  • 25.
    Create Array Usingnew 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 FromAn 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. varnumbers = [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 SetObject 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.
  • 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.
  • 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 ToJSON 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 AndStringify 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 ObjectUsing 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 ObjectUsing 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 UsingReviver 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 AndArrays 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.
  • 50.
  • 51.
    Falsy And TruthyValues 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 IllegalNumber 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 IllegalNumber 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 todetect NaN is x !== x 56
  • 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.
  • 61.
    Logical AND 61 1. functiontruthy () { 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. functiontruthy () { 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 UsingLogical 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.
  • 66.
    An Example UsingBitwise 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 UsingBitwise 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 UsingBitwise 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.
  • 70.
    in Operator VShasOwnProperty() 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 anobject 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. void0; // undefined 2. void(0); // undefined 3. void({}); // undefined
  • 76.
    JavaScript URIs 76 1. <ahref="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 ofJavaScript is that you can do anything. The weakness is that you will. - REG BRAITHWAITE 77
  • 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.