The rest of the operators

Operators you haven't met yet

An operator is a symbol or a word that works on values. For example, + adds two numbers. You already know many operators:

• Math: +, -, *, and /.
• Assignment: = and +=.
• Comparisons: === and <.
• Logical operators: &&, ||, and !.
• Nullish coalescing, ??, and optional chaining, ?..

This lesson covers the rest. Some are common, like the ternary, ? :. Some are rare, like void. A few are powerful but easy to misuse, like the bitwise operators.

The goal is not clever code. In the Coding style lesson, you learned to avoid tricks that make readers stop and think. Here you learn what each operator means, so you can read it in real code. You also learn when an if statement or a well-named function would be clearer.

The lesson goes in this order:

1. The ternary, for a small choice.
2. typeof and instanceof, for checking what kind of value you have.
3. in and delete, for checking and removing properties.
4. Bitwise operators, which work on the 0s and 1s inside a number.
5. Shifts, the comma operator, and void.
6. A table that shows which operator goes first.

The values an operator works on are called its operands. In 2 + 3, the operands are 2 and 3. Most operators have one or two operands. The conditional operator is the only one with three. That is why people also call it the ternary operator. "Ternary" means "made of three parts". Its shape is:

condition ? valueIfTrue : valueIfFalse

Read it from left to right:

1. JavaScript checks the condition.
2. If the condition is truthy (it counts as true), the result is valueIfTrue, the part after ?.
3. If not, the result is valueIfFalse, the part after :.

The whole ternary is an expression: a piece of code that produces a value. So you can store its result in a variable or return it from a function. You can also put it inside a template literal, a string written in backticks.

1const age = 18;Run2const label = age >= 18 ? "adult" : "minor";3const sentence = `This visitor is an ${label}.`;4console.log(sentence);

A good ternary is short enough to read in one go:

const shipping = cartTotal >= 500 ? "free" : "$5";
console.log(`Shipping is ${shipping}.`);

Before this code runs, cartTotal is set to 650. Line 1 checks whether cartTotal is 500 or more. It is, so shipping gets "free". Line 2 prints Shipping is free.

Here is one more small example. It picks a delivery price for a smaller cart:

const cartTotal = 420;
const delivery = cartTotal >= 500 ? "free" : "$5";
console.log(delivery);

Line 1 stores the cart total, 420. Line 2 checks whether 420 is 500 or more. It isn't, so delivery gets "$5". Line 3 prints $5.

A ternary can hold another ternary inside it. This is called a nested ternary. It makes the reader keep several questions in mind at once:

const label = score >= 90 ? "A" : score >= 80 ? "B" : "keep practicing";

let readableLabel;
if (score >= 90) {
  readableLabel = "A";
} else if (score >= 80) {
  readableLabel = "B";
} else {
  readableLabel = "keep practicing";
}

Both versions give the same result. Line 1 is the nested ternary. Lines 3 to 10 do the same job with if and else. Each choice gets its own line, so it is easier to read.

The next lesson, if, else & conditions, covers if in full. For now, use this rule:

• Use a ternary for one small choice between two values.
• Use if / else when the choice needs more room.

typeof goes in front of a value. It gives back a string that names the kind of value. It works best for primitives: simple values that are not objects, like strings, numbers, and booleans. Its answers are "string", "number", "boolean", "bigint", "symbol", and "undefined". For a function, it says "function". For most objects, including arrays and dates, it just says "object".

instanceof asks a different question. A constructor is a function that makes objects, like Date or Array. value instanceof Date asks: "Was this object made by Date?" An array counts as an Array and also as an Object, because every array is a kind of object. The prototype chain lesson later explains exactly how JavaScript checks this.

1const values = [null, [], new Date(0), "text"];Run2console.log(typeof values[0]);3console.log(Array.isArray(values[1]));4console.log(values[1] instanceof Array);5console.log(values[1] instanceof Object);6console.log(values[3] instanceof String);

The table below helps you pick a check. Find your question in the first column. Use the check in the second column, and read the warning in the third.

