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
– Taplar, Commented Apr 19, 2018 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
– Scott Marcus, Commented Apr 19, 2018 at 18:08

Taki · Accepted Answer · 2018-04-19 18:29:29Z

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, 2018 at 18:29

answered Apr 19, 2018 at 18:11

Taki

17.7k5 gold badges28 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Taplar Over a year ago

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.

Taki Over a year ago

@Taplar totally agree with you, but if i understand correctly, that's what the question is about .. just to evoid eval()

Taplar Over a year ago

Avoiding the eval() doesn't mean you have to use an arrow function.

Taki Over a year ago

@Taplar see stackoverflow.com/questions/10743596/…

Taplar Over a year ago

Ahhh. 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

|

Collectives™ on Stack Overflow

How can I convert string to internal code?

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related