Skip to content

Commit a9b3d5c

Browse files
john-azzarojohn-azzaro
committed
added dynamic/static q, var types
1 parent 3ede877 commit a9b3d5c

File tree

1 file changed

+63
-54
lines changed

1 file changed

+63
-54
lines changed

‎JavaScript Outlines/Variables&DataTypes.js‎

Lines changed: 63 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -402,81 +402,90 @@
402402
console.log(emailGreeting()) //=> Hello Joe,
403403

404404

405-
/*
406-
What is a browser and how does a webpage render?
407-
408-
• A browser is a piece of software made up of several components responsible for specific pieces of work.
409-
410-
o The browser is an orchestration of a bunch of little engines.
411-
 HTML, CSS, JS, HTTP, Events, and other engines that are manipulating the DOM, which is an in-memory representation of what your web page looks like.
412405

413-
o A browser renders website by sending a request, getting and processing it, displaying it, and updating it.
414-
 When you type in an address in your browser, the bowser uses an http engine to access the internet and make a request from the user to get the website.
415-
 The server accepts that request and sends back all the files the user requested.
416-
 Now that the bowser has all the files (e.g. HTML, CSS, JavaScript), those engines process those files to build up the DOM and displays it on the page.
417-
 When you interact with the page (i.e. event) will alter the DOM and update (i.e. re-renders) the display.
418406

419-
o The browsers HTTP engine handles requests and Reponses.
420-
 The browser sends a request, the server sends a response if it is valid.
407+
/*
408+
What are the two variable types in JavaScript?
409+
410+
• JavaScript has two variable types, primitive types and reference types.
411+
412+
o When a variable is copied, its in-memory value is copied.
413+
 A fixed amount of memory is reserved after the creation of every variable.
414+
 When the variable is copied, the in-memory value is copied.
415+
416+
o Variables come in two types, primitive and reference.
417+
Primitive types Reference types
418+
Strings objects
419+
Numbers functions
420+
booleans arrays
421+
symbols
422+
undefined
423+
null
424+
425+
o Primitive types are COPIED BY VALUE and are INDEPENDENT.
426+
 When you work with primitives, the value is stored in the variable and copied as so.
427+
 IMPORTANT: Since a value is stored inside a variable, that value will remain the as the original value unless that value is changed before you copy it.
428+
The value of xa is copied to ya But when reassigned, xa has a new value but ya is same.
429+
430+
let xa = 10;
431+
let ya = xa;
432+
console.log(xa); //-> 10
433+
console.log(ya); //-> 10
434+
let xa = 10;
435+
let ya = xa; // the val of xa(10) copied to ya
436+
xa = 20 // the val of xa changed AFTER ya
437+
console.log(xa); //20 – xa shows reassigned value
438+
console.log(ya); //10 – ya keeps value of 10
439+
440+
441+
o Reference types are copied BY REFERENCE.
442+
 Unlike primitive types, reference types are NOT stored in the variable.
443+
 Reference types are stored somewhere else in memory and only the address is stored in the variable.
444+
 With reference types, there is a pass-by reference in which something points to something else elsewhere in the code (i.e. an object stored somewhere else).
445+
 Unless the object value is changed directly, it will not change.
446+
xb is a reference type Unless the value of the object is
447+
changed, it will remain the same.
448+
449+
let xb = {value: 10};
450+
let yb = xb;
451+
console.log(xb); //-> {value: 10}
452+
console.log(yb); //-> {value: 10}
453+
454+
xb.value = 20;
455+
console.log(yb); //-> {value: 20}
421456
422-
o The browser only understands JavaScript as the scripting language here.
423-
 The bowser does not understand angular or react, it only understands JavaScript.
424457
425458
*/
426459

427-
428460
/*
429-
How does a browser handle a JS file when it hits the JavaScript engine?
430-
431-
• A browser handles JS by allocating chunks of memory, creating a global object, process it in 2 phases (creation and execution), assign values to variables, and set aside memory for calls.
461+
What is the difference between dynamic and static typed languages?
432462
463+
• STATIC languages (like Java) CANNOT be changed but DYNAMIC languages like JavaScript can.
433464
434-
o The JavaScript engine is in control even before you feed it any JavaScript.
435-
 JavaScript will reach the browser via the JS. In fact, the JavaScript will reach the browser even if the there is no code in the JS file. This is because only the JavaScript engine reaches the DOM. The code that you write only goes as far as the JavaScript file. In a way, the engine rewrites the code.
436-
 The JavaScript engine creates the window object before any JS is fed to it.
465+
o In a STATIC language, the type of a variable is set and cannot be changed.
437466
438-
The Process for executing JavaScript:
467+
Java Example
439468
469+
String a = 'apple';
440470
441-
o First , a chunk of memory is created by the JavaScript engine to execute code in it.
442-
 This is called an execution context and is known as global execution.
443-
 However, the best way to think of this is as a chunk of memory.
444471
445-
o Second , the JavaScript engine creates an global object.
446-
 This global object is created inside the execution context and creates a variable called this which is set to a window object. (this = obj  obj: window).
447-
• So if you type “this” in your browser, you will see the window object.
448-
• This is what will happen every time you feed a JavaScript file to a JavaScript engine.
472+
 In a statically typed language like Java we are saying that this variable 'a' holes strings and ONLY strings. So in Java you have to specify what EXACT types each variable will hold.
449473
450-
o Third , if there is code to process, the JavaScript completes 2 phases in the first pass.
451-
 The first phase is the creation phase.
452-
• In the creation phase, where the engine looks for variables and functions.
453-
o If the JavaScript engine passes a variable, it sets aside some memory and hoists the variable up-top to refer to later. Initially, a variable is set to undefined as all variables are.
454-
o If the JavaScript engine passes a function, it will grab the whole value and put that into memory.
455-
 The second phase is the execution phase.
456-
• In the execution phase, the engine processes all the code.
474+
o In a DYNAMIC language like JavaScript, the typeof variables are determined DYNAMICALLY at the runtime.
475+
Dynamic JavaScript Example
457476
458-
Window.a = undefined;
459-
Window.foo = function foo() {…};
477+
let a = 'apple';
478+
Typeof evaluates as String.
460479
461-
o Fourth , on the second pass, the engine assigns values to variables.
462-
 The variable that memory was set aside for is now assigned a value ( let foo = ‘Hi’ )
463-
Window.a = ‘Hi’;
464-
Window.foo = function foo() {…};
465-
466-
467-
o Fifth , function calls set aside a piece of memory
468-
 The chunk of memory is created using the execution context with the value of “foo”.
469-
 Then, the JavaScript engine creates an object with the value of foo ( obj: foo ) and also a context for this called foo ( this = foo ).
470-
 The engine will also reference the outer environment (i.e. scope), which is pointing to the global context in this case.
480+
let a = 12345;
481+
Typeof evaluates as Number.
471482
483+
 In the first example, the variable “a” evaluate as string.
484+
 But if we then CHANGE the value from string to a number it will evaluate as 'number'. It DYNAMICALLY changes at runtime.
472485
473486
*/
474487

475488

476-
477-
478-
479-
480489
/*
481490
RESOURCES
482491
=========

0 commit comments

Comments
 (0)