JavaScript Features

Core Language Features

Variables and Data Types

Variable Declarations

var oldWay = 'legacy';
let mutable = 'modern';
const immutable = 'constant';

Primitive Types

• Number: Both integer and floating-point
• String: Text data
• Boolean: true/false
• undefined: Uninitialized value
• null: Intentional absence of value
• Symbol: Unique identifier
• BigInt: Large integers

Functions

Function Declarations

// Traditional function
function greet(name) {
  return `Hello, ${name}!`;
}

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

// Function with default parameters
function greetWithDefault(name = 'Guest') {
  return `Hello, ${name}!`;
}

Objects and Classes

Object Literals

const person = {
  name: 'John',
  age: 30,
  greet() {
    return `Hello, I'm ${this.name}`;
  },
};

Classes

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return `Hello, I'm ${this.name}`;
  }
}

Modern JavaScript Features (ES6+)

Destructuring

Array Destructuring

const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(rest); // [3, 4, 5]

Object Destructuring

const { name, age, ...other } = person;
console.log(name); // "John"

Spread Operator

// Array spread
const numbers = [1, 2, 3];
const moreNumbers = [...numbers, 4, 5];

// Object spread
const enhanced = { ...person, role: 'developer' };

Template Literals

const name = 'John';
const greeting = `Hello ${name},
Welcome to JavaScript!`;

Optional Chaining

const value = object?.property?.nestedProperty;
const result = array?.[0]?.property;

Nullish Coalescing

const value = null;
const fallback = value ?? 'default';

Modules

Exporting

// Named exports
export const helper = () => {};
export class Utils {}

// Default export
export default class MainClass {}

Importing

// Named imports
import { helper, Utils } from './module';

// Default import
import MainClass from './module';

// Namespace import
import * as module from './module';

Asynchronous Features

Promises

const fetchData = () => {
  return new Promise((resolve, reject) => {
    // Async operation
    if (success) {
      resolve(data);
    } else {
      reject(error);
    }
  });
};

Async/Await

async function getData() {
  try {
    const result = await fetchData();
    return result;
  } catch (error) {
    console.error(error);
  }
}

Iterators and Generators

// Iterator
const iterator = {
  *[Symbol.iterator]() {
    yield 1;
    yield 2;
    yield 3;
  },
};

// Generator
function* numberGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

Next Steps

1. Learn about the Advantages & Disadvantages of using JavaScript
2. Set up your Development Environment
3. Explore Core Concepts for advanced patterns