Variable Declarations with let and const

Replace var to prevent hoisting issues and scope-related bugs:

let count = 1;
const max = 2;

Template Literals

Simplify string composition using template literals:

const userName = 'deer';
const userAge = 18;
const profile = `Name: ${userName}, Age: ${userAge}`;

// Supports expressions
const status = `${userAge >= 18 ? 'adult' : 'minor'}`;

Arrow Functions

Arrow functions bind this to their lexical scope:

const process = () => {
  // this refers to surrounding context
};

Destructuring

Extract values from arrays or objects:

const data = [1, 2, 5, 7];
const [first, second] = data; // first = 1, second = 2
const [first, , , fourth] = data; // first = 1, fourth = 7

const config = { a: 1, b: 2, c: 3, d: 4 };
const { a: x, b: y } = config; // x = 1, y = 2

// Swap variables
let p = 1;
let q = 2;
[p, q] = [q, p];

Spread Operator

Expand arrays or objects in to new structures:

const list1 = [1, 2, 3];
const list2 = [5, 6, 7];
const combined = [...list1, ...list2];

// Function rest parameters
function handle(...items) {
  console.log(items);
}

const nums = [1, 2, 3, 4, 5];
handle(...nums); // [1, 2, 3, 4, 5]

// Object merging
const person = { name: 'deer', city: 'Beijing', hobby: 'playing' };
const extra = { age: 18 };
const fullProfile = { ...person, ...extra };

const { type, ...rest } = person;

Modules

Export and import functionality between files:

// main.js
export const name = 'deer';
export function process(arg) {
  return arg;
}

// other.js
import { name, process } from './main';

Async/Await

Simplify asynchronous operations:

async function fetchUser(id) {
  const result = await getUserData(id);
  if (result.code === 200) {
    // proceed
  }
}

Array includes() Method

Check for element presence in an array:

const items = ['deer', '18', 'playing'];
if (items.includes('deer')) {
  // do something
}

Object Utility Methods

Access keys, values, and key-value pairs:

const obj = { a: 1, b: 2, c: 3 };
const keys = Object.keys(obj); // ['a', 'b', 'c']
const values = Object.values(obj); // [1, 2, 3]
const entries = Object.entries(obj); // [['a', 1], ['b', 2], ['c', 3]]

for (const [key, value] of entries) {
  console.log(`Key: ${key}, Value: ${value}`);
}

Optional Chaining (?.)

Safely access nested properties:

const info = message?.body?.data?.info;

Nullish Coalescing (??)

Provide fallbacks for null or undefined values:

const fallback = response.data ?? '400';

// Difference from ||:
const val1 = 0 || 'default'; // 'default'
const val2 = null ?? 'default'; // 'default'

Default Parameters

Define default values for function arguments:

function greet(name = 'Guest') {
  return `Hello, ${name}`;
}

Shorthand Object Properties

Omit redundant property assignments:

const name = 'deer';
const city = 'Beijing';
const hobby = 'playing';

const profile = {
  name,
  city,
  hobby
};

Class Syntax

Define classes using modern syntax:

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log(`${this.name} barks`);
  }
}