JavaScript Coding Day 7 | Operators and Data Types in JavaScript
Operators and Data Types in JavaScript
Watch the lesson tutorial 🔻
In today's article, we are going to look at how the + operator behaves differently depending on the data types used, and we will dive into the important concept of Mutability.
1. The Addition Operator
In JavaScript, when you use the + symbol between two numbers, it performs standard mathematical addition. It takes the value of the left operand and adds it to the right operand.
Practical Example:
<script>
let a = 50;
let b = 10;
console.log(a + b);
// Output: 60
</script>
2. The Concatenation Operator
Things get interesting when strings are involved. If the + operator sees that at least one of the operands is a String, it stops doing math and instead performs Concatenation.
Concatenation means joining two strings together end-to-end. JavaScript effectively converts the number into a string and joins them.
Practical Example:
<script>
let x = 'Chiru';
let y = 10;
// Here, a string + a number results in a string
console.log(x + y);
// Output: Chiru10
// The order doesn't matter; number + string also results in a string
console.log(y + x);
// Output: 10Chiru
</script>
3. Mutable vs. Immutable Data Types
In JavaScript, understanding how data is stored is crucial. We divide data types into two categories: Immutable and Mutable.
Immutable Data Types (Primitives)
Primitive types (like String, Number, Boolean, null, undefined) are immutable. This means once a value is created, it cannot be changed. If you want to change it, JavaScript actually creates a completely new value in memory and destroys the old one.
Example:
let name = "John";
name[0] = "D"; // This will NOT work. You cannot change a character inside a string.
console.log(name);
// Output: John
Mutable Data Types (Reference Types)
Reference types (like Objects and Arrays) are mutable. This means you can change the content inside them without changing the object's identity or memory address.
Example:
let arr = [1, 2, 3];
arr[0] = 99; // This works! We modified the contents directly.
console.log(arr);
// Output: [99, 2, 3]
4. The const Keyword and Objects
A common confusion for beginners is the difference between an Immutable Variable and an Immutable Value.
When you declare an object with const, the binding (the link between the variable name and the object) is immutable. You cannot point s to a completely new object.
However, the data inside the object is still Mutable. You are allowed to change the properties of the object.
Practical Example:
<script>
// We create a constant reference to an object
const s = {name: 'Chiru'};
// We CANNOT do this: s = {name: 'NewObject'}; (This would cause an error)
// BUT, we CAN change the data inside the object
s.name = 'ChiruCodes';
console.log(s);
// Output: {name: "ChiruCodes"}
</script>
Summary: Even though we used const, we successfully updated the name property from "Chiru" to "ChiruCodes". This is because objects are mutable!
- by Chirana Nimnaka
Comments
Post a Comment