​

JS Recap

React Week 01

Consent for Audio Recording

02

03

04

05

06

01

Break!

JS Recap

JS Recap

JS Recap

Questions?

JS Recap

var / let / const

10 min

10 min

modules, imports & exports

15 min

5 min

30 min

Arrow functions

40 min

var / let / const

Template Literals

JS Recap - var / let / const

Modern JavaScript / ES2015+

• React builds heavily on ES2015+ features
• ES2015 refers to the new version of JS released in 2015
• Since 2015, a new version is released every year
• Changes always extend, never change JS - because it would break the web

Javascript (or ECMAScript) Versions

Datatypes in JS

• Primitive Datatypes
• undefined: Variable that has not been assigned a value
• null: signals the non-existence of a value
• Boolean: true or false
• Number: between -2¹⁰²³ and 2¹⁰²³ & +Infinity/-Infinity/NaN
• 64 bits floating point
• String: textual data
• BigInt*: Like number but without the precision issues
• Symbol*: a unique and immutable primitive value
• Object Type(s)
• Data Structures created with new (Object, Array, Map, Set, Date, ...)
• Object: typeof instance === "object"
• Array: typeof instance === "object"
• Function : typeof instance === "function"

Datatypes in JS

Source: justjavascript.com

var / let / const

• let and const basically replace var.
• let and const are block-scoped. They are not available within the whole execution context like var.
• let and const can not be redclared. var can be redeclared.
• You use const instead of var if you plan on never re-assigning this "variable" (effectively turning it into a constant).
• You use let instead of var otherwise.

​

• This is a popular, but definitely opinionated view on var/let/const!

• var is available outside a block it is declared within

​

​

​

​

​

• let & const are only accessible within the block they were declared in

​

​

​

​

​

var / let / const

Variable Scope

• var allows redeclaration of variables

​

​

​

​

​

• let & const do not allow redeclaration of variables

​

​

​

​

​

var / let / const

Redeclaring

• var & let allow reassignment

​

​

​

​

​

​

​

​

​

• const does not allow reassignment

​

​

​

​

​

var / let / const

Reassignment

const - Primitive Values vs. Objects

• const prevents the reassignment of a variable

​

• ✅ This works when const-variables hold primitive values, because they are immutable
• string, number, bigint, boolean, undefined, & symbol

​

• ❌ This does not always work when const-variables hold objects, arrays or functions (they are all objects - also arrays and functions!)
• Objects are stored in variables as references. When changes are made to the object, its reference remains unchanged. const will not block this.
• When an object is replaced with a completely new object, the reference is changed. const will block this.

• Changing a primitive value is blocked by const

​

​

​

​

• Changing an object is not blocked by const

​

​

​

​

• Replacing an object is blocked by const (because it is a reassignment)

const

with

Objects

var / let / const - Semantic Perspective

• The way you declare variables can also serve as a form of communcation to other developers looking at code you wrote

​

• From the article "JavaScript ES6+: var, let, or const?":
• const is a signal that the identifier won’t be reassigned.
• let is a signal that the variable may be reassigned, such as a counter in a loop, or a value swap in an algorithm. It also signals that the variable will be used only in the block it’s defined in, which is not always the entire containing function.
• var is now the weakest signal available when you define a variable in JavaScript. The variable may or may not be reassigned, and the variable may or may not be used for an entire function, or just for the purpose of a block or loop.

• There are subtle, but essential differences between the classic var and the new let & const
• They help us to avoid creating bugs while we write code - because we immediately get errors
• We recommend:
• Always use const
• If you need to reassign, switch to let
• Don’t use var

​

• Again: This is a popular, but definitely opinionated view on var / let / const!

​

var / let / const - Summary

Questions?

Break!

JS Recap - Template Literals

Template Literals

Template literals are string literals that allow embedded expressions. You can use multi-line strings and string interpolation features with them.�They were called "template strings" in prior editions of the ES2015 specification.�

�

​

Syntax: �

The problem

Here’s a situation that comes up all the time: You need to build a URL. In this case, you’re building a link to an image on a cloud service. Your cloud service is pretty great, though. In addition to hosting the asset, you can pass query parameters that will convert the asset in a variety of ways (height, width, and so on).

​

😬 URLs get particularly ugly because you have to add slashes between the parts of a route along with the building blocks of queries such as ?, =, and &. Traditionally, you have to combine each piece with a + sign.

Alternatively with Template Literals

​

JS Recap - Arrow Functions

Your usual JS function

• The word function

• Name of the function�• Parentheses around arguments

• The word return

• Curly braces

Galaxy Brain Function Definition

JS Recap - Modules, import & export

Modules

In React projects (and actually in all modern JavaScript projects), you split your code across multiple JavaScript files - so-called modules. You do this, to keep each file / module focused and manageable.

To still access functionality in another file, you need export (to make it available) and import (to get access) statements.

https://codesandbox.io/s/competent-bhaskara-kheif