For everyone: Practice with JavaScript objects and arrays

[LearningNerd]

✔️ To complete this challenge: Write and test your code in the provided REPL.it links below (remember to click Save to save your work!), and copy the links to your solutions and paste them into a comment on the bottom of this page.

• Review of arrays: https://repl.it/IlVK/0
• Review of objects: https://repl.it/IlV2/1
• Arrays inside objects: https://repl.it/IlVj/3
• Objects inside objects: https://repl.it/IlVr/4
• Objects inside arrays: https://repl.it/IlVy/4

You can edit your comment at any point to update your answers, so you don't have to do these all at once! To edit your comment after you publish it, click the pencil icon in the top right corner of your comment:

📝 Solutions and more practice problems will be posted soon!

Reviewing the big picture!

For these first few questions, write a few sentences to explain your answers and post those directly in your comment at the bottom of this page (along with the links to your code for the other solutions). It's OK to do some research if you need a refresher -- just be sure to cite your sources!

1. What are arrays in JavaScript and why are they useful?

2. What are objects in JavaScript and why are they useful?

3. What are a couple of key differences between objects and arrays? (And can you find any good examples or metaphors that illustrate the difference?)

4. What is the index of an array? What is it used for?

5. What is a property?

6. What is a method?

Review of arrays

✏️ Write and test your answers for this section here: https://repl.it/IlVK/0
And remember to click "Save" at the top to save your progress and save the URL! When you're done, save it again, copy the links to your solutions, and paste them all into your comment on the bottom of this page.

7. Create an array named colors that contains five different names of colors as strings.

8. Access the first color in the array and print it to the console using console.log()

9. Now do the same with the third color in the list. (Remember that array indexes start at 0, not at 1!)

10. Write one line of code that changes the value of the last color in the list to "ultraviolet" (overwriting the previous value).

11. Create a new variable called fourthColor and set it equal to the fourth color in the list.

12. Add another color to the end of the list.

13. Add another color to the beginning of the list.

14. Print the length of the array to the console with console.log()

15. Remove the last color from the end of list, and then print the length of the array to the console one more time.

16. Write a for loop to iterate through every color in the array and print each color's value to the console.

17. Copying from that loop you just wrote, modify it to print every color's value and every color's index in this format: 3, purple or 0, blue etc.

18. Create a variable named lastColor that will always point to the last element of the colors array, no matter how many colors are in the list. (Hint: make use of the array's length property for this!)

✔️ SOLUTION for array review problems: https://repl.it/IlVK/2

Review of objects

✏️ Write and test your answers for this section here: https://repl.it/IlV2/1

For now, we'll just stick with one way to create objects in JavaScript called object literal notation or object initializers. Feel free to use that link as a reference or find other examples online if you need a refresher.

📚 For extra review: read MDN's intro to JavaScript objects

19. Pick a penguin from Wikipedia's List of Fictional Penguins and create an object named myPenguin with properties that represent the information listed in each column on that Wikipedia page (for example: the character's name, origin, and author).

20. Use console.log() to print the penguin's name to the console as part of a welcome message, like "Hello, I'm a penguin and my name is [NAME HERE]!"

