GithubHelp home page GithubHelp logo

todaysmood's Introduction

Today's Mood

An exercise in using dynamic object keys to access data.

Your Structure

This problem has the same basic setup as the Pursuit curriculum usually does, with the small added wrinkle that we haven't written the start of the function for you.

Your Tools

  • Run npm install to install Jest. Then you can run npm test or (better yet) npm run watch in your terminal to get tests.
  • Read the JSDoc thoroughly!
  • The test file is always your source of truth.
  • The section below has lots of conceptual help.

Your Task

Write the function described in getTodaysFeeling.js.

You can solve this problem using if/else chains or a switch statement, but it can be solved in one line.

Let's look at the following example.

let name = "colin";
const greetings = {
  bill: "Good morning!",
  colin: "Good morning good morning good morning.",
  adrian: "Good morning, Vietnam!",
  truman:
    "Good morning. And in case I don't see you, good afternoon, good evening, and good night.",
};

You could use an if/else chain like so:

if (name === "colin") {
  console.log(greetings.colin);
} else if (name === "bill") {
  console.log(greetings.bill);
} else if (name === "adrian") {
  console.log(greetings.adrian);
} else if (name === "truman") {
  console.log(greetings.truman);
}

//> "Good morning good morning good morning."

But this doesn't scale very well. What if there are 10 greetings? 100? Don't write 200 lines of code! Write one.

How? Leverage the fact that the name variable holds the name of the key in greetings whose value we want.

Now, we can't access it via dot notation, because then we'd be looking for a property literally called name.

console.log(greetings.name);
//> undefined

Instead, what we want is to use bracket notation, which is JavaScript's syntax for, "Don't look up the key with this name, but with the name of whatever this JavaScript evaluates to."

console.log(greetings[name]);
//> "Good morning good morning good morning."
name = "adrian";
console.log(greetings[name]);
//> "Good morning, Vietnam!"

A Slightly More Complex Example

The bracket notation doesn't have to hold a variable. It can hold any JavaScript expression, evaluate it, and look up that key.

let name = "Colin Jaffe";
const greetings = {
  bill: "Good morning!",
  colin: "Good morning good morning good morning.",
  adrian: "Good morning, Vietnam!",
  truman:
    "Good morning. And in case I don't see you, good afternoon, good evening, and good night.",
};

Now, to get the key colin from the string 'Colin Jaffe', we're going to have to lop off the last name and lower case the first.

Let's take it step by step.

First, we could see if we can get the first name only. String.prototype.split can give us an array out of string, we just need to tell it when to decide to start a new array element. Passing a ' ' separator can do that for us.

console.log(name.split(" "));
//> [ 'Colin', 'Jaffe' ]

Okay, so we could grab the first index of that array to get us almost the string we want, and then lowercase it.

console.log(name.split(" ")[0].toLowerCase());
//> "colin"

Great! Now let's throw that into bracket notation to access the object's value at that property.

console.log(greetings[name.split(" ")[0].toLowerCase()]);
//> "Good morning good morning good morning."

And just to show that this is happening dynamically:

name = "Truman Burbank";
console.log(greetings[name.split(" ")[0].toLowerCase()]);
//> "Good morning. And in case I don't see you, good afternoon, good evening, and good night."

It's all just depending on what value is held in name! This will work with 100 names or 100,000 names, and it's a lot less code.

Such Messy Code Might Look Better In A Function

Which we could call right from the bracket notation.

function getKeyNameFromFullName(fullName) {
  return fullName.split(" ")[0].toLowerCase();
}

console.log(greetings[getKeyNameFromFullName(name)]);
//> "Good morning good morning good morning."

Or even save the return value from calling that function, and use that as the key.

function getKeyNameFromFullName(fullName) {
  return fullName.split(" ")[0].toLowerCase();
}

const keyName = getKeyNameFromFullName(name);
console.log(greetings[keyName]);
//> "Good morning good morning good morning."

It all depends on how step-by-step you want to do it. The one-liner at the end of the previous function works just fine too, and learning to read complex evaluations is highly valuable.

This Is One Way To Avoid Huge Amounts Of Code Devoted To Logic

Using data to look up what path you should take is a design pattern that can simplify your code greatly. Try it in the function tested and in related assignments, and explore it as an architecture moving forward.

todaysmood's People

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.