Question about js

Hello. I am Aden. I am currently working on this exercise: https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-building-interactive-websites-with-javascript/modules/fecp-dom-events-with-javascript/projects/piano-keys
I have a question: On step 4-6, I wrote these:

let keyPlay= function(event){
  event.target.style.backgroundColor='blue';
}
let keyReturn = function(event){
  event.target.style.backgroundColor='';
}
let play = function(note){
    note.onmousedown=keyPlay;
    note.onmouseup=keyReturn;
}

I get it. However, when I watch back the tutorial, I found that the solution is:

let keyPlay= function(event){
  event.target.style.backgroundColor='blue';
}
let keyReturn = function(event){
  event.target.style.backgroundColor='';
}
let play = function(note){
    note.onmousedown=function(){
      keyPlay(event)
    };
    note.onmouseup=function(){
      keyReturn(event);
    };
}
notes.forEach(play)

Can anyone explain what is the difference between they 2?
Thanks a lottttt :blush: :blush:

Hi Aden,
I assume in your solution you also have the function assignment for each note as displayed in the solution

and your code works, fine, right?
So in this context, there is no big difference.

In the solution, there is an anonymous function wrapped around the function calls keyPlay(event) and keyReturn(event), which is triggered by mousedown and mouseup. You could add multiple function calls to one event this way. With your solution, there is only one function assigned and triggered. But that’s what you want here, so that’s fine.
The other difference is that you have another context for this: When you console.log(this) in your function keyPlay you will see, that thisin your solution refers to the pressed object and in the tutorial’s solution it refers to the window object.

//your solution
note.onmousedown=keyPlay; // keyPlay is triggered by onmousedown, event is fired to note

// tutorial's solution
    note.onmousedown=function(){ // anonymous function is triggered by onmousedown
      keyPlay(event) // keyPlay has to be called with event as argument in contrast to your solution, because onmousedown just triggers the anonymous function 
    };
}
1 Like

thanks alot mirja :grin: :grin: :grin:

Hi, There!
Can anyone help me to understand this example, please?
I know that is a pretty basic question, but I finished my lessons on Codecademy for JS and decided to review it by reading the MDN documentation. I thought I had a few obscure points to clarify, especially when it comes to a higher-order function. But then I came across this explanation for Variable Declaration, and I got lost.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#declarations

I don’t understand why the let example will return a ReferenceError (undefined).

Thank you in advance!

Hi @mmsink
not sure, if I can add anything helpful to that explanation. let is only available inside the function scope (all inside the curly brackets). Let’s try an analogy:
Imagine the function scope is the pasture and the curly brackets the fence. let is a cow on the pasture. var is a bird. It can be seen anywhere while the cow wouldn’t go anywhere beyond the fence.

1 Like

Hi, @mirja_t

I appreciate your tentative to explain it to me using such a cool analogy.
Actually, I do understand what the difference between global and local scope is.
I think I didn’t understand because there is no difference between the two-part of the code besides the chosen letter.
I noticed that they mention the ECMAScrip2015; what makes me wonder if I could only use ‘var’ as a global scope, and ‘let’ just is used for local scope. Is it true?

Thank you again.

Maybe this example helps:


function anyfunction() {
 	
  let localvariable = 'let';
var globalvariable = 'var';
  if(true) {
  	let localvariable = 'localvariable';
 	var globalvariable = 'globalvariable';
    console.log(globalvariable); // output: globalvariable
	console.log(localvariable); // output: localvariable
  }
 	console.log(globalvariable); // output: globalvariable
	console.log(localvariable); // output: let
}
anyfunction();

let is also available inside functions when declared in the global scope. But redeclaration of var inside functions leads to a change of the value of the global var. Which can lead to unwanted behaviour which is difficult to debug. That’s why let is usually preferred over var

1 Like

@mirja_t

That was perfect.
Thank you so much for your help.

1 Like