21. Write another line of code that adds a new property to your penguin called canFly and set it to false. (Note: Don't modify your penguin-creation code that you wrote above! Do this step in a separate line of code.)

22. Add a method to your penguin called chirp that prints to the console: "CHIRP CHIRP! Is this what penguins sound like?" (Note: Again, don't modify your previous code! Do this step by writing a new line of code.)

23. Add another method to your penguin called sayHello that prints to the console the same message from step 20 above. But this time, be sure to use the mystical, magical, all-powerful this keyword to access your penguin's name, so that way the sayHello method could potentially work for any penguin that has a name!

24. Next, call your penguin's sayHello() method and make sure that it works! (Hint: if you need an example of what it looks like when you call a method of an object, look at console.log() -- that's how you call the log() method of the console object!)

25. Without modifying any of your previous code, change the penguin's name to "Penguin McPenguinFace" and then call your penguin's sayHello() function one more time to make sure it still works.

26. Write another method called fly, and inside that method, use an if / else statement to print "I can fly!" to the console if your penguin's canFly property is true, or "No flying for me!" if its canFly property is false.

Hint: Remember to use the very handy this keyword to access the object that your new method is currently attached to!

27. Call your penguin's fly() method and make sure it works!

28. Change the canFly property to true -- again, without modifying any of your previous code!

29. Now call your penguin's fly() method again and make sure it works as expected!

30. Write a for ... in loop to print each key to the console. (Hint: See this page for an example of this special type of loop.)

31. Write another for ... in loop to print the value of each key to the console. (Hint: You'll need to use bracket notation to access the values this way, instead of dot notation!)

✔️ SOLUTION for object review problems: https://repl.it/IlV2/7

Arrays inside objects

✏️ Write and test your answers for this section here: https://repl.it/IlVj/3

32. Add a new property to your penguin called favoriteFoods and set it equal to an array containing a list of three strings.

33. Access your penguin's second favorite food and print it to the console using console.log()

34. Create a new variable called firstFavFood and set it equal to the first item in your penguin's array of favorite foods.

35. Add another food to the end of the list.

36. Print the length of your penguin's favoriteFoods array to the console with console.log()

37. Without modifying any of your previous code, write a new line of code that changes the value of the last item in the list to "pineapples" (overwriting the previous value).

38. Create a new variable named lastFavFood that will always point to the last element of your penguin's favoriteFoods array, no matter how many items are in the list. (Hint: this is essentially the same problem as step 18 from above.)

39. Write a for loop to iterate through every food in your penguin's favoriteFood property and print each one to the console. (Hint: This loop will look exactly the same as the one you wrote for step 16 above, except now you're accessing the array as a property of an object.)

✔️ SOLUTION for arrays inside objects review problems: https://repl.it/IlVj/4

Objects inside other objects

✏️ Write and test your answers for this section here: https://repl.it/IlVr/4

It's cold at the South Pole, so let's give this penguin some clothes!

40. Add a new property to your penguin called outfit and set it equal to another object with the following properties: hat, shirt, pants, and shoes -- each property should have a string as its value! (I suggest you give it a baseball cap, Hawaiian shirt, cargo shorts, and flip-flops, because wouldn't that be ridiculous?)

41. Create a new variable called penguinHatType and set it equal to the value of the hat in your penguin's outfit! Then print your new variable to the console.

42. Without modifying any of your previous code, write one new line of code to add an accessory property to your penguin's outfit and set it equal to the string "pocket watch" -- because penguins are classy like that!

43. Write one more line of code to change the hat in your penguin's outfit to "top hat" and override the previous value. (Again, because penguins are classy!)

44. This penguin is a freelancer who always works from home, so it doesn't actually need to wear any pants! Let's delete the pants property from this penguin's outfit property. (Hint: see this page on the delete operator for examples.)

45. Write a for ... in loop to print the value of each piece of clothing in your penguin's outfit so you can see a list of clothing items in the console. (Hint: This is the same as step 31 from above, only now we're accessing values from a nested object!)

✔️ SOLUTION for arrays inside objects review problems: https://repl.it/IlVr/6

Objects inside arrays

✏️ Write and test your answers for this section here: https://repl.it/IlVy/4

For these last few challenges, I'll create three penguins for you to work with. Copy-paste this code snippet to the end of your code:

var gunter = {
  name: "Gunter",
  origin: "Adventure Time",
  canFly: false,
  sayHello: function () {
    console.log("QUACK!!!");
  }
};

var ramon = {
  name: "Ramón",
  origin: "Happy Feet",
  canFly: true,
  sayHello: function () {
    console.log("Estoy encantado de conocerle.");
  }
};

var fred = {
  name: "Fred",
  origin: "Sitting Ducks",
  canFly: false,
  sayHello: function () {
    console.log("Hi there!");
  }
};

46. Create a new variable named penguins and set it equal to an array that lists these three penguins! (Hint: remember you can put variable names inside an array, not just hard-coded values! And remember that variable names don't have quotes around them.)

47. Access the first penguin in the list and print it to the console using console.log() -- notice that you can see all the properties and methods of that object listed in the console! (Hint: remember that array indexes start counting at 0, not 1!)

48. Create a new variable called secondPenguin and set it equal to the second penguin in your penguins array.

49. Print to the console the name of the last penguin in the list.

50. Remember the penguin you created earlier, with the variable name of myPenguin? Add that penguin to the end of the penguins array!

51. Print the length of the penguins array to the console.

52. Write one more line of code to change the first penguin's canFly property to the value true (overriding its existing value).

53. Call the sayHello method of the first penguin in your penguins array!

54. Write a for loop to iterate through every penguin in the array and print the value of each penguin's name property to the console.

55. Write a for loop to call the sayHello method of every penguin in the array!

56. Write a for loop to iterate through every penguin in the array, and add a new property to each penguin called numberOfFeet with the value 2

57. Write another for loop to iterate through every penguin in the array, and for each penguin that can fly, print to the console a message containing the penguin's name and " can fly!" -- for example, "Gunter can fly!" or "Ramón can fly!" (Don't do anything for the penguins that cannot fly.)

🏆 Great work! You're well on your way towards earning your black belt as a JavaScript ninja!

📝 The rest of the solutions will be posted soon!

[LearningNerd]

Hi, team! I updated this challenge to make it easier for you to save your progress and submit solutions --
now there are links to REPL.it pages for you to write and test your code in. See the new instructions at the top. If anything isn't clear, please post a comment here!

Thanks @r7uaz0n for the suggestion! 👍

[kammitama5]

https://repl.it/IlVK/1
https://repl.it/IlV2/36
https://repl.it/IlVj/2
https://repl.it/IlVr/3
https://repl.it/IlVy/7

What are arrays in JavaScript and why are they useful?
1-A)
storing data of a certain type. Indexed. Can be sorted easily.

