Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Javascript > Basic JS > Flashcards

Basic JS Flashcards

1
Q

Add JS to your file

A 
<script src="main.js"></script>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

define variables

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

primitive data types

A

strings, number, boolean, null, undefined, symbols

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

check what type a variable is

A

typeof variableName

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

check length of string

A

stringVar.length
this is a property

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

add variable to strings

A

using backticks and the ${} syntax -

`This string includes a ${variable}`
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

change case of string

A

str.toUpperCase()
str.toLowerCase()

these are string methods

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

get only part of a string

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

combining string methods

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

split a string into an array

A
  • str.split(‘’) - pushes every letter of the string to an array
  • Array.from(‘word’)
  • Use the spread operator e.g. const newArr = […myWord]
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

comments

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

get a specific element from an array

A

target item via index = arr[2]

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

add item to end of array

A

arr.push()
returns new length of array

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

add item to start of array

A

arr.unshift()
returns length of new array

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

remove item from end of array

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

check if something is an array

A

Array.isArray(someVar)
returns boolean

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

get index of a certain value

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

check if item is in an array

A

arr.includes(‘item’)
returns boolean

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

merge two or more arrays

A
  • arr1.concat(arr2) returns new array
  • Spread Operator [… arr 1, …arr2]
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

concatenate all items of array into a string

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

what are objects

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

access single value in objectq

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

to create variables from key value pairs in an object

A

using destructring
const { firstName, lastName } = person

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

24
Q

convert array of objects to JSON

A

JSON.stringify(ourArrofObjs);

25
Q

Looping with for loops

A

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

26
Q

Looping with while loops

A

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

27
Q

looping through arrays with for loop

A

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

28
Q

looping through arrays with for of

A

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

29
Q

.forEach()

A

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

30
Q

.map()

A

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

31
Q

.filter()

A

returns a new array of items that meet some condition

const newArr = arr.filter((item) => {
  return item that meets a condition
})
32
Q

chaining array methods

A

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

33
Q

conditionals

A

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

34
Q

ternary operator

A

used alot to assign variables based on a condition

const color = x > 10 ? 'red' : 'blue'
35
Q

switch statements

A

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;

36
Q

writing functions

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

37
Q

arrow functions

A

const addNums = (num1 = 1, num2 = 1) => num1 + num2;

or

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

38
Q

create constructor function

A

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

39
Q

adding methods to constructor functions

A

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

40
Q

adding methods to constructor functions on the prototype

A

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

41
Q

creating a constructor functions using Class

A

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

42
Q

DOM MANIPULATION

select an element in html

A

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

43
Q

DOM MANIPULATION

removing an item

A

document.querySelector(‘item’).remove()

ul.lastElementChild.remove()

44
Q

DOM MANIPULATION

change/add text content

A

document.querySelector(‘h1’).textContent = ‘Hello’
document.querySelctor(‘h2’).innerText = ‘World’
document.querySelector(‘section’).innerHTML = ‘<h1>Hello World</h1’

45
Q

DOM MANIPULATION

changing styles

A

document.querySelector(‘.btn’).style.background = ‘red’

46
Q

DOM MANIPULATION

event listeners

A

const btn = document.querySelector(‘.btn’)

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

47
Q

DOM MANIPULATION

add and remove a class

A

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

48
Q

DOM MANIPULATION

remove an error message after a certain time

A

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

49
Q

DOM MANIPULATION

create an element that does not already exist on the document

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

How to escape quotes

A 
"You can use \"backslashes\" to escape quotes within a string"
51
Q

What are falsy values

A

0
empty strings ‘’ or “”
null
undefined
NaN

52
Q

different scopes of variables in functions

A

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

53
Q

difference between function declaration and function expression

A

function declaration
function (sayHi) {
alert(“Hello”)
}

function expression

const sayHi = function() {
alert(“Hello”)
}

54
Q

What is a function

A
  • A reusable block of code
  • Groups together a sequence of statements
  • Performs a specific task
55
Q

How do you call a function

A

Using the identifier and brackets, and inputting any parameters

e.g. sumTwoNums(5, 8)

56
Q

check if input is not a number

A

Number.isNaN(variable)

57
Q
A

Javascript (6 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions