What does the function then() mean in JavaScript?

Here is a thing I made for myself to clear out how things work. I guess others too can find this concrete example useful:

doit().then(function() { log('Now finally done!') });
log('---- But notice where this ends up!');

// For pedagogical reasons I originally wrote the following doit()-function so that 
// it was clear that it is a promise. That way wasn't really a normal way to do 
// it though, and therefore Slikts edited my answer. I therefore now want to remind 
// you here that the return value of the following function is a promise, because 
// it is an async function (every async function returns a promise). 
async function doit() {
  log('Calling someTimeConsumingThing');
  await someTimeConsumingThing();
  log('Ready with someTimeConsumingThing');
}

function someTimeConsumingThing() {
  return new Promise(function(resolve,reject) {
    setTimeout(resolve, 2000);
  })
}

function log(txt) {
  document.getElementById('msg').innerHTML += txt + '<br>'
}

<div id='msg'></div>

It's about the use of curly braces {} in our arrow functions:

Those 3 examples are doing the same thing (nothing, but have valid grammar, and are a valid Promise chain!)

new Promise(function(ok) {
   ok( 
      /* myFunc1(param1, param2, ..) */
   )
}).then(function(){
     /* myFunc1 succeed */
     /* Launch something else */
     /* console.log(whateverparam1) */
     /* myFunc2(whateverparam1, otherparam, ..) */
}).then(function(){
     /* myFunc2 succeed */
     /* Launch something else */
     /* myFunc3(whatever38, ..) */
})

console.log("This code has no errors GG!")

The same logic using arrow functions shorthand without {}

new Promise((ok) =>
   ok( 
      /* myFunc1(param1, param2, ..) */
).then(() =>
     0 // HEY DID YOU NOTICE! A number that does nothing,
     // but otherwise the parsing will fail!
     // The code is pretty clean but have a major downside
     // As arrow functions without {} can contains only one declaration
     // console.log("something") will FAIL here
).then(() =>
     "" // HEY DID YOU NOTICE! An empty string that does nothing,
     // but otherwise the parsing will fail!
     // As arrow functions without {} can contains only one declaration
     // We can't add more code here, hence:
     // console.log("something")
     // Will break the whole promise
     // This is likely the error in y(our) code ;)
))

console.log("This code has no errors GG!")

Arrow function with {}

new Promise( (ok) => {
   ok( 
      /* myFunc1(param1, param2, ..) */
   )
}).then( () => {
     /* myFunc1 succeed */
     /* Launch something else */
}).then( () => {
     /* myFunc2 succeed */
     /* Launch something else */
     /* myFunc3(whatever38, ..) */
     console.log("something")
     /* More console logs! */
     console.log("something else")
})

console.log("This code has no errors GG!")

.then returns a promise in async function.

Good Example would be:

var doSome = new Promise(function(resolve, reject){
    resolve('I am doing something');
});

doSome.then(function(value){
    console.log(value);
});

To add another logic to it, you can also add the reject('I am the rejected param') call the function and console.log it.

Here is a small JS_Fiddle.

then is a method callback stack which is available after a promise is resolved it is part of library like jQuery but now it is available in native JavaScript and below is the detail explanation how it works

You can do a Promise in native JavaScript : just like there are promises in jQuery, Every promise can be stacked and then can be called with Resolve and Reject callbacks, This is how you can chain asynchronous calls.

I forked and Edited from MSDN Docs on Battery charging status..

What this does is try to find out if user laptop or device is charging battery. then is called and you can do your work post success.

navigator
    .getBattery()
    .then(function(battery) {
       var charging = battery.charging;
       alert(charging);
    })
    .then(function(){alert("YeoMan : SINGH is King !!");});

Another es6 Example

function fetchAsync (url, timeout, onData, onError) {
    …
}
let fetchPromised = (url, timeout) => {
    return new Promise((resolve, reject) => {
        fetchAsync(url, timeout, resolve, reject)
    })
}
Promise.all([
    fetchPromised("http://backend/foo.txt", 500),
    fetchPromised("http://backend/bar.txt", 500),
    fetchPromised("http://backend/baz.txt", 500)
]).then((data) => {
    let [ foo, bar, baz ] = data
    console.log(`success: foo=${foo} bar=${bar} baz=${baz}`)
}, (err) => {
    console.log(`error: ${err}`)
})

Definition :: then is a method used to solve Asynchronous callbacks

this is introduced in ES6

Please find the proper documentation here Es6 Promises

I am about 8 years late, well...anyways, I don't really know what then() does but maybe MDN might have an answer. Actually, I might actually understand it a little more.

This will show you all the information (hopefully), you need. Unless someone already posted this link. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

The format is promise.prototype.then() The promise and prototype are kind of like variables but not like variables in javascript, I mean like other things go there like navigator.getBattery().then() where this one actually exists but is barely used on the web, this one shows statuses about the battery of the device, more information and more on MDN if you are curious.