What are objects in JavaScript and why are they useful?
2-A)
Objects are like dictionaries in Python. Key/Value data structure

What are a couple of key differences between objects and arrays? (And can you find any good examples or metaphors that illustrate the difference?)
3-A)
Objects -> key/value accessors, can be of different types eg name : "Bob", age : 5
Arrays -> typically of same time (esp in strongly typed languages like C++ where you'd have to allocate ahead of time the space needed and specify type for your array)

What is the index of an array? What is it used for?
4-A)
Like a Dewey Decimal system for an array. Can use it to access or find an element. Also can help for things like sorting, removing, etc.

What is a property?
5-A)
Property -> association between key and value

What is a method?
6-A)
property that contains a function def
wanton : function() {return "Chirp"; }

[naoever]

1. What are arrays in JavaScript and why are they useful?
   1-A)
   A data type specifically for storing sequences of values.We can work with a chunk of digital data by accessing it.

2. What are objects in JavaScript and why are they useful?
   2-A)
   Objects allow us to group values together so that we can build more complex structures.

3. What are a couple of key differences between objects and arrays? (And can you find any good examples or metaphors that illustrate the difference?)
   3-A)
   Objects allow us to access data by properties.
   Arrays allow us to access data by index numbers.

4. What is the index of an array? What is it used for?
   4-A)
   Index allow us to refer to an array element.

5. What is a property?
   5-A)
   Property allows us to refer to / set up the Objects.
   If value is a vehicle, property is a parking spot.

6. What is a method?
   6-A)
   Method is a command to the Objects.

Review of Arrays
https://repl.it/IlVK/27

Review of Objects
https://repl.it/IlV2/28

Arrays inside objects
https://repl.it/IlVj/16

Objects inside objects
https://repl.it/IlVj/20

[r7uaz0n]

• 1. What are arrays in JavaScript and why are they useful?

Arrays store multiple values in a single variable. It is useful because it can hold more than one value at time.

• 2. What are objects in JavaScript and why are they useful?

Objects are variables in JavaScript that are containers for named values, called properties and methods. They are useful because they allow us to group values, including other objects, together to build more complex structures.

https://www.w3schools.com/js/js_object_definition.asp
https://www.sololearn.com/Play/JavaScript
http://eloquentjavascript.net/04_data.html

• 3. What are a couple of key differences between objects and arrays? (And can you find any good examples or metaphors that illustrate the difference?)

