intro to Javascript Flashcards
let name = null:
TYPEOF//
object
3 reference types
objects
arrays
funtions
let colors = {“blue, “green’}
typeof colors
object
function greet (name){
console.log(“hello” + name)
}
name is called a ____
parameter
default value of variables
undefined
an EXPRESSION produces __
a value
let x = 10 console.log(++x)//
console.log(x)
11
11
let x = 10 console.log(x++)//
console.log(x)
10
11
‘1’ === 1
false
strict operator compares _____ and ______
value and type
false || 1 || 2
1
operators go from left to right
two types of conditional statements
if…else
switch
when we need to repeat code we use ________
loops
name all the loops
for while do...while for...in for...of
let i = 0;
while (i <=10) {
if (i % 2 === 0){
i++;
continue;
}
console.log(i);
i++;
}
RETURNS?
1 3 5 7 9
SHORTEN THIS
function isLandscape (width, height){
return (width > height) ? true : false;
}
function isLandscape (width, height){
return (width > height);
}instead of writing “Not a number” you can use ___
NaN
typeof NaN //
number
In JavaScript, any function can return a new object. When it’s not a constructor function or class, it’s called a __________
factory function.
IN MODERN JS WHAT CAN BE CHANGED?
function createCircle(radius){
return {
radius: radius,
draw: function (){
console.log('draw')
}
};
}
make “radius: radius” to just “radius,:”
+++++++++
draw: (){
console.log(‘draw’)
}
};
function createCircle(radius){
return {
radius: radius,
draw: (){
console.log('draw')
}
};
}
create a new circle with radius of 14
let circle1 = createCircle(14)
what is Pascal notation?
when the first letter of every word is capitalized used in creating constructor functions
in JS a factory function uses the keyword _____ to create an object
return
function Circle(radius){
this.radius = radius;
}
ADD A DRAW FUNCTION
this.draw = function (){
}
when making a object from a constuctor function use the _____ keyword
new
when you use the new keyword with a constuctor function 3 things happen
- JS creates empty object
- sets “this” to point to new empty object
- new operator return a this new object from the function “return this”
what uses “this” keyword
- factory functions
- constructor functions
constructor functions
what uses the “return” keyword to create a new object
- factory functions
- constructor functions
factory functions
when we use Const on a object we can not reassign the name
TRUE / FALSE
TRUE
DELETE RADIUS
const circle = {
radius: 1
}
console.log(circle)
delete circle.radius;
every object in JS has a property called _______
constuctor
a constructor references
the function that was used to construct an object.
function Circle(radius) {
this.radius = radius;
}
const another = new Circle(1)
CREATE NEW OBJECT USING .CALL() METHOD
Circle.call({}, 1)
“THIS” REFERS TO WHAT AND WHY?
function Circle(radius) {
this.radius = radius;
}
const another = new Circle(1)
The object being created
uses new keyword when creating new obect
“THIS” REFERS TO WHAT AND WHY?
function Circle(radius) {
this.radius = radius;
}
const another = Circle(1)
Global object which is window
function Circle(radius) {
this.radius = radius;
}
const another = new Circle(1)
CREATE NEW OBJECT USING .CALL() METHOD POINTING TO WINDWO
Circle.call(window, 1)
In JS functions are objects
TRUE / FALSE
true
let x = 10 let y = x
x = 20
x?
y?
20
10
let x = {value: 10};
let y = x;
x.value = 20;
x?
y?
{value: 20}
{value: 20}
primitives are copied by their ______
objects are copied by their ________
value
reference
_______ are copied by their value
_______ are copied by their reference
primitives
objects
let number = 10;
function increase(number){
number++;
}
increase(number); //?
WHY?
10
we are dealing with let number at 10;
not in scope of function as primitives copied by value
let obj = {value: 10};
function increase(obj){
obj.value++;
}
console.log(increase(obj)); //?
11
objects copied by reference
const circle = {
radius: 1,
color: 'blue'
}
iterate to get keys
for (let key in circle)
console.log(key)
const circle = {
radius: 1,
color: 'blue'
}
iterate to get values
for (let key in circle)
console.log(circle[key])
Object is or is not iterable
NOT
const circle = {
radius: 1,
color: 'blue'
}
using FOR…OF iterate a OBJECT (even though for of is not the best way ) to get the keys
for (let key of Object.keys(circle))
const x = {value : 1};
this is a call to what function?
function Object() {}
const circle = {
radius: 1,
color: 'blue'
}
using FOR…OF iterate a OBJECT (even though for of is not the best way ) to get the values
for (let key of Object.entires(circle))
const circle = {
radius: 1,
color: 'blue'
}
CHECK TO SEE IF RADIUS IS IN CIRCLE
if (‘radius’ in circle) // code
an iterable ways to clone an object
for…in
for modern JS to copy an object is _______
object.assign()
a more modern way to doing this is
const another = {};
for (let key in obj)
another[key] = circle[key]
const another = object.assign
clone circle using SPREAD operator
const circle = {
radius: 1,
color: 'blue'
}
const obj = {…circle};
const circle = {
radius: 1,
}
const obj =
USING OBJECT.ASSIGN CLONE OBJECT ADD COLOR
const obj = Object.assign({color: “yellow”}, circle)
_______ types don’t have methods only objects
some examples
primitives
string, number, boolean….
const message = "hi";
const another = new String('hi');
console. log(typeof another); //
console. log(typeof message); //
object
string
const message = "hi"; there are methods on the above because JS creates a sting \_\_\_\_\_\_\_\_\_\_
wrapper
let address1 = new Address ('a','b', 'c');
let address2 = new Address ('a','b', 'c');
let address3 = address1;
console. log(areEqual(address1, address3));
console. log(areEqual(address1, address2));
console. log(areSame(address1, address2));
console. log(areSame(address1, address3));
console. log(areSame(address2, address3));
function Address (street, address, zip){
this.street = street;
this.address = address;
this.zip = zip;
}
function areEqual(address1, address2){
return address1.street === address2.street &&
address1.address === address2.address &&
address1.zip === address2.zip
}
function areSame(address1, address2){
return address1 === address2;
}
true true false true false
when you have nested loops, one way to clean up the code is too ________
break up the code in different functions and pass along the function
a another name for call back functions is a _________ function
predicate
Turn into a arrow funtion
courses.find(function(course){
return course.name === ‘a’
});
courses.find(course=>course.name === ‘a’)
with an arrow function if you have no parameters you must use an
empty set of parathenthases
const numbers = [1,2,3,4];
4 WAYS TO CLEAR ARRAY
numbers = [];
numbers. length = 0;
numbers. splice(0, numbers.length);
while (numbers.length > 0)
numbers.pop();
const numbers = [1,2,3,4]; let another = numbers number = []
console. log(another);
console. log(numbers);
[1,2,3,4]
[1,2,3,4]
const first = [1,2,3]; const second =[4,5,6];
const third = first.concat(second); // write using spread operator
const third = […first, …second];
2 main ways to iterate an array
for…of
forEach()
what type of function uses a semicolon to end ?
function expression
let run = function (){
console.log("run")
};
// attach the varibable move to run
run()
move();
let move = run;
DONT use () at the end. we are not calling the function.
What is hoisting in JS?
is the process of moving function declarations to the top of the program
function sum (a, b){
return a + b
}
sum(1) // returns
NAN
1 + undefined = NAN
the rest operator is associated with _____
function parameters
The spread operator is associated with ______
Arrays
function sum(...arg){
console.log(arg);
};
console. log(sum(1,2)); // ?
console. log(sum(1,2,3)); // ?
array [1,2]
array [1,2,3]
function sum(arg){
console.log(arg);
};
console. log(sum(1,2)); // ?
console. log(sum(1,2,3)); // ?
1
1
function rates(price, years) {
price = price || 3.5
years = years || 10
}
REWRITE TO DEFAULT VALUES
function rates(price = 3.5, years = 10) {
}function rate(principle, rates = 3.5, years) {
return = principle + rates + years;
}
rate(1000, 5) returns?
NAN
JS does not know what to assign 5 too.
function rate(principle, rates = 3.5, years) {
return = principle + rates + years;
}
rate(1000, 5) returns an error. How to avoid
use “UNDEFINED” in the arguements
const person = {
first: "steve"
last: "me"
fullName: function () {code} // WRITE SHORTER WAY
}fullName(){}
drop function keyword inside an object in ES 6
We use ________ to access properties in an object
getters
we use _________ to change or mutate properties
setters
getters
to access properties in an object
setters
to change or mutate properties
in order to alter properties of an object from the outside we must have a __________
setter
When you have a getter in an object you can drop the _______ when you call it
the ()
defensive programing (try and catch) should be done when?
start of the function
to catch a error use the ______ constructor function
throw new error()
the ________ word is associated with the throw keyword
exception
the 3 keywords associted with checking a value
throw, catch, try
{
const message = "hello";
}
console.log(message); // ?
error
{
var message = "helloVar";
}
console.log(message);
helloVar
_____ and ______ are limited to the block they are defeined
let
const
______ variables in a function take precedence over ______ varibales
local
global
function loop (){
for (let i = 0; i < 5; i++){
console.log(i);
}
}
loop();
0 1 2 3 4
function loop (){
for (let i = 0; i < 5; i++){
}
console.log(i);
}
loop();
error
i is let and outside scope
function loop (){
for (var i = 0; i < 5; i++)
console.log(i);
console.log(i);
}
loop();
0 1 2 3 4 5
function loop (){
for (let i = 0; i < 5; i++)
console.log(i);
console.log(i);
}
loop();
0 1 2 3 4
error
let uses the line first code as a block
var scope is or is not limited to block it’s defined but to the ______ its defined
NOT
function
var creates block-scope or function scope variables?
function scope
let creates block-scope or function scope variables?
block-scope
const creates block-scope or function scope variables?
block-scope
function loop (){
for (var i = 0; i < 5; i++){
if (true){
var color = red;
}
}
}
Is color accessible anywhere in the function?
yes because it’s var and it uses function scope.
function loop (){
for (var i = 0; i < 5; i++){
if (true){
let color = red;
}
}
}
Is color accessible anywhere in the function?
no because it’s let and only uses block scope
var color = "blue"; let age = 44;
window. color// ?
window. age // ?
blue - uses var and attached to window object
undefind -
function sayHi(){
code //
}
TRUE / FALSE
it the above attached to the window object?
true
What is “this” in JS?
the object that is executing the current function
if function a part of object called a method “this” references ____
the object itself
if function is not party of an object “this” references ____
the global object
const video = {
title: "a",
play (){
console.log(this);
}
}
video.play();
the video object
{title: “a”, play: ƒ}
const video = {
title: "a",
play (){
console.log(this);
}
};
video.stop = function (){
console.log(this);
}
video.stop();
the video object
{title: “a”, play: ƒ, stop ƒ}
function playVideo(){
console.log(this);
}
playVideo();
the window object
function Video(title){
this.title = title;
console.log(this);
}
const v = new Video(“a”);
Video{title: “a”}
constructor function creates new function and points this to object and returns object
const video = {
title: "a",
tags: ["a", "b", "c"],
showtags (){
this.tags.forEach(function(tag){
console.log(tag);
});
}
};
video.showtags(); // returns?
a, b, c
const video = {
title: "a",
tags: ["a", "b", "c"],
showtags (){
this.tags.forEach(function(tag){
console.log(this);
});
}
};
video.showtags(); // returns?
Window Object
Window Object
Window Object
the callback function is a regular function and it’s references global object (window)
function playVideo(){
console.log(this);
}
playVideo.call({name: “me”});
playVideo();
// {name: “me”};
// window object
function playVideo(){
console.log(this);
}
playVideo.call({name: “me”}); //
playVideo.apply({name: “me”}); //
// {name: “me”};
// {name: “me”};
with the apply method the arguments must be passed at an ________ .
array
with the call method the arguments must be passed at an ________ .
sting with comma
Call, apply, bind.
WHAT RETURNS a NEW FUNCTION?
Bind
function playVideo(){
console.log(this);
}
playVideo.bind({name: “me”})(); //returns
// {name: “me”};
call(), apply (), bind() returns a function, which can be executed at a later time
https://www.hacksparrow.com/javascript/bind-vs-apply-vs-call.html
bind()
