Discussion on: How did you get out of the habit of copying/pasting code?

[31547]

i break down what the language or library is actually doing into small, byte (heh) sized terms i can understand, then i try to recreate everything piece by piece until i have the whole unit.

then i apply it to a bigger project.

for a while i struggled with ecmascript fat-arrow functions. these:

const foo = (arg) => {
//do something with arg
return arg;
};

what i did to understand was that i went into open-source code, codeacademy, freecodecamp, etc. code sources and looked at big code, for example, something copied and pasted from a codeacademy page:

const multiplyByNineFifths = (celsius) => {
  return celsius * (9/5);
};

const getFahrenheit = (celsius) => {
  return multiplyByNineFifths(celsius) + 32;
};

console.log('The temperature is ' + getFahrenheit(15) + '°F');
// Output: The temperature is 59°F

when i first saw this, i had some vague idea of where everything was, but i didnt know the specifics. thats what messes you up. always. the specifics. so i looked closely.

const multiplyByNineFifths = (celsius) => {
  return celsius * (9/5);
};

so, the function is first declared like a variable, with const at the start and a semicolon at the end. alright, ill think of this like a variable.

okay, so, after const theres a name, just like declaring a variable, as if i declared const multiplyByNineFifts = what-the-value-should-be.

its like a variable but dynamic. you can do things with this variable.

what i did after breaking it down like this and understanding it was that i tried converting normal functions into this syntax. for example:

var app = express.createServer();

app.get('/', function(req, res){
    res.send('Hello World');
});

app.listen(3000);

this is taken from the express 2.x start page, because im too lazy to convert the current fat-arrow back to this format.

i broke the function down. im calling get on app, which is just an alias for telling express to make a server. get takes parameters of a route, which is /, and then a function telling it what to do with this route being used.

so this is just like typing

function(req, res)
{
  res.send("hello world");
}

alright, let me convert this to fat-arrow syntax:

(req, res) => {
  res.send("hello world");
}

let me plug it back in, like with math:

app.get("/", (req, res) => {
  res.send("hello world");
});

then there was clarity because i took myself through what this whole thing was made of, how to remake it, and what every important part of it did, by thinking about it critically