You’ll hopefully have noticed that the code examples throughout Untangled.io are slightly different from those you’ll find on other sites. They’re live. As in, not static. As in, completely editable, with the output printed directly underneath the code sample. Instantly.

This feature lets you see not just a sample of code, but actually to interact with it, without having to faff about with fiddles or console.logs.

It’s made developing the examples a dream, and will hopefully give you a much clearer understanding of what’s going on with any code snippet you find. Being able to interact with the code and see instantly the difference that the changes you’ve made has caused is an immensely powerful tool in learning, so please, experiment and edit the code as much as you need to.

FAQ

How do I print out a value?

The code snippet acts as a REPL, and will automatically output the last variable that’s assigned a value that it finds.

For example, to output the value of var3 in the following code snippet, just make sure it’s written the last line:


const var1 = 'var1';
const var2 = 'var2';
const var3 = 'var3';

// To output the value of var3, simply make sure it's on the last line:
var3;


If you wanted to see the value of var2, just write that on the last line:


const var1 = 'var1';
const var2 = 'var2';
const var3 = 'var3';

// To output the value of var2, simply make sure it's on the last line:
var2;

How do I see the value returned from a function?

If a function returns a value, just call the function on the last line of the code snippet, and whatever it returns will be displayed in the output:


function showMeTheValue() {
   return 'hello world';
}

// Output the returned value of the function by calling it on the last line:
showMeTheValue();


This also works with built-in JavaScript object methods that also return values, such as Array.prototype.map:


const arr = [1, 2, 3];

// Array.map returns a new array, which Klipse will output as it's 
// a value returned on the last line:
arr.map(item => item * 2);

Why isn’t a value displaying?

Note that there are times when a value will not be output, simply because JavaScript is doing something that cannot be output. For example, declaring a variable will output nothing, as you’re declaring a variable. So this, for example, will display nothing:


// Outputs nothing:
const var1 = 'var1';


However, you can display the value of a newly-assigned variable if it’s declared on a previous line:



// Declare separately
let var1;

// Assigning without declaring will display the value of var1
var1 ='var1';

How can I output multiple values?

There are times when you want to display multiple values, which is a problem with an output console that will only display one line at at time.

To get round this, you can either compile the values into an array, and then output the array, or use eval, which will evaluate and output whatever you put in it.



const var1 = 'lots';
const var2 = 'of';
const var3 = 'values';

// Output the values of all 3 variables by assigning them to an array.
const outputArr = [var1, var2, var3];
outputArr;




const var1 = 'lots';
const var2 = 'of';
const var3 = 'values';

// Output the values of all 3 variables by using eval.
eval('"var1: " + var1 + ", var2: " + var2 + ", var3: " + var3');

Who made the fabulous Klipse plugin?

Klipse is an open source project by Yehonathan Sharvit, who’s blogged eloquently about the reasoning behind its development. You can find instructions for using it yourself (and maybe even contribute to its development), at the Klipse Plugin repo.


There are no comments.

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>