smcalilly / javascript-cheat-sheet Goto Github PK

In the array example, is this line friends.forEach(function (friend) { creating a new function or is that referencing the function that it's enclosed in?

yeah, that's creating a new anonymous function for each object as it goes through the loop. each object will be assigned to the variable "friend" when the anonymous function executes. whenever it's done executing, that variable is basically reassigned to the next object because it's scoped within the anonymous function.

i think there could be a section on anonymous functions and callbacks

from lee:

Say Hello

Love the link to the repl that had the code already loaded in. Very nice example. I tried running it in my browser and got confused. Here's a screenshot of the error I was getting:

Screen Shot 2021-02-04 at 10 37 20 AM

So, this sentence is much more vague to a noob than you might realize:
"You can also open up your browser's developer tools and click console, then copy/paste the code into the console like you would a Ruby or Python console."

My error was I stupidly didn't realize I had to call the function with the name "Sylvia" in it. I thought I could just run the function and manually insert the variable. I think a step-by-step in really obvious illustration of how to start using the console in the browser at a very basic level would be good to add here. (Be happy to add it.)

When you introduce the concept of an object I found it helpful to play around with sayHello in the repl to when following along the Mozilla article you link to. Might want to add a real illustration here where the reader runs object.getPrototypeOf(sayHello) and sayHello.prototype. That drove home what a prototype is for me. It's like a template for an object. A prototype is like a "class" in Ruby I think. At least it seems like the same concept as something like say_hello.class which if you went far enough up the chain ruby you'd arrive at method the same way sayHello.prototype returns function

some running questions that he had and might could be answered:

Questions at this point:

• Do you say "declaring" a function? Is that another way of saying, "defining" a function?

• What is the difference between function and a constant?

  • at this point I'm imagining that a function is a like a ruby block that accepts parameters (aka arguments) and a constant is what? In ruby a constant is usually just used for things like a string for a global variable such as PRODUCTION_DOMAIN = "google.com", etc.

• In the array example, is this line friends.forEach(function (friend) { creating a new function or is that referencing the function that it's enclosed in?

• are all javascript constants (const) objects? Or is it just that an object can be a constant and a constant could be an object or a primitive?

• In this section, "Use an object as a function argument" would it be correct to call cat a "pointer"? As in it can be named anything you want because it is just pointing to the object you're passing to the function?

Lee note:

Also, would like to know what YOUR opinion on the syntax you prefer to use at this point in 2021. Is there a React/ES6 style that makes the most sense to you? If so, tell me and why. For instance, I have thought way too much about when to use single vs. double quotes in Ruby, but for good reason.

Lee note

Also, the first two ways in your repl of defining a function make sense, but then introducing a "const" and an "arrow" function I think need to be explained at that point. I've seen lots of these arrow functions and don't know what they mean. I don't think it's too much to introduce at first, it's just breaking down every part of this first example and explaining every little detail in the most basic terms so that all of the code in your first example is understood before moving on.

Also I think this needs to be addressed at this point. Here's a quote from the tutorial you link to:

"It is easy to confuse the function declaration and function expression. They look very similar but produce functions with different properties."

That has def caused me a lot of confusion so far.

...

Re: Multiple ways of defining a function
This is so crucial to a noob it deserves it's on headline and section:

"Javascript functions can be defined several different ways, using different syntax. Here are examples of different syntaxes which do the same thing. This is outside of this guide, but you should at least know this variety exists. (For further reading.)"

The code examples in the repl need to go directly in the body of the page.

Destructuring in the wild section.

What the hell is a props. You just mention that React might have a props, but it doesn't look like a destructured object (inside the brackets) like the previous example. Why does React use "props". What is props?

Is props just the name of an object like cat, but just a name that React chooses to use? What is more common in React apps? To see props.name or to just destructure the object so you don't even see props. Is there any reason why I need to use props in my react app? Or could I just get the data (from a CMS graphql query for instance) and put it into an object with any name (like cat) or just skip the naming part and destructure it directly? Or is there a good reason to use props with React?

Need more clarity on the React concept of props. I do think it's good to introduce here because that is what you're gonna see a ton of when you start googling code examples, but some more explanation is needed.

Objects section.

You say, "An object is a key/value pair."

Is an object just one single key/value pair or a "collection" of key/value pairs? Or a collection of "properties"? A property is the single key/value pair?

Coming from Ruby, it would be helpful to more clearly explain that a Javascript object is more like a Ruby hash, whereas a Ruby object is more like a Javascript prototype. Is that right?

This is nitpicky, but in your repl illustration you're using the word "cat" In the function name and the "kitty" in the constant name. "Cat" and "Kitty" are basically two words that mean the same thing, but what you're really trying to express is that the constant is a particular cat. "Kitty" doesn't really convey that so maybe the constant name should be "myFavoriteCat" or "myCat" or something like that??

I keep having this problem when I try to play around with getting "Undefined". I created my own repl and tried to recreate the Array example and I get undefined. Why is this happening? Need to make this clear whatever code I need to have first so I can copy and paste your examples. Same thing happened in my browser console when I tried to copy / paste the "sayHello" example.

I guess I'm expecting it to work like a Ruby console where I can define a method in the console and then use it in the same console session. Do I have to save the function into a file in the Repl to then be able to use it? Is it possible to make the repl examples interactive in this way where the reader does the typing? Clicking "Run" on your code really doesn't help me learn.

Is props just the name of an object like cat, but just a name that React chooses to use? What is more common in React apps? To see props.name or to just destructure the object so you don't even see props. Is there any reason why I need to use props in my react app? Or could I just get the data (from a CMS graphql query for instance) and put it into an object with any name (like cat) or just skip the naming part and destructure it directly? Or is there a good reason to use props with React?

Need more clarity on the React concept of props. I do think it's good to introduce here because that is what you're gonna see a ton of when you start googling code examples, but some more explanation is needed.

In the Destructuring section, I feel like there should be a one-sentence description of what "destructuring" is before you dive directly into it.

Is it possible to make the repl examples interactive in this way where the reader does the typing? Clicking "Run" on your code really doesn't help me learn.

This is nitpicky, but in your repl illustration you're using the word "cat" In the function name and the "kitty" in the constant name. "Cat" and "Kitty" are basically two words that mean the same thing, but what you're really trying to express is that the constant is a particular cat. "Kitty" doesn't really convey that so maybe the constant name should be "myFavoriteCat" or "myCat" or something like that??

function sayNameAndAge(cat) {
  return console.log(`My name is ${cat.name}. I am ${cat.age} years old.`)
}

const kitty = {
  "name": "Sylvia",
  "age": 6
}

// prints "My name is Sylvia. I am 6 years old."
sayNameAndAge(kitty)