Primitive types are just types in general are a concept across any programming language.
Whatever language you're working with will have some set of types.
NB: to represent decimal numbers called floating points or float's often. And the reason for that is that it takes a lot more memory to store a decimal.
Order of operation: PEMDAS - parentheses, exponents (** to the power of), multiplication, division, addition, subtraction.
It is considered a number by JavaScript, but it represents something that is not a number.
Variables are useful: variables, are a way of giving some name to a value and storing it using JavaScript so that we can come back to it later to reuse it, update it, or just recall it.
Quirks of JS:
Chickens won't update or change with the updated hens count as it's stored a value from hens from a moment in js's memory. They are not intrinsically linked. This is just a snapshot in time.
The below example takes the current score of a variable and adds 5 to it.
score = score + 5
Shorter syntax:
score += 5
Incrememting and decrementing by 1:
score++
score--
There are actually two other keywords we can use to make variables
Const stands for Constant as it stands for constant. A constant is a value that does not change- you won't be able to update, change, or reassign using const.
It remains constant.
Var is considered old syntax and you shouldn't be using it.
We have two options for a boolean value, true or false?
That's it.
So booleans are used to store yes or no values, a true or false value. So these are special words in JavaScript. These play a very important role in performing logic and having our code have different outcomes and making decisions and all that really important stuff.
But at their core booleans are very, very simple, just true or false values.
In JavaScript, we can have a variable, a single variable that changes type. If we make a numeric variable, it is not stuck storing a number forever. We could make it store a boolean.
Example:
let isLoggedin = true //boolean
isLoggedin = 'hello' // string
isLoggedin = 12345 //number
NB: Variable Naming and Conventions- air on the side of meanginfulness and camelcase convention for best practise.
Strings are really commonly used as are numbers and booleans. Those three are probably the most important to understand right now.
And a string is basically textural information, a string of characters. So they're just another primitive type and they represent text.
Every character in a string has a corresponding number associated with it, a positional number that goes in order from the beginning of the string starting at zero.
Every string we make in JavaScript actually comes with a set of built-In actions, which we call methods that we can perform using that particular string.
.length accesses a property and ISN'T a method, hence why there aren't parentheses after it.
toUpperCase()- is a non destructive method, the original string is unchanged.toLowerCase()trim()
A lot of methods actually accept arguments. Arguments are just inputs that we can pass into the method to alter how they behave.
indexOf() // falsey = -1
So this is commonly used to test. If a string contains something, does it contain a pound sign, does it contain a period, does it contain the word 'hello', that sort of thing.
slice()
Slice actually can accept more than one argument. Refer to the docs for this one because you may get confused at some point. So Slice extracts or slicees a portion of a string and it returns it or it gives it to us as a new string.
replace()
Replace is powerful when combined with regular expressions to match patterns and replace a pattern instead of a specific string.
repeat() is another method out of so many!
Ultimately, a method is just an action with a name that we can call upon, in this case - a string!
Template literals are a newer syntax and they're super useful. They allow us to create strings where we can embed an expression inside the string and that expression will be evaluated and turned into a string.
In order to make this work, you have to use the back tick characters.
${this sequence/syntax will be treated as an expression inside th back tick and evaluated}
Null something you won't run into really very often at all. It is something you may set as a value for a variable, whereas undefined is something that you will run into pretty frequently, especially later on.
The math object built into JavaScript, out of the box for free.
We have access to this thing called Math and it's just a collection of properties and methods that have to do with math in some way.
There's a built in method called random and random is going to give us a random decimal number between zero and one, but it won't actually include one.
Another very important core concept in JavaScript, which is making decisions with our code and something called boolean logic. RE decision making, it's referring to having different outcomes based off of certain criteria.
It's just having different branching paths depending on some input.
== checks if two values are equal, but it does not care about their type. It does not care if they are the same type. What this means is that it will attempt to coerce two values if they are of different types. It will coerce them to move them into or transform them into the same type so that you can compare them.
This can lead to unexpected results.
It's considered best practise to use strict equals: === to avoid potential bugs in your code.
This is another piece you can chain on if the first confidtion is false:
Else is going to be the last part. If you have an else (you don't have to, but if you do,) it's the last piece of the entire conditional. And we don't specify any condition. We don't have parentheses.
It's simply a catch all it's going to run as the last thing if nothing else matched first. If nothing else was true along this journey, then do this.
If is manadatory and the basics in making decisions. We don't have to even have an else. You can just have an if on its own, you can have an F and announce if, but if you want to catch all we can use and else.
Logical operators are operators that allow us to combine different expressions so we can combine more than one piece of logic together to form one larger piece of logic.
- creating and updating arrays
- push, pop, shift and unshift- built in array methods
- concat, indexof, slice and splice -
- multi dimensional arrays
-
firstarray.concat(pass in second array)- adds arrays together to form a new, merged array. Doesnt modify either of the originals. -
includes()- includes is an example of a boolean method, which means it returns true or false. It's going to tell us if an array includes a particular value. -
indexOf- similar to how it works for strings. It will always return a -1 for a falsey. So this is an easy way to tell if some element is in an array or not. We can just quickly check. Is index of that thing equal to negative one? -
reverse()- reverses an array. It's considered a destructive method, it does change the original array. -
splice()- similar but does more than slice, it can remove and change an element by replacing it. -
slice()- doesn't change the original array, you can pass in a start and stop index in parenthesis to 'slice' array elements -
sort()- the default way that it's source, if you just call a radar source with empty parentheses, it is going to convert everything into string. And then compare their UTF 16 code unit values, these underlying code numbers basically for each string behind the scenes- it compares them and that's very Janky compared to other programming languages. It's not a reliable numeric sort unless you pass a function inside.
When we're working with arrays, what's important to note about comparing arrays is JS doesnt compare 'content', but instead comparing references in memory.
[1, 2] === [1, 2]
false
(two arrays stored in js memory)
JavaScript object literals is another data structure similar to an array in the sense that it stores information and can combine multiple types of data together and multiple pieces of data. Unlike arrays, data is stored using what we call key value pairs or properties. It's all about labeling our information, giving it a name.
property = key-value pair
Common pattern to see array of objects.
- loops
- nested loops
- while loops
- for... of loop
- iterating arrays
- iterating objects
So looping over and creating a bunch of numbers to print out is not all that useful, but we do use loops all the time when we're interacting with arrays.
Now, there's more than one way of doing this, and we'll see some others that are a little bit nicer (few lectures away). We also call it iterating over an array, doing something with or for each element in an array.
Plugging your indexed number into your array to print elements:
for (let i= 0; i < array.length; i++) {
console.log(array[i])
}
Having one for loop, in this case for loops instead of another. So the idea here is literally putting a for loop inside the body of another for loop. But in practice, what this means is that for every single iteration of the outer loop, but say it runs five times the inner loop is going to have its own full cycle, five separate times it gets a full cycle.
using a nested for loop toiterate through nested arrays
Next up, a brand new loop we haven't seen before of so far of is newer in JavaScript. It's not just new to us in this course, but it's also newer and JavaScript. It's a significant improvement for iterating over arrays and other iterables.
Works with any iterable object in js.
A lot easier to read because you write a variable that corresponds to the individual element, not a variable that corresponds to an index or just the number that you then have to plug in to the array here.
You don't have to plug anything into the array.
Row references each element in the parent in the first array and then for student of that row array, student references this.
for..of is commonly used.
- the
for...inloop is specifically designed to iterate through object, less commonly used. Just gives us thekeyin the object
Another option woud be using specific object methods- to follow:
Super useful for reducing the duplication in our code and just making our code easier to look at and easier to understand.
Steps:
- defining a function
- running it or calling it to execute it
Arguments in JavaScript are basically a fancy way of saying inputs to a function- inputs we pass in.
There's no real logic/intelligence to arguments, it's purely based on the order we pass inputs in when we're calling the function.
Re outputs, console.logging isnt an output we can capture/store in a variable and reuse.
Compare that to other builtin methods, things like toUpperCase or indexof where they return values.
We can capture that value in a variable, for example, or we could pass it on to something else.
The second thing you should know is that the return keyword actually stops the execution of your function. So whenever it's encountered, if I have something afterwards, like console.log, this line after thereturn, will never run.
Crucial
- function scope
- block scope
- lexical scope
- function expressions
- higher order functions - crucial concepts
Important
- returning functions
- the keyword
this - Adding methods to objects
Where we define a variable in JavaScript, impacts where we have access to it. Function scope refers to variables we define in a function, they are scoped to that function. Therefore you won't have access to variables after the fact- it's nested in the function.
If we put a variable and a function versus putting it out in the open versus putting a variable in a nested function inside of a function- those all impact where we can use that variable later on.
This is an uncommon workaround- using a global variable and accessing it inside the function:
Usually in our functions we have our own internal variables, like I used this example of a glass dome or a bubble surrounding this function that's really common.
If we have sort of a conflict, where there are two different variables. One defined outside of a function called bird, one inside the function. Well, outside the function.
We have no choice if we don't have access to this version. But inside the function we will be using or JavaScript uses the closest version, which here is Golden Pheasant.
So a block includes things like conditionals most commonly, but also loops.
If our variables are declared inside of a block, those variables only exist in that world of those collaboration between the curly braces.
We are referencing heroes, which is not defined in here or in here, but it's defined two levels up in the grandparent function called bank robbery, and we still have access to it.
So that's all there is to lexical scope. A nested, or an inner function, has access to the same stuff as the parent function or grandparent or however many levels up.
Simply a different way of defining a function. Just another syntax to defining a function but we're storing it in a variable.
const add = function (x, y) => {
return x + y
}
It actually demonstrates something that is going to come up a lot in this course, which is functions are values in JavaScript.
We can store them, we can pass them around just like we could pass around and store a number or an array or an object.
We can pass functions as an argument. We can return functions as the return value, just like we could return a number. It demonstrates that concept that functions are treated just like anything else. They're just a value.
function add(x,y) {
return x + y
}
This section is about a subset of array methods, builtin methods that we have access to on every single
array in JavaScript.
JavaScript arrays come with a set of methods, things like foreach(), map(), some(), and every(), filter() and reduce() that are array methods that require you to pass a function into them.
You need to be able to pass functions around into other functions using some of what we just talked about in the last section.
So if you recall, higher order functions are important to understand conceptually.
Now for each actually used to be a lot more commonly used before the advent of the for of loop.
What does it do? It allows us to run a function, run some code once per item in an array.
So whatever function we pass in that function will be called once per item, where each item will be passed into the function automatically.
The next of these callback array methods we'll see is called map, so MAP is similar to forEach in the
sense that it accepts a callback function and it runs that function once per element in the array.
But what's very different is that it then generates a new array using the result, using the return
value of that callback.
So it's a way to map an array from one state to another.
We're just taking data in an array, a starting array
and usually transforming it as we map it into a new copied array so we could just use a map to make
a direct copy.
It's typically used when we need a portion of our data or we want to transform every element in
some starting array and create a new array based upon that starting array map is often a good choice.
Newer alternative that is more compact to a regular function or compared to a regular function expression.
It allows us to write functions without actually having to write the keyword function. And they're really useful, especially when we're doing things like this, where we're passing a function in that it only exists to be passed in to this other function called map.
