JavaScript Objects

Elvenware Logo

TOC

Java Script Objects

In this assignment we will learn about JavaScript objects.

These slide decks have useful information in them:

Also see the section of Elvenware on Object Literals, and consider reading the entire opening sections of the Elvenware JavaScript Objects document:

The Elvenware JavaScript Objects document is a primary reference for this assignment. Note also, that in this exercise, we are mostly working with object literals, not function or constructor objects.

Part One

Create or use a folder called one of the following:

Inside it create a single file called work.js. In that file build a JavaScript object literal called person with two properties:

Set them to your first and last names. Write the two properties to the console with console.log().

NOTE: You do not have to run this code from an HTML file or as an Express program in a browser. But if you want to do things that way, I will not take off for it. But really, it is simpler for me if this program just stays in a single nodejs file called work.js that runs from the command line. Some students in advanced courses might want to use other tools such as EsLint or Prettier.

Now run it by typing something like:

cd Week02-JavaScriptObjects
node work.js

The output should look something like this:

George
Washington

Part Two

Add a fullName method to the person object. Make it part of the Object literal. The method should concatenate the first and last names, and return the result. Call the method and print out the return value with console.log.

node work.js
George
Washington
George Washington

Part Three

In the same file, using JavaScript Object Literal syntax, create a new object called calculator.

Inside the object literal, create two properties called:

Initialize these properties to -1, much as we initialized the name property of person to 'Suzie' or some similar name in the first of the two examples in [Part Zero](#Part Zero). Of course, this property is of type number, not of type string.

HINT: See this slide for help understanding what I want.

Inside your program, but outside the object literal declaration, set the properties to the number of letters in your first and last name using dot notation:

calculator.operand01 = person.firstName.length;
etc...

Use console.log to display the values of operand01 and operand02.

Simple Math

Add two methods with zero parameters that operate on calculator.operand01 and calculator.operand02:

Put add and subtract inside the object literal. Implement a multiply method outside the object literal declaration using dot notation:

var calculator = {
    // CODE OMITTED HERE
    // PUT ADD AND SUBTRACT IN HERE
};

calculator.multiply = etc.... // IMPLEMENT MULTIPLY HERE

The multiply function should take two parameters and return their product. When you call multiply, pass in the operand01 and operand02 properties of the calculator object.

Print the output. For instance, since my name is Charlie Calvert:

14
0
49

Gussie it up

Add this method:

function divider(title) {
    console.log("\n====================================");
    console.log(title);
    console.log("====================================\n");
}

Call it like this:

divider('Calculator');
console.log('operand01 =', calculator.operand01);

And produced output like this:

$ node work.js
====================================
Person
====================================

First Name: George
Last Name: Washington
Full Name: George Washington

====================================
Calculator
====================================

operand01 is the length of firstName: 6
operand02 is the length of lastName: 10
Add length of first and lastNames:  16
Subtract length of first and lastNames:  -4
Multiply length of first anhd lastNames:  60

Unless your name is George Washington, your output will probably differ, but this should give you some general idea of what to produce.

Format and Check

Code is not complete until it is properly formatted and free of at least certain obvious errors. In Pristine Lubuntu there is a script called get-gist. Run it and select the first item from the menu.

To get started, type get-gist and press enter. Pick the first item from the menu by typing the letter a:

Gists
  a) Run ESLintRc and Prettier (cdef)
  b) ElfDebugEnzyme
  c) .eslintrc
  d) .eslintignore
  e) prettier
  f) .prettierrc
  g) Default React Component
  h) Setup React Native Enzyme Npm
  i) Setup React Native Enzyme Yarn
  j) ElvenLogger
  k) Elven Node systemd Tools
  l) Elven Create Concurrently
  x) Exit

Now press x to exit the menu.

When you are done your directory might look something like this:

