Trying to understand a javascript function

JavaScript
1

Can you help me understand this function:

projectNameTemplate(rowData) {
 const value = rowData.projects === undefined?rowData.name:(rowData.projects.length>0?rowData.projects[0].name:'')
        return <span>{value}</span>
    }

Here is what I have understood so far:

A value constant is defined and it is checking if rowData.projects is undefined. If it is undefined, it will return this part rowData.name:(rowData.projects.length>0?rowData.projects[0].name OR it will return ' '.

I am not understanding how to interpret this part:

rowData.name:(rowData.projects.length>0?rowData.projects[0].name

Does it mean that if rowData.projects.length>0 then it will print it like this rowData.name : rowData.projects[0].name ?

2

Close… it is actually TWO ternary operations. If rowData.projects is undefined it will return rowData.name OR it will go into another ternary operator where it checks rowData.projects.length > 0. If THAT is true, it will return rowData.projects[0].name otherwise it will return an empty string.

This second ternary operation is the FALSE part of the first ternary operation.

Yeah can be confusing. Hopefully that makes sense. :slight_smile:

Edit: Net effect is that it returns rowData.name OR rowData.projects[0].name but only if projects is greater than zero.

3

I see. That makes sense. Thank you for explaining it in detail and very nicely. Appreciated!

4

I would separate parts of that function so that they are easier to understand.

function getProjectName(projects, name) {
    if (projects === undefined) {
        return name;
    }
    if (projects.length === 0) {
        return "";
    }
    return projects[0].name;
}
function projectNameTemplate(rowData) {
    const value = getProjectName(rowData.projects, rowData.name);
    return `<span>${value}</span>`;
}
2 Likes
5

In my opinion programmers often use too much whitespace (spaces and blank lines). In this case I think there is not enough. The following is the likely way I would format that.

projectNameTemplate(rowData) {
	const value = rowData.projects === undefined ? rowData.name
		: (rowData.projects.length>0 ? rowData.projects[0].name : '')
	return <span>{value}</span>
	}
6

Not an easy read that function. The fact it has to be broken down isn’t a good thing in my opinion.

function projectNameTemplate({projects, name}) {  /* destructure rowData */
  const value = (projects === undefined)
    ? name
    : (projects.length > 0) // <-- else if
      ? projects[0].name
      : ''
  
  return <span>{value}</span>
}

Paul’s approach of using ‘if’ statements, might not seem as clever but makes the code easier to read.

I presume the span being returned is for React?

Each to their own, but personally I like a bit of whitespace. If you look at typography as an example, whitespace is used to make text more legible.

1 Like
7

Normally I have no trouble with ternarys but with the original code, I had trouble understanding at first glance what was happening with the name. Because there are several different things happening with it, that warranted making things simpler and easier to understand.

There might be a pleasant middle-ground somewhere between those if statements and the one-liner ternary, but will it be as easy to understand when we come back to the code in six months time to refactor or debug?

Frequently clever doesn’t mean complex :slight_smile:

I was going to take things further to investigate simplification by using the optional chaining operator instead. But I can only procrastinate on other things for so long.

1 Like
8

Absolutely :slight_smile:

10

Yes, React.

1 Like
11

It depends on the experience of the programmer. A programmer experienced with the ternary operator would likely want to convert code using exclusively if statements into code that uses the ternary operator.

It reminds me of an experience I had many years ago. A beginner COBOL programmer proudly said he was taught to never use not in an if condition. I indicated it is not a problem. He looked at me as if I was being stupid.

The ternary operator originated in C. It is not necessary but I think it can be useful. There are many other features exclusive to JavaScript that I think make JavaScript unnecessarily cryptic. Many JavaScript programmers seem to think it is necessary to be cryptic.

12

At a GLANCE… this might work?

projectNameTemplate(rowData) {
const value = rowData?.projects?.length ? rowData.projects[0].name : rowData.name
return {value}
}

13

Carrying on from my if statement simplification, let’s get rid of most of the if statements.

function getProjectName(projects, name) {
    if (projects === undefined) {
        return name;
    }
    if (projects.length === 0) {
        return "";
    }
    return projects[0].name;
}
function projectNameTemplate(rowData) {
    const value = getProjectName(rowData.projects, rowData.name);
    return `<span>${value}</span>`;
}

I’ve used some basic tests at the end of the code to help exercise the getProjectName function, and to help guide me to things I missed out when restructuring the code.

const rowData = [
  {
    projects: [],
    name: "not used"
  },
  {
    projects: undefined,
    name: "name1"
  },
  {
    projects: [{
      name: "name2"
    }],
    name: "not used"
  }
];
{
  const actual = getProjectName(rowData[0]); 
  const expected = "";
  console.assert(actual === expected, `Zero projects should give empty string`);
}
{
  const actual = getProjectName(rowData[1]); 
  const expected = rowData[1].name;
  console.assert(actual === expected, `No project should give default name`);
}
{
  const actual = getProjectName(rowData[2]); 
  const expected = rowData[2].projects[0].name;
  console.assert(actual === expected, `A project should give the project name`);
}

I can now use parameter context matching, and pull up the empty string response to the top of the function using ?. as an optional chaining operator. After that a simple ternary gives us one name or the other.

function getProjectName({projects, name}) {
    if (projects?.length === 0) {
        return "";
    }
    return projects ? projects[0].name : name;
}
function projectNameTemplate(rowData) {
    const name = getProjectName(rowData);
    return `<span>${name}</span>`;
}

That is my preferred simplification of things, when ?. is allowed to be used. It helps us get the “” case out of the way so that we can focus on the names being returned.

1 Like
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.