Prerequisites

Before diving into Vue.js, ensure you have solid foundational knowledge of HTML, CSS, and JavaScript. This is an essential prerequisite.

When first learning Vue, avoid using project scaffolding tools like vue-cli. Instead, use simple <script> tags to replicate the examples from tutorials. This approach helps you understand the core concepts without getting overwhelmed by build tools. Starting with vue-cli or similar tools is not recommended, especially if you lack experience with Node.js and Webpack.

Understanding ECMAScript and ES6

Brief History

1997 saw the release of ECMAScript 1.0, followed by ECMAScript 3.0 in December 1999. Version 3.0 achieved widespread industry support and established the fundamental JavaScript syntax that subsequent versions would build upon. When you first learn JavaScript, you're essentially learning the ES3 syntax.

ECMAScript 4.0, developed in 2000, was the precursor to ES6. However, this version represented such a dramatic overhaul of ES3 that it was temporarily set aside. In December 2009, ECMAScript 5.0 was officially released, with ES5.1 becoming an ISO international standard in 2011.

By 2013, the ES6 draft was frozen with no new features being added—these would be deferred to ES7. In June 2015, ES6 was officially ratified as an international standard.

For those wanting to explore ES6 further, the documentation at http://es6.ruanyifeng.com/ provides comprehensive coverage.

ES6 Syntax Essentials

Block Scoping with let and const

ES6 introduced the let command for variable declaration. Its syntax resembles var, but let restricts variable access to the block where it's declared.

In the following example, the let-declared variable is inaccessible outside its block, while the var-declared variable remains available:

{
  let blockVar = 'inside';
  var functionVar = 'outside';
}

console.log(functionVar); // 'outside'
console.log(blockVar); // ReferenceError

The distinction becomes critical in loop contexts:

var handlers = [];
for (var index = 0; index < 5; index++) {
  handlers[index] = function() {
    console.log(index);
  };
}
handlers[2](); // Output: 5

In this case, the var declaration creates a single index variable in the global scope. All function reference the same variable, which reaches 5 after the loop completes. Using let instead creates a new binding for each iteration:

let handlers = [];
for (let index = 0; index < 5; index++) {
  handlers[index] = function() {
    console.log(index);
  };
}
handlers[2](); // Output: 2

Each iteration with let creates a fresh index variable, preserving its value at that specific iteration.

No Variable Hoisting

The var keyword exhibits hoisting, allowing variables to be referenced before their declaration—though they hold undefined until initialized:

console.log(hoistedVar); // undefined
var hoistedVar = 'value';

The let keyword prevents this behavior. Accessing a let variable before declaration throws a ReferenceError:

console.log(temporalVar); // ReferenceError: Cannot access 'temporalVar' before initialization
let temporalVar = 'value';

No Redeclaration

The let keyword prohibits redeclaring variables within the same scope:

// Invalid - function-scoped redeclaration
function invalidExample() {
  let message = 'first';
  var message = 'second'; // SyntaxError
}

// Invalid - block-scoped redeclaration  
function alsoInvalid() {
  let message = 'first';
  let message = 'second'; // SyntaxError
}

Similarly, parameter reclaration within function scope is not allowed:

function demo(param) {
  let param; // SyntaxError
}

function validDemo(param) {
  {
    let param; // This is valid - different block scope
  }
}

The Case for Block Scope

Prior to ES6, JavaScript only had global and function scopes, lacking proper block scoping. This limitation created problematic scenarios.

Variible Shadowing:

let timestamp = new Date();

function displayTime() {
  console.log(timestamp);
  if (false) {
    let timestamp = 'overridden';
  }
}

displayTime(); // undefined

The intent was to use the outer timestamp variable inside the function, but variable hoisting causes the inner timestamp to shadow it.

Accidental Global Variables:

let greeting = 'hello';

for (let i = 0; i < greeting.length; i++) {
  console.log(greeting[i]);
}

console.log(i); // 5

The loop counter i leaks into the global scope, persisting after the loop completes.

The const Declaration

The const keyword declares a read-only constant. Once declared, its value cannot be reassigned:

const MAX_SIZE = 100;
MAX_SIZE = 200; // TypeError: Assignment to constant variable

Constants must be initialized at declaration time:

const PENDING; // SyntaxError: Missing initializer in const declaration

Like let, const respects block scoping:

if (true) {
  const THRESHOLD = 42;
}

console.log(THRESHOLD); // ReferenceError: THRESHOLD is not defined