Zum Hauptinhalt springen

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