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

• Objects:

const { a, b } = obj;

• Arrays:

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