Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intro to JavaScript - Week 4: Object and Array

156 views

Published on

Intro to Programming with JavaScript Seminar, Fall 2017 semester
Week 4: Object and Array

Led by Jeongbae Oh, in conjunction with YCC (Yonsei Computer Club) @ Yonsei University


This seminar intends to introduce newcomers to programming using JavaScript, one of the most versatile languages of the modern world.

Published in: Technology
  • Be the first to comment

Intro to JavaScript - Week 4: Object and Array

  1. 1. Introduction to Programming with JavaScript Week 4: Object, Array Jeongbae Oh YCC JavaScript Seminar 2017.10.30
  2. 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. 3. Object • Almost all values that is not a primitive type or an operator is an object. • Object consists of property and method.
  4. 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. 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. 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. 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. 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. 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. 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. 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. 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. 13. String Object • string.includes() • string.startsWith() • string.endsWith() • string.split()
  14. 14. String Object • string.slice() or
 string.substring() • string.toLowerCase() • string.toUpperCase() • string.trim() • string.length (property)
  15. 15. Number Object • Number.isFinite() • Number.isInteger() • Number.isNaN() • Number.parseFloat() • Number.parseInt() • number.toExponential()* • number.toString()*
  16. 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. 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. 18. Date Object • Dates can be created/calculated using UNIX time. • Dates can also be created using time string.
  19. 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. 20. JSON for API • Example: Foursquare API • Developer sign up: https://ko.foursquare.com/ developers/apps • Developer documentation: https:// developer.foursquare.com/docs
  21. 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. 22. JSON for API • Response (use JSON formatter Chrome extension)
  23. 23. JSON for API • Response (JSON formatter extension used)
  24. 24. JSON for API • Using loops to process raw data
  25. 25. JSON for API • Refining data to find insights
  26. 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).

×