Javascript Fundamentals

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.

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.

To start we can start creating variables

// we can only use letters ,digits, _, 
// and $ for variables, can't start with a digit though

var createVariable = 'I am a variable';

var _underscoreVariable = 'we can use underscores';

var $_dollarSignVariable = 'even dollar signs';

Cool let’s, moving on to if statements

var checkDataType = 0;

if (checkDataType) {

  console.log('true');

} else {

  console.log('false');

}

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.

Loops

// let's sample an array
var arraySample = [1, 2, 3, 4, 5];

// output its length 
console.log(arraySample.length);

// okay cool, let's loop through it.
for (var i = 0; i < arraySample.length; i++) {
   console.log(arraySample[i]);
}

You’ll get the following output. Were iterating through the array from 1 to 5.

There’s also an alternative method for doing the same thing. We’ll sprinkle in some new concepts while were at it.

forEach() method

// let's sample an array

const arraySample = [2, 24, 6];
const arrayCopy = [];

arraySample.forEach(function(sample){
  arrayCopy.push(sample*sample);
});

// the output should be [4, 576, 36]

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.

Ok now, the for..in method

var emptyString = "";
var numberObjects = {a: 1, b: 2, c: 3};

for (var numberProperty in numberObjects) {
  emptyString = emptyString + numberObjects[numberProperty];
}

console.log(emptyString);
// expected output: "123"

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.

In this post we covered some key fundamentals

• Creating variables
• If statements
• A little bit about data types
• For, for..in, foreach() methods for looping through data

They don’t call it fundamentals for nothing and they don’t call Javascript, Javascript Land for no reason. I’ll be revisiting more Javascript Fundamentals in the posts to come. Maybe even provide the same concepts covered here but in a different way. If you really want to tame this wild beast you will have to do the same things over and over again till it gets you and you get IT. yeah, it’s like that. So stay tuned.