Variables and Data Types
## Learning Objectives
- Declare and use variables with var, let, and const
- Understand JavaScript's primitive data types
- Work with type coercion and type conversion
## Variable Declarations
### var (function-scoped)
```javascript
var name = "Alice";
var age = 30;
```
- Function-scoped, not block-scoped
- Hoisted to the top of its function
- Can be redeclared
### let (block-scoped)
```javascript
let name = "Bob";
let age = 25;
```
- Block-scoped (limited to the block where declared)
- Not hoisted (temporal dead zone)
- Cannot be redeclared in the same scope
### const (block-scoped, immutable binding)
```javascript
const PI = 3.14159;
const USER_NAME = "admin";
```
- Block-scoped like let
- Cannot be reassigned after declaration
- Must be initialized when declared
### Best Practice
```javascript
// Prefer const by default
const items = [1, 2, 3];
const settings = { theme: "dark" };
// Use let when reassignment is needed
let count = 0;
count++;
```
## Primitive Data Types
JavaScript has 7 primitive data types:
### 1. String
```javascript
const singleQuotes = 'Hello';
const doubleQuotes = "World";
const backticks = `Template literal: ${singleQuotes} ${doubleQuotes}`;
// String methods
"hello".toUpperCase(); // "HELLO"
"hello".length; // 5
"hello".slice(1, 3); // "el"
"hello".replace("l", "L"); // "heLlo"
```
### 2. Number
```javascript
const integer = 42;
const floating = 3.14;
const scientific = 2.5e6; // 2,500,000
const negative = -10;
// Special values
const infinity = Infinity;
const negInfinity = -Infinity;
const notANumber = NaN; // Not a Number
```
### 3. BigInt
```javascript
const bigNumber = 9007199254740991n;
const bigSum = bigNumber + 1n;
```
### 4. Boolean
```javascript
const isActive = true;
const isComplete = false;
// Truthy and Falsy values
Boolean(1); // true
Boolean(0); // false
Boolean(""); // false
Boolean("hello"); // true
Boolean(null); // false
Boolean(undefined); // false
```
### 5. Undefined
```javascript
let uninitialized;
console.log(uninitialized); // undefined
function noReturn() {
// No return statement
}
console.log(noReturn()); // undefined
```
### 6. Null
```javascript
const empty = null;
console.log(empty === null); // true
```
### 7. Symbol
```javascript
const uniqueId = Symbol("id");
const anotherId = Symbol("id");
console.log(uniqueId === anotherId); // false
```
## Type Checking
### typeof Operator
```javascript
typeof "hello" // "string"
typeof 42 // "number"
typeof 42n // "bigint"
typeof true // "boolean"
typeof undefined // "undefined"
typeof null // "object" (historical bug!)
typeof Symbol("x") // "symbol"
typeof {} // "object"
typeof [] // "object"
typeof function(){} // "function"
```
## Type Coercion
JavaScript automatically converts types in certain situations.
### Implicit Coercion
```javascript
"5" + 3 // "53" (number to string)
"5" - 3 // 2 (string to number)
"5" * "3" // 15 (strings to numbers)
true + 1 // 2 (true to 1)
false + 1 // 1 (false to 0)
```
### Explicit Conversion
```javascript
// To String
String(123); // "123"
(123).toString(); // "123"
123 + ""; // "123"
// To Number
Number("42"); // 42
parseInt("42"); // 42
parseFloat("3.14"); // 3.14
+"42"; // 42
+"3.14" // 3.14
// To Boolean
Boolean(1); // true
Boolean(0); // false
!!"hello"; // true
```
## Objects
```javascript
const person = {
name: "Alice",
age: 30,
isAdmin: false,
address: {
city: "New York",
country: "USA"
},
greet: function() {
return `Hello, I'm ${this.name}`;
}
};
// Accessing properties
person.name; // "Alice"
person["age"]; // 30
person.address.city; // "New York"
```
## Arrays
```javascript
const fruits = ["apple", "banana", "cherry"];
fruits[0]; // "apple"
fruits.length; // 3
fruits.push("date"); // adds to end
fruits.pop(); // removes from end
```
## Summary
- Use `const` by default, `let` when needed, avoid `var`
- JavaScript has 7 primitive types: string, number, bigint, boolean, undefined, null, symbol
- Be aware of type coercion, especially with `==` vs `===`
- Objects and arrays are reference types in JavaScript
Comments
Comments powered by Giscus
To enable comments, add your Giscus embed code here.
Learn more about Giscus →