|

Create or Edit festival Post

Title

Post name[used as URL tag]

Keywords

Price

Quota

<h3>Introduction</h3><p>Functions are core to JavaScript — they encapsulate logic, allow reuse, and form the building blocks of modular code. This guide covers:</p><ol><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Different ways to define functions</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Arrow functions</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Function parameters and default values</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>How functions are invoked</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Understanding the this keyword in function contexts</li></ol><h2><br></h2><h2>1. Function Definition</h2><p>There are several ways to define a function in JavaScript:</p><p><strong>1.1 Function Declaration</strong></p><div class="ql-code-block-container" spellcheck="false"><div class="ql-code-block" data-language="plain">function greet(name) {</div><div class="ql-code-block" data-language="plain">  return `Hello, ${name}!`;</div><div class="ql-code-block" data-language="plain">}</div></div><p>This form is hoisted, meaning you can call it before its declaration in the code.</p><p><strong>1.2 Function Expression</strong></p><div class="ql-code-block-container" spellcheck="false"><div class="ql-code-block" data-language="plain">const square = function(x) {</div><div class="ql-code-block" data-language="plain">  return x * x;</div><div class="ql-code-block" data-language="plain">};</div></div><p>Function expressions are not hoisted in the same way; the variable must be defined before being invoked.</p><p><strong>1.3 Named vs Anonymous Functions</strong></p><ol><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Named functions have an identifier (e.g. function foo() { … }).</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Anonymous functions do not have a name (e.g. function(x) { … }), common in expressions and callbacks.</li></ol><h2><br></h2><h2>2. Arrow Functions</h2><p>Arrow functions provide a shorter syntax and lexical this binding.</p><div class="ql-code-block-container" spellcheck="false"><div class="ql-code-block" data-language="plain">const add = (a, b) => a + b;</div></div><p><strong>Variants:</strong></p><ol><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>With a single parameter: x => x * 2</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Without parameters: () => 3.14</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>With multiple statements:</li></ol><div class="ql-code-block-container" spellcheck="false"><div class="ql-code-block" data-language="plain">const randomBetween = (min, max) => {</div><div class="ql-code-block" data-language="plain">  const range = max - min;</div><div class="ql-code-block" data-language="plain">  return Math.floor(Math.random() * range) + min;</div><div class="ql-code-block" data-language="plain">};</div></div><p><strong>Key Characteristics:</strong></p><ol><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Arrow functions do <strong>not</strong> have their own this; they inherit this from the surrounding (lexical) context.</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>They also do not have their own arguments object, super, or new.target.</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Cannot be used as constructors (cannot use new with an arrow function).</li></ol><h2><br></h2><h2>3. Function Parameters</h2><p>Parameters are the names listed in function definitions; arguments are the values passed when the function is invoked.</p><p><strong>Default Parameters</strong></p><p>You can set defaults:</p><div class="ql-code-block-container" spellcheck="false"><div class="ql-code-block" data-language="plain">function greet(name = "Guest") {</div><div class="ql-code-block" data-language="plain">  return `Hello, ${name}!`;</div><div class="ql-code-block" data-language="plain">}</div></div><p>If no argument or undefined is passed, the default is used.</p><p><strong>Rest Parameters</strong></p><p>You can capture an indefinite number of arguments:</p><div class="ql-code-block-container" spellcheck="false"><div class="ql-code-block" data-language="plain">function sum(...numbers) {</div><div class="ql-code-block" data-language="plain">  return numbers.reduce((acc, n) => acc + n, 0);</div><div class="ql-code-block" data-language="plain">}</div></div><p>Here numbers is an array of all passed arguments.</p><p><strong>Parameter vs Arguments Behavior</strong></p><ol><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>If fewer arguments than parameters are passed, missing parameters become undefined.</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Extra arguments are ignored unless captured (via arguments or rest).</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>arguments object exists in traditional functions, not arrow functions.</li></ol><h2><br></h2><h2>4. Function Invocation</h2><p>How you call a function impacts its behavior, including the this context.</p><p><strong>4.1 Simple Invocation</strong></p><div class="ql-code-block-container" spellcheck="false"><div class="ql-code-block" data-language="plain">greet("Alice");</div></div><p>Here this refers to the global object (or undefined in strict mode).</p><p><strong>4.2 Method Invocation</strong></p><p>When a function is called as a method of an object:</p><div class="ql-code-block-container" spellcheck="false"><div class="ql-code-block" data-language="plain">const user = {</div><div class="ql-code-block" data-language="plain">  name: "Bob",</div><div class="ql-code-block" data-language="plain">  sayHello() {</div><div class="ql-code-block" data-language="plain">    console.log(`Hi, I am ${this.name}`);</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain">};</div><div class="ql-code-block" data-language="plain"><br></div><div class="ql-code-block" data-language="plain">user.sayHello();  // `this` refers to `user`</div></div><p><strong>4.3 Constructor Invocation (with </strong><strong>new</strong><strong>)</strong></p><p>When you use new, a new object is created, and this refers to that new object:</p><div class="ql-code-block-container" spellcheck="false"><div class="ql-code-block" data-language="plain">function Person(name) {</div><div class="ql-code-block" data-language="plain">  this.name = name;</div><div class="ql-code-block" data-language="plain">}</div><div class="ql-code-block" data-language="plain">const p = new Person("Carol");</div><div class="ql-code-block" data-language="plain">console.log(p.name);  // Carol</div></div><p>Arrow functions can’t be used as constructors.</p><p><strong>4.4 </strong><strong>call</strong><strong>, </strong><strong>apply</strong><strong>, </strong><strong>bind</strong></p><p>You can explicitly set this using:</p><ol><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>fun.call(obj, arg1, arg2…)</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>fun.apply(obj, [arg1, arg2…])</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>fun.bind(obj) returns a new function permanently bound to obj</li></ol><h2><br></h2><h2>5. The this Keyword</h2><p>Understanding this is essential to mastering functions.</p><p><strong>5.1 In Function Declarations / Expressions</strong></p><ol><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>In non-strict mode, when called as a standalone function, this refers to the global object.</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>In strict mode, standalone functions have this as undefined.</li></ol><p><strong>5.2 In Method Calls</strong></p><p>When a function is called as a property of an object, this refers to that object.</p><p><strong>5.3 In Constructor Calls</strong></p><p>Inside a constructor function, this refers to the newly created object.</p><p><strong>5.4 In Arrow Functions</strong></p><p>Arrow functions <strong>do not have their own </strong><strong>this</strong>. Instead, this is inherited lexically from the surrounding scope.</p><p>Example:</p><div class="ql-code-block-container" spellcheck="false"><div class="ql-code-block" data-language="plain">const obj = {</div><div class="ql-code-block" data-language="plain">  name: "Dave",</div><div class="ql-code-block" data-language="plain">  sayLater: function() {</div><div class="ql-code-block" data-language="plain">    setTimeout(() => {</div><div class="ql-code-block" data-language="plain">      console.log(this.name); // prints "Dave"</div><div class="ql-code-block" data-language="plain">    }, 1000);</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain">};</div><div class="ql-code-block" data-language="plain">obj.sayLater();</div></div><p>Here, the arrow function in setTimeout uses the this from sayLater’s context (the obj), not the global object.</p><h3><br></h3><h3>Conclusion</h3><p>Functions in JavaScript are versatile. By mastering:</p><ol><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Different ways to define functions</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Using arrow functions and their special characteristics</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Parameter handling (defaults, rest)</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Invocation patterns (call, apply, bind)</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>The behavior of this in different contexts</li></ol><p>you build a strong foundation for writing cleaner, more predictable JavaScript.</p>

Refer to image as [image1] or [image2] or so on in the text.

Image 1

Image 2

Image 3

Image 4

I Agree with the Terms and Conditions

Type the number that you see in image.

Delete this post

Create or Edit festival Post

Member's Sites: