|
4 | 4 | 2. [Context](#context) |
5 | 5 | 3. [Closure](#closure) |
6 | 6 | 4. [call, apply and bind](#call-apply-and-bind) |
| 7 | +5. [Functions](#functions) |
7 | 8 |
|
8 | 9 | ## Variable scope |
9 | 10 |
|
@@ -192,3 +193,101 @@ var obj = { name: 'John Doe' }; |
192 | 193 | var greetFn = greet.bind(obj); |
193 | 194 | greetFn(); // Hello John Doe |
194 | 195 | ``` |
| 196 | +## Functions |
| 197 | +Functions are the main "building blocks" of the program. They allow the code to be called many times without repetition. |
| 198 | + |
| 199 | +### Function declaration |
| 200 | +A function declaration looks like this: |
| 201 | +``` |
| 202 | +function greet() { |
| 203 | + alert( 'Hello everyone!' ); |
| 204 | +} |
| 205 | +``` |
| 206 | +The `function` keyword goes first, then goes the name of the function, then a list of parameters between the parentheses (empty in the example above) and finally the code of the function, also named "the function body", between curly braces. |
| 207 | + |
| 208 | +There are few points to be noted: A variable declared inside a function is only visible inside that function. A function can access an outer variable as well. But the outer variable is only used if there’s no local one. A function can return a value back into the calling code as the result. |
| 209 | + |
| 210 | +``` |
| 211 | +function sum(a, b) { |
| 212 | + return a + b; |
| 213 | +} |
| 214 | +let result = sum(1, 2); |
| 215 | +alert( result ); // 3 |
| 216 | +``` |
| 217 | +The directive `return` can be in any place of the function. When the execution reaches it, the function stops, and the value is returned to the calling code (assigned to result above). It would not continue further once `return` is reaced. |
| 218 | +### Function declaration hoisting |
| 219 | +Function declarations in JavaScript are hoisted to the top of the enclosing function or global scope. It means they are moved to top of the execution context. You can use the function before you declared it: |
| 220 | +``` |
| 221 | +hoisted(); // logs "foo" |
| 222 | + |
| 223 | +function hoisted() { |
| 224 | + console.log('foo'); |
| 225 | +} |
| 226 | +``` |
| 227 | +### Function parameters |
| 228 | +We can pass arbitrary data to functions using parameters (also called function arguments) . |
| 229 | +``` |
| 230 | +function greet(from, text) { // arguments: from, text |
| 231 | + alert(from + ': ' + text); |
| 232 | +} |
| 233 | +greet('Ann', 'Hello!'); // Ann: Hello |
| 234 | +``` |
| 235 | +If a parameter is not provided, then its value becomes `undefined`. If we want to use a "default" text in this case, then we can specify it after `=` in ES6: |
| 236 | +``` |
| 237 | +function greet(from, text = "Hi") { |
| 238 | + alert( from + ": " + text ); |
| 239 | +} |
| 240 | +greet("Ann"); // Ann: Hi |
| 241 | +``` |
| 242 | +The alternate way to provide default parameter is as follow: |
| 243 | +``` |
| 244 | +function greet(from, text) { |
| 245 | + if (text === undefined) { |
| 246 | + text = 'no text given'; |
| 247 | + } |
| 248 | + alert( from + ": " + text ); |
| 249 | +} |
| 250 | +``` |
| 251 | +### Function expression |
| 252 | +A function expression is very similar to function statement. The main difference between a function expression and a function statement is the function name, which can be omitted in function expressions to create anonymous functions. |
| 253 | +``` |
| 254 | +var greet = function(name) { |
| 255 | + return "Hello " + name; |
| 256 | +} |
| 257 | +``` |
| 258 | +Function expressions in JavaScript are not hoisted, unlike function declarations. You can't use function expressions before you define them: |
| 259 | +``` |
| 260 | +console.log(notHoisted) // undefined |
| 261 | +//even though the variable name is hoisted, the definition isn't. so it's undefined. |
| 262 | +notHoisted(); // TypeError: notHoisted is not a function |
| 263 | + |
| 264 | +var notHoisted = function() { |
| 265 | + console.log('bar'); |
| 266 | +}; |
| 267 | +``` |
| 268 | + |
| 269 | +### IIFE (Immediately Invoked Function Expression) |
| 270 | +An IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined. |
| 271 | +``` |
| 272 | +(function () { |
| 273 | + statements |
| 274 | +})(); |
| 275 | +``` |
| 276 | +It is a design pattern which is also known as a Self-Executing Anonymous Function and contains two major parts. The first is the anonymous function with lexical scope enclosed within the Grouping Operator `()`. This prevents accessing variables within the IIFE as well as polluting the global scope. |
| 277 | + |
| 278 | +The second part creates the immediately executing function expression `()` through which the JavaScript engine will directly interpret the function. |
| 279 | +### Named function expression |
| 280 | +If you want to refer to the current function inside the function body, you need to create a named function expression. This name is then local only to the function body (scope). |
| 281 | +``` |
| 282 | +var math = { |
| 283 | + 'factit': function factorial(n) { |
| 284 | + console.log(n) |
| 285 | + if (n <= 1) { |
| 286 | + return 1; |
| 287 | + } |
| 288 | + return n * factorial(n - 1); |
| 289 | + } |
| 290 | +}; |
| 291 | + |
| 292 | +math.factit(3) //3;2;1; |
| 293 | +``` |
0 commit comments