Articles
- JavaScript Functions — Understanding The Basics — Brandon Morelli done
- The battle between Function Scope and Block Scope — Marius Herring done var problem
- JavaScript Scope and Closures — Zell Liew done
- When to use a function declaration vs. a function expression ― Amber Wilkie done
- Functions / Function scope ― MDN main for closure
Functions
- Functions are executed when they are called/invoked.
- Functions always returns value. If value isn't given, it returns
undefined
. - Functions are objects. ### Defining functions #### Function Declaration
- Named functions are declared.
- Hoisted
add(1,2) // 3
function add(value1, value2) {
console.log(value1 + value2);
return 1;
}
- Created in global scope #### Function Expression
- Named or anonymous function are possible.
- Not hoisted
addNumber(2,3); // "ReferenceError: Cannot access 'addNumber' before initialization
const addNumber = function (value1, value2) {
console.log(value1 + value2);
return 1;
}
Arrow function
- Shorter syntax
- Not create own
this
value
const addNumber = (value1, value2) => {
console.log(this);
return this;
}
addNumber(2,3); // [object Window]
IIFE(Immediately invoked function expressions)
((value1, value2) => {
console.log(value1 + value2);
return 1;
})(2,3);
Scope
Scope defines what variable we can access to.
Global scope
Variables declared outside function, block are all contained in global scope.
POLE; Principle of least exposure
We should minimize the exposure of variables registered in each scope. It means that we should try our best to avoid delcaring variables in global scope. Why?
- Naming Collision
If we declare same name variable twice, it makes some problems. First, with var
, the variable would shadow the previous value assigned. Second, with let
and const
, it would give error.
- Unexpected behavior
Let' say that I declared data array in global scope. Then other developer can easily alter the value.
- Unintended dependency
Let's say that I declared data array for specific function's argument. If other developer uses data array, unintended dependency has occured. If I plan to change this array into object, many parts using this array should be changed.
Local scope
Function scope
var
is function scope. Precisely, Javascript had only function scope before ES6. It exists within the scope of function it's declared.
const password = "3";
function checkIf(input) {
if(input == password) {
console.log(true);
}
else {
console.log(false);
}
}
console.log(password); // 3
checkIf(3); // true
Here, input
parameter is declared in function checkIf
scope. password
variable is declared in global scope which is very vulnerable. So, How can we hide the password
, still accessing to checkIf
function?
function hidePassword() {
const password = "3";
return checkIf;
function checkIf(input) {
if(input == password) {
console.log(true);
}
else {
console.log(false);
}
}
}
console.log(password); // ReferenceError: password is not defined
const testCase = hidePassword();
testCase(3); // true
We hide the password
in hidePassword
function. As checkIf
function is inside the hidePassword
function and returned, we can access to this function.
const testCase =(()=>{
const password = "3";
return checkIf;
function checkIf(input) {
if(input == password) {
console.log(true);
}
else {
console.log(false);
}
}
})();
testCase(3); // true
By using IIFE, we can write it more clearer, shorter.
Block scope
As let
and const
introduced in ES6, both keywords are block scope. {}
becomes scope if it contains let
or const
.
function add(value1, value2) {
{
let value3 = 4;
}
console.log(value3);
}
add(1,2); // "ReferenceError: value3 is not defined"
We have mentioned about POLE. So, it's best to put let
or const
declared variable in block scope as possible.
What is Lexical scope?
JS program processes in two phases; Compilation & Execution.
In compilation, JS Engine parses through the code and checks which variables corresponds to which scope. This means that scope of variables are determined before execution, which we call it lexical scope.
For example,
let a = "3";
console.log(a); // SyntaxError: Unexpected token '.'
let b = ."4";
in this example, if there's no compilation phase, console.log(a)
should work fine. However, as the error was found before execution phase, it return error.
Example
var name = 'zero';
function log() {
console.log(name);
}
function wrapper() {
var name = 'nero';
log();
}
wrapper(); // zero
function log
scope was determined before execution. It is nested in global scope, not wrapper
scope. So, as log
is executed as wrapper
is executed, first, engine looks at variable name
in funciton log
scope. As it is not declared in it, engine looks at outer scope, which is global scope. That's why it returns zero
.
Top comments (0)