Introduction to Programming
with JavaScript
Week 4: Object, Array
Jeongbae Oh

YCC JavaScript Seminar

2017.10.30
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.
Object
• Almost all values that is not a primitive
type or an operator is an object.

• Object consists of property and
method.
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)
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.
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.)
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";
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.
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.
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.
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.
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

String Object
• string.includes() 

• string.startsWith() 

• string.endsWith() 

• string.split()
String Object
• string.slice() or

string.substring()

• string.toLowerCase() 

• string.toUpperCase() 

• string.trim() 

• string.length (property)
Number Object
• Number.isFinite() 

• Number.isInteger() 

• Number.isNaN() 

• Number.parseFloat() 

• Number.parseInt()
• number.toExponential()*

• number.toString()*
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
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.
Date Object
• Dates can be created/calculated using UNIX time.
• Dates can also be created using time string.
JSON
• JavaScript Object Notation

• Constructed the same way as an object

• Used to transfer data in various settings
(web, app, database, API server, etc.)
JSON for API
• Example: Foursquare API

• Developer sign up: https://ko.foursquare.com/
developers/apps

• Developer documentation: https://
developer.foursquare.com/docs
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
JSON for API
• Response (use JSON formatter Chrome extension)
JSON for API
• Response (JSON formatter extension used)
JSON for API
• Using loops to process raw data
JSON for API
• Refining data to find insights
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).

More Related Content

PPTX
Express js
PDF
Introduction to kotlin
KEY
Introduction to android testing
PDF
Android Multimedia Support
PDF
UDA-Instalación PC local_wls11_proveedores
PPTX
Basic Concept of Node.js & NPM
PPT
Software Testing Process
PPTX
Appium overview
Express js
Introduction to kotlin
Introduction to android testing
Android Multimedia Support
UDA-Instalación PC local_wls11_proveedores
Basic Concept of Node.js & NPM
Software Testing Process
Appium overview

What's hot (20)

PPTX
React render props
PPT
A Deeper look into Javascript Basics
PDF
Working with Dynamic Content and Adding Templating engines, MVC
PPTX
Android testing
PPT
Day 4: Android: UI Widgets
PPTX
PDF
Nodejs
PDF
Embedded Android Workshop with Pie
PPTX
Android Widget
PDF
Intro to UIKit • Made by Many
PPTX
Unit Testing Android Applications
PDF
Android: Intent, Intent Filter, Broadcast Receivers
PPTX
Manual testing
PPTX
Android Training (Storing & Shared Preferences)
PPTX
Express JS
PDF
Spring Boot
PPTX
Introduction to Koltin for Android Part I
PDF
12 Steps to API Load Testing with Apache JMeter
PDF
Data Persistence in Android with Room Library
PPTX
Selenium with java
React render props
A Deeper look into Javascript Basics
Working with Dynamic Content and Adding Templating engines, MVC
Android testing
Day 4: Android: UI Widgets
Nodejs
Embedded Android Workshop with Pie
Android Widget
Intro to UIKit • Made by Many
Unit Testing Android Applications
Android: Intent, Intent Filter, Broadcast Receivers
Manual testing
Android Training (Storing & Shared Preferences)
Express JS
Spring Boot
Introduction to Koltin for Android Part I
12 Steps to API Load Testing with Apache JMeter
Data Persistence in Android with Room Library
Selenium with java
Ad

Similar to Intro to JavaScript - Week 4: Object and Array (20)

