Code Transformation and Linting with ASTs

Challenge 7: Solution

Kent C. Dodds

Kent C. Dodds

Professional Trainer
Code Transformation and Linting with ASTs

Check out a free preview of the full Code Transformation and Linting with ASTs course

The "Challenge 7: Solution" Lesson is part of the full, Code Transformation and Linting with ASTs course featured in this preview video. Here's what you'd learn in this lesson:

Kent walks through the solution to Challenge 7.


Transcript from the "Challenge 7: Solution" Lesson

>> Kent C. Dodds: Okay, so it's time to go through this solution. What we're looking for is we need to find the function that this console long statement is inside of, and if it has a name, and if there is a function, and that function has a name, then we're gonna prefix our log with that.

So, I'm gonna start out with our prefix. This is what we're gonna call the string literal that we attach to the arguments list. And we're gonna find the parentFunction with path.findParent. t.isFunctionDeclaration, isFunctionDeclaration, think that's right. And actually, I'm gonna move over here, so we can have this here to the log stuff.

Actually, yeah, because console logging nodes when you're in Node, and it logs out to your terminal. It's like this giant, really, really big object that you can't really make sense of, so it's a lot. That's one of the reasons why developing in here's a lot simpler. But yeah, let's console.log this parent function, console.log(parentFunction).

And we're getting two, sweet. We have two in our program so that's exactly what we're looking for. And then we have a log of null, because one of our console logs isn't inside of our function. Ans so let's look at these ones that are. They have a node.

That node has an ID. That ID has a name. So, let's say if(parentFunction) exists, thank you truthiness of JavaScript, then we'll log that, and we'll log the node And we'll get add and subtract, perfect. So we'll make that part of our prefix. Say prefix +=.
>> Kent C. Dodds: And then we'll.

Let's see. Yeah, say prefix. In either case we'll add our.
>> Kent C. Dodds: That line information. And put that in our prefix and also, do things in the right order. And we wanna have a space here, so we'll stick a space, yeah, as part of this. And we've got it.

Coolio? Coolio. Paste that in. Hit Save and tests are passing. Don't forget your elaboration and feedback. We remove that and now all of our tests are passing.
>> Speaker 2: Could you look at the, I just want to see the spacing thing? About 30 with what I did.
>> Kent C. Dodds: The spacing.

>> Speaker 2: Yeah, just the actual [INAUDIBLE], when you add the space in front of the method, or after the method name?
>> Kent C. Dodds: Yeah, right there.
>> Speaker 2: So you just, okay.
>> Kent C. Dodds: Actually, in my solution, when you run the exercise, what I did instead,
>> Kent C. Dodds: I didn't think about it, until just now while I was doing it.

Is I put the space right there and then I did a .trim. Or actually, I did a .trim here. So both will work, but what I did just shows you that was probably better.
>> Kent C. Dodds: JavaScript, so many ways to do things. Okay, what were some of the key takeaways here?

Well before that, any questions that anybody has?
>> Kent C. Dodds: Has this been fairly straight forward? It's pretty much once you understand ASTs or the APIs, then it's like I'm just running JavaScript now. So great, now any key takeaways? Let me just get one takeaway from this exercise.
>> Speaker 3: Function.

>> Speaker 4: These function declaration.
>> Kent C. Dodds: Yeah, yeah, yeah. t., is function declaration fine parent. This pattern is really common, because they just compose together really nicely, yep.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now