Basic JS Flashcards
Add JS to your file
<script src="main.js"></script>
define variables
let - variables that can be redefined
const - variables that cannnot be redefined (can be used for arrays and objects, which can be manipulated but not reassigned)
let variables can be declared without being assigned a value
const variables will throw an error if you try to declare them without a value
primitive data types
strings, number, boolean, null, undefined, symbols
check what type a variable is
typeof variableName
check length of string
stringVar.length
this is a property
add variable to strings
using backticks and the ${} syntax -
`This string includes a ${variable}`
change case of string
str.toUpperCase()
str.toLowerCase()
these are string methods
get only part of a string
str.substring(0, 5)
takes the starting index, the index where the substring ends (not inclusive)
combining string methods
str.substring(0, 5).toUpperCase()
split a string into an array
- str.split(‘’) - pushes every letter of the string to an array
- Array.from(‘word’)
- Use the spread operator e.g. const newArr = […myWord]
comments
// single line comment
/* multiple line
comment */
get a specific element from an array
target item via index = arr[2]
add item to end of array
arr.push()
returns new length of array
add item to start of array
arr.unshift()
returns length of new array
remove item from end of array
arr.pop()
returns the element
changes the length of the array
check if something is an array
Array.isArray(someVar)
returns boolean
get index of a certain value
arr.indexOf(‘item’)
returns index
returns -1 if not present
check if item is in an array
arr.includes(‘item’)
returns boolean
merge two or more arrays
- arr1.concat(arr2) returns new array
- Spread Operator [… arr 1, …arr2]
concatenate all items of array into a string
arr.join(‘ ‘)
returns a string where each element is separated by a space
similar to arr.toString(), but this returns a string of items of the array separated by commas with no spaces.
.join() is only a method on arrays
what are objects
collection of data in key value pairs separated by commas
const person = {
firstName: ‘John’,
lastName: ‘Smith’,
address: {
street: ‘50 Main St’,
city: ‘Boston’,
state: ‘MA’
}
access single value in objectq
using dot notation
object.key
e.g. person.firstName
to create variables from key value pairs in an object
using destructring
const { firstName, lastName } = person
from an embedded object
const{ address: { city} } = person
convert array of objects to JSON
JSON.stringify(ourArrofObjs);
Looping with for loops
for (let i = 0; i < 10; i++) {
something that runs until i = 9;
}
Looping with while loops
let i = 0;
while (i < 10) {
something that runs until i = 9;
i++ // i must be incremented within the loop
}
this is good when you have a condition that must be run at least once
looping through arrays with for loop
for (let i = 0; i < arr.length; i++) {
do something with arr[i];
}
looping through arrays with for of
for (let item of arr) {
do something with item;
}
.forEach()
arr.forEach((item) => {
do something with item
})
.map()
returns an array
const newVar = arr.map((item) => {
manipulate item in some way and return in new array
})
.filter()
returns a new array of items that meet some condition
const newArr = arr.filter((item) => {
return item that meets a condition
})
chaining array methods
const todoCompleted = todos.filter((item) => {
return todo.isCompleted=== true;
}).map((todo) => {
return todo.text;
})
conditionals
if () {} else if () {} else {}
x || y = true if one of x or y is true
x && y = true only if both x or y is true
ternary operator
used alot to assign variables based on a condition
const color = x > 10 ? 'red' : 'blue'
switch statements
switch(varName) {
case ‘firstValue’:
run some code;
break;
case ‘secondValue’:
run some other code;
break;
default:
run some code if no condition stated above;
break;
writing functions
function addNums(num1 = 1, num2 = 1) { //setting default values
return num1 + num2;
}
call the function:
~~~
addNums(5, 7)
~~~
(addNums() will return 2 because of the defaults)
arrow functions
const addNums = (num1 = 1, num2 = 1) => num1 + num2;
or
const addNums = (num1 = 1, num2= 1) => {
return num1 + num2;
}
create constructor function
function Person(firstName, lastName, dob) {
this.firstName = firstName;
this.lastName = lastName;
this.dob = new Date(dob); // uses the Date constructor
}
instantiate an object
const person1 = new Person(‘John’, ‘Doe’, ‘4-3-1980’)
//this creates a new object called person1 with those values for each key
adding methods to constructor functions
function Person(firstName, lastName, dob) {
this.firstName = firstName;
this.lastName = lastName;
this.dob = new Date(dob); // uses the Date constructor
this.getBirthYear = function() {
return this.dob.getFullYear() //this is just a method on the Date constructor
}
this.getFullName = function() {
return `${this.firstName} ${this.lastName};
}
}
person1.getBirthYear()
this adds the method on to each instantiation of a person, and not onto the prototype
adding methods to constructor functions on the prototype
function Person(firstName, lastName, dob) {
this.firstName = firstName;
this.lastName = lastName;
this.dob = new Date(dob); // uses the Date constructor
}
Person.prototype.getBirthYear = function() {
return this.dob.getFullYear() //this is just a method on the Date constructor
}
Person.prototype.getFullName = function() {
return `${this.firstName} ${this.lastName};
}
this puts the functions on the prototype
creating a constructor functions using Class
class Person {
constructor(firstName, lastName, dob) {
this.firstName = firstName;
this.lastName = lastName;
this.dob = new Date(dob); // uses the Date constructor
}
getBirthYear = function() {
return this.dob.getFullYear() //this is just a method on the Date constructor
}
getFullName = function() {
return `${this.firstName} ${this.lastName};
}
}
can add methods right in class and this puts the methods on the prototype
THIS IS THE MOST RECENT AND MOST ORGANISED METHOD
DOM MANIPULATION
select an element in html
document.getElementById(),
document.getElementByClassName(), document.getElementByTagName() - these give a html collection
most used
document.querySelector(‘.className’)
this selects the first instance of that element
document.querySelectorAll(‘p’)
selects all of this type
gives a node List which is like an array
DOM MANIPULATION
removing an item
document.querySelector(‘item’).remove()
ul.lastElementChild.remove()
DOM MANIPULATION
change/add text content
document.querySelector(‘h1’).textContent = ‘Hello’
document.querySelctor(‘h2’).innerText = ‘World’
document.querySelector(‘section’).innerHTML = ‘<h1>Hello World</h1’
DOM MANIPULATION
changing styles
document.querySelector(‘.btn’).style.background = ‘red’
DOM MANIPULATION
event listeners
const btn = document.querySelector(‘.btn’)
btn.addEventListener(‘click’, (e) => {
e.preventDefault(); // if this is a button
document.querySelector(‘#myPara’).style.background = ‘#ccc’
})
DOM MANIPULATION
add and remove a class
document.querySelector(‘h1’).classList.add(‘funkyBackground’);
doument.querySelector(‘h1’).classList.remove(‘funkyBackground’)
DOM MANIPULATION
remove an error message after a certain time
setTimeout(() => msg.remove(), 3000);
DOM MANIPULATION
create an element that does not already exist on the document
const li = document.createElement('li');
li.appendChild(document.creatTextNode('$nameInput.value})
ul.appendChild(li);How to escape quotes
"You can use \"backslashes\" to escape quotes within a string"
What are falsy values
0
empty strings ‘’ or “”
null
undefined
NaN
different scopes of variables in functions
local and global
local variables are declared within the function and only visible within the function
global variables are declared outside the function and can be used by all functions
MOST MODERN CODE HAS FEW OR NO GLOBALS
GOOD PRACTICE TO MINIMISE THE USE OF GLOBALS
unless you need to store project level data
difference between function declaration and function expression
function declaration
function (sayHi) {
alert(“Hello”)
}
function expression
const sayHi = function() {
alert(“Hello”)
}
What is a function
- A reusable block of code
- Groups together a sequence of statements
- Performs a specific task
How do you call a function
Using the identifier and brackets, and inputting any parameters
e.g. sumTwoNums(5, 8)
check if input is not a number
Number.isNaN(variable)
