SlideShare a Scribd company logo
1 of 12
Download to read offline
JAVASCRIPT OBJECTS
Object
Objects are variables too. But objects can contain
many values.
Objects store a collection of key-value pairs: each
item in the collection has a name that we call
the key and an associated value
An object's keys are strings or symbols, but the
values can be any type, including other objects
We can create an object using object
literal syntax:
let person = {
name: 'Jane',
age: 37,
hobbies: ['photography', 'genealogy'],
};
 This code shows an object named person that has 3
key-value pairs:
i) The name of the person, a string, defined by
the name key.
ii) The age of the person, a number, defined by
the age key.
iii) A list of the person's hobbies, an array of strings,
defined by the hobbies key.
 Braces ({}) delimit the list of key-value pairs
contained by the object. Each key-value pair ends
with a comma (,), and each pair has a key, a colon
(:), and a value. The comma that follows the last
pair is optional. Though the keys are strings, we
typically omit the quotes when the key consists
entirely of alphanumeric characters and
underscores. The values of each pair can be any
type.
 We can access a specific value in an object in two
ways: 1) dot notation and 2) bracket notation
 Person.name= 'Jane‘ //dot notation
 person['age'] =37 // bracket notation
Let's add some more key-value pairs to
the person object:
person= { name: 'Jane', age: 37, hobbies:
['photography', 'genealogy'], height: '5 ft',
gender: 'female' }
To remove something from an existing object, you
can use the delete keyword
delete person.age = true
JAVASCRIPT ARRAY
 An array is a set of variables (e.g., strings or
numbers) that are grouped together and given a
single name.
 Creating Arrays
 To create an array, a new Array object must be
declared. This can be done in two ways:
var myArray = new
Array("Sarah","Patrick","Jane","Tim");
Or
var myArray =
["Sarah","Patrick","Jane","Tim"];
POPULATING ARRAY WITH DATA
Syntax
arrayName[index] = value;
 arrayName: The name of the array variable
 index: The array index number where you want
the value stored
 value: The value you’re storing in the array
Example
var dogPhotos = new Array(5);
dogPhotos[0] = "dog-1";
dogPhotos[1] = "dog-2";
dogPhotos[2] = "dog-3";
 Using a loop to populate an array
var dogPhotos = new Array(5);
for (var counter = 0; counter < 5; counter++) { dogPhotos[counter] =
"dog-" + (counter + 1);
}
Full code
// Declare the array
var dogPhotos = new Array(5);
// Initialize the array values using a loop
for (var counter = 0; counter < 5; counter++) {
dogPhotos[counter] = "dog-" + (counter + 1);
}
// Get the photo number
var promptNum = prompt("Enter the dog you want to see (1-5):", "");
if (promptNum !== "" && promptNum !== null) {
// Construct the primary part of the filename var promptDog = "dog-
" + promptNum;
// Work with the array values using a loop
for (counter = 0; counter < 5; counter++) {
if (promptDog === dogPhotos[counter] {
document.body.style.backgroundImage =
"url('/images/" + dogPhotos[counter] + ".png')";
break; }
} }
Creating Multidimensional Arrays
A multidimensional array is one where two or more
values are stored within each array element
// define array
var myArray = [ ['apple', 'orange', 'mango'],
['rose', 'lotus', 'lily'], ['cabbage', 'carrot',
'beans'] ];
Access elements of the array
console.log(myArray[0][1]); // orange
console.log(myArray[1][0]); // rose
console.log(myArray[2][2]); // beans
 Get key by value
var position = myArray[0].indexOf('mango');
console.log(position); // 2
Get position of element in the array
console.log(myArray[0].indexOf('mango')); // 2
Get size of the array
console.log(myArray.length); // 3
Using for loop
for (i = 0; i < myArray.length; i++) {
console.log(i, myArray[i]);
}
//0 ["apple", "orange", "mango"]
//1 ["rose", "lotus", "lily"]
//2 ["cabbage", "carrot", "beans"]
for (i = 0; i < myArray.length; i++) {
for (j = 0; j < myArray[i].length; j++) {
console.log(i, j, myArray[i][j]);
} }
// 0 0 "apple"
// 0 1 "orange"
// 0 2 "mango"
Add item at the end of the array
myArray[2].push('potato');
console.log(myArray[2]); // ["cabbage", "carrot",
"beans", "potato"]
Add item at the beginning of the array
myArray[2].unshift('tomato');
console.log(myArray[2]);
// ["tomato", "cabbage", "carrot", "beans", "potato"]
Remove item from end of the array
myArray[2].pop();
console.log(myArray[2]); // ["tomato", "cabbage",
"carrot", "beans"]
Remove item from the beginning
myArray[2].shift();
console.log(myArray[2]); // ["cabbage", "carrot",
"beans"]

More Related Content

Similar to JAVASCRIPT OBJECTS.pdf

Similar to JAVASCRIPT OBJECTS.pdf (20)

ARRAYS.ppt
ARRAYS.pptARRAYS.ppt
ARRAYS.ppt
 
Array lecture
Array lectureArray lecture
Array lecture
 
