JavaScript for Beginners - Lecture Notes
Introduction
- Instructor: Beau Carnes
- Platform: freeCodeCamp
- Course designed for beginners and those needing a refresher
- Integrated with freeCodeCamp's JavaScript curriculum
Course Goals
- Gain proficiency in JavaScript
- Complete JavaScript projects for practical learning
Setup and Write JavaScript
JavaScript Execution
- Runs in any modern web browser
- Write JavaScript in several ways:
- Code editors (e.g., Sublime Text, Visual Studio Code, Atom)
- Within HTML
<script>
tags
- Online editors (e.g., freeCodeCamp editor, CodePen, Scrimba)
Console.log
- Use
console.log
to print to the console for debugging
JavaScript Basics
Comments
- Single-line:
// comment
- Multi-line:
/* comment */
Data Types
- Primitive Types:
undefined
, null
, boolean
, string
, symbol
, number
, object
- Variables:
- Declare with
var
, let
, const
let
and const
introduced in ES6; const
cannot be changed
Variable Declaration and Assignment
- Syntax:
var/let/const variableName = value;
- Initialization and assignment can be separate steps
- Case-sensitive; use camelCase for convention
Arithmetic Operations
- Addition:
+
- Subtraction:
-
- Multiplication:
*
- Division:
/
- Increment (add 1):
++
- Decrement (subtract 1):
--
Compound Assignment
- Addition:
+=
- Subtraction:
-=
- Multiplication:
*=
- Division:
/=
Strings
- Create using single, double quotes, or backticks (template literals)
- Escape sequences:
\
, \n
, \t
, \"
, etc.
- String concatenation with
+
and +=
- Find length with
.length
- Access characters using bracket notation:
string[index]
Arrays
- Define using brackets:
var arr = [element1, element2];
- Nested arrays:
[[element1, element2], [element3, element4]]
- Access elements:
array[index]
- Modify elements:
array[index] = newValue
- Add elements:
array.push(element)
- Remove last element:
array.pop()
- Remove first element:
array.shift()
- Add element to front:
array.unshift(element)
Functions
Basics
- Definition:
function functionName(parameters) { // code }
- Call function:
functionName(arguments);
- Return a value using
return
keyword
- Parameters vs. Arguments: Parameters are placeholders that are defined within a function, arguments are actual values passed
- Global and local scope: Variables defined inside functions are local to that function
Advanced
- Function expressions with
const
and let
- Arrow function syntax:
const functionName = (params) => { // code };
- Higher-order functions: Functions that take other functions as arguments (e.g.,
map
, filter
, reduce
)
- Default parameters:
function funcName(param1 = defaultValue1, param2 = defaultValue2) {...}
- Rest parameter syntax:
(...args) => {...}
- Spread operator:
[...array]
Objects
- Creation:
const obj = { property1: value1, property2: value2 };
- Access properties:
obj.property
or obj['property']
- Add/update properties:
obj.property = value
or obj['property'] = value
- Delete properties:
delete obj.property
or delete obj['property']
- Check property existence:
obj.hasOwnProperty('property')
- Nested objects and arrays
- Methods: Functions as properties in objects, shorthand method definitions
Classes
- Syntax:
class ClassName { constructor(param) { this.property = param; } }
- Methods for handling functionality within classes
- Inheritance and subclasses
Control Flow
Conditionals
if
, else if
, else
statements
- Comparison operators:
==
, ===
, !=
, !==
, >
, >=
, <
, <=
- Logical operators:
&&
(AND), ||
(OR), !
(NOT)
- Ternary operator:
condition ? exprIfTrue : exprIfFalse
Switch Statements
- Syntax:
switch(expression) { case value1: // code; break; case value2: // code; break; default: // code; }
Looping
Types of Loops
while
loop: while(condition) { // code }
do...while
loop: do { // code } while(condition);
for
loop: for(initialization; condition; finalExpression) { // code }
- Iterate over arrays and objects
Modules
Export and Import
- Export variables/functions:
export { var1, var2, ... }
- Import variables/functions:
import { var1, var2, ... } from 'file-path'
- Export default:
export default functionName
- Import default:
import functionName from 'file-path'
- Import all:
import * as alias from 'file-path'
ES6 Features and Syntax
let and const
let
allows block-scoping
const
prevents reassignment
Template Literals
- Use for multiline strings and embedding expressions:
const str = `Hello, ${name}!`;
Destructuring Assignment
const { a, b } = obj;
const [a, b] = arr;
- Rest parameter with destructuring:
const [a, b, ...rest] = arr;
Object Methods
- Shorthand for declaring methods inside objects
- Calculate properties dynamically
Promises for Asynchronous Programming
- Syntax:
new Promise((resolve, reject) => {...})
- Handling with
.then()
and .catch()
Conclusion
- Practice by building projects without tutorials
- Use search engines for learning and troubleshooting