0 to ES6 – LET Declartions – CONSTDeclarations
0 to ES6
The Catch Up
Rushaine McBean
@copasetickid
Introduce myself, mention twitter handle, that I’m JS & Ruby developerYOLO
As the 6 God likes to put it “YOLO” You only live once and sometimes you may only get to write it once to start now but now, now after this talkDefining Variables
Intro the first section of the talkVAR Declartions
var firstName = "Britney";Variables defined with the keyword ‘var’ gets hoisted by the compiler automatically and depending on where their declared gets attached to the function scope here get’s hoisted
var firstName = "Britney";
(function() {
var firstName = "Justin";
console.log(firstName); //Justin;
})();
console.log(firstName); //Britney
Variables defined with the keyword ‘var’ gets hoisted by the compiler automatically and depending on where their declared gets attached to the function scope (or global scope) like the top level declaration
This would be the pre-ES6 way of defining variables by making them “function scope”
LET Declartions
let firstName = "Britney";Defining a let variable looks like this and you make think what’s the advantage in using this over var, it’s still three keystrokes I have to make if I don’t have shortcuts enabled in my text editor of choice
Block Scoping
let total = 6;
if(total > 1) {
let justSold = 2;
}
console.log(total - justSold); //justSold is undefined
Now these kinds of declarations are bound to a block so here listing is not defined;
Variables aren’t accessible
var total = 6;
if(total > 1) {
let total = total = 24;
console.log('Total: ', total); // 24
}
console.log('Total: ', total); //6
Looping with LET
var foo = 2, bar = foo * 3;
for(let i = foo; foo <= bar; i++) {
let sequence = i + 10;
console.log(sequence); // 12, 13, 14, 15, 16
}
Reduces memory as variables aren’t leaked anymore and they have lexical scope so accessing ‘sequence’ outside the loop will throw a ReferenceError
CONSTDeclarations
const firstName = "Tori"; firstName = "Florence"; // firstName is read-onlyAnother form of block-scoped declarations are const which are read-only; Here you aren’t allowed to change the value once it’s been set, it respects block scope like LET
var NAME = "LORDE";This is the old stylistic way we would have written but here there’s no enforcement by the compiler so we would have to make sure this never changed ourselves.
const albums = ['How Big, How Blue, How Beautiful', 'Unbreakable Smile'];
albums.push('Compton: A Soundtrack by Dr. Dre');
console.log(albums);
//['How Big, How Blue, How Beautiful', 'Unbreakable Smile',
//'Compton: A Soundtrack by Dr. Dre']
podcasts = ['Dark Sky Paradise']; // Type error / read-only
They can however be modified when the value itself is an object or array as you’re changing the value and not the assignment itself.
Trying to override podcasts fails at it only holds a reference to that array
New Syntax For Functions
If you’ve used or still use coffee script this not a new concept to you as their similar to Fat arrows in CS and called arrow functions in ES6 and this allows us to clean our codeArrow Functions
var capitalize = function(word) {
return word.charAt(0).toUpperCase() + word.substr(1).toLowerCase();
}
var capitalize = (word) => return word.charAt(0).toUpperCase() + word.substr(1).toLowerCase();
var capitalize = (word) => {
return word.charAt(0).toUpperCase() + word.substr(1).toLowerCase();
}
So the first function is pre ES6 way of functions the two example below it or two ways to write using ES6; in es6 you’re able to skip the braces for single line arrow bodies with the return being implict & there but not for the last example so if you want to save for keystrokes you can write that but when using braces the return is explicit
var capitalize = (word) => {
return word.charAt(0).toUpperCase() + word.substr(1).toLowerCase();
}
var capitalizeEachWord = (value) => {
if (value) {
return value.replace(/\w\S*g, function(word) {
return capitaliize(word);
});
}
}
console.log(capitalizeEachWord('so far gone')); //So Far Gone
So now we have utility methods around the site that can use methods instead of recreating these actions within functions and now looks a cleaner and the developer can feel happier about them selves
Development Workflow
Transpilers
So if you’re like me and do mostly client side JS for somewhat older browsers you’ll need to a use a transpiler to and there’s many out there such as Babel that have online repl’s for you to test good and see it’s output; These for work purposes I’m using There's a Tracuer & Babel both with online repl'sTake a Moment
Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.
0 to ES6
The Catch Up