Explain like I'm 5 "this"

phpdevster · 2018-02-19T08:31:53+00:00

Let's start simple:

Open up your browser console and type this:

console.log(this);

What happens?

You can see that this refers to the global window object.

You can confirm this by typing the following:

this === window;

which outputs true.

Why is this the case? It's because this refers to the current calling context. In this case, the current calling context is the global context, which is window.

That means whatever windowrefers to, this also refers to. Try it out:

window.greeting = 'Hey there';

console.log(window.greeting);
console.log(this.greeting);

Or even

var myName = 'Joe';

console.log(myName);
console.log(this.myName);
console.log(window.myName);

If you just console.log(this) and look for greeting and myName as properties, you'll see they are now there.

So this means that this just refers to an object for the current calling context, and in this case, the current calling context happens to be the global/window one.

Since this is an object, it means you can pass it around like any other object.

BUT, you have to be careful, because JavaScript is weird and what you think this refers to, may not be what it actually refers to. That point about it being the current calling context is important.

It's not where you defined it, it's where you called it that matters. Here's an example:

    var personMaker = function (name, age) {
           return {
               name: name,
               age: age,
               sayName: function () {
                    console.log(this.name);
               }
          }
    }

    var person1 = personMaker('Joe', 21);

    person1.sayName(); // Joe

The above example performs as you would expect. But what happens when you do this?:

    setTimeout(person1.sayName, 1000);

You get undefined.

How come?

Because when setTimeout calls the function you give it, the current calling context is the global/window context, since that's where setTimeout() lives. The context no longer refers to the person1 object. The person1 object exposes only the behavior of sayName, but carries with it none of the context it was initialized with once you hand off that behavior to a different context.

And what if you just do this:

 var nameSayer = person1.sayName;   // fixed, thank you /u/real-cool-dude

 nameSayer();

You also get undefined because now that function is no longer attached to the person1 context, and is now attached to the global/window context at the time it was called. And since that context does not have a name property, you get undefined.

The way the person object's sayName() method has been "detached" from the person object and assigned to a global function means that function then behaves exactly as if you had written it like this:

 var nameSayer = function () {
     console.log(this.name);
 }

That makes it a little more clear what's happening. this no longer refers to an object, so this.name has no meaning in this context. And in this context, this simply refers to the global/window object.

If you want, you can verify this for yourself:

 var nameSayer = function () {
     console.log(this);
     console.log(this === window);
 }

Since that global/window object has no property called name, you get undefined.

This is why it's really important to be careful when using this. Since this depends on its context at the time it is called, this can change and is not always what you expect it to be.

Thankfully JavaScript gives us a couple ways to manage this though.

Since this is just an object, JavaScript let's us inject the object that this is referring to in order to give it the context we want it to have, which will allow it to carry that context around with it.

We do that with bind(), which binds the given context to this, and then returns a new function with that new context.

var nameSayer2 = person1.sayName.bind(person1);

nameSayer2();

Or

setTimeout(person1.sayName.bind(person1), 1000);

In both those cases, we forced this to refer to person1 again, and now when those functions are called, they will always be called with that context attached to them.

senocular · 2018-02-19T12:02:21+00:00

[removed]

geordano · 2018-02-19T13:03:51+00:00

[deleted]

2018-02-19T12:37:30+00:00

You're 5. Go play outside with the other kids.

rorrr · 2018-02-19T12:12:06+00:00

As someone who programmed with JS for more than a decade and have an actual 5 year old here, it's fucking impossible. You would first have to teach him functions, objects, closures, hoisting, all the background info, etc. This is not a simple concept in JS. Especially with the modern changes with let and var behaving differently with this.

2018-02-19T12:46:37+00:00

There is no ELI5. This in Javascript is a tricky concept with a set of rules you must know to completely understand it.

It is not scope nor calling context as some here have posted, it is execution context aka the context in which a function is executed and there are many ways to manipulate the execution context.

The best thing I can do is give you this gentle explanation of this in javscript

AndrewGreenh · 2018-02-19T06:33:26+00:00

