{"id":242,"date":"2018-08-22T06:50:49","date_gmt":"2018-08-22T06:50:49","guid":{"rendered":"http:\/\/www.projectimmerse.com\/?p=242"},"modified":"2020-06-17T09:28:22","modified_gmt":"2020-06-17T09:28:22","slug":"javascript-fundamentals","status":"publish","type":"post","link":"https:\/\/www.projectimmerse.com\/blog\/javascript-fundamentals\/","title":{"rendered":"Javascript Fundamentals"},"content":{"rendered":"

Whoa that title, yeah it made me cringe a little don’t ask me why. Perhaps it’s because I’ve seen it over countless times but I couldn’t think of a better title. I was gonna go with “Vanilla Javascript” but we all know that deserves it’s own space. <\/p>\n

Javascript fundamentals is like going back in time, sort of like when the earth was formed. Were not going to get into the details of lexical environments or function scope or objects, well maybe a little on objects. Were going to just simply define a few javascript constructs. <\/p>\n

<\/p>\n

To start we can start creating variables<\/h2>\n
\r\n\r\n\/\/ we can only use letters ,digits, _, \r\n\/\/ and $ for variables, can't start with a digit though\r\n\r\nvar createVariable = 'I am a variable';\r\n\r\nvar _underscoreVariable = 'we can use underscores';\r\n\r\nvar $_dollarSignVariable = 'even dollar signs';\r\n\r\n<\/pre>\n
Cool let’s, moving on to if statements<\/h2>\n
\r\n\r\nvar checkDataType = 0;\r\n\r\nif (checkDataType) {\r\n\r\n  console.log('true');\r\n\r\n} else {\r\n\r\n  console.log('false');\r\n\r\n}\r\n\r\n<\/pre>\n
Yeah you would think the above if statement would output ‘true’, but it would actually output ‘false’. I wanted to throw a curve ball here since most beginners miss this one. If you’re wondering what’s going on, javascript actually treats 0 as false. <\/p>\n
Loops<\/h2>\n
\r\n\r\n\/\/ let's sample an array\r\nvar arraySample = [1, 2, 3, 4, 5];\r\n\r\n\/\/ output its length \r\nconsole.log(arraySample.length);\r\n\r\n\/\/ okay cool, let's loop through it.\r\nfor (var i = 0; i < arraySample.length; i++) {\r\n   console.log(arraySample[i]);\r\n}\r\n\r\n<\/pre>\n
You’ll get the following output. Were iterating through the array from 1 to 5. <\/p>\n
\"Javascript<\/p>\n
There’s also an alternative method for doing the same thing. We’ll sprinkle in some new concepts while were at it. <\/p>\n
forEach() method<\/h2>\n
\r\n\r\n\/\/ let's sample an array\r\n\r\nconst arraySample = [2, 24, 6];\r\nconst arrayCopy = [];\r\n\r\narraySample.forEach(function(sample){\r\n  arrayCopy.push(sample*sample);\r\n});\r\n\r\n\/\/ the output should be [4, 576, 36]\r\n\r\n<\/pre>\n
Ok so I’ve introduced the const keyword – it’s like a variable except just like the keyword suggests we want to treat it like a constant, something that doesn’t change – this is good practice. That’s exactly what were doing here, we aren’t modifying the original array. Were taking the numbers from it though, manipulating it and then “pushing” it into that empty array. [], denotes an empty array. And push is a built in javascript method, attached to Array objects. Yeah it beginning to sound really complicated but it’s not. <\/p>\n
Ok now, the for..in method<\/h2>\n
\r\n\r\nvar emptyString = "";\r\nvar numberObjects = {a: 1, b: 2, c: 3};\r\n\r\nfor (var numberProperty in numberObjects) {\r\n  emptyString = emptyString + numberObjects[numberProperty];\r\n}\r\n\r\nconsole.log(emptyString);\r\n\/\/ expected output: "123"\r\n\r\n\r\n<\/pre>\n
I did something extra here – introduced the concept of javascript objects and at the same time sprinkled it with a little data type coercion trick. Let’s first pay attention to the for..in construct, we are basically looping through the numberObjects object. With this method we are treating each item in the object as properties, that’s why I called it numberProperty. Whoa this is getting confusing. I did way too much at once here. Yeah there is also some concatenation going on. When you see the “+” sign, it get’s a little ambiguous. Just one of the countless reasons Javascript is such a wild beast of a language. <\/p>\n
In this post we covered some key fundamentals<\/p>\n