Unary operators in Javascript - Step-by-Step Execution

Concept Flow - Unary operators

Start with a value

↓

Apply unary operator

↓

Evaluate result

↓

Use result in expression or output

Unary operators take one value and perform an operation on it, producing a new value.

Execution Sample

Javascript

let x = 5;
let y = -x;
let z = ++x;
console.log(y, x, z);

This code shows negation and increment unary operators on a variable.

Execution Table

Step	Code Line	Variable States	Operation	Result/Output
1	let x = 5;	x=undefined -> x=5	Assign 5 to x	x=5
2	let y = -x;	x=5, y=undefined	Negate x	y = -5
3	let z = ++x;	x=5, y=-5, z=undefined	Pre-increment x (x=x+1)	x=6, z=6
4	console.log(y, x, z);	x=6, y=-5, z=6	Output values	Prints: -5 6 6

💡 All lines executed; program ends after console.log

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
x	undefined	5	5	6	6
y	undefined	undefined	-5	-5	-5
z	undefined	undefined	undefined	6	6

Key Moments - 2 Insights

Why does ++x change the value of x before assigning to z?

Because ++x is a pre-increment unary operator that increases x first, then returns the new value for z, as shown in step 3 of the execution_table.

Why is y equal to -5 after negating x?

Because the unary minus operator changes the sign of x's value (5) to -5, as shown in step 2 of the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what is the value of x after ++x?

A 6

B -5

C 5

D undefined

💡 Hint

Check the 'Variable States' and 'Result/Output' columns at step 3 in the execution_table.

At which step does y get its value assigned?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look at the 'Code Line' and 'Operation' columns to see when y is assigned.

If we change ++x to x++, what would be the value of z at step 3?

A 6

B 5

C -5

D undefined

💡 Hint

Remember x++ returns the value before incrementing; check how pre- and post-increment differ.

Concept Snapshot

Unary operators act on one value.
Examples: -x (negation), ++x (pre-increment), x++ (post-increment).
Pre-increment changes value before use; post-increment after.
Used to quickly change or check a single variable.
Common in expressions and loops.

Full Transcript

Unary operators in JavaScript work on a single value to produce a new value. For example, the negation operator '-' changes the sign of a number. The increment operator '++' can be used before or after a variable. When used before (like ++x), it increases the variable's value first, then uses it. When used after (x++), it uses the current value first, then increases it. In the example code, x starts at 5. Applying -x gives -5 for y. Then ++x increases x to 6 and assigns 6 to z. Finally, the console.log prints -5 6 6. Understanding when the variable changes helps avoid confusion.

Practice

1. Which of the following is a unary operator in JavaScript?

easy

A. ++

B. +=

C. &&

D. ===

Solution

1. Step 1: Understand unary operator definition

   A unary operator works with only one operand (value).

2. Step 2: Identify unary operators in options

   ++ increments a single variable by 1, so it is unary. += and && require two operands, === compares two values.

3. Final Answer:

   ++ -> Option A

4. Quick Check:

   Unary operator = ++ [OK]

Hint: Unary operators work on one value only, like ++ or -- [OK]

Common Mistakes:

• Confusing += as unary instead of binary
• Thinking && is unary when it's binary
• Mixing comparison operators with unary

2. Which of the following is the correct syntax to decrement variable x by 1 using a unary operator?

easy

A. --x-

B. x--

C. x-=

D. x--x

Solution

1. Step 1: Recall decrement unary operator syntax

   The decrement operator is written as -- before or after the variable.

2. Step 2: Check each option for correct syntax

   x-- is valid and decreases x by 1. x-= is incomplete syntax. --x- and x--x are invalid.

3. Final Answer:

   x-- -> Option B

4. Quick Check:

   Decrement syntax = x-- [OK]

Hint: Decrement uses -- placed before or after variable [OK]

Common Mistakes:

• Using x-= instead of x--
• Adding extra characters like x--x
• Placing -- incorrectly like --x-

3. What is the output of the following code?

let a = 5;
console.log(-a);

medium

A. -5

B. 5

C. NaN

D. undefined

Solution

1. Step 1: Understand unary minus operator

   The unary minus operator (-) changes the sign of the number.

2. Step 2: Apply unary minus to variable a

   a is 5, so -a becomes -5.

3. Final Answer:

   -5 -> Option A

4. Quick Check:

   Unary minus of 5 = -5 [OK]

Hint: Unary minus flips sign: positive to negative [OK]

Common Mistakes:

• Confusing unary minus with subtraction
• Expecting output 5 instead of -5
• Thinking it returns NaN or undefined

4. Find the error in this code snippet:

let count = 10;
count = ++;

medium

A. Syntax error due to missing semicolon

B. Incorrect use of decrement operator

C. Missing variable after ++ operator

D. No error, code runs fine

Solution

1. Step 1: Analyze the use of ++ operator

   The ++ operator must be used with a variable, either before or after it.

2. Step 2: Identify the error in the code

   Here, ++ is used alone without a variable, causing a syntax error.

3. Final Answer:

   Missing variable after ++ operator -> Option C

4. Quick Check:

   ++ needs a variable to work [OK]

Hint: ++ must be attached to a variable, not alone [OK]

Common Mistakes:

• Thinking ++ alone increments something
• Ignoring syntax errors from incomplete expressions
• Confusing missing semicolon as main error

5. Given the code below, what will be the value of result?

let x = 3;
let y = ++x + x++ + --x;
let result = y;

hard

A. 10

B. 13

C. 11

D. 12

Solution

1. Step 1: Evaluate ++x (pre-increment)

   ++x increases x from 3 to 4, returns 4.

2. Step 2: Evaluate x++ (post-increment)

   x++ returns current x (4), then increments x to 5.

3. Step 3: Evaluate --x (pre-decrement)

   --x decreases x from 5 to 4, returns 4.

4. Step 4: Calculate y

   y = 4 + 4 + 4 = 12.

5. Step 5: Check final value of result

   result = y = 12.

6. Final Answer:

   12 -> Option D

7. Quick Check:

   Pre/post increments affect value and order [OK]

Hint: Pre-increment changes value before use; post-increment after [OK]

Common Mistakes:

• Ignoring order of increments and decrements
• Mixing pre- and post-increment results
• Calculating without updating variable values