Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Henrique Machuca
Henrique Machuca
5,611 Points
Posted by Henrique Machuca
Henrique Machuca
5,611 Points

Meaning of a javascript statement

Can any one explain me slowly what does the statement below means?

target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

Thanks!

Marcus Parsons
Marcus Parsons
15,718 Points

Hey Henrique,

I believe there is content that is not showing up from your pasted code. Whenever you are posting code to the forums, you should always wrap it in a code block like you see in the Markdown Cheatsheet/in the image below. Ensure that the 3 backticks are on their own separate lines from the pasted code and that there are blank spaces above the first 3 backticks and below the last 3 backticks.

code

4 Answers

Marcus Parsons
Marcus Parsons
15,718 Points

I see now. It's from CSS-Tricks, and it should be a single "=" not a "==". I haven't used ternary operators in a while, but now I see what's going on since I've had my little refresher on them. As Sam mentioned, this is a ternary operation. So, first make sure you understand what ternary operations are and how they operate. Or maybe you just need a refresher like me :P

What that statement is doing is setting the variable target to be target if target.length is greater than 0. It doesn't explicitly say greater than 0; however, you should know that 0 is considered a falsey value (if you don't know about truthy/falsey values, check out this Treehouse workshop on JavaScript Booleans). Since ternary operators operate upon a non strict true/false foundation (truthy/falsey), 0 would be the same as false causing target to become what is on the right hand side of the colon (or the "else" side). If what is gained from var target = $(this.hash); (i.e. just target) is 0, then it selects any element with a name attribute equal to the text of the hash.

A hash is exactly like what you see when you put an id selector on a CSS stylesheet. If something has an id of "top", its hash is "#top". So, what that slice does is chop that # sign off the hash, making it just "top" (or whatever text that hash has).

Here's a better formatted way of looking at that ternary operation that doesn't require an else (in this case):

var target = $(this.hash);

//The code below is the ternary operator line you asked about
//in a more readable format
//If target.length is 0 or any other falsey value...
if (!target.length) {
//Set target equal to the name attribute selector with the hash as the value
target = $('[name=' + this.hash.slice(1) +']');
}
Henrique Machuca
Henrique Machuca
5,611 Points
Henrique Machuca
Henrique Machuca
5,611 Points

Thanks Marcus!

Really helped me out there. It seems to me that there is room for making this code more dry.

Now I can carry on!

Thanks again.

Marcus Parsons
Marcus Parsons
15,718 Points

You're welcome, Henrique. Ternary operations like that can often look like they repeat themselves (like setting target to be target if length is above 0), but it's a necessary part of using that operation. Happy Coding my friend! :)

Sam Shiffman
Sam Shiffman
7,466 Points
Sam Shiffman
Sam Shiffman
7,466 Points

This is an example of use of the Ternary Operator, which is employed in many software languages. It is an abbreviated 'if XXX then YYY else ZZZ'. Everything before the '?' is the 'if' condition. Everything between the '?' and the ':' is the 'then' action, which is executed if the 'if' condition evaluates to true. Everything from the ':' to the end is the 'else' action, , which is executed if the 'if' condition evaluates to false.

But in this case I think there's an error. The '=' should be a '==', otherwise it would not be evaluated to a boolean, which is required for the 'if' condition on an if-else branch In this code the 'then' action will return target if the 'if' condition evaluates to true. In this code the 'else' action $('[name=' + this.hash.slice(1) +']') is a jQuery command that will update the name variable.

Henrique Machuca
Henrique Machuca
5,611 Points
Henrique Machuca
Henrique Machuca
5,611 Points

Here is the full code Marcus:

$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') || location.hostname == this.hostname) {

        var target = $(this.hash);              
        target == target.length ? target : $('[name=' + this.hash.slice(1) +']');
                 if (target.length) {
                         $('html,body').animate({scrollTop: target.offset().top}, 1000);                        
                         return false;
                 }
    }
});
Marcus Parsons
Marcus Parsons
15,718 Points

Where are you getting this code from, Henrique?

Henrique Machuca
Henrique Machuca
5,611 Points
Henrique Machuca
Henrique Machuca
5,611 Points

I got it online, to make my scrolls move smoothly when I select a section of my website from my nav bar.