Lesson 1: JS Syntax & ES6+

In this lesson, you’ll get familiar with modern JavaScript syntax and core ES6+ features. We’ll cover how to declare variables with let and const, write concise arrow functions, use template literals for string interpolation, destructure arrays and objects, and organize code with modules.

Modern Syntax: Variables, Arrow Functions & Modules

ES6 introduced several syntax improvements that make JavaScript code more readable and maintainable. Let’s look at examples of each feature. 

// Variable declarations
const name = 'Alice';
let age = 30;

// Arrow function
const greet = (user) => `Hello, ${user}!`;

// Template literal
console.log(`${greet(name)} You are ${age} years old.`);

// Destructuring
const person = { first: 'Alice', last: 'Smith' };
const { first, last } = person;

// Module export/import
// file: math.js
export function add(a, b) {
  return a + b;
}
// file: main.js
import { add } from './math.js';
console.log(add(2, 3));

Key Points

  • let & const: block-scoped variables, prefer const for immutables.
  • Arrow Functions: concise syntax and lexical this.
  • Template Literals: backticks for embedded expressions and multi-line strings.
  • Destructuring: extract properties from objects or elements from arrays.
  • ES Modules: use export and import to split code into reusable files.
← Back to Course Next: DOM Manipulation →