mmeigooni/intro-objects.md

## intro-objects.md

      
    Raw
  

              intro-objects.md
            
          
    Introduction to Objects

Lesson

Slides
Exercises

Basic Requirements

Syntax & Style

Fix the syntax & style issues with the three objects below:
{firstName "Josh", lastname: "Lehman" }
{a: 1, b:2 c: 3 d 4}
{
    animal: "dog"
    noise: "bark",
        age: 3,
  type "Labrador"
     color: "Yellow",
}
Creating Objects


Create an object that represents you. It should contain your first name,
last name, age and hometown.


Add three more key/value pairs to your object that represent other attributes
of yourself. Ideas include (but are not limited to):

Favorite TV Shows/Movies/Sports/Activities etc.
Occupation
Date of Birth
Pets (number of pets, names of pets, etc.)

HINT: You can just modify the object that you created before.


The values in an object can be objects themselves, and in fact, this is a
very common pattern. For example, consider the following object that
represents a computer:
var computer = {
  brand: "Apple",
  year: 2014,
  model: "MacBook Pro",
  size: "15-inch",
  specs: {
    processor: "2.3GHz Intel Core i7",
    memory: "16 GB 1600 MHz DDR3",
    graphics: "Intel Iris Pro 1536 MB"
  }
}
You should notice that the specs key in the computer object is an object
itself! We could access information about the processor using dot-notation
like so:
computer.specs.processor; // => "2.3GHz Intel Core i7"
Change your object to have a name key, the value of which is an object
– this object should have first, last and middle keys
containing your first, last, and middle names respectively (make sure to
remove the firstName and lastName keys that you added before). You
should be able to access your last name afterwards like so (assuming your
object is called you):
you.name.last; // => YOUR LAST NAME


Look up your favorite movie on IMDB, and make an object that represents some
aspects of that movie, e.g.:

Title
Director
Year released
Rating
Actors

HINT: Most movies have multiple actors. What data-structure do we use to
represent a collection of similar things?


Creating New Key/Value Pairs

Perform these exercises in a console!


Create a new empty object in your console called obj like this:
var obj = {};


Add a new key/value pair to the object obj by assigning a new value to a
new key like so:
obj.hello = "world";
obj["number"] = 25;


Now, check the value of obj in the console and ensure that it has the two
key/value pairs added above. This is how we create new key/value pairs in
existing objects.


In the console attached to your main.js file, add a favoriteColor
key/value pair to the object that represents you.


Accessing Values by Key


Fix the attempts to access values in the person object:
var key = "name";
var person = {
    name: "Alyssa P. Hacker",
    age: 26,
    hometown: "somewhere"
};
person[age]; // => 26
person.key; // => "Alyssa P. Hacker"


Write a function fullName that takes a person object as an argument, and
returns that person's full name as a string. By person object, we mean an
object that has the structure of the object you created to represent
yourself above, for example:
var alyssa = {
  name: {
    first: "Alyssa",
    middle: "P.",
    last: "Hacker"
  },
  age: 26
};

function fullName(person) {
  // TODO: your code here
}

fullName(alyssa); // => "Alyssa P. Hacker"


What happens if you pass a person object to fullName that doesn't have a
middle name?
fullName({name: {first: "John", last: "Doe"}}); // => "John Doe"
Your fullName function should work correctly regardless of whether or not
the person has a middle name -- if it doesn't produce the output shown above
when given the object {name: {first: "John", last: "Doe"}}, fix it so that
it does.


We often deal with arrays of objects; below is an example of an array of
objects, where each object represents a person:
var people = [
  {name: {first: "Alyssa", middle: "P.", last: "Hacker"}, age: 26},
  {name: {first: "Ben", last: "Bitdiddle"}, age: 34},
  {name: {first: "Eva", middle: "Lu", last: "Ator"}, age: 40},
  {name: {first: "Lem", middle: "E.", last: "Tweakit"}, age: 45},
  {name: {first: "Louis", last: "Reasoner"}, age: 21}
];