Chapter 2 wbp.pptx
Chapter 2 wbp.pptxChapter 2 wbp.pptx
Chapter 2 wbp.pptx
 
Fp201 unit4
Fp201 unit4Fp201 unit4
Fp201 unit4
 
12. arrays
12. arrays12. arrays
12. arrays
 
ARRAYS.ppt
ARRAYS.pptARRAYS.ppt
ARRAYS.ppt
 
ARRAYS.ppt
ARRAYS.pptARRAYS.ppt
ARRAYS.ppt
 
Arrays are used to store multiple values in a single variable, instead of dec...
Arrays are used to store multiple values in a single variable, instead of dec...Arrays are used to store multiple values in a single variable, instead of dec...
Arrays are used to store multiple values in a single variable, instead of dec...
 
What are arrays in java script
What are arrays in java scriptWhat are arrays in java script
What are arrays in java script
 
Array properties
Array propertiesArray properties
Array properties
 
Computer programming 2 Lesson 13
Computer programming 2  Lesson 13Computer programming 2  Lesson 13
Computer programming 2 Lesson 13
 
arrays in c# including Classes handling arrays
arrays in c#  including Classes handling arraysarrays in c#  including Classes handling arrays
arrays in c# including Classes handling arrays
 
Array
ArrayArray
Array
 
Arrays in java
Arrays in javaArrays in java
Arrays in java
 
Php array
Php arrayPhp array
Php array
 
Java script arrays
Java script arraysJava script arrays
Java script arrays
 
Java script arrays
Java script arraysJava script arrays
Java script arrays
 
Lecture 5 array in PHP.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 5 array in PHP.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 5 array in PHP.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 5 array in PHP.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
 
ARTDM 170, Week10: Arrays + Using Randomization
ARTDM 170, Week10: Arrays + Using RandomizationARTDM 170, Week10: Arrays + Using Randomization
ARTDM 170, Week10: Arrays + Using Randomization
 
Artdm170 Week10 Arrays Math
Artdm170 Week10 Arrays MathArtdm170 Week10 Arrays Math
Artdm170 Week10 Arrays Math
 

Recently uploaded

KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...M56BOOKSTORE PRODUCT/SERVICE
 
Capitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptxCapitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptxCapitolTechU
 
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTiammrhaywood
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdfssuser54595a
 
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon AUnboundStockton
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxSayali Powar
 
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17Celine George
 
Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Celine George
 
Framing an Appropriate Research Question 6b9b26d93da94caf993c038d9efcdedb.pdf
Framing an Appropriate Research Question 6b9b26d93da94caf993c038d9efcdedb.pdfFraming an Appropriate Research Question 6b9b26d93da94caf993c038d9efcdedb.pdf
Framing an Appropriate Research Question 6b9b26d93da94caf993c038d9efcdedb.pdfUjwalaBharambe
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptxVS Mahajan Coaching Centre
 
Final demo Grade 9 for demo Plan dessert.pptx
Final demo Grade 9 for demo Plan dessert.pptxFinal demo Grade 9 for demo Plan dessert.pptx
Final demo Grade 9 for demo Plan dessert.pptxAvyJaneVismanos
 
History Class XII Ch. 3 Kinship, Caste and Class (1).pptx
History Class XII Ch. 3 Kinship, Caste and Class (1).pptxHistory Class XII Ch. 3 Kinship, Caste and Class (1).pptx
History Class XII Ch. 3 Kinship, Caste and Class (1).pptxsocialsciencegdgrohi
 
How to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxHow to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxmanuelaromero2013
 
Types of Journalistic Writing Grade 8.pptx
Types of Journalistic Writing Grade 8.pptxTypes of Journalistic Writing Grade 8.pptx
Types of Journalistic Writing Grade 8.pptxEyham Joco
 
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptxECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptxiammrhaywood
 
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxIntroduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxpboyjonauth
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Educationpboyjonauth
 

Recently uploaded (20)

KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
 
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Bikash Puri  Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Bikash Puri  Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
 
Capitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptxCapitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptx
 
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
 
9953330565 Low Rate Call Girls In Rohini Delhi NCR
9953330565 Low Rate Call Girls In Rohini  Delhi NCR9953330565 Low Rate Call Girls In Rohini  Delhi NCR
9953330565 Low Rate Call Girls In Rohini Delhi NCR
 
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon A
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
 
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
 
Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17
 
Framing an Appropriate Research Question 6b9b26d93da94caf993c038d9efcdedb.pdf
Framing an Appropriate Research Question 6b9b26d93da94caf993c038d9efcdedb.pdfFraming an Appropriate Research Question 6b9b26d93da94caf993c038d9efcdedb.pdf
Framing an Appropriate Research Question 6b9b26d93da94caf993c038d9efcdedb.pdf
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
 
Final demo Grade 9 for demo Plan dessert.pptx
Final demo Grade 9 for demo Plan dessert.pptxFinal demo Grade 9 for demo Plan dessert.pptx
Final demo Grade 9 for demo Plan dessert.pptx
 