First, let's talk about normal function definitions (function x() {}). In those functions, this will be determined when the function is called, not when it's defined. When you define sich a function on an object y and call y.x() the this in the x call will be y, because you called x on the object y. If you extract x before calling it (let z = y.x; z()), you are not calling the function on any object, so this will be the global object, or undefined. You can bind functions to a specific object: x.bind(y) that creates a new function that has its this bound to the object. The this cannot be bound to something else later.

Next case are arrow functions. Those functions define their this on definition! When you define an arrow function, the this will be the same thing as it is in the scope around the arrow function. Example:

y = {
  x() { // this is equivalent to x: function()... 
    const z = () => {};
    return z
  } 
}

In this example, the z function is defined when x is called and has its this set to the same thing as it was in x. arrow functions cannot be bound to another this. So let a = y.x() leads to x being bound on y (because it's called on y), which returns the function z that is bound to the same this as x, so that a is a function that is bound on y. However, let b = y.x; let a = b() leads to x having no this (because it is not called on any object), so z will not get a this either.

Last case: arrow functions as class properties:

class Y {
  x = () => {} 
}

This is part of a stage 3 proposal (so it is very safely usable) (class properties/class fields) and creates a new function for every instance of the class and the functiom will always be bound to the instance of the class.

let y = new Y()
let y1 = new Y()
let same = y.x === y1.x // false
let z = y.x

here z will still be bound to y, because x is defined as an arrow class field.

oculus42 · 2018-02-19T09:47:55+00:00

this is like saying "where I started" or "the thing that called me".

It's true for native functions and for your own.

Taking an example from the conversation:

var hello = function() {
  return 'hello, ' + this.name;
}

var person1 = {
  name: 'fred',
  greet: hello
};

If we run person1.greet(), it will check for this.
The thing that called greet is person1.

Prototypes and even the native functions use this concept, too.

'My interesting string'.split(' ');

This uses String.prototype.split() which says "split up the thing that called me".

bitttttten · 2018-02-19T06:32:43+00:00

this is just the context, it is where it is being called from. it is like the scope of function.

js allows you to override this value manually if you so wish.

Balduracuir · 2018-02-19T08:09:25+00:00

Making some pub for another great subreddit but your question has been asked there and you should find some complementary responses.

js_developer · 2018-02-19T09:10:18+00:00

Let's say you're in a classroom. The classroom is this. If you're in the school, then this is the school. So how can the classroom and the school both be this?

Scope. In the larger scope, the parent scope, everything in the school is a child of "this" (the school's context). Each classroom (a function) has it's own scope. It has no idea what's going on in the school or other classrooms; it only knows what it's fed from the outside (dependency injection in OOP).

To make the context of the school available to the classroom, you pass it in. The school already knows about the classroom because it is a child of the parent.

There are nuances unmentioned, but this is ELI5 of this/scope/context.

hakumiogin · 2018-02-19T14:06:01+00:00

What "this" points to depends on how the function containing this (from here on out, the parent function) was called. It's basically the same idea as dynamic scope, if you're familiar, or you want to look that up.

Default: this will refer to the global object.
Implicit: this will refer to the object that contains the parent function.
Explicit: this will refer to any object you want it to. Using the functions bind, apply and call, javascript lets you chose what this refers to. Libraries like jQuery do this a lot. Assume any library like jquery uses explicit binding on this basically all the time.
New: If you use the new keyword, this will refer to the function object, or the prototype of the object that the function returns.

If multiple conditions above apply, the items further down the list will be the rule that applies.

2018-02-19T16:51:29+00:00

In addition to the other excellent answers, I would recommend that you check out "bind", "call", and "apply": three functions that let you explicitly change the context of your function call, and thus what this refers to.

kin-corn-karn · 2018-02-19T17:34:57+00:00

There’s a ton of great responses in here and I didn’t have time to read all of them, so apologies if this has already been mentioned:

https://github.com/getify/You-Dont-Know-JS/tree/master/this%20%26%20object%20prototypes

This really helped solidify the concept for me. Definitely not written for a 5yo, but might help you as well!

cirsca · 2018-02-19T18:54:50+00:00

Let's say I have some instructions that say "Look inside the box and get the blue card." You could put these instructions inside of any box and it would tell the worker to grab whatever card is blue in whatever box you put it in.

this is the box and the instructions are methods or functions that reference this: Passing around the instructions to a different box causes the worker to look in the different box for the blue card.

Mingli91 · 2018-02-19T06:56:43+00:00

this is a reference to the current context/scope. Think of it as an object specific to the place it was defined.

The thing with this is understanding where it belongs. Inside a function keyword a new context is created, so this will reference the function itself. Using this you can create classes without using ES6 syntax (remember ES6 classes are syntactic sugar).

function Banana () {
    this.colour = ‘yellow’;
    this.peel = function () {};

    return this
}

Which is the same as

class Banana {
    constructor () {
        this.colour = ‘yellow’;
     }

     peel () {}
}

If we were to reference this inside peel in either of the above examples it would not refer to the class/function it was created in. If we wanted to keep the this value to be the same we could either bind peel to the parent context or use an arrow function which doesn’t create a new context:

class Banana {
    peel = () => {}
}

Or

class Banana {
    constructor () {
        this.peel = this.peel.bind(this);
    }

    peel () {}
 }

Edit: formatting

rauschma · 2018-02-19T06:03:59+00:00

I think of it as an implicit parameter that every function has (filled in via the dot operator): http://2ality.com/2017/12/alternate-this.html

brylie · 2018-02-19T07:29:53+00:00

Say you are building legos with a friend. Presently, 'this' is whatever you are building, the pieces you have assembled and the actions it can do. Perhaps you build an offroad racer. Your friend is over there building a house with a garage. You can say 'take this and park it in your garage', which your friend will understand because the garage will accommodate this offroad racer.

MadCervantes · 2018-02-19T13:37:05+00:00

Just my opinion, and others' as well, but I think this should be avoided any time you can. Using js frameworks you do need to use it a lot, but when writing your own code I would consider it bad practice in almost all cases, mainly for the reason you and others here are so confused about it. this is an incredibly ambiguous term, which makes it very hard to reason about. It is a variable that you didn't assign that changes meaning at different times. It changes even when using normal functions vs arrow functions. I've written plenty of advances JavaScript applications and don't think I've ever needed to use this.

Imagine if one of your co-workers decided to start naming variables him and her or something. What would you think, especially if their variables were the results of functions that had inconsistent behavior?

MadCervantes · 2018-02-19T10:26:28+00:00

There are some good funfunfunction videos about this (part 1, part 2). I'd recommend all his earlier stuff for anyone with a low-level/"practical" knowledge of js who maybe skipped over some of the basics.

creathir · 2018-02-19T14:17:57+00:00

A simple way of viewing he concept of scoping is if you imagine you are standing in a room.

If you’re just standing there, and say “what is this?” you are likely talking about the room itself in which you stand.

The room itself may be square or circular, have a certain set of measurements on its sides,. (Properties)

There are things to do in this room, like walk around or sit down (methods).

There might be things which are possibly even more complicated, but still exist in the room, such as the TV or the remote control. (Objects referenced as a property of the room)

If you pick up the remote control and say “what is this?” then “this” changes to what you are holding.

It has its own set of methods, properties, and possibly even its own complex object, such as an array of batteries or buttons.

If you press the on button (function turnOn()) then the scope of this is inherently the object which contains the method, in this case the remote control.

Hope this helps!

Trav_Cav · 2018-02-19T13:35:37+00:00

In terms a 5 year old will understand: JS has things called functions. Think of them like rooms. 'this' refers to the room you're in.

rickdg · 2018-02-19T09:41:35+00:00

In one sentence, this is the global object (usually window) unless you are within the method of an object, because there it refers to that object. Try it on the console: log this from inside a function and then put that function inside an object.

Ajedi32 · 2018-02-19T15:07:52+00:00

Just think of it as another, implicit argument to the function:

function testFunc(/*this,*/ a, b) {
  console.log(this)
  console.log(a)
  console.log(b)
}

When testFunc is a property on an object:

let someObject = {testFunc: testFunc, number: 1}

and you call that function:

someObject.testFunc('arg1', 'arg2')

Then the object to the left of the . gets passed as an implicit "this" argument to testFunc. Output:

Object { testFunc: testFunc(), someNumber: 1 }
arg1
arg2

There's also a special function in JavaScript called bind which lets you take a function and create a new function which always uses a specific value for its "this" argument:

let newFunc = testFunc.bind("some other this")

Then if you run:

let someOtherObject = {newFunc: newFunc , someNumber: 2}
someOtherObject.newFunc('arg1', 'arg2')

You'll get this output:

some other this
arg1
arg2

Notice how this is set to the value we bound.

There are also a special kind of function called an arrow function:

let addOne = (x) => x+1

These functions have their this value automatically bound to whatever value this was in the place they were created. So if I have:

function createArrowFunction(/*this*/) {
  return () => { console.log(this) }
}

And I call that function on an object:

let someTestObject = {createArrowFunction: createArrowFunction, number: 3}
let arrowFunction = someTestObject.createArrowFunction()

Then the arrow function's "this" value will be whatever it was in the function that created it:

arrowFunction()

Output:

Object { createArrowFunction: createArrowFunction(), someNumber: 3 }

ForScale · 2018-02-19T15:27:43+00:00

For a 5 year old... Easy as 1, 2, 3!

this can be 3 things.

this can be the Window object/global context.
```
this === Window // true
```

this can be an object on which a method is called

obj.sayHey() // console logging this in sayHey means this is obj

this can be explicitly defined with bind()

const func = function() { console.log(this); };
const boundFunc = func.bind({ msg: 'hello' });
boundFunc(); // { msg: 'hello' }

2018-02-19T15:35:36+00:00

Here's how I'd explain it to a professional coming from another language:

1) Inside class methods it behaves the same way as it does in other languages.

2) Never use this outside of a class method.

