DEV Community: HowToCodejs

An Overview of JavaScript Functions

HowToCodejs — Thu, 31 May 2018 16:50:03 +0000

Visit howtocodejs.com to code along with the examples

We can wax poetics about functions and their uses all day. Instead, let's explore life with and without functions.

Life without Functions

let pets = 35;
let owners = 15;
let petsPerOwner = pets / owners;
//======Pet Info Form
let answer = prompt("how many pets do you have?");
//============
 // update based on answer, add new owner
pets += answer / 1; //  coerce string into number
owners += 1; // register new owner
petsPerOwner = pets / owners;

//test
`There are now ${petsPerOwner} pets per owner at Pet Nirvana `;

Is that easier to read than this?

Life with functions

let pets = 35;
let owners = 15;
let petsPerOwner = average(pets, owners);
let answer = prompt("how many pets do you have?");

registerPets(answer);
registerOwner();
updateAvg(); // update based on answer, add new owner
console.log(`There are now ${petsPerOwner} pets per owner at Pet Nirvana `);


function average(total, number){
  return total / number;
}
function registerPets(newNum){
  pets += Number(newNum); // register new pet(s)
}
function registerOwner(){
  ++owners;
}
function updateAvg(){
  petsPerOwner = Math.ceil(average(pets, owners)); // find new average, round up
}

Besides legibility, you can also see how much easier it is to do our job when we have all these built-in functions provided for us. Math.ceil rounds up and log() helps us debug code. Also, notice how the first example still uses a function for pure necessity.

Without functions, there is no JavaScript, at least all the good parts of JavaScript that we know and love.

Anatomy of a Function

function multiply(x, y){
  return x * y;
}

function // keyword for decleration
multiply // function name
(x,y)   // parameters
return x * y; // a return statement allows
              //the function to produce value

A function has a parameter or parameters. We can name them whatever we like, just like variables. Though, we should think of parameters more like references rather than storage. We're telling the function that we're expecting some variable or data type to be plugged into this space by the user. We then operate on the parameter names within the body of the function.

More times than not, you'll want to make sure you return your expected result. Not doing so will produce undefined when you invoke the function. If you intend to use your function to set value, include the return keyword.

Return

The return statement can return any data type.

Numbers:

return 2;

Strings:

return "hello";

Null:

return null;

Undefined:

return undefined;

Arrays:

return [1,2,3];

Objects:

return {one: 1, two: 2, three: 3};

Functions:

return function(){
  return "I'm in a function";
}

Invoking a function

You invoke a function by adding () to its name. If the function requires parameters, you must enter them or you'll get an error.

function multiply(x, y){
  return x * y;
}
multiply(2,2); // 4

You can invoke a function before its declaration and it'll still work. This is called hoisting.

multiply(2,2); // 4

function multiply(x, y){
  return x * y;
}

Function notations

When a landmark or a thing is significant in any human language, there's often more than one way to declare its name.

Fun fact: In Classical Arabic, there are hundreds of ways to name a camel.

Similarly, functions are so important to JavaScript that there are numerous names for them depending on the context in which they're used.

Function Declaration

You have the tried and true function declaration:

function greet(){
  return 'hello';
}

// we can the call or invoke this functions

greet(); // 'hello'

Function Expression

You also have a function expression. It's called a function expression because you're assigning a function to a variable:

let greet = function(){
  return 'hello';
}

// we can still call or invoke this functions

greet(); // 'hello'

One important thing to note is that hoisting does not work with function expressions.

greet(); // undefined

let greet = function(){
  return 'hello';
}

Anonymous Functions

The function keyword(function()) without a name after it is called an anonymous function. Es6 introduced a new way to write an anonymous function. Instead of using the function keyword, you can delete it and add the arrow operator => to the parenthesis.

let greet = ()=>{
  return 'hello';
}

For the most part, the difference in syntax was introduced to satisfy purists who are fond of writing minimal code. Though, the arrow function does introduce auto binding. Instead of getting overly technical, we'll show you what auto binding is later.

Anonymous functions are versatile. You can set them as a value to a key in an object literal:

let person = {
  name: "Mark",
  greet: function(){
    return 'hello' + ' ' +  this.name;   
  }
}; // end of object literal

person.greet();

Note: this refers to person within our anonymous function. We could have just as easily wrote person.name.

Callback Functions

Anonymous functions can also go in a parameter. Doing so turns the anonymous function into what's called a callback.

//here's a function expression
let greet = (callback, times)=>{
  for(let cnt=0; cnt < times; cnt ++){
      console.log(callback()); //it doesn't return.
                              //This will cause a side effect
  }
}


//here's our anonymous func AKA callback
greet(()=>{return 'hello'}, 3);
//we could have written it like this:
greet(function(){return 'hello'}, 3);

Note: Remember when we talked about the anatomy of a function? When you define a function, you create a mock up. The callback just takes advantage of that because we can wait for the function to arrive. We're telling the interpreter that we want to invoke the function when it arrives by attaching () to our parameter name.

Closures

A function within a function is called a closure:

// We have two functions. One is named outie and the other is named closure *wink* *wink*
function outie(){
  // this is closure's first and only outer scope
  function closure(){
   // this is closure's local scope
  }
}

If you've been playing around with callbacks, you might have guessed correctly that a callback is also a closure. At some point during its existence, it gets called within another function.

Context:'
Now that we've started nesting functions, we should address context. Functions create their own context, which effects the this keyword, but if we wrote a closure within an anonymous function, this would refer to our function. Thus, we'd get undefined.

