Closure Are They Obsoletes

Closure Are They Obsoletes
0.0 0

#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;
}

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


#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?


#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;
  }