Closure Are They Obsoletes

1

Hi,
I’m learning about the Closure, since I realize with es6 we don’t need to care anymore.
Am I right?
Do you find a context in es6 to use it?

here an exemple with es6, this code work

for (let i = 0; i < 3; i++) {
  let millisecondes = i*1000
  setTimeout( () => {
    if (i <= 3) {
     console.log(i++)
   } else {
     console.log('go to moon')
   }
  }, millisecondes )
}

es5 the same code doesn’t work

for (var i = 0; i < 3; i++) {
  var millisecondes = i*1000;
  setTimeout( function(){
    if (i <= 3) {
     console.log(i++);
   } else {
     console.log('go to moon');
   }
  }, millisecondes );
}
2

Closure is a fundamental part of the language. Scope is different with let and arrow functions, but closures are still there, and very useful.

3

I don’t find any exemple with es6 ?

4

this closure is unecessary in es6:

var planetes = ['terre', 'mars', 'venus', 'pluton'];

 // button
var creerBouton = function(label) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode(label));
  document.body.appendChild(btn);
  return btn;
};

// create buttons and add a text
for (var h = 0; h <= 2; h++) {
  var btn = creerBouton(planetes[h]);
  btn.onclick = (function(h) {
    return function() {
      console.log('Cette super planete est '+ planete[h]);
    };
  })(h);
}
5

an other exemple in es6 with closure:
without it doesn’t work, I Iost?
Edit: let is global in the {} only

//closure es6
for (let i = 0; i <= 2; i++) {
  let btn = creerBouton(planetes[i]);
  btn.onclick = ( (i) => {
    return () => {
      console.log('Cette super planete est '+ planete[i])
    }
  })(i)
}
6 
function ObjectFactory() {
    var height = 100,
          width = 100;

    width = (_newValue) => {
      if(!_newValue) { return width; }
      width = _newValue;
      return object();
    }

    height = (_newValue) => {
      if(!_newValue) { return width; }
      height = _newValue;
      return object();
    }

    function object() {
      //This can access height, width, and all functions
    }

    return object;
}
1 Like
7

I have an access.

(function ObjectFactory() {
    let height = 100,
          width = 100;

  //console.log(height );
    width = (_newValue) => {
      if(!_newValue) { return width; }
      width = _newValue;
      return object();
    }

    height = (_newValue) => {
      if(!_newValue) { return width; }
      height = _newValue;
      return height;
    }

    let oj = (function object() {
      console.log(height(22) );
      //This can access height, width, and all functions
    }())
    return object;
})()
8

That makes the object only usable once, but regardless, you’re still using closures. They’re an inherent part of the language, JavaScript won’t function without them.

1 Like
9

@PortableStick Could you tell me if this following code is a recommended way to make and access “private” properties on ES6 classes ? I knew the way you explained earlier and i’m kinda new to ES6.

class Box {
	
	constructor(width, height) {
		this.width = width;
		this.height = height;
		this._password = "Secret words";
	}
	
	get password() {
		return this._password;
	}
}

Box.somePrivateStuff = 200;

let smallBox = new Box(10,10);


smallBox.width; // outputs 10

smallBox.somePrivateStuff; // outputs undefined

Box.somePrivateStuff; // outputs 200

smallBox.password; // outputs "Secret words"

Box.password; // outputs undefined
10

I found an excellent book online:
http://exploringjs.com/es6/ch_parameter-handling.html
But I don’t get for a private member, with a closure in this case but in object, I have no idea.
Edit
Do you mean a method you can only call from inside the class?

1 Like
11

Honestly, I don’t know. I’ve used ES6 classes for React components, and made use of a babel plugin to use static properties. From what I’ve learned, I’d rather avoid the class keyword entirely and just keep using closures for private methods and properties as usual.

12 
class Box {

  constructor(width, height) {
    this.width = width;
    this.height = height;
    this.password = "Secret words";
  }

  privateMemb(privateMember ) {
    return add = this.password;
  }

  setPassword(privateMemb){
    return this.password = privateMemb;
  }

  getPassword() {
    return privateMember;
  }
}

let smallBox = new Box(10,10);

console.log(smallBox.setPassword('Rémi') );// set a password

console.log(smallBox.getPassword() );// get a password

getPassword is private you can have access only from inside the class.

Edit ; i’m experiment, so…

13

I missed the closure.

  //closure here 
  privateMemb(privateMember ) {
    return (privateMember) => {
      add = privateMember;
    }
  }

  setPassword(privateMemb){
    return this.password = privateMemb;
  }