Basic JS

Question 1

Add JS to your file

Answer 1

<script src="main.js"></script>

Question 2

define variables

Answer 2

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

Question 3

primitive data types

Answer 3

strings, number, boolean, null, undefined, symbols

Question 4

check what type a variable is

Answer 4

typeof variableName

Question 5

check length of string

Answer 5

stringVar.length
this is a property

Question 6

add variable to strings

Answer 6

using backticks and the ${} syntax -

`This string includes a ${variable}`

Question 7

change case of string

Answer 7

str.toUpperCase()
str.toLowerCase()

these are string methods

Question 8

get only part of a string

Answer 8

str.substring(0, 5)
takes the starting index, the index where the substring ends (not inclusive)

Question 9

combining string methods

Answer 9

str.substring(0, 5).toUpperCase()

Question 10

split a string into an array

Answer 10

• str.split(‘’) - pushes every letter of the string to an array
• Array.from(‘word’)
• Use the spread operator e.g. const newArr = […myWord]

Question 11

comments

Answer 11

// single line comment
/* multiple line
comment */

Question 12

get a specific element from an array

Answer 12

target item via index = arr[2]

Question 13

add item to end of array

Answer 13

arr.push()
returns new length of array

Question 14

add item to start of array

Answer 14

arr.unshift()
returns length of new array

Question 15

remove item from end of array

Answer 15

arr.pop()
returns the element
changes the length of the array

Question 16

check if something is an array

Answer 16

Array.isArray(someVar)
returns boolean

Question 17

get index of a certain value

Answer 17

arr.indexOf(‘item’)
returns index
returns -1 if not present

Question 18

check if item is in an array

Answer 18

arr.includes(‘item’)
returns boolean

Question 19

merge two or more arrays

Answer 19

• arr1.concat(arr2) returns new array
• Spread Operator [… arr 1, …arr2]

Question 20

concatenate all items of array into a string

Answer 20

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

Question 21

what are objects

Answer 21

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’
}

Question 22

access single value in objectq

Answer 22

using dot notation
object.key
e.g. person.firstName

Question 23

to create variables from key value pairs in an object

Answer 23

using destructring
const { firstName, lastName } = person

from an embedded object
const{ address: { city} } = person

Question 24

convert array of objects to JSON

Answer 24

JSON.stringify(ourArrofObjs);

Question 25

Looping with for loops

Answer 25

for (let i = 0; i < 10; i++) { something that runs until i = 9; }

Question 26

Looping with while loops

Answer 26

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

Question 27

looping through arrays with for loop

Answer 27

for (let i = 0; i < arr.length; i++) { do something with arr[i]; }

Question 28

looping through arrays with for of

Answer 28

for (let item of arr) { do something with item; }

Question 29

.forEach()

Answer 29

arr.forEach((item) => { do something with item })

Question 30

.map()

Answer 30

returns an array const newVar = arr.map((item) => { manipulate item in some way and return in new array })

Question 31

.filter()

Answer 31

returns a new array of items that meet some condition ``` const newArr = arr.filter((item) => { return item that meets a condition }) ```

Question 32

chaining array methods

Answer 32

const todoCompleted = todos.filter((item) => { return todo.isCompleted=== true; }).map((todo) => { return todo.text; })

Question 33

conditionals

Answer 33

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

Question 34

ternary operator

Answer 34

used alot to assign variables based on a condition ``` const color = x > 10 ? 'red' : 'blue' ```

Question 35

switch statements

Answer 35

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;

Question 36

writing functions

Answer 36

``` 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)

Question 37

arrow functions

Answer 37

const addNums = (num1 = 1, num2 = 1) => num1 + num2; or const addNums = (num1 = 1, num2= 1) => { return num1 + num2; }

Question 38

create constructor function

Answer 38

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

Question 39

adding methods to constructor functions

Answer 39

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

Question 40

adding methods to constructor functions on the prototype

Answer 40

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

Question 41

creating a constructor functions using Class

Answer 41

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

Question 42

DOM MANIPULATION select an element in html

Answer 42

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

Question 43

DOM MANIPULATION removing an item

Answer 43

document.querySelector('item').remove() ul.lastElementChild.remove()

Question 44

DOM MANIPULATION change/add text content

Answer 44

document.querySelector('h1').textContent = 'Hello' document.querySelctor('h2').innerText = 'World' document.querySelector('section').innerHTML = '

Hello World

Question 45

DOM MANIPULATION changing styles

Answer 45

document.querySelector('.btn').style.background = 'red'

Question 46

DOM MANIPULATION event listeners

Answer 46

const btn = document.querySelector('.btn') btn.addEventListener('click', (e) => { e.preventDefault(); // if this is a button document.querySelector('#myPara').style.background = '#ccc' })

Question 47

DOM MANIPULATION add and remove a class

Answer 47

document.querySelector('h1').classList.add('funkyBackground'); doument.querySelector('h1').classList.remove('funkyBackground')

Question 48

DOM MANIPULATION remove an error message after a certain time

Answer 48

setTimeout(() => msg.remove(), 3000);

Question 49

DOM MANIPULATION create an element that does not already exist on the document

Answer 49

``` const li = document.createElement('li'); li.appendChild(document.creatTextNode('$nameInput.value}) ul.appendChild(li); ```

Question 50

How to escape quotes

Answer 50

``` "You can use \"backslashes\" to escape quotes within a string" ```

Question 51

What are falsy values

Answer 51

0 empty strings '' or "" null undefined NaN

Question 52

different scopes of variables in functions

Answer 52

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

Question 53

difference between function declaration and function expression

Answer 53

function declaration function (sayHi) { alert("Hello") } function expression const sayHi = function() { alert("Hello") }

Question 54

What is a function

Answer 54

* A reusable block of code * Groups together a sequence of statements * Performs a specific task

Question 55

How do you call a function

Answer 55

Using the identifier and brackets, and inputting any parameters e.g. sumTwoNums(5, 8)

Question 56

check if input is not a number

Answer 56

Number.isNaN(variable)