Codestrips: why the backticks (and why not)?

digital0677595534 · February 16, 2020, 11:50pm

Hello, I have just finished the cumulative project: Codestrips (https://www.codecademy.com/paths/create-a-back-end-app-with-javascript/tracks/connecting-javascript-and-sql/modules/codestrips/projects/codestrips-prj)

In this project you work in 2 files: app.js and sql.js
What I did not get is why we use regular single quotes( ’ ') in one file for our sql queries and backticks ( ) in the other?

More specific,
in app.js you have code like this:
app.get(’/strips’, (req, res, next) => {

db.all(‘SELECT * FROM Strip’, (err, rows) => {

if (err) {

  res.sendStatus(500);

} else {

  res.send({strips: rows});

}

});

and in sql.js, code like this, with backticks:
db.serialize(() => {

db.run(DROP TABLE IF EXISTS Strip);

db.run(`CREATE TABLE IF NOT EXISTS Strip(

id INTEGER PRIMARY KEY,

head TEXT NOT NULL,

body TEXT NOT NULL,

background TEXT NOT NULL,

bubble_type TEXT NOT NULL,

bubble_text TEXT NOT NULL DEFAULT "",

caption TEXT NOT NULL DEFAULT ""

);`);

});

What’s the reason this similar type of code gets handled differently?
Thanks in advance.

mtf · February 17, 2020, 12:37am

Without delving into your code, or project, we only need to look at what supports are available. Does SQL support back-ticks? (Doubtful). So we lean on JavaScript (ES6+) for syntax support.

That leads to one question at any given point in your code: Which interpreter is parsing this statement?

digital0677595534 · February 17, 2020, 8:43pm

Not sure what you’re asking but this project uses body-parser dev, hope that’s the answer.

It’s also mentionned nowhere in the course so I am just curious what’s the reason behind this, as my code without the backticks didn’t work so it must be pretty relevant.

mtf · February 17, 2020, 8:57pm

The only support I know of for back-ticks is ES6+, in particular as delimiters for template literals.

s = `interpolation`
a = `A string that supports ${s}`

Any string object in JS can be given back-ticks, whether interpolating or not.

On this whole, this is more something up @appylpye’s alley.

digital0677595534 · February 17, 2020, 9:13pm

In hindsight my first post wasn’t all that clear because the code looks a little messy, so here it is again but shortened:
app.js single quotes: db.all('SELECT * FROM Strip' etc etc

and in sql.js, with backticks: db.run(`` CREATE TABLE IF NOT EXISTS etc etc ``)

)

mtf · February 17, 2020, 9:19pm

Sadly, this is not in my wheelhouse as I know nothing about Express, Mocha, Node or SQL beyond enough to do damage. At my age I’m sticking to learning things I can tinker with, not the serious stuff young people need to kick start their career.

Going to watch the walk through video to see if any wisdom can be gleaned from that.

mtf · February 17, 2020, 9:47pm

console.log(`Server is listening on port: ${PORT}`)

It occurs to me that Node should support interpolation since it is JS (server-side, mind). That means sqlite3 also supports it, one would think. Pure speculation on my part.

db.run(`CREATE TABLE IF NOT EXISTS Strip`)

The above is a SQL statement (query?), not a string literal, hence the back-ticks.

digital0677595534 · February 17, 2020, 10:29pm

Thanks for you efforts, I face the same issue in the next exercise X-press publishing (https://www.codecademy.com/paths/create-a-back-end-app-with-javascript/tracks/back-end-development-capstones/modules/bapi-capstones-solution-code-and-next-steps/projects/x-press-publishing).
My visual studio code editor gives me lots of errors when i don’t use backticks, so while i still don’t get it at least it’s clear when i do have to use backticks.

mtf · February 18, 2020, 3:19am

Definitely use them when writing queries, or when interpolating logged output. Seems the only place they would be a requirement.

As mentioned earlier, they are valid quote marks in JS (but not HTML) so can be used almost anywhere in script.

{
    d = document.querySelector(`body`)
    e = document.createElement(`main`)
    h = document.createElement(`h1`)
    t = document.createTextNode(`Page Headline`)
    h.setAttribute(`title`, `Page Headline`)
    h.style.color = `red`
    h.style.fontFamily = `cursive`
    h.appendChild(t)
    e.appendChild(h)
    d.appendChild(e)
}

Going off to test this in Chrome console.

Success.

Click the > in front of <main> to expand the element listing. Notice the double quotes on the attribute?

<main>
  <h1 title="Page Headline" style="color: red; font-family: cursive">Page Headline</h1>
</main>