Help Understanding N Shortcut


#1



https://www.codecademy.com/en/courses/web-beginner-en-4hxyb/0/9?content_from=make-an-interactive-website%3Ajquery-events


I got my code correct but I was just wondering if anyone could explain to me the thinking behind the 'n' shortcut and why the instructions as per the code below. Why is there a need to create a variable in the first place and what is the purpose of removeClass and addClass?


else if(event.which === 110) {
            var currentArticle = $('.current') ;
            var nextArticle = currentArticle.next() ;
            
            currentArticle.removeClass('current');
            nextArticle.addClass('current');

}


The instructions for this exercise merely ask us to type the code but does not do a good job in explaining why it is typed that way and I wanted to find out more, thank you in advance!


#2

if you declare a variable inside a function, loop or an if statement, its scope is "Local", which means it does not exist OR cannot be accessed outside the function, loop or if statement in which it was created. So each time the event occurs currentArticle stores in it the element with class .current and nextArticle stores the element next to currentArticle.

After that, the code removes the class .current from the element stored in currentArticle and adds a class .current to the element stored in nextArticle.

As far as the concept of n is concerned, I think they just want you to know that it is possible to "listen" for keyboard events in Javascript. Otherwise, the users of your website can just use their mouse.


#3

I'd like to clarify this here. Yes, what you said is applicable in Java. But this is JavaScript and rules are different here :wink:

JS (the version that's taught in Codecademy) has only one scoping rule - lexical scoping i.e. scoping within a function. The rule is:

wherever you may declare your variable, it is always accessible anywhere throughout (before or after its declaration1) the function (or the global scope) in which that variable was created. It is also accessible in functions inside that function (or global scope).

Let me clarify with an example:

var a = 5; // global scope - access anywhere

alert(a); // 5

function foo(){
    var x = 1; // accessible only within foo

    function bar(){
        var secret = 1; // only accessible in bar
        alert(x); // though x is accessible
        alert(a); // and so is a
    }

    alert(secret); // ReferenceError - secret is unknown
}

alert(x); // not accessible - ReferenceError

[1] : Last note, regarding:

it is always accessible anywhere throughout (before or after that declaration1) the function (or the global scope)

I meant to say that variables are hoisted. So, you can also access them before their declaration though their values will be undefined.

function a(){
    alert(b); // undefined, but no error
  
    var b = 5;

    alert(b); // 5
}

the above code is silently converted by the interpreter to:

function a(){
    var b; // hoisted to the top
    alert(b); // undefined, but no error
  
    b = 5;

    alert(b); // 5
}

#4

Thanks for the clarification, this helps in me understanding the idea of scoping in JS!


#5

Thanks for this! After going through more of the lessons, I am beginning to understand the context of the variable and the need for addClass/removeClass.


#6

Sorry, I guess I was unclear. I meant to say the same thing which you clarified. I have never studied Java. I only know C, JS and PHP. Anyway, thanks for the clarification!