Here's an example:

 let person = {
  name: "Mark",
  greet: function(){    
    return function(){
          return 'hello' + ' ' +  this.name;  
    }      
  }
}
// double invoke ()() can invoke a returned closure
person.greet()();// >'hello undefined'

To fix the problem, developers just set this to a variable to preserve the context. In other words, we're binding this. Starting to see what auto binding may entail?:

//code excerpt
greet: function(){
  let self = this;   
  return function(){
        return 'hello' + ' ' +  self.name;  
  }      
}
//end of excerpt

An alternate solution is to explicitly call bind(this) on the closing bracket of a function.

//code excerpt
greet: function(){
  return function(){
        return 'hello' + ' ' +  this.name;  
  }.bind(this)      
}
//end of excerpt

It looks ugly, but it works.

Pro Tip: Remember the new ()=> syntax? The example above gives a good example of why we need auto binding. Before, you had to remember to bind this in a variable like we had to do earlier. Now, you just use the new syntax and, wala!, you have a functioning this keyword. Try it out by rewriting the closure.

The final solution is to use the Es6 arrow function.

//code excerpt
greet: function(){
  let self = this;   
  return ()=>{
        return 'hello' + ' ' +  this.name;  
  }      
}
//end of excerpt

Note: Using the arrow function on the outer anonymous function destroys context. Because the arrow function binds automatically, you will be binding this to a context outside of the person object. So, this.person would no longer work.

IIFE

A function that calls itself is called an Immediately Invoked Function Expression(IIFE).

(function(){
  return 'hello'; //'hello'
}());

You can still do anything that you can do with other functions. You can set parameters and use the "invoker" () to feed in data.

(function(name){
  return name;   // 'hi'
}("hi"));

You can set an IIFE to a variable, but you have to declare the name. You don't have to invoke it though.

var greet =
(function(name){
  return name;   
}("hi"));

greet // 'hi'

Function Mania

We can use IFFE's and closures, combined with anonymous functions, to create an android.

//function expression
let android = (function(){
    //==private
    this.name = "Mark VI";
    //declaration
    function addStrings(){
       return "hello" + " " + this.name;
    }
    function setName(name){
      this.name = name;
    }
    //==public: we're just returning an object.
    return {  //anonymous functions
       setName:(name)=>{
          return setName(name);
        },    
        greet: ()=>{
            return addStrings();
        }
    }
}());//IIFE

android.setName("Raj");
android.greet(); //'Hello, I'm Raj'

The code above takes advantage of all that functions give us to produce a functioning object. It manages its own state, meaning that any changes we make will be saved. So, if we set a new name, and tell the android to greet us, it will greet us with that new name. That's some powerful stuff! We will learn more about object oriented programming in another chapter.

Note: Oftentimes, developers wrap JavaScript code with an IFFE if they want their code to run without having to be triggered by an event.

Summary

It may be hard to keep track of all of these different type of functions, so let's list the different function types.

Declared functions
Anonymous functions
Callbacks
Closures
Immediately Invoked Function Expressions

Challenge: write a program that utilizes all of these different functions

Fictional Q&A about JavaScript Hoisting

HowToCodejs — Mon, 28 May 2018 20:31:31 +0000

Q: Here's a question I'd like answered. Why does this work? What is this Jedi nonsense?


 sayMyNameSayMyName('Morty'); // 'I said your name, Morty.'


function sayMyNameSayMyName(name){
   return `I said your name,${name}.`;
}

A: Hoisting.

Q: Yeah, yeah, but what is hoisting exactly?

A: I will attempt to utilize the gerund that labels this quirky phenomenon to help with the definition. Here goes. ahem Declarations, whether they are a variable or function, are lifted up to the top of your program.

Q: Okay, that's digestible. Sort of. But wait...so you're telling me that this can't be hoisted with the Force?


 sayMyNameSayMyName('Morty'); // TypeError: undefined is not a function

 var sayMyNameSayMyName = function(name){
   return `I said your name,${name}.`;
}

A: Well, you see, declarations get special treatment. Assignments are second class, so to speak. They don't get the privilege of being hoisted.

Q:But why?

A:It's the execution context. That's to blame.

Q:Execution what?

A: Every line of code has a context. There are two key contexts to keep in mind. You have the global and the function context. It looks like this:


/*Global--woohooo I'm freee*/

two(); // 2

function two(){
 /*Function
   ========
*/

 return 2;  


}

Q: Wait. Context is the same as scope, right?

A: Sigh

You have much to learn young Jedi. No, scope refers to access. If a variable is declared in a global scope, it can be accessed by functions or blocks. Functions are unicorns because they create their own scope. But that differs from context.

You see, we can all say that we are from planet Earth. That is our global context. But we cannot all say that we are from Washington DC. That is the function context. In JavaScript, you can determine the current context with the this keyword.

Q: So what does context have to do with hoisting?

A: Yes, so...

First, imagine that the interpreter is an alien who found your signal and is now looking for you. The alien would start on planet earth, our global context. There are seven continents on Earth. It might start in North America.

Q: Why?

A: It loves North America's bizarre geometry.

Anyway, it will then create a scope chain containing your possible country, then your state, then your city, then your street.

Now, let's try to look within the mind of JavaScript's interpreter. When the interpreter reads code, it automatically enters the global context.

The interpreter does something similar to the alien's search tactics by first looking for a function invocation(the signal). It won't execute it until it can create the context(find your info).

