How can I convert string to internal code?

Question

This came when I tried to figure how jQuery works. How can I declare a string and then convert it such that it becomes readable by machine. In short, how can I place the string without the quotes so that the string parses to document.querySelector and then I add my brackets with the selector. Before, I had eval(S)(.wrapper).className = "red";

I basically want to achieve what is commented and here is the relevant code:

const S = "document.querySelector";
S(".wrapper").className = "red"; 

/* Below is how I want the final result as. */
/* document.querySelector(".wrapper").className = "red" */

html, body {
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

.wrapper{
    width: 100%;
    height: 100vh;
    text-align: center;
    top: 50;
    left: 50;
    color: dodgerblue;
}

.red {
    color: red;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dom.js</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="wrapper">
        <h1>Dom.js</h1>
        <p>Making Dom Manipulation Easier!</p>
    </div>
    <script src="app.js"></script>
</body>

</html>

You don't have to make it a string. `var S = document.querySelector;` would allow you to use S in the place of that method through out the code where that variable is scoped. Not sure why you would do this though as it makes the code less clear. — Taplar, Apr 19 '18 at 18:06
11 times out of 10, when someone wants to know how to convert a string to executable code, the solution is to think about the problem differently. — Scott Marcus, Apr 19 '18 at 18:08

Taki · Accepted Answer · 2018-04-19T18:29:29.087

1

you can create a function that returns document.querySelector(selector)

const S = (selector) => {
  return document.querySelector(selector)
}

// or 
/*
const S = function(selector) {
  return document.querySelector(selector)
}
*/

S(".wrapper").className = "red";

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
  height: 100vh;
  text-align: center;
  top: 50;
  left: 50;
  color: dodgerblue;
}

.red {
  color: red;
}

<div class="wrapper">
  <h1>Dom.js</h1>
  <p>Making Dom Manipulation Easier!</p>
</div>

or, as suggested in this post , not to use a function and keep the context, use bind

var S = document.querySelector.bind(document)

S(".wrapper").className = "red";

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
  height: 100vh;
  text-align: center;
  top: 50;
  left: 50;
  color: dodgerblue;
}

.red {
  color: red;
}

<div class="wrapper">
  <h1>Dom.js</h1>
  <p>Making Dom Manipulation Easier!</p>
</div>

edited Apr 19 '18 at 18:29

answered Apr 19 '18 at 18:11

Taki

17,320
4
26
47

You can do this, but there is literally no point to doing this. Just assigning the method to the variable achieves the same result, with one less method defined. – Taplar Apr 19 '18 at 18:12
@Taplar totally agree with you, but if i understand correctly, that's what the question is about .. just to evoid `eval()` – Taki Apr 19 '18 at 18:14
1

Avoiding the eval() doesn't mean you have to use an arrow function. – Taplar Apr 19 '18 at 18:14
@Taplar yes you don't have to it's just one way , – Taki Apr 19 '18 at 18:17
@Taplar , assigning the method to the variable doesn't work : https://jsfiddle.net/5gcpjh54/14/ – Taki Apr 19 '18 at 18:21
That's really weird, i'm not sure why it's erroring. – Taplar Apr 19 '18 at 18:23
1

@Taplar see https://stackoverflow.com/questions/10743596/why-are-certain-function-calls-termed-illegal-invocations-in-javascript – Taki Apr 19 '18 at 18:24
1

Ahhh. https://jsfiddle.net/5gcpjh54/24/ So to not use the arrow method, you'd have to bind the document to it so the context still exists. Guess that makes sense. Which bind() also creates a new method so, *shrug*, not saving anything arrow method vs bind – Taplar Apr 19 '18 at 18:26
Perfect! That is exactly what I was looking for! – Parth Agarwal Apr 20 '18 at 03:22

How can I convert string to internal code?

1 Answers1