#18 JavaScript Code Snippets: ES6+ Features

const user = {
  name: "JS"
};

console.log(
 user?.name
);

Optional chaining safely accesses existing properties.

const user = {
  profile: {
    city: "Delhi"
  }
};

console.log(
 user?.profile?.city
);

Nested optional chaining works safely.

const user = {};

console.log(
 user?.name
);

Missing properties return undefined.

const user = null;

console.log(
 user?.name
);

Optional chaining prevents runtime errors on null.

const users = [
 { name: "A" }
];

console.log(
 users?.[0]?.name
);

Optional chaining also works with arrays.

const value = null;

console.log(
 value ?? "Default"
);

Nullish coalescing uses the fallback for null.

const value = undefined;

console.log(
 value ?? "Default"
);

Undefined triggers the fallback value.

const value = "";

console.log(
 value ?? "Default"
);

?? only checks for null or undefined.

const value = 0;

console.log(
 value ?? 100
);

0 is a valid value for ??.

const value = false;

console.log(
 value ?? true
);

false is not nullish.

let value = "";

value ||= "JS";

console.log(value);

||= assigns when the left side is falsy.

let value = "React";

value &&= "JS";

console.log(value);

&&= assigns when the left side is truthy.

let value = null;

value ??= "JavaScript";

console.log(value);

??= assigns only for null or undefined.

const key = "name";

const user = {
 [key]: "JS"
};

console.log(
 user.name
);

Computed property names use variable values as keys.

const user = {
 name: "JS",
 age: 25
};

console.log(
 Object.entries(user).length
);

Object.entries returns key-value pairs.

const map =
 new Map();

map.set(
 "name",
 "JS"
);

console.log(
 map.get("name")
);

get() returns the value associated with the key.

const map =
 new Map();

map.set(
 "a",
 10
);

console.log(
 map.has("a")
);

has() checks whether a key exists.

const map =
 new Map();

map.set(
 "x",
 1
);

map.delete("x");

console.log(
 map.has("x")
);

delete() removes the key-value pair.

const map =
 new Map();

map.set("a",1);
map.set("b",2);

console.log(
 map.size
);

size returns the number of entries.

const map =
 new Map();

map.set(
 "a",
 10
);

map.set(
 "a",
 20
);

console.log(
 map.get("a")
);

Duplicate keys overwrite previous values.

const set =
 new Set();

set.add(1);
set.add(2);

console.log(
 set.size
);

Set stores unique values.

const set =
 new Set([
   1,1,2,2
 ]);

console.log(
 set.size
);

Duplicate values are removed automatically.

const set =
 new Set([
   "JS"
 ]);

console.log(
 set.has("JS")
);

has() checks value existence.

const set =
 new Set([
   1,2
 ]);

set.delete(1);

console.log(
 set.has(1)
);

delete removes the specified value.

const set =
 new Set();

set.add(1);
set.add(1);
set.add(1);

console.log(
 set.size
);

Only unique values are stored.

const wm =
 new WeakMap();

const obj = {};

wm.set(
 obj,
 "JS"
);

console.log(
 wm.get(obj)
);

WeakMap keys must be objects.

const ws =
 new WeakSet();

const obj = {};

ws.add(obj);

console.log(
 ws.has(obj)
);

WeakSet stores object references only.

const user = {
 name: "JS",
 age: 25
};

console.log(
 Object.keys(user)
   .length
);

Object.keys returns all property names.

const user = {
 name: "JS",
 age: 25
};

console.log(
 Object.values(user)
   .length
);

Object.values returns all property values.

const entries = [
 ["name","JS"]
];

const user =
 Object.fromEntries(
   entries
 );

console.log(
 user.name
);

Object.fromEntries converts entries into an object.

const id =
 Symbol();

console.log(
 typeof id
);

Symbol is a primitive data type.

console.log(
 Symbol("id") ===
 Symbol("id")
);

Every Symbol is unique.

const id =
 Symbol();

const user = {
 [id]: "JS"
};

console.log(
 user[id]
);

Symbol properties must be accessed using the same Symbol reference.

function* gen() {
 yield 1;
}

const g = gen();

console.log(
 g.next().value
);

yield pauses execution and returns a value.

function* gen() {
 yield "JS";
}

const g = gen();

console.log(
 g.next().done
);

The generator has not completed after the first yield.

function* gen() {
 yield 1;
 yield 2;
}

const g = gen();

g.next();

console.log(
 g.next().value
);

The second next() resumes execution from the previous yield.

function* gen() {
 yield 10;
 yield 20;
}

const g = gen();

console.log(
 g.next().value +
 g.next().value
);

10 + 20 = 30.

function* gen() {
 return 100;
}

const g = gen();

console.log(
 g.next().value
);

A returned value becomes the final generator value.

const set =
 new Set([1,2,3]);

let sum = 0;

for (const n of set) {
 sum += n;
}

console.log(sum);

for...of iterates over Set values.

const map =
 new Map([
  ["a",1],
  ["b",2]
 ]);

let total = 0;

for (const [,v] of map) {
 total += v;
}

console.log(total);

Map iteration returns [key,value] pairs.

const arr =
 Array.from("JS");

console.log(
 arr.length
);

Array.from converts iterable values into arrays.

console.log(
 "JavaScript"
  .includes("Script")
);

includes checks for substring existence.

console.log(
 Number.isNaN(NaN)
);

Number.isNaN accurately checks for NaN.

console.log(
 Object.is(
  NaN,
  NaN
 )
);

Object.is treats NaN as equal to NaN.

console.log(
 NaN === NaN
);

console.log(
 Object.is(
  NaN,
  NaN
 )
);

NaN is never equal to itself using ===, but Object.is correctly identifies equality.