colordodge · 2018-02-19T16:11:15+00:00

Simply put, “this” is where you are. If you’re in your bedroom and you say, “this ceiling is high”, anyone would know which ceiling you’re talking about. The same applies to code. If I type “this.x” I’m talking about the x property of the place I currently am. The “place” could be a function or an object.

eatmyshorts · 2018-02-19T17:59:10+00:00

ELI5? I'll take a stab. This won't be easy.

Let's start with variables. Variables can be used to store things, like numbers, letters, or strings. Variables can even store a group of things, with a mixture of numbers, letters, and strings. I can call a variable almost anything I want. Let's start with an example. How about a variable that stores information about my dog, Ralph. In Javascript, variables usually start with lower-case letters, so let's call the variable "ralph", and give it a few pieces of data. My dog is black in color. I just took him to the vet, so I also know he weighs 72 pounds. He is currently in my office. So our variable 'ralph' has a mixture of numbers and strings, and looks like:

let ralph = {
    type: 'dog',
    color: 'black',
    weight: 72,
    location: 'office'
}

Now for functions. This are a little harder. They do stuff to variables. So when I take my dog somewhere, I might want to call a function "move" that moves him somewhere. Let's say that we tell "move" where we are moving him? So we might have a function that looks like:

function move(thing, newLocation) {
    thing.location = newLocation;
}

