DEV Community

Vinayagam
Vinayagam

Posted on

Introduction to JavaScript Functions (With Arrow Functions)

#javascript #beginners #programming #tutorial

1.Function in JavaScript

A function is a block of code designed to perform a particular task. It is executed when it is invoked (called).A function in JavaScript is a reusable block of code that performs a specific task. It runs only when it is called (invoked).
Functions help us:

  • Avoid repeating code
  • Organize programs
  • Make code easier to understand and maintain

Syntax of a Function

`function functionName(parameters) {
    // code to be executed
}`
Enter fullscreen mode Exit fullscreen mode

example

`function greet() {
    console.log("Hello, Welcome!");
}
greet(); // Function call`
Enter fullscreen mode Exit fullscreen mode

Function with Parameters

function add(a, b) {
    return a + b;
}

console.log(add(5, 3)); // Output: 8
Enter fullscreen mode Exit fullscreen mode

1.What is a function in JavaScript?
A function is a reusable block of code that performs a specific task and runs when called.

2.Why do we use functions?
We use functions to:

  • Reduce code repetition
  • Improve readability
  • Organize code
  • Make debugging easier

3.What are parameters and arguments?

  • Parameters are variables listed in the function definition.
  • Arguments are values passed to the function when calling it.

Example:
function show(name) { // name → parameter
console.log(name);
}
show("Vinayagam"); // "Vinayagam" → argument

4.What is the difference between return and console.log()?

  • return sends a value back to the function caller.
  • console.log() prints the output to the console.

5.What are the types of functions in JavaScript?

  • Named Function
  • Anonymous Function
  • Arrow Function
  • Function Expression
  • Callback Function

2.Arrow Function in JavaScript

  • An arrow function is a compact syntax for writing function expressions using the => (arrow) operator.
  • An arrow function is a shorter and modern way to write a function in JavaScript. It was introduced in ES6 (ECMAScript 2015).
  • Arrow functions make code cleaner and more readable. Syntax const functionName = (parameters) => { // code };

Normal Function

function add(a, b) {
    return a + b;
}
console.log(add(5, 3));
Enter fullscreen mode Exit fullscreen mode

Arrow Function

const add = (a, b) => {
    return a + b;
}
console.log(add(5, 3));
Enter fullscreen mode Exit fullscreen mode

1.Why were arrow functions introduced in JavaScript?
Answer:
Arrow functions were introduced to:

  • Reduce code length
  • Improve readability
  • Handle the this keyword more effectively
  • Make callback functions simpler

2.What are the main features of arrow functions?
Answer:

  • Shorter syntax
  • Implicit return (no need for return in single-expression functions)
  • No own this binding
  • Cannot be used as constructors
  • Do not have arguments object

3.What is implicit return in arrow functions?

Answer:
Implicit return means returning a value without using the return keyword. It works when the function has only one expression.

Example:
const add = (a, b) => a + b;

4.How does this behave in arrow functions?
Answer:
Arrow functions do not have their own this. They inherit this from the surrounding (parent) scope. This is called lexical scoping of this.

5.How does this behave in arrow functions?
Answer:
Arrow functions do not have their own this. They inherit this from the surrounding (parent) scope. This is called lexical scoping of this.

Top comments (0)