There are two stages the interpreter goes through to accomplish its mission: the creation stage and the execution stage.

1) Mind you, we're entering the creation stage.

A function can have multiple functions within it, so the interpreter will initialize a scope chain(country,state,city,street).

It will create a variable object to hold all sorts of arguments, parameters, and function/variable declarations.

It then creates this to store the current context.

This is an oversimplification. We'll simplify it further by only concerning ourselves with how the interpreter deals with function declarations versus variable declarations.

Function:

When the interpreter's nose bumps against a function keyword, it looks for the name. It then stores a reference to that function name in variables object.

Variable:

When the interpreter's nose bumps against a var, let, or any keyword associated with variables, it first stores the variable name in variable objects. Then it automatically initializes it with undefined.

Can you start to see how assigning a function to a variable and hoping it will be hoisted does not work? When we invoke myNameIs(name), the interpreter will find our function expression, but it will only read in the variable name and assign undefined to it.


 sayMyNameSayMyName('Morty'); // 'I said your name, Morty.'
 myNameIs('Morty'); // undefined

//
function sayMyNameSayMyName(name){
   return `I said your name,${name}.`;

}


var myNameIs = function(name){
   return `your name is,${name}.`;
}

You'll understand this more in the next stage.

2) The Execution Stage

In the execution stage, values are assigned to variables within the execution context.

The problem with calling myNameis() early is that the interpreter has assigned undefined tomyNameIs() in the creation stage. If you had invoked myNameIs() after the function expression, the interpreter would have had time to assign the value of myNameIs() within the global context during the execution stage.

Invoking sayMyNameSayMyName() works because a reference to the declared function is stored in the creation stage. When the code is executed, we're able to run it without a problem.

Conclusion

Q: So...hoisting is all about execution context?

A: Yep.

Control Flow: The Beginner's Guide

HowToCodejs — Sat, 26 May 2018 17:22:27 +0000

There comes a point in time when you need to rely on automated tasks to run code. Think of the traffic lights that control traffic, saving cities from the hassle of appointing a traffic cop on every crossroad. Or the assembly line which performs mundane tasks at incredible speeds.

Similarly, conditionals and loops allow us to write effective and efficient code. The reason why the term control flow is used is because the interpreter reads code from top to bottom. Step by step.

When you write a bunch of statements like,

 let firstVar = 'dummy';
 let secondVar = 'bozo';
 let thirdVar = 'stoog';

 console.log(firstVar);
 console.log(secondVar);
 console.log(thirdVar);

The interpreter reads the code from top to bottom and executes them in that order. This would be fine if we didn't have to account for the fact that users will interact with our app. Humans, unlike robots, can be don't interact with our app they way we want them to, so we have to plan for this by setting up conditions.

Think of conditionals as forks in a road. One conditional you may be familiar with by now is the if statement. Let's try to use it in a scenario where a user would interact with our app.

If/else

Suppose we've been tasked with building a submission form for a pet daycare called Pet Nirvana. One of the questions that CEO Larry Davis wants to ask his potential costumer is, 'how many pets do you have?'.

var answer = prompt("how many pets do you have?");
alert(answer);

Pro tip: The prompt method takes in a response from a user and returns the user's input. We can use it to test user input. Once upon a time, the alert method used to be used to test output, but console.log() took over that role.

We'd assume that the user would enter a number, but what if someone wanted to enter a long string just to mess with us.

Without control flow, this is what we might get from a malicious user: DROP/*you got jacked!*/users

That little line of SQL code can drop all of the users in a database. That's just one example. Really, all it takes is a simple string to break our app.

Imagine if we wanted to calculate the average pets per owner so that Mr. Davis can know how much he should be spending on supplies.

Don't worry about the functions. Copy the code below into the editor and try entering a number.

var pets = 35;
var owners = 15;
var petsPerOwner = average(pets, owners);
//======Pet Info Form
var answer = prompt("how many pets do you have?");
//============
updateAvg(answer) // update based on answer, add new owner

console.log(`There are now ${petsPerOwner} pets per owner at Pet Nirvana `)

//============
//Functions are hoisted up in JavaScript.
//We'll deal with 'em later

function average(total, number){
    return total / number;
}
function updateAvg(newNum){
  pets += Number(newNum); // register new pet(s)
  owners += 1 // register new owner
  petsPerOwner = Math.ceil(average(pets, owners)); // find new average, round up
}

You should've received a nicely rounded average. Now, try to insert a random string into the prompt.

You should get "There are now NaN pets per owner at Pet Nirvana"

Pro tip: The specific error originates at the Number() function. The function forces a number that's type string ('3') into type number
(3). Whenever we receive user input, it'll most likely be in the form of a string. So Number() comes in handy when we're expecting a number. If an input is a normal string of words, and we try to coerce it into a number, we get NaN.

This might not appear to be a big deal, but in the real world this would be a disaster. We've lost access to important information just because we couldn't filter data.

There has to be control over the data we'd like to work with.

if/ else

Thankfully, we have if/else statements.

var answer = prompt("how many pets do you have?");
if(isNaN(answer)){
    alert("Error: input a number");
}else{
  updateAvg(answer) // update based on answer, add new owner
  console.log(`There are now ${petsPerOwner} pets per owner at Pet Nirvana `)
}

Instead of taking in any ol' response, we're able to control the flow of data by checking if the answer is a number. Remember our NaN error? It's the error you get when you try to perform incompatible arithmetic operators on strings. Any block of code within the if statement will automatically execute if the condition is true.