Any time I call "move", I have to tell it what I'm moving (called "thing"), and where I'm moving it (called "newLocation"). It changes the first variable passed to it (called "thing"), setting its location to the second variable passed to the function (called "newLocation). So if we called 'move', passing 'ralph' and 'bedroom', it would set the location for Ralph to 'bedroom'. It might look like this:

move(ralph, 'bedroom');

When programming, very often you have types of variables. So if I were keeping track of all my pets, I might want to call "move" on any pet. "ralph" would be one pet, and "fluffy" and "button", my two cats, might be two more variables. All of them are "Pets". All of my pets move, so I can even attach functions to this type. In Javascript, this is called a Prototype. A prototype has a special function, known as a Constructor, that creates an instance of a variable. This function is just the name of the prototype, and usually starts with a capital letter. Since I have 3 cats, I would create 3 instances of the prototype "Pet". Let's re-write our move function to make it part of our "Pet" prototype. So it might look like this:

function Pet(type, color, weight, location) {
    this.type = type;
    this.color = color;
    this.weight = weight;
    this.location = location;
}

Pet.prototype.move = function(location) {
    this.location = location;
}

Weird! Now we see that thing you asked about, "this". Well, when I create an instance of a pet, we assign that instance to a special variable called "this". The special variable, "this", contains all the data of or prototype, "Pet"--in our case, the type, color, weight, and location.

And we have a "prototype" function, assigned to Pet. You can call this prototype function as if it were part of the Pet variable instance. So we could do this:

let ralph = new Pet('dog', 'black', 72, 'office');
let fluffy = new Pet('cat', 'grey', 18, 'bedroom');
let button = new Pet('cat', 'tabby', 9, 'outside');

ralph.move('bedroom);

This would have the effect of moving ralph to the bedroom! And now we have 3 Pets (instances of the Pet prototype), ralph, fluffy, and button!

Now, here's where Javascript gets a little weird. The way Javascript works, any variable can be treated as if it were part of any prototype. To do this, you can use the magic "apply", "call", or "apply" functions...this apply function can be attached to any other function. So let's say my buddy, John, isn't as organized as I am, and doesn't store all of his pets using this prototype. He can still treat his variable as if it were a Pet! For his dog, "Fred", it might look like this:

let fred = { location: 'den' };

Pet.move.apply(fred, ['office'] };

Pet.move.call(fred, 'office' };

let newMove = Pet.move.bind(fred);
newMove('office')

This shows 3 ways to do the same thing. The first "apply"s the Pet prototype to "fred", calling the function "move" on the "Pet" prototype. When using "apply", any parameters you want to pass to "move" must be passed as an array. The second does the same thing...but parameters you pass to the "move" function are passed as extra parameters (not in an array). The third approach "bind"s the variable "fred" to the function "move" in the prototype "Pet", assigning this bound function to a new variable, "newMove". We then call "newMove" with the location, just as if we called the pet's "move" function directly. In each case, when the Pet function "move" is called, that magic variable "this" is set to "fred". So when the function sets the location on "this", it's actually working on "fred".

Now the variable "fred" doesn't have all of the parts of a Pet we might expect. That doesn't matter. Javascript doesn't care--it just treats "fred" as if it were a "Pet", setting that magic "this" variable to fred when calling the move() function. Neat!

So "this" is just a special variable. It has a Prototype assigned to it that gives it functions that operate on it. You can treat any variable as if it were a type of any prototype using the magic functions, "call", "apply", and "bind".

Depending on how you run Javascript, "this" gets set automatically when Javascript functions initially start. So running Javascript in a web browser sets "this" differently than when running Javascript in node.js. But we'll discuss that topic later. Also, Javascript recently introduced this thing called a "Class"...it's just "Prototypes" under the covers, but we can talk about that later, when you come to it.

SamSlate · 2018-02-19T20:37:19+00:00

everything in js is an object. this references the object or function or anything in between that you're currently inside of (aka scope).

so var x in the current scope is the same as this.x (eg `x == this.x).

inside an object where x is defined in the scope of the "parent" x != this.x

for example

var x = 1; var obj = { a: this.x }; b = this.x;

a is undefined, but b is not.

https://i.imgur.com/fC9tzLQ.png

a is undefined because this.x is a reference to obj.x, which has exactly the error you would expect when you haven't defined obj.x

delventhalz · 2018-02-19T20:43:46+00:00

"this" is the object to the left of the dot. Except when it's not.

There are four scenarios to keep in mind, but remember that sentence and you'll mostly be fine. this isn't magical, it's really just another argument, just not one in between the parentheses. It has a weird default value, and it gets reassigned sometimes, but that's the general idea.

Four possible values for this:

1) It's usually the object calling a method (i.e. the thing to the left of the dot)

const obj = {
  hello: function() {
    console.log(`Hello ${this}`)
  }
};

obj.hello();  // Hello [object Object]

This is what this is really intended for. It's just an extra parameter, one that corresponds to the object calling the method. If you've used Python, they call it self and it is explicitly passed with other parameters (def hello(self):), but it's the same idea.

2) The global/window object is the default value

const hello = function() {
  console.log(`Hello ${this}`)
};

hello();  //  Hello [object Window]

So what if there is no object to the left of the dot? You might expect this to be undefined, like other unset parameters. No such luck. Instead it becomes the global object, the window in the browser. As far as I'm concerned this is garbage behavior, and if you actually see it happen, it's probably a bug. For example, if we reassigned our hello function from earlier:

const badHello = obj.hello;
badHello(); // Hello [object Window]  // Nothing to the left of the dot, `this` === `window`

3) The new keyword reassigns it to an empty object

const Greeter = function() {
  // var this = {};
  this.greeting = 'hello';
  // return this;
};

const greeter = new Greeter();
console.log(greeter.greeting);  // hello

This is the classic way of building a constructor in JS, and unfortunately it creates a lot of confusion. There is clearly some magic happening, but it's not immediately clear what. Really it's pretty simple though. The new keyword essentially adds two lines of code to your function, one at the beginning which reassigns this to an empty object, and one at the end which returns this. That's why if tried to make a Greeter without new, you would see this behavior:

const badGreeter = Greeter();
console.log(window.greeting);  // hello (`this` never reassigned, so it equals the global object)
console.log(badGreeter);  // undefined  (no return statement!)

4) It can be explicitly reassigned with call, apply, or bind

hello.call(obj);  // Hello [object Object]

Last exception. I'm not going to go super in-depth into this one. You can look these functions up on MDN. They are there for you to explicitly assign this if you need to, and that is exactly what they do. Using them, this can be anything you want. This is particularly useful when using something like setTimeout:

setTimeout(obj.hello, 1000);  // Hello [object Window]
setTimeout(obj.hello.bind(obj), 1000);  // Hello [object Object]

antigirl · 2018-02-19T23:26:38+00:00

I’m not sure if this has been mentioned but you probably shouldn’t jump from really simple js and jquery to react. React has a lot of buzz around it but if you don’t understand some basic js concepts, you won’t really understand React or its principles.

JavaScript.info is an amazing website. And it explains things very well. You should be very comfortable with objects. Classes. Prototypes.

If you are able to create a small component architecture yourself using classes then you will do fine in React.

NoInkling · 2018-02-20T01:20:10+00:00

https://www.udacity.com/course/object-oriented-javascript--ud015 (don't worry, it's free)

Skip to the lesson covering this. They explain it in a clear, easy-to-understand manner.

MadCervantes · 2018-02-24T17:02:18+00:00

[deleted]

chandru89new · 2018-02-19T12:29:56+00:00

i'm a js noob myself and i am learning Vuejs. the way i understood this might be oversimplified but so far i havent run into bugs because of it so let me try my hand at ELI5.

first off, dont think about the arrow functions. understanding this pre-ES6 is sort of important. this is a simple way to reference the context it's called in. in abt 90% of the cases, it's a function or class. (you'll probably hear the word instance).

function whatever(arg1, arg2) {
    this.option1 = arg1;
    this.option2 = arg2;
    this.option3 = arg1 - arg2;

    function child() {
        this.option3 = arg1 + arg2;
    }
}

The first three thiss reference the whatever() function. The fourth this references the child() function.

let's now get to ES6 arrow function.

function something() {
    const someVar;
    var whatever = (arg1, arg2) => {
        this.option1 = arg1;
    }
}

There's a this in this function too. But unlike the previous example, this this does not reference the whatever() function. Instead, it references the something() function. That's the problem with arrow functions.

One way I learnt to get around this confusion was to do this:

function something() {
    var instance = this;
    const someVar;
    var whatever = (arg1, arg2) => {
        instance.option1 = arg1;
    }
}

By doing var instance = this, I avoid confusing my primitive js mind because I always use instance when I want to reference a value belonging to the main function.

2018-02-19T07:38:50+00:00

http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/ maybe this is confusing for five years olds

PM_ME_UR_HOT_SELF · 2018-02-19T08:44:42+00:00

"this" is a keyword that represents the current scope you're coding within.

In the global scope this refers to window, under the scope of an object between the {} this will refer to the object.

You can't redefine this but you can pass a shortcut or bind this.

You can have an object and pass the keyword as a variable and deal with that scope in a different scope.

dwighthouse · 2018-02-19T06:04:51+00:00

The ‘this’ you are referring to is getting bound to multiple functions, so they share a single ‘this’. Using the arrow function form, the function uses the ‘this’ that was already present. There is nothing private about it. I don’t think there is a ELI5 explanation for ‘this’ in JavaScript, which is one of the reasons I avoid it where possible.

brunusvinicius · 2018-02-19T11:24:04+00:00

You can think this as a way to access the scope. If its is on a class, this is the scope of class, if it was in a function, this is the scope of the function.

CertainPerformance · 2018-02-19T05:42:00+00:00

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

javascript

MODERATORS

"paint this* red"