Add the object representing yourself to this array of people (if your
name key does not have the same "shape" as the ones above, make sure you
change it to look like these).
Write a function that, when passed an array of people (person objects) as
an argument, returns an array of their full names. Can you make use of
your fullName function here?
Write a function that finds the average age of the people array.
Write a function that, when given people and an age as arguments,
returns an array of just the people that are older than the specified age.


Iterating over Keys & Values


The following object has a number of key/value pairs that need to be removed:
var dirtyObject = {
  _fht: 192492,
  name: "Alyssa P. Hacker",
  age: 26,
  _byz: 939205,
  _ttrs: 510852
}
function clean(obj) {
  // ...
}
clean(dirtyObject); // => {name: "Alyssa P. Hacker", age: 26}
The function clean should accept an object as an argument and return a new
object that has all of the key/value pairs of its parameter except for those
that begin with _.


Write a function removeOddValues that takes an object as an argument and
returns an object with all key/value pairs removed for which the value holds
an odd number. You'll need to use the `typeof` operator to first check that
the values are numbers:
typeof "Hello"
typeof 3


More Practice


Look around at various physical objects in the room, or think about
activities that you enjoy. How would you represent this things as objects?
Practice creating objects to represent different things. Some ideas include:

Your favorite drink
A recipe
Sports or hobbies
Your car/bike/hoverboard/vehicle-like thing
Literally anything


Write a function countWords that, when given a string as an argument,
returns an object where keys are the words in the string, and values
are the number of occurrences of that word within the string:
function countWords(s) {
// ...
}
countWords("hello hello"); // => {"hello": 2}
countWords("Hello hello"); // => {"Hello": 1, "hello": 1}
countWords("The quick brown"); // => {"The": 1, "quick": 1, "brown": 1}
HINT: You will want to make use of the string method split. Try
\"Hello hello".split(" ") at a console to see how it works.

Modify countWords to be case insensitive by using the following string
method (experiment at a console with it to learn its behavior):

"HElLo".toLowerCase(); // => ???


Write a function countCharacters that, when given a string as an argument,
returns an object containing counts of the ocurrences of each character in
the string.
function countCharacters(s) {
  // ...
}
countCharacters("hello"); // => {"h": 1, "e": 1, "l": 2, "o": 1}
HINT: You will want to make use of the string method split. Try
\"hello".split("") at a console to see how it works.


Write a function select that accepts two arguments: an object and an
array. The array should contain names of keys that will be selected from
the object:
function select(obj, keys) {
  // ...
}
select({a: 1, b: 2, c: 3}, ["a"]); // => {a: 1}
select({a: 1, b: 2, c: 3}, ["a", "c"]); // => {a: 1, c: 3}
select({a: 1, b: 2, c: 3}, ["a", "c", "d"]); // => {a: 1, c: 3}


Write a function extends that accepts two objects as arguments, and
extends all of the key/value pairs of the second one to the first one.
function extend(obj1, obj2) {
  // ...
}
extend({a: 1}, {b: 2}); // => {a: 1, b: 2}
extend({a: 1, c: 3}, {b: 2, c: 4}); // => {a: 1, b: 2, c: 4}


Advanced


The function Object.keys returns an array of an object's keys. Experiment
with it at the console like this:
Object.keys({a: 1, b: 2});
Using this property, write versions of the above functions using repetition
through function invocation (i.e. recursion)


The function JSON.stringify turns arbitrary JavaScript data structures
(arrays and objects) into strings. Try it out in a console like this:
JSON.stringify({a: 1, b: 2, c: ["dog", "cat", "zebra"], d: true});
JSON.stringify([5, 7, 2, 4, 0, 20]);
var people = [
   {name: {first: "Alyssa", middle: "P.", last: "Hacker"}, age: 26},
   {name: {first: "Ben", last: "Bitdiddle"}, age: 34},
   {name: {first: "Eva", middle: "Lu", last: "Ator"}, age: 40},
   {name: {first: "Lem", middle: "E.", last: "Tweakit"}, age: 45},
   {name: {first: "Louis", last: "Reasoner"}, age: 21}
];
JSON.stringify(people);
Write a function stringify that works exactly like JSON.stringify.
HINT: This will be much easier to accomplish with repetition through
function invocation than with iteration.