Values inside objects are accessed using properties/name/key.

var person = {
     name: "John", 
     age: 31, 
     favColor: "green", 
     height: 183
};
var x = person.age;
var y = person['age'];

Values inside arrays are accessed using an index. Arrays are good for list of things in a certain order.

var courses = new Array("HTML", "CSS", "JS"); 
var course = courses[0]; // HTML

• 4. What is the index of an array? What is it used for?

The index is a number used to access a stored value in an array.

• 5. What is a property?

A property is the key value pairs associated with a JavaScript object.
Properties can usually be changed, added, and deleted, but some are read only.

https://www.w3schools.com/js/js_properties.asp

• 6. What is a method?

A method is a function that is stored as an object property.
https://www.sololearn.com/Play/JavaScript

==========================================
Review of arrays
https://repl.it/IlVK/31

Review of objects
https://repl.it/IlV2/34

Arrays inside objects
https://repl.it/IlVj/14

Objects inside objects
https://repl.it/IlVr/8

Objects inside arrays (with corrections)
https://repl.it/IlVy/31

[ssiarules]

1. What are arrays in JavaScript and why are they useful?

2. What are objects in JavaScript and why are they useful?
   Objects are

3. What are a couple of key differences between objects and arrays? (And can you find any good examples or metaphors that illustrate the difference?)
   Arrays used indexes to locate its items and
   objects are more flexible on how you call your items.
   Array are for things that go in a certain order
   Objects does not have an order for their items.

4. What is the index of an array? What is it used for?
   Index allows you to locate a specific item in your arrays

5. What is a property?
   **key value pairs it points to a value. A label you put on a valule
   a property is the value associated with a JavaScipt object
   Properties can be changed, deleted, added **

6. What is a method?
   **Is a function that takes in
   example console.log() so .log() is the method
   a method is a function that is stored as an object property **

Objects solutions.
https://repl.it/IlV2/30

Arrays inside objects:
https://repl.it/IlVj/9

Objects inside objects
https://repl.it/IlVr/12

[mendavia]

Review of Arrays: https://repl.it/IlVK/40
Rest of problems: https://repl.it/IlV2/41

[katiewest820]

Review of Arrays:
https://repl.it/IlVK/52

Review of Objects:
https://repl.it/IlV2/50

Arrays inside objects:
https://repl.it/IlVj/33

Objects inside objects:
https://repl.it/IlVr/16

[CARSsimoes]

Review of Arrays:
https://repl.it/@CARSsimoes/HelplessReasonableExponents

Review of Objects:
https://repl.it/@CARSsimoes/Objects

Review of Arrays inside Objects:
https://repl.it/@CARSsimoes/Arrays-inside-Objects

Review of Objects inside objects and arrays:
https://repl.it/@CARSsimoes/Objects-inside-objects-and-arrays

[Spitha]

https://repl.it/@Spitha/Review-of-arrays
https://repl.it/@Spitha/Review-of-objects
https://repl.it/@Spitha/Arrays-inside-objects
https://repl.it/@Spitha/Objects-inside-other-objects
https://repl.it/@Spitha/Objects-Inside-Arrays

[harshamali31]

1. What are arrays in JavaScript and why are they useful?

• Array stores the multiple elements in single variable. The data stored in array is indexed so it makes sorting or accessing of data more easy.

2. What are objects in JavaScript and why are they useful?
   -Object is unordered collection of related data in key-value pair format. It allow us to build the more complex structure.

3. What are a couple of key differences between objects and arrays? (And can you find any good examples or metaphors that illustrate the difference?)

• i. Elements of the arrays can be accessed by its index, however data of the object can be access by its properties/name/keys.
  ii. Arrays are the ordered collection of data, however objects are the unordered collection of related data.
  Example:
  Array : var student = ['ABC','XYZ','PQR'];
  Accessing array element : student[1];
  Result : XYZ

  Object : var student = {
  Name: 'ABC',
  Age : '14'
  }
  Accessing object data : student[Name];
  Result : ABC

4. What is the index of an array? What is it used for?

• Index is a number used to access the data from an array.

5. What is a property?

• These are the values associated with the javaScript objects.