Note: There's no need to write isNaN(answer) == true because the if statement can evaluate the truthiness of a value.

"hello" / 4; //> NaN

Well, there's a built-in function called isNaN() that checks whether or not a data type is a number. If the data type is not a number, it returns true. Otherwise, it returns false.

Let's translate the code we just wrote into pseudo code for better understanding.

/*
If the answer is not a number
     output an error
Else(otherwise)
    update the average
*/

Short Circuiting

There's an alternative way to control the flow of data. We can short circuit the OR operator.

 isNaN(answer) || (petsPerOwner = updateAvg(answer));
console.log(`There are now ${petsPerOwner} pets per owner at Pet Nirvana `);

The OR operator looks for the first truthy value. When it finds it, it breaks out of the condition. So, if there's ever the case that the answer is not a number, we wont have to update the average.

The problem here is that answer still holds the unwanted value, limiting what we can do with that variable down the line. You'll also notice that there was no way of giving the user any feedback. Short circuiting the OR operator is a nifty trick, but it's not the best at controlling data flow.

else if

What if we want to check for more than two possible conditions? What if the CEO of Pet Nirvana also wants to warn pet owners that the company can only accommodate 3 pets per owner, for now. We would now not only need to check for the type of data the users are entering, we would also have to warn owners who have over four pets about the limit.

An else if statement will be useful. You can chain as many of them together as you want.

if(/*first condition*/){

}else if(/*second condition*/){

}else if(/*third condition*/){

}

Why don't we try pseudo coding our solution first before we begin coding?

/*
If the answer is not a number
     output an error
Else if the answer is greater than three     
    warn the user that they have too many pets
Else(otherwise)
    update the average
*/

Let's try it out on our code. When you input a number greater than 3, you should get a warning.

var answer = prompt("how many pets do you have?");
if(isNaN(answer)){
    alert("Error: input a number");
}else if(Number(answer) > 3){
  alert("Sorry, we currently only accept 3 pets");
}
else{
  updateAvg(answer) // update based on answer, add new owner
  console.log(`There are now ${petsPerOwner} pets per owner at Pet Nirvana `)
}

Task

Oh, oh. There was a breakdown in communication between you and your client. Apparantly, he wants the average to be updated even if an owner's total number of pets exceeds the limit, but he want's to ask the user if they're okay with the limit before doing so.

Pseudocode has been provided for you.

/*
Else if the answer is greater than three   
  Prompt the user and ask if they're ok with the limit
  If the prompt equals yes
     update the average

*/

Switch Statements

As you continue to work with if statements, you might come across this type of code:

if (x == "case 1") runThis();
else if (x == "case 2") runThat();
else if (x == "case 3") runThis();
else if (x == "case 4") runThat();

If you're dealing with so many cases, it may be better to use a control flow construct called switch.

A basic switch statement begins with the initial value, then offers up case blocks with an optional default.

A case statement is just a reader-friendly if statement.

let greeting = 'hello'
switch(greeting){
  case 'hello': // is the same as if(greeting === 'hello')
    //code goes here
    //break

  default: // is the same as else
}

Here's a more fleshed out example for you to munch on.

let number = 2;

switch(number) {
  case 1:
    console.log("this is one");
    break;
  case 2:
    console.log("this is two");
    break;
  case 3:
    console.log("this is three");
    break;
  default:
    console.log("I can't count past three.");
}

//can you guess what the result will be?

The break keywords are crucial. If you leave them out and the condition is met, the switch statement will continue, automatically executing the next case block until it hits a break or runs out of cases.

So, if we had omitted the break in case 2:, we would have gotten:

"this is two"
"this is three"

Think of the switch statement as a pipe. The break statements serve as dams that prevent leakage to other sections of the pipe.

One other thing to note about switch statements is the ability to group cases. Let's expand our greeting example to showcase our chain of cases.


switch(prompt('greet me!')){
  case 'hello':
  case 'hi':
  case 'yo':
    console.log("Hey? What's up?");
    break;
  default:
    console.log("I don't speak your lingo.");
}

Loops

So now we know how to control the data that comes in, but how about the data that goes out to the user?

Mr. Davis now wants to add a rating system to his handlers. He'd like stars to show up under their profile name.

We could render all of the stars manually...

//you can see that Becky has accumulated a rounded average of four stars
var becky = {name:'Becky Star', stars: 4}

//====Profile
//Mock profile name
console.log(becky.name)
//we can render our stars four times
render() + render() + render() + render();
//====
//Dummy render function
function render(){
  return '*';
}

while loop

Or we can use a while loop. A while loop checks if the condition is true and will continue running the block of code until it is false. Make sure your loop can eventually produce a false value. Otherwise, you'll have an infinite loop on your hands.

// you usually have to set a counter and either decrement or increment it till it satisfies the condition.
counter = 4;

while(counter != 0){
  console.log(counter);
  --counter //we decrease the counter by 1
}

Try igniting your creativity. render a row four stars using a while loop. The output should look like this: '****'

Hint: the counter number and the number of stars are significant.

Hint: the plus equals operator will be useful

do while

A do while loop is similar to a while loop except for the fact that you are guaranteed the execution of the block on the first go round.

It's like saying, "definitely do this first(this being the block of code). Now, while my condition is true, continue to do what's in that block.

Let's revisit that pet number prompt and rewrite it using a do while loop.

