Languages
[Edit]
EN

JavaScript - how to create and use functions?

7 points
Created by:
AnnLen
9180

In JavaScript it is possible to create and use functions in few ways.

1. Function function / class example

// ONLINE-RUNNER:browser;

var action1 = Function('console.log("This is my message...");');
var action2 = Function('console.log(arguments);');
var action3 = new Function('console.log("This is my message...");');
var action4 = new Function('console.log(arguments);');

action1();
action2(1, 2, 3, 'test 1', 'text 2', 'text n');
action3();
action4(1, 2, 3, 'test 1', 'text 2', 'text n');

console.log(action1.name);
console.log(action2.name);
console.log(action3.name);
console.log(action4.name);

Output (with NodeJS):

This is my message...

[Arguments] {
  '0': 1,
  '1': 2,
  '2': 3,
  '3': 'test 1',
  '4': 'text 2',
  '5': 'text n'
}

This is my message...

[Arguments] {
  '0': 1,
  '1': 2,
  '2': 3,
  '3': 'test 1',
  '4': 'text 2',
  '5': 'text n' 
}

anonymous
anonymous
anonymous
anonymous

2. Anonymous function example

2.1. With function name from variable name

// ONLINE-RUNNER:browser;

var action = function() {
    console.log('This is my message...');
};

var sum1 = function(a, b) {
    return a + b;
};

var sum2 = function() {
    var result = 0;

    for(var i = 0; i < arguments.length; ++i) {
        result += arguments[i];
    }

    return result;
};

var print = function(a, b) {
    var text = '';
    
    text += 'a=' + a + ', ';
    text += 'b=' + b + ', ';
    text += 'arguments=[';

    for(var i = 0; i < arguments.length; ++i) {
        if(i > 0) {
            text += ', ';
        }
        text += arguments[i];
    }

    text += ']';

    console.log(text);
};


action();
console.log(sum1(1, 2));
console.log(sum2(1, 2, 3, 4, 5));
print(1, 2, 3, 4, 5);

console.log(action.name);
console.log(sum1.name);
console.log(sum2.name);
console.log(print.name);

Output (with NodeJS):

This is my message...
3
15
a=1, b=2, arguments=[1, 2, 3, 4, 5]

action
sum1
sum2
print

2.2. With own function name

// ONLINE-RUNNER:browser;

var action = function MyFunctionName() {
    console.log('This is my message...');
};

var sum1 = function MyFunctionName(a, b) {
    return a + b;
};

var sum2 = function MyFunctionName(a, b) {
    var result = 0;

    for(var i = 0; i < arguments.length; ++i) {
        result += arguments[i];
    }

    return result;
};

var print = function MyFunctionName(a, b) {
    var text = '';
    
    text += 'a=' + a + ', ';
    text += 'b=' + b + ', ';
    text += 'arguments=[';

    for(var i = 0; i < arguments.length; ++i) {
        if(i > 0) {
            text += ', ';
        }
        text += arguments[i];
    }

    text += ']';

    console.log(text);
};


action();
console.log(sum1(1, 2));
console.log(sum2(1, 2, 3, 4, 5));
print(1, 2, 3, 4, 5);

console.log(action.name);
console.log(sum1.name);
console.log(sum2.name);
console.log(print.name);

Output (with NodeJS):

This is my message...
3
15
a=1, b=2, arguments=[1, 2, 3, 4, 5]

MyFunctionName
MyFunctionName
MyFunctionName
MyFunctionName

3. Arrow function example

Arrow function has been introduced in ES6. This part shows in simple way how to use arrow functions.

3.1. With function body in brackets

// ONLINE-RUNNER:browser;

var action1 = () => {
    console.log('This is my message...');
};

var action2 = (...myArguments) => {
    console.log(myArguments);
};

var sum = (a, b) => {
    return a + b;
};

var print = (a, b, ...myArguments) => {
    var text = '';
    
    text += 'a=' + a + ', ';
    text += 'b=' + b + ', ';
    text += 'myArguments=[';

    for(var i = 0; i < myArguments.length; ++i) {
        if(i > 0) {
            text += ', ';
        }
        text += myArguments[i];
    }

    text += ']';

    console.log(text);
};


action1();
action2(1, 2, 3, 4, 5);
console.log(sum(1, 2));
print(1, 2, 3, 4, 5);

console.log(action1.name);
console.log(action2.name);
console.log(sum.name);
console.log(print.name);

Output (with NodeJS):

This is my message...
[ 1, 2, 3, 4, 5 ]
3
a=1, b=2, myArguments=[3, 4, 5]

action1
action2
sum
print

3.2. Without brackets - with auto-returning of values

// ONLINE-RUNNER:browser;

var action = () => console.log('This is my message...');

var print1 = text => console.log(text);
var print2 = (...myArguments) => console.log(myArguments);
var print3 = (a, b, ...myArguments) => console.log(a, b, myArguments);

var sum = (a, b) => a + b;


action();
print1('This is my custom text...');
print2(1, 2, 3, 4, 5);
print3(1, 2, 3, 4, 5);
console.log(sum(1, 2));

console.log(action.name);
console.log(print1.name);
console.log(print2.name);
console.log(print3.name);
console.log(sum.name);

Output (with NodeJS):

This is my message...
This is my custom text...
[ 1, 2, 3, 4, 5 ]
1 2 [ 3, 4, 5 ]
3

action
print1
print2
print3
sum

4. Calling function / method ways

The ways how to call function (method) has been described in this article.

Merged questions

  1. JavaScript - how to create and use function?
  2. How to create and use function in JavaScript?
  3. How to create and use functions in JavaScript?

See also

  1. JavaScript - different ways to call function

Native Advertising
50 000 ad impressions - 449$
🚀
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

❤️💻 🙂

Join