JavaScript Fundamentals - Types, Variables, and Basic Operations
JavaScript is a versatile programming language that powers the modern web. This post covers the fundamental concepts every JavaScript developer should know.
Data Types
JavaScript has several primitive data types and complex types:
Primitive Types
- string - Text data
- number - Numeric values (integers and floats)
- boolean - true or false
- null - Intentional absence of value
- undefined - Uninitialized variable
Checking Types with typeof
typeof "hello" // Returns "string"
typeof 42 // Returns "number"
typeof true // Returns "boolean"
typeof undefined // Returns "undefined"
typeof null // Returns "object" (this is a known quirk)
typeof [1,2,3,4] // Returns "object" (not "array")
typeof {name:'John'} // Returns "object"
typeof function myFunc(){} // Returns "function"
Checking for undefined
if (obj == undefined) {}
if (typeof obj == 'undefined') {}
Checking Object Type
function isDate(myDate) {
return myDate.constructor === Date;
}
instanceof Operator
Use instanceof to check if an object is an instance of a specific type:
myArray instanceof Array // Returns true if myArray is an array
Constants
ES6 introduced the const keyword for declaring constants:
const number = 42;
// number = 50; // This would cause an error
Operators
Comparison Operators
JavaScript has two types of equality operators:
| Operator | Description |
|---|---|
== |
Equal value (with type coercion) |
=== |
Equal value AND equal type (strict) |
!= |
Not equal value |
!== |
Not equal value or not equal type |
console.log(1 == 1); // true
console.log("1" == 1); // true (type coercion)
console.log(1 === 1); // true
console.log("1" === 1); // false (different types)
Logical OR for Default Values
The || operator returns the first truthy value:
3000 || 5000 // Returns 3000
0 || 5000 // Returns 5000 (0 is falsy)
Boolean Values
Falsy Values
The following values are considered false in boolean context:
0-0""(empty string)undefinednullNaN
Truthy Gotchas
"false" // true (non-empty string)
5 == "5" // true (with type coercion)
"2" > "12" // true (string comparison, "2" > "1")
2 > "John" // false (NaN comparison)
Strict Mode
Strict mode helps catch common coding mistakes and prevents certain actions:
"use strict";
x = 3.14; // Error! x is not defined
// Can also be used within a function
function myFunction() {
"use strict";
y = 3.14; // Error! y is not defined
}
Code Conventions
Best practices for writing clean JavaScript code:
- Declare and initialize variables at the top
- Use camelCase for naming
- Add spaces around operators
- Avoid global variables
- Use primitive types instead of primitive type objects
Handling Undefined Parameters
function myFunction(x, y) {
if (y === undefined) {
y = 0;
}
// Function body
}
Output Methods
JavaScript provides several ways to output data:
document.write("Hello"); // Write to document
alert("Hello"); // Show alert dialog
console.log("Hello"); // Write to console
element.innerHTML = "Hello"; // Write to HTML element
Encoding URIs
When working with URLs, encode special characters:
encodeURI(text) // Encodes a URI
Compatibility Notes
Avoid using string indexing for older browser support:
str[0]; // Does not work in IE5, IE6, IE7
str.split("")[0]; // Use this instead
Understanding these fundamentals is essential for writing robust JavaScript applications. In the next posts, we’ll explore more advanced topics like arrays, objects, and asynchronous programming.
Comments