let answer;
do {
  answer = prompt("how many pets do you have?");

}while(isNaN(answer))

This code will keep badgering a user to enter information if they don't enter a number.

Let's add a condition within the loop to beef up our control of information.

let answer;
do {
  answer = prompt("how many pets do you have?");
  if(isNaN(answer)){
     alert("error: enter a number");
  }
}while(isNaN(answer))

Now we've created a feedback loop that alerts the user of their error and allows them to immediately correct it.

for loop

Simply put, a for loop is a while loop with batteries included. You know how you have to set up a counter outside of the loop and then make sure you decrement or increment it?

With a for loop, you set everything within a single parameter().

/* first you set the counter*/
//var x = 4;
/* then you set the condition*/
//x != 0;
/*finally, you decrement or increment
depending on your condition
*/
//--x
//Now let's install the batteries
for(var x = 4; x!= 0; --x){
  //we're ready to loop
}

Remember that rendering task you had to do earlier? Here's the solution using a for loop.

//we can see here that Becky has accumulated a rounded total of four stars
var becky = {name:'Becky Star', stars: 4}
var starRow = '';
//====Profile
//Mock profile name
console.log(becky.name)
//rendering with the for loop
for(cnt = becky.stars; cnt != 0; --cnt){
  starRow += render();
}
starRow; // > '****'

//Dummy render function
function render(){
  return '*'
}

Breaking loops

A loop continues to run until the condition is false. Sometimes we might want to break out of the loop--Inception-style--with the keyword break.

//this is a potential infinite loop
while(true){
  console.log("I'm free!");
  break; // phew
}

You might encounter a problem that requires a nested for loop.

var matrix = [[1,2,3],[4,5,6],[7,8,9]];
//prints 1,2,3,4...
for(var outer=0;outer < matrix.length; ++outer){
   for(var inner=0;inner < matrix.length; ++inner){
    console.log(matrix[outer][inner])   
   }
}

Writing a break statement in the inner for loop will break the inner loop, but the outer loop will keep running.

var matrix = [[1,2,3],[4,5,6],[7,8,9]];
//prints 1,2,3,4...
for(var outer=0;outer < matrix.length; ++outer){
   for(var inner=0;inner < matrix.length; ++inner){
      if(matrix[outer][inner] === 2){
        break;
      }   
   }
}

If you want to break completely free of every loop, you need to label your loops. You prepend your for loop with any name you want followed by a colon. Then, when you're ready to break the loop, you append your label name after the break keyword.

labelName: for(){
  for(){
    break labelName;
  }  
}

Here's our modified nested loop.

var matrix = [[1,2,3],[4,5,6],[7,8,9]];
//the for loop can start on a newline
outer:
for(var outer=0;outer < matrix.length; ++outer){
   for(var inner=0;inner < matrix.length; ++inner){
      if(matrix[outer][inner] === 2){
        break outer;
      }   
   }
}

Continuing loops

The continue directive allows us to skip steps in a loop. Perhaps the directive should've been called skip, but, alas, we'll make do with continue.

for (let i = 0; i < 10; i++) {
// if i is even, skip the rest of the code.
  if (i % 2 == 0) continue;

  console.log(i); // 1, 3, 5, 7, 9
}

Pro tip: Curly braces are not required if the block of code can be written in one line.

Summary

We conquered if/else if/else statements, tackled switch statements, and untangled while, do while, and for loops. We also learned how to break loops and continue them. Next, we'll learn how a JavaScript program flows around functions.

Whack-A-Frump

HowToCodejs — Sat, 26 May 2018 10:18:13 +0000

Ronald Frump, the infamous president of Beaver Land, has finally had a game made in his honor. The JavaScript used here is very minimal. Specifically, animejs is utilized for simple positioning animation.

Play the game here:

See the Pen whack-a-frump by Howtocodejs (@howtocodejs) on CodePen.

Challenge: Improve on the game by increasing the difficulty.

JavaScript Variables: The Beginner's Guide

HowToCodejs — Thu, 24 May 2018 18:23:53 +0000

you can access this lesson at howtocodejs.com

If you've ever had the pleasure(or displeasure) of sitting through an Algebra 1 class, you've probably heard about variables. You know, x + 4 = 6 and all that good stuff. Don't worry. JavaScript variables are much less scarier. You get to declare them so that you know exactly what they are. And, for the love of all that's holy, don't name your variables x or y or z. Give them reader-friendly names so that you're not staring at a quadratic equation by the time you're finished coding.

Let's think of numbers, strings, and booleans as Snap chat photos that ghost away after a short period. They don't stay around long enough to be useful. If you want to use the same data, you'd have to re-type it somewhere else in your JavaScript file.

Imagine having to write this formula over and over again: 1/2(60 * 120);

Or this really long string: "superkalafragilisticespialadocious";.

A variable allows us to save data so that we can use it again.

Let's declare two variables

var triangleArea, poppinsQoute;

Now for some takeaways:

The var keyword creates what's called a global variable. It's like taking a shower in public. Everyone can see you. In JavaScript, we have blocks, like neighborhood blocks.

They often look like this:

// brackets enclose the block
{
  //...code goes here
}


if(true){
  // execute code in this block...
}

Within an if statement, var triangleArea; and var poppinsQoute; can be accessed within the if's block, because we declared them in a global scope.

Think of scope as perspective. From the perspective of the outside, we can't always see what is inside someone's house. But from the inside, we can see everything that's outside.

