31:T462,md`#### Types of Scope - Global: Variables can be accessed anywhere. A JS document is globally scoped. var is globally scoped unless it is declared in a function scope. - Local: Variables in a function scope or block scope are local. - Lexical: A child scope has access to data in its parent's scope. Think nested functions - inner functions have access to variables of the outer function. - Block: Code enclosed in curly brackets {} can't be accessed outside the block. Variables declared with let and const have block scope. You see the block scopes in if/else statements, for example. var variables are *NOT* block scope. - Function: The variables declared in a function is accessible in that local scope. var is used to declare in functions, though you might be told to only use let from now on. `32:[] 2f:{"title":"let, const, var for beginners","cells":[{"id":0,"value":"md`# let, const, var for beginners`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1022,"value":"KWtable.cloneNode(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`I like to start with vocab/keywords first. Understanding the terminology helps you grasp the concepts better. Then follow with some examples to hopefully solidy these concepts.\n\nWe are going to learn how using var, let, const effects\n- the declaration and assignment of variables
\n- scope, and
\n- hoisting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"md`\n\n\n## REASSIGN VS REDECLARE: \nWhen you create a variable, you declare it with the keywords let, var, const. Reassign means you are giving the variable another value. var can both be redeclared and reassigned. Example:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"{\n var color = 'blue'; //color declared\n color = 'black' //color reassigned\n var color = 'pink' //color redeclared\n return color \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":619,"value":"md`#### try to reassign and redeclare the var, let, const variables (you can uncomment and recomment the code and run it pressing play on the right corner of the box or shift + enter) `","pinned":false,"hidden":false,"mode":"ojs"},{"id":667,"value":"{\n // var can be reassigned and redeclared\n var color = 'red';\n // color = 'blue';\n // var color = 'gold';\n return color;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"{\n // let can be reassigned but NOT redeclared\n //uncomment each line one at a time and run, notice the error when you try to REDECLARE using let\n let color = 'yellow'\n // color = 'green'\n // let color = 'white'\n return color\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"{\n //notice how you can't reassign nor redecalre with const?\n const color = 'purple';\n // color = 'violet';\n // const color = 'pink';\n return color\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":948,"value":"md`_{Try messing around with the listOfComputerComp by adding to the array or using pop method. With const declared, it is referencing to the array. Even if you can manipulate the array, you are not reassigning it to another object or redeclaring listOfComputerComp to something else.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":940,"value":"{\n const listOfComputerComp = ['apple', 'dell'];\n listOfComputerComp.push('compaq');\n // listOfComputerComp = [1, 1];\n // listOfComputerComp.pop();\n return listOfComputerComp;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`## SCOPE: \nVar, let, and const have different types of scope. Scope is the context where variables and expressions live. \n` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":782,"value":"html `_{Activity: follow commented instructions below}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"jsFile = {\n //Global Scope\n let milkyWay = 'I am globally scoped, so you can access me anywhere!';\n \n { //Block Scope \n var earth = 'Earth'; \n const sun = 'Sun';\n let house = 'My house';\n }\n //UNCOMMENT THESE ONE AT A TIME TO SEE WHAT HAPPENS (REMEMBER TO RECOMMENT THE LINE YOU UNCOMMENTED ALREADY)\n // return earth;\n // return milkyWay \n // return house;\n return sun;\n\n}\n//","pinned":true,"hidden":false,"mode":"ojs"},{"id":771,"value":"md`_{notice how when you return the let or const variables (house and sun), there is an error because let and const variables are limited to block scope and can only be accessed within that block! Whereas var doesn't have that block scope implementation and can accessed anywhere outside the block}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":888,"value":"md`## HOISTING: `","pinned":false,"hidden":false,"mode":"ojs"},{"id":896,"value":"md`hoisting means that everytime you declare a variable, Javascript's engine will immediately hoist (or PULL) those variables up in the beginning of the scope and the variables will be declared. But will they be assigned or initialized?
With var, it will be initialized as undefined, while let and const will not. That is why you get an error`","pinned":false,"hidden":false,"mode":"ojs"},{"id":902,"value":"{\n return name;\n var name = 'Beth';\n}\n//notice that we return name first and it name was assigned as 'undefined'\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":909,"value":"{\n return name;\n let name = 'Hanayo';\n}\n//let and const doesn't get referenced in the beginning of the scope, but rather just declared without being assigned to any value","pinned":true,"hidden":false,"mode":"ojs"},{"id":913,"value":"{\n return name;\n let name = 'Tofe';\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":993,"value":"md` ## Here's a table for reference ~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1056,"value":"KWtable.cloneNode(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"md`\n##### End Blog
Thanks for reading!
- Chi \n---\n#### Utilities\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"import {table} from \"@tmcw/tables@513\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"varLetConstTable = [\n {\n keyword: 'var',\n scope: 'function & global',\n 'Can be redeclared': 'yes',\n 'Can be reassigned': 'yes',\n hoisting: 'initialized with undefined'\n },\n {\n keyword: 'let',\n scope: 'block',\n 'Can be redeclared': 'no',\n 'Can be reassigned': 'yes',\n hoisting: 'unintialized'\n },\n {\n keyword: 'const',\n scope: 'block',\n 'Can be redeclared': 'no',\n 'Can be reassigned': 'no',\n hoisting: 'unintialized'\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"retroColors = ({\n y: '#C97F04', \n p: '#85496F', \n g: '#6C9575', \n r:'#A23419'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"brightCycleColors = ({\n y: '#EEAF00', \n r: '#A54314', \n b: '#01A7B7', \n g:'#8B7366'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"html`\n\ntest color.\n\ntest color.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"codeStyle = `style=background:${retroColors.p};color:${brightCycleColors.y};`","pinned":false,"hidden":false,"mode":"ojs"},{"id":721,"value":"vocabStyle=\n `style=background:${brightCycleColors.x};color:${brightCycleColors.b};`","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"activityStyle = `style=color:${brightCycleColors.r};`","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"KWtable = table(varLetConstTable, {\n columns: {\n keyword: {\n formatter(val) {\n return html`${val}`;\n }\n },\n hoisting: {\n title: 'Hoisting behavior'\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}}