Intro to JavaScript - Week 4: Object and Array
2 likes•256 views
The document provides an overview of JavaScript's object and array data structures, explaining their properties, methods, and how they can be manipulated. It details how objects consist of key-value pairs, while arrays are one-dimensional lists accessed by index, emphasizing the use of various methods associated with both. Additionally, the document discusses JavaScript's handling of dates and JSON for data transfer in APIs, as well as the distinction between object-oriented programming (OOP) and functional programming (FP).
![Object
• var name = { [key: value] }; or
var name = new Object();
• Keys and values are optional (i.e. an empty object is allowed).
• But a key must have its value.](https://image.slidesharecdn.com/jsseminar-week4-171103050615/85/Intro-to-JavaScript-Week-4-Object-and-Array-5-320.jpg)
![Property
• Property can be accessed by: object.key or object[key];
• If the property's key is a number, the latter must be used.
• Property can be created/changed similarly to assigning a value to a variable.
• object.newKey = "newValue";](https://image.slidesharecdn.com/jsseminar-week4-171103050615/85/Intro-to-JavaScript-Week-4-Object-and-Array-7-320.jpg)
![Creating Array
• Empty
• var arrayName = []; or
var arrayName = new Array();
• With elements
• var arrayName = [1, 2, 3];
• Elements can be of almost any data type.](https://image.slidesharecdn.com/jsseminar-week4-171103050615/85/Intro-to-JavaScript-Week-4-Object-and-Array-10-320.jpg)
![Indexing
• As array does not have keys, its elements have to be
accessed by using index (position of element within
array).
arrayName[index];
• In programming, index starts with 0, instead of 1.](https://image.slidesharecdn.com/jsseminar-week4-171103050615/85/Intro-to-JavaScript-Week-4-Object-and-Array-11-320.jpg)
![JSON for API
https://api.foursquare.com/v2/venues/
search?v=20171030&m=foursquare&
client_id=[CLIENT_ID]&client_secret=[CLIE
NT_SECRET]&ll=[COORDINATES]
Client API Server
{"meta":{"code":
200,"requestId":"59fbf3496a607142ba7a7d
f4"},"response":{"venues":
[{"id":"5340142111d247f646bce6f6","name
":"4x4","location":{"lat":
37.557804107666016,"lng":
126.93865203857422,"labeledLatLngs":
[{"label":"display","lat":
37.557804107666016,"lng":
126.93865203857422}], ...
• Searching for venues around a specific coordinate](https://image.slidesharecdn.com/jsseminar-week4-171103050615/85/Intro-to-JavaScript-Week-4-Object-and-Array-21-320.jpg)
Intro to JavaScript - Week 4: Object and Array
- 1. Introduction to Programming with JavaScript Week 4: Object, Array Jeongbae Oh YCC JavaScript Seminar 2017.10.30
- 2. Object and Array • Since primitive data types cannot be changed ("immutable"), a more complicated form of data needs something else to be stored as information. • Object (객체) and array (배열) are most frequently used form of data structure in JavaScript. • Object and array allows for complex manipulation and operation of data.
- 3. Object • Almost all values that is not a primitive type or an operator is an object. • Object consists of property and method.
- 4. Object • Properties are "status" or "characteristics" of an object. • Properties are composed of key-value pair, • Methods are the "actions" that an object takes. • Example: car (object), color (property), accelerate (method)
- 5. Object • var name = { [key: value] }; or var name = new Object(); • Keys and values are optional (i.e. an empty object is allowed). • But a key must have its value.
- 6. Property • Key has to be unique (i.e. no repeating keys). • Key can be a string or a number. ("" is not used for keys) • Value does not have to be unique. • Value can hold almost any data type. (Number, string, boolean, another object, function*, etc.)
- 7. Property • Property can be accessed by: object.key or object[key]; • If the property's key is a number, the latter must be used. • Property can be created/changed similarly to assigning a value to a variable. • object.newKey = "newValue";
- 8. Method • A property whose value is a function is called a method. • Since it's a function, it has to include () at the end when calling.
- 9. Array Object • Array is a special type of object that is one-dimensional list. • Items in an array is called an element. • Array does not use key-value pairs.
- 10. Creating Array • Empty • var arrayName = []; or var arrayName = new Array(); • With elements • var arrayName = [1, 2, 3]; • Elements can be of almost any data type.
- 11. Indexing • As array does not have keys, its elements have to be accessed by using index (position of element within array). arrayName[index]; • In programming, index starts with 0, instead of 1.
- 12. Array Properties & Methods • arrayName.length; • arrayName.indexOf(value); → Returns index of the value • arrayName.push(element); → Returns index of added element • arrayName.pop(); → Returns removed value
- 13. String Object • string.includes() • string.startsWith() • string.endsWith() • string.split()
- 14. String Object • string.slice() or string.substring() • string.toLowerCase() • string.toUpperCase() • string.trim() • string.length (property)
- 15. Number Object • Number.isFinite() • Number.isInteger() • Number.isNaN() • Number.parseFloat() • Number.parseInt() • number.toExponential()* • number.toString()*
- 16. Date Object • Allows calculation of date/time • Time is assigned when called/ initialized • Date object's methods allow formatting date within string. • getMonth() starts with 0, not 1
- 17. UNIX Time • JavaScript uses UNIX time, which means the beginning (time 0) is defined as 1970-01-01 00:00:00.000 (UTC). • All times are calculated in relation to the time 0. • 86399999: 1970-01-01 23:59:59.999 (UTC) • 1509346681342: 2017-10-30 06:58:01.342 (UTC) • This number is called a timestamp. • Browser automatically formats time in the local/server time, but calculations must be done based on UTC.
- 18. Date Object • Dates can be created/calculated using UNIX time. • Dates can also be created using time string.
- 19. JSON • JavaScript Object Notation • Constructed the same way as an object • Used to transfer data in various settings (web, app, database, API server, etc.)
- 20. JSON for API • Example: Foursquare API • Developer sign up: https://ko.foursquare.com/ developers/apps • Developer documentation: https:// developer.foursquare.com/docs
- 21. JSON for API https://api.foursquare.com/v2/venues/ search?v=20171030&m=foursquare& client_id=[CLIENT_ID]&client_secret=[CLIE NT_SECRET]&ll=[COORDINATES] Client API Server {"meta":{"code": 200,"requestId":"59fbf3496a607142ba7a7d f4"},"response":{"venues": [{"id":"5340142111d247f646bce6f6","name ":"4x4","location":{"lat": 37.557804107666016,"lng": 126.93865203857422,"labeledLatLngs": [{"label":"display","lat": 37.557804107666016,"lng": 126.93865203857422}], ... • Searching for venues around a specific coordinate
- 22. JSON for API • Response (use JSON formatter Chrome extension)
- 23. JSON for API • Response (JSON formatter extension used)
- 24. JSON for API • Using loops to process raw data
- 25. JSON for API • Refining data to find insights
- 26. Object-Oriented Programming (OOP) • JavaScript can also be used as an OOP language such as Java. (But no real connection to Java, of course.) • OOP is a programming paradigm which centers around making objects and using methods. • In Java, a language designed for OOP, there is no function (all function must be constructed as a method of an object). • Opposite paradigm to OOP is called functional programming (FP).