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.

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).