SlideShare ist ein Scribd-Unternehmen logo
1 von 12
Downloaden Sie, um offline zu lesen
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"]

Weitere ähnliche Inhalte

Ähnlich wie JAVASCRIPT OBJECTS.pdf

Ähnlich wie 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
 

Kürzlich hochgeladen

SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxiammrhaywood
 
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
 
Solving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxSolving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxOH TEIK BIN
 
Science 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsScience 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsKarinaGenton
 
Proudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxProudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxthorishapillay1
 
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
 
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
 
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
 
Painted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of IndiaPainted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of IndiaVirag Sontakke
 
Blooming Together_ Growing a Community Garden Worksheet.docx
Blooming Together_ Growing a Community Garden Worksheet.docxBlooming Together_ Growing a Community Garden Worksheet.docx
Blooming Together_ Growing a Community Garden Worksheet.docxUnboundStockton
 
EPANDING THE CONTENT OF AN OUTLINE using notes.pptx
EPANDING THE CONTENT OF AN OUTLINE using notes.pptxEPANDING THE CONTENT OF AN OUTLINE using notes.pptx
EPANDING THE CONTENT OF AN OUTLINE using notes.pptxRaymartEstabillo3
 
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
 
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...Marc Dusseiller Dusjagr
 
Science lesson Moon for 4th quarter lesson
Science lesson Moon for 4th quarter lessonScience lesson Moon for 4th quarter lesson
Science lesson Moon for 4th quarter lessonJericReyAuditor
 
Hybridoma Technology ( Production , Purification , and Application )
Hybridoma Technology  ( Production , Purification , and Application  ) Hybridoma Technology  ( Production , Purification , and Application  )
Hybridoma Technology ( Production , Purification , and Application ) Sakshi Ghasle
 
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
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)eniolaolutunde
 
Class 11 Legal Studies Ch-1 Concept of State .pdf
Class 11 Legal Studies Ch-1 Concept of State .pdfClass 11 Legal Studies Ch-1 Concept of State .pdf
Class 11 Legal Studies Ch-1 Concept of State .pdfakmcokerachita
 

Kürzlich hochgeladen (20)

SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
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
 
Solving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxSolving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptx
 
Science 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsScience 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its Characteristics
 
Proudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxProudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.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
 
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🔝
 
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
 
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
 
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
 
Painted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of IndiaPainted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of India
 
Blooming Together_ Growing a Community Garden Worksheet.docx
Blooming Together_ Growing a Community Garden Worksheet.docxBlooming Together_ Growing a Community Garden Worksheet.docx
Blooming Together_ Growing a Community Garden Worksheet.docx
 
EPANDING THE CONTENT OF AN OUTLINE using notes.pptx
EPANDING THE CONTENT OF AN OUTLINE using notes.pptxEPANDING THE CONTENT OF AN OUTLINE using notes.pptx
EPANDING THE CONTENT OF AN OUTLINE using notes.pptx
 
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
 
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
 
Science lesson Moon for 4th quarter lesson
Science lesson Moon for 4th quarter lessonScience lesson Moon for 4th quarter lesson
Science lesson Moon for 4th quarter lesson
 
Hybridoma Technology ( Production , Purification , and Application )
Hybridoma Technology  ( Production , Purification , and Application  ) Hybridoma Technology  ( Production , Purification , and Application  )
Hybridoma Technology ( Production , Purification , and Application )
 
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
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
 
Class 11 Legal Studies Ch-1 Concept of State .pdf
Class 11 Legal Studies Ch-1 Concept of State .pdfClass 11 Legal Studies Ch-1 Concept of State .pdf
Class 11 Legal Studies Ch-1 Concept of State .pdf
 

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"]