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

Proudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxProudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxthorishapillay1
 
Alper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentAlper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentInMediaRes1
 
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
 
“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
 
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
 
Pharmacognosy Flower 3. Compositae 2023.pdf
Pharmacognosy Flower 3. Compositae 2023.pdfPharmacognosy Flower 3. Compositae 2023.pdf
Pharmacognosy Flower 3. Compositae 2023.pdfMahmoud M. Sallam
 
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
 
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...JhezDiaz1
 
How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17Celine George
 
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
 
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
 
CELL CYCLE Division Science 8 quarter IV.pptx
CELL CYCLE Division Science 8 quarter IV.pptxCELL CYCLE Division Science 8 quarter IV.pptx
CELL CYCLE Division Science 8 quarter IV.pptxJiesonDelaCerna
 
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
 
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
 
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdfLike-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdfMr Bounab Samir
 
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
 

Recently uploaded (20)

Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
 
Proudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxProudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.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
 
Alper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentAlper Gobel In Media Res Media Component
Alper Gobel In Media Res Media Component
 
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
 
ESSENTIAL of (CS/IT/IS) class 06 (database)
ESSENTIAL of (CS/IT/IS) class 06 (database)ESSENTIAL of (CS/IT/IS) class 06 (database)
ESSENTIAL of (CS/IT/IS) class 06 (database)
 
“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...
 
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
 
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
 
Pharmacognosy Flower 3. Compositae 2023.pdf
Pharmacognosy Flower 3. Compositae 2023.pdfPharmacognosy Flower 3. Compositae 2023.pdf
Pharmacognosy Flower 3. Compositae 2023.pdf
 
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
 
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
 
How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17
 
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
 
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
 
CELL CYCLE Division Science 8 quarter IV.pptx
CELL CYCLE Division Science 8 quarter IV.pptxCELL CYCLE Division Science 8 quarter IV.pptx
CELL CYCLE Division Science 8 quarter IV.pptx
 
Solving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxSolving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptx
 
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
 
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdfLike-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
 
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
 

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