We shouldn't be able to look inside an if statement and see its local variables. Local variables are variables that are declared within a block.

if(3==3){
 var number = 3;
}

Note: In this example, we've declared and initialized our variable at the same time.

Remember what we discussed about global and local variables. You're probably guessing that if we were to use this variable outside of the if block, we should get an error.

if(3===3){
 var number = 3;
}

console.log(number); // > 3

Wait…we were still able to access the variable outside of the block. Did we just acquire X-Ray vision? So all this talk about local and global variables must be a lie then, right?

Well, the problem with the var keyword is that it loves to expose itself to the global scope. Even if it's defined within a block, it'll still want to be seen by everyone. The only thing that can tame it is a function.

function test(){
  var number = 3;
}
console.log(number); // number is not defined

Pro tip: Being able to read and understand errors is crucial to being able to debug your JavaScript applications. In our case, a ReferenceError occurs when we try to use a variable that hasn't been declared. If we try to use a variable that is out of scope, we also get a ReferenceError.

We will get into functions another time, but all you need to know for now is that functions create their own scope. They're like highly secured mansions.

That's all fine and dandy that functions are so secure, but how do I secure an if statement?

There is a new way to declare variables as of es6. Every so often Ecma International comes up with new ways for us to code in JavaScript. What they've come up with to solve this issue is the let keyword.

Let's use it!

if(3===3){
 let number = 3;
}
console.log(number); // > number is not defined

Great. We got an error! Now we truly have global and local variables.

Going back to our original variable declarations, var triangleArea, poppinsQoute;, you can see that we are able to declare multiple variables at the same time by separating them with a comma. Also, look at how the second word in the variable name starts off with a capitalized letter. This convention is called camel case. It's good to stick to this convention so that your code is legible to you and to others that might look at your code one day.

Assignment

You can initialize a variable by assigning data to it.

let poppinsQoute = "superkalafragilisticespialadocious";

console.log(poppinsQoute); // > "superkalafragilisticespialadocious"

You can also re-assign data to the same variable. This will overwrite the previous data.

let poppinsQoute = "superkalafragilisticespialadocious";

poppinsQoute = "Mary Poppins, practically perfect in every way.";

console.log(poppinsQoute); // > "Mary Poppins, practically perfect in every way.";

Const: A constant friend

The const keyword is yet another way to declare a variable. You would use this keyword if you wanted to tell yourself and other developers that this variable should not change. Perhaps we should redeclare our triangleArea variable.

const TRIANGLE_AREA = 1/2(60 * 120);
//If we try to re-assign it, we'll get an error
TRIANGLE_AREA = 1/2(60 * 180); // > Syntax Error
);

You cannot re-assign data to a constant. The convention is to use all caps so that 500 lines down, someone else working on the same project will know that your variable is a constant.

The Variable Warehouse

We've messed around with variables a little, but we haven't pushed them to the limit. Let's see what we can put inside of a variable.

Numerical statements

const TRIANGLE_AREA = 1/2(60 * 120);

Strings

let poppinsQoute = "superkalafragilisticespialadocious";

Boolean

let true_ = true;

Wait. Why the underscore? See, you can't name a variable anything that is already named by those who've designed the language. These untouchable names include keywords and reserved words. Also, make sure that you don't start your variable names with numbers: 123true.

Logical statements

let check = (2==2&&3==3&&4==4);

The parenthesis is there for readability. You can plug this right into your if statement and it'll work beautifully.

if(check){
 console.log("true");
}

Pro tip: I did not have to type check === true because the if statement automatically checks for truthy values.

Functions

var myFunction = function(){
  return 'hello';
}

Functions can also be assigned to variables. These functions are called anonymous functions because they aren't named.

Arrays

let myArray = [1,3,4,5];

Arrays are a collection of data.

Objects

let myObject = {me: "too", save: "me"};

Objects also hold a collection of data. Actually, everything in JavaScript is an object. Yep, even data types.

Null

let empty = null;

Null means nothing. You can intentionally set null to a variable if you're not expecting the variable to have a type or value.

Other variables

let oldVariable = 25;
let newVariable = oldVariable * 2;

Multiple variables!

var varOne = varTwo = varThree = 1;

Don't try this one at home, because it has unwanted side effects. Variable assignment works from right to left. So in order for varOne to finally receive value, the other two variables are pushed to the global scope automatically. This means even functions won't recognize varTwo and varThree as local variables. This is called leaking and is a pretty big no no.

Closing Note

Variables are here to stay, so make sure you get into the habit of using them. Whenever you find yourself using the same data type repeatedly, try sticking it into a variable. You'll be happy you did.

Challenge: Write a function that return a variable. Don't be afraid to ask Google for anything.

JavaScript Data Types & Operators

HowToCodejs — Wed, 23 May 2018 14:45:51 +0000

Liquid syntax error: Syntax Error in 'raw' - Valid syntax: raw

JavaScript, What Are You?

HowToCodejs — Tue, 22 May 2018 18:13:32 +0000

originally published in codeburst.io by Raji Ayinla, who know develops content for howtocodejs.com. Want to learn JavaScript the fun way? Then come on down to howtocodejs.com.

You're at a job interview, sitting in the HR office of WECode.js.
The hiring manager clears her throat after glancing at your exquisitely detailed resume and asks, "What is JavaScript, Mr/s. JavaScript Developer?"

"A single-threaded non-blocking asynchronous concurrent language," you answer.

"Yes, but what does that mean and how would you explain that to, say, someone on the UX team?"

