#INCLUDE

Create For Community

Tech Cohort Workshop 3

​

INCLUDE

Agenda

In this workshop we will cover:

• Javascript
• Syntax
• Conventions
• Javascript in React

INCLUDE

INCLUDE

JavaScript Overview

What to Know

INCLUDE

We’ll be referring to these slides for:

• Syntax
• Some Types
• Functions
• Arrays & their methods
• Imports/exports & json

​

https://www.w3resource.com/course/javascript-course.html#/

​

​

INCLUDE

Types: Primitive types and non-primitive types

Non-Primitive (Reference) Types

1. Object - A collection of key-value pairs (e.g., { name: "Alice", age: 25 })
2. Array - An ordered list of values (e.g., [1, 2, 3])
3. Function - A callable block of code (e.g., function example() { ... })
4. Date, Set, Map, WeakSet, WeakMap - Other specialized objects with unique properties

Primitive Types

1. String - e.g., "hello"
2. Number - e.g., 42, 3.14
3. Boolean - e.g., true, false
4. Undefined - A variable that has been declared but not assigned a value
5. Null - Explicitly represents "no value" or "empty"
6. Symbol - A unique identifier for object properties
7. BigInt - For large integers beyond the safe range of Number

Types

INCLUDE

• Comparisons (Booleans)
• Boolean: True or False
• Boolean Operators
• Standard: >, >=, <, <=, ==, !=
• JS Unique: ===, !==

MAKE SURE TO USE === and !== instead of == and !=

• Main reason is we want to be type-safe (don’t worry too much about this, but look up if you are curious)

Booleans

2. let ❌ Sometimes use in React

• Scope: let is block-scoped, meaning it is restricted to the block, statement, or expression where it is declared (anything within {}).
• Hoisting: let is hoisted but not initialized, so referencing it before declaration results in a ReferenceError.
• Redeclaration: Variables declared with let cannot be redeclared within the same scope.
• Mutability: let variables are mutable and can be reassigned.

Variable Declarations

1. const ✅ USE BY DEFAULT

• Scope: const is also block-scoped, similar to let.
• Hoisting: Like let, const is hoisted but not initialized. Using it before declaration results in a ReferenceError.
• Redeclaration: const variables cannot be redeclared within the same scope.
• Mutability: const variables are not reassignable. If a const variable holds an object or array, properties of the object or elements of the array can still be modified (only the reference cannot be reassigned).

3. var ❌ Don’t use in React

• Scope: var is function-scoped, only scoped to the function in which it is declared. If it is declared outside a function, it becomes globally scoped.
• Hoisting: var declarations are hoisted to the top of their scope, but they are initialized with undefined, so you can reference them before their declaration (though this is not recommended).
• Redeclaration: Variables declared with var can be redeclared within the same scope.
• Mutability: var variables are mutable, so their values can be reassigned.

Variable Examples

INCLUDE

❌ var

❌ let

✅ const

INCLUDE

Objects

​

Objects hold properties by key

• You can access/modify
• dot notation “.”
• bracket notation “[]”
• Loopable
• Can hold primitive values and functions

​

INCLUDE

Functions

INCLUDE

Functions

​

• Specified with function keyword
• Can pass in parameters [between ()]
• return is optional
• Anonymous functions (next slide)
• used in situations where you don’t need to reuse the function outside its immediate context

Function: Set of instructions meant to accomplish a certain task

Basic function syntax:

INCLUDE

​

• Arrow Functions (=>)
• Variation of traditional functions
• Written like () => {}
• Can be assigned to variables & called
• Calling example3(1,2) results in “1”, “2” printed (console.log() prints to console)
• Can be run on their own
• ((param1) => console.log(param1))()

Functions

​

• Anonymous Function: different notation to arrow function
• handles this differently

INCLUDE

Another Example

INCLUDE

​

Arrow functions offer a way for us to inherit the this value from surrounding code, making it easier to maintain a predictable this binding:

Arrow vs Anonymous Functions

INCLUDE

HTML + Javascript

​

You can embed anonymous functions in Javascript into HTML with event handlers. They are used to make webpage elements interactive.

Click Me!

“Button was clicked”

INCLUDE

Methods

INCLUDE

• Methods: Built-in instructions that you can call for an object type (i.e Array, Number, String)
• Invoked by (object).method

​

• Array Methods: []
• forEach()
• map()
• filter()
• etc

​

• Number Methods: 3
• toString()
• toPrecision()
• etc

Methods

Methods

For our purposes, we mainly want you to know filter() and map().

• However, there are a number of methods available for arrays, for converting between types, getting length, etc.

​

Best way to find them?

• Check internet
• try VSCode autocomplete/suggest

​

INCLUDE

The one we will be using the MOST is map.

​

Map: creates a NEW array by applying a provided function on every element in the array

​

It’s in the form:

array.map((elem) => function block)

​

We’ll show some examples

​

​

​

​

INCLUDE

Map Method

Methods - Filter

Filter syntax is similar to map, except it takes in a function that returns a boolean

​

Filter: creates a SHALLOW COPY of the array and filters it out based on a condition

​

It’s in the form:

array.filter((elem) => function block)

​

​

​

​

INCLUDE

INCLUDE

Import/Export & JSON

INCLUDE

• Import: take some data located elsewhere in the project and inject (copy & paste in background) into current file

​

Syntax: import (thing) from “module”;

​

​

• Next.js Pathing: “@/”
• Shortcut to indicate to start at ./src in project
• Complete the path relative to ./src
• THIS IS OUR PRIMARY WAY OF PATHING

Import

INCLUDE

​

• Export: bundle up the specified content for other files to import
• default: Specifies the main content to export and import statements are allowed to import this content under any alias
• exports not marked with default must be referenced within curly braces and by their exact given name by import statements

​

Syntax: export (thing)/ export default (thing);

Export

INCLUDE

Language-agnostic format for storing data

• Used in Web, Mobile apps, APIs, etc
• Commonly used for transmitting data between a server and a web page

​

• Collection of Key-Value pairs
• Key: Unique marker (i.e ID or hash)
• Value: Data stored by the key

​

JSON

INCLUDE

To create a JSON object:

1. {}: Start with curly brackets
2. Create key-value pairs inside brackets
1. Key must be strings
2. Value can be a string, number, bool, null, array, or another JSON object

​

• JSON Object accessing with [] and “dot” notation
• You can deconstructing JSON object with {}

More JSON!

INCLUDE

Hands-On JS Examples

INCLUDE

Thanks for Coming!!

See you next week and keep being awesome :)