Have just finished Headfirst Javascript today. Just wanna say that where were you years ago, Eric Freeman? My life, my brain would have been entirely different if I had been aware of such an amazing treasure of yours. My hat, my soul is off to you and your collaborators for crafting the real true heritage.
By the way, I’d like to make a summary of very basic key points of JS here, which might set a bright line between a developer and an engineer, in hope that this treasure might find its way to the right people who are trying to achieve the peak of programming, so they can find themselves enlightened as I was. And to be honest, this is the weirdest programming language I have ever seen.
- Parameters and Arguments are different things in a function even though they are being understood interchangeably. Parameters are shaped once and for all when defining a function. Arguments, however, could be passed into functions as many times as possible with different values. For instance:
function cook(material) {
var status = 'cooked';
return status + material;
}cook('potatoes');
cook('rice');
cook('broccoli');
`material` is a parameter. `potatoes`, `rice`, and `broccoli` are arguments.
2. Arguments are passed by value into the function. What da heck is that? That means whenever a function gets passed an argument, the argument’s value will be copied, which is then passed into the parameter. The rest of the process will be the business of the parameter. In a nutshell, the value of the argument remains unchanged. For example:
function cook(material) {
var status = 'cooked';
return status + material;
}first_material = 'potatoes';cook(first_material);
What is going under the hood is that another value ‘potatoes’ is created or copied, then assigned to the parameter `material`:
- first_material = ‘potatoes’
- material = ‘potatoes’
Then the process will work with `material` only in the function body so that the first_material’s value is intact. The same applies to the case where argument and parameter have the same name. For example:
function cook(material) {
var status = 'cooked';
return status + material;
}var material = ‘broccoli’;
cook(material);
We have two variables of the same name here, but one is the argument as a global variable, the other is the parameter as a local variable:
Before assignment:
- material = ‘broccoli’; (global variable — the one outside the function)
- material = *undefined*; (local variable ~ parameter — the one inside the function)
After assignment:
- material = ‘broccoli’; (global)
- material = ‘broccoli’; (local)
3. A global variable has access to everywhere in the flow of execution. If a global variable and a local variable have the same name, the global one will be shadowed by the local one.
var henshin = 'ryuga';function kamenrider(){
var henshin = 'ryuki';
console.log(henshin );
}
The output will be ‘ryuki’ because henshin ‘ryuga’ has been shadowed or prevented by henshin ‘ryuki’.
4. The parameter is the local variable. Hence it will be removed when the function execution is finished.
5. When the execution of a function is done, the variables inside will be removed. But if we accidentally miss the keyword ‘var’ when declaring the variable inside a function, then it becomes the global variable and will continue existing even though the function gets its mission done.
Example 1:
function kamenrider(){
var henshin = 'ryuki';
console.log(henshin );
}kamenrider() ===> 'ryuki'
henshin ===> error: henshin is not defined(Since the henshin is removed when the function is done)
Example 2:
function kamenrider(){
henshin = 'ryuki';
console.log(henshin);
}kamenrider() -> 'ryuki'
henshin -> 'ryuki' (Since we miss the `var` keyword, henshin becomes global variable.
6. Anonymous function (Function expression) and Function Declaration result in the same thing, a function reference (pointer) assigned to a variable. Let’s take a look at the insight:
- Function declaration:
function fly(passenger){
console.log(‘welcome’);
}What is happening inside is that the browser (JS run in the browser) will create a variable name `fly`, then it assigns `fly` the reference or pointer to function () {console.log(‘welcome’). What it means is that whenever we define a function, a variable is created holding a function reference. More precisely, function reference is the address location of the function in the memory.
- Function expression or Anonymous function:
var fly = function() { console.log(‘welcome’) };As can be seen, the anonymous function assigned to `fly` does not have a name (hence it is called ‘anonymous’ ~ no name). So what is the big deal here, dude? We can use whichever we want, they result in the same thing right?
The true difference is exposed when you really understand how the browser works. In fact, the browser scans your code TWICE before it EXECUTES. The first scanning aims to detect all FUNCTION DECLARATION and STASH them for later use. The second scanning is the one that executes your code. So the following case will lead to the error:
fly();
var fly = function() { console.log(‘welcome’) };The browser will tell you that fly is not a function (yet). Why? Because the first scan has passed and the browser saw no function declaration. Then in the second one, it starts executing fly(), which is very confusing to them so they will throw into your face a bug. To fix the problem, switch the order:
var fly = function() { console.log(‘welcome’) };
fly();7. Whenever an event of an object (usually a DOM object) is fired, it will pass an event object to the event handler. That’s why sometimes you will see the word `e` as a parameter in the event handler. For example:
var button = getElementById(‘button’);
button.onclick = handleClick;handleClick(e) {
console.log(e.target);
console.log(‘The button was clicked!!!!’);
}
By default, the first parameter of an event handler (callback function) is ALWAYS an EVENT OBJECT (if declared). Even when we do not declare the event object parameter for the event handler, the event object still gets passed into the callback function, you can check what I have just said via the `window` object and remove the `e` parameter:
var button = getElementById(‘button’);
button.onclick = handleClick;handleClick() {
console.log(window.target);
console.log(‘The button was clicked!!!!’);
}
8. When a load of events comes from the user, JS handle event-by-event that is stored in Event Queues. That means if JS gets stuck with something in the middle, the rest of the Event Queue members must be waiting.
9. JS is an asynchronous programming language. That means it will not follow the `law-of-Physics`. For example:
console.log(‘hello’);setTimeout(){ function() {
console.log(‘Another hello inside Timeout function’),
2000 }
};console.log(‘End’);
The output will be as follows:
Hello
End
Another hello insider Timeout function
10. The strict comparison operator is faster than Loose one. For example, === is faster than ==. Because when you use the ==, the browser or the engine must convert the values of both side being compared into the integer type. For example:
4 == ‘4’ will return True. The process behind the curtain is that ‘4’ of string format will be converted into ‘4’ of integer format before the comparison is conducted while 4 === ‘4’ will return False because the conversion process is ignored.
You can continue to read part 2 here.