6. What is a method?

• Method is a function that belongs to the object.

[zeeatwork]

1. What are arrays in JavaScript and why are they useful?
An array is a type of variable used to store a list of elements.

2. What are objects in JavaScript and why are they useful?
Objects are an unordered collection of items stored using keys to "hold" a value.

3. What are a couple of key differences between objects and arrays? (And can you find any good examples or metaphors that illustrate the difference?)
An array holds a more linear list than the loose grouping that objects hold. The syntax is also slightly different. Both separate values with a comma, but objects use colons to identify the key to its value. The best metaphor that I can use is the difference between a Christmas list and family's wrapped and tagged toys under a Christmas tree. In my opinion objects can hold more varied, robust information that can be traced to a source and easily searchable and groupable by the value and the key.

4. What is the index of an array? What is it used for?
The index of an array notes the position where an element is stored. It can be used to "call" your data by its order with using or knowing its name. Data is arranged for spot "0".

5. What is a property?
A property is a value associated with an object.

6. What is a method?
   Methods are actions that can be performed on javascript objects.

7. thru 18. See attached.
   https://repl.it/join/ckmfqyqd-zenziali

8. thru 31. See link
   https://repl.it/join/pfuhemdh-zenziali

[Rozbarnes]

1. What are arrays in JavaScript and why are they useful?
   An array is an ordered collection of data (either primitive or object depending upon the language). Arrays are used to store multiple values in a single variable. This is compared to a variable that can store only one value.

2. What are objects in JavaScript and why are they useful? In JavaScript, objects are king. It is said that "If you understand objects, you understand JavaScript." For example, In JavaScript, almost "everything" is an object.

• Booleans can be objects (if defined with the new keyword)
• Numbers can be objects (if defined with the new keyword)
• Strings can be objects (if defined with the new keyword)
• Dates are always objects
• Maths are always objects
• Regular expressions are always objects
• Arrays are always objects
• Functions are always objects
• Objects are always objects
• All JavaScript values, except primitives, are objects.

3. What are a couple of key differences between objects and arrays? (And can you find any good examples or metaphors that illustrate the difference?) We can find the length of an item only if we know whether it is an array or an object. Array items are accessed using indices
   Format [ , , , ]; Example [1, 2, 3, 4, 5]. Arrays can contain objects, strings, numbers, arrays & boolean. Objects are a collection of properties, and a property is an association between a name (or key) and a value. A property’s value can be a function, in which case the property is known as a method. Object properties are accessed using keys.

4. What is the index of an array? What is it used for? IndexOf() searches for an item.

5. What is a property? A JavaScript property is a characteristic of an object, often describing attributes associated with a data structure.

There are two kinds of properties: Instance properties hold data that are specific to a given object instance. Static properties hold data that are shared among all object instances. A property has a name (a string) and a value (primitive, method, or object reference).

6. What is a method? A method is a function which is a property of an object. There are two kind of methods: Instance Methods which are built-in tasks performed by an object instance, or Static Methods which are tasks that are called directly on an object constructor.

[SharettaMartin]

1. What are arrays in JavaScript and why are they useful?
   An ARRAY is a structure that stores a collection of elements of the same type. They are useful because you can store multiple items in a variable.

2. What are objects in JavaScript and why are they useful?
   OBJECTS are containers that store a collection of properties, usually variables and functions. It's an "unordered collection of related data" (GeeksforGeeks) and they are used to represent a "thing" in your code (dev.to).

3. What are a couple of key differences between objects and arrays? (And can you find any good examples or metaphors that illustrate the difference?) Arrays create and store a list of data and the object is the "thing" in the code with characteristics.

4. What is the index of an array? What is it used for? The index is the pointer in the array and it is used to show which element in the array will be used.

5. What is a property? A property is a characteristic or a value associated with an object and it describes the attributes of the object.

6. What is a method? A method is the object reference to a function. It's the action that can be performed on the object. W3schools)

[dnyanesh-ghodse]

q7-q18 ------ https://replit.com/@dghodse/Arrays#index.js
q19- q57 ------- https://replit.com/@dghodse/Objects#index.js

[Fash-me]

