Rangle.io: React Training
gitbook
gitbook
  • Introduction
  • Setup
  • Functional JavaScript
  • ES6 constructs
    • Default Params
    • Template Literals
    • Destructuring
    • Arrow Functions
    • Promises
    • let and const
    • Modules
  • Thinking in Components
    • Atomic Design
    • Atomic Component Principles
    • Benefits of This Approach
    • The Process
    • Task #1
  • React Components
    • Stateless Components
    • Stateful Components
    • Stateful vs Stateless Components
    • Composition
    • Task #2
    • Task #3
    • Task #4
    • Task #5
  • Immutable
    • What Is Immutability?
    • The Case for Immutability
    • JavaScript Solutions
      • Object.assign
      • Object.freeze
    • Immutable.js Basics
      • Immutable.Map
        • Map.merge
      • Nested Objects
        • Deleting Keys
        • Maps are Iterable
      • Immutable.List
      • Performance
      • Persistent and Transient Data Structures
      • Official Documentation
    • Exercises
      • Task #1
      • Task #2
      • Task #3
      • Task #4
      • Task #5
      • Task #6
      • Task #7
  • Redux
    • Review of Reducers and Pure Functions
    • Redux Reducers
    • Redux Actions
    • Configuring your Application to use Redux
    • Using Redux with Components
    • Redux and Component Architecture
  • Routing
    • React Router
    • Router Redux
  • Forms
    • Redux Form
  • Testing
    • Setup
    • Components
    • Reducers
    • Actions
Powered by GitBook
On this page

Was this helpful?

  1. ES6 constructs

let and const

ES6 introduces the concept of block scoping. Block scoping will be familiar to programmers from other languages like C, Java, or even PHP. In ES5 JavaScript, and earlier, vars are scoped to functions, and they can "see" outside their functions to the outer context.

var five = 5;
var threeAlso = three; // error

function scope1() {
  var three = 3;
  var fiveAlso = five; // == 5
  var sevenALso = seven; // error
}

function scopt2() {
  var seven = 7;
  var fiveAlso = five; // == 5
  var threeAlso = three; // error
}

In ES5 functions were essentially containers that could be "seen" out of, but not into.

In ES6 var still works that way, using functions as containers, but there are two new ways to declare variables: const, and let. const, and let use {, and } blocks as containers, hence "block scope".

Block scoping is most useful during loops. Consider the following:

var i;
for (i = 0; i < 10; i += 1) {
  var j = i;
  let k = i;
}
console.log(j); // 9
console.log(k); // undefined

Despite the introduction of block scoping, functions are still the preferred mechanism for dealing with most loops.

let works like var in the sense that its data is read/write. let is also useful when used in a for loop. For example, without let:

for(var x=0;x<5;x++) {
  setTimeout(()=>console.log(x), 0)
}

Would output 5,5,5,5,5. However, when using let instead of var, the value would be scoped in a way that people would expect.

for(let x=0;x<5;x++) {
  setTimeout(()=>console.log(x), 0)
}

For example:

const myName = 'pat';
let yourName = 'jo';

yourName = 'sam'; // assigns
myName = 'jan';   // error

The read only nature can be demonstrated with any object:

const literal = {};

literal.attribute = 'test'; // fine
literal = []; // error;
PreviousPromisesNextModules

Last updated 6 years ago

Was this helpful?

Alternatively, const is read only. Once const has been assigned, the identifier can not be re-assigned, the value is .

not immutable