"…"

Cut!

To avoid the awkward blank stare followed by more computer science buzzwords, we're going to break down exactly what JavaScript is. If you're Mr/s. JavaScript Developer or a newbie who's intimidated by the notion of JavaScript callbacks, everything will be demystified by our web comic. But before that, let us unpack Mr/s. JavaScript Developer's first answer.

What is a single-threaded language?

Simply put, a single threaded language uses a single call stack, meaning that it can only fire one event at a time. If you're not exactly sure how to conceptualize a call stack, just picture a Jenga stack.

Say you've written a list of functions. JavaScript's runtime would then compile the script you've written and sequentially stack the functions like blocks within its call stack. Afterwards, each function that executes is taken from the top of the stack until it reaches the bottom of the stack. There is only one stack. This, ladies and gentlemen, is single-threading.

What is non-blocking, asynchronicity, and concurrency?

Well, let us try to understand what blocking is first. In a nutshell, blocking is the traffic caused by too many synchronous calls. Imagine a narrow exit that funnels drivers into a single lane road. That road is guarded by a traffic police who only allows one car at a time to go beyond his stop sign.

Now imagine the headache you'd have if you're the fifteenth car in line and you have to get to the emergency room. Similarly, websites coded with blocking code make for a clunky user interface.

So we understand what blocking is. Non-blocking is the complete opposite of blocking. Instead of making synchronous calls, a non-blocking language like JavaScript uses asynchronous calls, or, in other words, an emergency lane that allows for a breakup of sequential order so that you can get to the hospital on time.

Here's where things get really interesting.

By wrapping a JavaScript function within a Web API function like setTimeout(), we can let the "secret underworld" of the browser handle this function without forcing it onto the stack. This works because Web APIs are independent of JavaScript's runtime. This concept of having a third party handle code is what concurrency is all about. We use callbacks to make our programs dynamic and prevent the event loop from clogging up.

We've mentioned Web APIs and an event loop. There's also a callback queue. If you're getting slightly confused, don't panic. The comic will explain everything.

Roles

1.JavaScript runtime: a single customer service call operator. He reads from a script, makes the call, and files it onto the stack.

2.Web APIs: a third party data store that holds a message for however long it is instructed to hold it.

3.The callback queue: a loading dock for calls
The event loop: a little green droid with one simple job - check if the stack is empty. If it's empty, take an event from the queue and place it onto the stack. Continue to do so while the condition is true.

The Comic

On a very synchronous day, the data flow is restricted. The "call operator" or the JavaScript runtime has to manually log all of the calls. The call operator has no time to get to the more important functions, like calling his wife or rendering a web page.

On a very asynchronous day, all the call operator has to do is load all of the Web API functions, then he can leave the task to both the Web APIs and the mini droid aka the event loop. The Web APIs store the callbacks until they are ready to be staged onto the call back queue. All the event loop (mini droid) has to do is check if the stack is empty and place the callback onto the stack. Meanwhile, the call operator can focus on more important functions, like dinner with the wife.

Conclusion

You can see why JavaScript devs make a big fuss about callbacks. No one wants their runtime environment to be preoccupied with too many tasks. You can think of callbacks as Gwen Stefani's "Hollaback Girl." JavaScript's runtime sends a shout out to the Web APIs and performs other tasks while waiting for the hollaback, or, in our case, a callback.

Resources

Philip Robert's awesome talk at JSConf EU 2014: https://www.youtube.com/watch?v=8aGhZQkoFbQ
Vector images were Designed by Freepik

Understanding JavaScript's Engine with Cartoons

HowToCodejs — Mon, 21 May 2018 20:00:17 +0000

*originally published in codeburst.io by Raji Ayinla, who know develops content for howtocodejs.com. Want to learn JavaScript the fun way? Then come on down to howtocodejs.com.

Overview

JavaScript is compiled.Yes,you read that correctly.Though, unlike other language compilers that have build stages that allow for early optimization, JavaScript's compilers are forced to compile the code at the last second - literally. The technology used to compile JavaScript is aptly named Just-In-Time(JIT). This "compilation on the fly" has appeared in modern JavaScript engines to speed up the browsers that implement them.

It can get a bit confusing when developers call JavaScript an interpreted language. That's because JavaScript engines have, until recently, always been associated with an interpreter. Now, with engines like Google's V8 engine, developers can have their cake and eat it too - an engine can have both an interpreter and a compiler.

We're going to show you how JavaScript code is processed using one of those new-fangled JIT compilers. What we're not going to show you is the complex mechanisms by which these new JavaScript engines optimize code. These mechanisms include techniques like inlining(removing white space), taking advantage of hidden classes, and eliminating redundancy. Instead, this article will graze the broad concepts of compilation theory to give you an idea of how JavaScript's modern engines work internally.

Disclaimer: you might become a code-vegan.

Language and Code

In order to grok how a compiler reads code, it is helpful to think of the language you're using to read this article: English. We've all encountered the glaring red SyntaxError in our development consoles, but as we've scratched our heads, searching for the missing semicolon, we've probably never stopped to think about Noam Chomsky. Chomsky defines syntax as:

"the study of principles and processes by which sentences are constructed in particular languages."

We'll call our "built-in" simplify(); function on Noam Chomsky's definition.

simplify(quote, "grossly");

//Result: Languages order their words differently.