$ ll
total 44
drwxrwxr-x  3 charlie charlie 4096 Apr 10 20:12 ./
drwxrwxr-x 19 charlie charlie 4096 Jun  2  2018 ../
-rw-r--r--  1 charlie charlie  212 Apr 10 20:12 .eslintignore
-rw-r--r--  1 charlie charlie  988 Apr 10 20:12 .eslintrc.json
drwxrwxr-x  3 charlie charlie 4096 Nov 30 17:38 .idea/
-rwxr-xr-x  1 charlie charlie   48 Apr 10 20:12 installEslintPackages*
-rwxr-xr-x  1 charlie charlie  219 Apr 10 20:12 prettier*
-rw-r--r--  1 charlie charlie   55 Apr 10 20:12 .prettierignore
-rw-r--r--  1 charlie charlie   46 Apr 10 20:12 .prettierrc
-rwxrwxr-x  1 charlie charlie 1490 Apr 20  2018 work.js*

Run prettier like this:

./prettier
work.js 42ms

Now run eslint by typing eslint followed by a space and period and then hitting enter:

eslint .

If eslint spits out errors, see if you can fix them.

If you want to learn more, review these assignments, but don't try to turn them in. Just read them and see if you can make any sense of my hurried notes:

Setup Unit Test

Run npm init and then fill in the fields a bit like I do in this listing:

npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (javascriptobjects)
version: (1.0.0)
description: Learn JavaScript Objects
entry point: (work.js)
test command: jest
git repository: https://github.com/charliecalvert/prog272-calvert-2019
keywords: JavaScript Objects
author: Charlie Calvert
license: (ISC) MIT

Now install Jest:

npm install jest

You can also type:

npm i jest

Both commands do the same thing.

Add this to your package.json file:

"scripts": {
  "start": "node work.js",
  "test": "jest"
},

Your package.json file might now look a bit like this:

{
  "name": "javascriptobjects",
  "version": "1.0.0",
  "description": "Learn JavaScript Objects",
  "main": "work.js",
  "scripts": {
    "start": "node work.js",
    "test": "jest"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/charliecalvert/prog272-calvert-2019.git"
  },
  "keywords": [
    "JavaScript",
    "Objects"
  ],
  "author": "Charlie Calvert",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/charliecalvert/prog272-calvert-2019/issues"
  },
  "homepage": "https://github.com/charliecalvert/prog272-calvert-2019#readme",
  "dependencies": {
    "jest": "^24.7.1"
  }
}

Notice the scripts and dependencies properties. Notice also that JSON is nothing but a simple JavaScript object.

Write the Test

At the bottom of work.js add this line:

module.exports = calculator;

This gives us access to the calculator object from outside of work.js. More explicitly, it exports the calculator object from the work.js module. Below you will see how to import it into another module using require. (For now, you can think of module and the words JavaScript file as being nearly synonymous terms.)

Create a file called work.test.js in the same directory as work.js:

const calculator = require('./work');

test('proves that multiply returns 24 if passed 2 and 12', () => {
    expect(calculator.multiply(12, 2)).toBe(24);
});

This code first uses require to import the calculator object from work.js and then runs a test against it proving that its multiply method works correctly.

Because of the way we have set this up, we get a lot of extraneous output from our console.log statements. But if you ignore them for now, the output looks a bit like this:

$ npm test

> javascriptobjects@1.0.0 test /media/charlie/elfdisk/Git/writings/UnitTests/Js/JavaScriptObjects
> jest

 PASS  ./work.test.js
  ✓ proves that multiply returns 24 if passed 2 and 12 (2ms)

  console.log work.js:39

    ====================================

  console.log work.js:40
    Person

  console.log work.js:41
    ====================================


  console.log work.js:14
    First Name: George

   // LOTS OF OUTPUT OMITTED HERE

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.674s, estimated 1s
Ran all test suites.

Turn it in

Save your work to your repository. Submit the url of your project and/or the directory in which you did your work.

Take a screenshot of the output of your program and attach it to the assignment when you turn it in.

In summary:

If you unclear what all this means, look at the JavaScript Basics slide deck again.

Hint for Linux Users

You can put a hash bang at the top of a file like work.js:

#!/usr/bin/env node

var person = {
    etc...
}

Then mark it as executable:

chmod +x work.js

Now you can start it like this:

./work.js