TS newbie ... common key value pairs

Hello again! This time it's codecademys TS course that is giving me headaches ...

type Like = {
    username: string;
    displayName: string;
};
type Share = {
    username: string;
    displayName: string;
};
// Returning objects from events, whch can be either of the two type objects
function getFriendNameFromEvent(event: Like | Share) {
    return event.displayName || event.username;
}
// Object with name and username
const newEvent = {
    username: 'vkrauss',
    displayName: 'Veronica Krauss',
};

const friendName = getFriendNameFromEvent(newEvent);

console.log(`You have an update from ${friendName}.`);
// Prints: You have an update from Veronica Krauss.

type Like = {
    username: string;
    displayName: string;
};
type Share = {
    username: string;
    displayName: string;
};
// Returning objects from events, whch can be either of the two type objects
function getFriendNameFromEvent(event: Like | Share) {
    return event.displayName || event.username;
}
// Object with name and username
const newEvent = {
    username: 'vkrauss',
    displayName: 'Veronica Krauss',
};

const friendName = getFriendNameFromEvent(newEvent);

console.log(`You have an update from ${friendName}.`);
// Prints: You have an update from Veronica Krauss.

How does friendName know to only take displayName and log it? Or to ask it differently – how is newEvent only picking the displayName, if I understand this right ...

9 Replies

Wolle•2y ago

Because in JS || and && are not boolean algebra. In this example it takes a look at displayName, if it is a truthy value it gets returned, if it is falsy, it returns username.

Å Marlon GOP•2y ago

Hmm... not really sure if I understood this, but ... friendName is asking to return event.displayName or event.username, right? And since event.displayName is truthy (because it is a property in either Like and Share), it doesn't care about event.username, and goes on with just event.displayName. This then decided what property to use in newEvent, and so on to the log ... Right?

Rägnar O'ock•2y ago

To clarify, || and && ARE boolean operators. But || don't return true if any one of the value around it is true, it returns the first value if it's truthy or the second if not. So in your case, because you access displayName and then username it will return the former if it's not falsy (i.e. undefined or empty string mostly) and if it is it will return the value of username. Almost but not quite. The properties of newEvent are set by the object litteral and you only pick from it the value that will be logged using the getFriendNameFromeEvent function (and just so you know, this has nothing to do with typescript and everything to do with how JS works.)

Rägnar O'ock•2y ago

If you still have issues understanding this code, you can look at the MDN page for || : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR

Logical OR (||) - JavaScript | MDN

The logical OR () (logical disjunction) operator for a set of operands is true if and only if one or more of its operands is true. It is typically used with boolean (logical) values. When it is, it returns a Boolean value. However, the operator actually returns the value of one of the specified operands, so if this operator is used ...

Å Marlon GOP•2y ago

Whoa ... 😮‍💨 Ok, let me try again to explain to myself ... I think I understand the || operator in this code, but not the newEvent So this still holds: friendName is asking to return event.displayName or event.username, right? And since event.displayName is truthy (because it is a property in either Like and Share), it doesn't care about event.username, and goes on with just event.displayName. But how is the poperty displayName: 'Veronica Krauss', chosen if the consuequence of what is mentioned above is not in play, which is what I understand from your comment: "Almost but not quite. The properties of newEvent are set by the object litteral and you only pick from it the value that will be logged using the getFriendNameFromeEvent function"

Rägnar O'ock•2y ago

The username property would only be used if the displayName is falsy, and that can happen if the value for displayName is an empty string "" (or undefined or null or 0...) If you have a hard time figuring out how it all works try to remove all the typescript parts (so the type declaration and the : Like | Share in the function signature) Maybe it'll be clearer

Å Marlon GOP•2y ago

But displayName: 'Veronica Krauss' is chosen because event.displayName in the getFriendNameFromEvent function is truthy, right?

Rägnar O'ock•2y ago

In this case yes

Å Marlon GOP•2y ago

That was really the only thing left to understand. Then it makes sense. Thanks! 🙌

Gaming

Programming

TS newbie ... common key value pairs