A common mistake is typeof value === "array". typeof never gives "array", so this check is always false. Use Array.isArray(value) for arrays. Use instanceof only when your question is "Which constructor made this object?"

"key" in object checks whether JavaScript can find a property with that name on the object. It gives true or false.

It also counts inherited properties. These are properties an object borrows. Every plain object can use some built-in methods, like toString, that it borrows from a shared built-in object. So "toString" in user is true, even though you never added toString to user.

To check only the properties stored on the object itself, use Object.hasOwn(object, "key"). Properties stored on the object itself are called own properties.

delete object.key removes a property from an object. This is useful for an object that you use as a list of named entries. It is not a good way to remove an item from an array. Deleting an array item leaves an empty place, called a hole. The array keeps the same length.

1const user = { name: "Ada", age: 36 };Run2console.log("name" in user);3console.log("toString" in user);4console.log(Object.hasOwn(user, "toString"));5delete user.age;6console.log("age" in user);7const letters = ["a", "b", "c"];8delete letters[1];9console.log(letters.length);10console.log(1 in letters);

The table compares the three. Read each row as: this code, does it count borrowed properties, and when to use it.

For a plain data object, Object.hasOwn is usually clearer than in. It says the key belongs to this object itself.

To remove items from an array, use filter or splice. They close the gap, so the array gets shorter. delete leaves a hole instead.

In the Numbers & math lesson, you learned that JavaScript stores numbers as 64-bit floating-point values. Bitwise operators work differently:

1. First, JavaScript turns the number into a 32-bit whole number. Any fraction is dropped.
2. It treats that whole number as a row of 32 bits. A bit is a tiny switch that is either 0 (off) or 1 (on).
3. Then the operator works on the bits, one column at a time.

1const a = 12; // 000011002const b = 10; // 000010103console.log(a & b);  // both bits are 14console.log(a | b);  // either bit is 15console.log(a ^ b);  // bits are different6console.log(~a);     // flip 32 bits7console.log(a << 1); // shift left8console.log(a >> 1); // shift right9console.log(a >>> 1); // unsigned shift right

The next code shows three results that surprise people. Each one comes from the 32-bit rule:

console.log(2 ** 32 | 0); // 0: wraps to a 32-bit signed integer
console.log(~5);        // -6: flip all 32 bits
console.log(-1 >>> 0);  // 4294967295: read all bits as unsigned

1. ** means "to the power of"; you'll see it again below. 2 ** 32 is 4294967296. That number needs 33 bits, so its 32-bit version is 0.
2. ~5 flips all 32 bits of 5. The result is -6. For whole numbers, ~x always equals -(x + 1).
3. -1 has all 32 bits switched on. >>> 0 reads those bits as a number that can't be negative, called an unsigned number. That gives 4294967295.

A clear, real use of bitwise operators is flags. A flag is one bit that stands for one yes/no setting, like a permission. Give each permission its own bit. Then:

• | combines flags.
• & tests whether one flag is on.
• ^ switches one flag on or off.

const READ = 1;    // 001
const WRITE = 2;   // 010
const EXECUTE = 4; // 100
let permissions = READ | WRITE;
console.log((permissions & WRITE) !== 0);
permissions = permissions ^ WRITE;
console.log((permissions & WRITE) !== 0);

Lines 1 to 3 give each permission its own bit. Line 4 combines READ and WRITE. Line 5 tests the WRITE bit and prints true. Line 6 switches WRITE off with ^. Line 7 tests again and prints false.

Remember the 32-bit rule when you see value | 0. It drops the fraction, but it gives wrong answers for very large numbers. To drop the fraction from a price or any other normal number, use Math.trunc(value).

Shift operators slide all 32 bits to the left or to the right:

• << slides bits left. It fills the empty places on the right with 0.
• >> slides bits right. It keeps the leftmost bit, called the sign bit, which says whether the number is negative. So negative numbers stay negative.
• >>> slides bits right and fills the left with 0. The result is never negative: it is unsigned.

Before the shift examples, here is one more math operator. ** is the exponent operator. It raises a number to a power: 2 ** 3 means 2 × 2 × 2, which is 8. It is not a bitwise operator, and its result is a normal number.

