Javascript syntax with functions

Question

I'm not sure what this means or how to word the question correctly.

In the first example I could put the variable before the function "numbers1.forEach(...)" but in the second example I could not "num.square()"?

function forEach(array, action) {
  for (var i = 0; i < array.length; i++)
    action(array[i]);
}

var numbers2 = [1, 2, 3, 4, 5], sum = 0;
forEach(numbers2, function(number) {
  sum += number;
});
console.log(sum);
// → 15

var numbers1 = [1, 2, 3, 4, 5], sum = 0;
numbers1.forEach(function(number) {
  sum += number;
});
console.log(sum);
// → 15
// this works!

But this does not work

var square = function(x) {
  return x * x;
};

var num = 12;
console.log(square(num));
// → 144

console.log(num.square());
// → TypeError: undefined is not a function (line 9)
// does not work?

Thanks!

forEach is a built-in method on Arrays. numbers1.forEach() is calling a different method than forEach(numbers2). — Cᴏʀʏ
– Cᴏʀʏ, Commented Mar 4, 2015 at 14:42
forEach is a method of array variables, while square is your own function and not a method of the integer variables. — Matteo NNZ
– Matteo NNZ, Commented Mar 4, 2015 at 14:42

Cᴏʀʏ · Accepted Answer · 2015-03-04 14:58:21Z

2

Syntax-wise, there's no "magic" happening here. You're describing two very different things.

In your first example, you're passing an Array to your own defined forEach method. In the second example, the forEach you're calling is actually a built-in method on Arrays (see MDN). If you changed your forEach to not invoke action, you'll see that yours breaks and the second one still works.

You can achieve this functionality yourself. You could add a function to Number to make your second example work (although this is not a recommended practice, as it could collide with future JavaScript features [and many other reasons] or break existing functionality):

Number.prototype.square = function() {
      return this * this;
};

var num = 12;
var squared = num.square();

alert(squared);

edited Mar 4, 2015 at 14:58

answered Mar 4, 2015 at 14:43

Cᴏʀʏ

108k20 gold badges169 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cᴏʀʏ Over a year ago

@unobf: Agreed, I added a brief notice in my answer.

myaddresstoday Over a year ago

Ah thank you! I forgot about "built-in methods." Cleared up all my confusion.

unobf · Accepted Answer · 2015-03-04 14:45:51Z

0

If you remove the forEach function from your first example, it will still work, that is because the Array type has a builtin forEach function.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Alternatively try to change your forEach function to each and you will see that it will no longer work.

What you are trying to do is add a new method to an existing type. This is not good practice in JavaScript.

answered Mar 4, 2015 at 14:45

unobf

7,2641 gold badge25 silver badges36 bronze badges

Comments

Andre Pena · Accepted Answer · 2015-03-04 14:49:19Z

0

The example with the array works because Array in JavaScript (ECMAScript5) defines a forEach function.

The example with the number doesn't work because Number doesn't define a square function. You can extend Number to include the square function like this:

Number.prototype.square = function(x) {
  return this * this;
};

edited Mar 4, 2015 at 14:49

answered Mar 4, 2015 at 14:43

Andre Pena

59.7k53 gold badges213 silver badges257 bronze badges

2 Comments

Andreas Louv Over a year ago

Why submit in the first place if you know you are gonna edit it? Why not just wait with the initial submit?

Andreas Louv Over a year ago

I think you mean Number.prototype.square?

Collectives™ on Stack Overflow

Javascript syntax with functions

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related