JavaScript for Beginners Course - Lecture Notes

Jul 21, 2024

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