const boxes = 2 ** 3;
let displayName = "";
displayName ||= "Guest";
console.log(boxes, displayName);

Line 1 stores 8 in boxes. Line 2 sets displayName to an empty string. Line 3 uses ||=, the logical OR assignment. It writes "Guest" only when the variable is falsy (it counts as false). An empty string is falsy, so displayName becomes "Guest". Line 4 prints 8 Guest.

This is handy for a missing name. But ||= also replaces values you may want to keep, like 0 or false, because they are falsy too. Use ??= when only null and undefined should count as missing.

Back to shifts. They are useful for flags and for binary formats, which is data stored as raw bits. They are not for everyday math, because they lose anything that doesn't fit in 32 bits. When the number itself matters, use multiplication, division, or BigInt.

console.log(5 << 1);  // 10
console.log(5 >> 1);  // 2
console.log(-1 >>> 0); // 4294967295

In bits, 5 is 101. Line 1 slides it left to 1010 in bits, which is 10. Line 2 slides it right to 10 in bits, which is 2; the rightmost bit falls off. Line 3 reads -1 as an unsigned number, like before.

The last two operators mostly appear in old or unusual code:

• The comma operator runs expressions from left to right and keeps only the last value.
• The void operator runs an expression, throws away its value, and gives undefined.

1let i = 0, j = 10;Run2i++, j--;3const kept = (1, 2, 3);4const swallowed = void kept;5console.log(i, j, kept, swallowed);

When one line has several operators, JavaScript must decide which operator gets its values first. This order is called precedence. You know it from maths: in 2 + 3 * 4, the * goes first, so the answer is 14.

Precedence decides how the code is grouped. It does not always decide which part runs first: JavaScript still works out most operands from left to right. The simple rule for you: when you mix operators you don't know well, add round brackets around the part that should go first.

Read the table from top to bottom. Level 1 goes first, and level 19 goes last. The last column is a short note to help you remember.

Logical assignment works the same way as its longer form:

• name ||= "Guest" writes only when name is falsy.
• name ??= "Guest" writes only when name is null or undefined.

When an assignment is mixed with other operators, round brackets make it clearest.

Now sort some cards. For each one, decide: does it go before +, at the same level as +, or after +? If you are unsure, the feedback tells you where the operator sits.

Where you'll use this

In everyday front-end code, these operators show up in a few places:

• A ternary picks a CSS class, a label, or a short message: const tone = error ? "danger" : "success";
• typeof checks data that comes from outside your code, like a server's answer, when it might be a string, a number, or a function.
• Array.isArray checks data you didn't create before you call array methods on it.
• Object.hasOwn reads plain object data when borrowed properties should not count.
• Bitwise flags appear in libraries, file permissions, graphics, and some browser features. You will read them more often than you write them.

function describeUpload(file) {
  const kind = Array.isArray(file.tags) ? "tagged" : "untagged";
  const owner = Object.hasOwn(file, "owner") ? file.owner : "unknown";
  return `A ${kind} file owned by ${owner}.`;
}

Line 2 uses a ternary with Array.isArray to pick "tagged" or "untagged". Line 3 uses a ternary with Object.hasOwn: it reads file.owner only when owner is stored on file itself. Line 4 builds the sentence.

Common misconceptions

Take your time. Every answer explains why it is right or wrong. The code questions use what JavaScript really prints.

Key takeaways

• A ternary picks one of two values: condition ? valueIfTrue : valueIfFalse.
• typeof is best for primitives. Use Array.isArray for arrays, and instanceof to ask which constructor made an object.
• in also counts borrowed properties. Object.hasOwn checks only the object itself.
• delete removes object properties. On arrays it leaves holes, and length stays the same.
• Bitwise operators turn numbers into 32-bit whole numbers. Flags are a good use; clever number tricks are not.
• The comma operator and void are rare. Learn to recognize them, but don't reach for them first.
• Precedence decides which operator goes first, but round brackets show your meaning to other people.

Up next: if, else & conditions, where a choice can hold whole blocks of code.