Webbprog Flashcards
Vilka datatyper har JS?
undefined, boolean, number, bigint, string, symbol
- structual type - object
- structual root - null
Vad är typeof
en opertaion som returnerar en string som visar vilken type en operand eller function är av
- typeof null === “object”
- typeof function() {) === “function”
Vad menas med att JS är dynamically typed?
- variabler kan byra typ under programmets gång utan att behöva deklarera typen, datatypen bestäms vid exekvering, inte vid deklaration
Assignment i JS?
associerar namnet med new <value, type>
när sker type conversion i js ?
endast när värdet användes inte när det tilldelas
tex: typeof Number(’42’) // ’number’
vad är type coercion ?
js konverterar autoamtiskt values när det behövs
tex- 3 + ’42’; // ’342’
3 == ’3’ // true
String are mutable or immutable ?
immutable
Js with literals and qoutation marks
’single quotation mark’
* “double quotation mark”
* ‘string templates
can span multiple lines
and contain embedded expressions: 1+2=${1+2}‘
What’s falsy
false, 0, null, “”,’’,``
vad gör chaining operation xxx. ?
access property eller kallar på en funktion, undefined om object är null eller undefined, inget error kastande
vilka 4 lika med operationer finns det ?
- abstract equality ==, !=
- Streict equality ===, !==
- Object.is()
- Same value - hanterar NaN
Vad händer när man deklarerar en funktion
statemnet som skapar ett funktions objekt och en variabel med funktions namnet
exempel på en funktion som dubblar values från en array
const array1 = [1, 4, 9, 16];
const map1 = array1.map(function(x) { return x * 2 });
vad är default parameters?
parametrar som default har undefined om inget annat anges
vad är rest parameters?
samlar all rest arguments in i en array och måste nman ges i funktion signaturen
vad är arguments objektet i js?
array liknande objekt som innehåller alla argument passat från en funktion, sakanr array likande metoder
hur får man åtkomst till andra argumentet i en funktion med arugments objektet?
function foo(a, b, c) {
console.log(arguments[1]);
}
foo(1, 2, 3);
vad är en arrow funktion ?
compakt syntax för anonyma funktioer, har inte this, arguments eller super
skriv en arrow funktion som räknar ut en kvadraten av ett nummer
let sqr = x => x*x;
vad är functions orienterad programmering i js?
js tillåter funktioner att skickas som argument, kan användas i methoder som filter, map och reduce
hur hade man chainat filter, map och reduce för en array ?
[1, 2, 3, 4, 5]
.filter(x => x % 2 === 0)
.map(x => x + 2)
.reduce((sum, x) => sum + x, 0);
vad är closure?
en funktion som kan använda variables från outer scope, även när yttre funktionen har slutat köras
vilka olika scopes finns det ?
function scope - var
block scope - let och const
exempel på closure
function foo() {
let cnt = 0;
return () => cnt++;
}
let idGenerator = foo();
console.log(idGenerator());
vad är function scope ?
variables deklarerade med var får scope inom funktionen eller globalt
vad är block scope?
variabler deklarerade med let eller const har bara scope i blocket de är deklarerade i som i ajva
vad är hoisting?
varaibler och funktioners deklaration flyttas till toppen av deras scope innan exekvering men initaliseringen sker på samma plats
ge ett hoisting exempel
function foo() {
console.log(x);
var x = 3;
console.log(x);
}
foo();
vad är objekt definierade?
objekt har key to value parning, man kan accessa properties med .
obj.prop eller obj[‘prop’]
hur skapar man ett object literal ?
{prop: value}
const myObj = {name: ‘Per, age: 12}
hur skapar man ett objekt med en kosntruktor?
function Person(name, age) {
this.name = name;
this.age = age;
}
const per = new Person(‘Per’, 30);
hur tar man bort property fårn ett objekt ?
delte myObj.propertyName
hur exporterar och importerar man moduler i js ?
// Export (my-module.js)
export function cube(x) {
return x * x * x;
}
// Import (some-code.js)
import { cube } from ‘./my-module.js’;
vad hände rom man anger extra eller färre parametrar
koden förs ändå ingen error
vad är this ?
värdet på this beror på hur funktionen blir kallad,
hur gör man så att this referar till korrekt objekt i en metod
använd closure eller en arrow funktion för att behålla värdet på this
hur fungerar prototype based inheritance?
alla objekt ärver från ett annat obejt eller null, skapar en prototype chian
vad är properties ?
values kopplat till ett objekt
let obj = { name: “Emily”, age: 23 };
console.log(obj.name); // Accessing property
vad är protoype?
objekt ärver features från en annan. varje objekt har prototype,. objekt kan dela metoder genom deras prootype
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log(“Hello, “ + this.name);
};
let emily = new Person(“Emily”);
emily.greet(); // Inherited method from prototype
vad gör Object.create() ?
skapar ett nytt objekt med specifierad protoype
vad är … ?
spread operator
expands array or objekt
let arr = [1, 2, 3];
let newArr = […arr, 4, 5]; // [1, 2, 3, 4, 5]
vad är en statisk web page?
sida som inte kan byta content dynamiskt, visas såsom den är från servern
vad är en dynamisk web page?
kan ändra content dynamiskt, använder server och client side sscripting
vad är basic structure of HTML ?
<!DOCTYPE html>
<html>
<head>
<meta></meta>
<title>Page Title</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
namnge semantic HTML tags
<h1>, <p>, <nav>, <header>, <footer>, <article>, <section>.
</section></article></footer></header></nav></p></h1>
namnge non semantic tags
<div>, <span>
</span></div>
common attributes i HTMlL ?
id, class, href, src, alt, title, style
HTMl form elements ?
A: <form>, <input></input>, <label>, <button>, <select>, <textarea>.</textarea></select></button></label>
vad är CSS?
cascading style sheet
- för layout och styling
vad är CSS layout properties
display, psotion, z-index, overflow, visibility
CSS display property
block, inline, none, flex grid
CSS positioning
static, relative, absolute, fixed, sticky
vad är DOM ?
tree strcutre av en web page’s element, vi manipulerar trädet med JS
hur får vi åtkomst till ett DOM element?
document.getElementByID(),
document.querySelector()
document.getElemntByTagName()
vilak 3 faser av event propagation finns det i DOM
capturing phase, target phase, bubbling phase
hur sker event handling i js
addEventListener() eller inline handerls onclick=”myfunction()”
hur löser react de begränsningarna med HTMl och CSS ?
REact gör så attt js kan generera HTML träd och uppdatera DOM nät states ändras och skapa reusable komponenter
vad gör en react render function ?
returnerar ett DOM liknande träd mha JSX och React inject detta trädet i DOm
vad är JSX ?
JSX är syntax soms er ut som HTML men används i React för att besrika UI structure och compiles dwont o React.creteElement() calls
how do you embed js expressions in JSX
js in JSX with {} curly braces
how do you handle conditions in JSX ?
<div>
{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}
</div>
vad är en react komponent ?
en js function son retunrerar JSX
how do you pass dara from parent comp to child comp ?
data is passed thorugh props, parent comp sets as attribute in JSX
how do you handle events in react?
event handlers in camelcase like onClik = {handleClick}
What is the role of state in React comp
using useSTate hook to declare state and a function to update it
what is the key rule for react render functins?
render function should only return jsx not chanign state ro cause the UI to behave unexpectedly
how does components share state in React
lift it to a common parent comp and passing it down as props to child component. allows mult comp to acces and sync the same state
what is controleld component in react ?
form input element where value is controlled by react state. when user types react update the state changes the state and update the input value
what is an uncontrolled component?
forms input managed by browser DOm and useRef is used to access values directly
why are keys important when rendering lists in REact ?
keys help react identify which items have changed, added and removed
what are react hooks ?
function slike useState and useEffect that let you hook into react state and life features form function components
what use useEffect for this.
can perform side effects like data fetching and updating the DOM after rendering
what is context in react ?
context allows you to broadcast data tp al componennts in a subtree wothput passing props through every level
what is reducer ?
reducer is a function that tells us how the state hsuold change in reponse to actions , use dwith useReducer för state logic
what does ReactDOM.render() do
renders react comp into a DOm element and updates the DOM
what is the 3 stages of a react comp life?
mount, update, unmount
diff URI vs URL
URI - id for resource
URL - id for location of resource, URL subset of URI
how does browser history work in web routing ?
browser history allow susers to navigate back to prev visited pages . in SPA the DOM is updated without losing the application state
what is the purpose of a react router?
manages navigation, routing, updating the URL and rendering comp based on the route without reloading the page
what does <link></link> comp in router ?
<link></link>
comp allowa users to navigate between routers, updating browser history and URL without fetching a new page
