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