Of course, Chomsky was referring to languages like German and Swahili rather than JavaScript and Ruby. Nevertheless, high level programming languages are patterned off of the languages we speak. Essentially, JavaScript compilers have been "taught" to read JavaScript by savvy engineers, just as our parents and teachers have trained our brain to read sentences.

There are three areas of linguistic study that we can observe in relation to compilers: lexical units, syntax, and semantics. In other words, the study of the meaning of words and their relations, the study of the arrangement of words, and the study of the meaning of sentences(we've limited the definition of semantics to suit our purpose).

Take this sentence: We ate beef.

lexical unit

Notice how each word in the sentence can be broken down into units of lexical meaning: We/ate/beef

syntax

That basic sentence syntactically follows the Subject/Verb/Object agreement. Let us assume that this is how every English sentence must be constructed. Why? Because compilers must work according to strict guidelines in order to detect syntax errors. So, Beef we ate, though understandable, will be incorrect in our oversimplified English.

semantics

Semantically, the sentence has proper meaning. We know that multiple people have eaten beef in the past. We can strip it of meaning by rewriting the sentence as, We+ beef ate.

Now, let's translate our original English sentence into a JavaScript expression.

let sentence = "We ate beef";

lexical unit

Expressions can be broken down into lexemes: let/sentence/=/ "We ate beef"/;

syntax

Our expression, like a sentence, must be syntactic. JavaScript, along with most other programming languages, follows the (Type) /Variable/ Assignment/Value order. Type is applicable based on context. If you're as bothered as we are by the looseness of type declaration, you can simply add "use strict"; to the global scope of your program. "use strict"; is an overbearing grammarian that enforces JavaScript's syntax. The benefits of using it outweigh the nuisances. Trust us.

semantics

Semantically, our code has meaning that our machines will eventually understand via the compiler. In order to achieve semantic meaning from code, the compiler must read code. We'll delve into that in the next section.
Note: Context differs from scope. Explaining further would go beyond the "scope" of this article.

LHS/RHS

We read English from left to right while the compiler reads code in both directions. How? With Left -Hand-Side(LHS) look-ups and Right-Hand-Side (RHS) look-ups. Let's break them down.

LHS look-ups focus are the "left hand side" of an assignment. What this really means is that it is responsible for the target of the assignment. We should conceptualize target rather than position because an LHS look-up's target can vary in its position. Also, assignment does not explicitly refer to the assignment operator.

Check out the example below for clarification:\

function square(a){
    return a*a;
}
square(5);

The function call triggers an LHS lookup for a. Why? Because passing 5 as an argument implicitly assigns value to a. Notice how the target can't be determined by positioning at first glance and must be inferred.

Conversely, RHS look-ups focus on the values themselves. So if we go back to our previous example, an RHS lookup will find the value of a in the expression a*a;
It is important to keep in mind that these look-ups occur in the last phase of compilation, the code-generation phase. We'll elaborate further once we get to that stage. For now, let's explore the compiler.

The Compiler

Think of the compiler as a meat processing plant with several mechanisms that grind the code into a package that our computer deems edible or executable. In this example, we will be processing Expression.

Tokenizer

First, the tokenizer dissects code into units called tokens.

These tokens are then identified by the tokenizer. A lexical error will occur when the tokenizer finds an "alphabet" that does not belong to the language. Remember, this is different from a syntactical error. For example, if we had used an @ symbol instead of an assignment operator, the tokenizer would've seen that @ symbol and said, "Hmmm…This lexeme is not found within JavaScript's lexicon… SHUT EVERYTHING DOWN. CODE RED."

Note: If this same system is able to make associations between one token and another token, and then group them together like a parser, it will be considered a lexer.

Parser

The parser looks for syntactical errors. If there are no errors, it packages the tokens into a data structure called a Parse Tree. At this point in the compilation process, the JavaScript code is considered to be parsed and is then semantically analyzed. Once again, if the rules of JavaScript are followed, a new data structure called an Abstract Syntax Tree(AST) is produced.

There is an intermediary step where the source code is transformed into intermediate code - usually bytecode - by an interpreter, statement by statement. The bytecode is then executed within a virtual machine.
Afterwards, the code is optimized. This involves the removal of white space, dead code, and redundant code, among many other optimization processes.

Code-Generator

Once the code is optimized, the code-generator's job is to take the intermediate code and turn it into a low level assembly language that a machine can readily understand. At this juncture, the generator is responsible for:

(1) making sure that the low level code retains the same instructions as the source code
(2) mapping bytecode to the target machine
(3) deciding whether values should be stored in register or memory and where values should be retrieved.

This is where a code-generator performs LHS and RHS look-ups. Simply put, an LHS look-up writes to memory the target's value and an RHS look-up reads value from memory.

If a value is stored in both cache and register, the generator will have to optimize by taking the value from register. Taking values from memory should be the least preferred method.

And, finally…

(4) deciding the order in which instruction should be executed.

Final Thoughts

One other way to understand JavaScript's engine is to look at your brain. As you're reading this, your brain is fetching data from your retina. This data, transferred by your optic nerve, is an inverted version of this web page. Your brain compiles the image by flipping it so that it is interpretable.
Beyond just flipping images and colorizing them, your brain can fill in blank spaces based on its ability to recognize patterns, like a compiler's ability to read values from cached memory.

So if we write, please visit our website ______,you should easily be able to execute that code.

Oh, and say hello to Lex. Our built-in interactive JavaScript editor.

Resources

Anatomy of a Compiler by James Alan Farrel
You Don't Know JS Chapter 1
How JavaScript Works
Compiler Design