History Class XII Ch. 3 Kinship, Caste and Class (1).pptx
History Class XII Ch. 3 Kinship, Caste and Class (1).pptxHistory Class XII Ch. 3 Kinship, Caste and Class (1).pptx
History Class XII Ch. 3 Kinship, Caste and Class (1).pptx
 
How to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxHow to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptx
 
Types of Journalistic Writing Grade 8.pptx
Types of Journalistic Writing Grade 8.pptxTypes of Journalistic Writing Grade 8.pptx
Types of Journalistic Writing Grade 8.pptx
 
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptxECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
 
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxIntroduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptx
 
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdfTataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Education
 

JAVASCRIPT OBJECTS.pdf

  • 2. Object Objects are variables too. But objects can contain many values. Objects store a collection of key-value pairs: each item in the collection has a name that we call the key and an associated value An object's keys are strings or symbols, but the values can be any type, including other objects We can create an object using object literal syntax: let person = { name: 'Jane', age: 37, hobbies: ['photography', 'genealogy'], };
  • 3.  This code shows an object named person that has 3 key-value pairs: i) The name of the person, a string, defined by the name key. ii) The age of the person, a number, defined by the age key. iii) A list of the person's hobbies, an array of strings, defined by the hobbies key.  Braces ({}) delimit the list of key-value pairs contained by the object. Each key-value pair ends with a comma (,), and each pair has a key, a colon (:), and a value. The comma that follows the last pair is optional. Though the keys are strings, we typically omit the quotes when the key consists entirely of alphanumeric characters and underscores. The values of each pair can be any type.
  • 4.  We can access a specific value in an object in two ways: 1) dot notation and 2) bracket notation  Person.name= 'Jane‘ //dot notation  person['age'] =37 // bracket notation Let's add some more key-value pairs to the person object: person= { name: 'Jane', age: 37, hobbies: ['photography', 'genealogy'], height: '5 ft', gender: 'female' } To remove something from an existing object, you can use the delete keyword delete person.age = true
  • 5.
  • 6. JAVASCRIPT ARRAY  An array is a set of variables (e.g., strings or numbers) that are grouped together and given a single name.  Creating Arrays  To create an array, a new Array object must be declared. This can be done in two ways: var myArray = new Array("Sarah","Patrick","Jane","Tim"); Or var myArray = ["Sarah","Patrick","Jane","Tim"];
  • 7. POPULATING ARRAY WITH DATA Syntax arrayName[index] = value;  arrayName: The name of the array variable  index: The array index number where you want the value stored  value: The value you’re storing in the array Example var dogPhotos = new Array(5); dogPhotos[0] = "dog-1"; dogPhotos[1] = "dog-2"; dogPhotos[2] = "dog-3";
  • 8.  Using a loop to populate an array var dogPhotos = new Array(5); for (var counter = 0; counter < 5; counter++) { dogPhotos[counter] = "dog-" + (counter + 1); } Full code // Declare the array var dogPhotos = new Array(5); // Initialize the array values using a loop for (var counter = 0; counter < 5; counter++) { dogPhotos[counter] = "dog-" + (counter + 1); } // Get the photo number var promptNum = prompt("Enter the dog you want to see (1-5):", ""); if (promptNum !== "" && promptNum !== null) { // Construct the primary part of the filename var promptDog = "dog- " + promptNum; // Work with the array values using a loop for (counter = 0; counter < 5; counter++) {
  • 9. if (promptDog === dogPhotos[counter] { document.body.style.backgroundImage = "url('/images/" + dogPhotos[counter] + ".png')"; break; } } } Creating Multidimensional Arrays A multidimensional array is one where two or more values are stored within each array element // define array var myArray = [ ['apple', 'orange', 'mango'], ['rose', 'lotus', 'lily'], ['cabbage', 'carrot', 'beans'] ]; Access elements of the array console.log(myArray[0][1]); // orange console.log(myArray[1][0]); // rose console.log(myArray[2][2]); // beans
  • 10.  Get key by value var position = myArray[0].indexOf('mango'); console.log(position); // 2 Get position of element in the array console.log(myArray[0].indexOf('mango')); // 2 Get size of the array console.log(myArray.length); // 3
  • 11. Using for loop for (i = 0; i < myArray.length; i++) { console.log(i, myArray[i]); } //0 ["apple", "orange", "mango"] //1 ["rose", "lotus", "lily"] //2 ["cabbage", "carrot", "beans"] for (i = 0; i < myArray.length; i++) { for (j = 0; j < myArray[i].length; j++) { console.log(i, j, myArray[i][j]); } } // 0 0 "apple" // 0 1 "orange" // 0 2 "mango"
  • 12. Add item at the end of the array myArray[2].push('potato'); console.log(myArray[2]); // ["cabbage", "carrot", "beans", "potato"] Add item at the beginning of the array myArray[2].unshift('tomato'); console.log(myArray[2]); // ["tomato", "cabbage", "carrot", "beans", "potato"] Remove item from end of the array myArray[2].pop(); console.log(myArray[2]); // ["tomato", "cabbage", "carrot", "beans"] Remove item from the beginning myArray[2].shift(); console.log(myArray[2]); // ["cabbage", "carrot", "beans"]