1Q. What are arrays in JavaScript and why are they useful?
A) ARRAYS are collection of ordered items. Just like storing items in a save that are numbered. Arrays are used when there is need to store a lot of ordered items or variables.

2Q. What are objects in JavaScript and why are they useful?
A) OBJECTS are collection of data or information, just like an array but here there are keys that values are signed to. Object is used to store data.

3Q. What are a couple of key differences between objects and arrays? (And can you find any good examples or metaphors that illustrate the difference?)
A) ARRAYS are introduced with square brackets, While OBJECTS are introduced with curly braces. OBJECTS has keys/properties and values but ARRAYS does not.

4Q. What is the index of an array? What is it used for?
A) An INDEX is the way items are numbered in an arrays. It is used to identify items in arrays.

5Q. What is a property?
A) PROPERTY is associated with Objects, these are the keys that holds a value.

6Q. What is a method?
A) METHOD is the action that is performed on an object.

LINK FOR "REVIEW OF ARRAYS" : https://replit.com/@Fashme/Review-of-Arrays#index.js

[deepikaroyal890]

colors = ['red', 'yellow','blue','black','lilac']
console.log(colors[0]);
console.log(colors[2]);
colors.splice(4,1,'ultraviolet');
console.log(colors);
fourthColor = colors[3];
console.log(fourthColor);
colors.splice(colors.length,0,'Burgundy');
console.log(colors);
colors.unshift('orange');
console.log(colors);
console.log(colors.length);
colors.pop();
console.log(colors);
for(let i in colors){
console.log(colors[i]);
}

for(let i in colors){

console.log(i+' '+colors[i]);
}
let lastColor = colors[colors.length-1];
console.log(lastColor);

[deepikaroyal890]

var myPenguin = {
character: "Tootsie the Penguin",
origin: "Donald Duck",
notes: "A baby penguin in the classic 1939 cartoon "Donald's Penguin"."
}
console.log('Hello, I am a penguin and my name is '+ myPenguin.origin );

myPenguin.canFly = 'false';

myPenguin.chirp = function(){console.log("CHIRP CHIRP! Is this what penguins sound like?");
};
myPenguin.sayHello = function(){console.log("Hello, I am a penguin and my name is "+this.origin);
};

myPenguin.sayHello();

myPenguin.origin = "Penguin McPenguinFace";
myPenguin.sayHello();
console.log(myPenguin);

myPenguin.fly = function(){
if(this.canFly=='true'){
console.log("I can fly!");
}
else{
console.log("No flying for me!");
}
}
myPenguin.fly();

myPenguin.canFly = 'true';
myPenguin.fly();

for(let i in myPenguin){
console.log(i);
}

for(let i in myPenguin){
console.log(myPenguin[i]);
}

[deepikaroyal890]

//array inside object:

myPenguin.favoriteFoods = ['krill','fish','squids'];

console.log(myPenguin.favoriteFoods[1]);

myPenguin.firstFavFood = myPenguin.favoriteFoods[0];

myPenguin.favoriteFoods.push('fish2');

console.log(myPenguin.favoriteFoods.length);

myPenguin.favoriteFoods[3] = 'pineapples';
console.log(myPenguin);
myPenguin.lastFavFood = myPenguin.favoriteFoods[myPenguin.favoriteFoods.length-1];
console.log(myPenguin);

for(let i=0 ;i <myPenguin.favoriteFoods.length;i++){
console.log(myPenguin.favoriteFoods[i]);
}

[deepikaroyal890]

//Objects inside other objects:

myPenguin.outfit = {
hat: "baseball cap",
shirt: "Hawaiian shirt",
pants: "cargo shorts",
shoes: "flip-flops"
};

console.log(myPenguin);

myPenguin.penguinHatType = myPenguin.outfit.hat;
console.log(myPenguin.penguinHatType);
myPenguin.outfit.accessory = "pocket watch";
console.log(myPenguin);
myPenguin.outfit.hat = 'top hat';
console.log(myPenguin);
delete myPenguin.outfit.pants;
console.log(myPenguin);

for(let i in myPenguin.outfit){
console.log(myPenguin.outfit[i]);
}