PDF
3.1 javascript objects_DOM
PPTX
Introduction to JcjfjfjfkuutyuyrsdterdfbvAVA.pptx
PPTX
JavaScript.pptx
PDF
Mastering The Collections in JavaScript [Free Meetup]
PPTX
2CPP13 - Operator Overloading
PPTX
Javascript
PPTX
Introduction to JavaScript
PPT
02._Object-Oriented_Programming_Concepts.ppt
PDF
React-Native Lecture 11: In App Storage
PPT
00-rewfwffwfwfwewfwwfwffeffvyu8ikview.ppt
PPT
00 OOP Introduction to Java Lecture Notes.ppt
PPT
00-review.ppt
PPT
PDF
Python Programming and GIS
PPT
Introduction to Java(basic understanding).ppt
PPTX
Awesomeness of JavaScript…almost
PPT
Presentation JavaScript Introduction Data Types Variables Control Structure
PPT
standard template library(STL) in C++
PDF
Java Script
PPT
Java Script
3.1 javascript objects_DOM
Introduction to JcjfjfjfkuutyuyrsdterdfbvAVA.pptx
JavaScript.pptx
Mastering The Collections in JavaScript [Free Meetup]
2CPP13 - Operator Overloading
Javascript
Introduction to JavaScript
02._Object-Oriented_Programming_Concepts.ppt
React-Native Lecture 11: In App Storage
00-rewfwffwfwfwewfwwfwffeffvyu8ikview.ppt
00 OOP Introduction to Java Lecture Notes.ppt
00-review.ppt
Python Programming and GIS
Introduction to Java(basic understanding).ppt
Awesomeness of JavaScript…almost
Presentation JavaScript Introduction Data Types Variables Control Structure
standard template library(STL) in C++
Java Script
Java Script
Ad

Recently uploaded (20)

PDF
Enhancing plagiarism detection using data pre-processing and machine learning...
PDF
INTERSPEECH 2025 「Recent Advances and Future Directions in Voice Conversion」
PDF
Auditboard EB SOX Playbook 2023 edition.
PPTX
AI-driven Assurance Across Your End-to-end Network With ThousandEyes
PDF
Transform-Your-Supply-Chain-with-AI-Driven-Quality-Engineering.pdf
PPTX
agenticai-neweraofintelligence-250529192801-1b5e6870.pptx
PDF
The-Future-of-Automotive-Quality-is-Here-AI-Driven-Engineering.pdf
PDF
NewMind AI Weekly Chronicles – August ’25 Week IV
PDF
Early detection and classification of bone marrow changes in lumbar vertebrae...
PDF
CXOs-Are-you-still-doing-manual-DevOps-in-the-age-of-AI.pdf
PDF
IT-ITes Industry bjjbnkmkhkhknbmhkhmjhjkhj
PDF
sbt 2.0: go big (Scala Days 2025 edition)
PDF
Planning-an-Audit-A-How-To-Guide-Checklist-WP.pdf
PDF
MENA-ECEONOMIC-CONTEXT-VC MENA-ECEONOMIC
PPTX
Custom Battery Pack Design Considerations for Performance and Safety
PPTX
MuleSoft-Compete-Deck for midddleware integrations
PDF
Advancing precision in air quality forecasting through machine learning integ...
PDF
Lung cancer patients survival prediction using outlier detection and optimize...
PDF
Rapid Prototyping: A lecture on prototyping techniques for interface design
PDF
Co-training pseudo-labeling for text classification with support vector machi...
Enhancing plagiarism detection using data pre-processing and machine learning...
INTERSPEECH 2025 「Recent Advances and Future Directions in Voice Conversion」
Auditboard EB SOX Playbook 2023 edition.
AI-driven Assurance Across Your End-to-end Network With ThousandEyes
Transform-Your-Supply-Chain-with-AI-Driven-Quality-Engineering.pdf
agenticai-neweraofintelligence-250529192801-1b5e6870.pptx
The-Future-of-Automotive-Quality-is-Here-AI-Driven-Engineering.pdf
NewMind AI Weekly Chronicles – August ’25 Week IV
Early detection and classification of bone marrow changes in lumbar vertebrae...
CXOs-Are-you-still-doing-manual-DevOps-in-the-age-of-AI.pdf
IT-ITes Industry bjjbnkmkhkhknbmhkhmjhjkhj
sbt 2.0: go big (Scala Days 2025 edition)
Planning-an-Audit-A-How-To-Guide-Checklist-WP.pdf
MENA-ECEONOMIC-CONTEXT-VC MENA-ECEONOMIC
Custom Battery Pack Design Considerations for Performance and Safety
MuleSoft-Compete-Deck for midddleware integrations
Advancing precision in air quality forecasting through machine learning integ...
Lung cancer patients survival prediction using outlier detection and optimize...
Rapid Prototyping: A lecture on prototyping techniques for interface design
Co-training pseudo-labeling for text classification with support vector machi...

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