I’m pretty good at formatting things correctly and knowing what to do for each particular step. However, I struggle to understand what exactly certain pieces of code are doing and what’s happening with them. Sometimes it’s clear. With the video game project it was clear what each line of code meant and I had fun with that project. But for most of the others, although I may be able to grasp it in the beginning, I end up getting lost.
For instance, I couldn’t tell you the purpose of any of this code:
This is for the functional programming spreadsheet project. It makes me feel like I’m in over my head. Am I supposed to know? Or is that just how freeCodeCamp works?
This is normal and depends a bit. With more complex code and more complex projects it might be hard to grasp on the higher concepts and how code is being structured.
Taking as example:
const idToText = id => cells.find(cell => cell.id === id).value;
From the line itself limited things can be said:
This is a function
cells might be an array, because it has find method, or something array-like, with such method.
The find method uses another function. This callback function checks if the id passed to first function matches id property of the cell that’s passed to the callback function.
The find is returning something (a cell?) that has value property. Probably the object that has cell.id === id, but to be sure the find method would need to be looked at.
I’m sure you are capable of dissecting like that every part of code.
There are two other important pieces. First is the context, how the part of code fits in the larger context, how function is used (if it’s already used elsewhere), or how it will be used. Note - in statically typed languages part of that context can be embedded in the variable types.
Unfortunately the way brain works, makes impossible to actively think of that every little piece in a single moment. Some simplifications, based on the context, or (not necessarily confirmed or true) assumptions must come into play to not boil the brain. This is why it’s so important to try using as clear and accurate names as possible - to not have to untangle every variable or function every time you try to use it.
But I have no idea what that single line is supposed to mean in the context of the whole project, let alone what all the lines mean. I’m not sure what it’s doing.
@victoriat420
Hey don’t feel down about coding, people who are new to coding not saying you are, feel overwhelmed with everything, when they slow down, and actually start reading, the code slowly you’ll understand it. It took me about 3 weeks to actually understand Javascript, and I know JS, CSS, Lua, JSON, and more.
Take this word as an example const is a keyword for a variable, that can’t be changed later on let is a var keyword that can be changed at any moment just like the keyword var is the most understandable keyword when you start Javascript, and does the same thing as let If (Condition) is an If statement, meaning if the condition is met either true or false it will run Else if (condition) is the same as an If statement, but is used after the first if statement if you have 3 conditions that are close the same but aren’t. <= is used as a condition if it is less than or equal to then do this >=is used as a condition if it is greater than or equal to than do this != if not equal than do this ! if not (condition) than do this
That’s just some basic understanding of Javascript.
It actually might not be even a part of the project overview. What I mean - yes, it’s part of the project, but it’s a little detail in one of the functions. It’s part of implementation of the evalFormula function. From the high-view of the project such details are abstracted behind objects, functions, etc.
What exactly are you not sure about these lines? How could you check whether your assumptions are correct or not?
I don’t know what the lines are doing for the spreadsheet. I need like a step by step breakdown of what every line of the evalFormula function is doing.
The evalFormula function processes a formula containing cell references and ranges like A1:B2. It retrieves cell values from the cells array using the helper function idToText. A regular expression identifies and matches ranges in the formula. The rangeFromString function converts numeric parts of a range into arrays of numbers, and addCharacters maps column ranges to their corresponding values. Finally, the function replaces ranges in the formula with their expanded equivalents for further processing.
Which parts exactly are giving you troubles? I doubt that’s literally every line and every character in the line. Are you familiar with the arrow function syntax?
If line defines new function, try playing around with it. Copy it at the end of the project code, try passing some arguments to it. Add couple console.log calls to see what’s the results with different arguments.
I’ve tried this. When I use console.log nothing is showing up. I can make an educated guess as to what all the lines are doing based on their names. But there’s just too much going on and I can’t keep up with it all.
“expanded equivalents” refers to replacing a range (e.g., A1:B2) with a list of individual cell references that the range includes (e.g., A1, A2, B1, B2).
For Example:
The range A1:B2 encompasses cells A1, A2, B1, and B2.
The function processes this range and expands it to its individual components so the formula can be further evaluated or processed using these specific cell references.
Depending on the specific place where console.log was located, it might be needed to manually call the function within which it is written, or firing off the right event, if that’s already defined in project. Without seeing the specific example it’s hard to tell something more than a bit general tip.
I truly understand your confusion. It looks all the same right? However, there are very important syntactic differences here.
Let’s try to explain what happening. I will try to show you a way that I could use to better see what it is in that function. One thing that you could do is to format the code and break it up in a way that allows you to better identify its “moving” parts.
To show you how, I will be verbose here so be aware:
const evalFormula is a variable you are creating that will host the function you are defining on the right side of the = symbol. Remember that variables hold values, and those values can be anything: numbers, strings, arrays… functions… That function takes two arguments, x and cells
const evalFormula = (x, cells) => {
...
}
Then, that function has several anonymous functions inside. Can you see them? All of them are stored into variables: idToText, rangeFromString, elemValue, addCharacters are variables holding anonymous functions
rangeRegex holds an expression, which in this case is a syntax based not in JavaScript, but a sort of language called Regular Expressions, or RegEx in short. It is one used to evaluate strings. Honestly? Hard to learn. So don’t worry about this for the time being.
rangeExpanded is a variable holding the result of a method, which another name for functions inside classes, or for many cases in JS, JS objects. This is something I would ask you to find somewhere else online or here in the Forum?
Now that we know what we have, let’s see what they do:
The function associated to idToText is receiving an argument, id and passing that argument to the cells argument of the evalFormula.
//idToText
id => // anonymous function
cells.find( // cells seems to be an array
cell =>
cell.id === id
).value;
cells is an instance of a JS object that contains the find method, which have an attribute of value. The method will look into the cells and find one where cell.id == id, and return a value.
The regex… not worry about it yet.
The anonymous function associated to rangeFromString takes two arguments, num1 and num2.
This anonymous function runs a function called range, which will make a range between the two number you will pass. You have to parseInt because you will pass strings, but range only accept numeric
Now elemValue (uffff! Let’s take a coffee…).
//elemValue
num =>
character =>
idToText(character + num);
The anonymous function here is accepting an argument num. But WATCH OUT!!! This anonymous function has another anonymous function inside it!!!
character => idToText(character + num)
Whaaaat???. Now checkthe argument passed to that function, and try to relate that to the problem the whole function (evalFormula) is trying to solve, just as @hasanzaib1389 explained.
Now addCharacters.
character1 => character2 => num => charRange(character1, character2).map(elemValue(num));
Again, an anonymous function with another anonymous function inside. Hmmmm…And then, another deeper anonymous function accepting a num argument.
Here the three different levels of depth of the anonymous functions:
//addCharacters
character1 => //first level of depth
character2 => //second level of depth
num => //third level of depth
charRange(character1, character2) // this will be a list of characters
.map(elemValue(num)); // this will apply elemValue function using num as arg, for any character in the range between char1 and char2
// (yeah... thanks, JavaScript for your confusing syntax!!)
Check now the composition above. Try to track how the arguments are used at each level of depth. The very final result that you expect to see is the one in the most inner function, but you first have to see what happened in the most external ones. Sometimes, it is required for the external function to exit before reaching an internal one, so always start from the shallow level of depth, to the innest one, and see what happens at each level.
The final touch. x is a string where you want to replace a value if the RegEx finds a match.
But the value you want to use as replacement is obtained by…? Correct! A function!
x //this is the target string that requires a replacement
.replace(
rangeRegex, //this is what you want to replace, based on a RegEx (difficult for now)
(match, char1, num1, char2, num2) => //this is an anonymous function that will result in a value that will replace sections in the string x matching rangeRegex
rangeFromString(num1, num2))
)
I really didn’t try to answer what the function does, @victoriat420 . I tried to show you what you can do to see it from a better angle.
This is one way. There are many others. Flowcharts could eventually help, for example.
But for now, try first to organize the code so you can see all moving parts and see if that helps?
Yes, sometimes I think it would be nice to have a block diagram/use case diagram/activity diagram/pseudo code to explain the logic/requirements of the solution/feature/function before doing the step-by-step implementation of it in code. This will give context as to why certain code is required and why certain things are done.