``). Inside a template literal, you're able to refer to variables or execute code by using ${}. Take a look at the following example:",{"codeBlock":"console.log(`10 + 25 = ${10 + 25}`) // => \"10 + 25 = 35\""},"By wrapping the calculation 10 + 25 in the ${}, we are able to calculate the total right there inside of the string. We can also refer to specific variables in a template literal as well:",{"codeBlock":"const firstName = 'Kyle';\nconst greeting = `Hi, ${firstName}!`;\nconsole.log(greeting); // => \"Hi, Kyle!\""},"Template literals also remove the need for escaped characters and string concatenation in many case as well. If you hit return, tab, etc inside of a template it will format the string in that form for you! You can also inject multiple variables into the same string.",{"codeBlock":"const firstName = 'David';\nconst lastName = 'Bowie';\nconsole.log(`My favorite artist is ${firstName} ${lastName}`) \n// => \"My favorite artist is David Bowie\""}]},{"instructionHeading":"Challenge","instructionContent":["Declare 2 variables x & y, and set their values to any number you like. Next declare a constant solution which is a string that prints to the console like the example below:",{"codeBlock":"let x = 2;\nlet y = 5;\nconst solution = ``)!"]}]}},"challenge-type-coercion":{"subunitId":"challenge-type-coercion","heading":"Challenge: Type Coercion","solve":{"code":"// Uncomment the code below to test\n// console.log(10 + 5);\n// console.log(\"10\" + 5);\n// console.log(5 + \"10\");","instructions":[{"instructionHeading":" ","instructionContent":["Look at the console.log statements for this challenge. What do you think will be logged to the console? When you have an idea, uncomment and run the code.","What happened?",{"codeBlock":"console.log(10 + 5); // 15\nconsole.log(\"10\" + 5); // 105"},"The first statement adds the numbers as expected. But in the second statement, '105' is logged to the console. Notice the quotation marks wrapped around the number 10 in the console.log statement; this means that the value is a string. There are no quotation marks around the number 5.","What happened is type coercion, an important concept in JavaScript. We can't add a string value and a number value together; instead, JavaScript \"coerces\" (changes) the number into a string and treats the + operator as an instruction to concatenate strings.",{"codeBlock":"console.log(\"10\" + \"5\"); // 105\nconsole.log(\"10\" + 5); // 105"}]},{"instructionHeading":"Challenge","instructionContent":["Uncomment the code and see what happens. Then, try it out yourself and make sure you really understand the concept."]}]}},"challenge-typeof":{"subunitId":"challenge-typeof","heading":"Challenge: typeof Operator","solve":{"code":"const favMovie = \"Star Wars: Episod IV\";\nconst timesSeen = 732;\nconst goingToWatchItAgain = true; \n\n// ADD CODE BELOW HERE","test":"describe('favMovieType', () => {\n it('should be a string', () => {\n expect(favMovieType).to.be.a('string');\n });\n it('should be \"string\"', () => {\n expect(favMovieType).to.equal('string');\n });\n});\n\ndescribe('timesSeenType', () => {\n it('should be a string', () => {\n expect(timesSeenType).to.be.a('string');\n });\n it('should be \"number\"', () => {\n expect(timesSeenType).to.equal('number');\n });\n});\n\ndescribe('seeAgainType', () => {\n it('should be a string', () => {\n expect(seeAgainType).to.be.a('string');\n });\n it('should be \"boolean\"', () => {\n expect(seeAgainType).to.equal('boolean');\n });\n});\n","instructions":[{"instructionHeading":" ","instructionContent":["Quite often in programming, we need to be able to look up what the specific data type of a given operand is. In JavaScript, the typeof operator returns the data type of its operand in the form of a string. Operand can be any object, function or variable.",{"codeBlock":"typeof(\"testing\") // => \"string\"\ntypeof(22) // => \"number\"\ntypeof(false) // => \"boolean\""},"Keep in mind that the typeof an array is an object."]},{"instructionHeading":"Challenge","instructionContent":["1. Declare a variable favMovieType. Then, using the typeof operator, assign it the value of favMovie's data type.","2. Declare a variable timesSeenType. Then, using the typeof operator, assign it the value of timesSeen's data type.","3. Declare a variable seeAgainType. Then, using the typeof operator, assign it the value of goingToWatchItAgain's data type."]}]}},"challenge-union":{"subunitId":"challenge-union","heading":"Challenge: union","solve":{"code":"// ADD CODE HERE\n\n// Uncomment these to check your work!\n// const arr1 = [5, 10, 15];\n// const arr2 = [15, 88, 1, 5, 7];\n// const arr3 = [100, 15, 10, 1, 5];\n// console.log(union([arr1, arr2, arr3])); // should log: [5, 10, 15, 88, 1, 7, 100]","test":"describe('union', () => {\n it('should be a function', () => {\n expect(union).to.be.a('function');\n });\n it('should return an array', () => {\n const answer = union([[], []]);\n expect(answer).to.eql([]);\n });\n it('should flatten two distinct arrays', () => {\n const arr1 = [1, 2];\n const arr2 = [3, 4];\n const answer = union([arr1, arr2]);\n expect(answer).to.eql([1, 2, 3, 4]);\n });\n it('should flatten many arrays with repeated values', () => {\n const arr1 = [1, 2];\n const arr2 = [3, 4];\n const arr3 = [3, 4, 5];\n const arr4 = [0, 1, 2, 3, 4, 5];\n const answer = union([arr1, arr2, arr3, arr4]);\n expect(answer).to.eql([1, 2, 3, 4, 5, 0]);\n });\n});\n","instructions":[{"instructionContent":["Construct a function union that takes an input array of arrays, compares each array, and returns a new flat array that contains all elements. If there are duplicate elements, only add it once to the new array. Preserve the order of the elements starting from the first element of the first input array. BONUS - Use reduce!"]}]}},"challenge-variable-assignment":{"subunitId":"challenge-variable-assignment","heading":"Challenge: Variable Assignment","solve":{"code":"const firstName = \"Jenny\";\n\n// Try un-commenting the line below\n// console.log(\"Hi, \" + firstName)\n\n// ADD CODE HERE\n\n\n// Uncomment the line below to check your work!\n// console.log(\"Hi, \" + firstName + \" \" + lastName);\n","test":"describe('firstName', () => {\n it('should not be undefined or null', () => {\n expect(firstName).to.not.equal(undefined);\n expect(firstName).to.not.equal(null);\n });\n\n it('should have a value of type string', () => {\n expect(firstName).to.be.a('string');\n });\n});\n\ndescribe('lastName', () => {\n it('should not be undefined or null', () => {\n expect(lastName).to.not.equal(undefined);\n expect(lastName).to.not.equal(null);\n });\n it('should have a value of type string', () => {\n expect(lastName).to.be.a('string');\n });\n});\n","instructions":[{"instructionHeading":"Challenge","instructionContent":["Now that we know what variables are, let's create one of our own. Below line 6, declare a constant named lastName and assign it the value of your last name. Make sure you wrap your name in quotation marks, e.g. \"Smith\".","Now, go back to line 1 and modify the value of firstName to be your first name. Uncomment the console.log statement on line 10 and run your code; you should see Jenny replaced by your first name—unless your first name is Jenny, of course."]}]}},"challenge-variable-assignment-const":{"subunitId":"challenge-variable-assignment-const","heading":"Challenge: Constant Assignment - (const)","solve":{"code":"// Declare a constant myCodingConfidence and assign it a value of \"unwavering\"\n// ADD CODE HERE\n\n\n// Try un-commenting the line below to test your answer\n// console.log(\"My confidence in my coding ability is \" + myCodingConfidence);\n\n// ADD CODE HERE\n\n\n\n","test":"function changeConst() {\n return (myCodingConfidence = 'i can change');\n}\n\ndescribe('myCodingConfidence', () => {\n it('should not be undefined or null', () => {\n expect(myCodingConfidence).to.not.equal(undefined);\n expect(myCodingConfidence).to.not.equal(null);\n });\n\n it('should be a constant', () => {\n expect(changeConst).to.throw();\n });\n\n it('should have a value of type string', () => {\n expect(myCodingConfidence).to.be.a('string');\n });\n\n it('should be assinged a value of \"unwavering\"', () => {\n expect(myCodingConfidence).to.equal('unwavering');\n });\n});\n","instructions":[{"instructionHeading":"Challenge","instructionContent":["Ok, so now that you have a hang of var and let, let's practice declaring a constant. As we metioned in the previous lesson, sometimes we want a variable who's value never changes. In this case we use the const keyword. For instance, take a look at the example below. My favorite TV show is Game of Thrones, and obviously that's never going to change, so I've declared a constant myFavoriteShow and assigned it a value of \"Game of Thrones\".",{"codeBlock":"const myFavoriteShow = \"Game of Thrones\";\nconsole.log(myFavoriteShow) // => \"Game of Thrones\""},"Maybe your favorite tv show changes quite often though, so here's a few more concrete examples of variables that won't ever change:",{"codeBlock":"const threeTimesFive = 15;\nconst christmasDay = \"December 25th\"\nconst myDateOfBirth = \"02/23/1978\""},"Now it's your turn. You're on a roll, and you're feeling good about it, so on line 3, declare a constant myCodingConfidence and assign it a value of \"unwavering\". Next, uncomment out line 6 to test your code!","Now below line 8, let's try and reassign the value of myCodingConfidence to something else. After you've reassigned it, hit the Run Code button again and you'll know you did it right if you get the following error in the console:",{"codeBlock":"Type Error: Assignment to constant variable."},"Did you get the error message? Congratulations, you have successfully declared a constant!","Now in order to pass the tests, you'll need to get rid of that error, so comment out line 9 where you attempted to reassign the variable and click the Check My Answer button below to run the tests!"]}]}},"challenge-variable-assignment-let":{"subunitId":"challenge-variable-assignment-let","heading":"Challenge: Variable Assignment - (let)","solve":{"code":"// Declare a variable favFood and assign it a value of \"tacos\"\n// ADD CODE HERE\n\n\n// Try un-commenting the line below to test your answer\n// console.log(\"My favorite food is \" + favFood);\n\n// ADD CODE HERE\n\n\n// Uncomment the line below to check your work!\n// console.log(\"No, but really, my favorite food is \" + favFood);","test":"describe('favFood', () => {\n it('should not be undefined or null', () => {\n expect(favFood).to.not.equal(undefined);\n expect(favFood).to.not.equal(null);\n });\n\n it('should have a value of type string', () => {\n expect(favFood).to.be.a('string');\n });\n\n it('should be not be \"tacos\"', () => {\n expect(favFood).to.not.equal('tacos');\n });\n});\n","instructions":[{"instructionHeading":"Challenge","instructionContent":["Now let's try declaring a variable with the let keyword. On line 3, declare a variable favFood using let and then assign it a value of the string \"tacos\". Now you can uncomment out line 6 to test your code. You should see \"My favorite food is tacos\" in your console.","But wait! Maybe tacos aren't YOUR favorite food. Luckily, since we declared our variable, favFood, using the let keyword, we can reassign it's value to something different!","The best part is we don't have to declare the variable again. All we need to do is reassign it's value. Check out the example below:",{"codeBlock":"let lastName = \"Snow\";\nconsole.log(lastName); // => Snow\nlastName = \"Targaryen\";\nconsole.log(lastName); // => Targaryen"},"On line 9, let's change the value of favFood to whatever your favorite food is. Next, uncomment the console.log on line 12 to check your code. You should see \"No, but really, my favorite food is lastName and assign it the value of your last name. Make sure you wrap your name in quotation marks, e.g. \"Smith\". Here's another example in case:",{"codeBlock":"var myName = \"Kyle\";\nconsole.log(myName) // => \"Kyle\""},"Now, go back to line 1 and modify the value of firstName to be your first name. Uncomment the console.log statement on line 10 and run your code; you should see Jenny replaced by your first name—unless your first name is Jenny, of course."]}]}},"challenge-variable-reassignment":{"subunitId":"challenge-variable-reassignment","heading":"Challenge: Variable Reassignment","solve":{"code":"let firstName = \"Jenny\";\n\n// ADD CODE BELOW\n\n\n// Uncomment the line below to check your work!\n// console.log(\"Hi, \" + firstName);","test":"describe('firstName', () => {\n it('should no longer have the value \"Jenny\"', () => {\n expect(firstName).to.not.equal('Jenny');\n expect(firstName).to.not.equal(null);\n expect(firstName).to.not.equal(undefined);\n });\n it('should not be undefined or null', () => {\n expect(firstName).to.not.equal(undefined);\n expect(firstName).to.not.equal(null);\n });\n\n it('should have a value of type string', () => {\n expect(firstName).to.be.a('string');\n });\n});\n","instructions":[{"instructionHeading":" ","instructionContent":["You can update variables that you declare with let and var. (What happens if you try to reassign the value of a const?)","Look at the example below and notice how the value assigned to the variable lastName changes.",{"codeBlock":"let lastName = \"Snow\";\nconsole.log(lastName); // should log: Snow\nlastName = \"Fowlkes\";\nconsole.log(lastName); // should log: Fowlkes"}]},{"instructionHeading":"Challenge","instructionContent":["In the code editor, reassign the variable firstName to a new name on line 4."]}]}},"challenge-were-awesome":{"subunitId":"challenge-were-awesome","heading":"Challenge: wereAwesome","solve":{"code":"function wereAwesome(you, yourBuddy) {\n // ADD CODE HERE\n}\n\n\n// Uncomment the lines below to test your function:\n// console.log(wereAwesome(\"Dave\", \"Will\")); // => \"Will and Dave are awesome!\"\n// console.log(wereAwesome(\"Victoria\", \"Jenny\")); // => \"Jenny and Victoria are awesome!\"\n// console.log(wereAwesome(\"Chris\", \"Jac\")); // => \"Jac and Chris are awesome!\"\n// console.log(wereAwesome(\"Phillip\", \"Skyler\")); // => \"Skyler and Phillip are awesome!\"","test":"describe('wereAwesome', () => {\n it('should be a function', () => {\n expect(wereAwesome).to.be.a('function');\n });\n});\n\ndescribe('wereAwesome(\"Dave\", \"Will\")', () => {\n it('should return \"Will and Dave are awesome!\"', () => {\n expect(wereAwesome('Dave', 'Will')).to.eq('Will and Dave are awesome!');\n });\n});\n\ndescribe('wereAwesome(\"Jenny\", \"Victoria\")', () => {\n it('should return \"Jenny and Victoria are awesome!\"', () => {\n expect(wereAwesome('Victoria', 'Jenny')).to.eq('Jenny and Victoria are awesome!');\n });\n});\n\ndescribe('wereAwesome(\"Chris\", \"Jac\")', () => {\n it('should return \"Chris and Jac are awesome!\"', () => {\n expect(wereAwesome('Jac', 'Chris')).to.eq('Chris and Jac are awesome!');\n });\n});\n\ndescribe('wereAwesome(\"Phillip\", \"Skyler\")', () => {\n it('should return \"Skyler and Phillip are awesome!\"', () => {\n expect(wereAwesome('Phillip', 'Skyler')).to.eq('Skyler and Phillip are awesome!');\n });\n});\n","instructions":[{"instructionContent":["Write a function wereAwesome that takes you and your pair programming partner's name and returns the string \"[your buddy's name] and [you] are awesome!\"","If you are coding on your own, get creative! Instead of a pair programming partner, it could be the name of your friend, your pet, or even your rubber ducky!"]}]}},"challenge-while-loops-conditional-expression":{"subunitId":"challenge-while-loops-conditional-expression","heading":"Challenge: While Loops - Conditional Expression","solve":{"code":"// ADD CODE HERE\n\n\n// Uncomment the line below to check your work!\n// console.log(sum);","test":"describe('addThis', () => {\n it('should equal 10', () => {\n expect(addThis).equal(10);\n });\n});\n\ndescribe('sum', () => {\n it('should equal 45', () => {\n expect(sum).to.equal(45);\n });\n});\n","instructions":[{"instructionHeading":" ","instructionContent":["Initialize a variable addThis to 0 and a variable sum to 0. Use a while loop to repeat a code block as long as addThis is less than 10. In the code block, add the value of addThis to sum, then increment addThis by 1. After the while loop runs, the value of sum should be the sum of the numbers 0 through 9. It's crucial to note that if there's more than one statement in the loop block, the entire block needs to be enclosed in curly braces {}. This ensures that all statements within the block are executed together in each iteration of the loop."]}]}},"challenge-while-loops-counters":{"subunitId":"challenge-while-loops-counters","heading":"Challenge: While Loops - Counters","solve":{"code":"function imAboutToExplodeWithExcitement(n){\n // ADD CODE HERE\n}\n\n// Uncomment the line below to check your work!\n// imAboutToExplodeWithExcitement(10); // expected log 10, 9, 8, 7, 6, 'Oh wow, I can't handle the anticipation!', 4, I'm about to explode with excitement!', 2, 1, 'That was kind of a let down'","test":"describe('imAboutToExplodeWithExcitement', () => {\n it('should be a function', () => {\n expect(imAboutToExplodeWithExcitement).to.be.a('function');\n });\n});\n","instructions":[{"instructionContent":["Using a WHILE loop, write a function imAboutToExplodeWithExcitement which prints a countdown from n. When the countdown gets to 5, print 'Oh wow, I can't handle the anticipation!' When it's at 3, print 'I'm about to explode with excitement!' When the counter is finished, print 'That was kind of a let down'."]}]}},"challenge-while-loops-fundamentals":{"subunitId":"challenge-while-loops-fundamentals","heading":"Challenge: While Loops - Fundamentals","solve":{"code":"let count = 2;\n// ADD CODE HERE\n\n\n// Uncomment these to check your work!\n// console.log(count); ","test":"describe('count', () => {\n it('should equal 8', () => {\n expect(count).equal(8);\n });\n});\n","instructions":[{"instructionHeading":" ","instructionContent":["A while loop is an alternative iteration statement. JavaScript's thread of execution will repeatedly process the code block until the while loop's conditional expression evaluates to false. **Be careful to avoid an infinite loop!**"]},{"instructionHeading":"Challenge","instructionContent":["Use a while loop to increment count by 2 on each repetition of the block of code. Run the code block of your while loop until count is 8."]}]}},"chrome-extension-1":{"subunitId":"chrome-extension-1","heading":"Project Part 1 - Introduction to Chrome Extension Project","read":["You have heard many times in CSX that the best way to learn to code is not to ‘learn to code’. Instead, you should write code to solve problems. Here we’re going to solve a real world problem with JavaScript, HTML and CSS. If you have gone through the JavaScript for Beginners or CS Prep programs, we highly encourage you to complete this project. This experience will introduce you to concepts that will help you prepare for the Codesmith immersive programs. This is a great project to do as part of a hackathon!","We're going to do this by building a Chrome Extension that solves a problem you face every day. Why is this so effective?",{"orderedList":["Minimal lines of 'setup code' means less copying and pasting from tutorials (not effective).","When the going gets tough, you have a clear goal to help push you through blocks.","Focuses you on problem-solving (it's what we look for in Codesmith candidates)."]},"Our Chrome extension is a powerful productivity tool. It keeps a user focused by allowing them to load their favorite distracting site - say Twitch. But rather than showing videos, they see an inspiring image with the text \"Get back to achieving your coding dreams.\"","
","This extension is powerful. You don’t need to switch off the extension if you want to watch a specific individual video. There’s less psychological cost than finding a site fully blocked. Instead you see the site load, but the distracting content is replaced with a motivating message.","We'll have 5 parts to building our extension that will introduce us to 5 core concepts of web development.","Part 1: Introduction and overview","Part 2: DOM manipulation and Chrome developer tools",{"list":["Introduction to the DOM","Manipulating the DOM manually with Chrome dev tools","Using JavaScript in the Chrome dev tools console to select the main container element on Twitch","Using JavaScript to remove the element"]},"Part 3: JSON and configuration ",{"list":["Creating a manifest file","Adding the key pieces to the manifest (with JSON)","Creating the main JavaScript file","Inserting our DOM manipulation code in the JavaScript file","Running the unpackaged extension in Chrome"]},"Part 4: Libraries and jQuery",{"list":["Introducing jQuery to gain experience working with 3rd party libraries","Dependencies: Adding jQuery into manifest","Using jQuery to append an image to the DOM and add our custom text: \"Get back to achieving your coding dreams\"","Adding a CSS class to the element (using a CSS style file)"]},"Part 5: Asynchronous callbacks and the JavaScript engine",{"list":["Introducing the JavaScript engine and how it fits in the browser setup","Asynchronous callbacks - web APIs, event queue"]},"Part 6: APIs and Ajax",{"list":["Using Lorem Picsum API to return a random image each time we load twitch.tv"]},"All while building a tool that is powerful enough to improve your productivity every day.","We'll start by developing a thorough understanding of the DOM and Chrome developer tools in order to remove the distracting content."]},"chrome-extension-2":{"subunitId":"chrome-extension-2","heading":"Project Part 2 - DOM manipulation and Chrome developer tools","read":["Twitch's webpage, like any, is a collection of ‘content in content’ - video thumbnails, titles, subtitles, text areas, icons, etc.","That’s all HTML is - words that describe:",{"orderedList":["What should be on the page and","In what order"]},{"codeBlock":"Welcome to Twitch
\n![](\"twitch-logo.jpg\"){kind=logo}
"},"The code above tells the web browser (e.g., Chrome) to place a header with the words 'Welcome to Twitch', then right afterwards place an image - the Twitch logo (which is in the JPG image format).","Behind the scenes, the browser analyzes each of these instructions and uses them to form a behind-the-scenes diagram/model of the page.","
","This is crucial. It allows us to write JavaScript code that can go and interact with the page by navigating (known as 'traversing') this diagram/model (DOM). We can then use JavaScript to add elements to the page or delete bits without writing any further HTML. We want to use JavaScript to add/remove content because we don’t have to reload the page to do it - it can be done live, or ‘dynamically’, while the page is already loaded.","We can see this behind-the-scenes structure by selecting one of the elements on the page and viewing it in the source code in Chrome's developer tools.","
","We need to delete our main element here - we can just go ahead and do it by right clicking on the right section of the source code and deleting!","But of course we need to do it automatically - so we'll need to write code.","We can run JavaScript straight in the webpage from the ‘Console’ (later we'll put the code in a file that will be part of the Chrome extension so we can run it automatically in the background) but for now we can test out the right code to write here. To go to the Console, open it with Command + Option + J (Mac) or Control + Shift + J (Windows).","Each element (in code that is helpfully written) has a label we can use to grab it - called a selector. We can find it by clicking on the element...and there it is:","
","The element’s label (its ‘id’) is 'root' (there are different types of labels - ‘id’, ‘class’).","So now we need to use some JavaScript to grab/select that element so we can then apply the delete command (function) to it.","This is where the problem-solving research begins. Before you get the answer from me, take a look at MDN. MDN is a great resource for finding the methods/functions that you will need to interact with the DOM. You can find a method for selecting an element here under \"instance methods\".","","OK, hopefully you went and found that the method we need is:","const contents = document.getElementById('root');","document is an object with lots of built in methods stored on it (functions stored on an object are called methods) and the one we're using takes an 'id' and finds the element with that particular 'id'.","So we now store that element in a variable ready for deletion - we store it in a variable 'contents'. Let’s check if it’s there stored in 'contents':","
","...and there it is!","Now we need to find the delete method (again, you can go look it up here on MDN.","So we need to run the delete function on the element - Our docs say we need to run:","el.parentNode.removeChild(el);","We have to replace ‘el’ with our actual element that we stored in a variable so we’ll be running:","contents.parentNode.removeChild(contents);","Success! We've removed the distracting content from our page using JavaScript, our understanding of the DOM, and the Chrome developer tools."," It’s important to note that, today, it’s more common to use: ","document.querySelector('#root') instead of document.getElementById('root') \n → document.querySelector() can select elements using any CSS selector, not just IDs.
\n contents.remove() instead of contents.parentNode.removeChild(contents)
\n → element.remove() is a newer, simpler method that removes an element directly from the parent without needing a reference.","For our purposes, we’re keeping it old school because it’s more explicit and a little easier to follow when you’re first learning how the DOM works.","Next we'll move this functionality into an 'extension' so we don't need to type it out in our code each time - instead we can save our code in a file and run it in the background as an extension. We'll do this in Part 3.","Further Challenges:",{"list":["Remove more specific elements - perhaps the History button or other buttons on the page","Try adding (hint: appending) content to the page from the console","If your most addictive site isn't Twitch, but for example Instagram, try to emulate this same process with Instagram’s page."]}]},"chrome-extension-3":{"subunitId":"chrome-extension-3","heading":"Project Part 3 - JSON and configuration","read":["In the last lesson, we learned how we could manipulate real website content just by typing a few lines of code directly in our browser. This is really cool, but we wouldn’t want to do this manually every time we visited Twitch.","Luckily for us, we can build a Chrome extension to automate this - and it’s really simple!","To start, open your favorite text editor. If you want to try a tool specifically for coding, check out VSCode! From the file menu, let’s create a new folder to hold our project. It’s in this folder that we will put all of our files.","Since the code is fresh in our minds, let’s start with the file that will contain that functionality. In our new project folder, let’s add a new file and call it “main.js\". (The ‘.js’ extension tells us that the contents of this file are in JavaScript.)","In this file, let’s add the two lines of code we previously typed directly into the browser console:","
","Later on we’ll add the code to replace our lost videos with an image, but for the moment this is all we need here. Make sure to save the file!","Now how on earth does this code that lives in this main.js file on our computer know that it should run as a Chrome extension? So far, it really has no idea!","We need to create one other file to tell Google the settings for this code - that this code is a Chrome extension and that it should apply only when we visit Twitch.","
","Before we create this second file, it is important to understand JavaScript Object Notation - or JSON for short. JSON is a way to format data so it is easily interpreted by computers. Here is an example of how we might format data about a person in JSON:",{"codeBlock":"{\n \"name\": \"Joe Chrome\",\n \"age\": 27,\n \"hometown\": {\n \"city\": \"Playa Vista\",\n \"state\": \"CA\"\n },\n \"siblings\": [\"Polly\",\"Edgar\"]\n}"},"Notice that the information is wrapped in curly braces, making it one object. Within the braces are several “key-value” pairs. The keys are to the left of the colon, and the values are on the right.","All of the keys are strings (words wrapped in double quotes), but the values can be strings, numbers, arrays of values (wrapped in square brackets), or other objects with their own key-value pairs.","We will follow this same format for our extension settings.","Let’s create our second file and call it “manifest.json”. There are three things Chrome requires this file to contain:",{"orderedList":["The “manifest_version” tells Chrome about the format of the manifest. We'll be using version 3.","The “name” is what we call our extension and how it will be listed with Google. We’ll call our extension “Focus“.","The “version” field helps Google keep track of updates we make after our extension is published to the world. This needs to be a string, so we’ll call ours “1.0”."]},"With these items, our file should look like this:",{"codeBlock":"{\n \"manifest_version\": 3,\n \"name\": \"Focus\",\n \"version\": \"1.0\"\n}"},"While these are the only required fields for our manifest.json, they don’t make for an exciting Chrome extension! There are dozens of other fields we can add, but we only need a couple more to make our extension work as we expect.","Let’s tell others what our extension does by adding a “description” field. You can come up with this one on your own. Just be sure to wrap it in quotes!","Finally - and perhaps, most importantly - we need to link the code in our “main.js” file with Twitch.","Chrome gives us a few ways to do this. We will use a “content_scripts” field in our JSON file since our code needs to run in the context of a certain webpage.","Since more complex extensions often need to define multiple JavaScript files to run in different contexts, the “content_scripts” field is typically an array of objects. In our case, we will have only one object in our array.",{"codeBlock":"\"content_scripts\": [\n {\n \"matches\": [\"https://www.twitch.tv/*\"],\n \"js\": [\"./main.js\"]\n }\n]"},"You’ve probably guessed that the “matches” field within our “content_scripts” object tells Chrome that the “js” (JavaScript) code in “main.js” applies only when we are on Twitch’s website. Again, these fields are arrays in case we had multiple matches or JavaScript files to link together.","By now, our “manifest.json” file should look something like this:","
","We have some more behavior we want to accomplish with our code, but we are all set to test what we have as a Chrome extension!","In Google Chrome, navigate to “chrome://extensions”. Check the box “Developer mode” in the top right corner, and then click the “Load unpacked extension…” button to the left. Find the folder you created earlier and open it.","
","You should now see your new extension listed below with the name, version, and description you gave it. Make sure to click the 'Enable' slider in the bottom right of the extension card (should be blue!), then head over to Twitch.tv","
","What happened to our video feed?","Congratulations! You just created a first draft of a real Chrome extension! But we still want to replace the content we lost with something else. We’ll work on that next time.","Further Challenges:",{"list":["Did you notice our extension is listed with a default puzzle piece icon when we visit “chrome://extensions”? Try replacing that with something custom. (Check this out if you get stuck.)","Try to do the same thing we did to Twitch on another website (like Facebook). Keep in mind that the new item to hide might not be called 'contents'. Can you do this by modifying our existing Chrome extension?","Create a simple popup page for when users click on your extension’s icon in the top right of their browser. What do you need to do this? (Maybe a file to describe the popup page and an addition to our settings.)"]}]},"chrome-extension-4":{"subunitId":"chrome-extension-4","heading":"Project Part 4 - Libraries and jQuery","read":["JavaScript, by itself, is a powerful tool that lets us interact with and modify elements on a web page. As projects grow, however, developers often rely on third-party libraries—collections of pre-written code that make common tasks easier or faster to implement. One of the earliest and most influential of these libraries is jQuery, which became popular for simplifying DOM manipulation, event handling, and animations. In this section, we’ll use jQuery to explore how third-party libraries can extend JavaScript’s capabilities and make our code more efficient.","Check out jQuery's documentation to achieve what we did above in JavaScript, in jQuery. It’s important to note though, jQuery is still written in JavaScript, it just allows us to do more with less code.","For example:","const contents = $('#someID');","const contents = $('.someClass');","Now, our code is a lot cleaner, and more importantly, readable.","Apart from making JavaScript code easier to read, jQuery is well-known for making web page interactions like animations or element changes easier.","However, if we were to edit our webpage right now, using jQuery, we’d get an error. That’s because we haven’t added the code that makes up jQuery into our Chrome extension yet. To do this, we need to add jQuery, a ‘dependency’, to our manifest.json somehow. A dependency is just a bunch of additional code we can add on top of our own to gain additional functionality.","First, we need to download the code behind jQuery.","Download jQuery by clicking this link and then right-click and choose ‘Save as...’. Save the jQuery file as “jquery.min.js”, and place it in your Chrome extension folder.","Next, add it to your manifest.json (remember that just makes it available to our Chrome extension).",{"codeBlock":"\"content_scripts\": [\n {\n \"matches\": [\"https://twitch.tv/*\"],\n \"js\": [\"jquery.min.js\", \"./main.js\"]\n }\n]"},"Now, we can use jQuery!","With that in place, let’s go back to building our extension.","So, we’ve just removed contents from the list of elements that make up the Twitch web page. But, what if, we instead just replace the contents of contents with something else - like an image? Let’s do that now.","Remember how we removed contents?","JavaScript","const contents = document.getElementById('root');","contents.parentNode.removeChild(contents);","jQuery","const contents = $('#root');","contents.remove();","We did it by going up to its parent element and telling JavaScript to remove contents as one of its children. However, if we want to replace contents with an image, then we’ll need to keep a reference to where contents’ parent is on the page.","One solution, store the parent element in a variable.","const contentsParent = contents.parent();","However, if you remove contents first before storing a reference to its parent… what do you think would happen? You’d get an error, right? Why?","Well, because we’re trying to access contents’ parent, but contents doesn’t exist anymore. So, we need to change the order of our code then to have a reference to contents’ parent before we delete contents.","Alright, so at this point I’m assuming you’ve successfully deleted contents, but still have access to its parent.","As a challenge, figure out how to add (hint: prepend) an image as contentsParent’s first child.","
","We’ve just done a remarkable thing! Not only have we removed elements from Twitch, but we’ve also replaced them with a proactive image, wooh!!","Now let’s truly make it our own by adding some text above the image.","In order to achieve this we want to add (or prepend) another child to contentsParent. This time, before the image, because remember, the web page will render elements from top to bottom, so the text will show above the image.","You can make it a div, span, or whatever you like as long as it says something truly inspirational… like “Get back to achieving your coding dreams”. Yeah, that will work.","
","So things are going well, but isn’t our text just downright ugly? You’re probably thinking websites are usually these beautiful things, but right now, that text just isn’t cutting it. To mess with styling, we need to be dealing with CSS, or Cascading Style Sheets.","CSS is just a mechanism to add style to a web page. Go ahead and make an index.css file where all your files for the Chrome extension are.","OK great. Now, in order to style something on a web page we first need to identify the element that we want to change.","We’ve accessed an element before by using its ID, but this time we want to do it through its class.","So, go ahead and add a class, called beautText, to the text above the image.","According to jQuery’s docs we can add a class as follows:","$message.addClass('beautText');","What, that did nothing? Is what you should be saying at this point. We never defined beautText in our CSS file nor have we added it as a dependency like we did for jQuery. Do this now.",{"codeBlock":".beautText {\n color: green;\n}\n"},"That covers our CSS file.","In our manifest.json we can also add css files as dependencies. Add the following below our list of JavaScript dependencies:","\"css\": [\"index.css\"]","And now something beautiful happens. The color of the text we wrote above the image changes. That was only possible by first adding our index.css file as a dependency.","But, how does this all really work? How does the browser render HTML, and what does it look like under-the-hood? Jump to the next section for more info!","Further Challenges:",{"orderedList":["Animate the text across the page using jQuery","Cycle through multiple images instead of just one","Have the text change colors"]}]},"chrome-extension-5":{"subunitId":"chrome-extension-5","heading":"Project Part 5 - Asynchronous Callbacks and the JavaScript Engine","read":["Great! It looks like everything is working as planned. Now whenever we visit Twitch, we’ll see a message and an inspirational image…","The same inspirational image...every...time...","After a while, this image would become less and less motivating. Wouldn’t it be great if we could show a random image each time we visited the page?","Lucky for us, there are services called APIs that we can reach out to and request things like random images. This will be a great addition to our Chrome extension, but first we need to understand what is happening behind the scenes when we make such a request.","Because the images we want exist elsewhere on the internet (outside of what is already on Twitch’s page or in our code), we have to request them similar to how we request certain web pages by typing in their URL. Specifically, this is called an HTTP request.","As you know from visiting your favorite website, web pages always take some (usually small) amount of time to respond with content. This is also the case if we make requests to an API in our code.","Why is this important? Well, we haven’t mentioned it explicitly, but JavaScript runs synchronously. This basically means that one line of code executes completely before the next line begins, so we can only do one thing at a time.","This makes a lot of sense for what we have coded so far. We need to assign the element with the ID of root to a variable before we can use that variable to grab its parent. If those lines did not run synchronously, we might expect an error if the second line were to run before the first.","But in the case of requesting a random image, if we were to wait for the image to be returned, we would slow down, or block any code below the request from running until that time. If that code has nothing to do with the image, blocking it from running could be very annoying for the user - even if for just a split second.","Thankfully, web browsers allow us to run code asynchronously. Asynchronously essentially means multiple things can happen at the same time.","In our case, we can request content from an API in one bit of code, continue about the rest of our code as that request is being processed, then do something with the returned content when the response comes in.","How is this possible if JavaScript is synchronous in nature? We’ve talked about JavaScript running in the browser, but we haven’t mentioned the full context our code is running in.","Within the web browser, there is a component called the JavaScript engine. This is where our code runs, and it can only run things synchronously. But there are other browser components besides the JavaScript engine.","
","The rendering engine is the part responsible for displaying the HTML and CSS of a website, and it goes about its business separate from the JavaScript engine.","The great thing is that our code running in the JavaScript engine can communicate with the rendering engine to do things like manipulate the HTML and CSS. This is what we’ve done already - both with and without jQuery.","Besides these two components, there are also tools in the browser that deal exclusively with HTTP requests. It is an HTTP request that gets Twitch’s HTML, CSS, and JavaScript files for the other components to process in the first place.","Just like the rendering engine, HTTP requests have little concern for what’s happening in the JavaScript engine. This all means that if we make a request to an API for a random image, we can do so without worry that the rest of our code will be blocked!","However, there comes a bit of a downside with asynchronous code. We lose the predictable nature of our code.","Line by line, our code may translate into:",{"orderedList":["Ask an API for a random image and assign the image to a variable ‘myImg’.","Add ‘myImg’ to the page along with motivational message."]},"But given the request is asynchronous, what actually happens might be:",{"orderedList":["Ask an API for a random image... (request for image is sent)","Add ‘myImg’ to the page along with motivational message.","(response with image is received) ...assign the image to a variable ‘myImg’."]},"We have a problem here! In Step 2, we do something with ‘myImg’, but we don’t receive the actual image until later. So in Step 2, ‘myImg’ is actually undefined.","What if the request takes virtually no time to come back? There has to be a chance we will have the image in time, right?","Wrong! In fact, even if a response is received immediately, we will not have access to it until all of our other code finishes running.","To understand why this is, let’s look more closely at our JavaScript engine.","
","Within the JavaScript engine is something called the call stack (or execution stack). The call stack keeps track of our execution context - basically, where we are in our code.","If our code makes a call to JavaScript in another execution context - such as calling a function - that new execution context is pushed to the top of the call stack. Whatever is on top of the stack is the current execution context the JavaScript engine is processing. We go back down the stack only when the execution context on the top finishes and is popped off of the stack.","But remember, the HTTP request for our image doesn’t get handled by the JavaScript engine, so it doesn’t affect the call stack. How then does our code know when the response comes back?","Well in addition to the call stack, the JavaScript engine has something called the event queue. The event queue receives items whenever certain events happen - like a user clicks their mouse, or an HTTP response is received.","The JavaScript engine has a feature called the event loop that periodically checks the event queue for items to be processed - but only after the call stack is emptied. In the case of our code, this means the image we receive back will not be available until all of the synchronous code in our file completes. (Check out this video for an in-depth (but digestible!) explanation of the event loop.)","How then can we do something with the image only when we have access to it? That is where callbacks come in.","Callbacks are functions that run their code only when certain events occur. In our JavaScript, we can, for example, tell the browser we want to be alerted when the user clicks on any div.",{"codeBlock":"$('div').click(function() {\n alert('A div was clicked!');\n});"},"Try adding this code to your extension’s main.js file. Be sure to reload the extension in Chrome settings, and then visit Twitch and click around.","Pretty cool, huh? With our callback we were able to specify code that only runs when a certain event happens.","We can do the same thing when we request our random image, but in that case our callback will detail what to do with the image. If you want to play around more with these concepts, this visualizer is a great tool for understanding Javascript's call stack/event loop/callback queue.","We’ll get into that and how to make AJAX calls to APIs next time!","Further Challenges:",{"list":["Practice working with asynchronous code and callbacks. You can experiment in Chrome’s console with the built-in function ‘setTimeout’. Try this to start: setTimeout(function() { alert(“I am delayed”) }, 3000);","In your Chrome extension, change the click handler to make elements disappear when they're clicked","Experiment with other event listeners and callbacks"]}]},"chrome-extension-6":{"subunitId":"chrome-extension-6","heading":"Project Part 6 - APIs and AJAX","read":["Ready to dynamically render photos to the DOM?! *nerd high five* Hold your horses there. Before we go any further remember that an API is something we can request data from in the form of HTTP requests, and that’s exactly what we’re going to do.","With jQuery we can make HTTP requests using AJAX, or Asynchronous JavaScript and XML. Which means you can make requests using JavaScript, and that the process is asynchronous. That’s it. A bunch of fancy mumbo jumbo if you ask me.","Another important note is that most APIs return data in the form of JSON, which we discussed earlier, and Lorem Picsum is no different.","The URL we’ll be requesting images from is picsum.photos. You can visit this page before we even make the AJAX request. I recommend downloading a JSON viewer extension. I use JSON Formatter for Chrome, and it just makes the data easier to read, so give it a try if you’d like.","You may be asking what does an AJAX call look like? Well that’s for you to find out. Check out this link for more info.","Simple, right? A GET request looks something like this:",{"codeBlock":"$.ajax({\n method: 'GET',\n url: 'http://demo.com',\n success: function(result) {\n // result is whatever the URL sends back from the request\n },\n error: function(err) {\n // if any errors occur during the process you can check out the\n // the error by logging the 'err' argument\n }\n});"},"Or you can specify the type of HTTP request from the get-go. Like so:",{"codeBlock":"$.get('http://demo.com', function(result) {\n // result is whatever the URL sends back from the request\n});"},"Either one works. But do notice for the first example that we have these success and error callbacks that are exposed to us. Remember how we talked about asynchronicity before? Well, let’s talk about it again.","One way AJAX handles asynchronicity is through these two functions. And these type of functions have to always exist, otherwise we can’t handle the logic after the HTTP request is made. Remember that the JS Engine keeps executing code while this HTTP request is still in the works, and the request event is ultimately dequeued from the Event Loop once resolved.","If we were to try to access the response from outside the success block we would get an error. That’s because we only have access to the response inside the AJAX call, because that’s where it becomes defined!","Basically, we’ll want to move all of our logic inside of the success function, because otherwise elements will render out of order. We want our image to render first, and then append text above it, and this order is only possible once we know when the image is defined.","Anyways, let’s get back to the fun.","As a challenge go ahead and use the first AJAX example to make a GET request to the URL provided above to receive JSON data back, and then log it to the console. I got something like this:","
","To me this is an extremely beautiful part of programming. All we did is make a request to a server at a particular URL and it responded with JSON data. Now, we can do whatever we want with it.","And what we’re going to do is cycle through a different photo each time we load Twitch, so our inspiration never withers! We can do so by randomly generating a different index to fetch an image object from this massive array on-load. How would we do this in JavaScript? Check out some of the methods on the Math class, and see if any of them look useful. Did Math.random catch your eye? It caught mine. Let’s use it.","Here’s an example I found on MDN:",{"codeBlock":"// Returns a random number between min (inclusive) and max (exclusive)\nfunction getRandomArbitrary(min, max) {\n return Math.random() * (max - min) + min;\n}"},"A few things to note about this. One, Math.random returns a floating-point number, or a number with decimals in it, so we have to floor that result to an actual integer, because we can only access elements in an array by an integer based index. And two, our max for the example above would be the length of the image array we got back from the URL.","Alright, just a few more steps and we’ll be there. Okay, so by now you can randomly access a different image object each time the page renders, but we still haven’t added the actual image to the DOM yet.","We’ll format our image element’s src property as follows:","https://picsum.photos/id/<image.id>/1200/800e.g.
<img src=\"https://picsum.photos/id/127/1200/800\" />","The image ID is a key on the image object we access each time YouTube loads.","
","And boom! Isn’t that just beautiful? And the true magic is happening under the hood. Every time we load the page it makes an AJAX GET request to the Lorem Picsum URL, and it responds with an array of objects that each represent data about an image. We fetch one randomly by its image ID, and populate it to the DOM… and everything is done dynamically! Wooh! You did it!","Further Challenges:",{"list":["Make the images cycle just by clicking on it, instead of having to reload the page each time to see a new image","Register with the Lorem Picsum API and fetch images once properly authenticated via OAuth","Have the image fade in and fade out by using jQuery animations"]}]},"closures-divein":{"subunitId":"closures-divein","heading":"Dive into Closures","read":[{"subheading":"What We'll Cover","subcontent":[{"orderedList":["Execution Context","Scope","What is a closure?","What are closures used for?"]}]},{"subheading":"Execution Context","subcontent":["The execution context is the environment in which a JavaScript function is being executed. Each execution context has its own variable scope.","Whenever a function is invoked, a new execution context is pushed onto the call stack, and a new variable environment is created along with it. The function’s code runs in the new execution context and has access to the variable environment in the execution context directly below that new execution context (the one in which the function was invoked).","Upon exit of the function, the execution context is popped off of the call stack. Code in one execution context is stopped until the code in the execution context above it finishes running."]},{"subheading":"Scope","subcontent":["Variable environments are commonly referred to as “scope.” While each execution context is stacked on top of the execution context preceding it, each scope is created inside of the previous scope. Code being executed inside a scope not only has access to the variables in that scope, but also the variables in all the scopes that encase it. Therefore, code that runs in a given execution context has access to all the variables created in the execution contexts below it."]},{"subheading":"What is a closure?","subcontent":["A closure is a variable environment that has outlived its execution context and remains attached to a function that also has outlived the same execution context.","If multiple functions are created in the same execution context and all of them outlive that execution context, those functions each have their own closure, and each of these closures will access the same variables in memory. Therefore, mutation of those variables by one of those functions will affect the other functions in the manner that they will be accessing the same (mutated) variables."]},{"subheading":"What are closures used for?","subcontent":["Closures give us the ability to gain some benefits normally associated with object-oriented programming, namely data privacy and data encapsulation (thus name “closure”). When the structure of the encapsulated data and the methods used to access/manipulate the data is too simple to justify using actual object-oriented programming, closures provide a convenient solution.","Closures can aid in maintaining secure and private access to variables, by creating functions that serve as the only objects with access to these variables. The functionality of the functions themselves serves as a method of whitelisting the ways that those variables can be mutated. Because only the created functions have access to the variables, the procedural steps outlined in the created functions are the only procedures that can operate on the variables in the closure.","Closures are used especially often when functionality is being imported into a file from another file. The code in the imported file is executed, creating a closure for any function(s) exported from the file. This is a common method for JavaScript libraries to be made available for use to a developer’s application and helps developers maintain modularity of their code."]}]},"csx-prereqs":{"subunitId":"csx-prereqs","heading":"Prerequisites for CSX","read":["You’re going to hear a lot in CSX and in your journey to Codesmith about the importance of problem-solving and communication of your code - and that it’s more important than your ‘knowledge’ of JavaScript.","However you still have to understand these building blocks to be able to actually wield this knowledge to solve problems and communicate your code. You should just not fall into the trap of thinking coding is about ‘knowledge’ alone.","The journey to coding begins with an understanding of the fundamental building blocks of code: variables, functions, loops, if/else - the pieces that are almost universal to every programming language.",{"subheading":"Recommended prerequisites for CSX","subcontent":["You need to be comfortable with these basic building blocks - and part of that is just repetition and familiarity. There are numerous online resources for these initial foundations and each person finds the one that fits them best. The key is to not stop during these foundations.",{"list":["The CSX Precourse Unit - Part 1 and 2","Codecademy - Text-only teaching and simple challenges - free. You should complete the Introduction to JavaScript units 1-8","Team treehouse - Video-based - great introductory tutorials - but monthly subscription. You should complete parts 1-3 of their Learn JavaScript track before CSX","Freecodecamp - All the foundations you need in JavaScript, HTML and CSS. Also has an incredible community. You should complete Basic JavaScript (10 hours) before CSX"]},"Once you have completed one of these prerequisites, you may want to complete others or start doing the resources’ more advanced parts.","However, at some point you will begin to feel this sense of plateauing - how do I move from following along tutorials to beginning to have the autonomy to tackle new challenges without the tutorial structure. What is the path? The answer is moving to harder open-ended challenges and a deeper understanding of JavaScript.","So what’s stopping everyone from doing this?","Becoming an autonomous problem solver with code is really hard. One of the reasons most of us rely on guided tutorials is that the next level involves hitting lots of intellectual, learning and even emotional blocks - it’s a struggle.","At the same time though, this is where you grow as a software engineer and move beyond following tutorials.","So how can we hope to push through these blocks?","By being part of a learning and building community - and above all - by pair-programming."]}]},"csx-teaching-style":{"subunitId":"csx-teaching-style","heading":"What is the CSX teaching style?","read":["Learning to code is hard, there is no beating around the bush on that. But hard learning is what sticks, and hard things can be accomplished, especially with the right resources and support. We designed CSX to be ‘hard learning’ but we also created it with additional learning opportunities to help you overcome obstacles and grasp the concepts on a fundamental level.","Tutorial style learning feels amazing, but we often find ourselves asking - did we actually learn anything there? Did we retain this information and can we apply it in a new situation that isn’t an exact copy of how we learned it? Very rarely have we found ourselves answering ‘yes’ to those questions without feeling the ‘struggle’ to grasp a concept or connect the dots.","CSX is not tutorial-style learning! The challenges are meant to push you and help you become an autonomous problem solver. You will grapple with applying concepts in different situations, rebuild functions you’ve used without deeper thought, and write efficient clean solutions. But that is the good stuff - struggling is awesome, it leads to that deep understanding!","In order to assist with this struggle, we’ve also built help into CSX in the way of:",{"list":["Testing your code - there’s no better way to understand more about your solution’s viability than by testing your code. You can do so on each challenge by using the ‘check my answer’ functionality as well as by uncommenting the console logs in the boilerplate code.","Solution videos - many of our challenges have video walk-throughs of a solution in the subunit following that challenge. These walkthrough videos are created by our CSX Mentor team and are designed to show you a possible solution to the challenge (remember there are many ways to solve every challenge). We recommend attempting the challenge on your own before using the solution video as a resource! - The csx-challenge-solution channel on the CSX Slack - we’ll talk more about this slack channel later in the overview unit, but this channel is a great place to ask questions about challenges to the CSX community and receive helpful tips and tricks."]},"Additionally, we always recommend the use of:",{"list":["MDN Web Docs - a great place to find general information about JavaScript syntax and how things function","W3schools - another education website for learning to code with great references on language functionality"]}]},"csx-to-codesmith":{"subunitId":"csx-to-codesmith","heading":"What are the Codesmith programs and how is CSX related to them?","read":["Codesmith offers a variety of programs for all levels of JavaScript learners and for those with varying goals of learning to code. Each of our programs can be prepared for by working through related CSX Units! CSX was designed to help prepare you for Codesmith programs by teaching you JavaScript syntax and functionality, computer science fundamentals, and technical communication through a focus on pair programming.","JavaScript for Beginners -","JavaScript for Beginners (JSB) is a part-time, remote program consisting of two consecutive Saturday sessions. The program is designed for those with no previous coding experience and will teach JavaScript fundamentals, as well as provide a broader context to how coding works. The program offers students a launching point to continue their JavaScript studies, prepare for CS Prep, and build a future in software engineering.","Because no coding experience is required for JSB, there’s no need to complete any of our CSX Units. We recommend getting started with our Precourse - Part 1 Unit to familiarize yourself with JavaScript syntax so you can hit the ground running on day 1.","CS Prep -","CS Prep is a 2-week program covering JavaScript concepts, engineering best practices, and technical communication. The program includes live-online instruction, daily problem-solving workshops, and a passionate coding community to help you prepare for top coding boot camps, such as our selective Software Engineering Immersive programs, and solve real-world problems","We do not require any coding experience to apply to CS Prep, but we strongly encourage completing up through Precourse Part 2 and taking a look at the Functions and Execution Context Units before starting the program. CS Prep moves quickly, as there is a lot of ground to cover taking you from beginner to intermediate JS, so the more familiarity you have with these concepts the better! Don’t worry though, in the program we’ll discuss JavaScript fundamentals like functions and data types, closures, callbacks, recursion, and algorithms at length.","Software Engineering Immersive Program -","Our flagship program is our Software Engineering Immersive taught full-time online, in Los Angeles, and New York City as well as part-time online. The program teaches full-stack JavaScript and computer science to prepare you for mid and senior-level software engineering roles. The expertly designed curriculum and supportive community immerses you in modern web technologies, such as React and Node.js, and encourages you to tackle unique and unfamiliar problems to prepare you for the ever-changing tech landscape. Codesmith offers an extensive hiring support program that guides students through the hiring process, including interview strategies, portfolio development, and post-graduation check-ins. By the end of the 12 weeks, you will be an autonomous engineer, ready to make an impact at innovative tech companies worldwide.","In order to prepare for the Immersive Program you will need to have a firm grasp on all concepts covered in CSX up through Recursion. On the CSX Homepage on each Unit’s overview card you can see which concepts are ‘always’, ‘sometimes’, or ‘never’ tested on the Codesmith Technical Interview. To learn more about the Immersive session we recommend attending an Information Session or scheduling an academic advisor call.","Enjoy CSX and happy coding!"]},"curriculum":{"subunitId":"curriculum","heading":"Curriculum Overview of the Units to Come","read":[{"subheading":"JavaScript Units","subcontent":["CSX Precourse - Part 1",{"list":["[In-person or online workshop] Intro to JavaScript - Variables and Looping","The console","Variables and variable reassignment","Data types overview","Strings - concatenation, properties, and methods","Numbers - addition, subtraction, etc.","Booleans"]},"CSX Precourse - Part 2",{"list":["[In-person or online workshop] Intro to JavaScript - Variable and Looping","Arrays - examining and adding elements","Loops - for loops and while loops","Control flow","Objects - iterating through and adding properties"]},"Unit 1: Functions and Execution Context",{"list":["[In-person or online workshop] Intro to JavaScript - Functions and Objects","How the return keyword works","Function definition vs invocation","Arguments vs parameters","Execution contexts","Memory and thread of execution","Call stack"]},"Unit 2: Callbacks and higher order functions",{"list":["[In-person or online workshop] JavaScript the Hard Parts: Callbacks and Higher Order Functions","Principle of function abstraction","Applying function abstraction to functionality"]},"Unit 3: Closures, Scope, and Execution Context",{"list":["[In-person or online workshop] JavaScript the Hard Parts: Closures","What if our functions could remember their prior invocation?","Returning a function","Lexical scoping","Variable environment and the backpack"]},"Unit 4: Recursion",{"list":["[In-person or online workshop] JavaScript the Hard Parts: Async","Async callbacks, web browser","The Callbacks queue and event loop"]},"Unit 5: OOP",{"list":["[In-person or online workshop] Recursion: A Deep Dive","Parameters as storage","Performance"]},"Unit 6: Async",{"list":["[In-person or online workshop] JavaScript the Hard Parts: OOP","Prototype, __proto__ and the prototype chain","Factories, constructors and classes"]}," Project: Chrome Extension",{"list":["Chrome extension that makes you more productive and a better coder"]},{"button":"Next Unit"}]}]},"expectations":{"subunitId":"expectations","heading":"Our expectations of you in CSX","read":["In CSX we expect you:",{"orderedList":["To commit a certain number of hours per week minimum to working through CSX material. We recommend 10 per week if possible. Developing a routine that lets you get flow on the material is essential to growing your coding skills.","Attend at least 2 free coding workshops hosted by Codesmith to pair-program either online or in person","Support and contribute to the community and discussion as part of the CSX Slack channel","Develop in all 5 capacities that make an excellent software engineer that we described above"]},"You can expect of us:",{"orderedList":["Push you to develop your problem-solving, communication and depth of JavaScript knowledge that will help prepare you for a bootcamp or (with additional work) for Codesmith’s admissions process","Support a workshop and pair-programming environment that is engaging and supportive","Develop and create new CSX challenges and update/fix where there are bugs (email at csx@codesmith.io with bugs)"]}]},"future-code-take-home":{"subunitId":"future-code-take-home","heading":"Future Code Take-Home","solve":{"code":"// Write your code here\n","instructions":[{"instructionContent":["Write out pseudocode (a description of the steps you'd take) for solving this challenge. Then try to solve it in code!","Declare a variable name and initialize it to a string (your name!).","Create an array vowels that contains all of the vowels (a, e, i, o, u).","Using for loops, iterate through all the letters in your name to create a new string variable with the vowels capitalized.","Make sure you come up with ways to test your code!"]}]}},"help-stuck":{"subunitId":"help-stuck","heading":"Where can I get help if I am stuck?","read":["As previously mentioned, CSX is focused on helping you become an autonomous problem-solver equipped with the tools to solve challenges based on learned strategies and approaches, not memorized helper functions. This style of learning is only possible with the addition of the CSX Community!","The CSX Community was created to support and uplift those learning to code. It’s full of spaces to find others learning to code to work together, and a place to share successes and challenges.","Join the CSX Slack","The CSX Slack is the optimal way to engage with the CSX community. It’s the best place to ask questions, meet other community members, and find out about upcoming events and workshops. Key Channels",{"list":["General - the best place to introduce yourself, hear about CSX news, and learn about upcoming events, workshops and additional learning opportunities","Csx-challenge-help - the place to ask questions about CSX challenges and concepts","Pair-programming - the channel to find potential pair programming partners and interact with others learning to code","Coding-resources - the hub of shared resources for learning to code"]},"CSX Email","If you’re working through a challenge and need some help, feel free to shoot us an email at csx@codesmith.io. We’re happy to check out your code and help recommend a path to a solution or other learning resources! We also love receiving feedback on the platform, so feel free to pass that along as well.","Schedule an Alumni Advisor Call","If you’re looking to chat with someone about your particular learning to code path, interest in becoming a software engineer, or ask a question about a Codesmith Program - schedule a call with an Alumni Advisor. They can help you determine which concepts to focus on, what may be your next step, and give advice from their own personal experience of becoming a software engineer.","Join the CSX Facebook Group","Though far less active than our Slack Channel, the CSX Facebook is another place for folks to chat. Feel free to post questions, engage with community members, and chat all things code."]},"intro":{"subunitId":"intro","heading":"What is CSX?","read":["Welcome to CSX, we’re so happy to have you here! CSX is both an online free platform to learn JavaScript and an international community of folks committed to learning to code. Our videos and challenges are designed to teach you, beginner, to intermediate JavaScript and computer science fundamentals, and our community will help you overcome blocks and achieve your coding goals.","CSX is maintained by Codesmith, the top-ranked online coding school. We originally built CSX as a tool for our potential students to use to prepare for our Full-time Immersive Program’s technical interview, but it’s grown to be so much more than that! We saw the need for a platform to learn JavaScript that combined difficult challenges with a supportive community so ‘hard learning’ could take place!","As our program offerings and free workshops have expanded, so have the content and community that makes up CSX:",{"orderedList":["All of our CSX Units can be supplemented with free weekly workshops taught by Codesmith on some of the same topics and concepts","CSX has beginner content designed to give folks their first taste of coding alongside our program JavaScript for Beginners (Precourse Part 1 Unit)","More intermediate level content for folks to deeply understand core JavaScript functionality so they can succeed in our mid-level prep program CS Prep (Precourse Part 2 Unit and Functions & Execution Context Unit)","Intermediate to advanced concepts for students to prepare for our Full-time and Part-time Software Engineering Immersive Programs (Callbacks & Higher-order Functions Unit, Closure, Scope & Execution Context Unit, Asynchronous JavaScript Unit, and Object-Oriented Programming Unit)"]},{"read":null},"Keep in mind that CSX is not meant to be a standalone resource! As you are working through the challenges, we recommend using additional resources like MDN and W3Schools to supplement your learning.","Steps to getting started:",{"list":["We recommend filling out our CSX Track Quiz which will direct you to a unit based on your experience level and goals.","Join the CSX Slack Channel to start meeting other community members and asking questions"]},{"read":["Happy Coding!"]}]},"intro-async":{"subunitId":"intro-async","heading":"Introduction to Async","watch":["https://www.youtube.com/embed/xTjx3q2Nm1w",{"description":["Asynchronous JavaScript allows code to continue being executed while we wait for the result of an initiated action, such as starting a timer, reading a file, or requesting data from a server. While the timer is running, the file is being read, or the server is calculating its response, the thread of execution continues. This is called \"non-blocking\" behavior, and it results in better performance than what would come from waiting for things to resolve before continuing to the next line of code (which is called \"blocking\" behavior).","We recommend starting your learning by watching Codesmith CEO, Will Sentance take a deep dive into these concepts.","You can follow along the video with the slides here."]}]},"intro-callbacks-read":{"subunitId":"intro-callbacks-read","heading":"Introduction to Callbacks and Higher Order Functions Continued","read":[{"subheading":"Now let's dive in and learn a little more about Callbacks","subcontent":["Object-oriented programming was the most prominent programming paradigm for 25-30 years, but functional programming has taken the lead over the last 5-7 years. As Zoolander's Mugatu would say, \"It's so hot right now.\"","The reason for its rise is clear -- as applications grow in complexity, functional programming gives developers the ability to deliver intuitive, stateless, side-effect free code, greatly streamlining their development process and improving their applications.","Callbacks and higher-order functions are at the heart of functional programming, and they're an essential part of a JavaScript developer's toolbox. Let's explore these concepts together from the ground up."]},{"subheading":"Definitions","subcontent":["If you type “callback” into Google search, you'll see the first definition as “an invitation to return for a second audition or interview.” That’s definitely not the kind of callback we’re discussing here!","In JavaScript, a callback is a function that is passed as an argument to another function. If that doesn’t make sense yet, don’t worry -- we’ll break it down soon.","And what about higher-order functions? A Google search reveals an accurate description - “a function that takes at least one function as input and/or returns a function as output.”","Hmm...Let’s see a code example to clarify -",{"codeBlock":"const array = [1, 2, 3];\n\nfunction update(callback) {\n const output = [];\n for (let i = 0; i < array.length; i++) {\n const updated = callback(array[i]);\n output.push(updated);\n }\n\n return output;\n}\n\n// Callback functions\nfunction add10(num) {\n return num + 10;\n}\n\nfunction multiplyBy20(num) {\n return num * 20;\n}\n\nfunction stringify(num) {\n return num.toString();\n}\n\n// Call update with each callback function\nupdate(add10) // returns [11, 12, 13]\nupdate(multiplyBy20) // returns [20, 40, 60]\nupdate(stringify) // returns [‘1’, ‘2’, ‘3’]"},"So we have two function definitions, and we're executing update with add10 as input. One of these functions is the callback, and one of them is the higher-order function. Can you guess which one is which?","Spoiler alert - the callback is add10, and the higher-order function is update!","Why is add10 the callback? It satisfies these two conditions -",{"list":["It is used as input in another function call.","It is called inside of the other function."]},"Why is 'update' the higher-order function? It satisfies these two conditions -",{"list":["It takes a function as an argument.","It calls its input function when it is called. Hence, the term \"callback\" as one function call leads to another."]},"So basically, higher-order functions have callbacks as inputs and call those callbacks somewhere in their definition.","To clarify, although we may call a function a “callback” or a “higher-order function”, they are both just normal JavaScript functions. Nothing special about them except the terminology we use to describe them."]},{"subheading":"When Do You Use This Stuff","subcontent":["As fundamental building blocks in JavaScript, callbacks and higher-order functions are used in almost every web application. They solve a general set of code duplication problems.","Let’s start thinking about those problems. We’ll build up our understanding through a series of questions that highlight how we can write cleaner, more powerful code with callbacks and higher-order functions."]},{"subheading":"The Questions Begin","subcontent":["Let's say you are tasked with manipulating an array of numbers, such as stock prices. You begin by testing your skills on a small array to see if you can simply add 10 to each integer.","You might write some code that looks like this -",{"codeBlock":"const array = [1, 2, 3];\nconst output = [];\n\nfor (let i = 0; i < array.length; i++) {\n const updated = array[i] + 10;\n output.push(updated);\n}\n\nconsole.log(output); // prints [11, 12, 13]"},"If that were the only addition operation you needed to perform in your application, then this code is absolutely fine. However, you realize you need to add other values, too. How would you write new code to add other values, like 20, to each number?","Welp… looks like we’ll have to copy/paste the entire code block just to make one change -",{"codeBlock":"const array = [1, 2, 3];\nconst output = [];\n\nfor (let i = 0; i < array.length; i++) {\n const updated = array[i] + 20;\n output.push(updated);\n}\n\nconsole.log(output); // prints [21, 22, 23]"},"It feels dirty to repeat so much code for such a small change. And it’s inefficient because we have to store all this duplicated code in memory.","You may have heard of the DRY principle (Don’t Repeat Yourself). This code breaks that principle. In colloquial terms, it’s not DRY code."]},{"subheading":"For Every Problem, There Is A Solution","subcontent":["How can we solve this repetition problem? In other words, how do we abstract away the code that doesn’t change? Think about this deeply, then keep reading.","-- Stop here if you are just starting to think deeply --","-- If you haven’t thought deeply, you shouldn’t be reading this. Think deeply then come back!--","-- Start here when you’re done thinking deeply --","Time for the answer -- Any time we notice we are writing code that repeats except for one small part, we turn it into a function! The function body will contain the repetitive code block, and its parameter will replace the one thing we want to change. For example, if we want to change the number we’re adding, just replace all instances of that number with the parameter num.",{"codeBlock":"const array = [1, 2, 3];\n\nfunction addNum(num) {\n const output = [];\n for (let i = 0; i < array.length; i++) {\n const updated = array[i] + num;\n output.push(updated);\n }\n\n return output;\n}\n\nconsole.log(addNum(10)); // prints [11, 12, 13]\nconsole.log(addNum(20)); // prints [21, 22, 23]"},"How great is that! Instead of having to copy/paste the same code block over and over and over every time we want to change the number added, we just write one function. Now we can call that function with any number as input and get the appropriate output.","In other words, when we create our functions with parameters like this, we have no idea which number will be added in the future. Think about how cool that is... we are delivering a function that will calculate any possible addition you could throw at it… and all we did was abstract away one number!","This is incredibly useful if you need to frequently transform array elements using addition in your applications."]},{"subheading":"One Step Further","subcontent":["Thinking about our stock prices example, if all we needed to do was add values to the prices, then we could clap our hands and go home -- we would have all the functionality we need. Hooray!","But what if we wanted to perform other operations, like subtraction or more complex manipulation? Functions cannot take operators (like + and -) as parameters, so that's one limiting factor. But more importantly, we can't deliver custom functionality through simple value substitution.","If only we could use other functions as parameters to deliver custom functionality inside our function... oh wait, we can!"]},{"subheading":"First-Class Citizens To The Rescue","subcontent":["In JavaScript, functions are first-class citizens. This means that functions can be passed as input to other functions (as well as returned from other functions, modified, and assigned to variables). This gives developers the ability to use functions as parameters, which we refer to as callbacks.","So how could we perform more complex calculations in our stock prices example? Well, if a number parameter allows us to use any number (like 10 or 20), then a function parameter allows us to use any functionality (like adding, subtracting, or more complex manipulation)!","That’s hard to visualize without a concrete example. So, here’s a concrete example. Notice how the updated variable has changed and we can apply three different functions to the array quite easily -",{"codeBlock":"const array = [1, 2, 3];\n\nfunction update(callback) {\n const output = [];\n for (let i = 0; i < array.length; i++) {\n const updated = callback(array[i]);\n output.push(updated);\n }\n\n return output;\n}\n\n// Callback functions\nfunction add10(num) {\n return num + 10;\n}\n\nfunction multiplyBy20(num) {\n return num * 20;\n}\n\nfunction stringify(num) {\n return num.toString();\n}\n\n// Call update with each callback function\nupdate(add10) // returns [11, 12, 13]\nupdate(multiplyBy20) // returns [20, 40, 60]\nupdate(stringify) // returns [‘1’, ‘2’, ‘3’]"},"Compared to our previous example, we still changed the same variable, updated. Instead of using the ‘+’ operator and a number parameter, we replaced that code with a function call to the array element. This small change now allows us to use any function, referred to as a callback, when we run the update function!","This makes update a higher-order function because it now takes a callback as input. In fact, I’ve been hiding a secret from you this whole time… this update function is essentially the built-in map function in JavaScript!","Given a callback, map will output a new array where each element is the output of a call to the callback. It provides us a powerful tool to transform arrays, and we control the transformation through callbacks."]},{"subheading":"Wrapping Up","subcontent":["Let’s summarize what we’ve discussed in this article.",{"list":["Callbacks are functions that are passed as input to other functions.","Higher-order functions take at least one function as input (and/or return a function, although we haven’t dug into that aspect of them in this article. You can learn more about that in our post on Closures!)","Functions give us the power to use the same code without copy/pasting it. We insert parameters where we’d like control over changing values.","Higher-order functions provide an additional layer of abstraction, using callbacks as parameters to control functionality instead of simple values. The built-in map function is one example of an incredibly useful higher-order function that transforms arrays with callbacks."]}]}]},"intro-callbacks-video":{"subunitId":"intro-callbacks-video","heading":"Introduction to Callbacks and Higher Order Functions","watch":["https://www.youtube.com/embed/viQz4nUUnpw",{"description":["We recommend stating your learning by watching Codesmith CEO, Will Sentance take a deep dive into these concepts.","You can follow along the video with the slides here."]}]},"intro-closures":{"subunitId":"intro-closures","heading":"Introduction to Closure, Scope and Execution Context","watch":["https://www.youtube.com/embed/ZVXrJ4dnUxM",{"description":["We recommend beginning by watching this recording of Codesmith CEO, Will Sentance, taking a deep dive into these concepts. You do not need to finish this recording in entirety before moving on to the challenges!","You can follow along the video with the slides here."]}]},"intro-closures-pt-2":{"subunitId":"intro-closures-pt-2","heading":"Introduction to Closure, Scope and Execution Context (continued)","watch":["https://www.youtube.com/embed/ZVXrJ4dnUxM",{"description":["We recommend continuing to reinforce these concepts by watching the remainder of this lecture on closures if you haven't already.","You can continue to follow along the video with the slides here."]}]},"intro-functions-execution-context":{"subunitId":"intro-functions-execution-context","heading":"Introduction to Functions and Execution Context","watch":["https://www.youtube.com/embed/exrc_rLj5iw",{"description":["To gain insight on these topics we recommend beginning with the following recording of Codesmith CEO, Will Sentance diving into these topics.","You can follow along the video with the first part of the slides here."]}]},"intro-oop":{"subunitId":"intro-oop","heading":"Introduction to Object-Oriented Programming in JavaScript","read":[{"subheading":"What Is Object-Oriented Programming?","subcontent":["Object-oriented programming (OOP) is a programming paradigm that uses objects to model real world data. OOP in JavaScript allows us to create objects that serve as models, and then create new instances of those models. This is a process called instantiation.","How is object instantiation useful? Imagine that we have an application with many users, and we want to store data about all of those users. For each user we want to track their name, age, number of visits to the our website, and number of comments. We also want each user to have a method introduce that logs out its name. We could do so by creating a new object from scratch every time a user signs up, like so:",{"codeBlock":"function createUser(name, age) {\n return {\n name: name,\n age: age,\n visits: 0,\n comments: 0,\n introduce: function() {\n console.log('My name is ' + this.name);\n }\n };\n}"},"On the other hand, creating a new user object from scratch every single time might not be the most DRY approach. Each user object has the same fields, and all user objects will start with visits and comments set to 0. There are several ways in JavaScript that we can create a model, also known as a class, to serve as a template for creating future objects."]},{"subheading":"Create Objects Using a Function","subcontent":["Perhaps the most obvious way to create an object based on a template is to create a function that returns objects with a defined structure. For example, we could create a function createUser that accepts name and age parameters and returns a new object:",{"codeBlock":"function createUser(name, age) {\n return {\n name: name,\n age: age,\n visits: 0,\n comments: 0,\n introduce: function() {\n console.log('My name is ' + this.name);\n }\n };\n}"},"This works, but it still doesn't feel like the most elegant solution. Every object that we create has a new copy of the introduce method, but all of those introduce methods do the exact same thing. If only there were some way we could create new objects with access to the same methods, so that we don't have to keep copying those same methods over and over again (and thus using more and more memory!)."]},{"subheading":"The Prototype Chain","subcontent":["We're in luck! JavaScript does allow us to create new objects with access to the same properties and methods (without creating new copies of those properties and methods each time) through something called the prototype chain. The prototype chain connects objects that we create with another object that serves as a (you guessed it) prototype. Objects inherit properties and methods from objects that are in their prototype chain. You can create an object that inherits from another object, which inherits from another object, which inherits from another object, which...you get the idea! The last object in your chain will inherit properties and methods from every previous object in the prototype chain.","To make the prototype chain more concrete, follow the steps below. Keep in mind that arrays in JavaScript are actually just special object implementations. We'll see exactly how arrays are implemented here!",{"list":["Open your browser's dev tools (in Chrome or Firefox, right-click and then choose \"Inspect\").","Open the console.","Type const tinyArray = ['a', 'b', 'c'] and press enter.","Type tinyArray and press enter."]},"We now see our array with a little arrow next to it. Click the arrow, which will show you all of tinyArray's properties. You can see that it has a length property and a property for each index: 0:'a', 1:'b', 2:'c'. But it also has a mysterious __proto__ property. What is this? Click it to find out!","You will see a big list of properties and methods sprout from tinyArray. You will assuredly recognize some of them: these are JavaScript's native array methods! If you try calling any of those array methods on tinyArray in the console, you will find that they all work. In fact, all arrays in JavaScript have access to these array methods. And it's all thanks to the prototype chain. That __proto__ property of tinyArray is actually a link to the next prototype in the prototype chain. So all arrays in JavaScript are linked to the Array prototype, which is where all array methods and properties are actually stored. In other words, all arrays created in JavaScript inherit from the Array class.","Scroll down to the bottom of the Array properties and methods, and you will see another __proto__ property -- a link to the next step up in the prototype chain. Click it, and you'll see that the next step up is the Object prototype. So under the hood, the Array class is an extension of the Object class! Our tinyArray should have access to all of the Object properties and methods you see. Test this out by calling tinyArray.hasOwnProperty(0) in the console.","One last thing on the prototype chain: it only works in one direction. So although all arrays have access to methods of the Object prototype, objects do not have access to methods of the Array prototype."]},{"subheading":"Using the Prototype Chain","subcontent":["Now that you know what the prototype chain is, let's figure out how to use it! The challenge of this unit will lie in researching different methods of creating objects that inherit properties and/or methods from other objects using the prototype chain. As you proceed through the subunits, you should refer to the MDN documentation for Object.create(), using constructor functions, and using ES6 class syntax. Also check out this article if you want more information on the prototype chain. All right, let's dive in!"]}]},"intro-recursion":{"subunitId":"intro-recursion","heading":"Introduction to Recursion - Repeater","watch":["https://www.youtube.com/embed/21-MlQ_irLo",{"description":["To begin, watch this recording of Codesmith Lead Technical Mentor, George, diving deep into how recursion works -"]}]},"jshp-recordings":{"subunitId":"jshp-recordings","heading":"JSHP Recordings","read":["As mentioned, we live stream our weekly JavaScript the Hard Parts workshops and students interact virtually with the lecture content as well as pair program remotely with other viewers. Check out instructional videos on our youtube channel.","We would recommend starting with these -",{"list":["How to Understand Callbacks and Higher Order Functions","An Introduction to Functions, Execution Context, and the Call Stack"]},"Though viewing past lectures + videos on youtube is a great way to review content we highly recommend attending our workshops in person if possible, or attending remotely when it is live streamed. There is no equivalent to being fully engaged and immersed in the concepts during lecture that is occurring in real time. Online learning is amazing, but the in person experience with a combination of the pairing, community, and networking/drinks after the workshop cannot be beat.]"]},"learning-resources":{"subunitId":"learning-resources","heading":"What are other learning resources available?","read":["In addition to the challenges, written explanations, and instructional videos that make up CSX - we have many additional learning opportunities and resources to drive forward your learning!","Weekly Coding Workshops & Events","The most impactful addition to your CSX learning is our weekly free coding workshops. All of our workshops are taught live by our world-class instructors and feature opportunities to ask questions, interact with other attendees, and learn more about Codesmith Programs.","Each of our CSX Units has an associated workshop that’s mentioned in-depth in each individual Unit! We recommend RSVPing on our website because spots in these workshops do fill up.","In addition to workshops covering core JavaScript, we also host larger speaker meetups featuring prominent speakers in the developer community talking about modern technologies, event series focused on Women in Software Engineering, and events focused on sharing information about our programs.","Codesmith’s YouTube Channel","If you aren’t able to make the timing of our free weekly workshops, a great way to experience our instruction and additional in-depth explanations of CSX concepts is on our YouTube Channel. Be sure to check out our saved playlists if you’re looking for content on a particular concept.","Pair Programming Workshops","In addition to our speaker and instructional live workshops, we also host pair programming events. Pair programming is central to becoming a better problem solver, technical communicator, and excellent software engineer.","In pair programming workshops, you’re paired up with a partner of your similar experience level and given challenges to work through together. The way we conduct pair programming involves two programmers working together on one shared challenge set where one person is the driver, writing the code, and one person is the navigator, talking through the logic. We also have mentors available for help!"]},"online-in-person-community":{"subunitId":"online-in-person-community","heading":"Online and In-Person CSX-Community","read":["A key component of CSX is the community. Though the units can be completed individually, the best way to grow yourself as a developer involves interacting with other learners and journeying together. A key aspect of the developer community at large involves shared resources, open source contributions, and an ideology that communal knowledge is for the greater good - an excellent example is Stack Overflow!","The in-person CSX Community is vital for CSX growth. The best way to understand the concepts covered is to attend a free in person workshop at Codesmith HQ in Los Angeles or New York City. If you aren't able to attend in person, many of the workshops are also streamed online. There are 6 total workshops in CSX, and key parts of the units are associated with workshops. You can do them before, after, or during the unit - but whatever you do, do them, it will make a big difference in your understanding of the material. The workshops are combined with the units as followed:","Precourse Workshop: JavaScript the Easier Parts - Variables, Control Flow, and Looping","Unit 1 Workshop: JavaScript the Easier Parts - Functions & Objects","Unit 2 Workshop: JavaScript The Hard Parts - Callbacks and Higher Order Functions","Unit 3 Workshop: JavaScript The Hard Parts - Closures, Scope, and Execution Context","Unit 4 Workshop: Recursion - A Deep Dive","Unit 5 Workshop: JavaScript The Hard Parts - Asynchronous JavaScript","Unit 6 Workshop: JavaScript The Hard Parts - Object Oriented Programming","During every workshop there is dedicated time to discuss problem solving methodology, resources for continued practice, and pair programming - the best way to cement knowledge and practice technical communication. In person events are a great way to connect with CSX mentors and form study groups outside of the usual workshop schedule.","In addition to the in person CSX Community, there is the CSX online community. Every JavaScript - The Hard Parts lecture is live streamed and allows viewers to pair up remotely to work through challenges no matter where they are in the world."]},"pair-programming-read":{"subunitId":"pair-programming-read","heading":"Bonus Unit: Pair Programming","read":["When we do ‘hard learning’ it’s very tempting to avoid the struggle - yet this is where the growth is at. There are many ways people avoid the feeling of challenge but the 3 major ones are:",{"orderedList":["By giving up","By focusing on researching and understanding every last detail of the topic but not actually coding","By making it work using code snippets from Stack overflow with no idea how the snippets work"]},"Clearly 1 (giving) up is not a good strategy","However, 2 (researching) and 3 (making it work) are actually vital parts of being an engineer. When these approaches become avoidance is when you get stuck in doing only one of them and don’t balance them both.","Ideally we want to balance ‘research’ with ‘making it work’. How can we do so? With pair programming.","Pair programming is a phenomenal approach that when done right should land us with the ideal balance of ‘researching and understanding’ with ‘making it work’.","
","You should expect to attend all CSX workshops at least once (many CSX students attend multiple times) to work through the challenges in a pair programming setting.","Here’s the essence of a pair programmed approach to learning. If I have an approach (even if it’s just console logging a variable but all the way up to a sophisticated strategy to tackle the challenge) I will not type it myself but rather explain to my pair programming partner this approach. My partner must then interpret my explanation and implement it in actual typed code.","Following this model of navigator (the explainer) and driver (the implementer) requires you to rationalize (at least a little) why you’re following your approach while still jumping into the code without spending your time only researching.","Simultaneously it requires you to explain your strategy to your partner with clarity and precision - improving your technical communication (one of our 5 key capacities of a software engineer) and underlying problem-solving approach.","Some caveats:",{"list":["If your partner is explaining an approach that you believe is incorrect, let it continue. Half of the time you’ll find they have introduced you to a new approach. If they are in fact incorrect, run the code and see the error - now you have the opportunity to debug together","If your partner consistently has ideas on how to approach the problem. Have that partner explain it to you then you can navigate them back while they type","Try to switch driver/navigator role at least every 15 mins"]}]},"pair-programming-read2":{"subunitId":"pair-programming-read2","heading":"Pair Programming Workshops","read":["Codesmith believes Pair Programming is the key to a complete software engineering education. Apart from connecting with community members through the CSX Slack to schedule pair programming sessions and pair programming during live workshops, Codesmith also has weekly Pair Programming Sessions on Thursdays at 6:00 pm EDT.","This is an additional opportunity to pair program and create a community and network of other CSX users, while also improving your understanding of core Javascript principles. You’ll work through blocks faster as a team and improve your technical communication as you learn how to best communicate your ideas with others.","The ability to work well with others and effectively communicate is as important as understanding the technical aspects of software engineering. As you continue on your journey, we hope that you continue to make time for Pair Programming!"]},"parameters-as-storage":{"subunitId":"parameters-as-storage","heading":"Parameters as Storage","watch":["https://www.youtube.com/embed/m8A1D9IBD50",{"description":["To gain a deeper understanding of recursion, watch George explain parameters as storage."]}]},"precourse-data-types":{"subunitId":"precourse-data-types","heading":"Data Types","read":[{"subheading":" ","subcontent":["Now that you know how to declare variables, it would probably be useful to learn what kinds of data you can store within your variables, no?","JavaScript includes data types similar to other programming languages like Java or C#. Data type indicates characteristics of data. It tells the compiler whether the data value is numeric, alphabetic, etc., so that it can perform the appropriate operation.","JavaScript includes primitive and composite data types."]},{"subheading":"Primitive Data Types","subcontent":[{"orderedList":["String: a series of characters (letters, numbers, spaces, symbols, etc.) wrapped in quotes","Number: integers, floats, etc","Boolean: true or false","Null: intentionaly having no value","Undefined: a declared variable that hasn't been assigned a value yet","Symbol: a unique value that's not equal to any other value. Note, this is an ES6 feature that never really took off, so don't worry about it for now."]}]},{"subheading":"Composite Data Types","subcontent":[{"orderedList":["Object: Objects in JavaScript, just as in many other programming languages, can be compared to objects in real life. Objects are standalone entities, with properties stored in key/value pairs. Compare it with a person, for example. A person is an object, with properties. A person has a race, a date of birth, a weight, a height, an eye color, etc. The same way, JavaScript objects can have properties, which define their characteristics.","Array: Used to store multiple values in a single variable. Similar to a list. Technically, arrays are objects in JavaScript, but we'll dive into that more in second half of the pre-course."]},"Here are some examples of all the above pertinent data types:",{"codeBlock":"// String\nconst name = \"Kyle\"; // <= quotes tell us this is a string\n\n// Number\nconst favNum = 17;\n\n// Boolean\nconst iLoveCoding = true; // <= no quotes\nconst iLoveBeets = false;\n\n// Null\nconst blackHole = null;\n\n// Undefined\nlet address; // here we declared the variable, \n // but never gave it a value, so \n // it is Undefined\n\n// Object\nconst person = {\n name: \"Bart Simpson\",\n dob: \"02/23/88\", \n weight: 65,\n hairColor: \"blonde\" \n}\n\n// Array\nconst fruits = [\"apples\", \"oranges\", \"pears\", \"bananas\"];\nconst myArray = [21, \"pear\", [3, 7, 22], { objectsToo: true }];"},"Take note of the fact that Arrays & Objects can contain an assortment of different data types all stored inside one variable! This is what makes them Composite data types by definition."]},{"subheading":"Conclusion","subcontent":["We'll dive deeper into each of these data types individually over the course of the pre-course, so don't worry if this is all a bit confusing at this point. For now, just take note of each's existence and general syntax."]}]},"precourse-fizzbuzz-solution":{"subunitId":"precourse-fizzbuzz-solution","heading":"Solution: fizzbuzz","watch":["https://www.youtube.com/embed/J7n9O8j4rUY",{"description":["After you've completed the challenge, watch our CSX Mentor, Xavyr, explain his solution for fizzbuzz.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"precourse-variables":{"subunitId":"precourse-variables","heading":"Variables & Constants","read":[{"subheading":"What is a variable?","subcontent":["Defining and manipulating data is the basis of programming. Without data, programming has no purpose. Data in JavaScript is stored in variables to be reused when needed. We do this by using special JS reserved keywords. For variables that can be changed later, we use var or let, and for constant variables, we use const. let and const declarations come with additional restrictions on how the variable can be used."]},{"subheading":"Var","subcontent":["JavaScript has many different data types. Some of these types are numbers, strings, and booleans. Variables are used in order to store these values. In the code below, the variable is named favoriteShow and the value that is being stored under the name favoriteShow is currently \"Shameless\".",{"codeBlock":"var favoriteShow = \"Shameless\";"},"As we mentioned above, the word var is a keyword in JavaScript which signifies that we are going to create a variable. This is followed by the variable name, then the assignment operator (=) assigns whatever is to the right of the equals sign to the variable name.","Once you create a variable with the var keyword, you can also update that variable's value. First, we create a variable called tvShow and assign it the value \"Black Mirror\". Then, without using the var keyword we reassign tvShow to equal \"Parks and Recreation\".",{"codeBlock":"var tvShow = \"Black Mirror\";\nconsole.log(tvShow) // => \"Black Mirror\"\ntvShow = \"Parks and Recreation\";\nconsole.log(tvShow) // => \"Parks and Recreation\""},"Notice the different outputs on lines 2 and 4 each time we call console.log(tvShow). In the first one on line 2, the output is \"Black Mirror\", but after we change the value of tvShow to \"Parks and Recreation\" on line 3, we get a different output for our console.log(tvShow). Why are we getting different outputs for the same exact console.log? As you can see on line 3, we reassigned the value of tvShow from \"Black Mirror\" to \"Parks and Recreation.\" Once we change the value of a variable to a new value, it will remain that value until it is changed again."]},{"subheading":"Let & Const","subcontent":["let and const were introduced with the release of ECMAScript 2015, or more commonly, ES6. You'll see this term quite a lot while you're learning JavaScript, but for now, don't worry too much about it, it's just a version of JavaScript. We'll go more into detail on what that means in a later lesson.","In the example below, you can see that the value of variables declared with the var and let keywords may be reassigned.",{"codeBlock":"let fridge = \"empty\";\nconsole.log(fridge) // => \"empty\"\nfridge = \"full\";\nconsole.log(fridge) // => \"full\"\n\nvar house = \"dirty\";\nconsole.log(house) // => \"dirty\"\nhouse = \"clean\";\nconsole.log(house) // => \"clean\""},"At this point you may be asking \"what's the difference between let and var?\" This is a more advanced topic relating to how let and var (and const) are scoped. You'll learn more about scope in later lessons.","While using the var and let keywords allows us to reassign a variable's value, const operates a bit differently.","The const keyword is used to create a constant. Now, while a const declaration looks mainly the same as let and var variables, the value of a constant cannot be changed throughout the code. Like let, const is also limited to the scope in which it is declared.","Consider the following:",{"codeBlock":"const pet = \"cat\";\n\npet = \"dog\"; // => TypeError: Assignment to constant variable."},"This would result in the error \"Assignment to constant variable\""]},{"subheading":"Knowing What to Use and When","subcontent":["In JavaScript today, it is considered best practice to avoid using var. You should try and use let and const whenever possible. Just remember to use let when you will be changing the value of the variable and const when you won't be changing the value. Getting in the habit of using let and const properly now in the early stages of your learning will help you keep your code easier to manage."]},{"subheading":"5 Rules for Naming Variables and Constants","subcontent":["There are a few things to know about naming your variables and constants.","1. Variable names are case-sensitive. This means a and A are two different variables, regardless which keyword (var, let or const) that was used to define them.",{"codeBlock":"let a = \"hello\";\nlet A = \"goodbye\";\n\nconsole.log(a); // => \"hello\"\nconsole.log(A); // => \"goodbye\""},"2. Variable names should begin with a lowercase character.","3. Variable names cannot begin with a number.","4. Variable names cannot contain symbols.",{"codeBlock":"// VALID\nlet user;\nlet applicant3;\nlet favoriteCandy;\n\n// INVALID\nlet 3applicant;\nlet fav-candy"},"5. camelCased variable names are best practice. camelCase is a naming convention in which a name is formed by connecting multiple words together as a single word with the first letter of each of the multiple words capitalized so that each word that makes up the name can easily be read. The only word not capitalized is the first.",{"codeBlock":"// YES\nlet favFood;\nlet camelCasedVariable;\nlet userName;\n\n// NO\nlet favoriterestaurant;\nlet tobecompleted;"}]},{"subheading":"Conclusion","subcontent":["We've covered A LOT of material here! Now we're going to spend the next 3 challenges practicing declaring variables and constants. It may seem overwhelming right now, but don't worry, we'll take it slow, and you'll be a pro in no time."]}]},"precourse-what-is-js":{"subunitId":"precourse-what-is-js","heading":"Javascript: What is it?","read":[{"subheading":"JavaScript is Everywhere!","subcontent":["Not to be confused with Java, JavaScript is the language of the modern web. Along with HTML and CSS, it has become an essential web technology. If you want to get into web development, it is necessary that you learn JavaScript.","Users today expect a lot from their online experience. They want web applications that are fast, responsive and efficient. This is what JavaScript does, and for now, there’s no replacement.","You use JavasScript every day, whether you know it or not. It might be something to make your life easier, like your calendar app, or maybe it’s something to help you stay in contact with your friends like Instagram. Whether you’re sharing documents, catching up on the world by reading a digital news site, watching videos online, or any of the million things we do online daily, you’re encountering and working with JavaScript somewhere behind the scenes."]},{"subheading":"The Modern Web","subcontent":["Modern web architecture is comprised of three key ingredients: HTML, CSS, and JavaScript.","Think about it like this. If our webpage is a car, HTML is the frame of the car, CSS is the styling of the car, the color of the car, the rims of the car, etc, and JavaScript is the engine. It’s what makes our car do what a car is supposed to do: DRIVE!"]},{"subheading":"HTML","subcontent":["HTML, Hypertext Markup Language, is the backbone of the web. It’s right underneath the surface of everything you see on the web. HTML is a markup language, which means that it tells the browser how to display information. Whether it’s the text of a paragraph, or a link, HTML is what gives our sites their content."]},{"subheading":"CSS","subcontent":["CSS stands for Cascading Style Sheets with an emphasis on “Style.” While HTML is used to structure a webpage, CSS comes through and specifies your document’s style. Page layouts, colors, and fonts are all determined with CSS. Think of HTML as the foundation (every house has one), and CSS as the aesthetic choices."]},{"subheading":"JavaScript","subcontent":["JavaScript, or \"JS\" for short, is a full-fledged dynamic programming language that, when applied to an HTML document, can provide dynamic interactivity on websites.","What you can do with JavaScript in the browser can be broken down into two categories. First, is JavaScript’s ability to interact with the browser elements we mentioned before (HTML/CSS). Second, is the ability JavaScript gives us in shaping and manipulating data.","Let’s say someone named Brandon visited our website and entered his name into the an HTML text field. With the power of JavaScript we can read his entry and create interactive content that is unique to him! Now, whenever Brandon visits our website again we will be able to display a greeting, such as, ‘Welcome back, Brandon!’","When combining JavaScript with HTML & CSS, software engineers are able to make interactive web applications that are creative, powerful, fast, and unique! This is just the beginning of a very exciting journey."]}]},"recursion-performance":{"subunitId":"recursion-performance","heading":"Introduction to Recursion (cont.) - getLength","watch":["https://www.youtube.com/embed/1lx3VAs_lBM",{"description":["Let's continue to break down recursion - watch George explain performance in JavaScript."]}]},"slack-community":{"subunitId":"slack-community","heading":"Slack/Facebook Community","read":["In addition to the weekly workshops, the CSX slack community is a great place to ask questions, compare approaches, and share resources with other CSX students. CSX Mentors will also be active in the slack and responding to questions and giving insight.","Slack is a wonderful tool to stay connected and engaged in the community no matter where you are located - join the CSX Slack here.","We also encourage students to join the CSX Facebook group here."]},"solution-after":{"subunitId":"solution-after","heading":"Solution: after","watch":["https://www.youtube.com/embed/thmw-aEuQe0",{"description":["After you've completed the challenge, watch our CSX Mentor, Mitchel, explain his solution for after.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-ajax-simulate":{"subunitId":"solution-ajax-simulate","heading":"Solution: ajaxSimulate","watch":["https://www.youtube.com/embed/zFqx7aWyiWs",{"description":["After you've completed the challenge, watch our CSX Mentor, Jon, explain the solution for ajaxSimulate.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-array-builder":{"subunitId":"solution-array-builder","heading":"Solution: arrayBuilder","watch":["https://www.youtube.com/embed/pG1JCk4G0W8",{"description":["After you've completed the challenge, watch our CSX Mentor, Ruth, explain her solution for arrayBuilder!","If you prefer to read through Ruth's approach, please click here to read her blog post detailing her solution to the arrayBuilder challenge.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-censor":{"subunitId":"solution-censor","heading":"Solution: censor","watch":["https://www.youtube.com/embed/cyjaWV_H-78",{"description":["After you've completed the challenge, watch our CSX Mentor, Sara, explain her solution for censor.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-create-function":{"subunitId":"solution-create-function","heading":"Solution: createFunction","watch":["https://www.youtube.com/embed/Sn0bbIU6DvI",{"description":["After you've completed the challenge, watch our CSX Mentor, Phillip, explain his solution for createFunction.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-cycle-iterator":{"subunitId":"solution-cycle-iterator","heading":"Solution: cycleIterator","watch":["https://www.youtube.com/embed/4u0lHYkhVoU",{"description":["After you've completed the challenge watch our CSX Mentor, Mejin, explain the solution for cycleIterator.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-date-stamp":{"subunitId":"solution-date-stamp","heading":"Solution: dateStamp","watch":["https://www.youtube.com/embed/PrRM9ciNSgE",{"description":["After you've completed the challenge, watch our CSX Mentor, Heidi, explain her solution for dateStamp.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-disemvowel":{"subunitId":"solution-disemvowel","heading":"Solution: disemvowel","watch":["https://www.youtube.com/embed/f2tYPU-0qV4",{"description":["After you've completed the challenge, watch our CSX Mentor, Xavyr, explain his solution for disemvowel.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-either-callback":{"subunitId":"solution-either-callback","heading":"Solution: eitherCallback","watch":["https://www.youtube.com/embed/d47lDekXf4E",{"description":["After you've completed the challenge, watch our CSX Mentor, Jared, explain the solution for eitherCallback.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-factorial":{"subunitId":"solution-factorial","heading":"Solution: Factorial","watch":["https://www.youtube.com/embed/S1hXOyvgl5o",{"description":["After you have completed the challenge, watch George dive into his solution to Factorial.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-flow":{"subunitId":"solution-flow","heading":"Solution: flow","watch":["https://www.youtube.com/embed/pwftU5vjMY0",{"description":["After you've completed the challenge, watch our CSX Mentor, Samantha, explain her solution for flow.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-for-each":{"subunitId":"solution-for-each","heading":"Solution: forEach","watch":["https://www.youtube.com/embed/xjvizrVY3Qs",{"description":["After you've completed the challenge, watch our CSX Mentor, Ben, explain the solution for forEach.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-for-each-async":{"subunitId":"solution-for-each-async","heading":"Solution: forEach","watch":["https://www.youtube.com/embed/ASmSIU-A2wc",{"description":["After you've completed the challenge, watch our CSX Mentor, Dan, explain the solution to forEach.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-for-loops-arrays":{"subunitId":"solution-for-loops-arrays","heading":"Solution: For Loops and Arrays","watch":["https://www.youtube.com/embed/gaAcOR5yWxw",{"description":["After you've completed the challenge, watch our CSX Mentor, Pauline, explain her solution for For Loops and Arrays.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-for-loops-fundamentals":{"subunitId":"solution-for-loops-fundamentals","heading":"Solution: For Loops - Fundamentals","watch":["https://www.youtube.com/embed/P-iMJN1Yad4",{"description":["After you've completed the challenge, watch our CSX Mentor, Nisa, explain her solution for For Loops - Fundamentals.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-function-with-input":{"subunitId":"solution-function-with-input","heading":"Solution: createFunctionWithInput","watch":["https://www.youtube.com/embed/0YEabRrrpEk",{"description":["After you've completed the challenge, watch our CSX Mentor, Phillip, explain his solution for createFunctionWithInput.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-functions-short-circuiting-a-loop":{"subunitId":"solution-functions-short-circuiting-a-loop","heading":"Solution: Short-Circuiting a Loop","watch":["https://www.youtube.com/embed/SoFJPtHJi8w",{"description":["After you've completed the challenge, watch our CSX Mentor, Ryan, explain the solution for Short-Circuiting a Loop.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-get-length":{"subunitId":"solution-get-length","heading":"Solution: getLength","watch":["https://www.youtube.com/embed/noDwyiUUYGA",{"description":["After you've completed the challenge, watch our CSX Mentor, Pete, explain the solution for getLength.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-group-by":{"subunitId":"solution-group-by","heading":"Solution: groupBy","watch":["https://www.youtube.com/embed/5AzgSa6olDo",{"description":["After you've completed the challenge, watch our CSX Mentor, Katrina, explain the solution for groupBy.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-intersection":{"subunitId":"solution-intersection","heading":"Solution: intersection","watch":["https://www.youtube.com/embed/Xm-rT8ncaTc",{"description":["After you've completed the challenge, watch our CSX Mentor, Kyle, explain the solution for intersection.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-invoking-functions":{"subunitId":"solution-invoking-functions","heading":"Solution: Invoking Functions","watch":["https://www.youtube.com/embed/NUqFKYTeTs0",{"description":["After you've completed the challenge, watch our CSX Mentor, Xavyr, explain his solution for Invoking Functions.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-map":{"subunitId":"solution-map","heading":"Solution: map","watch":["https://www.youtube.com/embed/PhbNDieKAOk",{"description":["After you've completed the challenge, watch our CSX Mentor, Schno, explain the solution for map.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-multi-map":{"subunitId":"solution-multi-map","heading":"Solution: multiMap","watch":["https://www.youtube.com/embed/CJXQ2tYHDf0",{"description":["After you've completed the challenge, watch our CSX Mentor, Denis, explain the solution for multiMap.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-multiply-all":{"subunitId":"solution-multiply-all","heading":"Solution: multiplyAll","watch":["https://www.youtube.com/embed/A4mSdIyM8PY",{"description":["After you've completed the challenge, watch our CSX Mentor, Rob, explain the solution for multiplyAll.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-obj-adding-properties":{"subunitId":"solution-obj-adding-properties","heading":"Solution: Objects - Adding Properties","watch":["https://www.youtube.com/embed/RPaYQaidxXA",{"description":["After you've completed the challenge, watch our CSX Mentor, Aki, explain the solution for Objects - Adding Properties.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-obj-of-matches":{"subunitId":"solution-obj-of-matches","heading":"Solution: objOfMatches","watch":["https://www.youtube.com/embed/euRZldF1o3U",{"description":["After you've completed the challenge, watch our CSX Mentor, Matthew, explain the solution for objOfMatches.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-once":{"subunitId":"solution-once","heading":"Solution: once","watch":["https://www.youtube.com/embed/iFslomR92E0",{"description":["After you've completed the challenge, watch our CSX Mentor, Mejin, explain her solution for cycleIterator.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-person-constructor":{"subunitId":"solution-person-constructor","heading":"Solution: PersonConstructor","watch":["https://www.youtube.com/embed/Mc6zn8fkHXc",{"description":["After you've completed the challenge, watch our CSX Mentor, Mejin, explain her solution for PersonConstructor.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-person-from-person-store":{"subunitId":"solution-person-from-person-store","heading":"Solution: personFromPersonStore","watch":["https://www.youtube.com/embed/OO_hGJWb05M",{"description":["After you've completed the challenge, watch our CSX Mentor, Erik, explain the solution for personFromPersonStore.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-reduce":{"subunitId":"solution-reduce","heading":"Solution: reduce","watch":["https://www.youtube.com/embed/ELX-FBXZ-3g",{"description":["After you've completed the challenge, watch our CSX Mentor, Luis, explain the solution for reduce.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-repeater":{"subunitId":"solution-repeater","heading":"Solution: Repeater","watch":["https://www.youtube.com/embed/Ks252i3zY1U",{"description":["After you have completed the challenge, watch CSX Mentor, Billy, explain his solution for repeater."]}]},"solution-run-in-order":{"subunitId":"solution-run-in-order","heading":"Solution: runInOrder","watch":["https://www.youtube.com/embed/micF_oeeeko",{"description":["After you've completed the challenge, watch our CSX Mentor, Jon, explain the solution for runInOrder.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-save-output":{"subunitId":"solution-save-output","heading":"Solution: saveOutput","watch":["https://www.youtube.com/embed/ww3yb3qNPyM",{"description":["After you've completed the challenge, watch our CSX Mentor, Keiran, explain the solution for saveOutput.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"solution-union":{"subunitId":"solution-union","heading":"Solution: union","watch":["https://www.youtube.com/embed/AHAcaJUG_Qo",{"description":["After you've completed the challenge, watch our CSX Mentor, Casey, explain her solution for union.","Please note that this solution video describes one way to solve this challenge, not the only way. There are many ways to solve every challenge!"]}]},"what-now-additional-information-info-sessions-and-alumni-advisor-calls":{"subunitId":"what-now-additional-information-info-sessions-and-alumni-advisor-calls","heading":"Additional Information - Info Sessions and Alumni Advisor Calls","read":[{"subheading":"Info Sessions","subcontent":["In addition to the JavaScript workshops you have attended throughout your time working on CSX, Codesmith also offers other free events, such as program info sessions, community study groups, and technical interview workshops.","If you aren’t able to attend a live session, we recommend visiting our YouTube Channel for recordings of selected sessions. "]},{"subheading":"Alumni Advisor Calls","subcontent":["For a more customized approach, we recommend you schedule a call with an Alumni Advisor. They can help you determine your particular learning to code path and answer your questions about Codesmith programs. In addition, Alumni Advisors can help you determine which concepts to focus on, what may be your next step, and give advice from their own personal experience of becoming a Software Engineer."]}]},"what-now-software-engineering-as-a-career":{"subunitId":"what-now-software-engineering-as-a-career","heading":"Software Engineering as a Career","read":["As you prepare for your career as a Software Engineer, you should attend additional workshops - check out our events page for more!","If you are not able to attend a live session, our YouTube channel features recorded panels and workshops. We recommend starting with “Upleveling Your Tech Career,” where Shaundai Person, a senior engineer at Netflix, shares tips on career growth and balancing ambitious goals.","While CSX focuses on the “why” of JavaScript, we encourage you to continue learning by building projects, like those created by students in Codesmith’s Software Engineering Immersive, and moving on to advanced resources like Interview Cake and JavaScript30.","You may also find it valuable to continue engaging with the CSX Slack community and mentoring those who are still in their CSX journey through the csx-challenge-help channel. This will allow you to review key concepts and practice your technical communication skills while helping others whose shoes you were just in.","Please keep in mind that coding is a lifelong journey of perfecting your craft, and that there will always be new tools and technologies to learn! By starting your journey with CSX and engaging in hard-learning, you are nurturing your ability to become a lifelong learner.","Remember to stay motivated and stay involved! Completing CSX is a great first step to becoming a Software Engineer and Codesmith is here to support you on the rest of your journey as well."]},"what-now-structured-programs":{"subunitId":"what-now-structured-programs","heading":"Structured Programs","read":["Congratulations on making it through CSX! You should now be ready to apply for one of Codesmith’s flagship Software Engineering Immersive Programs, taught remotely full-time and part-time.","The program teaches full-stack JavaScript and computer science to prepare you for mid- and senior-level software engineering roles. The expertly designed curriculum and supportive community immerses you in modern web technologies, such as React and Node.js, and encourages you to tackle unique and unfamiliar problems to prepare you for the ever-changing tech landscape.","The inclusion of four different types of projects is one of the key elements that sets Codesmith’s curriculum apart and prepares students for mid- and senior-level software engineering roles.","Codesmith also offers an extensive hiring support program that guides students through the job search process, including interview strategies, portfolio development, and post-graduation check-ins. By the end of the program, you will be an autonomous engineer, ready to make an impact at innovative tech companies worldwide.","In the next subunit, we’ll discuss how to prepare for the Software Engineering Immersive Program technical interview!"]},"what-now-technical-interview-prep":{"subunitId":"what-now-technical-interview-prep","heading":"Technical Interview Prep","read":["In each Unit’s overview card on the CSX Homepage, you can see which concepts are ‘always,’ ‘sometimes,’ or ‘never’ tested on the Codesmith Technical Interview. You can learn more at our “How to Pass the Technical Interview” workshops that are scheduled roughly every five weeks! Keep an eye on our workshops page for the next event.","The following concepts are always tested on the Technical Interview for Codesmith’s Software Engineering Immersive:",{"list":["Functions and Execution Context","Callbacks & Higher-order Functions","Closure, Scope & Execution Context","Recursion","Object Oriented Programming"]},"Apart from the technical elements, we also look for technical communication skills and the ability to debug, which you can practice in a pair programming session or through the CSX Slack pair-programming and csx-challenge-help channels.","To learn more about the Immersive program we recommend attending an Information Session or scheduling a call with an Alumni Advisor.
",{"subheading":"CS Prep","subcontent":["If you are looking for more structured supplemental instruction before applying for an Immersive program, you may want to consider CS Prep, our live intermediate to advanced prep program.","CS Prep is a 2-week program covering JavaScript concepts, engineering best practices, and technical communication. The program includes live-online instruction, daily problem-solving workshops, and a passionate coding community to help you prepare for top coding boot camps such as our selective Software Engineering Immersive programs, and equips you with the tools to solve real-world problems.","We do not require any coding experience to apply to CS Prep, but we strongly encourage completing up through Callbacks & Higher-Order Functions. CS Prep moves quickly, as there is a lot of ground to cover taking you from introductory to intermediate JS, so the more familiarity you have with these concepts the better! Don’t worry though, in the program we’ll discuss JavaScript fundamentals like functions and data types, closures, callbacks, recursion, and algorithms at length."]}]},"workshop-async":{"subunitId":"workshop-async","heading":"Workshop - JavaScript the Hard Parts Async & Promises","read":["During the JavaScript the Hard Parts: Async & Promises workshop video, we will explore asynchronous JavaScript under-the-hood. This is one of our most advanced workshops in this series - to get the most out of it, we recommend that you be comfortable with concepts covered in the earlier units such as callbacks and closure. In this video we will cover:",{"list":["The challenge with single-threadedness in JavaScript","How asynchronicity enables much of modern web development","The challenge with asynchronicity in JavaScript and how promises fix the problem of inversion of control"]},"We will begin the workshop by experimenting with a native timer function called
setTimeout, and then we will explore how events such as HTTP responses and button clicks be paired with asynchronous callbacks to update the Document Object Model (DOM) in order to give feedback to the user.","Our mental models of asynchronicity in javascript - the event loop, callback queue - are no longer enough. We have to augment them with the new world of native promises and async/await and understand them intuitively. In this video, we’ll do this so you can write readable code and debug effectively.","
"]},"workshop-callbacks":{"subunitId":"workshop-callbacks","heading":"Workshop - JavaScript The Hard Parts: Callbacks and Higher Order Functions","read":["Congratulations on graduating from Codesmith’s “Intro to JavaScript” series to the “Javascript the Hard Parts” series! The first video workshop in this series is JavaScript the Hard Parts: Callbacks and Higher Order Functions. Understanding how callbacks and higher order functions work under the hood will provide a solid foundation to comprehend more advanced topics such as closure, object oriented programming and asynchronous JavaScript later in this series. This video workshop will cover core concepts like:",{"list":["Building functions like map, reduce, and filter from scratch","Using higher order functions to keep code clean even in complex situations","How to diagram through higher order functions and callbacks scenarios"]},"In addition to Callbacks and Higher Order Functions being an essential building block of JavaScript, they’re also always tested on the Codesmith Immersive Program technical interview. This video workshop is key to understanding both how these functions work as well as what level of technical communication on them we are expecting to see during your interview.","
"]},"workshop-closures":{"subunitId":"workshop-closures","heading":"Workshop - JavaScript The Hard Parts - Closure, Scope, and Execution Context","read":["Closure is one of the most important yet misunderstood features of JavaScript. You have probably already seen closure in action or will soon in classic challenges like once, memoize, and password-protected functions.","Most students watch JavaScript The Hard Parts: Closure, Scope, and Execution Context multiple times in order to fully grasp these concepts.","The specifics of this workshop include:",{"list":["How closure works under the hood","Core JavaScript runtime features - execution context, the JavaScript execution model and the variable environment","How to wield, optimize and debug popular pro utility functions like once and memoize","How to implement the module pattern - one of the cleanest and most resilient design patterns in JavaScript"]},"These concepts, especially closure, are always tested in the technical interview for the Codesmith immersive program, which makes this video workshop an essential part of your CSX and Codesmith journey.","
"]},"workshop-functions-and-objects":{"subunitId":"workshop-functions-and-objects","heading":"Intro to Coding: The Ingredients and Recipes of JavaScript","read":["The video workshop that pairs with this CSX unit is Intro to Coding: The Ingredients and Recipes of JavaScript.","This workshop is designed to dive under-the-hood of Functions so even if you’ve been programming with functions or are completely new to them, you can learn more about how they work.","In this video, we will cover:",{"list":["What happens when our code runs in the browser?","A closer look at objects","Objects and arrays","Reusing our logic (declaring/invoking functions)"]},"Now that you are becoming familiar with the basics of Javascript, this is a great time to start practicing your technical communication skills. Attending live workshops will give you the opportunity to explain your code to others so that you can work on the clarity of your explanation.","See upcoming sessions and RSVP here!","
"]},"workshop-intro-to-javascript":{"subunitId":"workshop-intro-to-javascript","heading":"Workshop - Intro to Javascript: Variables, Control Flow, and Looping","read":["The video workshop that pairs with CSX Precourse - Part 1 is Codesmith’s Intro to Javascript: Variables, Control Flow, and Looping workshop.","During this video, we will cover:",{"list":["The web and how it is comprised of HTML, CSS, and JavaScript","Variables (const/let)","Objects and arrays","For loops and conditional logic (if/else)"]},"See upcoming events and RSVP here.",""]},"workshop-js-fundamentals-pt1":{"subunitId":"workshop-js-fundamentals-pt1","heading":"Intro to JS Pt. 1","watch":["https://www.youtube.com/embed/TwLcYFFvPdo?start=0",{"description":["If you are unable to attend a live workshop, you may find it useful to watch the following recording of Online Instructor Jinsung to gain insight on these topics."]}]},"workshop-jshp-oop-pt1":{"subunitId":"workshop-jshp-oop-pt1","heading":"JSHP: OOP Pt. 1","watch":["https://www.youtube.com/embed/MSmpf47YaFY",{"description":["If you are unable to attend a live workshop, you may find it useful to watch the following recording of the Chief Academic Officer at Codesmith, Phillip, to gain insight on these topics."]}]},"workshop-jshp-oop-pt2":{"subunitId":"workshop-jshp-oop-pt2","heading":"JSHP: OOP Pt. 2","watch":["https://www.youtube.com/embed/3qgYKLf9w-Y",{"description":["If you are unable to attend a live workshop, you may find it useful to watch the following recording of the Chief Academic Officer at Codesmith, Phillip, to gain insight on these topics."]}]},"workshop-oop":{"subunitId":"workshop-oop","heading":"Workshop - JavaScript the Hard Parts Classes and Prototypes","read":["It’s time to go under the hood of Object Oriented Programming (OOP) and the prototype chain with Codesmith’s JavaScript the Hard Parts: Classes and Prototypes video workshop! This is one of our most advanced workshops, so we encourage you to watch it as many times as you need.","We’ll cover:",{"list":["4 approaches to object-oriented programming in JavaScript","Prototype, __proto__ and the prototype chain","Factories, constructors and classes","ES5 and ES6 approaches"]},"As an advanced workshop in the JavaScript the Hard Parts series, we highly recommend attending it live. Attendance is helpful for any level of experience with OOP! This is also a great way to work on your technical communication and continue pair programming.","
"]},"workshop-recursion":{"subunitId":"workshop-recursion","heading":"Workshop - Exploring Recursion in JavaScript","read":["The next video workshop in our series is Exploring Recursion in JavaScript. In this video, we’ll delve into one of the most powerful, but often confusing concepts in programming: functions that call themselves! Recursion is a hard concept to grasp so we recommend reviewing this video as many times as you need.","Specifically, we'll be covering:",{"list":["When to use looping vs. recursion","How to set up recursive functions","How you can return a value out of a recursive call"]},"
"]}}}